Crear un Backend de Aplicación en Pocos Pasos con el Amplify Admin UI

Hola, hoy voy a hablar sobre la AWS Amplify Admin UI, que te permite hacer desarrollo web backend en pocos clics. Soy Alyse Fiddle, soy una Senior Developer Advocate que lidera y administra el equipo de desarrollo de AWS Amplify, y tengo la suerte de trabajar en esta interfaz de administración como parte de mi trabajo, lo cual me parece realmente emocionante. Me siento muy afortunada de poder hacerlo.

Nuestros objetivos para la charla de hoy son construir una aplicación divertida, hablar sobre algunos servicios subyacentes de AWS que se utilizan en esta interfaz de administración, y luego también aprender un poco sobre Amplify. Primero vamos a crear algunos datos, vamos a modelar un esquema backend, luego lo vamos a probar localmente, por lo que puedes hacer este paso sin tener una cuenta de AWS ni nada parecido, y luego lo vamos a implementar en la nube para que cualquiera pueda usar nuestra aplicación, y luego vamos a administrar nuestros datos utilizando la interfaz de administración.

Amplify de AWS es un conjunto de herramientas de AWS dirigidas específicamente a desarrolladores front-end y móviles. Sé que AWS tradicionalmente se ha enfocado principalmente en cosas de back-end, pero esto hará que los desarrolladores como yo o tú que nos enfocamos principalmente en el front-end podamos centrarnos en ello. Y así comenzamos con la interfaz de línea de comandos de AWS Amplify, que te permite aprovisionar estos recursos en la nube utilizando tu línea de comandos. Más recientemente, también hemos lanzado esta interfaz de administración, que es un poco más amigable para alguien que quiere trabajar en el navegador o que quiere usar una herramienta visual para crear primero su back-end en lugar de comenzar en la línea de comandos.

El desarrollo web full-stack está evolucionando. Al comienzo de mi carrera, la web estaba pasando por esta transición en la que comenzamos a usar cada vez más frameworks como Ruby on Rails y Django para crear rápidamente back-ends para nuestras aplicaciones. Y antes de eso, pasó por esta transición en la que ya no era estática y la gente comenzó a usar PHP y ColdFusion para insertar variables en sus plantillas de HTML y hacer las cosas un poco más dinámicas utilizando datos de la base de datos. Y luego, más recientemente, ha habido esta revolución de serverless que ha hecho que ya no necesites administrar tanta infraestructura como solías hacerlo. Y Amplify de AWS combina muchos de los desarrollos de los frameworks y serverless y los combina de la mejor manera para hacer que el desarrollo web sea un poco más fácil. Y me divierto mucho trabajando con este tipo de cosas porque me permite construir más rápido.

Y una nueva revolución dentro del desarrollo web que me emociona mucho es el low code. Y creo que es algo nuevo para los desarrolladores y puede ser un término un poco aterrador porque es como, ¿desaparecerá su trabajo? ¿Se verá radicalmente diferente? No lo creo. Siempre hemos estado desarrollando herramientas para hacer nuestras vidas más fáciles como desarrolladores y veo esto como el siguiente paso, que hacemos generación de código utilizando estos frameworks ya. Como cuando ejecutas NPX create next app, crea un montón de archivos para ti, o si creas una nueva aplicación en Rails, hace lo mismo. Y comienza a generar tu plantilla básica para tu aplicación para que no tengas que escribir lo aburrido una y otra vez. Creo que la generación de código va un paso más allá, donde puedes aprovisionar recursos y crear esquemas basados en esta generación de código y hacer que puedas trabajar en la lógica de negocio divertida en lugar de en el código repetitivo que se repite en cada aplicación. Y es un problema resuelto en cierta medida. Es divertido trabajar en cosas nuevas, es menos divertido trabajar en cosas que ya se han resuelto muchas veces. Así que ahí es donde me emociona mucho el low code donde tal vez podamos tener código que escriba otro código y tengamos que hacer menos de eso nosotros mismos como desarrolladores. Así que cuando pienso en el low code, pienso en las herramientas que nos permitirán desarrollar de una manera más eficiente donde realmente se está generando código. No hay una caja negra ni nada parecido, y hacemos la vida de los desarrolladores más fácil. Así que estoy muy emocionada por eso. La idea de poder escribir una línea de código en lugar de cientos de líneas de código o usar una línea de comandos para generar código o incluso una interfaz de usuario. Así que cuanto menos código, mejor de muchas maneras también, porque el código es realmente costoso. Conduce a mantenimiento y errores y hablo con muchos fundadores de startups y lo más caro al principio es contratar ingenieros de software.

Y creo que el código es obviamente muy, muy poderoso e increíblemente importante, y sé que he centrado mi career en él. Pero tener soluciones que hagan que tengas que escribir menos código personalizado permitirá que más personas creen startups y que más personas sean desarrolladores también y tal vez evolucionen quiénes pueden ser desarrolladores.

Por lo tanto, empoderar a esos desarrolladores con menos código y también pensar primero en los desarrolladores aún dentro de eso. Y nuevamente, esta interfaz de administración que te voy a mostrar no es un juguete frágil. No es extensible ni nada por el estilo. Tiene el poder de AWS detrás de él. Tiene los mismos servicios que usarías sin esta herramienta. Y definitivamente no es un juguete, se escala a medida que tú lo haces.

Entonces, si quieres seguir el proceso conmigo, voy a ir a sandbox.amplifyapp.com. Y hice todo con videos pregrabados para que los gremlins de la demostración no salgan y me atrapen. Pero si quieres seguir el proceso, nuevamente, sandbox.amplifyapp.com, y puedes acceder a esto después para comenzar tu aplicación.

Entonces, nuestro primer paso será crear un database esquema. Y vamos a utilizar una interfaz visual para hacerlo. Aquí fui a sandbox.amplifyapp.com y luego hice clic en comenzar. Y luego voy a seleccionar data, también puedes comenzar con authentication o almacenamiento, pero creo que data tiene mucho sentido. Y luego comenzar con un esquema en blanco. Primero voy a crear un curso y luego agregar un título y una descripción. Ambos serán cadenas. También crearé un video. Entonces vamos a crear una plataforma de cursos video de alguna manera aquí donde hay cursos que tienen videos que les pertenecen. Entonces el video también tendrá un título, una descripción y luego un orden. Y esta vez será un número entero. Puedes ver todos los campos diferentes que aparecieron como fecha, hora y todo eso. Y también puedes hacer que los campos sean obligatorios haciendo clic en ellos y luego haciendo clic en es obligatorio. También puedes convertir los campos en campos de matriz si quieres almacenar varias cosas. Luego puedes agregar relaciones entre tus data. Entonces un curso tiene muchos videos. Entonces un curso tendrá muchos videos dentro de él, pero también puedes hacer relaciones de muchos a muchos o de uno a uno. Luego puedes hacer clic en probar localmente en tu aplicación y puedes elegir entre diferentes tipos de aplicaciones. Entonces soy un desarrollador de JavaScript, me gusta React, así que voy a crear una aplicación de React.

Pero si fueras un desarrollador móvil, podrías usar Android o iOS en su lugar. También podrías usar Svelte o Vue o simplemente JavaScript básico si eso es con lo que estás trabajando también.

Entonces, vas a instalar Amplify CLI y luego descargar el ID del sandbox. Esto se va a vincular a la aplicación de prueba. Y no tengo una cuenta de AWS para este paso. No es necesario tenerla ni nada por el estilo. Todo esto es solo local. Generará código para ti.

Entonces habrá este directorio Amplify. Y dentro de él, también habrá otros archivos. Puedes ver este archivo AWS exports JS. Eventualmente, este tendrá toda la información de configuración, pero aún no se ha generado en este punto. También puedes ver los modelos que se generaron. Estos están en los archivos de tipo index.ts. Es bueno para la experiencia del desarrollador donde puedes importar el modelo y este aplicará los tipos a ese modelo. También hay un esquema GraphQL que se genera, y puedes actualizarlo localmente o en la interfaz de usuario. Sigue un esquema similar a Git, donde haces amplify push para enviar los cambios a la nube, amplify pull para descargar los cambios que hiciste en la nube y que deseas tener en tu aplicación local. Entonces, nuevamente, todo en este punto es solo local. No hay posibilidad de acumular cargos en la nube ni nada de esto, solo está en tu computadora local.

Esto utiliza algunas cosas diferentes. Primero, Datastore. Amplify Datastore es una herramienta muy útil que te permite aprovechar datos compartidos que también están disponibles sin conexión. Se sincronizará automáticamente entre los usuarios si tienes una base de datos configurada, pero también puedes usarlo para almacenar datos locales si deseas tener datos solo sin conexión. De forma predeterminada, utiliza IndexedDB para WebStore, que está en tu navegador. La API para eso puede ser un poco incómoda de trabajar. Y Datastore tiene este buen envoltorio donde puedes sincronizar automáticamente los datos entre IndexedDB y tu base de datos final sin tener que hacer ninguna lógica adicional. Esto está respaldado por AppSync, que es un motor GraphQL en AWS. Y si te gusta usar GraphQL, eso también es parte de esto. Luego, la capa de datos es DynamoDB, que es una base de datos de pares clave-valor y documentos serverless, lo cual son muchas palabras, pero es realmente muy poderoso y también muy escalable. No necesitas saber sobre ninguno de estos.

No es necesario ser un experto en ninguna de estas tecnologías que se utilizan detrás de escena. Solo quería mencionarlas porque no es magia. Esto es lo que respalda todo. Entonces, la siguiente parte es vincular tu backend a tu código. Así que vamos a hacer eso. Llamo a esto desarrollo basado en copiar y pegar porque puedes ver estos fragmentos de código que son generados por Datastore o por la interfaz de usuario de administración.

Una cosa sobre esto, Alie, ¿esto te sorprende o esto es, sí, lo que esperabas? Ahí lo tienes. Siento que es mucho, más de lo que esperaba. Pero es realmente genial que tantos desarrolladores front-end estén incursionando en la nube. Sí, es emocionante. Esperamos que más desarrolladores front-end se adentren en la nube porque puede ser súper interesante. Sí, definitivamente.

Entonces, ¿por qué estás emocionado por el desarrollo de bajo código? Estoy emocionado por el desarrollo de bajo código porque creo que es simplemente una progresión en mi carrera de pasar a estos frameworks que tienen una mejor y mejor experiencia de desarrollo y permiten a los desarrolladores desarrollar su propio código. Y permiten a los desarrolladores hacer cada vez más. Ya sea que se trate de los frameworks con opiniones como Ruby on Rails o Serverless o cualquiera de estas cosas. Y como alguien que solía enseñar código como trabajo a tiempo completo, fui instructor de un bootcamp durante tres años. Es difícil aprender a programar. Requiere una gran rampa de acceso y hay tantas cosas diferentes que debes aprender. Entonces, si lo hacemos más fácil y más fácil y creamos un componente visual de eso, para que más personas puedan ser constructores. Eso es lo que me emociona, esta idea de que podemos ampliar lo que significa ser un desarrollador. Y aún así, necesitamos adaptarnos a los desarrolladores donde se encuentren. Y hay esta idea de generación de código donde tienes código que escribe otro código y eso es una parte importante de lo que hace Amplify. Entonces, si podemos usar una interfaz visual que permita a las personas escribir código real en segundo plano, creo que eso es realmente genial y una gran progresión en el mundo del desarrollo. Sí. Y también hace que las cosas sean más accesibles para las personas y es más divertido en el desarrollo de bajo código.

Y otra pregunta que tenemos para ti es, ¿puedes hablar un poco sobre el lanzamiento de Amplify SSR? Sí. La semana pasada, hace dos semanas, el tiempo es tan difícil de medir. Lanzamos el soporte de renderizado del lado del servidor para Amplify. Ahora puedes alojar aplicaciones con renderizado del lado del servidor. Y detrás de escena, se crea una función Lambda sin servidor en el borde que ejecuta el lado del servidor y actúa como tu servidor. Aunque es serverless. Así que encuentro eso gracioso, como tener el servidor serverless. De todos modos, detrás de escena, serverless tiene servidores. No tienes que preocuparte por ellos. Pero también tenemos una serie de componentes de interfaz de usuario que también pueden funcionar en el lado del servidor. Así como autenticación y algunos de nuestros componentes de data, lo que te permite construir aplicaciones web de alto rendimiento utilizando algo como o usando Next JS. Y hace que el usuario final pueda usar, pueda usar esencialmente HTML. Pero obtienes la gran experiencia de desarrollo de JavaScript y React y todas esas cosas. Así que estoy emocionado por eso.

Sí, suena muy emocionante. La siguiente pregunta es de Iechi. Excelente charla y bien explicada. Parecía bastante similar a Firebase. ¿Cuál es el principal beneficio de utilizar Amplify en lugar de Firebase? Sí, diría que detrás de escena, todo es AWS. Y así tienes una base de datos DynamoDB que se provisiona en la consola de AWS. Y si quieres hacer algo personalizado con DynamoDB, puedes ir directamente allí y personalizarlo desde allí. Lo mismo ocurre con las funciones Lambda. Lo mismo ocurre con S3 y todas estas cosas. Son los servicios completos de AWS bajo el capó. No hay ninguna capa adicional de abstracción ni nada por el estilo. Puedes ir directamente dentro de la consola de AWS y utilizar estos recursos, lo que conduce a una gran capacidad de extensión que se adapta a ti. Nunca tienes que cambiar de Amplify si tu proyecto se vuelve lo suficientemente grande. Así que creo que ese es uno de los grandes beneficios. También diría que nuestro servicio de GraphQL es realmente excelente. Te permite interactuar con tus datos utilizando ese formato. Así que estoy emocionado por eso también. Sí, genial. Así que la gente debería probar Amplify.

La siguiente pregunta es de Johanna Watt. ¿Cómo funciona con el branching y el control de código fuente? Sí, tiene una gran gestión ambiental incorporada. Puedes tener múltiples ramas y tener diferentes entornos dentro de esas ramas. Si quieres tener un entorno de producción, un entorno de prueba y un entorno de desarrollo, puedes tener esos diferentes entornos y luego fusionarlos. Así que tienes diferentes recursos provisionados dentro de ellos. Y aún puedes usar tus ramas de git, puedes trabajar con múltiples desarrolladores, todo eso está incorporado. Hay muchos artículos sobre esto en la documentación si estás interesado en aprender más. También está el componente de alojamiento de frontend, del cual no hablé mucho en esta charla. Pero con eso, tienes la capacidad de volver a implementar cada vez que haces push en GitHub. Así que eso también es una característica muy buena. Y también puedes tener implementaciones de múltiples ramas.

Gracias. Otra pregunta es, ¿hay un componente al configurar TOTP que genera la imagen del código QR? Esa es una gran pregunta. Eso suena como algo más específico para dispositivos móviles, que está un poco fuera de lo que hago como una persona principalmente de JavaScript. Dicho esto, tienes la capacidad de ingresar y escribir tu propio código de autenticación personalizado dentro de una función lambda. Estoy seguro de que podrías implementar algo así dentro de ella.

Gracias. Creo que no tenemos más preguntas. Oh, no, tengo una pregunta más. ¿Podrías hablar más sobre las funciones en general? ¿Cuál es el proceso de usar la aplicación? ¿Un usuario podría agregar funciones? ¿Todas estas serían eficientes? Sí, funcionarían de la misma manera que una función lambda normal de AWS. Por lo tanto, el rendimiento se mantendría igual. Puedes agregarlas en múltiples etapas, por lo que es basado en eventos. Puedes hacer que la función se active cada vez que alguien acceda a una URL, por ejemplo. Para hacer eso, se utilizaría API Gateway. También puedes tener desencadenadores de lambda basados en diferentes eventos. Por ejemplo, cuando se crea un usuario o se crea un elemento en la base de datos, también puedes configurar todo eso. También puedes construir una API REST completa dentro de una función lambda dentro de Amplify, si lo deseas. Lo que puedes hacer es ejecutar amplify add function en la línea de comandos y luego escribir tu código personalizado dentro de ella. Puedes usar varios lenguajes, como Node.js y Python.

Hay un par más compatibles también. Esos son los dos que he usado, Node.js y Python. Así es como los usarías. También podrías hacer Amplify update auth, por ejemplo, para agregar un desencadenador de Cognito a tu flujo de autenticación.

De acuerdo. Y la siguiente pregunta, creo que también es la última pregunta, ¿cómo se realiza la sincronización sin conexión con Indexed.db y DynamoDB utilizando service workers? Esa es una excelente pregunta. No estoy seguro exactamente de cómo funciona eso, pero la capa intermedia es AWS AppSync. Es el motor GraphQL que realiza la sincronización entre los dos. Entonces, IndexedDB nuevamente es almacenamiento en el navegador, y te permite almacenar más que algo como almacenamiento local. Y luego, una capa detrás de eso está AppSync. AppSync es la capa GraphQL. Va a sincronizar automáticamente los datos en línea y sin conexión, y detrás de escena de eso está la capa DynamoDB. Así que espero que eso ayude un poco.

Bueno, muchas gracias, Ali, por esta excelente charla y por estas excelentes respuestas. Espero que mucha gente haya aprendido mucho de ti. Y ahora únete a Ali en su zona de conferencista en su chat especial. El enlace para unirse está en la línea de tiempo. Gracias, Ali.