Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure

Voy a comenzar con una introducción sobre quién soy, ya sabes, qué vamos a hacer aquí y qué vamos a crear. Voy a hablar sobre Nuxtree, Azure State Web Apps y Azure Functions. Ya lo he dicho como cuatro veces ahora y solo han pasado cinco minutos, pero empeorará, créeme. Y vamos a hacer una especie de introducción, solo una pequeña parte de lo que hemos construido, algunas reflexiones que tenemos después de crear esto, cosas así. Una de las cosas importantes también en este masterclass en este momento son Juul y Samachi, y ellos serán las personas que estarán atentas a los chats y a Discord para ver si surgen preguntas, si hay dudas o tal vez errores en tu parte o simplemente cosas que quieras decir, y ellos responderán en su mayoría o me las transmitirán a mí, solo para que lo sepas, que si ellos responden, no son desarrolladores entrometidos que solo quieren hacer eso. No, ellos forman parte de mi equipo hoy. Así que eso es realmente maravilloso.

De acuerdo. Oh, eso fue un spoiler. ¿Quién soy? Mira estas dos fotos. Esto resume quién soy durante el verano, obviamente, porque esto no es el invierno. Entonces, en las redes sociales y blogs, puedes encontrarme como Ready Player Melly, porque Ready Player One, aunque es un libro muy malo, en realidad es uno de mis libros favoritos de todos los tiempos. Pero por favor, no me juzgues por eso. Todos pueden tener opiniones negativas sobre algo. Pero a mí me encanta el libro, así que estoy realmente emocionado. Soy Mel y yo también. Vivo en Lima, que está justo al lado de Ámsterdam, Países Bajos, con mi novio y mis dos cobayas. Actualmente trabajo como ingeniero de software en Capgemini, Países Bajos, ubicado en Utrecht. Y he estado allí durante casi cuatro años. Realmente me gusta mucho, por supuesto, de lo contrario no estaría allí todavía. Y mi conjunto de herramientas actual, bueno, el conjunto de herramientas actual, el conjunto de herramientas en el que he estado trabajando durante los últimos años es Vue, LitElements para Web Components, Azure y Node. Entonces, si escuchas todas estas tecnologías, no te sorprenderá que este sea el conjunto de herramientas del masterclass que he elegido. Así que en mi tiempo libre, porque tengo un poco de eso, soy un navegante de las aguas holandesas. Y a mi novio le pareció muy gracioso que yo me atreva a decirlo en voz alta, pero tenemos un barco. Así que voy a asumir ese título. Estamos muy cerca de, bueno, una gran cantidad de agua que los Países Bajos tienen para ofrecer. Tenemos un velero de 24 pies o siete metros y medio llamado Bola. Y Bola significa, para los que no hablan neerlandés, una persona un poco más grande, como rechoncha. Rechoncha sería una buena traducción de eso. Sí. Porque ella es simplemente, bien formada. Así es como lo dicen en un barco. Espero. Ella ya tenía el nombre. Ya tenía el nombre cuando la conseguimos el año pasado. Así que no fuimos responsables de eso. Pero durante los últimos meses, le hemos dado una renovación muy elaborada. Y como puedes ver en una de las fotos también, estamos en el agua. Ella hizo todo aquí debajo. Y ahora está de vuelta en el agua. Y este verano vamos a explorar el IJsselmeer y tal vez un poco del Wadizé y todas las lindas ciudades que los Países Bajos tienen para ofrecer. Aparte de mi vida de navegante, que está en expansión, me gusta filmar la vida pequeña. Realmente estaba luchando con cómo describir eso. Pero simplemente la vida pequeña bajo y sobre el nivel del agua. Me resulta muy relajante ver mundos que nunca antes había visto, por pequeños que sean. Así que a veces simplemente lanzo mi cámara a un estanque y veo qué vive allí. Tengo esta pequeña cámara, no es realmente una GoPro pero es muy buena, casi una GoPro. Y simplemente la lanzo al agua en un palo y luego graba cosas. Y generalmente graba estas pequeñas criaturas espeluznantes que normalmente no verías. Eso es lo que hago para relajarme. Realmente puedes, ya sabes... Definitivamente deberías probarlo.

Entonces, ¡nuestra aplicación! Lo que vamos a crear hoy es Bucklopedia. Y es muy bonito, me gusta mucho. Básicamente, será como Pokedex, pero para insectos reales. Si eres un entomólogo, no te preocupes, te haré sentir como un insecto.

Entonces, Bucklopedia, ¿verdad? No sé si puedes verlo, pero también hay muchos insectos en mi vestido hoy, porque realmente estoy en tema. Sé que lo encuentro un poco gracioso. En los últimos meses, descubrí que necesitaba encontrar nuevas formas de relajarme, y comencé a interesarme nuevamente en las plantas, los insectos y la naturaleza. Cómo funcionan las cosas y cómo se relacionan entre sí.

Así que comencé a construir ecosistemas autosostenibles con la idea de colocar bichos bolita como mascotas. Los compré, pero no los compré, los construí casi, y ahora estoy tratando de ver si las plantas pueden sobrevivir, porque si las plantas pueden sobrevivir, entonces tal vez los bichos bolita también puedan sobrevivir, con suerte. Aún no están allí, pero estarán allí. También compré una buena cantidad de plantas para un balcón, y estoy muy feliz de anunciar que todas siguen vivas y prosperando. Pero una de mis plantas tiene piojos, muchos piojos, y soy vegetariano, así que siempre trato de tomar decisiones conscientes. Eso significa que mi primer repelente de insectos tendría que ser natural, y Google me dijo que las crías de mariquita comen muchos piojos. Así que capturé 6 crías de mariquita y las coloqué en mi planta, pensando realmente, bueno, ahora van a devorar todos esos piojos. Dos de ellos lo hicieron, más o menos. Estaban cerca y tal vez comieron uno o dos. Pero después de dos días, los seis estaban en un estado de metamorfosis para convertirse en una mariquita real. Así que ahora todavía tengo piojos y seis casi mariquitas. Pero al menos me dio un tema para este masterclass. Y eso me hizo pensar... ¿Sería genial tener esta enciclopedia de insectos a mano para obtener información útil? Bueno, nos encontraremos con muchos.

Y obviamente, no cumplí del todo. No puedo cumplir con esa gran promesa. Pero hoy haremos un comienzo. Nuestro objetivo para hoy será crear una aplicación casi desde cero. Y digo casi... porque vamos a usar esta plantilla de aplicación de NUXT. Así que configurará una aplicación para ti. Y por supuesto, he pensado en lo que vamos a hacer. Pero es como un copiar y pegar para todas las futuras aplicaciones que quieras desplegar. Vamos a desplegar una aplicación en Internet. Ahí es donde entran en juego las Azure Static Web Apps. Y vamos a desplegar una API para abrir los puntos finales. /api/bugs. Por supuesto, voy a explicarlo todo. Una nota importante aquí... el enfoque de este masterclass... no es necesariamente en NUXT 3 y el desarrollo de aplicaciones. Quiero darte una idea de cómo sería el desarrollo web de principio a fin con esta tecnología en 2022. Aunque te daré mucha información, no se centra principalmente en NUXT en absoluto. Pero tenemos control de versiones, compilaciones, despliegues y puntos finales de API. Así que habrá mucho y hablaré mucho. Ya tengo la boca seca, así que será genial.

Ok, entonces nuestro espacio de trabajo para hoy. Puede que notes, puede que no notes que estoy usando Windows. No lo probé en un Macbook, pero espero que funcione. No tuve tiempo de probarlo en un Macbook adecuado, desafortunadamente. Estoy usando Visual Studio Code. Honestamente, es el único editor que uso y en nuestro caso, tiene muchas extensiones de Azure que vamos a utilizar. Durante este masterclass verás mucho Visual Studio Code, pero siéntete libre de usar lo que prefieras. Pero recuerda que necesitamos algunas extensiones, si quieres programar correctamente, y hay otras formas de hacerlo. Así que siéntete libre de hacer lo que quieras. Estamos usando GitHub, así que si no tienes una cuenta de GitHub, ahora es el momento. No toma mucho tiempo, ¿tal vez 4 minutos? En Azure, uno de los requisitos previos para este curso fue tener una cuenta de Azure. Si no tienes una ahora, o no quieres programar en este momento, está bien. Este masterclass será grabado y luego compartido después de JS Nation, la conferencia real, en las próximas semanas, meses, se publicará una grabación real de esto. Siempre puedes hacerlo más tarde. Luego, las extensiones que podrías usar, la extensión de VS code. Algunas extensiones que definitivamente vamos a usar son Azure Accounts, Azure Functions, Azure Resources y Azure Static Webapps. Bueno, las últimas no necesariamente, en realidad. Vamos a hacer eso en el portal de archivos. Al menos Azure Functions y Azure Account. Esas definitivamente se utilizarán. Sí. No las instales todas ahora mismo porque aún habrá algo de tiempo después de eso. Como también puedes ver, Azure Resource y Azure Static Webapps todavía están en vista previa, todavía son nuevos.

Desafortunadamente, eso no es realmente un problema para nosotros, pero aún así, solo quería señalar que todavía no todo funciona correctamente. Eso puede ser una buena crisis. Las otras extensiones, porque por supuesto vamos a codificar en Nuxt, así que hay pocas. Podrías usar Bolr para unas pocas, tres soporte. Definitivamente lo recomendaré si lo estás haciendo en TypeScript. Por ahora, todavía uso Feater, que se basa en Vue 2, pero a veces puede darte advertencias innecesarias. Principalmente uso Feater porque no estoy escribiendo, no, tampoco estoy escribiendo, sino codificando en TypeScript, todavía uso JavaScript.

Entonces, Volar puede darte muchos otros errores que no tienen nada que ver con mi código real, sino con TypeScript. Pero solo para que lo sepas, el tema que tengo para hoy es SYNTHWAVE 84, es un tema nuevo. Normalmente no codifico mucho en esta computadora portátil, así que realmente tuve que hacerla mía. También he estado viendo la nueva temporada de Stranger Things en los últimos días. Siempre me pone un poco en el ambiente de los años 80, creo. Como linter, uso ESLint y para iconos geniales, uso los iconos de VS Code.

Luego, instalaciones de paquetes y versiones. Actualmente todavía estoy en node 14, como puedes ver. No fue intencional. Simplemente olvidé actualizar y luego tuve demasiado miedo de hacerlo porque temía que pudiera romper cosas, aunque creo que pasar a node 16 o incluso más alto debería estar bien, pero esta es la pila que estoy usando actualmente. Así que NPM 6.14 pmpm, de eso voy a hablar después. También es como un administrador de paquetes de node, pero solo lo usaremos para un comando. Hablaré de eso más tarde. Déjame ver, déjame ver. Sí, entonces SWA es Azure Static Web Apps. Esa es la CLI que ves aquí. Y esa es también la CLI que tiene unos cinco días de antigüedad ahora, siete días de antigüedad, algo así, por eso está en la versión 1.0.1. Y luego PMPM, como dije, solo lo usaremos para un comando. Pero como NUX3 aún no está, o aún no, no está en una versión estable todavía. Entonces no se publicará en NPM todavía. Entonces NUX3 en sí en esta documentación está utilizando, creo, NPX, NXT, algo así, o PMPM. Y elegí uno de esos sin ninguna otra razón que simplemente elegí uno. Suena como si fuera gracioso. Así que por eso, ya sabes.

De acuerdo. Luego he creado un repositorio de materiales. Y voy a compartirlo como un enlace. Porque encuentro que, ya sabes, a veces es un poco difícil, por supuesto, tal vez codificar junto, o simplemente quieres verlo tú mismo en otro momento, o, ya sabes, por cualquier motivo, tengo un conjunto de datos en él. Bueno, lo llamo un conjunto de datos, pero es como un JSON con algunas claves y valores. Así que no pienses que es tan grande. Pero hay algunos materiales allí, como fondos también, para usar durante este masterclass. Déjame encontrar el enlace. Y lo pondré en el chat de Discord. Y luego puedes clonarlo si realmente quieres codificar junto. Solo échale un vistazo si quieres. Eso también está bien. Vamos a sumergirnos, porque ahora he estado hablando durante demasiado tiempo. Pero seguiré hablando, pero aún así, hagamos algo. Vamos a configurar un repositorio de GitHub, porque hoy vamos a conectar nuestras Azure Static Web Apps a GitHub. También podrías hacerlo con Azure, y tal vez más adelante también puedas hacerlo con GitLab o Bitbucket, pero eso aún no está en vivo. Así que primero, intentemos hacer esto. Esto es muy inconveniente. ¿Cómo lo hago...? Bueno, esto simplemente vive aquí ahora. Está bien. Creemos un nuevo repositorio. Creo que la mayoría de ustedes ya lo han hecho, pero sigamos adelante. Llamémoslo BugNopepedia. Está disponible con una sorpresa, insectos, poke, ataques. Según entiendo, tiene que ser público. Lo intenté con privado. Azure se enojó un poco conmigo y no quiso construir mi aplicación. Creo que tengo que hacer alguna otra configuración. Por ahora, déjalo público. Realmente no tenemos que agregar nada, simplemente vamos a crear un repositorio. Bien, esto es realmente bueno. Lo hicimos. Eso fue el paso 1.1. No estamos necesariamente a la mitad, pero estamos llegando allí. Luego, el siguiente paso para nosotros sería instalar globalmente pnpm. Entonces, lo que vamos a hacer... Abramos algo extraño. Git Bash. Sé que ya lo he instalado, pero solo quería mostrarte.

Literalmente tienes que escribir esto. Así que hagámoslo. Genial. Ahora lo he instalado globalmente, así que debería poder usar BMPM ahora. Y eso es exactamente lo que vamos a hacer, porque vamos a LUXinar nuestra aplicación. Así que... hagámoslo.

Entonces, pasemos a la parte de Nuxt. Será un poco teórica y luego una parte de codificación. Pero, Nuxt3. Oficialmente se lanzará públicamente, diría que este mes. Estaba planeado para junio de 2022. Pero... actualmente todavía está en estado de candidato a lanzamiento, según su sitio web. Así que supongamos que aún no todo funciona y las cosas están un poco desordenadas. Pero, sin embargo, ya es una experiencia muy agradable, puedo decirte. RC significa candidato a lanzamiento. Nuxt2 actualmente o estará en modo de mantenimiento. Así que si eres fan de Nuxt, de una forma u otra, eventualmente deberías pasar a Nuxt3. Eso también significa que Nuxt3 en sí está creciendo, por supuesto. Este mes, en junio de 2022, se espera la versión estable de Nuxt3. Y como dije, eso también significa que la documentación en algunos casos todavía está en proceso. Lo descubrí de la peor manera cuando tuve que averiguar cómo hacer que este masterclass funcione con Nuxt3 y Azure. Fue, como dije, una aventura. Así que será una descripción bastante breve de lo que es Nuxt, porque solo tenemos tres horas. Pero en sus propias palabras, el objetivo de Nuxt es hacer que el desarrollo web sea intuitivo y eficiente, teniendo en cuenta una gran experiencia para el desarrollador. Bueno, eso suena muy prometedor. No dice mucho, pero ¿qué dice algo al respecto? ¡La versión 3! Nuestra versión actual es una reescritura completa de la versión 2. Incluso, dicen que es un 20% más pequeña. Un poco más rápida. Está construida sobre Vue 3. Utiliza la API de Composición, Feat, TypeScript, Nitro. La mayoría de ellos, al igual que Vue. Y Nitro es, por supuesto, un producto de Nuxt. Pero eso significa que si eres como yo, un desarrollador que generalmente se enfoca en pocas cosas, y Nuxt sería una buena opción para ti, ya sabes, aprender nuevos frameworks, pero también ver lo que pueden hacer, porque pueden hacer mucho y se siente intuitivo. Al menos esa sería mi expectativa. Pero, ya sabes, ves estas palabras aquí, API de Composición, Feat y, ya sabes, TypeScript. Bueno, eso es una aventura adicional, diría yo. Pero, ¿qué significa esto? Básicamente significa que Nuxt en sí es ahora un framework muy completo y está construido con lo siguiente. Utiliza un framework JS para la Reactividad y los Componentes Web, Vue. Utiliza un empaquetador para empaquetar su código. Y puedes elegir entre Webpack5 o Feat. Cualquiera debería estar bien. Y ten en cuenta que Feat también es un producto de Vue. Y tiene diferentes propiedades o cosas que hace. La otra cosa es un transpilador para la sintaxis de JS. Y se llama esbuild, que ha estado presente durante un poco más de tiempo. Un servidor para el renderizado del lado del servidor construido sobre H3. Y eso significa que el motor del servidor Nitro también está construido sobre H3. Si estás interesado en eso, simplemente ve a la documentación de Nitro o la documentación de H3. Y eso puede darte un poco más de sentido. No voy a profundizar en eso hoy porque abriré una caja de gusanos y no podré salir. Y por último, también una biblioteca de enrutamiento llamada fuel-router. Fuel-router 4 en realidad, que también es bastante nuevo. Así que está muy actualizado y tiene todas estas nuevas características, pero también una gran documentación. Según sus propias documentaciones, lo que dicen es que se está pasando de fuel 2 a fuel 3, incluyendo el uso predeterminado de la API de Composición y la configuración de scripts. ¿Qué significa eso? Fuel tenía la API de opciones, todavía tiene la API de opciones y ahora la API de Composición. La API de Composición es ahora la predeterminada para NUXT. No es necesariamente la predeterminada para fuel 3, pero sí para NUXT. Eso puede llevar un poco de tiempo para conocerla porque es ligeramente diferente. La frase, pasar de Webpack 4 y Babel a Feat o Webpack 5 y ESBuild. Como dije, Webpack 4 y Babel fueron durante mucho tiempo el estándar de front-end. Y ahora hay otros jugadores en el campo. Por supuesto, está la versión Bruno de Webpack 4 o Webpack 5, pero Feat y ESBuild también aparecieron y pensaron, bueno, dame algo de eso. Pasar de una dependencia de tiempo de ejecución de NUXT a un servidor independiente mínimo compilado con NitroPAQ. Nitro en realidad, dice NitroPAQ, pero eso es solo cuando lo conocí como Nitro. Y voy a hablar de eso después de esta diapositiva, pero la palabra reescritura aquí está muy bien ubicada. Aunque el concepto debería ser en su mayoría el mismo, la forma de trabajar será un poco diferente, como podrás notar a medida que avance el masterclass. Las opciones de renderizado siguen siendo principalmente las mismas, opciones de servidor, cliente, pre-renderizado, estáticas. Simplemente funcionan de manera diferente bajo el capó y las rutas aún se generan automáticamente en función de las páginas, como también sucedía con Nuxt2.

Has estado utilizando componentes y luego algunas funcionalidades que esperas, pero puedes preguntarte, ¿qué pasa con la generación de sitios estáticos? Una de las cosas clave que hacen que Nuxt sea tan útil para tanta gente es que puedes desactivar el renderizado del sitio. Puedes usar SSG en tu aplicación, pero el alojamiento estático en Seek todavía está en una fase experimental y en desarrollo. Lo llaman, creo, estático completo. No estoy completamente seguro de las palabras, así que por favor no me lo tomes en cuenta. Pero según entendí, la funcionalidad está en desarrollo.

Nitro. Una gran diferencia es que una aplicación Nuxt ahora inicia su propio servidor Nitro, si lo permites. Nuxt tiene algunos paquetes principales como el CLI, el motor principal, Bunthers. La mayoría de las cosas de las que acabo de hablar son paquetes principales de Nuxt. Uno interesante es el motor del servidor, nuxt-nitro. El año pasado, junto con un colega, hice una presentación sobre la informática en el borde y Nuxt, en la que queríamos usar un servidor nuxt-nitro real. Queríamos configurarlo. Pero fallamos, porque era tan nuevo. Creo que todavía estaba en versión alfa o tal vez solo en beta, algo así, como que no podíamos entenderlo realmente. No había una documentación real. Era como un misterio. Y es bueno ver que un año después, aquí estoy hablando de nuevo de eso, y ahora lo entiendo y logré que funcione. Entonces, nuxt-nitro en sí es un marco de tiempo de ejecución para construir e implementar cualquier servidor JavaScript en cualquier lugar. Por defecto, utiliza un servidor Node.js. Así que si conoces Node.js, eso es una gran ventaja para ti. Pero en su documentación, puedes encontrar mucha información sobre cómo implementar tu aplicación en cualquier proveedor. No utilicé estos tutoriales porque los descubrí hace unos días. Pero definitivamente vale la pena echar un vistazo y ver hasta dónde puedes llegar. Nitro es independiente de la plataforma, pero viene de serie con Nuxt3. Otra cosa interesante que descubrí por accidente, pero que ahora entiendo, es que tu aplicación Nuxt crea automáticamente los puntos finales de la API. Entonces, si el código en sí está en una carpeta llamada server/API, puedes configurar un servidor y su middleware y lo harías con el motor del servidor Nitro. Es bastante interesante y un poco confuso. Pero como dije, si eliges un proveedor y Nitro tiene una guía útil sobre eso, simplemente aventúrate con Nitro. Es un equipo, esa parte de la aventura. Pero también, como veo aquí, las guías de cómo hacerlo también están en Azure, en AWS, en Netflix, Cloudflare. Cualquier tipo de proveedor de implementación que puedas imaginar, debería ser compatible.

Tal vez sepas, por supuesto, qué es el renderizado. Pero para las personas que no lo saben, vamos a repasar rápidamente algunos conceptos. Porque voy a lanzar estas palabras ahí fuera y solo espero que las captures aquí y allá. Y también es bueno estar en la misma página. El navegador envía una solicitud al servidor y recibe una respuesta. Así es como funcionan los sitios web. Si estás aquí en el masterclass, probablemente significa que lo sabes. Permíteme que te entretenga un rato. Renderizado del sitio. El servidor se encarga de servir correctamente tu aplicación. Los archivos se preparan y se compilan en el servidor. Los sitios web se renderizan en el servidor y el servidor envía una aplicación HTML completamente renderizada al cliente. Es más amigable para el SEO y tiene tiempos de carga más rápidos, entre otros pros y contras. Y el renderizado del lado del cliente es cuando la aplicación se renderiza en el navegador del cliente, no en el servidor. Entonces, el servidor envía este archivo HTML vacío con todos estos enlaces de todos estos materiales que el sitio web necesita. Y luego el navegador descarga y compila estos enlaces. El navegador renderizará tu aplicación. Esta es una opción muy popular desde las aplicaciones de una sola página. Es más económico que el renderizado del lado del servidor, pero para el SEO y para muchos sitios web, el SEO es, por supuesto, una parte muy, muy importante. Luego tenemos el pre-renderizado, que según entiendo, nunca lo he usado conscientemente. Hace un poco de ambas cosas. Entonces, cuando una solicitud proviene de un humano, la aplicación utilizará el renderizado del lado del cliente, porque entonces no importa cómo se sirva o si el SEO es malo. Pero cuando una solicitud proviene de motores de búsqueda o rastreadores o algo así, ahora los llamo robots, no es realmente un robot, lo sé, lo sé, tal vez bots. Y el SEO debe ser perfecto, entonces el servidor elegirá renderizar el lado del servidor de la aplicación, servir una aplicación que eventualmente podría obtener una puntuación más alta con su SEO. Nuxt puede hacer todo esto. También incluí la generación de sitios estáticos, como dije, Nuxt puede hacer todo esto. También introdujo el renderizado híbrido en Nuxt 3. Básicamente, significa que no todas las páginas se beneficiarán del mismo método de renderizado, como era el caso en, por ejemplo, Nuxt 2. Con el renderizado híbrido, se pueden utilizar diferentes métodos de renderizado lado a lado. Entonces, el servidor elige qué hacer en función de la configuración o algunos requisitos también. No estoy seguro de cómo funciona exactamente, pero suena bastante bien.

Ok, esa fue la parte teórica. Bueno, en cuanto a Nuxt. Voy a tomar un sorbo de agua porque ya tengo sed y tomé té y ahora está frío, pero está bien. Ahora vamos a hacer algo, al menos algo. Lo que significa que vamos a crear una nueva aplicación a través de, creo que esto es, y luego el nombre de tu aplicación. En nuestro caso, se llamará Berkelopedia.

Y es posible que veas aquí que estamos usando pnpm aquí. No estoy completamente seguro de qué significa DLLX, pero Nuxy es el Nuxy LI, y creo que también está completamente reescrito y completamente nuevo. Estamos agregando una nueva aplicación y se llama Berkelopedia. Esperemos que funcione.

Sí. Genial. Genial. Ahora tenemos esta aplicación genial aquí. Permíteme que la haga un poco menos confusa por tu bien y por el mío. Sí, está bien. Solo usamos el único comando VMPM que usaríamos, así que siéntete libre de desinstalarlo o al menos anota desinstalarlo si nunca lo volverás a usar. Vamos a instalar todos nuestros paquetes. Y después de eso, ejecutaremos nuestro servidor de desarrollo, básicamente.

Es posible que notes algo. Tengo dos cosas escritas que podrías notar, pero empecemos con la última. Lo que ves aquí es una configuración para TypeScript y algunos archivos de TypeScript también. No quería fingir mi conocimiento de TypeScript justo antes de este taller, así que elegí, junto con esto, usar JavaScript porque es seguro, lo conozco, y TypeScript es para otra ocasión. Pero si conoces TypeScript, siéntete libre de hacerlo un poco más desafiante y codificar en TypeScript. Pero solo para que sepas que la aplicación init actual que acabamos de iniciar está escrita en TypeScript al igual que Vue originalmente. Veamos si nos hemos perdido algo.

Bien, muchas advertencias que todos vamos a ignorar. Y comencemos con nuestro, sí, está bien, en realidad es bastante genial. Oh, cargando en mi pantalla diferente. Solo lleva un poco de tiempo. A veces un poco más, ahí está. Esto es lo que obtienes cuando usas eso, ¿cómo lo llamo? El comando que acabo de mencionarte, los comandos PMPM para iniciar una nueva aplicación, bueno, esto es lo que obtienes y como tal vez pudiste ver en el código también, es muy, sí, ¿cómo se dice? Es muy pequeño, no es tan grande.

Lo otro que podrías notar aquí es que estamos usando Feats aquí como nuestro empaquetador y Nitro, Surfer, así que se está iniciando, mi localhost se está ejecutando en Nitro ahora. Eso es bastante genial. Otra cosa que podrías notar es que no obtuvimos ninguna opción para elegir. Por supuesto, con Max 2 o algunos otros, puedes elegir muchas cosas diferentes y personalizarlo. Con esta configuración hasta ahora, eso no es posible en absoluto. Quién sabe, puede que venga más adelante, puede que no. No lo sé, pero por ahora, solo quería darte algunos detalles pero también ten en cuenta que incluso me sorprendo por lo que está sucediendo aquí. Entonces estamos usando Feats como nuestro empaquetador, como también dije, la alternativa aquí sería Webpack 5. Ambos vienen de serie pero creo que aún tendrías que implementar Webpack 5, eso está bien. Los empaquetadores en sí son, por supuesto, el trabajador feliz, paso a nuestras aplicaciones de una aplicación masiva a una aplicación comprensible para implementar. Bueno, y construido sobre esbuild, Feats se asegura de que el navegador cargue solo unos pocos módulos ES para servir tu aplicación en lugar de un archivo grande con toda la información. Eso es algo que esbuild ya hacía y Feats simplemente mejora eso y crea su propio producto a partir de ahí. Por lo tanto, son archivos más pequeños y menos tiempo de carga, aunque Feats es un producto de a few. Es solo un paso lateral hacia Feats porque en realidad es bastante genial. Y puedes usarlo en cualquier aplicación, cualquier framework, es un proyecto independiente o un producto, así que. Aunque actualmente es experimental para Nuxt, consulta esa documentación. Inicia una aplicación, usa Feats y ve qué te ofrece. Es bastante genial.

Bien, entonces, ¿dónde está mi, ahí está. Bien, hicimos nuestro proyecto init.nux.json. Míralo, ya estamos en el paso 1.2 en realidad. Así que estamos avanzando aquí. Vamos a agregar la aplicación Nuxt a nuestro repositorio. Y solo para las personas que no saben cómo hacerlo, lo escribí aquí. Hay muchos pasos y a veces también me confundo. Pero si ya tienes un repositorio de GitHub, déjame hacerlo un poco más pequeño. Esto es demasiado pequeño. Ahí vamos, esto está bien. Cerraremos nuestro servidor de desarrollo por ahora porque no lo necesitamos. Bien, vamos a iniciar un nuevo repositorio de GitHub, un repositorio de GitHub vacío. Vamos a agregar todo lo que hemos hecho. Así que todo lo que acabamos de inicializar aquí, lo vamos a agregar al área de preparación. Lo vamos a confirmar con el famoso mensaje de confirmación inicial. Vamos a establecer nuestra rama principal como main. Es un cambio, es posible que lo hayas escuchado pero master ya no es realmente el nombre apropiado para eso. Así que me estoy acostumbrando a llamarlo main ahora. Eso no siempre va a ir bien. Vamos a agregar un remoto a nuestro repositorio de GitHub bueno, no original. Escribí origin y dije original repositorio de GitHub. Así que tengo que encontrar su enlace. Déjame revisarlo. Podría haberlo adivinado, pero de nuevo, no quiero escribir esto largo. Lo agregamos como remoto para que ahora este repositorio de Git vacío sepa. Oh, genial, este es mi repositorio, mi repositorio remoto.

Y luego vamos a empujar todo allí. Ok, sin errores. Siempre me gusta eso, especialmente si la gente está mirando. Luego, en nuestro video popular en este momento, tenemos todo nuestro código. Muy bien hecho, muy bien hecho. Ese es el primer paso. Pasemos al segundo.

Ok, vamos a agregar algunas páginas y un enlace Nuxt a nuestra propia aplicación. Tengo muchas pantallas abiertas así que a veces es un poco, ya sabes, ok, no sé a dónde ir, pero debería estar bien. Ok, lo que vamos a hacer ahora es crear una carpeta llamada páginas. Y allí, vamos a crear un archivo llamado generate.view e index.view. Genial, genial. Luego, por supuesto, he preparado un poco de código para no tener que escribir todo. Alguna página, tengo una idea diferente y la idea será útil más adelante. Luego tenemos un título. Título. Y otro etiqueta p con un texto de bienvenida aleatorio porque de lo contrario mi página estaba muy, muy vacía. Esto lo llamaremos un relleno. Esto probablemente no sea realmente nuevo para la mayoría de ustedes. Como dije, si conoces Vue y sabes que esta es una forma de plantilla data dentro de Vue. Lo cual es realmente genial. Como dije, es muy intuitivo. Pero ahora va a suceder lo divertido. O lo frustrante si eres yo y tienes que preparar una masterclass y en realidad no has trabajado mucho con la API de Composición todavía, pero vamos a olvidarnos de eso. Permíteme pegar esto aquí, ponerme a trabajar. Ahí está. Ok. Eso es extraño. Esto se ve raro, ¿verdad? Sí, ok. Lo que tenemos aquí es un script setup. Básicamente es una etiqueta script. Aquí es donde estará todo tu código de funcionalidad. Ya sea tu TypeScript o tu JavaScript. Pero esta forma de escribir, como dije al principio, estamos usando la API de Composición. Y es posible que conozcas la API de Composición porque estás usando esto, esto, y luego vas a hacer un montón de cosas allí. Lo que ves aquí es básicamente lo mismo. Es azúcar sintáctico en tiempo de compilación. Estamos usando la API de Composición. Así que es recomendable comenzar a usar esto si tienes componentes de archivo único como nosotros. Pero dos de las razones por las que probablemente lo usarías es si estás usando TypeScript. Porque aparentemente entonces es aún mejor. Y tiene muchas ventajas en cuanto al performance. No, no muchas. Así que básicamente es menos verboso y se puede hacer fácilmente asíncrono. Pero te lo mostraré más tarde. Entonces este script setup como vemos aquí es más eficiente y amigable para la minificación, porque la plantilla se compila como una función en línea. Así que esta parte es una función en línea en el mismo ámbito que el script setup. Eso es lo que tengo que decir al respecto. Vamos a hablar un poco más sobre la API de Composición. Voy a mencionarlo mucho, pero para ser honesto, este es solo mi tercer proyecto en el que uso la API de Composición. Y sabes, como estos talleres también pueden ser un lugar para compartir una opinión, tengo que decir que encuentro la API de Composición muy confusa a veces todavía. Tal vez no he leído suficientemente bien la documentación, o podría haber muchas razones. Pero mi tercera, ya sabes, opinión que tengo al respecto, prefiero la API de Opciones Estructuradas en lugar de la API de Composición. Y eso también significa que es un poco más difícil para mí usar la API de Composición. Tengo que decir que elijo las opciones sobre la Composición cualquier día solo desde la perspectiva de un desarrollador que tiene que codificar no desde la perspectiva del performance o algo así. Así que eso es solo un desvío de mi opinión sobre la API de Composición. Pero volvamos a lo que está sucediendo aquí en realidad. Así que expliqué la parte del script. Eso será tu funcionalidad. Pero ¿qué sucede aquí? Creamos una nueva constante llamada título. Y como puedes ver aquí, está vinculada a la plantilla. Pero creamos, usamos el método ref aquí con el texto que se debe mostrar. Comparado con la propiedad data. Pero en la sintaxis de la API de Composición, esa es mi conclusión, creo. También tienes reactive en lugar de ref, pero lo veremos más tarde. Pero básicamente lo que hacemos aquí es crear este ref reactivo y utilizable que tiene una única propiedad llamada value. Entonces podrías obtenerlo después de una única propiedad si hicieras algo como console.log title.value, entonces obtendrías esto que está aquí. Pero no vamos a hacer eso. Tiene menos limitaciones que el método reactive que nuevamente te mostraré más tarde, pero básicamente reemplaza la propiedad data. Y antes de los ciclos de vida create y created de la API de Opciones. Eso es lo que quiero decir con confuso.

Si sabes, me di cuenta ahora y sé que puedo usar ref también para hacer uso de la función empty que es algo así como un ciclo de vida creativo que podría ofrecernos, lleva algo de tiempo acostumbrarse, al menos en mi caso.

De acuerdo, pero creamos el index. Vamos a crear los generates y para eso simplemente voy a copiar el código porque este es muy, muy pequeño voy a comentar este porque lo necesitaremos más adelante. Oh sí, eso es correcto. Oh, tengo que hacer algo. Así que simplemente voy a decir, hola. Eso es descuidado. Lo sé.

De acuerdo, título de nuevo. Luego vamos a hacer básicamente lo mismo es ref, vamos a crear un ref aquí también con bienvenido en el generate. Página. De acuerdo, genial. Ahora tenemos dos páginas, no tenemos nada que las enlace. Entonces lo que ves aquí después de welcome es el comienzo, déjame ejecutar mi servidor también. Eso fue solo el punto de partida de cualquier aplicación Nuxt init en este momento. Pero lo vamos a eliminar por supuesto, porque realmente no lo necesitamos. Lo que sí necesitamos es ir desde nuestro app.view que es igual que en Nuxt, así era, en Vue es así. El app.view aquí también es el punto de entrada principal de nuestra aplicación. Entonces lo que esté aquí probablemente estará en todas las demás páginas también. En nuestro caso, vamos a agregar un poco de navegación aquí. Y la página de Nuxt a nuestro componente principal.

De acuerdo, primero le voy a dar un id porque siempre olvido eso y más tarde, realmente quiero mi estilo aquí. Pero comenzaremos creando un enlace de Nuxt a, creo que slash, llámalo home y ciérralo. Vamos a crear un enlace de Nuxt de la misma manera a slash generate. Generar un error. Genial. Luego tengo que envolverlo en un div porque aunque Vue en sí te da esto, puedes tener más de un elemento raíz en Nuxt. Así que no sé. Estoy un poco indeciso en aceptarlo finalmente. Así que ahora mismo solo estoy tratando de adherirme a sus, ya sabes, cosas que quiere. Entonces, ¿qué hicimos allí? Creamos dos enlaces de Nuxt que básicamente, en el fondo, son enlaces de enrutador de Vue en el fondo. Y en el fondo, aún más profundo, es solo una etiqueta de ancla. De esta manera, Nuxt puede manejar cualquier tipo de enlaces. Pueden ser internos, externos, lo que quieras dentro de tu aplicación. Le dice a Nuxt que, ya sabes, esto es parte del enrutamiento. Por favor, míralo así. Y determina si el enlace es interno o externo, así que no tenemos que hacer eso. Puede hacerlo por sí mismo. Y se renderiza con optimizaciones disponibles basadas en esa elección. Así que eso es realmente genial. Y como puedes ver aquí, hemos creado este directorio de páginas. Y allí tenemos estas dos páginas pero ahora también podemos usar estos títulos como puntos finales básicamente para el enrutamiento. Así que cada vez que vayamos a esta página, entonces Nuxt sabe, oh genial, conozco eso, vamos a ir a esta página. Si no incluyes 'pages' como un directorio aquí, Nuxt no incluirá el enrutador de vistas en tu aplicación, simplemente lo ignorará. Así que eso también es bastante agradable. Realmente no tienes que hacerlo tú mismo. Nuxt simplemente hace cosas por ti. Es un poco de codificación perezosa casi pero al menos parece que lo hace pero no te preocupes, se pondrá un poco más confuso más adelante. Por supuesto, al igual que con una página de enrutador, una vista de enrutador, creo que se llama, tenemos que tener una página de Nuxt para mostrar lo que estamos enlazando. Así que ahora hemos construido todas estas cosas. ¿Dónde está? Aquí está. Mira qué bonito es. No, en realidad no, pero llegaremos allí. Así que tenemos una página de inicio, tenemos una página de generación de errores y eso va al punto final correcto y tiene un texto diferente aquí. Lo rompí, vamos a alternar. De acuerdo, lo rompí. Y ahí está de nuevo. Esto sucede mucho. Si lo dejas encendido durante demasiado tiempo, va a tener muchos errores. Acaba de suceder. Pero por ahora sigamos con lo que funciona. De acuerdo, creamos una página, en realidad dos páginas y creamos una aplicación. ¿Teníamos que hacer algo más? No lo creo. No. Así que si quieres ir más allá, tal vez debería haberlo dicho al principio, pero como dije, los materiales pero no el repositorio de PDA con el código exacto ya incluido. Así que puedes usarlo más adelante. Puedes usarlo si quieres escuchar ahora pero codificar después o lo que sea. Está ahí, puedes revisarlo a tu propio ritmo. Hicimos todas estas cosas. Así que eso es realmente genial.

Sí, de acuerdo. Tengo algo de estilización, por supuesto, porque queremos que se vea un poco más bonito porque esto no era nada. Así que en los mismos materiales de Buckleupedia pero tengo los derechos aquí. Tengo algo de estilización y se llama estilización global y estilización de navegación. Así que está justo aquí, lo cual también puedes copiar y pegar desde aquí. Entonces, lo que vemos aquí es que estamos, sabemos que eso solo lo hago en mi propio editor porque todavía tengo que agregarlo. De acuerdo, vamos a crear una carpeta de activos, dentro de ella una carpeta de estilos porque también vamos a tener imágenes allí y dentro de ella vamos a usar main y SCSS. De acuerdo, genial. Solo voy a copiar y pegar todo aquí. Lo que estamos haciendo aquí es importar una fuente genial, que es una fuente muy caótica. Estamos en SCSS, así que tenemos una pila de fuentes, un color primario y un color secundario, otro diseñador, así que, ya sabes, es como cosas en blanco y negro y bueno, llegaremos a esta parte de design más adelante. Tengo algo de estilización básica de HTML, estilización de PA y body y por supuesto para la servilleta, solo quiero que esté centrada. De acuerdo, genial. Esto va a crear algo muy caótico. Ahora vamos a actualizar y esperemos que se rompa. Al menos no hay estilización, ¿verdad? No, eso es porque tenemos que hacer dos cosas más, por supuesto. En primer lugar, tenemos que instalar Sass Sass Loader en la versión 13. Tal vez te hayas dado cuenta de eso también, pero estoy usando Sass Loader 13. Nunca he usado Sass Loader 13 en realidad. Siempre estuve atascado en el 10. Porque la mayoría de las aplicaciones que construimos estaban atascadas en WebEx 4, y ese era el máximo que WebEx podía alcanzar en Sass Loader. Pero ahora con Nuxt 3, lo intenté y funciona. Así que eso está bien. Descargamos o instalamos nuestro Sass y nuestro Sass Loader. Así que al menos nuestra aplicación debería saber qué es, pero también, por supuesto, tenemos que agregarlo a nuestra aplicación. Vamos a decirle estilo, y luego el lenguaje es Sass. Lo vamos a importar. Importar. Eso es... ¿Está ahí? Tengo que verificar rápidamente. Sí, eso fue. Como puedes ver aquí, así es como también tenemos que hacerlo. Así que vamos a copiar y pegar esto porque ¿por qué no? Sí. Básicamente, esto también importa una hoja de estilos. Esto no es ciencia espacial. Es muy similar a muchas otras aplicaciones, diría yo. También puedes ver que estos son todos los errores porque, por supuesto, mi círculo de dependencia está apagado, así es como funciona. Entonces, como dije, a veces lleva un tiempo para que Nuxt inicie el servidor o construya todo, haga que funcione. Está bien. Tenemos tiempo. Oh. Oh sí. De acuerdo, no lo cerré. Oh. De acuerdo. ¡Yay! Así que aquí estamos. Fue una idea muy feliz, pero estaba muy feliz de que después de todo eso, vi algo. Ahora tenemos una página de generación de errores y una página de inicio. Y nuevamente, mi texto ha desaparecido. Está bien. Así que bienvenido a la página de índice. Oh, genial. Tienes este texto muy agradable, hola, qué bueno que te hayas unido a mí aquí. Y luego vamos a una página de generación de errores donde todavía no está sucediendo nada, pero estamos llegando allí. Entonces, lo que hicimos hasta ahora fue iniciar una aplicación NuxWeb. Leí web y dije web, pero me refería a la aplicación y le agregamos algo de estilización. Pero por supuesto, ahora queremos ir aún más lejos, queremos desplegarla. Nuestra aplicación básicamente funciona y hace lo que debe hacer. Así que sigamos con esta parte, que es la tercera o ahora la segunda parte después de esta función todavía activa. Así que estamos llegando allí ahora, de verdad. Entonces, ¿qué es Azure static web apps? La descripción que tomé del sitio web de Microsoft es que es un servicio de Azure que construye y despliega aplicaciones web de pila completa en Azure. Básicamente, hacemos cambios allí. Enviamos algo a Azure o a GitHub o por ahora, solo esos dos, definitivamente. Azure hace magia y el contenido estático por un lado se despliega o se genera en una carpeta de salida y por otro lado, tenemos nuestras funciones de API creadas con Azure functions o ejecutadas con Azure functions, como quieras decirlo. Y Azure static web apps los combina. Así que eso es realmente genial. Cada vez que envías código o una solicitud de combinación, se desencadena automáticamente una compilación y tu aplicación y API se despliegan en Azure. Entonces, el beneficio de usar Azure static web apps es que los activos estáticos como las imágenes ahora se sirven desde puntos distribuidos geográficamente en todo el mundo. Por lo tanto, los archivos se sirven mucho más rápido que a través del servidor web tradicional.

Y eso es básicamente lo mismo con la mayoría de los servicios que Azure tiene, ¿verdad? Este es uno de sus puntos de venta que tienen todas estas características, creo que se llaman ubicaciones de borde. No estoy completamente seguro. Y lo que esté más cerca, eso servirá tu contenido, haciéndolo más rápido.

De acuerdo, pero luego tenemos algunas características clave, ¿verdad? Así que hace alojamiento web y contenido estático. Como ya dije, tiene soporte integrado de API mediante Azure Functions. Voy a explicar eso más adelante. Tiene integraciones de GitHub y Azure DevOps, pero actualmente en vista previa pública también están BitBucket y GitLab si tienes preferencia por ellos. Distribuye contenido estático a nivel mundial, como dije, y genera versiones de preparación, lo cual es genial. Lo veremos en algunas diapositivas, creo. La mejor característica, es gratuita. Al menos tiene dos niveles. Si eliges el gratuito, es gratis para ti. Tal vez una nota al margen, Azure Functions no es completamente gratuito. Es gratuito hasta cierto umbral, pero nuevamente, si solo quieres implementar algo, puedes usar Azure Static Web Apps para rendimiento de forma gratuita, que siempre es mi favorito.

Así que vamos con el paso 3.1. Y comencemos con uno de los problemas que tuve fue que toda la documentación que pude encontrar sobre cómo hacerlo o información se centraba en NAX 2, lo que significa que, ¿recuerdas el descargo de responsabilidad del principio? Eso significa que no estoy seguro de si lo estoy haciendo completamente correctamente, pero funciona. Así que vamos a seguir adelante, pero solo para que sepas que podría haber una mejor manera o una forma diferente de hacer esto al final. Pero en nuestra aplicación, tenemos que hacer dos cosas. Entonces, tenemos que cambiar el comando de compilación para ejecutar NUX generate porque queremos generar archivos estáticos para que los use Azure static web apps. Así que hagamos eso. Cambiamos esto a generate porque este es el script que se va a ejecutar. De acuerdo, buen primer paso. Lo hicimos. Luego, el segundo es en la configuración siguiente, vamos a agregar SSR. Permíteme mostrarte qué sucede si no lo haces. Entonces, si simplemente ejecutaras NPM run generate, generaría todos estos archivos para ti. SSR false, por supuesto significa que queremos desactivar la representación en el servidor, lo que significa en el lado del cliente en nuestro caso. Pero hay este error que afortunadamente ves aquí. Es como este especificador de importación de paquetes. Este que no puede encontrar en el paquete específico. Es un error que hace que nuestra salida no sea del todo correcta. Que no se genere correctamente para que no podamos continuar. Si lo construyeras, si lo enviaras sin desactivar la representación en el servidor a Azure Static Web Apps, se ejecutaría, se aseguraría de que la compilación sea correcta y se implementaría. Pero no me gusta este error. Lo único que puedo encontrar al respecto fue desactivar la representación en el servidor, así que lo hice. Con suerte, más adelante, habrá más documentación al respecto. Así que vamos a hacer eso, jugar a lo seguro. Sí. Vamos a detener esto. Sí, y luego vamos a ejecutar nuestro generate y con suerte no nos dará errores. Y también, esto es la versión y nuestro C mega set release candidate, así que cuando esto se haya ido, finalmente podemos volvernos locos. Tan emocionante. Sí, de acuerdo, así que tenemos una carpeta de salida aquí. Oh, tantas cosas están sucediendo. Hemos generado una carpeta de salida pública y aquí es donde vivirá el contenido estático, pero también hicimos algo de pre-renderización. Nuevamente, no había una configuración de la que pudiera elegir al principio así que esto es como una sorpresa aquí y allá. Pero con la pre-renderización, se pre-renderizan mis rutas y mi 404 y eso al menos significa que estarán disponibles. Es genial. Como dije, nunca lo usé. Ahora está aquí. También puedes encontrarlo aquí. Como, ahora tenemos una carpeta NOx con también mis páginas. Generate e index son mis páginas completas. Tenemos una página 100 y una página 404 si todo deja de funcionar, pero esto es genial. De acuerdo, así que ten esto en mente. ¿Qué vamos a hacer ahora? Vamos a configurar nuestra aplicación en Azure Static Web Apps. Y antes de hacer eso, tengo que verificar rápidamente mis credenciales. No, creo que deberíamos estar bien. Genial, de acuerdo. Entonces, esto es, solo mira lo que está sucediendo. Va a terminar muy rápido. Voy a buscar Static Web Apps. Y vamos a crear uno. Y como una suscripción de Azure, por supuesto, tengo una suscripción. Así que no te preocupes. Eso es solo el grupo de recursos y tu suscripción de Azure. Si no tienes un grupo de recursos, puedes crear uno nuevo que se ajuste a tu nuevo propósito. De acuerdo, entonces, vamos a crear una aplicación web estática que se llama Buccalpedia, y será gratuita, porque no queremos pagar por algo que debería ser gratuito. Somos aficionados. Por lo general, elijo la ubicación que está más cerca de mí, así que estoy en Europa Occidental.

Y aquí, tenemos algunos detalles de programación. Como dije, puedes hacer clic en Azure, y luego en otros. Y nunca he hecho clic en ese, porque ahora voy a estar atrapado con GitHub. Ya estoy conectado aquí. Puedo cambiar mi cuenta o lo que sea. Si no lo estás, entonces debería haber un botón en el que puedes hacer clic, y en el navegador, simplemente puedes iniciar sesión. Así que es una acción muy rápida que puedes realizar aquí.

Si has iniciado sesión correctamente, en la organización, esa es tu organización de GitHub. Entonces, este es mi nombre de usuario de GitHub. Puedo seleccionar mi repositorio, Loggolpedia, por supuesto, y mi rama, que es main. O master, en tu caso. ¿Quién sabe? Luego tenemos los detalles de compilación, y en esto se basará tu flujo de trabajo. Hay muchos frameworks que puedo elegir, como Nux.js, pero aquí elijo Personalizado. Principalmente debido al conjunto de documentación que debería tener. Además, no confío, no sé si esto es dos o tres, así que podría ser un flujo de trabajo desactualizado. No estoy completamente seguro. Así que simplemente voy a completar algunos campos personalizados. La ubicación de la aplicación es la raíz. La ubicación de la API es api, y la ubicación de salida es.outputs. barra pública, tal como vimos antes. De acuerdo, lo voy a crear. Lo estoy creando. Ya está, sabes, haciendo sus implementaciones, solo tenemos que esperar unos momentos. Y ya ha sido exitoso. Así que fue muy rápido. Así que ahora vamos a los recursos. Y si estás aquí en este paso, felicidades, acabas de implementar una aplicación a través de Azure. Permíteme decirlo de otra manera, acabas de implementar una aplicación NOCS3 a través de Azure. Muy genial, muy rápido, una hora y media. Muy bien.

De acuerdo, es posible que desees verlo aunque no haya nada aquí. No, tu Azure Static Web App está en vivo y esperando tu contenido. Eso es cierto porque, ya sabes, ¿qué sucede después de eso? Sí. ¿Qué sucede después de configurar nuestra aplicación? Vamos a verificar nuestra aplicación. Y acabo de hacer clic en este enlace, ¿verdad? Esto es muy molesto y no estaba sucediendo nada allí. Eso se debe a que nuestro GitHub también está vinculado aquí. Entonces, lo que puedes hacer es ir a tu repositorio de GitHub, hacer clic en Acciones, Agregar. Este es tu pipeline que se está ejecutando ahora mismo. Con una configuración mínima, realmente no tuviste que saber sobre flujos de trabajo o es un archivo YAML. Así que realmente no sé mucho sobre YAML. Aún así, tengo un pipeline, está en ejecución. Probablemente creará una compilación y espero que tengan éxito. Pero eso es solo con unos pocos, ya sabes, clics de un botón logramos configurar esto. Así que ahora, cada vez que, cada vez que empuje a este repositorio, se iniciará una compilación. Lo hará. Todos estos son npm morning install. Vi todo esto en rojo y pensé, oh no. Eso es hermoso, me encantan los pipelines. Así que todas estas cosas suceden. Creamos un archivo YAML. Podemos ajustar ese archivo YAML si realmente queremos. Por ejemplo, las primeras veces que intenté esto me equivoqué mucho con la carpeta de salida. Así que tuve que seguir ajustándolo. Es muy fácil de hacer. La URL que acabas de ver y a la que ya no puedo acceder no debería ser un error 404 no encontrado. Dale un momento. Aún es un error 404 no encontrado, eso es muy triste. De acuerdo, démosle un momento, volveré a verificar. ¡Oh! Ya sé, tenemos que enviar nuestro código. Eso fue muy emocionante. Sí, así que vamos a enviar nuestro código. Déjame ver. Así que hicimos todo esto. Estamos aquí. Creamos un repositorio, una aplicación Nuxt 3 y una Azure Static Web Apps. Así que lo que vamos a hacer ahora es enviar nuestro código. Creo que eso lo mejoraría, porque ahora mismo, solo hay la aplicación inicializada allí. Detenido, no es un mensaje muy bueno. Esto también sucede mucho, en realidad. Debido a que Azure ahora está cambiando tu repositorio de GitHub básicamente porque está agregando flujos de trabajo, tienes que hacer pull aquí y allá.

Quiero decir, cada vez que estés haciendo una compilación, pero no estoy completamente seguro. Pero la primera vez después de hacer tu primera compilación, debes hacer un pull. Para que Azure sepa, está bien, genial, este es el flujo de trabajo que realmente quiero, o que GitHub sepa, Bien, este flujo de trabajo está bien. Queremos mantenerlo. Así que. Genial, enviamos nuestro último código. Vamos a hacerlo así porque es muy molesto. Sí, de acuerdo.

Aquí, oh, también puedes ver ahora que la segunda compilación se está ejecutando en este momento, acabamos de enviar nuestro código a main, por supuesto. Entonces, se está desencadenando una segunda compilación con todo nuestro nuevo material. Esperemos que ya no veamos un error 404, sino nuestra aplicación real. Pero, antes de eso, no vamos a esperar realmente por esto, así que sigamos. Hicimos todo esto. Entonces, desde aquí en el laboratorio, vamos a mejorarlo, ¿verdad? Queremos que nuestra aplicación sea más bonita. Queremos que realmente haga algo. Estaba un poco vacía. Entonces, nuevamente, en nuestra Wikipedia de Materiales, tienes este main.scss nuevamente. Y todo el otro CSS que está ahí dentro se puede simplemente copiar y pegar en nuestra aplicación, así que vamos a hacer eso. Aquí tenemos nuestro main SCSS nuevamente. Y vamos a agregar un poco más de estilo para, ya sabes, el componente de generación de errores que vamos a crear después de esto, y la vista de índice. Solo para darle un poco más de estudio y también el texto allí, cosas así. Nada extravagante. Solo para que tenga un poco más de sentido. Nuestro servidor está, por supuesto, inactivo, pero vamos a abrirlo, porque vamos a agregar más código. Así que agregamos algo de CSS.

Así que hay una pequeña nota al margen aquí, porque si dependiera de mí, habrías creado este, este. Pero, para un aspecto desgastado, este. Pero, mi novio, él es una persona muy creativa, también lo hace como trabajo, y así que él lo creó para nosotros. No importa lo que haya en él, solo míralo. Así que, si no fuera por él, habría creado esta parte. Estoy muy orgulloso de esto, porque, ya sabes, realmente no soy un diseñador, así que logré hacer esto. A él le molestaba especialmente porque había un fondo azul, y como este texto amarillo. Pero de nuevo, realmente me gusta. De acuerdo, siguiente parte. Creo que nuestro servidor de desarrollo está activo. Sí, genial. De acuerdo, allá vamos. Entonces, tenemos... Acabo de centrar esta parte. Y luego, cuando hacemos clic en generar error, esto es lo que vamos a sentir ahora. Así que no te preocupes por esto. Así es como se supone que debe ser. Así que agregamos nuestro estilo. La siguiente parte aquí es que vamos a crear un nuevo archivo. Vamos a crear una plantilla. Y simplemente vamos a llenarla con algunos datos. Y vamos a agregar ese componente real a la página generada correcta. Entonces, en primer lugar, creemos una carpeta llamada componentes. Vamos a llamarla generatebug.fume. Y en el generate, ya está ahí. Lo acabo de comentar. Mantengamos esto, ya sabes, eliminado. Hemos agregado nuestros componentes aquí. Ahora es el momento de llenarlo con todo lo que queremos. Entonces, la primera parte que vamos a hacer. Por supuesto, plantillas. Voy a copiar y pegar. Esto es mucho código con ideas. Entonces, nuestra plantilla aquí va a ser un componente llamado va a ser un contenedor. Y en este contenedor, habrá bastante información. Por ejemplo, habrá un fondo. Como puedes ver aquí, también hay una fuente que aún no tenemos. Entonces, tenemos que agregar el fondo después de esto. Tenemos una imagen, un nombre, una descripción y un botón para hacer clic y generar un nuevo error. De acuerdo. Eso es solo, ya sabes, la plantilla. Pero luego, nuestra siguiente parte es la funcionalidad real, por supuesto. Supuse que sería así en nuestro cierre.

Vale, vamos a crear un nuevo estado. Y lo que tienes aquí, y eso es gracioso, es que vamos a utilizar reactive, así que tenemos state es reactive. Porque principalmente, lo que voy a añadir aquí es un objeto con los detalles del error. Reactive aquí, es un método reactivo. Es básicamente lo mismo que el método Wrap en la vista del índice que utilizamos anteriormente. Reactive devuelve una copia reactiva del objeto, por lo que se produce una conversión profunda y todas las propiedades anidadas se ven afectadas allí. El consejo de la documentación de Vue es utilizar principalmente reactive y no el objeto original. Siempre crear una copia. Pero ¿cuándo utilizar wrap, cuándo utilizar reactive? Bueno, en general, wrap es útil para primitivas, y reactive es útil para objetos y arrays. Porque realmente quieres meterte ahí dentro. Si tienes este objeto anidado hasta tres niveles, quieres obtener todos los valores allí, por supuesto. Dicho esto, y aquí es donde vuelve la confusión, también puedes utilizar objetos y arrays con Wrap. Así que mi consejo aquí sería simplemente probar cosas, ver cómo va. Y luego puedes encontrar algunas sorpresas aquí.

Aquí tenemos alguna información, por supuesto, ¿dónde está? Voy a copiar y pegar los detalles reales del error porque tiene una descripción muy larga. Como puedes ver, esto es muy bonito. Pero esto es solo como un estado de inicialización si lo ves así. También se le llama estado reactivo así que una de las prácticas comunes podría ser que esto también se llama estado y lo que sea que vaya aquí. Entonces, si también tuviera un título, simplemente harías algo como título esto es un título. Ya sabes, puedes llenarlo con lo que sea y la propiedad data reactiva porque eso es básicamente lo que es. Y quieres tener, simplemente sería tu objeto de estado con todas las variables reactivas allí. No lo confundas con un cálculo en absoluto porque tienen un método de cálculo y es ligeramente diferente. Así que esto es solo nuestro proxy data ahora y así funciona. Bien, lo que queremos hacer después de eso es, por supuesto, si puedes ver, tenemos un clicker de agregar. Así que vamos a crear una función que realmente haga algo cada vez que hacemos clic en el botón. Por ahora, simplemente vamos a mostrar en la consola lo que sea, decir hola o algo así. Solo para que sepamos, ok, se hizo clic en el botón, mi función está vinculada, luego puedo construir con lo que necesite.

Ok, así que tenemos una función Generar error, mismo nombre. Tenemos un estado Entonces toda esta plantilla se llenará con el estado. También puedes saber, oh, pero ¿qué pasa con todos los, ya sabes, fondos, estilo de activo, imágenes de activo. Ahí vamos a estar, sí, genial. Oh, espero tener seis fondos, sí. En, ¿dónde está? En el repositorio de materiales, de nuevo, puedes encontrar una carpeta, la misma estructura. Creo que es esta, no estoy seguro del todo. No, se llama fondos. Ahí tienes seis PNG. Hay seis fondos ligeramente diferentes, ya sea en amarillo, verde, rojo, con un fondo diferente. Elige el que te guste, los tres, más o menos. Así que no olvides agregar estos también a tu aplicación.

Ok, veamos cómo funciona esto. Donde tengo muchos problemas es que mi terminal no se actualiza realmente o no realiza un seguimiento de los últimos cambios que he hecho. Así que me encuentro empezando y deteniendo mi servidor muchas veces, pero eso podría cambiar más adelante. Esto es solo porque también soy una persona muy impaciente. Esto es tan bueno. Ahora tenemos que esperar de nuevo. Yay. Ahí está. Ok, si haces clic en inicio, tenemos nuestra página de bienvenida de nuevo. Si hacemos clic en generar error, muestra esto. Voy a decirlo ahora. Como dije, no soy un buen diseñador. Arreglé esto para que se mantenga en su lugar si te desplazas con posición absoluta y posición relativa. No copies eso en absoluto porque no sé si es bueno. Pero nuevamente, se mantiene en su lugar y eso es lo que quería. Así que tenemos esta pieza desplazable aquí con una descripción del animal que queremos hacer. Si ahora hacemos clic en generar nuevo error, va a decir clic porque nuestra función aún no hace nada. Pero este es el único error que tenemos actualmente. Correcto, ese es el estado final. Porque también quería mostrarte algo más. Voy a crear una nueva rama ahora mismo. Y voy a subir esa rama a mi principal remoto. Lo siento. Voy a agregar todo. Así que ahí vamos. Ok. Voy a subir esta rama interna de función a mi GitHub. Oh no, subí a mi principal. Sí. Ok, genial. ¿Dónde está? Aquí está. Este es mi repositorio. Subí esta rama. Voy a compararla y solicitar una extracción aunque soy el único. Así que es básicamente como ese meme, ya sabes, Obama dándole a Obama una medalla. Bueno, eso es lo que estás, lo que he estado haciendo durante las últimas dos semanas. Y lo voy a abrir como cualquier otra solicitud de extracción. Estoy seguro de que verás muchas de ellas. Y automáticamente no tuve que hacerlo realmente, pero está configurado en los archivos de Amazon. Bueno, ¿se va a construir? No creo que necesariamente tengas que tener una construcción, pero lo hará. Y lo que hace es configurar esta vista previa de puesta en escena para ti. Para que puedas verificarlo y ver, ok, se hicieron los cambios. ¿Son, ya sabes, lo suficientemente buenos? ¿Son lo que esperaba? ¿O voy a, ya sabes, romper completamente la rama principal después de mi fusión, lo cual creo que es una característica bastante genial, especialmente si estás trabajando en aplicaciones mucho más grandes que lo que estamos haciendo ahora mismo.

Esto lleva un poco de tiempo, porque la compilación de esta aplicación lleva unos dos minutos. Así que sigamos adelante. Agregamos el componente GenerateBug. ¿Estamos creando esta solicitud de extracción, verdad? Tal como dije, tal como te mostré. Pero, ¿por qué no hay un error aquí con solo un error? Queremos actualizarlo para que cada vez que hagas clic en generar error, se genere un nuevo error, lo que significa que necesitamos data. Y pensé que estaría disponible una API de insectos muy bonita, uno de mis otros problemas, Pensé que estaría disponible una API de insectos muy bonita. No pude encontrar una. Bueno, no, encontré una. No era muy utilizable, ya sabes, no cumplía realmente con mis propios requisitos. Así que tuve que crear mi propio conjunto de datos. Y como dije, el conjunto de datos es solo un JSON con pares clave-valor por objeto. Así que es bastante pequeño. Así que es hora de poner la función en Azure Functions. Vamos a ir a nuestra última parte. Creo que sí, está hecho. También ves una marca de verificación verde allí. Así que ahora hemos preparado nuestro sitio web. Y como también puedes ver, estoy muy contento de ver que realmente funciona porque antes teníamos un cuatro y cuatro, así que ahora tenemos nuestra página de inicio y un generar error. Y ahí estamos, incluso aunque esto sea un desplazador muy feo. Así que funciona. Incluso probablemente tenemos un clic. Debería haber un error para el Fabricon. Eso está bien. Sí, está bien. Así que todo sigue funcionando. Todo sigue conectado. He hecho el estilo. Esto va muy bien hasta ahora. Vamos a pasar al siguiente paso. Ya estamos en el 5.1. Quiero decir, casi estamos allí. Así que vamos a instalar algunos paquetes y extensiones. En primer lugar, vamos a instalar el Azure Static Web App CLI. Lo vamos a hacer de forma global. Y vamos a instalar las Azure Functions Core Tools número tres. Ambos son como estáticos, el CLI, por supuesto, es un CLI. Así que en nuestra terminal, podemos usar swa, swa. Como nuestro, ya sabes, comando corto. Y Azure Functions Core Tools. Lo necesitaremos cuando vayamos a probar nuestra función. Pero ya llegaré a eso más tarde. Tengo tres extensiones de PS Code, funciones, cuenta y recursos. Así que, ya sabes, solo instalaría estas tres, instalaría estos dos paquetes de npm. Déjame ver. Este, déjame ponerlo en la pantalla porque no sé si la gente realmente está programando al mismo tiempo. Así que solo para que lo sepas. De acuerdo, ahí lo tienes. Sí, bien. Así es como se ve. Te daré cinco, cuatro, tres, dos, uno. De acuerdo, así que si todo funcionó y hiciste una instalación maravillosa, lo cual estoy seguro de que lo hiciste, tendrás que actualizar tu navegador. Siempre se me olvida eso, así que si no, simplemente actualízalo si no te lo solicitan. Y deberías tener esta opción de Azure, sí, digamos que una opción. Y ahí tenemos recursos, que es la extensión de recursos de Azure. Aquí tenemos nuestro espacio de trabajo, que básicamente es solo todos nuestros archivos aquí. Y tenemos un feedback de ayuda, las mismas cosas normales. Si tuvieras que instalar la extensión de Azure Static Web Apps, también tendrías algo así que dice Static Web Apps, y luego verás todas tus aplicaciones web allí. Es muy bonito. Pero en tus recursos, es posible que aún no veas nada porque aún necesitamos iniciar sesión, pero allí puedes ver todos los recursos que tienes para Azure en una determinada cuenta. Pero es una buena experiencia. Entonces, la siguiente parte es si instalaste todo esto, no obtuviste ningún error, y ves la parte de Azure como esta cosa, entonces debemos asegurarnos, de acuerdo, ¿cómo vamos a iniciar sesión entonces? Ya estoy iniciado sesión, pero no puedo mostrarte dónde está. Como, en Few Command Pallets, está muy debajo de esta cosa. Puedes buscar Azure Sign In o Azure Select Subscriptions. Así que primero haces un inicio de sesión, luego se te redirige a un navegador, y si todo va bien, entonces estás realmente iniciado sesión. Es muy rápido. Y luego de eso, puedes seleccionar las suscripciones y te dará esta opción aquí, para ver qué suscripción quieres usar. Y luego puedes seleccionar eso, como seleccioné aquí, y luego sabe, de acuerdo, todo lo que voy a crear ahora está bajo esta suscripción bajo un cierto grupo de recursos. Sin eso, probablemente, no puedes hacer muchas cosas. Y también tu suscripción puede tener restricciones, por supuesto. Por ejemplo, no se me permite hacer ciertas cosas con esta suscripción que he elegido ahora mismo.

Y eso está bien. Así es la vida. De acuerdo. Pero suponiendo que estás aquí, si no lo estás, nuevamente, puedes tomarte un poco de tiempo después. Puedo compartir mis diapositivas. Nuevamente, todo este masterclass será, por supuesto, grabado. Así que puedes revisarlo más tarde si quieres. O tengo tutoriales para ti. Muchas páginas sobre cómo hacer eso. Así que no te preocupes por eso. Suponiendo que has iniciado sesión y puedes seleccionar un recurso y un espacio de trabajo y ves esta cosa, lo siguiente que vamos a hacer te dará un poco de contexto sobre qué son las funciones de Azure. Porque es un poco de teoría, en realidad no es tanta teoría. Pero las funciones de Azure son, puedes escribir estos fragmentos de código en diferentes lenguajes y hacer que hagan lo que quieras. Puede ser una consulta o un desencadenador. Escalan automáticamente según tus necesidades. Pero no pagarás por lo que no estás usando. Así que eso es realmente bueno. Son solo fragmentos de código que se ejecutan cuando quieres que se ejecuten. Esa es la explicación más sencilla que puedo darte. Por supuesto, es mucho más elaborado que eso. Pero básicamente, eso es todo. Y puedes escribir esos fragmentos de código en muchos lenguajes diferentes. Como escribir Java, JavaScript o Node. Lo que estamos haciendo, y C sharp, lo que sea. Y como dije, puede ser desencadenado. Así que vamos a crear este desencadenador HTTP que cada vez que hagamos una solicitud HTTP, hará algo, pero en la aplicación que creamos el año pasado, la aplicación de Ash Computing, usamos una consulta. Así que cada minuto más o menos, verificaba algo, y luego me devolvía algunos data. Bueno, estos son solo dos ejemplos de lo que puedes hacer con ellos. Es una solución serverless, que es, por supuesto, una de las palabras de moda de Azure, lo que significa que realmente no se necesita un servidor, lo que también significa que es perfecto para Azure Static Web Apps. Sí, y sirve para APIs web, como dije, pero también para cambios en la base de datos. Así como procesamiento de transmisiones de IoT, lo que hicimos el año pasado, y un mensaje para elegir lo que sea. En realidad, es bastante divertido probar muchas cosas allí. Tiene un poco de esta vibra de automatización, también. Así que puedes, tiene muchas posibilidades, así que definitivamente échale un vistazo. Como dije antes, las funciones de Azure podrían tener un costo, así que activa todas esas alarmas de no excederse y cosas si te vuelves loco allí. Pero lo que vamos a hacer es, vamos a crear una función de Azure aquí. Así que en nuestro espacio de trabajo, vamos a hacer dos cosas. Recuerda, nuestro espacio de trabajo aquí. Permíteme borrar todo. De acuerdo, este es nuestro espacio de trabajo. Y ayuda, creo, si estás en el inicio de tu aplicación. Porque a veces dice, esto no está en el inicio, por favor haz algo diferente. De acuerdo, hacemos clic en este botón Agregar, y vamos a crear una función HTTP porque estamos muy decididos en eso. De acuerdo, esto no es de mucha ayuda. Sí, de acuerdo. Te pide que selecciones el lenguaje. Y le daremos un nombre, getobugs, porque eso es lo que queremos. Queremos crear este desencadenador HTTP que cada vez que lo llamemos, este punto final, sea una solicitud GET y obtendremos data. Muchos data. Y haremos algo con los data. Por ahora solo lo nombraremos getobugs. Presiono Enter y ahora va a crear mi función. Y ahí está mi función. Esta es solo una pequeña función. También puedes crear una aplicación de funciones. Pero luego también estarás creando una base de datos y otro grupo de recursos, creo. Y creará todos estos otros servicios para ti para que la aplicación de funciones realmente funcione. Así que por ahora, hay una pequeña diferencia allí. Por ahora, solo vamos a crear una pequeña función.

Vale, entonces, pero hemos hecho esto, eso es bastante genial. ¿Qué tenemos que hacer ahora mismo? El cambio que vemos aquí es que tenemos todos estos archivos adicionales y otra carpeta llamada API, que no existía antes. Pero Azure busca una carpeta llamada API o una carpeta llamada función y luego sabe, está bien, aquí podría haber funciones de Azure dentro que debo ejecutar. Así que solo para que notes la convención de nombres, es un poco, ya sabes, eso es lo que decimos en holandés, como que habla por sí mismo, sí. Mi holandés apareció por ahí.

Vale, porque esto es básicamente algo que se inicia por sí mismo, tiene un sistema de paquetes en el que también puedes agregar dependencias o lo que sea. Y también puedes iniciar tu función, porque quieres probarla, por supuesto. También hay un host para agregar información de configuración que deseas agregar aquí. La carpeta de ignorar, y la parte realmente emocionante aquí. Entonces, el archivo function JSON y el index.js index.js son los que probablemente quieras ajustar y agregar. En nuestro caso, te dará aquí algunos enlaces de entrada y salida. Y el nivel de autenticación es anónimo de forma predeterminada. Pero definitivamente puedes cambiarlo a otros valores. Creamos un desencadenador de hup, esta acción está en, es una solicitud. Ese también es su nombre, podemos usarlos. Y tiene métodos. En nuestro caso, solo vamos a obtener, crear una llamada get, así que no necesitamos un post. Vamos a agregar algo más, tal vez una ruta. Creo que es, sí. Y luego bugs. Solo para mayor claridad, me gusta que sea breve y conciso. Y también tenemos, por supuesto, un objeto aquí con un tipo href y nombre, respuesta. Pero esto puede permanecer tal como está porque vamos a crear una función muy simple. Pero luego tenemos aquí nuestro index.soya.

Entonces, es posible que, lo que ya puedas ver aquí es que el common.js ES 5 es muy antiguo, estamos en 2022. Ya hay muchas otras versiones de ES, las importaciones y exportaciones no funcionan correctamente con las funciones de Azure. Es posible que debas intentar compilar esas en exportaciones requeridas de ES 5. Intenté buscarlo. Vi muchas cosas que tenía que hacer y pensé, bueno, ya sabes, está bien, esta es una función, puedo aceptarlo para usar esta exportación de módulo. Pero puedo imaginar que si tienes muchas funciones esto se siente un poco anticuado. Pero solo para que sepas que si intentas usar aquí import y export, simplemente falla de inmediato. Entonces esto es solo una función predefinida que obtienes de Azure. Y básicamente lo que hace es si agregas un parámetro de consulta llamado names, te dará un mensaje en el navegador. Eso es todo. Muy fácil. Te dará, ya sea, sí, hay un nombre o no hay un nombre, es un mensaje vacío o algo así. Es algo muy predefinido. Pero eso también significa que si haces algo como, vamos a usar el punto final que se creará para ti, algo ya sucede. Tu función es llamada y te devolverá algo. Creo que eso es genial. Puedo mostrarte eso. Simplemente puedes ejecutar y debug. Puedes hacer clic en iniciar depuración. Y luego comenzará a ejecutar la función en sí. La construirá. Hará algunas instalaciones. Si es necesario, verificará las dependencias que debe instalar. Básicamente es func start. Ese fue el comando NPM. Por supuesto, también podríamos haber usado eso. Ahora tienes las herramientas principales de Azure, que solo vamos a mostrarte cómo usar. Ahora tienes las herramientas principales de Azure, que creo que es necesario para probar realmente una función. Y esto es muy agradable. Se ve rojo, pero eso es solo la apariencia de mi Visual Studio Code. No hay nada mal, excepto que no se encuentra.NET, pero para nuestro caso eso realmente no es importante. Tengo una función, getallbugs. Y es apropiadamente un get aquí. Y tengo este bonito y genial, nuevo host local. Servido en una parte diferente con api/bugster. Así que eso es bastante genial, ¿verdad? Entonces, si le pusiera felony. Oh, escribí mal mi propio nombre. Pero si hiciera esto, entonces otra parte de la respuesta estaría disponible. Y aquí es donde vive nuestra API ahora. Me quedé asombrado por esto, lo fácil que es. Así que eso es genial. Y también en tu terminal ves, está bien, procesamos una solicitud. Si algo malo sucede, que te mostraré más adelante, se pondrá un poco rojo y enojado. Así que eso es agradable, diría yo. Pero bueno, probamos nuestra función, funciona. Entonces, lo que sea que haya sucedido aquí, al menos funcionó.

Así que hicimos esto. Configuramos una función y esta fue nuestra respuesta que recibimos y probamos nuestros puntos finales. Ahora vamos a crear nuestra propia función. No necesariamente, vamos a construir sobre lo que acabamos de hacer. Así que hay varias cosas que deben suceder ahora mismo. En primer lugar, vamos a necesitar data para probar realmente. Correcto, así que en la carpeta de materiales, también verás un archivo JSON que es bastante grande. Tiene, creo, no sé, 21 errores, objetos de errores con alguna información. Así que simplemente puedes copiar y pegar eso. Solo voy a mostrarte. En la carpeta API, voy a crear una nueva carpeta llamada Shared. Vi esto en una de las piezas de documentación. No sé si es común hacerlo así, pero simplemente pensé, no, ¿por qué no? Voy a crear un JSON llamado bugsdata.json. Y voy a copiar y pegar todos mis hermosos data. Esto es, en mi mente, lo que he estado llamando un conjunto de datos, pero, por supuesto, no quiero quitarle la grandeza de cómo puede ser realmente un conjunto de datos. Así que por favor olvida que dije eso. Aquí encontrarás, básicamente, una matriz. Bueno, en realidad no, primero encontrarás una clave, bugdata. Y ahí una matriz con todos estos objetos con un nombre, descripción de imagen. Y podrías notar, oh, eso también era lo mismo en mi plantilla, ¿verdad? En tu componente, eso era lo mismo. Así que básicamente, lo que queremos hacer ahora y lo que vamos a hacer, es hacer una llamada, obtener estos data, luego elegir aleatoriamente un índice de ese data y servirlo en mi plantilla. Eso es lo que vamos a hacer, y eso fue el paso uno. Así que agregamos nuestro data. Aquí, hicimos esto. Ya he creado una función para ti. Así que lo que voy a hacer es simplemente copiar y pegarla y luego vamos a por ello. Pero básicamente, lo que queremos, aquí está. Podemos desechar esto porque realmente no necesitamos esta función. Y voy a copiar y pegarla. Así que lo que vamos a hacer es importar nuestros errores data.json aquí. Normalmente, lo que harías, al menos lo que esperaría que alguien hiciera en estos casos, si tienes una API que va a obtener muchos data, entonces seguramente deberías tener una base de datos probablemente que se encargará de todos los data. Porque de lo contrario, ¿cómo llevarías un registro de eso o escribirías o eliminarías cosas? Así que normalmente lo que harías es crear una conexión con tu base de datos en sí. Así que tendrías algo así, creo que es una clave o cadena de conexión. Sí, eso era. Agrega tu cadena de conexión de la base de datos para que cada vez que se haga una llamada a este punto final que acabamos de crear, esta API slash errores por ejemplo, los data provienen de tu base de datos en sí. Pero no tengo una base de datos. Apenas tengo un buen conjunto de data. Así que dejé fuera esa parte. Creo que viendo el tiempo, eso es en realidad una decisión muy acertada, pero normalmente lo hacemos así. Simplemente vamos a obtener nuestro local, ¿cómo obtienes data de nuestra aplicación? Eso está bien, porque es básicamente lo mismo, pero ligeramente diferente. Así que en nuestro caso vamos a requerir, porque estamos viviendo en 99. vamos a requerir los errores compartidos slash data. Así que nuestro JSON aquí. Vamos a crear una función ACIC que va a esperar un complejo y un rec. Solo voy a dejar esto aquí para que al menos sepas en tu terminal que ha funcionado. Por supuesto, lo sabrás, pero aún así es bueno verlo. Vamos a hacer un try y catch, que es demasiado para lo que estoy haciendo aquí, pero normalmente si haces una llamada o si quieres obtener data de tu base de datos, harías algo como un try y catch, por supuesto porque pueden surgir muchos errores de eso. El único error que podría tener es como un 404, tal vez no sé, pero dejé este registro de consola aquí con un propósito porque quiero mostrarte cómo se ve realmente el data. Si funciona, voy a enviar un estado 200 con el propio data JSONificado punto data. Eso es todo. Así que esto solo contendrá la matriz de objetos que acabo de establecer. Si no, obtengo un estado 500 y envío un error. Este código no está listo para producción en absoluto, así que no creo que debas hacerlo nunca, pero por ahora sirve a nuestros propósitos. Ok, estamos haciendo muchos pasos aquí. Por supuesto. ¿Qué pasa con el recurso compartido entre versiones? Bueno, no tendrás que preocuparte por eso cuando publiques en aplicaciones web centradas en el borde, porque las aplicaciones web centradas en el borde se encargan de eso por ti. Configura tu aplicación para que sepa cómo comunicarse, pero localmente podrías tener problemas. No tuve problemas, pero agregué esto solo para que sepas que podrías tener problemas de CORS si pruebas todo localmente. Entonces, simplemente agreguémoslo, creo que en mi... Sí. Ok, y luego apúntalo también a tu aplicación para que digan, esta aplicación es segura. Nos gusta esta aplicación. Ok. Entonces, por supuesto, lo que acabamos de hacer, creamos una función de Azure. Permíteme mostrarte cómo funciona. Cerraremos todo esto porque realmente no necesitamos verlo más. Pero probemos nuestra función. Ejecutémosla y depurémosla. Veamos lo que aparece en nuestra terminal y veamos si realmente hace lo que promete hacer. Y recuerda que va a iniciar un servidor adicional en local, va a crear un host local.

Y con nuestro punto de acceso, deberíamos ser capaces, esperamos, de ver nuestros datos que queremos ver si todo funciona correctamente. Bien. Entonces, nuevamente voy a local 7071 API errores y ahí está, mi conjunto de datos muy, muy hermoso que ves aquí. Esto es realmente agradable. Funcionó, nuestra función debería funcionar. Pero ahora lo único que nos queda por hacer es conectar, ya sabes, un solo servidor a este servidor, ya sabes, tenemos todas estas piezas ahora y ahora realmente queremos conectarlo, ¿verdad? Así que lo que vamos a hacer es crear una llamada a componentes o vamos a hacer una llamada en nuestros componentes. Es un componente generar error. Voy a copiar esto aquí. Y lo voy a escribir de memoria. Veamos. Sí, está bien. Vamos a ir a generar error aquí. Y debería recordar esto, ya sabes, este estado reactivo debajo vamos a inicializar un nuevo componente o constante. Y vamos a utilizar la desestructuración porque como podrías saber, o tal vez no sepas, aún no lo he explicado, así que probablemente no lo sabrías. Tendríamos que hacer algo como un fetch aquí. A nuestro lado está fetch. Muchas cosas usan fetch en realidad, pero Nuxt tiene al menos dos métodos para hacer llamadas, llamadas asíncronas. Utiliza use fetch, que es un punto final de la API como parámetro y utiliza use async data, creo, que básicamente es solo un fetch también en el agua, también dentro de la API, pero también con una clave. Es un poco más elaborado. Para nuestro caso, podemos simplemente usar fetch y eso significa que use fetch va a hacer una llamada o va a manejar lo que le digamos que maneje. Luego va a devolver una respuesta en cuatro claves. Es un objeto de respuesta con cuatro claves, y eso es Data, Error, Refresh y Banding, creo, pero creo que esas eran las que queríamos. Así que las que queremos, pero lo que normalmente también querrías es, por ejemplo, la clave de error, ¿verdad?, si quieres saber si se ha reclamado un error. Así que simplemente vamos a desestructurar los datos por ahora. Y luego vamos a esperar y vamos a usar fetch. Y como parámetro aquí, vamos a hacer slash API slash errores. Genial. Esto también es agradable. Entonces, lo que ves aquí es esperar. Si usas esperar en el nivel superior, así en un script de configuración, automáticamente se convierte en un método asíncrono, todo este script. Así que es bastante genial. No tienes que decir que algo debería ser asíncrono. Hice eso. No funcionó. Eso es solo un dato curioso en medio. Así que, bien, hacemos esto, pero ahora podemos usar datos. Si quisieras, podrías agregarlo aquí en tu plantilla. Esto datos. Y propiedad. Ahora puedes usar esta variable, porque entonces se llenará con cualquier diferencia. Así que no tienes que establecer algo nuevo, establecerlo en una variable diferente y luego usar una nueva plantilla o iniciarlo de una manera diferente. No tienes que hacer eso ahora. Así que eso es realmente genial. Bien. Tenemos nuestro estado que son los detalles del error porque eso es lo que vamos a ajustar y, por supuesto, vamos a establecer nuevos valores para este estado. Ahora tengo que verificar porque hay mucho piso de matemáticas y cosas aleatorias allí. Bien. Tenemos datos pensados porque así es como realmente obtenemos el valor porque es un envoltorio y el agua y vamos a redondear hacia abajo, métodos de matemáticas aleatorias veces datos ese valor que longitud. Busqué esto. Estas son todas estas pequeñas cosas de JavaScript. Sé qué hacer, pero a veces me confundo con la sintaxis, pero sí, básicamente lo que estamos haciendo aquí, eventualmente vamos a elegir un número de índice aleatorio. Esto te dará un número de índice entre cero y creo que 20. Y eso es lo que queremos. Así que cada vez que ejecutemos esta función, el estado de las características del error se actualizará con un nuevo error aleatorio aquí. Eso es bastante genial. Yo diría, oh, cerremos la función de Azure, ejecutemos mi servidor nuevamente. Aparentemente ya tenía un servidor en ejecución. Sí, aquí está. Bien. Tengo que verificarlo. Bien. Todavía estamos en nuestra aplicación. Puedes generar un error. Y voy a abrir Microsoft porque algo va a suceder y sé exactamente qué. Así que hice clic, pero no obtuve nada aquí. Eso es, eso es extraño. ¿Por qué no? Tal vez porque también hice cambios en la función. Así que debería leer en mi muerte aquí. Bien, regenerando error y estamos haciendo esto. Intentémoslo de nuevo.

Sí, esperaba que fallara, pero esperaba un error diferente que a veces sucede. Y sí, ahí vamos. Puedo ver que tarda aproximadamente. De acuerdo, genial, esta es nuestra parte, ahí vamos. Está bien, estaba esperando esto, así que está bien. Hmm, eso es extraño. Hmm, no, lo sé, lo sé. Pero quería mostrarte lo que sigue. Olvidé mi console log. Vamos a console log el data porque quiero saber, ¿ok, qué hay aquí? ¿Qué está sucediendo en esta parte y cómo puedo saber con certeza porque básicamente esto se está rompiendo? Entonces, ¿cómo puedo saber con certeza que lo que obtengo aquí es lo correcto que espero? Así que ahora estamos aquí de nuevo. Voy a crear un error y voy a obtener esto. Y este error, tengo una diapositiva muy bonita. Este error me ha dificultado la vida durante dos días. Como puedes ver aquí, tenemos un valor aquí. Normalmente eso es, ya sabes, ya te lo voy a explicar también, pero normalmente en el valor aquí, en realidad verías tu respuesta que querrías obtener de cualquier manera o forma o lo que sea, pero debería haber alguna conexión con una respuesta. Entonces tal vez ya sepas qué está saliendo mal. Tal vez ya lo tengas. Puedo entender perfectamente si ese fuera el caso. Pero yo, simplemente seguí obteniendo este error durante dos días seguidos y me frustró mucho. No es un error real. Es básicamente como una plantilla HTML con Nuxt en ella. Y creo que es como mi punto de entrada de Nuxt. Así que básicamente me muestra Nuxt y se está haciendo el código fetch. Hay una meta que se está haciendo a API slash errores. Estoy obteniendo un 200. Esto es justo lo que obtengo. Así que intenté muchas cosas, carpetas, estructura, lo que sea. Pero luego revisé toda la documentación y había una línea allí. Una línea que mi cabeza frustrada simplemente pasó por alto. Y dice, ejecuta el Front End y la API localmente. Mis habilidades deductivas aquí fueron que, ok, seguí intentando llamar a algo durante dos días, pero esa función nunca se ejecutó. Me estoy frustrando al hablar de esto porque realmente fue horrible. Así que, ok, puedo ejecutar mi servidor mi servidor de desarrollo, así que puedo probar mi aplicación. Pero también quiero probar mi función. Sé cómo hacer eso. ¿Cómo voy a hacer ambas cosas? Ahí es donde entra en juego la CLI de Azure y las funciones principales de Azure. Aquí vamos. No sé si ya lo hiciste, pero básicamente lo que quieres hacer aquí es instalar la CLI de aplicaciones web estáticas y las herramientas principales de funciones de Azure. Vas a ejecutar una compilación, que en nuestro caso significa snag to generate. Así que vamos a generar nuevos archivos estáticos y luego vamos a usar este comando. Así que vamos a hacer swa, o static web apps start y luego la salida de mis aplicaciones estáticas o mis documentos estáticos, archivos, aplicación estática y la ubicación de la API. Ahora mismo todavía tienes que especificar la ubicación de la API pero solo tienes que escribir esto. Así que eso es exactamente lo que vamos a hacer. Ya lo instalé pero solo voy a hacer una compilación. Donde npm generate, así que va a generar un nuevo conjunto de archivos estáticos para mí ahora. Va a llevar un tiempo, voy a tomar agua. Ok, así que creamos este nuevo conjunto de archivos estáticos actualizados. Ok, vamos a hacerlo de memoria. SWA start, punto salida slash public, y luego la ubicación de la API. Y básicamente, lo que vamos a hacer ahora es crear un emulador de aplicación web, básicamente. Por un lado, sirviendo tu contenido estático y por otro lado, ejecutando tus funciones de Azure pero haciéndolo al mismo tiempo. Así que estamos iniciando nuestro propio servidor y puedes ver tu aplicación funcionando pero esto fue esta pequeña parte. Me llevó mucho tiempo descubrirlo realmente. Esta es la pieza final que necesitábamos para asegurarnos de que nuestra llamada a la API realmente se esté haciendo y que esté obteniendo la respuesta correcta. Y esa pieza, ese error que te mostré, fue desesperante porque no había información disponible sobre ese tema. Si intentabas buscar REV-input, no sé qué es. No sé qué es en absoluto. Y lo único que pude encontrar fueron algunos documentos relacionados, pero nunca lo que era. Así que eso podría haber ahorrado algunos problemas. Como puedes ver aquí, estamos en nuestro propio servidor o en un servidor diferente en este momento. Estamos generando un error. El ENDS, nuestro famoso ENDS está aquí de nuevo. Solo tenemos el error de Fasricone. Y estamos obteniendo una respuesta completamente diferente aquí dentro del valor. Déjame ver. Este es el data completo que obtenemos. Y eso me alegró el corazón. Lo vi y estaba tan feliz. Así que ahora, como puedes ver también, cuando hago clic en generar nuevo error, simplemente actualiza la imagen, la descripción. Simplemente toma un nuevo objeto aquí y hace lo que debe hacer. Así que no quería, ya sabes, no mostrarte ese error porque ha sido un momento crucial en esta preparación virtual. Esto es simplemente bonito, obtuve todas las imágenes de Paxful y hay un script de la Enciclopedia. Enciclopedia, creo que Britannica. Así que no creé nada de eso pero fue muy divertido hacerlo. Ok.

Así que hicimos esto. Ahora vas a subir todo nuestro código. Todavía estoy trabajando en la funcionalidad de estilo, pero no es apropiado hacerlo de esta manera. Pero como dije, esto no es una masterclass para ir a producción. Esto es solo una masterclass virtual, por lo que podemos hacer cosas así y no ser muy formales, después de cada función y llamada de función.

De acuerdo. Genial. Ahora lo que podemos hacer de nuevo es ir a GitHub y se ha realizado una nueva compilación, cómo decirlo, realmente genial, en esta rama de funcionalidad. Así que ahora puedo crear una solicitud de extracción. También voy a hacer esto porque quiero que mi rama principal esté bien. Y luego, una vez que esto esté hecho, puedo mostrarte exactamente cómo Azure Static Web Apps ahora en la aplicación web que hemos creado. Estamos haciendo una llamada de función real. El conjunto de datos, lo que sea que estemos llamando, el punto final de la API estará disponible. Así que ese es un punto final al que alguien más podría llamar.

Y eso es todo, creamos esta aplicación muy pequeña, muy pequeña por supuesto. Pero abordamos tantas cosas, abordamos Nuxtree, que todavía es un poco, no necesariamente inestable, solo hay muchas cosas nuevas a las que la gente tiene que acostumbrarse. Y desplegamos esa aplicación en cuestión de minutos, casi. Fue tan fácil. Realmente no tuvimos que configurar nada. Solo tuvimos que asegurarnos de que nuestra entrada y nuestra salida fueran correctas, que Azure supiera dónde estaba todo, para que Azure supiera qué hacer con eso. Ahora, tienes tu función. ¿Y te imaginas lo fácil que sería configurar una API completa con una database? Y luego la parte de la database sería complicada, pero usando Azure Functions para hacer todas esas tareas por ti, no trabajo para Azure. No me pagan por decir todas estas cosas. Me sorprendió mucho lo fácil que fue conocerlo, configurarlo, todo.

Así que ahora que hemos terminado, y he estado hablando durante dos horas y media y realmente lo siento en mi voz y todo, pero también estoy muy emocionado, lo que hicimos es hacer todas esas cosas. Y esto es ahora, bueno, si lo fusiono con la rama principal, por supuesto, pero este es el estado final de nuestra aplicación. Así que cuando creamos esta aplicación, la creamos en solo dos horas y media. Le dimos funcionalidad, la desplegamos para que otras personas también puedan visitarla. Si quieres configurar un sitio web de portafolio, ahora puedes hacerlo en unas pocas horas si eres otra persona muy profesional como yo, pero debería ser posible. Creo que eso es realmente genial. Voy a fusionarlo con la rama principal. Se creará una nueva compilación, y luego mi sitio web estará en vivo y las personas podrán visitarlo y todo. Eso es lo que quería mostrarte. Déjame ver. Sí. Creo que eso es todo, subimos todo nuestro código. Eso es todo, tenemos una aplicación con funcionalidad. Genera cualquiera de los 20 insectos que están ahí. Nos llevó menos de tres horas y un poco de preparación. Pero es tan fácil. Estoy muy feliz de que existan este tipo de flujos. A veces todavía es un poco mágico, por supuesto. Tengo que esperar a que se ejecute mi acción si hay dos nodos en ejecución, pero luego también puedo mostrarte el punto final que ahora tenemos. Tal vez ya pueda hacer eso, no lo creo. Puedo tomar una captura rápida. Sí, lo hace. Eso es bueno. De acuerdo. Entonces esta es mi URL ahora. Este es mi data que obtengo ahora. Así que debería ser accesible. De acuerdo. Eso fue todo. Esa fue mi aplicación. También me encanta el equipo A. Ha pasado un tiempo. Esta fue mi masterclass, mi presentación. Estoy muy feliz de haber podido hacer esto. Estoy muy feliz de que estuvieras aquí para hacer esto conmigo. Espero que hayas aprendido un poco, tal vez participaste un poco tú mismo, o al menos pude entusiasmarte lo suficiente como para probar estas funciones también. Porque eso es simplemente maravilloso. Si tienes alguna pregunta o comentario, a veces también escribiré cosas en Hashnode o soy un poco activo en las redes sociales, no tanto, pero tal vez luego fotos de pájaros y peces y cosas así. Pero si tienes alguna pregunta relacionada con esta masterclass o cualquier otra, puedes encontrarme en LinkedIn, o simplemente enviarme un correo electrónico y trataré de responder. Muchas gracias.