# Meine erste App Transloadit ist vielseitig und unsere API lässt sich auf viele Arten nutzen. Für einen einfachen Demo-Ablauf verwenden wir standardmäßig eine Webbrowser-Integration mit dem Transloadit-Plug-in von [Uppy](/de/docs/sdks/uppy.md). Wir erstellen eine einfache Webseite, die Bilder hochlädt und auf `1500x500` Pixel skaliert. Dieses erste Template enthält nur einen verarbeitenden Robot. So erhalten Sie ein Ergebnis, bevor Sie Speicher oder einen größeren Workflow konfigurieren. ## Unser erstes Template Bitte [erstellen Sie ein neues Template](/c/templates/new/) in Ihrem Workspace, nennen Sie es `my-first-template`und speichern Sie darin die folgenden Assembly Instructions: ```json { ":original": { "robot": "/upload/handle" }, "crop_thumbed": { "use": ":original", "robot": "/image/resize", "result": true, "width": 1500, "height": 500, "resize_strategy": "fillcrop" } } ``` ## Erläuterung der Assembly Instructions Sehen wir uns nun das JSON genauer an. Es enthält zweiSteps: 1. `:original` ruft [🤖/upload/handle](/de/docs/robots/upload-handle.md) auf. Dieser Robot empfängt jede von Uppy übergebene Datei und stellt sie anschließend anderenRobots zur Verfügung. Unter anderem können Sie in diesemRobot eine Dateigrößenbeschränkung festlegen. 2. `crop_thumbed` übernimmt diese Dateien über `"use": ":original"`. Anschließend ruft der Step[🤖/image/resize](/de/docs/robots/image-resize.md) mit Parametern wie`resize_strategy` auf. Dies ist der einzige verarbeitende Robot im Template. ###### Hinweis Ergebnisdateien werden vorübergehend bei uns gehostet und nach 24 h entfernt. So konzentriert sich dieses erste Beispiel auf eine einzige Konvertierung. Im nächsten Leitfaden fügen Sie dauerhaften Speicher hinzu. Ersetzen Sie in unserer Uppy-Integration `YOUR_TEMPLATE_ID` durch die ID Ihres Templates. Fügen Sie Folgendes zu einer Datei namens `test.html` hinzu und öffnen Sie diese anschließend in Ihrem Browser: ```html Select Files ``` Neben `YOUR_TEMPLATE_ID` müssen Sie auch `YOUR_TRANSLOADIT_KEY` ersetzen. Den entsprechenden Wert erhalten Sie, indem Sie[in Ihrem Konto einen Auth Key erstellen](/c/template-credentials/). Das war’s! ✨ Wenn Sie die Schritte durch Kopieren, Einfügen und Ersetzen nachvollzogen haben, verfügen Sie jetzt über einen funktionsfähigen Prototyp. Die Ergebnisse werden im Konsolenprotokoll Ihres Browsers ausgegeben. Sie können aber auch in Echtzeit sehen, wie Ihrem Konto[Assemblies](/c/assemblies/) hinzugefügt werden. Falls Sie die Schritte nicht selbst nachvollzogen haben, können Sie die Funktion trotzdem direkt in dieser[Demo zur Bildskalierung EN (English)](/demos/image-processing/resize-to-twitter-cover-dimensions.md) testen. Die temporären Ergebnis-URLs werden im Konsolenprotokoll referenziert. Um diese Dateien dauerhaft zu speichern und die Ergebnisse an Ihr Backend zu senden, fahren Sie mit der Seite[Ergebnisdateien speichern](/de/docs/getting-started/saving-conversion-results.md) fort.