Construye una sala de chat con Appwrite y React

En primer lugar, me gustaría agradecer a todos por unirse. Soy Wes Cope. Supongo que puedo usar las diapositivas. Así que hola. Soy Wes Cope, un ingeniero de software, full stack en AppRight, trabajando desde todo, desde controladores de database hasta cualquier otra cosa en la que pueda poner mis manos. Puedes seguirme en Twitter. Es WesCope como se muestra en la diapositiva, o puedes ir a github.com y encontrarme allí y los diversos trabajos y cosas que he hecho.

Durante esta presentación, haré todo lo posible para asegurarme de brindarles a todos ustedes la información que necesitan. A veces tiendo a hablar rápido. Así que solo levanten la mano y llámenme la atención. Está bien para mí. Y me aseguraré de ir más despacio o si me pierdo algo, entraré en el chat, hagan su pregunta allí. Y lo tengo justo frente a mí para poder responder las preguntas lo más rápido y pronto posible.

¿Qué vamos a cubrir? Bueno, por supuesto, estamos construyendo una aplicación de chat. Y por chat, me refiero a que te registras, inicias sesión y comienzas a hablar como en cualquier chat aplicación que hayas visto. Es como una versión muy simplificada y minimalista de Slack sin emojis, nada extravagante, solo tú, texto y una conversación.

AppRight. AppRight es un backend como servicio. Es un servicio. Es una herramienta que los desarrolladores pueden usar para centrarse en lo que es importante para ellos, como el desarrollo de aplicaciones cliente, el desarrollo de aplicaciones móviles, etc. Y profundizaremos un poco más en estos temas. También vamos a construir una aplicación de chat y discutir las cosas que necesitas. Está escrito en TypeScript utilizando React, utilizando, por supuesto, el SDK de AppRight para TypeScript JavaScript así como el uso del framework Chakra UI porque me resulta fácil y agradable trabajar con él. Y luego también te daré los enlaces donde puedes unirte a nosotros en el chat, realmente chatear mientras hacemos esta presentación en un entorno en ejecución. Lo llamamos Tessa talk y Tessa, que también trabaja en AppRight conmigo. Así que se llama cariñosamente así por ella porque ella es quien me hizo hacerlo. Y luego responderemos algunas preguntas y concluiremos con cualquier otra cosa. Cualquier otro recurso o cualquier otra cosa que se me ocurra. El primer paso te pone en marcha. Nuevamente, esto es lo que vas a necesitar.

Utilizo VS Code. También los uso dependiendo de lo que esté haciendo con TypeScript. La versión que estoy utilizando actualmente es la 4.64 react 18, app right 801 parcel two, aunque realmente estoy utilizando parcel one point x porque no me gusta mucho en yarn, que es bastante común para la mayoría de los desarrolladores de JavaScript/Node.js, etc.

Aquí está la estructura de los proyectos dentro de la carpeta de origen. Tenemos una carpeta de datos. Aquí es donde coloco todas las cosas de datos, el manejo de la base de datos, envoltorios de almacenamiento local, cualquier cosa que me facilite hacer eso. La carpeta de formularios es donde coloco todos tus formularios, ya sea la ventana de entrada del chat, tu inicio de sesión, tu registro de incorporación. Esto no es, ni mucho menos, otra cosa que mi opinión sobre la forma en que configuro las cosas. Todos hacen diseños un poco diferentes. Tengo un diseño para cuando te estás incorporando y tengo un diseño para cualquier lugar de la aplicación y hago algo de magia para verificar cuál y cargarlo automáticamente para mí.

Páginas, supongo, todos los lugares a los que irás. Los proveedores, esto es algo genial que React ha introducido, solía ser un hombre de Redux, y luego pasé a los proveedores. Pero parte del trabajo que hice con Flutter y Dart, me acostumbré al patrón de proveedor y realmente comencé a disfrutar cómo funciona. Así que utilicé un patrón de arquitectura inspirado en Flutter utilizando el patrón de proveedor aquí con React context. Y luego el enrutador, por supuesto, nos lleva por nuestra aplicación. El tema, y sí, admito el modo oscuro y no, no agregué un botón para hacerlo. Y luego el index.html es donde renderizamos esto. Index.ts es el punto de entrada de nuestra aplicación, algunos tipos personalizados, y es PNG y SVG, solo para que pueda haber imágenes allí si decido hacerlo. Es una configuración básica y todos saben qué es package.json.

Ahora, aquí está la magia. Si quieren unirse al chat y realmente probar esto, y ver que algunos de los miembros de AppWrite ya han presentado algunas palabras allí. Pueden unirse a nosotros en HTTPS, tesla.talk, appwrite.vercel.app. Eso es un guion. Y también pueden ver el código fuente en github.com. West Tesla Talk, y este, el código fuente que ven en este repositorio es exactamente lo que se ejecuta en Tesla Talk en Vercel. Y también lo que revisaré hoy. Entonces, ¿qué es AppWrite? Animo a todos a visitar appwrite.io. Y ver exactamente lo que hacemos. Somos un backend como servicio. Somos 100% de código abierto.

No hay nada de código cerrado en ello. Es seguro, nos enfocamos en la seguridad. Es un servidor backend de extremo a extremo. Como puedes ver aquí, podemos hacer. Tiene APIs para REST, sockets, bueno, websockets, etc. También tiene algunos SDKs muy bien creados. Y todo está bien documentado y se presenta en un paquete muy atractivo.

Entonces, ¿por qué AppWrite? Los desarrolladores enfrentan problemas. Todos enfrentamos problemas. Los desarrolladores tienen que saber muchas cosas o en nuestro caso, sabemos mucho. Unas pocas cosas entre comillas, porque el sarcasmo y todo eso. Pero tenemos que hacer todo, desde configurar un servidor hasta escribir en el lenguaje, diseñar las APIs, y luego escribir los SDKs para interactuar con REST o y luego usamos toda la validación. Y luego hacemos todas estas piezas y todas estas cosas que juntamos una y otra vez, y no puedo decirte cuántas veces porque perdí la cuenta, cuántas veces he creado un servicio de autenticación. o un servicio de carga de imágenes. Y al tener que hacer esto una y otra vez, también tenemos todas estas complejidades.

Como puedes ver, se necesitan años de experiencia para comprender completamente la seguridad. Y así, queríamos asegurarnos de enfocarnos en estas cosas porque queríamos que el backend del servicio fuera fácil y cómodo. Estás acostumbrado a usar estas cosas. No hay nada aquí que no hayas hecho antes. Entonces, incluso si necesitas entender cómo funciona la autenticación, te sentirás como en casa porque es OAuth standards. Si necesitas saber cómo funciona el almacenamiento de datos, puedes ver el Framework Utopia o ver el código fuente de AppWrite y ver por ti mismo que realmente elimina gran parte del esfuerzo que personalmente me lleva si estoy construyendo un proyecto y tengo que construir las APIs antes de terminar con las APIs, pierdo el interés en el proyecto. Entonces esto me da la capacidad de ir directamente a lo que más me importa, que es realmente construir la aplicación. Mucho menos doloroso es una forma muy agradable de, esto no es suficiente, ni siquiera estoy diciendo que lo hace menos doloroso, en realidad hace que construir aplicaciones sea agradable nuevamente porque no tengo que preocuparme por el lado doloroso. Tengo esta cosa aquí, puedo implementarla con un solo clic en DigitalOcean y estoy listo para empezar. Puedo construir una aplicación, puedo hacer un Yarn add, AppWrite, npm install AppWrite, lo que elijas como gestor de paquetes desde Flutter hasta Swift, y así sucesivamente. Y es fácil, es muy fácil de usar porque está construido por desarrolladores, tomamos los comentarios de nuestra comunidad que lo está utilizando y nos aseguramos de que hagamos esto tan fácil como humanamente posible. Así que reimaginamos las cosas, aquí tienes algunas de las características que ofrecemos. Autenticación, gestión de usuarios incorporada, almacenamiento de base de datos, nuestro almacenamiento de base de datos, incluso tenemos funciones en la nube en varios lenguajes desde Python hasta Swift y, por supuesto, JavaScript, incluso PHP. Tenemos webhooks, seguridad incorporada, geolocalización y manipulación de imágenes en tiempo real, las buenas y viejas características que a todos nos gustan y puedes habilitar y deshabilitar estas características para que no sea necesario tener todas, puedes reutilizar algunas, depende de ti. Aquí tienes un pequeño esquema bonito de cómo encajan los pequeños bloques de Lego. También soy un fanático de Lego y un fanático de Batman así que usaré frases y cosas de esas películas y programas de televisión, así que ten paciencia, se vuelve molesto.

Somos completamente transparentes, todo es de código abierto, todo lo que ves, el sitio web, los SDK, puedes ir y ver todo lo que quieras, no ocultamos nada como lo hacen otros. Queríamos asegurarnos de que nuestra community tuviera un 100% de confianza en nosotros y pudieran ver todo porque tal vez sabemos que también vamos a pasar por alto cosas y nuestra community ha sido muy agradecida al ayudarnos a encontrar errores y ayudarnos a iterar en las cosas y mejorar, y no podríamos hacer eso sin una community si alguna parte de nuestra aplicación o alguna parte de nuestras herramientas o SDK si fueran de código cerrado, si alguna parte lo fuera en absoluto. Así que hemos abierto todo al 100%.

Es plug and play. Esto se adapta, está basado en Docker. Todos están bastante familiarizados con eso. Soy lo suficientemente familiar como para ser muy letal. Tienes mucho control sobre lo que estás haciendo. Se adapta a tu experiencia como desarrollador. Ahora, estos son puntos genéricos, pero cuando digo tu developer experience, sabemos cómo escribir aplicaciones, sabemos cómo construir estas APIs, pero es tan agradable cuando no tenemos que hacer la parte de la API porque es redundante. Y así se adapta a nuestro flujo de trabajo. Insertamos un SDK, el SDK está documentado y podemos comenzar a trabajar en ello muy fácilmente y podemos implementarlo y de inmediato, como dije. Un clic en DigitalOcean y estás listo para empezar. Instalar AppRight, si lo vas a hacer localmente, o como dije, puedes ir a DigitalOcean, tienen una aplicación de un solo clic. Es realmente bueno. O puedes ejecutar un comando Docker. Y nuevamente, appright.io tiene todos los detalles. Esto simplemente lo hace simple y bonito, pero es un simple comando de ejecución de Docker. Se instalará, descargará todo. Hace todas las cosas mágicas que a Docker le gusta hacer. Y luego puedes ir al panel de control.

Entonces, la parte divertida. En primer lugar, quiero mostrarles el panel de control. Aquí está la página de inicio de AppRight. Saltaré de una pantalla a otra. Y si te pierdes algo, avísame y volveré atrás. Entonces, en nuestro caso, cuando inicias sesión en tu instancia de AppRight, cuando lo obtienes por primera vez, te registras para obtener una cuenta, bastante estándar. Y una frase que a menudo he usado como desarrollador es comer tu propia comida para perros. Bueno, nosotros lo usamos. El panel de control de AppRight está impulsado por AppRight y administra AppRight utilizando la API de AppRight.

Esto debería decirte cuán transparentes estamos tratando de ser. Porque no solo somos los creadores, también somos usuarios. Así que prueba las charlas. Sí, también tengo uno llamado Almost Netflix, al que puedo vincular más tarde, que utiliza Flutter y Dart para crear un clon de Netflix utilizando AppRight. Pero hoy nos enfocamos en las charlas de prueba.

Y cuando inicias sesión, te muestra algunas estadísticas y conceptos básicos. También te muestra algunas plataformas si quieres agregarlas. Si quiero agregar una plataforma, por ejemplo, solo haz clic aquí y listo. Flutter, Apple, Android, web, próximamente Unity, entre otras cosas. Una vez que creo mi plataforma, luego puedo ir aquí arriba y luego iría a mi database para crear mis colecciones.

Bueno, si estás viendo nuestra ventana de chat, que acabo de descubrir mi propio error, que no dice `desplazarse hasta abajo`, lo omití. Así que en tus colecciones, puedes crear una nueva colección, puedo agregar una colección. Puedo generar automáticamente el nombre de la colección, lo que le daría un nuevo ID, o puedo darle un nombre. Y luego solo tengo que asegurarme de no nombrar otras colecciones de la misma manera. Por lo general, solo uso la generación automática porque estoy acostumbrado a eso, es lo que siempre hago o lo que siempre obtengo. Los mensajes son cuando haces clic en él, te mostrará todos los mensajes existentes que están allí, todos los registros, atributos, agregar y eliminar atributos, tipos de cadena, tipos de base de database. Piénsalo como una especie de ORME con validación, con buena validación, y con un poco de esa estructura de almacenamiento de documentos con una estructura de respaldo de SQL. Por lo tanto, te brinda cierta estabilidad que esperarías de un motor SQL, o SQL, al tiempo que te brinda la posibilidad de hacer esto, puedo poner lo que quiera allí. Puedo desarrollar toda esta colección sin mucho trabajo. Solo la defino aquí, y luego la API está lista para usar. La actividad, puedes ver qué está sucediendo allí. Y cuando suceden cosas, por supuesto, es un registro, tu uso está aumentando en este momento. Y luego tus ajustes aquí, esto es importante, tu ID de colección. Así que eso es el que creaste o el que se generó para ti, puedes obtenerlo aquí mismo. Y luego también tienes la opción de habilitarlo o deshabilitarlo, y por supuesto los permisos. Ahora, para esta demostración, hice todo como `all`, lo cual no es seguro y sugiero no hacerlo, pero quería hacer todo lo más simple posible. Y así construí Tessa Talks en un día. Me llevó más tiempo hacer las diapositivas y prepararme para esta presentación que escribir realmente la aplicación de la que estamos hablando. Probablemente me llevó más tiempo configurar el proyecto. Así que ahí es donde estamos.

Y ahora voy a volver, eso es la esencia. No estoy subiendo imágenes, por lo que no necesitamos usar almacenamiento. Si vamos a usuarios, tengo configuraciones aquí, puedo activar muchas características. Así que tenemos URL mágica, tenemos teléfono próximamente, lo cual me emociona. Tenemos un tipo anónimo, tenemos JWT, tenemos todas las cosas que esperas de un servicio de autenticación, como tus alt zeros, octa y esos, integrados directamente en esta plataforma para que no tengas que usar otro servicio para proporcionar otra cosa con la que debas integrarte. Todo está aquí. Y todos están funcionando en sus propios mundos.

Entonces, proveedores de OAuth2, tenemos una gran cantidad de ellos. Hay muchos que podemos usar, desde Stripe hasta Amazon, incluso un poco de Apple, también alt zero, que acabamos de agregar. Y entré aquí, hice clic en las características que quería, incluso podemos asignar equipos si quieres hacer agrupaciones, y luego muestra tu uso también. Así que este panel de control, lo tengo en modo oscuro. También puedes cambiarlo a modo claro, modo oscuro. Es muy bonito.

Entonces volvamos a ello. Vamos a, creemos esa sala de chat. Aquí está mi proyecto. Nuevamente, la forma en que configuro las cosas o la forma en que las junto, es mi estilo. Y una cosa que amo de la ingeniería y la programación, y siempre me ha encantado, es que cada persona tiene su propio estilo. No espero que dos músicos suenen igual, al igual que no espero que dos programadores escriban igual. Este es mi estilo. Si alguien bifurca el proyecto, me encantaría saber de ti y ver cuál sería tu estilo. Me encanta aprender los estilos de otras personas y me encanta participar en ese nivel. Así que por favor, por favor avísame y también me gusta escuchar sugerencias.

A medida que avanzamos aquí, como dije, uso Versal para implementar. Entonces puedes ver que todos conocen el archivo package JSON, el archivo TS config es para configurar TypeScript para hacer lo que queremos que haga, y cómo queremos hacerlo y qué características necesitamos que haga. Y luego los tipos, estos son mis tipos. Solo lo llamé index.d porque aparentemente TSC cuando alguien me dijo en algún lugar de alguna manera que lo detecta automáticamente y parece funcionar. Así que a correr. Estos son solo módulos simples que me permiten importar archivos SEG y PNG directamente en mi React. Ahora, data, mucha gente pregunta sobre esto.

Es un envoltorio simple para el almacenamiento local eso es realmente todo lo que es. Tengo, de nuevo, un estilo, pero tengo una pequeña función privada aquí que vive solo en este archivo que me permite básicamente agregar un prefijo a cualquier clave que añado. Y a partir de ahí, es solo una tienda de clave-valor.

Veamos, el almacenamiento local está justo aquí. Esto se encuentra en el navegador del usuario. Las preferencias no se utilizan. La sesión es una extensión solo por el nombre y solo por continuidad, por falta de un término mejor. Importé los modelos y exporté los modelos de sesión en la sesión solo para poder usar la sesión desde dentro de mi aplicación, lo cual me hace sentir feliz en cuanto al alcance. La configuración tampoco se utiliza todavía, pero es algo similar. Bueno, podría serlo.

A continuación están tus forms. Como dije, utilizo Formik. Ha funcionado bien para mí, funciona bien. Y hace las cosas que necesito que haga. Y aquí verás algunos hooks. Si no estás familiarizado con los hooks, también pondré enlaces a todo lo que estoy usando aquí desde React Chakra Typescript, todo eso, pondré estos enlaces en el archivo readme para, después de esto para el proyecto en los repositorios para que también puedas verlos. Utilizo GitHub, quiero decir, utilizo React hooks. Y eso es lo que he hecho. Así que estos son todos pequeños cosas de hooks, y vamos a pasar rápidamente para mostrarte cómo configuro los proveedores.

Así que dentro de los proveedores, el más importante es nuestro cliente de App-Rite. Así que lo que hice aquí fue crear un hook o un proveedor, y ese proveedor me permite dar a mis componentes que son los hijos de este componente o a este proveedor, acceso para usar la aplicación o una instancia del SDK. Como dije, puedes ver más sobre eso en reactjs.org. Pero aquí está lo principal. Creo, baja aquí, ahí está justo ahí. Así que añadí App-Rite a mi paquete. Así que ese chico está aquí y listo para funcionar. Vuelvo a mi proveedor que es API. Y dentro de aquí, y como lo estoy usando como un componente, lo nombré TSX en lugar de TS, creo el cliente, y luego añado el punto final que quiero usar y el ID del proyecto. Ahora, deteniéndonos aquí para volver a nuestro panel de control, si voy aquí y voy a mis configuraciones para Tessa Talks, ahí está mi ID de proyecto y ahí está mi punto final de la API. Ahí es donde quiero que mi API llegue.

Ahí es donde, y también por qué cuando volvemos al proyecto, también agregamos aplicaciones porque por seguridad, queremos asegurarnos de que provenga de Localhost o de Vercel, o si proviene de mycat.com o algo así. Así que es parte de la security y puedes leer más al respecto en appwrite.io, pero el ID del proyecto y el punto final al que vas, le estás diciendo al cliente a dónde quieres acceder porque recuerda que somos de código abierto y podemos estar en cualquier lugar. Así que tenemos que saberlo, así que los SDK deben saber a dónde ir.

Luego creo un contexto. Creo un componente para ese contexto y todo lo que hace es tomar los hijos y ponerlos allí. Ahora hago esto en varias cosas. Flash es solo un mensaje bonito que aparece en la parte superior de tu ventana. La navegación es solo para establecer a qué página vamos y dónde vamos. Y es solo para hacer un seguimiento de estas cosas. La sesión es una que realmente usamos. Y nuevamente, esto es parte de mi plantilla. Por lo tanto, es posible que no se utilice todo esto. Si fuera a poner esto en producción y no lo estuviera, eliminaría estas cosas, pero las dejé ahí.

El proveedor de sesiones, esto nos permitirá saber si nuestro usuario ha iniciado sesión o no. Y al permitir que el usuario inicie sesión o no inicie sesión, nos dirá a qué página van a ir y qué diseño usar, lo cual veremos a continuación. Entonces tenemos session y set session, pero si miras aquí, si alguna vez has trabajado con Hooks o si alguna vez has trabajado con UState, sabrás que generalmente solo te da la sesión y set session como la variable con la que estás trabajando. Y el segundo es la función para establecer esa variable de estado. Pero lo hice con un pequeño guión bajo aquí. Y la razón por la que hice eso es porque quería usar mi propio set session. Y la razón por la que hago eso es porque si la sesión es nula, quiero ir a ese envoltorio de datos para Localhost, y quiero eliminarlo si es nulo, porque eso significa que el usuario se fue, ya sea que cerró sesión o lo que sea. Y luego lo borro todo porque si el usuario no está allí, ¿por qué necesito mantener sus datos? O quiero establecerlo en el valor de la sesión.

Una cosa que AppRite hace muy bien es la estructura de los datos que se devuelven. No tengo que hacer nada loco para recuperarlo. De hecho, si vamos a la documentation, y luego voy a la cuenta, luego creo una sesión. Ahí está el código, casi se ve completamente idéntico. Vengo aquí al objeto de sesión y todo aquí es algo que puedo usar directamente. No hay codificación. No es necesario usar Stringify o decodificar scripts JSON. Todo está configurado en una estructura agradable para nosotros. Por lo tanto, podemos acceder fácilmente a las cosas que queremos desde el tipo de cliente hasta el nombre del usuario, dispositivo, todas las cosas buenas.

Entonces volvemos aquí. Todo lo que hice fue envolver esto también en un estilo de proveedor. Ahora vamos a entrar en index.tsx. Si has trabajado con JavaScript o TSX, sabes que el índice se puede usar como una especie de todo, son los valores predeterminados o la importación y el propio principal. Entonces, lo que hice aquí es tan feo como es, todos mis proveedores están aquí, envolviendo todas las cosas en el orden en el que quiero que se envuelvan. Entonces necesito el proveedor de sesión. Y como dije, probablemente podríamos eliminar las preferencias y configuraciones porque no están aquí, pero el nivel superior es la API, porque quiero que todos tengan acceso a la API. En el segundo nivel, está el proveedor de sesión porque necesitamos saber si está ahí, si no está ahí. Y necesitamos poder establecerlo. Y luego las preferencias son si fuera a hacer lo mismo, si fuera a hacer una llamada a la API para establecer sesiones, el proveedor podría obtener esas sesiones o obtener esas preferencias o configuraciones.

Una cosa genial que realmente me gusta de las cuentas son los metadatos. Entonces, las preferencias ya están en este chico, tenemos preferencias en un usuario. Entonces, si quisiera usar un usuario, déjame volver a eso, esto también es parte de la cuenta, tiene prefs, preferencias, que es una tienda de clave-valor, son metadatos para pensarlo. Entonces, envolví eso si quisieras tomar la API, si quisieras llevar el cliente de chat un paso más allá, entonces ya tendrías eso, las configuraciones también podrían ser parte de las preferencias o podrían ser redundantes. En este caso, son un poco redundantes. Entonces, Hooks es solo una forma conveniente para mí de acceder a todos ellos desde un solo archivo. Esto es solo pura pereza del desarrollador o mi pereza y también porque me gusta cómo se ve cuando se importa con llaves y múltiples cosas y un montón de líneas de importación.

Ahora la sesión, en primer lugar, vamos a ver por qué la sesión era importante para mí. Entonces aquí está el índice. Entonces el índice puede cargar una de dos cosas. El mensaje flash en la parte superior es bonito, que es lo que ves aquí, pero nuestro enfoque principal aquí es hacer que el usuario inicie sesión, se registre, y luego llevarlo a la aplicación misma para que pueda comenzar a chatear en Tessa Talk. Entonces lo que hacemos aquí es usar el hook que envolvimos todo en ese proveedor para decir, hola, sesión, y usar sesión. Entonces esto debería devolvernos el valor de la sesión actual basado en el contexto que creé y envolví todo en él. Ahora, si esa sesión es nula, obviamente el usuario no ha iniciado sesión, así que vamos a usar la página de inicio y luego simplemente vamos a pasar el resto de las props a ella. Si el usuario ha iniciado sesión, entonces, por supuesto, querrán la página de usuario y todo bien. Y todo lo que estamos haciendo es devolver esto. La página de inicio se ve como una página de inicio.

No hay mucho que hacer. Navegación, lo suficientemente fácil. Y luego la página de inicio de sesión es exactamente lo mismo. Ahí tienes tus elementos, usuario para hablar, y así sucesivamente. Y este es el envoltorio. Entonces esto es, cada vez que vas a una página de inicio, en cualquier lugar, y tienen el bonito, por qué somos geniales, y luego tienen el pequeño cuadro de inicio de sesión. Tienen el menú sobre nosotros, contáctanos, y todo eso. No tienes lo mismo cuando inicias sesión en un panel de control. Entonces lo que hice fue hacerlo para que no tuviera que preocuparme, siempre y cuando el usuario esté autenticado, utilizará automáticamente el diseño para un usuario autenticado. Y si no lo están, lo utilizarán automáticamente. De esa manera no tuve que copiar y pegar una y otra vez lo mismo, o hacer un montón de rutas incluidas, solo lo hice un poco más simple.

Ahora las páginas. Páginas, índices, simple reexportación. Tal como dije, llaves rizadas bonitas. El índice en sí dentro de la página de inicio, ahí está tu subrouter para el registro y tu ruta predeterminada, que es el inicio de sesión. Entonces, si vas a TessaTalks, puedes registrarte, te registrarás y luego iniciarás sesión automáticamente. No hice verificación, lo cual absolutamente se puede habilitar, puedo enviarte un enlace por correo electrónico y podemos asegurarnos de que seas tú, pero quería que todos ingresaran rápidamente y no quería recopilar direcciones de correo electrónico. Entonces, y eso soy yo como desarrollador, puedo tomar esa decisión con AppRite.

Ahora, diseños de pila simples, hablemos de eso. Es bonito, es una cosa. Y luego, de inmediato, pasa a, como dije, la navegación entre rutas de registro e inicio de sesión. Lo que nos lleva a nuestros forms.

Así que primero, las contraseñas olvidadas están ahí. Hasta ahora no hemos realizado ninguna llamada a la API, una llamada a la API. Pero en realidad no es una llamada a la API, estábamos verificando las sesiones y el almacenamiento local, pero no lo es. Entonces, técnicamente aún no hemos realizado una llamada a la API completa. Así que aquí está nuestra primera. Y podría ser tu primera o tu segunda, dependiendo del ritmo en el que camines.

Así que, aquí está la belleza de esto. Entonces, tengo un comando de envío aquí. Si estás en el formulario de inicio de sesión y haces clic en enviar, aquí está mi primera llamada a la API. Llamada a la API, crear sesión para la cuenta, pasando el correo electrónico y la contraseña. Y luego tomo y establezco la sesión de la respuesta. Recuerda cuando te mostré la respuesta de lo que regresa eso, AppRite hace un trabajo fenomenal al darte una pieza estructurada muy bonita de data. Así que no tengo que hacer ningún análisis, no tengo que hacer nada más, puedo ponerlo directamente en mi almacenamiento local, y luego voy a navegar directamente a, y ahí está el gancho de navegación, directamente a, ¿Por qué puedo hacer eso slash?

Así que vengo de, soy un hombre mayor, he estado desarrollando computadoras desde que tenía ocho años en 1988 y algunos de los primeros sitios web a fines de los años noventa, y cada vez que enviabas un formulario, lo enviabas a ti mismo. ¿Y por qué hacías eso? Porque si había errores, querías mostrarlos. Y así se convirtió en un hábito. Entonces, si siempre rediriges de vuelta a donde estás, bueno, esta es la página de inicio de sesión. Entonces, el inicio de sesión se redirigirá de nuevo a sí mismo porque recuerda lo que hice en el enrutador y lo que hice en los diseños, por ejemplo, y también en el enrutador. Entonces, si vamos al enrutador, puedes ver que hice exactamente lo mismo aquí. Usas sesión, sesiones igual a nulo. Te voy a dar la página de inicio. Sesiones igual a chat, todas las cosas, y luego simplemente lo pasamos todo a destino y lo llamamos un día. Fácil y sencillo. Y hasta ahora, solo hemos realizado realmente un objetivo de la API y eso es el inicio de sesión.

Ahora, vamos, no soy un usuario registrado, así que introduzcamos nuestro segundo objetivo de la API. Entonces ahora, tu arte podría ser tu primero y el inicio de sesión sería tu segundo dependiendo de tu flujo. Así que ahora, y flash, como dije, es la cosa bonita en la parte superior.

Si hiciste Rails en los primeros años 2000 y cosas así, o incluso ahora, o incluso Express tiene un middleware para eso y cosas así, sabrás qué es flash. A veces todavía pienso en flash como un motor de animación y me invade la tristeza.

Entonces, ahora lo que vamos a hacer es crear tu cuenta. Así que vas a completar tu solicitud, si hay algún problema de validación, si no es válido, entonces mostrará un mensaje bonito en la parte superior. Y aquí vamos a hacer cuenta, API.account.create. Vamos a crear tu cuenta con tu correo electrónico, tu contraseña y tu nombre.

Ahora, para Test to Talk, tu nombre es importante porque es lo que aparecerá en el lateral para decir quién está hablando, pero es completamente opcional. Esto es solo algo que decidí hacer. Y luego voy a establecer un pequeño mensaje que dice, hey, buen trabajo, se ha creado tu cuenta. O, si hubo un error que regresó, voy a establecer error a e.message. Y lo que eso hará es mostrar un mensaje de error sobre el formulario mismo usando hooks. Nuevamente, reactjs.org, si, y puedes obtener más información sobre hooks si no los has usado, pero es una forma simplificada y más funcional de hacer gestión de estado para varias piezas de estado. Y eso es todo, así que me registro. Me redirigirá a la barra diagonal, y como redirigí la barra diagonal para todo, automáticamente verifica el diseño en la página, el destino al que va a través del enrutador y del diseño, hey, necesito compartir esto porque no hay sesión, y necesito compartir esto porque no hay sesión. Y el diseño dice, oh, por cierto, tengo un mensaje, un mensaje flash, boom, lo mostraré. Y todo esto sigue siendo React. Todo esto sigue siendo basado en web. Sí, apenas hemos hecho algo con la aplicación hasta ahora, y eso es algo bueno porque significa que nos estamos enfocando en construir las interfaces, construir las interacciones de usuario. No nos estamos enfocando en construir servidores y configurar cosas.

Hasta ahora, hemos realizado dos llamadas a la API, lo cual es bastante impresionante considerando la cantidad de código que has visto, la cantidad de configuración y todo el estilo extraño que tengo. Tenemos una autenticación válida al iniciar sesión y un sistema de registro con dos llamadas a la API. El tercero sería olvidar la contraseña, pero no lo puse ahí. Así que a continuación, el usuario ahora está presente. Han iniciado sesión y están listos para comenzar. Así que sabemos qué hace el diseño, y ahora nos dirigiremos a nuestra página de chat. Nuestra página de chat es un diseño de pila agradable, como puedes ver en tesla.talks-app-write.vercells.app y enviar un mensaje allí. Ahí está el ID de mensaje para los mensajes que tenemos justo encima, boop, boop, boop, boop, ahí mismo. Ese es el ID de los mensajes. Así es, la colección ID. Nuevamente, podría haberle dado cualquier nombre que quisiera, pero solo usé unique porque no tenía ganas de completar el cuadro.

Fue realmente así de simple. Ahora usamos nuestro gancho de sesión. Así que sabemos, podemos verificar si hay una sesión disponible. Podemos establecer esa sesión si no lo está. Tenemos un usuario establecido. Esto es algo así como una cosa local.

Mensajes, estos son todos los mensajes que vamos a mostrar en la pantalla. Mensaje pendiente significa, hey, estás escribiendo cosas y a medida que escribes, se registra en el mensaje pendiente. Eso es todo. Solo necesitaba un lugar temporal para guardarlo hasta que pudiera enviarlo mientras sigues escribiendo. Entonces, el mensaje pendiente acumula tus caracteres hasta que presionas enter.

Y luego está ese tipo nuevamente, número 32. API. Usa API. Entonces ese es el gancho que nos da acceso a una instancia del SDK de App-Write. Ahora vamos a tener una pequeña función rápida llamada Obtener Usuarios, una función asíncrona, y todo lo que hará es hacer nuestro, veamos, registro, inicio de sesión, obtener usuario, o nuestra tercera llamada a la API. Eso es todo hasta ahora.

Entonces, la tercera llamada a la API es obtener el usuario actual. Entonces el usuario de la cuenta. Entonces el usuario de la sesión actual. Y con ese usuario, eso es lo que necesito para poder presentar tu mensaje porque hice esto muy fácil. Y dije, bien, ahora voy a establecer el usuario como user.name porque obtenemos esta información formateada bonita. Si no puede obtener una cuenta, si hay un error, entonces algo anda mal porque no tengo un usuario. Eso significa que el usuario no es válido o ya no existe en el servidor, entonces eso significa que tal vez un administrador los eliminó porque estaban diciendo cosas no tan agradables. Luego quiero establecer esa sesión como nula, lo cual, si recuerdas en el gancho, elimina la sesión, y borra todos los datos relacionados con ella.

Luego voy a tener una segunda función, que es enviar ese mensaje. En este mensaje, vamos a tomar el mensaje del estado del mensaje pendiente, luego lo vamos a borrar para que tu cuadro de texto se borre nuevamente porque acabas de presionar enter, y eso es lo que esperamos. Y luego vamos a crear un documento para la colección basado en el ID del mensaje o el mensaje de la colección. Y vamos a hacer un ID único. También podrías hacer esto como quieras, pero me gusta único porque, bueno, es único.

Y luego el usuario, el usuario que lo está diciendo, el mensaje, el mensaje que están diciendo, y luego la fecha en la que se creó. Así que vamos a ver esto rápidamente. Aquí están tus mensajes, aquí están tus atributos. Y ahí están los tres. Boom, eso es todo, vine aquí, creé estos tres atributos. Y aquí, todo lo que hice fue hacer esta llamada a la API.

Ahora, estamos en registro, inicio de sesión, obtener usuario, enviar un mensaje, eso es cuatro, hasta ahora, estamos en cuatro. Cuatro llamadas a la API, sin código de backend, sin código de servidor, nada. Hicimos clic una vez en DigitalOcean y tenemos esta instancia en ejecución. Ejecutamos una línea de comandos, obtuvimos Docker, tenemos una ejecución local y estamos listos para comenzar.

Aquí es donde está mi parte favorita, y Torsten, que también es uno de los miembros de Vaprite, es uno de los cerebros detrás de esto, y es una de las APIs más hermosas que disfruto, y eso es Suscripción. Así que ahora lo que voy a hacer es, voy a recordar enviar mensajes en su propia función, pero Suscripción no. Lo que voy a hacer ahora mismo, es escuchar cada vez que se crea un mensaje. Entonces, cada vez que se guarda un mensaje en mi colección, quiero llamar a obtener mensajes. Y eso es todo lo que quiero hacer. Lo hice lo más simple posible.

Entonces, aquí está mi ID de mensaje nuevamente. Aquí están los documentos de ese mensaje. Y luego aquí están las colecciones. Esta es la colección de mensajes, y luego los documentos de esa colección. Y luego cada vez que algo sucede con esos documentos, voy a llamar a obtener mensajes. Así que ahora, obtener mensajes. Entonces, veamos, registro, inicio de sesión, obtener usuario. ¿Cuál era el otro, enviar. Así que estamos en cinco. Entonces, seis, si quieres llamar a la suscripción una función o una llamada a la API, hagámoslo, eso es seis. Y luego, siete es obtener los propios mensajes. Así que hago una llamada a la API, y no ves ningún HTTP, no ves ningún REST, no estás usando Axios o ninguna de esas cosas locas principales. Solo estamos usando el SDK aquí, en este momento. Y así, voy a llamar y obtener una lista de documentos basados en ese ID de mensaje que configuramos arriba.

Y luego, voy a configurarlos, pero luego voy a ejecutar esta pequeña y genial función de mapeo porque todo lo que necesito de allí es el nombre, o el usuario, que es su nombre, y el mensaje en el que están, lo que dijeron. Así que eso es todo lo que estamos haciendo ahora mismo. Y luego, si sabes qué son los efectos, presumiblemente para que todo suceda, luego los vamos a activar la primera vez. Así que esta es la primera vez que esta magia va a suceder. Sé que no tienes que hacerlo así, pero lo hice así.

Ahora, si no hay usuario, solo quería agregar un pequeño detalle ingenioso allí y decir, hey, hay una pantalla de carga. Pero incluso en mi instancia de DigitalOcean o en nuestra instancia de demostración para AppWrite, nunca lo he visto. Así que ha sido bastante genial. Y luego aquí abajo, lo estamos mostrando. Ahora, el tema era una cosa de, estaba tratando de ser más parecido a IRC. Aquí está tu formulario. Literalmente lo prevenimos y llamamos a esa función. Y luego estamos vinculando el campo de texto al valor del mensaje pendiente. Y cada vez que hay un cambio en ese campo de texto, establecemos ese mensaje en el nuevo valor de ese mensaje. Así que eso permite a la persona escribir y se está registrando. Si lo eliminan, se elimina. Y eso es todo. Como dije, ahora puedo ejecutar esto con una configuración tan pequeña. Y tengo un servicio de chat. Como dije, puedes verlo en en testthetalk-apprite.versell.app. Y pasé más tiempo explicando en este masterclass o en esta presentación, pasé más tiempo explicando cómo escribir la interfaz de usuario, más sobre React y enrutamiento, y manejo de sesiones, y almacenamiento, almacenamiento local, que en AppWrite. Y ese es el punto, se ajusta a lo que ya estaba haciendo. Así que no tuve que pensar en cómo autenticar a un usuario, cómo almacenar un token, cómo hacer OAuth2, o cualquiera de esas cosas. Todo lo que tuve que hacer fue escribir mi interfaz de usuario y AppWrite se ajustó a mi interfaz de usuario como quería. Y desearía que fuera fácil. Como que realmente no hay mucho más que eso. Quería sentarme y tener esta gran, grandiosa charla sobre toda la arquitectura, como eso, pero luego comencé a construir esto, y me di cuenta, una vez más, de que era así de simple. Cuando escribí la versión de Flutter, es casi lo mismo. Pasé más tiempo concentrándome en construir la interfaz de usuario, y construir las interacciones, y las animaciones, y lo bonito, porque ya no tenía que preocuparme por el backend. Y eso es más o menos la idea principal.

Ahora, lo que falta es un botón de cierre de sesión, que simplemente llamarías a session set null, y lo elimina todo. Y también podríamos agregar una función de AppWrite a nuestro proveedor, porque este es, nuevamente, mi estilo, pero aquí, cada vez que estableces esto en null, en lugar de hacer solo estas dos cosas, también podría ir a mi documentation, cuenta. Puedo obtener sesiones por ID. Puedo eliminar mi sesión de usuario, por lo que también podría eliminar esa sesión, para que ya no sea válida si el usuario vuelve, y agregarlo muy fácilmente. Puedo hacer cambios sin tener que preocuparme por administrar archivos de migración, porque si alguna vez has trabajado con Django o Rails u otros archivos de migración y administración de migraciones y asegurarte de que no haya colisiones y demás, eso se encarga de eso, si quisiera escribir todo esto en Express, entonces podría usar el SDK de Node.js. Ofrecemos una herramienta de línea de comandos que también ayuda. Y eso es más o menos todo. Sinceramente, es así de fácil. Lo siento, tengo una pregunta si puedo hacerla. Claro. Sí, no estoy seguro si es una pregunta correcta o no, pero veremos. Debido a algunas regulaciones, GPR y ese tipo de cosas, ¿necesitas manejar de alguna manera la database? ¿Necesitas ajustarla de alguna manera para manejar todo eso? No, considerando que ocurre principalmente en el frontend, ¿verdad? Para verificar si se permiten las cookies y cosas por el estilo, y es más responsabilidad de la interfaz de usuario solicitar esos permisos. En cuanto a la security y los cores y todo eso, tenemos un componente, lo siento, en cuanto a la security y esas cosas, en realidad tenemos un microservicio que se ejecuta dentro de él que genera los certificados para ti y se asegura de que sean certificados válidos. Entonces, cuando visitas https://tuapi.com para tu instancia de AppWrite, la primera vez que visitas una instancia de AppWrite o la primera vez que visitas el nombre de dominio, el subdominio, cualquier cosa que tengas apuntando a tu instancia de AppWrite, la primera vez que lo haces, nuestro administrador de certificados ve qué dominio estás y genera un certificado seguro para ti. En cuanto al frontend, y para informar a los usuarios, hay varias bibliotecas disponibles para preguntar si está bien si aceptan todas las ramificaciones de las cookies y qué tipo de cookies y tácticas vas a utilizar mientras están allí, qué vas a rastrear. Puede que esté equivocado, pero sí, pensé que debías encriptar de alguna manera esos data, como ese data, por ejemplo, que contiene información personal identificable, por ejemplo, el correo electrónico o los mensajes en el chat, que también pueden contener datos personales, ¿verdad? Así que pensé que deberían almacenarse de manera diferente en comparación con otros tipos de data. Bueno, no vamos a almacenar tu contraseña y otros datos en texto plano en una database o tu información. Y también... Así que tenemos, lo llamaremos, por falta de un mejor término, un guardián frente a todos nuestros servicios de todos modos para evitar un acceso completamente abierto. Entonces, tu información no está disponible para una IP abierta o solo está disponible a través de una dirección IP interna desde donde se encuentran los dos Docker de tus microservicios, es una arquitectura basada en microservicios y solo se comunican internamente. Entonces, no hay una forma real de acceder a la database a menos que pases por nuestro controlador de tráfico, que se encuentra justo al frente y se asegura de que todos los que ingresen sean válidos. Y luego, cómo almacenamos los data. Ahora, en el almacenamiento de documentos en sí, eso depende de ti. Entonces, si estás escribiendo una aplicación Swift, y quieres encriptarlo, entonces eso dependerá de ti encriptarlo antes de almacenarlo en la database. Es una estructura de almacenamiento de clave-valor, ¿de acuerdo? Estilo de almacenamiento de documentos. Pero no hay más que eso, aparte de, por supuesto, encriptar tu contraseña o hacer hash y luego, y luego cuando almacenamos tu, esa información, sí, nos encargamos de eso. Pero como dije, porque no sabemos cómo vas a usar el almacenamiento de documentos, no sabemos cómo vas a usar ese motor de database, entonces, y la mayoría de las veces, vas a encriptar y desencriptar cosas en el cliente de todos modos. Entonces, cuando lo almacenas, puedes almacenar cualquier cosa que desees. De nada. Sí, no hay problema.