Construye una sala de chat con Appwrite y React

Rate this content
Bookmark

Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!

41 min
04 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

AppRight es un backend como servicio de código abierto que simplifica la configuración del servidor y el diseño de API. Ofrece características como autenticación, gestión de usuarios, almacenamiento de bases de datos, funciones en la nube y manipulación de imágenes en tiempo real. El panel de control de AppRight es personalizable y se puede utilizar para gestionar el backend utilizando su API. El masterclass se centra en la construcción de una aplicación de chat utilizando los servicios backend de AppRight y los frameworks frontend como React y Chakra UI.

Available in English

1. Introducción al desarrollo de aplicaciones de chat con AppRight

Short description:

Soy Wes Cope, un ingeniero de software en AppRight. Estamos construyendo una aplicación de chat utilizando el backend como servicio de AppRight. Está escrito en TypeScript utilizando React y el framework Chakra UI. Únete a nosotros en Tessa talk para chatear durante la presentación.

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.

2. Introducción a AppWrite y Diseño del Proyecto

Short description:

Utilizo VS Code. La estructura de los proyectos dentro de la carpeta de origen incluye datos, formularios, páginas, proveedores, enrutador, tema, index.html, index.ts, tipos personalizados, imágenes PNG y SVG, y package.json. Si quieres unirte al chat y probar la aplicación, visita tesla.talk, appwrite.vercel.app. El código fuente está disponible en github.com/WestTeslaTalk. AppWrite es un backend como servicio 100% de código abierto.

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.

3. Introducción a las características de AppWrite

Short description:

AppWrite es un servidor backend de extremo a extremo que ofrece APIs seguras, SDKs bien creados y un paquete fácil de usar. Elimina las complejidades de configurar servidores, diseñar APIs y escribir SDKs para servicios de autenticación y carga de imágenes. Con AppWrite, los desarrolladores pueden centrarse en construir aplicaciones sin preocuparse por el lado doloroso del desarrollo. Ofrece implementación fácil, admite múltiples gestores de paquetes y está construido por desarrolladores que priorizan los comentarios de los usuarios. AppWrite proporciona características como autenticación, gestión de usuarios, almacenamiento de bases de datos, funciones en la nube, webhooks, seguridad incorporada, geolocalización y manipulación de imágenes en tiempo real. Estas características se pueden habilitar o deshabilitar según los requisitos individuales.

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.

4. Transparencia, Implementación y Panel de control de AppRight

Short description:

Somos completamente transparentes y de código abierto. La confianza y el apoyo de nuestra comunidad han sido invaluables para encontrar errores y mejorar la plataforma. AppRight es plug and play, basado en Docker, y se adapta a tu experiencia como desarrollador. Es fácil de implementar, ya sea localmente o en DigitalOcean. El panel de control está impulsado por AppRight y administra AppRight utilizando su API.

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.

5. Introducción a las características y panel de control de AppRight

Short description:

Somos transparentes y enfocados en el usuario. Tengo otro proyecto llamado Almost Netflix que utiliza Flutter y Dart. Cuando inicias sesión, obtienes estadísticas y plataformas para agregar. Puedes crear colecciones con nombres generados automáticamente o personalizados. Los mensajes te muestran registros y atributos existentes. El registro de actividad muestra lo que está sucediendo. Los ajustes incluyen el ID de la colección, opciones de habilitar/deshabilitar y permisos. Construí Tessa Talks en un día, dedicando más tiempo a las diapositivas y la configuración.

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.

6. Introducción a las características y panel de control de AppRight

Short description:

No estoy subiendo imágenes, por lo que no necesitamos usar almacenamiento. Tenemos una gran cantidad de proveedores de OAuth2, incluyendo Stripe, Amazon, Apple y alt zero. El panel de control es personalizable con modo claro y oscuro. Creemos esa sala de chat. Cada persona tiene su propio estilo en la programación y me encanta escuchar sobre diferentes estilos. Utilizo Versal para implementar y he configurado TypeScript para mi proyecto. Tengo módulos simples para importar archivos SEG y PNG directamente en React.

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.

7. Configuración del cliente de App-Rite y configuración del proveedor

Short description:

Es un envoltorio simple para el almacenamiento local que me permite agregar un prefijo a cualquier clave que añado. El almacenamiento local se encuentra en el navegador del usuario. Todavía no se utilizan las preferencias, la sesión y la configuración. Utilizo Formik para los formularios y los hooks de React para configurar los proveedores. El proveedor más importante es el cliente de App-Rite, que añadí a mi paquete. Dentro del proveedor, creo el cliente y añado el punto final y el ID del proyecto. El ID del proyecto y el punto final de la API se establecen en la configuración del panel de control para Tessa Talks.

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.

8. Configuración del proyecto de AppRite y manejo de sesiones

Short description:

Agregamos aplicaciones por motivos de seguridad y para asegurarnos de que las solicitudes provengan de fuentes confiables. El ID del proyecto y el punto final son esenciales para que los SDK sepan a dónde ir. Creo un contexto y un componente para manejar diversas funcionalidades como mensajes instantáneos y navegación. El proveedor de sesiones determina si el usuario ha iniciado sesión y lo redirige a la página correspondiente. AppRite proporciona un formato de datos bien estructurado, lo que facilita el acceso a la información del usuario sin necesidad de codificación o decodificación adicional.

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.

9. Configuración de sesión y proveedor en index.tsx

Short description:

En la sesión actual, se pueden autenticar múltiples formas y cosas en varios dispositivos. El archivo index.tsx contiene todos los proveedores necesarios, incluido el proveedor de sesión y el proveedor de preferencias. Las preferencias proporcionan metadatos para las cuentas de usuario. Los Hooks proporcionan una forma conveniente de acceder a todas estas funcionalidades. La sesión es importante para la página de inicio para determinar si el usuario ha iniciado sesión o no. Si la sesión es nula, se muestra la página de inicio; de lo contrario, se muestra la página de usuario.

En la sesión actual, porque podrías estar en múltiples sesiones, ¿verdad? Tal vez también quiera vincular mi cuenta de Facebook y tal vez quiera hacer esto. Entonces hay múltiples formas y múltiples cosas que se pueden autenticar en varios dispositivos. Entonces, si estoy en mi iPhone para Tesla Talks y también estoy en la web, debería tener múltiples sesiones y la que esté interactuando actualmente o haciendo esta solicitud debería ser la que regrese con, hola, tu sitio web.

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.

10. Navegación y Diseño de la Página de Inicio de Sesión

Short description:

La navegación es fácil. La página de inicio de sesión es igual que la página de inicio, pero con contenido diferente. El diseño se determina automáticamente en función de la autenticación del usuario, simplificando el proceso y evitando la repetición.

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.

11. Páginas, Índices y Rutas con AppRite

Short description:

Páginas, índices, reexportación. Rutas de registro e inicio de sesión. Sin verificación para un acceso rápido. Elección del desarrollador con AppRite.

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.

12. Introducción a la Presentación de Formularios y Llamadas a la API

Short description:

Ahora, hablemos de la navegación entre rutas, formularios y llamadas a la API. La primera llamada a la API es para crear una sesión al enviar el formulario de inicio de sesión. AppRite proporciona una respuesta estructurada que se puede almacenar en el almacenamiento local. La página de inicio de sesión redirige de nuevo a sí misma, siguiendo una práctica común. Hasta ahora solo hemos realizado una llamada a la API, pero ahora introduzcamos el segundo objetivo de la API.

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.

13. Creación de Cuenta y Página de Chat

Short description:

Vamos a crear tu cuenta con tu correo electrónico, contraseña y nombre. Si hay algún problema de validación, se mostrará un mensaje. Después del registro, la página se redirigirá a la página de inicio y se mostrarán los mensajes instantáneos. Nos enfocamos en construir interfaces e interacciones de usuario, no en servidores y configuración. El usuario ha iniciado sesión y está listo para ir a la página de chat.

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.

14. Session Hook and Message Sending

Short description:

Ahora usamos nuestro gancho de sesión para verificar si hay una sesión disponible y establecerla si no lo está. Tenemos un usuario establecido. Los mensajes son los que se muestran en la pantalla. El mensaje pendiente registra lo que escribes hasta que presionas enter. El gancho de la API nos da acceso al SDK de App-Write. La tercera llamada a la API es para obtener el usuario actual. Si hay un error o el usuario no es válido, la sesión se establece como nula. También tenemos una función para enviar mensajes creando un documento con un ID único.

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.

15. Creación de Mensajes y Suscripción

Short description:

Tenemos tres atributos: usuario, mensaje y fecha. Hice una llamada a la API para registrar, iniciar sesión, obtener usuario y enviar un mensaje. No se necesita código de backend ni de servidor. Ahora, hablemos de Suscripción. Escucha cada mensaje creado y llama a obtener mensajes. Es simple y hermoso. Hacemos una llamada a la API para obtener los mensajes usando el SDK.

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.

16. Construyendo el Servicio de Chat con AppWrite

Short description:

Estoy configurando el usuario y el mensaje usando una función de mapeo. La magia sucede cuando se activan los efectos por primera vez. Agregué una pantalla de carga cuando no hay usuario. El formulario permite a los usuarios escribir y registra su entrada. Ahora puedo ejecutar este servicio de chat con una configuración mínima. AppWrite se integra perfectamente en mi interfaz de usuario, lo que me permite centrarme en el frontend. Pasé más tiempo explicando el desarrollo de la interfaz de usuario que la integración de AppWrite. Es así de simple.

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.

17. Botón de Cierre de Sesión y Función AppWrite

Short description:

Ahora, lo que falta es un botón de cierre de sesión. También podríamos agregar una función de AppWrite a nuestro proveedor. Puedo obtener sesiones por ID y eliminar sesiones de usuario. Puedo hacer cambios sin administrar archivos de migración. Ofrecemos una herramienta de línea de comandos que ayuda.

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.

Watch more workshops on topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.