Tiene un escenario que tiene dos aplicaciones, una aplicación de blog donde los administradores pueden llenar artículos de blog y hacer que esos blogs sean leídos tanto por invitados como por nuevos empleados, y una aplicación de portal donde los administradores llenan el sistema de gestión de contenido con alquileres en el área. Y los nuevos empleados pueden entonces usar el portal para navegar por los alquileres disponibles, guardarlos en su perfil, y reservarlos para el pago. Pero lo más importante, sabíamos que teníamos que design una architecture que pudiera ser extendida a nuevos escenarios.
Así que al empezar, lo que necesitas hacer si quieres seguir el ritmo es ir adelante y crear una copia de esto, bifurcar el repositorio y usar la URL que he dado en el texto de abajo. Eso es porque esta implementación de referencia está activamente en desarrollo, así que quiero asegurarme de que tienes una rama estable, así que busca aka.ms slash Contoso hyphen real estate, hyphen react, hyphen summit, hyphen 2023. Desmarca la casilla de la rama principal para que esté copiando todas las ramas, y luego busca la rama del react summit en tu bifurcación. En este punto, estamos listos para empezar a deconstruir.
Lo primero que quieres hacer es entender o responder a la pregunta del entorno de desarrollo, ¿cómo deberíamos configurar nuestro entorno de desarrollo? En nuestra implementación de referencia, abogamos por los espacios de código de GitHub o más bien por un entorno devcontainer. Así que déjame mostrarte rápidamente cómo se ve eso. Así que cuando bifurcas el repositorio y cambias a esa rama en particular, quieres ir a ver el menú desplegable de código y empezar un nuevo espacio de código. En mi caso, ya tengo uno en funcionamiento, así que lo dejé caer, y puedes ver que tengo uno en funcionamiento, y cuando lo lanzas, tarda un poco de tiempo, pero cuando terminas, en realidad vas a ver algo como esto.
Así que como puedes ver, tienes lo que parece ser una experiencia de Visual Studio Code justo en tu navegador, pero está conectado a un entorno de runtime que puede ejecutar esta aplicación para ti. Así que echemos un vistazo a lo que es un devcontainer. Así que en este caso en particular, vas a aprender dos cosas. Primero, un devcontainer es un contenedor Docker que se ejecuta en la cloud en el caso de los espacios de código de GitHub, pero el patrón que vas a entender es que utiliza la configuración como código. Ese entorno está definido por un archivo devcontainer.json que puedes registrar junto con tu base de código. Puedes controlar su versión, puedes modificarlo, puedes compartirlo con otros. Y lo que hace es asegurar que cualquiera que use este proyecto esté configurado con el mismo entorno exacto en el que pueden construir, debug, y desplegar.
Una vez que has hecho eso, esto es opcional, pero te animo a que instales GitHub Copilot Chat, y estoy seguro de que te voy a mostrar muy rápidamente por qué es útil. Así que lo que hace GitHub Copilot Chat es que proporciona un asistente de IA, pero ese asistente de IA está sentado justo en VS Code. Así que en mi caso, ya lo he instalado, y cuando hago clic en esto, obtengo un asistente de chat justo en mi experiencia de VS Code. Y lo que eso significa es que cuando estoy atascado con una pregunta en particular, por ejemplo, puedo preguntarle, ¿qué son los espacios de código de GitHub? Y en lugar de salir de esto a Google y luego volver y cambiar de contexto, le pregunto aquí mismo y me da una respuesta en contexto, pero puede hacer más. Puedo preguntarle, así que puedo usar cosas como comandos, como explicar y decir explicar qué hace esto, ¿verdad? Pero ahora lo que está haciendo es que está tomando esto y mirando el archivo que tienes abierto aquí, que es devcontainer.json y diciendo, oh, déjame explicar qué hace esto, que es un devcontainer. Y ahora puedes, y combina los dos y sigue el software, pero quieres entender los beneficios de los espacios de código. Así que lo que tienes es un asistente de IA que se mantiene en línea con tu flujo, pero también tiene el contexto de lo que estás trabajando en tu entorno de desarrollo y puede personalizar sus respuestas para ayudarte. Y como puedes ver aquí, no sólo puedes hacer que explique cosas, puedes hacer que genere código, que lo corrija, que lo simplifique, que cree cuadernos, que cree espacios de trabajo, y también simplemente consultas o instrucciones de forma libre. Así que ahora tienes tu entorno de desarrollo. Sabes que tu código ya está ahí. ¿Qué puedes hacer? A continuación, queremos construir y previsualizar la aplicación justo ahí en el navegador para validar el hecho de que esa implementación de referencia realmente funciona para nuestras necesidades. En mi caso, ya lo tengo en funcionamiento y notarás que en las instrucciones, nos dice cómo empezar a construirlo y previsualizarlo.
Comments