# 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, auf der Sie hochgeladene Dateien auf `1500x500` Pixel skalieren und in Ihrem S3-Bucket speichern.

## 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"
  },
  "exported": {
    "use": [
      "crop_thumbed",
      ":original"
    ],
    "robot": "/s3/store",
    "credentials": "demo_s3_credentials",
    "url_prefix": "https://demos.transloadit.com/"
  }
}

```

## Erläuterung der Assembly Instructions

Sehen wir uns nun das JSON genauer an. Es enthält dreiSteps:

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.
3. `exported` speichert mithilfe von [🤖/s3/store](/de/docs/robots/s3-store.md) sowohl die ursprünglich hochgeladenen Dateien als auch die skalierten Varianten in Ihrem S3-Bucket. Die Zugangsdaten für S3 werden aus Sicherheitsgründen separat in Ihrem Konto erstellt und gespeichert. Sie verweisen über ihren Namen darauf und ersetzen dazu `demo_s3_credentials`.[Mehr erfahren](/de/docs/topics/template-credentials.md)

###### Hinweis

Wenn Sie keinen S3-Bucket oder kein anderes[unterstütztes Exportziel](/de/docs/robots.md#service-file-exporting/) haben, können Sie[einen erstellen](/de/docs/faq/how-to-set-up-an-amazon-s3-bucket.md) oder den `exported` Step vorerst weglassen. Unser Prototyp funktioniert trotzdem, die Ergebnisdateien werden dann jedoch bei uns gehostet und nach 24 h entfernt.

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
<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
  href="https://releases.transloadit.com/uppy/v4.3.1/uppy.min.css"
  rel="stylesheet"
/>
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v4.3.1/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          template_id: 'YOUR_TEMPLATE_ID',
          // To avoid tampering, use Signature Authentication:
          // https://transloadit.com/docs/api/authentication/
          auth: {
            key: 'YOUR_TRANSLOADIT_KEY',
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to waitForEncoding:true this is fired after encoding is done.
      // Alternatively, set waitForEncoding to false and provide a notify_url
      console.log(transloadit) // Array of Assembly Statuses
      transloadit.forEach((assembly) => {
        console.log(assembly.results) // Array of all encoding results
      })
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

```

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/) testen.

Ganz fertig sind wir jedoch noch nicht. Die Ergebnisse befinden sich in Ihrem S3-Bucket und werden im Konsolenprotokoll referenziert. Doch wie gelangen diese Ergebnisse zu Ihrem Backend, damit auch andere sie nutzen können? Das erfahren Sie auf der Seite[Ergebnisdateien speichern](/de/docs/getting-started/saving-conversion-results.md).