Usando Feature Flags en Desarrollo

Creo que deberíamos. Así que si quieres interactuar, por cierto, siéntete libre de enviar algunos mensajes al chat de Zoom aquí y todos tenemos, no quiero sonar demasiado seguro de mí mismo aquí, pero todos hemos, creo, entrado en Discord. Así que puedes hacer algunas preguntas allí y trataremos de responderlas. Pero sin más preámbulos, esto es más o menos lo que vamos a cubrir hoy. Vamos a tener aproximadamente una hora y media más o menos. Vamos a comenzar con algunos pasos iniciales, vamos a crear un repositorio. Vamos a configurar nuestras cuentas, poner todo en marcha. Vamos a hablar sobre la orientación de banderas. Vamos a ver las banderas del lado del servidor, los diferentes usos de las banderas de características. Obviamente, está siendo buscado por fanáticos de las banderas, así que vamos a hablarles sobre todo eso

Estoy pasando rápidamente por esta parte, estoy ansioso por comenzar. Así que lo que necesitarás es tu navegador de elección. Supongamos que eso está en tu memoria y consumiendo esa hermosa CPU. También puedes usar una aplicación de bloc de notas para guardar pequeñas credenciales o anotar detalles que revisaremos en las sesiones después de cubrir nuestros pasos. Tu editor de IDE de elección, yo usaré VS Code. Hoy me siento como mi yo más básico y puro, esa es mi vibra. Nos registraremos en una cuenta de prueba rápida de LaunchDarkly, completamente gratis, sin compromisos. Un segundo stream será muy útil para seguirnos mientras trabajamos en el lado de tu ventana. ¿Alguien sabe qué es una bandera de características? ¿Te uniste hoy y te preguntas de qué estamos hablando? Bien, veo algunas cabezas asintiendo. Jason, genial. Sí, Summer. Bien. Creo que en general la gente sabe qué son las banderas de características. Charles, Lucy. Bien. Las banderas. Nos gusta ver las banderas como puntos de control dentro de tu código que te permiten desacoplar el proceso de implementación de tu código de la liberación. Puedes implementar tu código una vez con algunas rutas potenciales incorporadas en tu código. Y luego puedes orquestar las liberaciones de la manera que más te convenga a ti y a tu equipo, a tu negocio, lo que quieras ejecutar en esas liberaciones. Pero en el sentido más básico, puede parecer una declaración if else, cuando nos adentramos en la estructura de nuestro código, la idea aquí es que casi puede parecer una declaración if else en tu código. Pero el impacto de eso puede ser que podemos activar ciertas características para nuestros desarrolladores sin afectar la funcionalidad general que ven nuestros usuarios finales. Nuestros usuarios finales pueden tener su vista de aplicación regular. Y cuando estemos listos para enviar esos cambios a nuestro producto final, podemos hacerlo todo dentro de producción utilizando el poder de las banderas de características. Voy a compartir rápidamente un repositorio contigo en el chat. Y voy a pasarle la palabra a Alex y Peter, y vamos a comenzar con los primeros pasos. Descargaremos nuestro código desde nuestro repositorio y lo abriremos en nuestro editor de elección. Comenzaremos con los primeros pasos. Déjame abrir GitHub, porque no quiero arruinar... Estoy tratando de no romper la ilusión y bajar esta presentación, pero tal vez tenga que hacerlo, desafortunadamente. Bien. ¿Todos listos en el chat? Este es nuestro proyecto. Habrá un poco de mecánica en esto. Comenzaremos en... ¿Comenzaremos en el proyecto en la rama Step Zero, ¿correcto, Peter? Sí. Y lo que debes hacer es clonar este repositorio y luego ejecutar npm install solo para obtener todas nuestras dependencias necesarias. Gracias a Alex, se aseguró de que todas las dependencias que necesitarás en todas las ramas estén disponibles desde el principio. Y lo que debes hacer es, una vez que estés listo... Una vez que te hayas registrado en tu cuenta o tengas tu cuenta de LaunchDarkly lista y hayas obtenido tu clave del SDK del lado del cliente, debes guardarla en una variable de entorno. Pero también debes ir a la rama Step One. Y la idea es que a medida que avanzas en este taller, lo que debes hacer es ejecutar git commit, poner una guía útil allí. Solo vamos a almacenar todo localmente. No vas a subir nada al repositorio, solo lo confirmas localmente. Y luego cambias a la siguiente rama una vez que lo hayas completado. A lo largo de todo esto, si tienes preguntas, no dudes en mencionarnos en el chat. Si es necesario, podemos entrar en una sala de grupos pequeños, revisar tu código y ver qué está sucediendo. Pero lo que debes recordar es que a medida que avanzas en cada paso, asegúrate de hacer git commit. Y luego cambias a la siguiente rama para pasar al siguiente paso. La razón por la que debemos hacerlo de esta manera es que hay ciertas mejoras que hemos realizado en la aplicación. Y si intentas pasar al siguiente paso sin cambiar a la siguiente rama, es probable que falte algo de código. Y puede ser problemático intentar hacer el siguiente paso cuando muchos de los archivos aún no existen. ¿Alex, quieres agregar algo? No, solo quiero que todos se vayan de aquí con todas estas ramas que Peter creó para estos diferentes pasos. Y cuando agregues y confirmes en tu local,

Entonces, voy a parar. Pregunta rápida de logística en el chat. Alguien preguntó si se compartirá la grabación después. La grabación se compartirá después. Sí. Nos pondremos en contacto con algunos miembros del equipo de Git Nation para averiguar cuándo se está grabando actualmente. Así que, también para esta primera parte, tu tarea será completar los pasos cero al dos. Cuando llegues al paso 3A, puedes hacer una pausa. Jess volverá y explicará un poco más sobre lo que cubriremos en esos pasos. Es un caso de uso un poco diferente. Lo importante aquí es simplemente que puedas empezar y activar tu primera bandera. A veces, las personas son un poco cautelosas al inscribirse en pruebas y cosas así. Yo sé que a mí se me olvida desactivar cosas cuando me inscribo en la prueba de LaunchDarkly, sin tarjeta de crédito, sin compromiso posterior ni nada por el estilo. Así que, si después de un par de semanas no lo usas, no tienes que preocuparte y se habrá ido. Creo que cuando haces la prueba, así que hay una pregunta en el chat, cuando haces la prueba, si puedes hacer una prueba pro, creo que está bien. Nuevamente, no tienes que registrarte, no tienes que dar una tarjeta de crédito, eso simplemente te dará más capacidades desde el principio. No recuerdo exactamente cuáles son las diferencias entre starter y pro, pero nuevamente no te costará nada. Entonces, después de tu verificación, lo mejor que puedes hacer es, si quieres obtener tu clave del SDK del lado del cliente para tu proyecto. Por lo general, pauso mi pantalla por un segundo y te muestro cómo se ve eso. Si alguien está en este paso y ya se ha registrado en una cuenta de LaunchDarkly, solo presiona Comando-K y eso debería abrir tu Búsqueda de Spotlight. Y luego puedes comenzar a escribir `copy` y eso te mostrará las opciones para copiar tus credenciales para tu proyecto y entorno. Así que, voy a compartirlo ahora. Digamos que estoy en este proyecto aquí, este pequeño proyecto de demostración que me gusta mucho, voy a presionar Comando, voy a asegurarme de estar en la ventana, presiono Comando-K. Copio la clave del SDK para el entorno y necesitas el ID del lado del cliente y ese es el siguiente paso que debes hacer después de haber iniciado esa cuenta de prueba. Luego, vamos a utilizar eso como una variable de entorno. Lo pondré en el chat Stephanie, por si no lo escuchaste. Así que sí, cuando te registras, irás directamente a un proyecto así que si haces clic en `feature flags`, voy a crear un nuevo proyecto y eso se iniciará para mí. Sí, un consejo profesional de Peter, utiliza tu entorno de prueba, no tu entorno de producción, porque como todos sabemos, la producción tiene barreras de seguridad por muy buenas razones. Así que ahora estoy en eso, voy a entrar en `test` y no tengo que, si ves aquí Steph, no tienes que, um, sí exactamente después de registrarte obtienes tu proyecto, así que en realidad no tienes que crear una bandera en este momento, simplemente estarás aquí, haciendo clic en la sección de banderas pero no tienes ninguna bandera y luego si presionas ese comando k aquí arriba copiarás la clave del SDK para tu entorno, desplazas el control deslizante de la bandera ID y tendrás eso y esa será tu variable de entorno para la primera sección. Ahora, en un momento, voy a empezar con un temporizador para mantenernos en el tiempo ¿Cómo les va a todos? ¿Quieren decirnos algo en el chat? Sí, si alguien está atascado en algo, no dudes en mencionarlo estamos aquí para asegurarnos de poder ayudarte a desbloquearte. Así que si estás, digamos, en el paso uno, ¿puedes poner una bandera? Como una pequeña bandera en el chat. Puede ser una bandera de tu elección, puede ser una bandera de donde te encuentres actualmente. Tengo un uno. Voy a tomar un uno. Genial Jason, me encanta eso. Bjorn. Hola, genial. Bandera a cuadros. Creo que esa será la temática, vamos a avanzar rápidamente hoy. Alex. Aslan, hola.

Hola Dylan, tenemos una bandera de Estados Unidos. Genial. ¿Qué hora es donde estás? Porque Peter y Alex amablemente se unieron a mí durante sus mañanas. Lo aprecio mucho. Eso es una copia ahí. Oh sí. Cómo configurar las banderas de Estados Unidos en top toolbar.jsx Genial. Nos estamos adentrando en cosas divertidas. Bien, voy a mostrar algunos documentos. Esto podría ayudarte Stephanie. Una de las cosas que puedes recordar es que generalmente con React, cuando queremos hacer una función dentro de nuestros archivos, necesitamos importar esa función primero desde algún lugar. Así que agregamos un SDK. Probablemente necesitemos importar esa función para asegurarnos de que funcione. Me identifico con eso Jason, cuando me estaba preparando para esta sesión, seguía obteniendo las, ya sé sobre las variables de entorno, las uso todo el tiempo. ¿Por qué, por qué, por qué tengo que buscar esto cada vez? Y V es un poco gracioso, ¿verdad? Porque tienes que nombrar las variables de entorno de una manera especial para que las reconozca. Así que dejamos un enlace en el archivo de lectura por si quieres leer más al respecto más tarde. Porque es un tipo especial de sutileza.

Hubo una pregunta sobre el uso de async con el proveedor LD. Y si no me equivoco, eso ya está incluido para ti en el JSX principal. Entendido. Entonces, okay. Entonces, eso, lo siento, como parte del primer paso, lo agregaremos. Disculpas. Sí, el primer paso, si estás inicializando el SDK, y para eso, necesitarás modificar tu archivo main.jsx con el proveedor async. Agregamos enlaces a la documentación, pero dejaremos el bloque de código en el chat de Zoom aquí en un segundo una vez que lleguemos al minuto restante. Pero luego, sí, el segundo paso será cuando realmente crees tu bandera. O, si quieres saltar al segundo paso, también puedes hacerlo. Solo guarda tu commit local en donde te encuentres. El segundo paso ya lo tendrá configurado para ti. Bjorn, ¿en qué rama deberíamos haber hecho checkout? Entonces, haz checkout, primero deberías haber hecho checkout del paso cero. ¿Verdad? ¿Me lo perdí? Main es el paso cero, lo siento. Oh, lo siento. Disculpas. Eso fue solo para la configuración. El primer paso fue simplemente inicializar el SDK, lo cual implicará modificar tu archivo main.jsx. Y luego, cuando hagas checkout del paso dos, eso ya tendrá el proveedor Async incluido para ti, y luego solo estás agregando tu bandera para habilitar nuestra barra de herramientas. Genial. Tan pronto como hayas terminado el paso, haz checkout de la siguiente rama. Hm.

De acuerdo. Entonces, estás obteniendo... Hola, Jason, estoy viendo tu error ahora. Conéctalo... Simplemente no puedo construir una entrada de resolución. Sigamos con... Sin suerte. De acuerdo, déjame intentarlo también. Voy a intentar ese mismo paso, Jason, simplemente voy a eliminar mis módulos de nodo. Sabes, siempre existe la posibilidad de que estemos enfrentando ese momento en el que algo no está funcionando correctamente para más de uno de nosotros. Espero que ese no sea el caso.

¡Oh, genial, Charles, estás ahí! ¡Bien! Sí, tal vez en Node, tal vez necesites actualizar la versión de Node. O a veces he tenido suerte instalando el paquete directamente, así que instala el DOM de React en lugar de simplemente ejecutarlo en NPM, y luego solo ejecútalo en NPMI. Buena idea. Sí, en este momento estoy en Node 18.6. Jason, tal vez puedas ejecutar Node-18.3, de acuerdo. Sí, el mío se instaló sin problemas allí. 15, de acuerdo. Entonces no parece que sea específico de la versión de Node. Me pregunto si podemos hacer una encuesta rápida y ver cómo van las cosas para ver. Tu temporizador se quedó sin tiempo allí, Jess, pero quiero verificar y ver cómo les va a todos. Genial, hagamos eso. Permítanme hacer una encuesta rápida. Hay una función de aplicaciones. No estoy seguro de si puedo hacer una encuesta en realidad. De acuerdo. ¿Puedo obtener, digamos en el chat, poner en qué número de paso te encuentras muy rápidamente y obtendremos una idea de dónde está cada uno? Solo coloca el número de pasos en los que te encuentras. Así que si estás en el paso uno, dos. De acuerdo, genial. Así que somos como un uno sólido y medio en este momento. De acuerdo. Entonces, ¿deberíamos intentar llegar al segundo paso en unos 40 minutos, como a las 40 pasadas de la hora, eso está un poco lejos? Y también la belleza de esta masterclass, solo felicitaciones a Alex en esta y a Peter por haber creado esta gran estructura. Pero si estás en el grupo del segundo paso, puedes hacer checkout de la rama. Puedes comenzar a hacer checkout del tercer paso. Esta masterclass está diseñada para que puedas hacerla en modo difícil si quieres. Si eres un verdadero completacionista al 100%, tienes que completar todas las misiones secundarias, puedes ir directamente a ese modo difícil. Sí. Y solo para reiterar nuevamente, para las personas en el primer paso, si están teniendo algunos desafíos y quieren una pista, pueden adelantarse al repositorio del segundo paso, o simplemente pueden hacer commit de los cambios locales que están haciendo ahora mismo. Hagan checkout del segundo paso y pongan su bandera en funcionamiento. Lo único que debes asegurarte de haber hecho es haber guardado esa clave del SDK en esa variable de entorno que te mencionamos anteriormente. Entonces, si has hecho eso y te encuentras con un obstáculo en el primer paso, algo simplemente no parece estar funcionando para ti y quieres intentar poner una bandera en funcionamiento, siéntete libre de hacer checkout del segundo paso. Siempre puedes volver a tus commits locales en la rama uno. Siento que lo estamos haciendo bien, pero me pregunto si deberíamos introducir otro temporizador en la pantalla. Tengamos un poco de drama de nuevo, hagámoslo. Veamos si, estés donde estés, puedes llegar al siguiente paso en los próximos cinco minutos. Voy a poner rápidamente otro temporizador, ¿está bien eso? Mientras no pongamos la música de Jeopardy, sabes, creo que no estresaremos demasiado a nadie.

Si mantenemos los ritmos bajos, creo que estaremos bien. Lo guardaré para el final. Esto es como un rápido... Sí, intentamos incluir esto en los pasos, pero en caso de que te lo hayas perdido, al crear tus banderas para los pasos básicamente del dos al cuatro, tendrás que asegurarte de marcar la casilla que dice que estás utilizando el SDK del lado del cliente. Si no marcas eso, no recogerá los valores de tus banderas. Así que asegúrate de que cuando estés creando esas banderas, hay una pequeña casilla en LaunchDarkly que cuando creas la bandera, en la parte inferior te pregunta sobre el SDK móvil y también el del lado del cliente. Así que asegúrate de ir y marcar eso. Y si llegas a olvidarlo, está bien.

¿Para qué se utiliza el objeto de usuario que se pasa a async con LD provider? No estoy seguro si eso está cubierto en el README. Lo siento si lo está. Pero me pregunto, al ver el código aquí.

Excelente pregunta. Entonces, el usuario te permite, y en realidad verás esto más adelante cuando nos adentremos en la dirección de un usuario, el objeto de usuario que puedes usar ya sea cuando registras el proveedor o más tarde cuando identificas a un usuario. Así que puedes imaginar que un usuario comienza como anónimo y luego se identifica después de que inicia sesión. Entonces, ese objeto de usuario toma cosas como una clave, que es el ID de usuario, el identificador único para el usuario. Y también puede tomar un conjunto de atributos personalizados, lo que lo hace muy potente porque puedes usar cualquier data que conozcas sobre un usuario, geografía, navegador, cualquier cosa así para ayudar a dirigirte a los usuarios y lanzar características de una manera muy detallada y poderosa.

Bueno, genial. Gracias. De nada. Sí, nos vamos a divertir en el paso tres usando esa información para hacer algunas cosas interesantes. Muy bien. OK, ¿cómo lo estamos haciendo, todos? ¿Todos están en el paso, estamos viendo como el paso tres en este momento? Creo que a estas alturas, todos más o menos, creo que estamos aproximadamente, hemos creado una bandera. Esperemos que si todos han creado una bandera, deberían poder ver una pequeña barra de menú en la parte superior de su galería de imágenes. Entonces, cuando lo actives y desactives, deberías ver eso ahí. Si no lo ves, avísanos.

Genial. Voy a repasar rápidamente la siguiente parte del contenido que vamos a hablar, sobre la dirección y cómo vamos a activar y desactivar esas características que vamos a implementar. En nuestra próxima fase. Como has visto aquí cuando hablamos de lo que pueden hacer las banderas, las banderas son realmente útiles para el derecho a características. Y son realmente útiles en ese escenario en el que, digamos, si estás trabajando en una característica en particular y potencialmente no está completamente lista, no está completamente... ha pasado algunas pruebas, pero no estamos en esa etapa del 100% tener la capacidad de poder activar esa característica solo para tu equipo de desarrollo para que puedan ver esa funcionalidad inicial, probar eso en tu entorno de producción sin que afecte a ninguno de tus usuarios finales es muy poderoso. Entonces, eso es lo que vamos a ver ahora mismo. Vamos a ver cómo crear un pequeño segmento de usuarios y esos usuarios serán tu equipo de desarrollo. Y, vamos a ver cómo habilitar esa nueva vista que vamos a implementar, una nueva versión de la interfaz de usuario para tu aplicación para ajustar a tu equipo de desarrollo.

Peter, Alex, ¿tienen alguna? Sí, la idea en esto es en realidad en dos partes. Por eso es el paso 3a y el paso 3b. El primero, lo que vamos a hacer es crear una regla universal donde básicamente vamos a dirigirnos a los miembros de nuestro equipo de desarrollo para que vean nuestra nueva galería de imágenes, ¿verdad? Así que asegúrate de revisar el paso 3, porque si agregas esta regla en el paso 2, no habrá una nueva galería porque la nueva galería está en el paso 3. Así que asegúrate de guardar tus cambios, asegúrate de hacer commit, pasa al paso 3 cuando estés listo. Y, el primero simplemente será habilitar esa vista de galería para cualquier persona que sea parte de ese equipo de desarrollo. Dentro de ese segmento del equipo de desarrollo, lo que vas a querer hacer es crear un par de usuarios. Puedes usar nuestros nombres, puedes usar tu propio nombre, puedes usar a quien quieras. Crea como tres usuarios porque lo siguiente que vamos a hacer es mostrar variaciones de esa nueva galería dependiendo del usuario. Esto es realmente poderoso si estás tratando de hacer pruebas A-B. Por ejemplo, si quiero que diferentes personas vean diferentes valores y me den comentarios sobre cómo se ve el nuevo diseño, ya sabes, tal vez... porque en este caso, vamos a probar algunas columnas diferentes. Entonces, queremos tal vez... o Jess va a ver tres columnas y yo voy a ver cuatro y podemos dar comentarios sobre cómo se ve y qué pensamos sobre esto en términos del elemento visual. Así que sí, inténtalo. Nuevamente, lo más fácil es simplemente hacer checkout de esa rama, seguir adelante. Intentamos agregar algunos comentarios en el código para darte algo de ayuda. Un par de cosas que diré, justo al principio, asegúrate de importar tus funciones. También asegúrate de que tus banderas estén activadas porque una de las cosas con las que nos encontramos a veces es que creas la bandera, sigues adelante y luego nada cambia y eso se debe a que simplemente no activamos el valor de la bandera todavía y eso suele suceder. Y luego contáctanos con cualquier pregunta que tengas.

Excelente. Bien, voy a poner un temporizador y voy a entrar en Discord para ver cómo les va a todos allí y veremos cómo podemos avanzar con los próximos pasos. Y luego hablaremos sobre cómo marcar el lado del servidor para casos de uso más operativos y qué se puede obtener de esas historias de marcado. Así que empecemos. Solo voy a lanzar esto rápidamente aquí.

De acuerdo. Jess, si tienes un momento, ¿puedes mostrar el segmento y LaunchDarkly para mostrar cómo se puede agregar un nuevo usuario? Sí, por supuesto. Hagámoslo ahora. De acuerdo. Para agregar, para crear un segmento. Voy a crear mi segmento de equipo de desarrollo aquí. Lo voy a dejar como un segmento estándar, y luego puedo agregar a mis usuarios. Voy a poner a Jess, Alex y Peter en el equipo aquí. Sí. Puedes simplemente presionar Enter o hay un pequeño botón de agregar para el usuario cuando escribes el nombre. Así que no es necesario que aparezca en esa lista de antemano. Eso es lo que quería que la gente supiera. Debería decir que no hay usuarios o puede decir anónimo. No tienes que preocuparte de que realmente existan en esa lista de usuarios previamente para agregarlos a este segmento. Ahora, lo único que diré es que será sensible a mayúsculas y minúsculas cuando lo hagas así, por lo que si escribes Peter con minúscula y te registras como tu usuario, es posible que no veas las cosas. Así que asegúrate de estar aquí. Estás usando eso. Sí, mencionaré una de las cosas que llegó al chat. Básicamente, si estás usando el valor del archivo del paso tres, me usé a mí mismo como usuario predeterminado, no tienes que agregarme como usuario a tu equipo de desarrollo. Está bien no hacerlo. Lo que sucederá es que cuando agregues usuarios, cuando vayas a usar tu pantalla de inicio de sesión eventual, simplemente usarás el nombre que creaste, nuevamente, es sensible a mayúsculas y minúsculas. Pero puedes ignorarlo, pero si aparece y dice que puedes agregar este usuario, lo que hizo fue recuperar el valor predeterminado de ese archivo main.jsx que había codificado allí. Así que es por eso que estoy en todos tus LaunchDarklys. Esto venía de Discord, pero lo haré saber aquí. Cuando decimos crear una bandera booleana, a lo que nos referimos es a la variación de la bandera. Entonces, cuando creas una bandera en la parte inferior de tu menú de selección, habrá una barra desplegable que te dará diferentes tipos. Así que para la galería de imágenes, simplemente estamos haciendo una bandera booleana donde decimos verdadero o falso. Pero más adelante, para la bandera de columnas, lo que vamos a hacer es agregar lo que se llama una bandera multivariable o ahora vamos a usar el valor numérico. Así que cuando estés creando banderas, hay diferentes opciones para los valores que se pasarán a tu código. Muchas veces la gente usa Booleano como verdadero o falso para habilitar diferentes bloques de código, que es lo que estamos haciendo para esta galería de imágenes. Pero cuando queremos editarlo más tarde con diferentes valores o pasar diferentes variantes, podemos usar una cadena. Podemos usar un objeto JSON. También podemos usar un número. Así que solo un, solo un aviso rápido allí. Porque sé que puede haber algunas preguntas sobre cómo crear una bandera booleana y realmente lo que es es solo un tipo de bandera. De acuerdo. En cuanto a la nueva galería, esto es más o menos con lo que estoy trabajando en este momento. ¿Cómo se ve en términos de lo que tienes en tus pantallas? ¿Me sigues? ¿Cuántas columnas tienes frente a ti? Solo escribe en el chat cuántas columnas tienes, como tres, cinco, dos, uno. ¿En qué punto estás en términos del número de columnas que tienes en tu pantalla con las imágenes? Tenemos cinco. Muy bien. Charles tiene cinco. Esto se ve bien.

Solo voy a entrar a Discord, ver cómo estamos allí. Oye Peter, ¿crees que podrías responder la pregunta de Alexander sobre el useEffect en app.jsx? Sí. Lo siento. Perdón. No, solo estaba, o estaba respondiendo a alguien de Discord o podemos cambiar, de cualquier manera. Claro. Gracias por la advertencia. Sí. Entonces, lo que estamos haciendo es usar useEffect, que es el método de hooks para recopilar información. Permíteme mostrar cómo se ve eso para que las personas no se confundan. Porque este es un poco diferente. Entiendo completamente por qué algunas personas pueden estar pensando que no lo han usado antes, pero básicamente lo que estamos haciendo, si recuerdas, hablamos de esa clave anteriormente que pasábamos con la función async. Ahora vamos a tomar esa clave cuando hagamos un cambio en el useEffect. Y luego haremos un cambio en el nombre de usuario y actualizaremos esa clave en función de eso. Así que voy a poner aquí un bloque de código que querrás agregar en tu función myApp en app.jsx. Así que vamos a agregar esto. Básicamente, lo que estamos tratando de hacer es usar el estado de react para poder decirnos cuándo hay un cambio en el campo de nombre de usuario. Cuando hay un cambio en el campo de nombre de usuario, llamaremos a esta función LD client, que es la función useLDClient. Así que asegúrate de importar eso primero, al igual que tienes que importar useFlags en la parte superior del archivo. Y lo que esto hace es que le decimos a react que cada vez que detecte un cambio, una vez que exista, por eso tenemos esa función if ahí, cuando detectes el cambio en el nombre de usuario, queremos ejecutar esta función LD, que luego actualizará LaunchDarkly con el nuevo usuario. Así es como vamos a obtener la información para saber si nuestros usuarios tienen la capacidad de ver nuestra nueva galería de imágenes. Si no tenemos eso, básicamente lo que sucede es que, lanzamos Darkly no tiene forma de pasar ese valor verdadero de la nueva galería a nuestros usuarios. Así que ese useEffect es cómo recopilamos la información, la compartimos con LaunchDarkly y luego la enviamos de vuelta. Si agregas eso a tu función myApp en app.jsx, eso debería funcionar siempre que importes tu función. Pero si tienes alguna pregunta, obviamente sigue preguntándonos. Estamos aquí para ayudar.

Algo rápido que surgió en Discord y que no me di cuenta antes, podríamos haberlo incluido en los requisitos previos. Entonces, algo para que Jess, Peter y yo nos aseguremos de incluir la próxima vez. Esto requiere una versión mínima de Node 14.18 o superior. Así que si no tienes eso, querrás, si tienes problemas o errores, eso es probablemente por qué. Así que nos aseguraremos de actualizar eso para la próxima vez. Genial. Muchas gracias Dylan por señalar eso. Eso es genial. Eso es genial. Oh no, ya terminaron. También voy a entrar en la sección de información. Solo para mostrar un poco los import que tenemos en esta sección. Eso me desconcertó. Y si bajamos aquí, cómo estamos pasando la nueva galería. Cómo estamos pasando la nueva galería. Así que tenemos ese retorno de Elves aquí.

Y estamos usando nuestras flags aquí en la línea 96. Y si ya lo explicaste Peter, disculpa, puedes interrumpirme, pero lo que Peter estaba escribiendo en el chat aquí sobre useEffect, y para aquellos de ustedes que no están familiarizados, dejamos un enlace para explicarlo allí. Pero efectivamente, useEffect está escuchando cambios de estado en objetos con estado o, ya saben, cosas que están en el almacenamiento de estado. Entonces, como dijo Peter, escuchamos, por lo que cuando usas useEffect, quieres decirle la matriz de cosas en las que va a escuchar cambios, en este caso, el nombre de usuario. Y la última parte que Peter mencionó fue que también solo quieres establecer eso, solo quieres identificar al usuario cuando realmente tienes un nombre de usuario. Entonces, de forma predeterminada, estará vacío o nulo, ¿verdad?, y no quieres eso. Entonces, harás un bloque if, oh, podría haber aquí un ejemplo de código entrante. ¡Oye! El ejemplo de código está ahí arriba. Pero sí, si quieres verlo de nuevo, ahora está en tu pantalla. Sé que el tamaño de fuente probablemente sea un poco extraño en las pantallas de todos. Avísame si no funciona para alguien.

Muy bien. Dylan, acabas de avanzar al nivel uno. Aquí es donde tendríamos algunas animaciones si tuviéramos un estudio completo detrás de nosotros. Jason, parece que algo puede estar del lado oscuro. Hice algo mal. Oh. Una de las cosas que debes verificar es si, en tu flag, marcaste esa casilla para el SDK del lado del cliente. Si no lo haces, no tomará el valor de tu flag. Sí, aprendí eso de la peor manera el otro día. Mucha frustración porque olvidé marcar esa casilla. Jason, ve a verificar en la propia flag. Hay una pestaña de configuración. Y asegúrate de que el SDK del lado del cliente esté marcado. Entonces, si entras en la flag y vas a configuración, deberías ver que está marcado aquí. Muy bien, perfecto.

¿Estás actualmente en el entorno de prueba? El entorno de prueba debería estar bien. Jason, ¿estás viendo algún otro error en tu registro aparte de `indefinido` para el usuario? No. Interesante, todavía estoy pasando un `indefinido`. Así que una pregunta rápida de Charles sobre si el usuario en el segmento `equipos de desarrollo` es verdadero. En realidad, no tienes que poner ninguna de esa lógica condicional. Esto es lo genial de LaunchDarkly, el SDK hace esa evaluación por ti. Y lo que va a hacer es enviar esos datos de usuario y determinar o extraer esos datos de usuario en el SDK para determinar si están en el segmento correcto o si coinciden con esta característica. Peter, ¿puedes llevar a Charles a esa sala de grupos de trabajo también? ¿Qué dijo mientras Peter desaparecía? Fin de la noche.

Alexander, la forma de verificar si funciona con un segmento es simplemente, o en realidad estoy feliz de compartirlo de nuevo. ¿Todavía tienes el portal abierto? Sí, el portal de LaunchDarkly, ¿verdad? Sí, sí, gracias. Entonces, la forma en que establecemos las reglas de segmentación para un segmento, ¿verdad?, es lo que hacemos es ir al piso. Así que tenemos el segmento aquí. Y lo que hacemos es, digamos que creamos una flag. Y sí, bien. Sí, esto es como una nueva galería o algo así. Oh, sí, perfecto. Solo llamémosla nueva flag. Y luego. Entonces, recuerda establecer los SDK utilizando el ID del lado del cliente. También puedes hacerlo en el momento de la creación. OK, comentario muy útil. Y luego. Ahora, esto está dirigido a los usuarios que cumplen estas reglas. Así es como vas a dirigirte a los usuarios en un segmento. Y veamos. Así que si te fijas en el lugar donde está Jess ahora, donde está ese resaltado azul. Perfecto. Correcto. El usuario está en el segmento. Y esto permitirá que el SDK haga esa evaluación por ti. Así que no tienes que tener ninguna. Como tradicionalmente, hemos tenido que escribir esa lógica en nuestras aplicaciones. Donde decimos, oh, ¿tiene el usuario este rol o aquel rol o tiene esta preferencia?

Muy bien, voy a echar un vistazo al siguiente paso del masterclass. Ok, ¿quién está en esa especie de tabla? En esa especie de lista de tareas pendientes del paso de arriba ahora mismo. Y nos quedan un par de cosas interesantes, pero quiero asegurarme de que no dejemos a nadie atrás también, así que Hay algunas cosas interesantes en los últimos pasos aquí. Es bastante emocionante. Dijo en un tono monótono.

Hagamos una revisión rápida, veamos cómo estamos todos. Todos pueden simplemente poner en el chat en qué paso están en el masterclass. Voy a empezar con, quiero decir, creo que estoy en, ok, tenemos cuatro de Alexander que terminaron el paso cuatro y Valeriy que está empezando el paso cinco. Bien hecho. Ok, genial. Tenemos a algunas personas avanzando allí. Creo que estoy en el paso cuatro en este momento. Aquí es donde desearía tener una mesa de sonido. Oh, necesitamos eso para el próximo. Tal vez ese sea nuestro próximo proyecto de programación design una mesa de sonido. ¿Alguien en el chat diseñó una mesa de sonido, que sería bastante simple, ¿verdad? Solo un montón de botones. Ok, tenemos algunos cuatros y cincos avanzando en este momento. ¿Deberíamos hablar sobre las flags del lado del servidor? ¿Cómo nos sentimos? Puedo darte una vista previa rápida y luego podemos hablar sobre para qué podemos usar las flags del lado del servidor. Permíteme repasar un poco de este trabajo aquí y luego tal vez podamos pasar el resto del tiempo llegando al paso cinco y terminando nuestros últimos pasos en el masterclass. Así que, voy a mantener el ambiente con la banda sonora para que todos terminen ese paso cuatro, pasen al paso cinco, pero solo como antecedentes. Como has visto hasta ahora, hemos configurado nuestro SDK y hemos importado LaunchDark como una dependencia. Hemos estado haciendo referencia a las flags en nuestra función. Así es como nuestras flags se evalúan en JSX. El ciclo de vida de una flag es más o menos así: nuestra aplicación se inicia y llama al SDK de Notch Darkly. Luego, ese SDK se inicializa y se conecta a nuestra red de entrega de flags. Tienes un servicio de estilo FDM, que funciona casi como un servicio de estilo AWS. Y ese servicio recibe nuestra carga inicial de reglas de flags. Luego, las flags y las reglas se almacenan en caché en memoria. Y finalmente, las flags se actualizan y se te entregan actualizadas a ti o a un usuario. Y eso es más o menos cómo se ven esas conexiones de activación. Ahora, como quizás hayas visto hasta ahora, si has echado un vistazo al paso cinco, en realidad tenemos dos tipos diferentes de flags. Tenemos nuestras flags del lado del cliente, que son muy útiles para cambiar tus vistas, cambiar y mejorar tus interfaces de usuario. También hemos creado flags del lado del servidor. También tenemos SDK del lado del servidor, que se pueden usar para activar flags más cerca del servidor. En las flags del lado del servidor, todas las reglas y usos en el entorno actual se evalúan, por lo que es menos como esa situación específica del dispositivo del lado del cliente. Y las flags del lado del servidor son súper útiles para. Por ejemplo, si quieres instalar un mecanismo de interruptor de circuito o necesitas poder cambiar a un modo más seguro, eso es muy útil para esos escenarios. Peter y Alex, ¿tienen alguna pepita del lado del servidor que quieran compartir con el grupo en este momento? Sí, sabes, una de las cosas de las que hablamos mucho es que cuando cambias entre APIs, cambias mucho de un lugar a otro, dependiendo de en qué trabajas y dónde, es posible que necesites migrar entre bases de datos de vez en cuando. Y en mi experiencia, eso suele ser muy doloroso. Pero en el lado del servidor, puedes hacer que esas cosas sean configurables para que puedas, al igual que haces targeting en el front-end, puedes dirigir las solicitudes de API a diferentes rutas según la información del usuario o del usuario. No tiene que ser un usuario, ¿verdad? Puede ser un sistema. Puedes enviar solicitudes a una nueva ruta en una API o a otra fuente de datos, lo cual es muy poderoso. Escucha, para que te hagas una idea de esto, finalmente, creo que si estás en el paso cinco, te familiarizarás con las flags del lado del servidor. Así que tenemos, ya que estamos llegando al final de nuestra sesión, tenemos tres niveles de complejidad en los que puedes abordar este paso, puedes optar por esta opción si tienes Docker instalado. Recomendamos que elijas esta opción si tienes poco tiempo y todo lo que necesitarás hacer es agregar tu clave de SDK de LaunchDarkly al archivo Docker Compose.yaml. Esta es la opción más sencilla. Estamos utilizando Docker para hacer la mayor parte del trabajo pesado, pero también te hemos proporcionado una plantilla aquí. Si realmente no quieres usar Docker y prefieres ir un poco más sin guía. Y finalmente, quiero decir, también tienes la opción de construir tu propia database si realmente no quieres seguir la ruta de Postgres.

Entonces, esta es un poco más como la parte de elige tu propia aventura del viaje. A medida que llegamos al final, solo quería hacer una rápida revisión para ver si todos estamos en el paso cinco ahora, ¿cómo nos sentimos? Si todos estamos en el paso cinco, simplemente envíenme un mensaje rápido o envíen un mensaje directo a Peter, Alex o a mí. Pueden hacerlo usando la función de chat y desplazarse hacia abajo y seleccionar uno de nuestros nombres. Si estás atascado en una sección en particular o si quieres profundizar en un paso en particular, podemos hacer una pausa allí. Podemos ir a una sala separada o enfocarnos en cualquier cosa que te parezca interesante o problemática.

Sí, para que todos lo sepan, en el paso 3a, estoy trabajando con Jason en una sala separada. Si alguien quiere levantar la mano y unirse a nosotros, si tienen algún problema, definitivamente podemos hacer eso también. Jason, te volveré a agregar a esa sala separada. Pero dame un segundo. Siéntanse libres de levantar la mano y estaré encantado de agregarlos a esa sala si tienen problemas con el paso 3a.

Muy bien. Hola a todos. ¿Dónde está la música de ambiente? ¿Todavía está aquí? Permítanme volver atrás. Me estaba gustando. Vamos a traerla de vuelta. ¿Alguien tiene alguna solicitud mientras nos acercamos a la parte final? Si alguien en el paso cinco tiene una solicitud de una canción en particular. Y DJ jazzy Jess, creo que ese debe ser mi nombre a partir de ahora. ¿Qué les parece? Escuchemos esta. Vamos con una buena base. Oh, espera un minuto. Ahí vamos.

Muy bien, nos estamos acercando a la parte final, a la última etapa. Creo que la mayoría de las personas estarán en la sección del paso cinco. Vamos a entrar en Discord y ver cómo nos va. Vamos a ver cómo estamos. Tal vez deberíamos hacer una cuenta regresiva final. Sí, probablemente. Así tendremos la oportunidad de ponernos en contacto con todos. Sí, les voy a contar sobre una pequeña demostración divertida que hice recientemente utilizando flags del lado del servidor. Dejé un enlace en el chat. Y no dejen que los distraiga ahora mismo. Pero es solo por diversión. Hice un bot explicador de emojis. Le envías un emoji y te devuelve información. Y la primera versión del servicio te dice el nombre del emoji. Muchas personas tienen preguntas sobre los nombres de ciertos emojis. Y la segunda versión del servicio, que eventualmente explicaré en la demostración, te explica cómo usar cada emoji. Actualmente tiene un catálogo de alrededor de 4,000 emojis. Y diría que hay alrededor de 2,000 que tienen explicaciones útiles. También hay algunos huevos de Pascua divertidos. Pero creo que una de las cosas interesantes es que muchas veces las personas ven las flags de características y piensan en... Piensan en el front-end. Y lo realmente genial de este ejemplo es que hice un sitio web con él.

Y lo hice de manera que también pudieras enviar mensajes de texto con el bot. ¡Oh, genial! Y claramente no estoy en tu teléfono. ¿Entonces, dónde se encuentran esas flags de características? En el backend. Entonces, ¿basado en información sobre cuál era tu número de teléfono, verdad? Puse a las personas en diferentes segmentos con eso. O cuando estás en el navegador, no compré diferentes dispositivos. Deliberadamente no lo hice... Digamos que opté por dispositivos Mac, ¿sabes? Fui un poco exclusivo al respecto. Solo porque estaba recogiendo personas en la demostración. Solo permití que las personas con IE11 lo usaran. Cosas así. Un buen control de versiones en marcha.

Estamos llegando a los últimos minutos. Muchas gracias a todos por acompañarnos. Ha sido una sesión realmente buena. Espero que se hayan divertido mucho. Espero que se hayan divertido un poco con las flags. Han lanzado sus comentarios. Han probado un poco la funcionalidad. Y han visto cómo podría funcionar en su entorno.

Peter, ¿cómo estás? ¿Estás en la llamada en este momento? Estoy bien. Estoy aquí mismo. Solo estoy configurando. Vamos a hacer una gran revelación de cómo debería verse todo al final. Podemos hacer el último acto, creo. Permítanme configurarlo para que nadie tenga que ver cuántas pestañas tengo abiertas. Esperemos que mi pantalla compartida funcione hoy. Pero veremos qué pasa. Shafi, ¿por qué no empiezas? Muchas gracias, Cyril. Lo aprecio mucho. Puedo hacerlo ahora mismo. Al menos puedo pasar por los pasos iniciales y luego haré el lado del servidor al final, si quieres que comparta. Sí, suena bien. Haré mi parte. Solo quería meterme en un poco de pesadilla logística. Si alguien tiene muchas pestañas abiertas, pongan cuántas pestañas tienen abiertas en el chat. Y como agradecimiento por quedarse con nosotros hasta el final, voy a ver si podemos conseguirles algún tipo de regalo. Veamos cómo funciona esto. A ver si termino perdiendo mi trabajo en el proceso. Esto será una pequeña prueba divertida de mi contrato laboral.

Ok. ¿La gente está viendo mi pantalla aquí? Deberían ver un montón de flags. Genial. Así que, al recorrer todo este proceso, si quieren ver cómo se ve todo al final, cuando inicializaron su aplicación por primera vez, deberían haber visto algo como esto, simplemente un montón de imágenes, por ahí. Y la primera flag, si recuerdan, que hicimos, fue agregar una barra de herramientas. Entonces, lo que hice fue crear esta flag de barra de herramientas, y básicamente el valor predeterminado es que está desactivada. Y así, necesitábamos actualizar nuestro código para poder cambiar eso. Cuando activamos nuestra flag aquí, lo hacemos en modo de prueba, así que no tengo que dejar comentarios ni nada ni obtener aprobaciones. Ahora tenemos esta barra de herramientas de LaunchDarkly habilitada. Y esto va a habilitar muchas funcionalidades. Tendremos una barra de menú aquí arriba así como un inicio de sesión que vamos a necesitar hacer. Así que eso fue solo el primer paso. Nuevamente, simple, verdadero, falso, no teníamos barra de herramientas, y ahora tenemos una barra de herramientas, fácil de probar nuestro código.

La siguiente que queríamos hacer es verificar esta idea de esta nueva galería. Y básicamente lo que queremos, y ignoren el guión bajo aquí en el mío, se supone que debe ser camel case. No estaba acostumbrado a hacerlo de esa manera, pero lo arreglé. Pero básicamente esta nueva galería tenía su regla de segmentación. Y lo que queríamos hacer es decir, solo queríamos que nuestro segmento de equipo de desarrollo pudiera ver todo. Así que, de lo contrario, deberíamos devolver falso. Así que notarán que en realidad no ha cambiado nada cuando activé la flag y eso fue a propósito, queremos que eso suceda. Entonces, en lugar de eso, necesito iniciar sesión como un usuario que tenga las reglas de segmentación habilitadas y Peter era parte de mi equipo de desarrollo. Y ahora vemos esta nueva galería de imágenes, pero tal vez no nos guste mucho.

Tal vez tengamos otros miembros del equipo de desarrollo que quieran ver algo diferente. Y lo que podemos hacer es utilizar diferentes reglas de segmentación. Así que cuando creamos esa flag de columnas, volvamos aquí. Sé que estoy avanzando rápidamente pero solo quiero asegurarme de mostrarlo y siéntete libre de interrumpirme Alex si hay alguna pregunta que queramos intentar responder.

Entonces teníamos esto, lo que llamamos una flag multivariable. Y una flag multivariable devuelve una serie de números dependiendo del usuario. Así que tenemos un valor predeterminado de dos. Tenemos a Peter que obviamente vimos que le gustan esos tres, tenemos cuatro para Alex, cinco para Cody y luego nuestra regla predeterminada es servir dos. Entonces, si estás diciendo, espera un minuto, iniciaste sesión como Peter. ¿Por qué no estás viendo tres columnas? Porque eso es lo que deberías estar viendo. La razón es porque en realidad no he activado esta flag todavía. Entonces, los valores predeterminados que se están sirviendo son dos columnas en la nueva galería. Así que cuando active esto y lo revise y lo guarde, nuevamente, no necesitamos comentar porque estamos en nuestro entorno de prueba. Ahora ves que tengo mis tres flags habilitadas. Y lo que estamos haciendo es cambiar un valor dinámico del número de columnas según el usuario. Esto es realmente útil cuando estamos haciendo múltiples diseños o varias personas que están probando cosas diferentes. Entonces, si inicio sesión como Alex, Alex ahora ve cuatro columnas. Así que podemos decidir cuál nos gusta más. Podemos votar sobre eso y luego podemos habilitar la siguiente aplicación o implementarla para todos o hacer una implementación gradual para algunos de nuestros usuarios.

Lo siguiente que hicimos es que queríamos tener esta lista de tareas habilitada. Entonces, por ahora, nuestro menú no hace nada. Si hacemos clic en el botón del menú aquí, no sucede nada, eso es por design. Porque lo que necesitábamos hacer es crear esta flag de lista de tareas para habilitar un nuevo componente en nuestro código. Una de las grandes cosas de React que todos conocemos es que puedo pasar nuevos componentes como piezas diferentes y puedo usar flags para controlar cuándo ese componente se pasa a mi aplicación principal. Y ahora notarás que en realidad tengo esta lista de tareas que aparece en la barra de navegación lateral aquí. Y la abro y luego si hago clic en la lista de tareas oh-oh, algo está roto de nuevo. Así que todo lo que hicimos fue crear el camino hacia este nuevo componente. Pero una de las grandes cosas de LaunchDarkly es que no solo es para el desarrollo front-end. También podemos hacer desarrollo back-end porque tal vez teníamos el design para este componente listo pero no queríamos activarlo todavía. Y así, si alguien hace clic en él, dicen oh-oh, como que en realidad no quiero que vayan aquí, esta zona aún no está lista porque las cosas no funcionan. Entonces podemos habilitarlo para que devuelva un error. Y lo siguiente que necesitamos hacer es crear el servidor. Así que dame un segundo para hacer el Darkroom post up. Haré una pausa, tomaré aire allí, a ver si alguien tiene alguna pregunta. No sé si algo llegó al chat mientras lo configuro. No tuvimos, oh, lo siento. Adelante. Oh, no tuvimos ninguna pregunta sobre las flags. Estábamos bromeando sobre Alex teniendo la mayor cantidad de pestañas en la pantalla. Tiene 43 abiertas. ¿43? Sé que es ridículo, ¿verdad? Es increíble. Bien, solo tengo que agarrar. Esto es mucho crecimiento para mí porque ese número solía ser mucho más grande. Así que he trabajado duro para cerrar pestañas. Ok, dame un segundo solo para ir a mi Docker compose y asegurarme de que esto no falle para nosotros. Ok. Aquí. Ok, genial. Y volveremos a compartir la pantalla. Disculpen la demora sin música genial.

Muy bien. Entonces, lo que hicimos es que estoy en ese archivo. Creé un archivo Docker Compose. Para aquellos de ustedes que están familiarizados, Docker Compose es genial si estás tratando de probar solo un par de aplicaciones en contenedores. Básicamente, el archivo que está ahí, si quieres intentarlo tú mismo, hay una variable de entorno comentada donde debes agregar tu clave SDK del lado del servidor para que esto funcione.

Básicamente, está preprogramado con los valores de las flags. Si quieres construirlo tú mismo, puedes usar la plantilla que tenemos ahí. Algunas cosas que tendrás que hacer es iniciar el cliente. Tendrás que iniciar ese cliente del lado del servidor. Así que tendrás que escuchar a Dolan Starkly. Hay algo de documentación sobre cómo hacer eso. Y luego, lo otro que tendrás que hacer es asegurarte de crear una base de datos Postgres a la que estés conectado. Está apuntando a localhost.

Entonces, básicamente, lo que tengo aquí es esta flag de la API. Y lo que estoy haciendo es simplemente una flag de verdadero o falso. La razón por la que esto es genial desde la perspectiva del servidor es que me permite activar la API cuando quiero usarla. Así que hemos hecho nuestras pruebas. Nos sentimos muy bien al respecto. Queremos habilitarlo para todos. Podemos revisar y guardar los cambios. Ahora, crucemos los dedos, cuando vayamos a esta página de tareas pendientes, ahora tenemos la página de tareas pendientes de Dolan Starkly. Y puedo hacer un seguimiento de mis tareas diarias. Tenemos nuestro masterclass de React Avanzado. Y podemos agregar nuestras tareas pendientes. Y ahora ves que está en nuestra lista de tareas pendientes. Y ahora que hemos completado nuestro masterclass de React, podemos marcarlo como completado en nuestra lista. Así es como funciona todo esto. Y, nuevamente, podemos activar la flag de la API en el servidor, no solo en el lado del front-end. Por eso, esta es una herramienta de desarrollo full-stack. No necesitas usarla solo para el front-end. Pero gracias a todos por acompañarme mientras lo hice rápidamente. Espero que todos lo intenten. El repositorio, obviamente, está disponible para que pruebes esto. Y si quieres intentar construir tu propio servidor Node y hacerlo de esa manera, te proporcionamos un pequeño script por lotes para crear una base de datos Postgres para que no tengas que hacerlo tú mismo. Genial. Muchas gracias a todos por unirse, lo apreciamos mucho. Espero que lo aprovechen... Solo voy a unirme. Ahí vamos, de vuelta con el grupo. Sí, espero que... Me encanta el emoji de fiesta, Alexander, suyo, Jason. Realmente apreciamos que se unan. MVP del chat ahí mismo. Muchas gracias a todos por unirse, los veremos la próxima semana cuando comience el masterclass de React Avanzado. Creo que esto es, como, en nuestra serie de talleres de prueba. Pero creo que eso es todo de nuestra parte, ¿verdad? ¿Verdad, grupo, verdad? Eso es, eso es todo. Genial. Eso es todo. Eso es todo, amigos. Muchas gracias a todos por unirse, y hasta luego. Que tengan un excelente resto de día. Gracias a todos por las preguntas. Gracias. Gracias, amigos. Adiós. Buen trabajo, amigos.