# Meine erste App

Transloadit ist vielseitig und bietet zahlreiche Möglichkeiten, unsere API zu nutzen. Für eine unkomplizierte Demo verwenden wir standardmäßig eine Webbrowser-Integration mit dem Transloadit-Plugin von [Uppy](/docs/sdks/uppy.md).

Wir erstellen eine einfache Webseite, auf der Sie hochgeladene Dateien auf `1500x500` Pixel skalieren und in Ihrem S3-Bucket speichern können.

## Unser erstes Template

Bitte [erstellen Sie ein neues Template](/c/templates/new/) mit dem Namen `my-first-template` in Ihrem Workspace und speichern Sie darin die folgenden Assembly Instructions:

![](/_next/static/media/copy.04p1cju9qekk_.svg?dpl=dpl_6eiBuj4xKF4BavafxaGyWDmoxdxA)

```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](/docs/robots/upload-handle.md) auf. Dieser Robot empfängt jede von Uppy übermittelte Datei und stellt sie anschließend anderenRobots zur Verfügung. Unter anderem können Sie in diesem Robot eine Dateigrößenbeschränkung festlegen.
2. `crop_thumbed` übernimmt diese Dateien über `"use": ":original"`. Anschließend wird[🤖/image/resize](/docs/robots/image-resize.md) mit Parametern wie`resize_strategy` aufgerufen.
3. `exported` speichert mithilfe von [🤖/s3/store](/docs/robots/s3-store.md) sowohl die ursprünglich hochgeladenen Dateien als auch die skalierten Versionen in Ihrem S3-Bucket. Die Zugangskonfiguration für S3 wird aus Sicherheitsgründen separat in Ihrem Konto erstellt und gespeichert. Sie referenzieren sie über ihren Namen und ersetzen dazu `demo_s3_credentials`.[Weitere Informationen](/docs/topics/template-credentials.md)

###### Hinweis

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

Ersetzen Sie in unserer Uppy-Integration `YOUR_TEMPLATE_ID` durch die ID für Ihr Template. Fügen Sie Folgendes in eine Datei namens `test.html` ein und öffnen Sie sie anschließend in Ihrem Browser:

![](/_next/static/media/copy.04p1cju9qekk_.svg?dpl=dpl_6eiBuj4xKF4BavafxaGyWDmoxdxA)

```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 dafür benötigten Wert erhalten Sie, [indem Sie in Ihrem Konto einen Auth Key erstellen](/c/template-credentials/).

Das war's! ✨ Wenn Sie die Angaben direkt kopiert, eingefügt und ersetzt haben, verfügen Sie nun über einen funktionsfähigen Prototyp. Die Ergebnisse werden im Konsolenprotokoll Ihres Browsers ausgegeben. Außerdem sehen Sie in Echtzeit die Ihrem Konto hinzugefügten [Assemblies](/c/assemblies/). Falls Sie nicht alle Schritte selbst ausgeführt haben, können Sie die Funktion dennoch direkt in dieser[Demo zur Bildskalierung](/demos/image-manipulation/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 sie in Ihr Backend, damit auch andere darauf zugreifen können? Mehr dazu erfahren Sie auf der Seite[Ergebnisdateien speichern](/de/docs/getting-started/saving-conversion-results.md).