# Mi primera aplicación

Transloadit es versátil y existen muchas formas de aprovechar nuestra API. Para elegir un camino sencillo con fines de demostración, usaremos de forma predeterminada una integración con el navegador web mediante el plugin de Transloadit de [Uppy](/docs/sdks/uppy.md).

Crearemos una página web sencilla en la que podrás cambiar el tamaño de los archivos subidos a`1500x500` píxeles y almacenarlos en tu bucket de S3.

## Nuestro primer Template

[Crea un nuevo Template](/c/templates/new/) en tu Workspace, llámalo `my-first-template` y guarda en él las siguientes 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/"
  }
}

```

## Explicación de las Assembly Instructions

Ahora veamos con más detalle el JSON, que contiene tresSteps:

1. `:original` invoca [🤖/upload/handle](/docs/robots/upload-handle.md), que recibirá cualquier archivo que Uppy le envíe y lo pondrá a disposición de otrosRobots. Entre otras cosas, podrías definir un límite de tamaño de archivo en este Robot.
2. `crop_thumbed` recibe esos archivos mediante `"use": ":original"`. Luego invoca[🤖/image/resize](/docs/robots/image-resize.md) con parámetros como `resize_strategy`.
3. `exported` almacena tanto los archivos subidos originalmente como las versiones redimensionadas en tu bucket de S3 con ayuda de [🤖/s3/store](/docs/robots/s3-store.md). Por motivos de seguridad, la credencial de S3 se crea y almacena por separado en tu cuenta. Haz referencia a ella por su nombre y reemplaza `demo_s3_credentials`. [Obtén más información](/docs/topics/template-credentials.md)

###### Nota

Si no tienes un bucket de S3 (ni ningún otro[destino de exportación compatible](/docs/robots.md#service-file-exporting/)), puedes[crear uno](/docs/faq/how-to-set-up-an-amazon-s3-bucket.md) u omitir por ahora elStep `exported`. Nuestro prototipo seguirá funcionando, pero los archivos resultantes se alojarán con nosotros y se eliminarán después de 24 horas.

En nuestra integración con Uppy, reemplaza `YOUR_TEMPLATE_ID` por el ID de tu Template. Agrega lo siguiente a un archivo `test.html` y luego ábrelo en tu navegador:

![](/_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>

```

Notarás que, además de `YOUR_TEMPLATE_ID`, también debemos reemplazar `YOUR_TRANSLOADIT_KEY`, cuyo valor puedes obtener[creando una Auth Key en tu cuenta](/c/template-credentials/).

¡Y eso es todo! ✨ Si copiaste, pegaste y reemplazaste los valores mientras seguías los pasos, ahora tienes un prototipo funcional. Los resultados se muestran en el registro de la consola de tu navegador, pero también puedes ver en tiempo real las [Assemblies](/c/assemblies/) agregadas a tu cuenta. Si no seguiste los pasos, aún puedes probarlo en vivo en esta[demostración de cambio de tamaño de imágenes](/demos/image-manipulation/resize-to-twitter-cover-dimensions/).

Sin embargo, aún no hemos terminado. Los resultados están en tu bucket de S3 y aparecen en el registro de la consola. Pero ¿cómo puedes enviar estos resultados a tu back-end para que otras personas también puedan disfrutarlos? Descúbrelo en la página[Guardar los archivos resultantes](/es/docs/getting-started/saving-conversion-results.md).