Demo de aplicaciones web estáticas: CI/CD, implementación y canalización de pruebas en Azure

Hola a todos. Permítanme presentarme. Mi nombre es Vanya Lebedev y soy un gerente de ingeniería en el equipo de gestión de la cadena de suministro de Dynamics 365 en Microsoft Ireland. He estado trabajando en Microsoft durante más de 12 años, primero como ingeniero de software y luego como gerente, y estoy muy emocionado por la oportunidad de unirme al summit de TESTJS hoy y hablar sobre la ingeniería en Microsoft. Así que compartiré mi punto de vista personal, perspectiva y experiencia sobre el tema. Hablaré sobre los desafíos de ingeniería que mi equipo está resolviendo actualmente y sobre las oportunidades de ingeniería en el equipo. Espero que les parezca interesante. Así que empecemos.

Todos conocen a Microsoft. Tenemos una larga historia de construcción de productos que se adoptaron en todo el mundo. Y esta es probablemente la razón principal por la que me uní a la empresa en 2009. Fue una oportunidad fantástica para aprender cómo es trabajar en una de las empresas más famosas del mundo. Así que me uní y nunca me arrepentí. Los desafíos de ingeniería han sido emocionantes hasta ahora y me lo he pasado muy bien resolviéndolos.

Una de las mejores cosas para mí personalmente es que he estado trabajando en productos que realmente son necesarios y que marcan la diferencia para miles de organizaciones en todo el mundo y para cientos de miles de personas en estas organizaciones. Nuestro CEO, Satchin Adella, ha expresado esta ambición en la declaración de misión que ven en la pantalla en este momento. Queremos capacitar a cada persona y a cada organización en el planeta para lograr más. Esta declaración me emociona mucho personalmente, específicamente por la ambición, por el alcance de esta visión. Piénsenlo. Es cada persona en el planeta. Este es el alcance del impacto que estamos tratando de lograr. Es un esfuerzo verdaderamente global.

¿Y saben qué? Tener un gran objetivo es genial, pero otra cosa que realmente me inspira, me motiva mucho es que no solo tenemos una visión de hacia dónde vamos, sino que también tenemos una comprensión clara de cómo llegaremos allí. Un hombre inteligente dijo que la cultura es la estrategia para el desayuno. Y es muy cierto. Creo que es la gente que me rodea y la cultura que todos compartimos lo que es y será la piedra angular del éxito de Microsoft.

Todos en la empresa, todos a mi alrededor, son alentados a ser siempre curiosos, ansiosos por aprender, a asumir riesgos. Y otra cosa que es realmente genial es que todos también son alentados a no tener miedo de cometer errores en el camino. Porque si no cometemos errores, si no asumimos riesgos, no marcaremos la diferencia. Sin embargo, si cometemos errores, aprenderemos, mejoraremos y crearemos un software revolucionario. Esta es la cultura. Estos son los mensajes que realmente resuenan conmigo.

Y como parte de esta mentalidad de crecimiento, también estamos tratando de obsesionarnos con los clientes, de salir de nuestro camino para comprender cuáles son sus necesidades reales. No asumiremos que lo hemos aprendido todo. Sabemos todo, pero seguiremos aprendiendo y aprendiendo y aprendiendo sobre ellos. En última instancia, creando mejores productos y marcando la diferencia. Lo mismo ocurre con la diversidad y la inclusión. Somos un equipo que es tan global que no pueden imaginarlo. Personas de todo el mundo con diferentes antecedentes, géneros, etc. son muy bienvenidas en el equipo, y cada persona aporta una perspectiva única. Ha habido tantos ejemplos en mi career donde sus opiniones e ideas nos ayudaron a producir un mejor software y productos, y en última instancia, a tener éxito. Esto es algo que creo que es muy único y muy inspirador en mi trabajo. Por eso sigo adelante. Otra cosa que realmente destaca para mí sobre el trabajo en Microsoft es que una cultura como esta, la cultura que acabo de describir, no surge por sí sola, no emerge por sí sola. Requiere una visión sólida y un liderazgo sólido y un esfuerzo colectivo y para acelerar nuestra cultura hemos introducido esta visión de cuáles son los grandes líderes en la organización y creemos que todos, cada ingeniero, cada persona en la organización debería ser un líder, de lo contrario no podremos progresar tan rápido como queremos, no podremos dar forma a nuestra cultura, no podremos construir los productos que necesitamos, y es realmente genial cuando las personas comienzan a adoptar esta mentalidad, esto es algo que realmente nos ayuda a hacer las cosas, las personas no se sientan en un rincón y se quejan, todos toman su destino en sus manos y marcan la diferencia, hacen un cambio, esto realmente ayuda a impulsar una gran y eficiente organización de ingeniería, así que esto es algo que realmente me gusta.

Fueron muchas palabras, pero ¿qué hay de algunos ejemplos concretos, creo que un gran ejemplo de cómo Microsoft promueve esta mentalidad de crecimiento son los eventos anuales de hackathon. Durante tres días, todos en la organización, todos los ingenieros en la organización simplemente entran en un modo completamente oscuro con pizzas y todo para hackear sus ideas y producir aplicaciones de código, mejoras en las que han estado pensando durante mucho tiempo. Echemos un vistazo rápido a la grabación de lo que se puede lograr. Sí.

Esto es lo que se puede lograr con los hackathones. Personalmente, he estado participando durante los últimos cinco años. Cada vez, ha sido una experiencia increíble y siempre hemos tenido grandes ideas y nos hemos divertido mucho haciéndolo. Nuevamente, fueron muchas palabras y muchas cosas culturales, pero todos somos ingenieros aquí.

Probablemente estén curiosos, bien, ¿cuáles son los desafíos de ingeniería? ¿Qué hace su equipo? Nuestro equipo está llevando aplicaciones de gestión de la cadena de suministro a empresas. Nos enfocamos en el lado de las aplicaciones empresariales, y esta es una pequeña diapositiva que muestra qué áreas estamos cubriendo. Nuestras aplicaciones abarcan ventas, adquisiciones, fabricación, contabilidad de costos, planificación de la oferta y la demanda, almacenamiento, transporte, finanzas, impuestos. Pueden ver en la diapositiva, solo leyendo los títulos de las aplicaciones que componen nuestra suite de productos, es inmenso. Y si piensan en el tamaño del producto, son decenas de miles de tipos de entidades persistentes. Son cientos de miles de clases, millones de pruebas automatizadas.

El equipo necesario para construir software como este es de unos pocos miles de personas, unos pocos miles de ingenieros. Naturalmente, mi equipo es responsable de una parte más pequeña de esta aplicación. Principalmente, nos enfocamos en la gestión de pedidos inteligente, en el servicio de campo y en las capacidades de planificación de la cadena de suministro. Pero los desafíos de ingeniería son muchos. Nos dirigimos a empresas de tamaño mediano a grande. Y con un tamaño de empresa como este, los requisitos de rendimiento y escalabilidad son extremadamente difíciles de cumplir. Otro desafío interesante es cómo integramos tantas aplicaciones en una suite que tenga una apariencia y sensación fluidas y esté integrada de manera perfecta para brindar a los usuarios una experiencia fácil y eficiente. Y, por supuesto, la experiencia del usuario en sí. ¿Cómo hacemos que esta aplicación sea lo más agradable posible? Afortunadamente, estamos aprovechando el poder de la Nube de Microsoft para construir esta suite de aplicaciones, y estamos utilizando la tecnología más reciente y avanzada para lograrlo. Power Apps es la plataforma que establece el marco para nuestro desarrollo. También estamos adoptando la arquitectura de microservicios como medio para escalar de manera independiente, lanzar de manera independiente, asegurando que nuestro... Muy bien, bienvenidos a nuestra masterclass sobre JavaScript.

Mi nombre es Juarez Barbosa, Jr. Soy el líder de participación de desarrolladores de Azure en Microsoft. Aquí pueden ver mis datos de contacto, mi canal de medios, también mi perfil de Twitter y LinkedIn. Así que, en caso de que quieran, digamos, hacerme preguntas después de la masterclass hoy, siéntanse libres de acercarse.

Entonces, sin más preámbulos, comencemos. Para hablar un poco sobre mi perfil, tengo 25 años de experiencia en TI en varios roles diferentes. En ingeniería, como arquitecto de software, arquitecto de soluciones, ya saben, y 10 años en relaciones con desarrolladores, comunidad de desarrolladores, defensa y marketing. En el pasado, actué como campeón de desarrolladores de Nokia y miembro de la comunidad, también como evangelista de IBM mobile y líder mundial en pensamiento para su plataforma móvil. También he trabajado para IBM, en relación con IBM Cloud y el Grupo Cloud, y también como evangelista de Watson y como estrella técnica para Europa, y también para Oracle en EMEA, en relación con el equipo de relaciones con desarrolladores, y ahora Microsoft en Nylon. Últimamente, me he enfocado en la nube, DevOps, Java, que es mi lenguaje de programación principal de alguna manera, pero también JavaScript, Golang, IoT, móvil y blockchain, ¿de acuerdo?

Hablemos un poco sobre la oportunidad aquí. Hoy hemos preparado algunos recursos técnicos para ustedes, así que les voy a dar, digamos, algo de tiempo para escanear este código QR o visitar este enlace de HackaMS aquí. Allí podrán encontrar todos los recursos relacionados con uno de nuestros laboratorios de hoy, ¿de acuerdo? Estamos hablando de Azure Static Web Apps y también de las pruebas con Playwright, que es un marco de trabajo de código abierto creado por Microsoft. Así que, por favor, escaneen este código QR en caso de que estén interesados en aprender más sobre el contenido técnico aquí. Y también tenemos un canal en Twitter, Microsoft Developers Ireland, donde publicamos sobre los próximos eventos y también el contenido enriquecedor que tenemos en Microsoft, algunos cursos gratuitos que están disponibles como parte de Microsoft Learn, y así sucesivamente.

Hablando un poco sobre la agenda, comenzamos con una presentación sobre ingeniería de software en Microsoft. Luego tendremos una demostración rápida ahora. Voy a, digamos, realizar todos los pasos relacionados con los dos laboratorios que tenemos hoy. Voy a comenzar ahora con el relacionado con Azure Static Web Apps, ¿de acuerdo? Incluyendo integración y entrega continua. También construcción, implementación, acciones de GitHub, todo. Y luego tendremos un breve laboratorio introductorio sobre Playwright, que se basa de alguna manera en JST, JS, la biblioteca de pruebas, ya saben. Pero hay algunas extensiones, así que vamos a hablar de eso en breve. Así que, sin más preámbulos, comencemos, ¿de acuerdo? Sí, tengo mi VS Code abierto aquí. Permítanme mostrarles el primer laboratorio, y lo compartiré en la ventana de IAM para que también puedan verlo, ¿de acuerdo? Pero les daré tiempo para completar las tareas, así que si no les importa, intentemos seguir las actividades aquí primero, ¿de acuerdo? Este es el tutorial sobre Azure Static Web Apps. En realidad, es una publicación de blog. He resumido todos los pasos, ya saben, para que no tengan que pasar por toda la extensa documentación que tenemos. Lo primero aquí son algunos requisitos previos, ¿de acuerdo? Así que les daré quizás 15 minutos o algo así para instalar todas las herramientas, pero no tienen que hacerlo ahora porque ya las tengo instaladas aquí para ustedes. Así que puedo guiarlos a través de los pasos y todo, pero tendrán, digamos, mucho tiempo para abordar también los requisitos previos, ¿de acuerdo? Necesitaremos una cuenta de GitHub, necesitaremos una extensión para Visual Studio Code específica para Azure SWA, una cuenta de Azure y pueden, en caso de que no tengan una, crear una cuenta gratuita con nosotros, ¿de acuerdo? Visual Studio Code, eso es el IDE, al menos el que voy a usar aquí hoy, pero por supuesto pueden usar su preferido. Es fácil adaptarlo. No hay nada específico de VS Code aquí aparte de la extensión. También Git, por supuesto, ¿de acuerdo? El primer paso aquí es crear un repositorio Git, ¿de acuerdo? Así que podemos alojar el código de muestra. En realidad, el código aquí no es elaborado, solo es una página web simple y un archivo CSS, ¿de acuerdo? Pero luego pueden visitar esta URL aquí y proporcionar un nombre para su proyecto, y yo ya tengo el mío creado aquí en algún lugar. Permítanme mostrarles. De acuerdo, cierro esto, esto, esto y esto. Creo que está aquí. Lo siento. De acuerdo, este es el REPL, en realidad la acción de GitHub, pero pueden ver el REPL aquí. Es uno simple, con una carpeta de origen y un par de archivos, como dije. De acuerdo. Volvamos. Después de eso, por supuesto, crean un REPL para la aplicación SWA. Tenemos el REPL creado, como pueden ver. De acuerdo. Como dije, no es, digamos, un proyecto completo, ya saben, así que solo es un ejemplo simple, porque el enfoque aquí, por supuesto, yo abogo por Azure, así que quiero mostrarles lo fácil que es crear una aplicación web estática y aplicarla a Azure, ya saben, con unos pocos pasos y también tener CI, CD, ya saben, GitHub Actions y todo lo demás como parte de eso. De acuerdo. Tenemos que clonar el REPL, por supuesto, localmente. De acuerdo, recuerden reemplazar aquí su nombre de cuenta de GitHub. De acuerdo, y yo tengo el mío aquí. De acuerdo, así que abro CMD y luego, digamos, navego hasta el directorio correcto, y luego puedo clonar el REPL. Lo tengo aquí abierto para ustedes, y pueden ver el mismo código fuente aquí con los archivos emergentes, ¿verdad? Hola, dejaste de compartir tu pantalla.

Y luego, después de eso, podemos comenzar y crear la aplicación web estática, ¿de acuerdo? Así que vamos a VS Code aquí. Tengo el proyecto aquí, por supuesto. De acuerdo, lo primero que debes hacer es autenticarte en Azure. De acuerdo, puedes ver este icono aquí, Azure. Y luego puedes hacer clic en él. Verás que en realidad el mío ya está autenticado aquí porque mi suscripción está aquí. De acuerdo, pero es un paso fácil. Y tengo, diría, todas las capturas de pantalla y todo aquí para ti. De acuerdo, haces clic aquí y luego te autenticas en él y luego lo tienes autenticado, ¿de acuerdo?

El segundo paso entonces... Tengo que crear una aplicación web estática. Así que seleccionas esta sección específica aquí, SWA. De acuerdo, y luego haces clic en el signo más, ¿verdad? Y luego debes proporcionar un nombre para tu aplicación web estática porque esta aquí, ahora, la voy a implementar en Azure, ¿de acuerdo? Con unos pocos pasos. Así que voy a mantener el mismo nombre aquí. Y solo para mencionarlo, déjame mostrarte, tengo mi... No soy tan... A ver si puedo... ¿Quizás este aquí? No. No. Sí, de acuerdo. Así es, puedes ver aquí mi portal de Azure. De acuerdo. Y no tengo nada implementado aquí porque no hay grupos de recursos aquí. De acuerdo? Y ninguna aplicación. Solo tengo, diría, una huella aquí con respecto a las implementaciones anteriores antes del taller de hoy porque probé todo, por supuesto. ¿De acuerdo? Así es. Aquí está el nombre de mi aplicación. De acuerdo. Así que solo tengo que proporcionarlo y confirmar. Presiono enter. Selecciono la región de la nube, en mi caso, Europa Occidental. De acuerdo? Nuevamente. ¿De acuerdo? Y luego puedo seleccionar, diría, hay varios frameworks diferentes que puedes seleccionar aquí, pero voy a comenzar con personalizado porque es solo una aplicación de JavaScript básica. ¿De acuerdo? Y luego después de eso, tengo que proporcionar el directorio del código fuente. En realidad es SRC. ¿De acuerdo? Como puedes ver aquí, ¿verdad? SRC aquí. Sí. De acuerdo. Confirmo nuevamente. ¿De acuerdo? No voy a crear, diría, un binario o algo, un paquete para esta implementación, así que puedo dejar el argumento para la compilación vacío. Presiono enter nuevamente y comienza la fase de implementación. ¿De acuerdo? Crea la aplicación web estática. Ahora está accediendo a GitHub. ¿De acuerdo? Y ahora el proceso está avanzando.

Aquí hay un par de cosas. Puedo cerrar este aquí. ¿De acuerdo? Pero si abro, por ejemplo, este aquí, verás que, en realidad, se está ejecutando como parte de mi configuración de GitHub actions. ¿De acuerdo? Todavía se está ejecutando aquí. ¿Verdad? Pronto se marcará con el indicador de marca de verificación verde.

Volviendo a VS Code. De acuerdo. Se está ejecutando. Podemos esperar un poco más. También puedo echar un vistazo a mi portal. ¿De acuerdo? Puedes ver que ahora hay un grupo de recursos para la aplicación. ¿De acuerdo? Vamos a verificar el estado en GitHub nuevamente. Permíteme actualizar esta página aquí. De acuerdo. Sí, tendremos una notificación aquí sobre la aplicación, por supuesto, relacionada con el estado listo. Esperemos un poco. Genial. De acuerdo. Está a punto de terminar. De acuerdo, perfecto. Sí, está hecho. Puedes verlo aquí ahora. Así que solo tengo que hacer clic en 'Navegar por el sitio web'. ¿De acuerdo? Y verás que la aplicación está desplegada. ¿De acuerdo? Es tan fácil como eso. De acuerdo, es bastante simple, de hecho. Eso es lo primero. De acuerdo. Y aquí tienes todos los pasos relacionados con la autenticación contra GitHub, como dije. Además, debes seleccionar la suscripción y proporcionar toda la información aquí. Lo mismo ocurre con la región de implementación en la nube, como te presenté. Conoces el directorio del código fuente, la confirmación aquí. Y luego la aplicación básica. De acuerdo. También tengo algunos recursos diferentes aquí para ti. Permíteme mostrarte esto ahora, esto y esto. Sí. De acuerdo. Entonces, sí, Microsoft Learn ofrece algunos cursos gratuitos, ya sabes, así que te proporciono los enlaces aquí. Ese es el primero, puedes ver muchas cosas relacionadas con las aplicaciones web estáticas de Azure aquí, como este. Conoces este aquí, este aquí, este aquí, ya sabes, así que siéntete libre de explorar más toda la documentación que también está aquí para ti. Ya sabes, y tenemos diferentes, diría, bibliotecas y frameworks aquí. Ya sabes, tenemos React, tenemos Angular, tenemos Vue.js. Todo. Y el último. Esta es en realidad la página de inicio para retrasar la página de inicio principal de este producto, ya sabes, las aplicaciones web estáticas de Azure, así que puedes, diría, verificar todo lo relacionado con el servicio en sí. De acuerdo, y aquí hay puntos adicionales. Entonces, um, ese es el primero, el primero, de hecho, así que podemos comenzar a explorar el tutorial ahora.

De acuerdo. Tengo el proyecto aquí. De acuerdo. Sí. Parece. Sí, hay algunas actualizaciones sucediendo aquí. Pero de todos modos, creo que podemos intentarlo.

De acuerdo. Permíteme hacer clic aquí. Minimiza esto, esto. No lo necesito. Este también. Sí. Y esto y esto. De acuerdo. Así que lo tengo aquí. Así que intentemos comenzar.

De acuerdo. Sí. Hay un paso de confirmación aquí. Bien. De acuerdo. Así que esto es solo un comentario simple. Puedo presionar Enter aquí. Sí. Aplicación web 2. Eso es correcto. Europa Occidental. De acuerdo. Personalizado. SRC. Nuevamente. La compilación está vacía, como expliqué. De acuerdo, esperemos. Esperemos que funcione. Genial, sí, lo está. Va bien. Esperemos un poco más. Puedo abrir la acción de GitHub. Nuevamente. Sí, de acuerdo, puedes ver que se está ejecutando aquí. Esperemos un poco más hasta que termine. De acuerdo, puedo cerrar esto. Esto también. Esto también. De acuerdo. El portal está aquí. Si actualizo, posiblemente veré, sí, podemos ver Static Web App 2 aquí. Así que hemos aprovisionado el servicio. Al final del día, ese es el servicio de aplicaciones de Azure.

Entonces, las Azure Static Web Apps, proporciona una especie de abstracción de alto nivel para simplificar la experiencia. De acuerdo, todavía se está ejecutando. De acuerdo, hemos pasado este paso aquí. De acuerdo, estamos esperando por este. Genial. Está listo. Volvamos a VS Code. De acuerdo, navegar por el sitio web. Sí, funcionó de nuevo. Perfecto. Perfecto, de acuerdo, ahora tendremos el laboratorio 2 y el laboratorio 2. Es una introducción a Playwright, ¿de acuerdo? Playwright es una biblioteca de pruebas para muchos lenguajes de programación como .Net, JavaScript, Python, Java también, creada por Microsoft. De acuerdo, es un marco de código abierto, uno muy interesante. Reutiliza algunos, diría yo, elementos de la biblioteca que es en realidad JAST.io.js, ya sabes, que es, por supuesto, una biblioteca de pruebas también. De acuerdo, pero la extiende y tiene varias características diferentes, diría yo, como el espectro de Playwright. Es bastante útil de hecho. Así que espero poder presentarte esta genial biblioteca. De acuerdo. Y luego puedes empezar a usarla. De acuerdo. De acuerdo, déjame cambiar de pantalla aquí. Sí, solo para mencionar, todavía tengo la implementación aquí. De acuerdo, la aplicación, nuevamente, verás que todo está aquí. Lo mismo. Los servicios de aplicaciones aquí con esta aplicación web estática. Lo mismo, quieres la nueva URL aquí. De acuerdo. Pero ya no lo necesitamos. De acuerdo. Así que ahora vamos a explorar las pruebas. Por lo tanto, en este momento no hay nada relacionado con Azure específicamente. De acuerdo, pero solo para mostrarte que todavía está funcionando, pero ahora podemos cerrar el portal. Hemos llegado a este punto aquí, como dije, en caso de que encuentres problemas con la finalización. No dudes en contactarme más tarde en LinkedIn. Puedes verlo en Twitter. Puedes ver mi identificador aquí. De acuerdo, pero eso es todo. Hablemos de las pruebas ahora. De acuerdo, también puedo cerrar este. De acuerdo, Playwright. Como dije, esto es una automatización de navegadores cruzados para las pruebas. Creado por Microsoft. Es un marco de código abierto y una biblioteca, uno muy bueno. Puedes, diría yo, abordar los principales navegadores y los motores. Puedes ver Chrome aquí, Firefox, WebKit, y así sucesivamente. Múltiples lenguajes, como dije, JavaScript, TypeScript también. Interesante mencionar, Python, dotnet y Java. De acuerdo, es bueno para la automatización. Hay algunas cosas aquí que te voy a mostrar, cosas bastante interesantes relacionadas con la automatización. Además, puedes controlar varias opciones de configuración diferentes, por lo que puedes controlar la forma en que se ejecuta tu prueba con flexibilidad, lo cual es algo bueno.

También puedes grabar una sesión de pruebas, ya sabes, y también capturar capturas de pantalla, crear videos y más. Así que vamos a explorarlo. Lo primero que debes hacer es instalarlo. De acuerdo, es fácil. Solo tienes que instalar Playwright primero. De acuerdo, puedes ver los pasos aquí. Uno fácil. De acuerdo, rápido y fácil.

Lo segundo es utilizar todos los navegadores compatibles. De acuerdo, así que aquí hay una ejecución adicional de NPX. Puedes hacer todo desde la CLI. La interfaz de línea de comandos. Puedes ver los resultados relacionados con la instalación aquí.

Entonces, lo segundo ahora es definir una prueba. De acuerdo, así que puedes ver aquí que esta es una prueba muy simple. De acuerdo, básicamente solo estoy accediendo, diría yo, a la página de inicio de Playwright. La tengo aquí. Sí, esta. De acuerdo. Y luego puedo navegar por algunos elementos y verificar, por ejemplo, el contenido del título. De acuerdo, que es Playwright. De acuerdo, así que creo que lo tengo abierto aquí. Sí, puedo cerrar este. Ya no lo necesitamos. De acuerdo. Genial. Sí. Entonces, sí, este es el directorio, puedes ver que la estructura es bastante simple de hecho. Permíteme mostrarte aquí. Esto es solo una prueba, por supuesto. Así que creas esto después de instalar todo y comienzas en ello. Puedes ver las pruebas. De acuerdo. Y tengo un archivo de configuración y una prueba simple aquí. Básicamente, el contenido es el mismo que te mostré. Ya sabes, tengo play right aquí y play right. De acuerdo. Así que puedo ejecutar la primera prueba. De acuerdo. Que es simplemente NPX playwright test. Hagámoslo. De acuerdo. La prueba se está ejecutando. Interesante. Hay algo mal con mi máquina. De acuerdo. Sí, pasó.