Aporta Calidad y Seguridad al pipeline de CI/CD

Primero me presentaré. Yo y Tibor, somos desarrolladores de la compañía Sonar Source o ahora la llamamos Sonar y ambos somos desarrolladores de los analizadores de JavaScript y hoy hablaremos sobre cómo puedes utilizar los productos desarrollados por Sonar para mejorar la calidad del código y la seguridad en tu proyecto CI. Veremos esto con Sonar cloud y Sonar Linux. No estoy seguro si has escuchado sobre este producto pero definitivamente aprenderás sobre él pronto. Te mostraré el plan. Digamos que dura una hora y media, pero es solo una estimación aproximada. Tal vez sea más rápido. Depende de cómo vayan las cosas. Aquí está el plan. No solo lo repasaré, sino para que entiendas que habrá ocho modelos. Cada modelo es un pequeño paso para configurar el flujo de análisis de calidad de tu proyecto y los iremos viendo uno por uno. Dejaré de compartir estas diapositivas. Ahora comencemos lentamente con los productos que discutiremos hoy. Sonar es una compañía que proporciona herramientas de calidad del código. Esto es, digamos, un ecosistema. SonarLint es una extensión para el IDE, que te brinda retroalimentación instantánea mientras estás codificando. SonarQube es una herramienta autoadministrada, por lo que tendrás que alojarla tú mismo. Y SonarCloud es una herramienta basada en la nube que es alojada por Sonar. Simplemente compras una suscripción allí o es gratuita para proyectos de código abierto y la utilizas. Hoy, para simplificar, utilizaremos SonarCloud, por supuesto, para no tener que preocuparnos por configurar SonarQube.

Comencemos y te preguntaré en la siguiente diapositiva, en la diapositiva número seis. Hay un enlace. Ya lo tengo abierto, es el fork del proyecto simple y pequeño. Este es un proyecto de MDN, lo forkeé y lo modifiqué un poco para que sea más adecuado para nuestros propósitos. Entonces, ¿podrías hacer un fork de este repositorio en tu organización? Aquí tienes el botón de fork. Yo no lo haré porque ya tengo dos. Haz un fork en tu organización donde tengas permisos. Y luego presiona aquí y deberías ver la organización aquí y debes presionarla. Una vez que lo hayas forkeado, ábrelo para que veas tu, no sé, John slash todo react. Y ahora puedes clonar este proyecto localmente. Puedes copiar el enlace SSH. Y puedes clonar el repositorio localmente con git clone e insertar este enlace. Así que solo tengo mi directorio vacío que creé para nuestro taller de devop.js y simplemente lo clono allí. Hemos clonado el repositorio y ahora vayamos a VS Code. Entonces VS Code es uno de los IDE que es compatible con SonarLint. Lo elegí porque es el IDE más común para el desarrollo de JS. También se admiten los IDE de JetBrains, Eclipse, Visual Studio. Creo que eso es todo. Así que abramos nuestro proyecto en esto. Usaremos el menú aquí. Abrir carpeta. Y abriré este proyecto aquí. Así que abramos el archivo source. No sé de dónde saqué el nombre del archivo. Así que abramos el archivo source/app. Este será el archivo en el que nos enfocaremos hoy. Puedes ignorar el resto. Es un proyecto Simple deReact, que realiza la adición de elementos de lista de tareas, como tus tareas diarias o lo que sea. Es un pequeño proyecto de demostración basado en yarn de YouTube. Puedes instalar las dependencias de yarn aunque no es realmente necesario ahora. Y ahora instalemos la extensión SonarLint. En la pestaña de extensiones de VS Code, donde están estos cuatro cuadrados, simplemente escribe SonarLint y estará en la parte superior y haz clic en el botón de instalación. Y se está instalando y aquí está. E instantáneamente estamos obteniendo código subrayado. Esto es SonarLint diciéndonos que hay algunos problemas en el código, o cosas que se pueden mejorar para fines de mantenibilidad. Por ejemplo, aquí hay un código comentado que puede ser confuso para los mantenedores. Aquí tienes una importación de React dos veces, así que puedes fusionar estas importaciones para que sean más concisas, etc. Tenemos diferentes problemas aquí. En la parte inferior de VS Code tienes esta advertencia, en la parte inferior de esta pestaña ves a SonarLint que te informa sobre los problemas en el código. Así que hay advertencias. Bueno, no estoy seguro de qué significa este icono. En SonarLint puedes configurar las reglas. Si abres esta pestaña de explorador, la primera pestaña donde ves los archivos en la parte inferior hay una pestaña de reglas de SonarLint. No es muy práctica, pero eso es lo que nos da VS Code. Aquí tienes la lista de reglas y para aquellas reglas que están activadas tienen on y para las que están desactivadas tienen off. Tenemos este conjunto de reglas predeterminado, que se ejecuta por defecto, y esperamos que satisfaga a todos, pero seguramente querrás desactivar algo. Por ejemplo, aquí tenemos algo como, está bien, no necesitas crear esta variable, solo devuelve directamente esta regla o esta expresión. Así que puedes desactivar la variable, la regla y simplemente puedes hacer clic aquí. También para cada regla tienes una descripción. También puedes acceder a ella desde esta bombilla, y aquí tienes la descripción de la regla y ejemplos ejemplos de código bueno y malo, y lo último que haremos ahora es encontrar en esta lista

Entonces aquí está SonarLint, hemos terminado con nuestro primer modelo, así que clonamos el repositorio, instalamos la extensión SonarLint en VS Code y vimos cómo podemos habilitar, deshabilitar las reglas, cómo podemos explorar los problemas, etcétera. Bien, espero que todos hayan logrado hacerlo funcionar y ahora pasemos al siguiente paso que será, creo, un poco más interesante. Espero que sí. En tus diapositivas tienes un enlace a SonarCloud, así que este es un enlace a la página de inicio de sesión. Así que puedes usar aquí este inicio de sesión de GitHub, simplemente haz clic aquí y estarás conectado, así que no verás nada super interesante aquí porque tienes una cuenta vacía pero ya puedes explorar proyectos aquí, a la derecha con este no estoy seguro de cómo se dice en inglés, el icono de los prismáticos. Y aquí puedes ver los proyectos que ya están analizados en SonarCloud, hay algunos proyectos destacados, así que puedes tener una idea de cómo es, así que puedes filtrar por tamaño, lenguaje y, bueno, hay un filtro de nombre de proyecto. Así es SonarCloud. Esta es una plataforma donde puedes hacer un seguimiento de la calidad de tu proyecto, así que contiene muchas cosas. Obtienes errores, vulnerabilidades, problemas de mantenibilidad, malos olores de código, cobertura de código, duplicaciones, muchas métricas, su evolución a lo largo del tiempo y muchas otras cosas geniales. Algunas de ellas las veremos hoy. Pero lo que queremos hacer ahora es agregar una nueva organización. Así que presionamos este botón de más en la esquina superior izquierda y presionamos y creamos una nueva organización. Así que aquí presionaremos esta opción predeterminada que se sugiere, importar una organización desde GitHub porque así es como iniciamos sesión, y se te preguntará qué organización quieres instalar. Yo tengo varias, así que simplemente elegí la mía personal. Y aquí se te preguntará qué repositorios quieres seleccionar. Puedes seleccionar todos o solo aquel que hemos forkeado. Seleccionaré aquel que hemos forkeado, así que es to do aquí y lo instalaré. Necesitamos una contraseña y aquí hay una clave para la organización que se ha creado. Así que la organización en Sonar Cloud es la misma organización que tendrías en GitHub, donde puedes iniciar los proyectos y configurarlos, compartir las configuraciones entre los proyectos, etc. Así que continuamos... Como dije, hay un plan gratuito para el código abierto, para proyectos públicos, por lo que estos proyectos estarán disponibles para que todos los vean, bajo este signo de los prismáticos. O puedes tener un plan de pago, entonces será invisible. Y el precio depende del número de líneas de código. Y aquí estamos. Tenemos nuestra organización. Así que esta organización tiene solo un miembro, que soy yo. Y todas las personas. Pero, por supuesto, puedes tener todo el equipo bajo una organización. Y puedes tener diferentes derechos de acceso, etcétera. Así que, una vez que tenemos la organización, podemos crear el proyecto. Debajo de ella, así que presioné esto. Podemos presionar el botón de más. No importa. Entonces, Sonar Cloud me sugiere agregar este proyecto To-do. Así que estoy de acuerdo con eso. Y al presionar el botón de configuración, se agregará automáticamente el proyecto a Sonar Cloud y se iniciará el primer análisis. Así que ahora se está ejecutando el análisis. Ese es el primer análisis inicial del proyecto. Tomará algún tiempo. No sé, tal vez un par de minutos. Bien, veo que alguien dijo que lo creó. Matthias lo creó. Finalizado. Importar. Tengo un error. Oh, lo siento. Lo siento por ti.

Sí. Hice todo lo posible para poner este error. De hecho, este proyecto tenía tan poco código y estaba hecho tan bien que no tenía ningún error. Así que puedes ver aquí que fui yo quien lo cometió. Lo cometí como ayer. Entonces, sí. Entonces, de hecho, ahora ves tu proyecto. Si abres la rama principal, verás una descripción general de los problemas. Puedes ver los mismos problemas que revisamos en el SonarLint. Por ejemplo, esta importación de React, código comentado, etc. Pero no vemos el problema con la sintaxis abreviada del nombre, la propiedad del objeto. Porque esta regla solo estaba activada en SonarLint, así que era una configuración local, esta configuración no está disponible en Sonar cloud. Sonar cloud no lo conoce. Pero en Sonar cloud, también hay una forma de configurar tu conjunto de reglas. Y ahí es donde nos detenemos en nuestro segundo modelo.

Ahora debes abrir tu organización, que probablemente tenga tu nombre de forma predeterminada. Y en la organización, en la parte superior, tienes el Perfil de Calidad. Verás que tienes un Perfil de Calidad para cada lenguaje. Creo que aún no lo he mencionado, pero Sonar Cloud admite muchos lenguajes. Así que aquí puedes ver, probablemente casi todos los lenguajes modernos, incluso no tan modernos. Tenemos Kobol y no sé qué más. ABAP. Sí, ABAP está en la parte superior. Estos lenguajes son compatibles con Sonar Cloud. Y estos perfiles, todos estos perfiles, se llaman Sonar Way. Estos son perfiles predeterminados. Es el mismo perfil que tienes en Sonar LINT. Y, por supuesto, si quieres un perfil personalizado como hicimos en Sonar LINT, debes crear el tuyo propio. Así que haz clic en el botón de crear en la parte superior derecha y tendrás, no sé, por ejemplo, DevOps.js, no necesitamos Apop en JavaScript. Así que encontraremos JavaScript en la lista y debemos seleccionar Sonar Way como padre porque eso hará que herede todas las reglas allí, lo cual es genial para empezar porque no necesitas hacer clic en todas las reglas que deseas, sino que ya tienes algo de forma predeterminada. Y esto también es genial porque si en un mes agregamos 10 reglas más a la plataforma, esas reglas se activarán automáticamente. Así que presiono crear y aquí está mi perfil. Así que ese es un perfil en la organización. Eso significa que puedes hacerlo disponible para cada proyecto en tu organización, y eso lo hace muy bueno para compartir las prácticas de codificación en toda la empresa o equipo. Actualmente vemos aquí que no hay proyectos asociados explícitamente a este perfil porque de forma predeterminada, se utiliza el perfil predeterminado. Y podemos cambiar esto y en todos los proyectos podemos seleccionar nuestro proyecto de tareas pendientes y ahora vemos que este proyecto de tareas pendientes está utilizando este perfil. O incluso puedes en este botón de configuración aquí, puedes establecerlo como predeterminado. Eso significa que cada nuevo proyecto que agregues a Sonar Cloud bajo esta organización utilizará este perfil. Bueno, espero que todo esté bien ahora. Estos dos perfiles, el perfil predeterminado y nuestro perfil DevOps.js son idénticos. Y aquí puedes ver la herencia. Es todo lo mismo. Así que activemos más reglas. Y en la diapositiva, puedes ver la clave de la regla que quiero que activemos. Es Javascript. Y 66. Así que puedes buscar por clave de regla o puedes buscar por el título. Está entre paréntesis. Esta es una regla sobre dos declaraciones if anidadas que puedes refactorizar fácilmente. Así que puedes activarla desde aquí o desde la lista aquí. Así que la activas en DOM.js con cierta gravedad. Y aquí estamos. Ahora, si vamos a los perfiles, bien, necesito ir a, bien, aquí estamos. Ahora vemos que el perfil DevOps.js tiene una regla más. Pero si vamos a nuestro proyecto, aún vemos la misma cantidad de problemas. Así que no tenemos nuevos problemas para esta regla porque sonar.cloud se activó porque el análisis solo se realiza para cada envío. Así que vamos al VS code, y por ejemplo, arreglemos esta importación de React. O puedes hacer lo que quieras. No importa. Solo necesitamos poner algo. Déjame ir al repositorio. Bien, vamos a confirmar esta importación duplicada y lo empujaré. Puedes empujar con el VS code o con la terminal, lo que prefieras. Así que ahora ves que tan pronto como empujo, hay una pestaña aquí que muestra el progreso del análisis. Te dice que llevará hasta 30 minutos, pero eso es realmente el máximo porque a veces hay proyectos grandes, pero debería tomar, ya sabes cuánto tiempo tomará, ya tienes uno arriba. Bien, eso es todo, tenemos nuestros resultados.

Así que abriré la rama principal, eso es más conveniente para nosotros ahora y si abres los códigos ahora, aquí está, aquí está nuestro nuevo problema, fusionado con la declaración en la línea 55 en estos objetos. Esta regla no estaba en el perfil, puedes ir a la regla aquí y ver la descripción de la regla, algunas recomendaciones sobre cómo solucionar el problema y puedes desplegarlo. Aquí está, así que aquí estamos.

Terminamos de configurar las reglas de análisis de este perfil. Ahora aquí está la situación de que tienes tu SonarLink, tienes SonarCloud, activamos una regla aquí, una regla allá, así que no están sincronizadas, eso no es bueno para la user experience y claramente te gustaría aquí tener la sincronización entre los conjuntos de reglas. Ahí es donde podemos tener la conexión entre ellos.

Para conectarlos, bueno, primero quería mostrarte que en esta línea 55 no tenemos este problema para la declaración if colapsable porque esta regla no está en el perfil predeterminado y solo está activada en Smart Cloud. Entonces ahora, vamos a abrir los ajustes. Así que puedes ir a las preferencias de código y aquí tienes un atajo aquí que puedes usar para el futuro. Así que es una coma para usuarios simulados y puedes buscar SonarLint y verás aquí las propiedades disponibles o simplemente puedes encontrarlo en las extensiones. Así que aquí puedes configurar la conexión a SonarCloud. Primero, necesitas esta propiedad. Así que podemos presionar editar y ajustes y aquí verás... No estoy seguro de que todos estén al tanto de cómo funcionan los ajustes para VS Code pero básicamente es un archivo JSON que se muestra de manera agradable. Ya tenemos aquí la configuración de SonarLint así que también puedes hacerlo manualmente aquí si quieres. Pero lo que necesitamos ahora es que necesitamos el modo de conexión de SonarLint a Sonar Cloud. Así que puedes comenzar a escribir esta propiedad y simplemente, y así este código debería sugerirte la propiedad completa y simplemente no hagas clic en ella. Y luego debes crear esto, debes seleccionar el último con la clave de la organización y el token. Solo dijo que debes envolverlo en un array para que no se queje. Así que ahora necesitamos completar estas dos propiedades aquí, clave de la organización y token. Para la clave de la organización, puedes hacer clic en tu organización, Sonar Cloud y tienes tu clave a la derecha, o tal vez simplemente lo recuerdes desde el momento en que lo configuraste. Y para el token, es un poco más complicado. Así que puedes hacer clic en el enlace en las diapositivas, o simplemente puedes ir directamente desde Sonar Cloud, haces clic en tu cuenta y abres la pestaña Security. Pestaña Security, como prefieras. Aquí generas el token, así que pones cualquier nombre. Así que pondré DevOpsJS workshop Sonar Limit. Ahora este token aparece en la parte inferior, y lo copio y lo pego en mi VS Code. Así que ahora tenemos esta conexión a Sonar cloud, pero aún necesitamos la conexión al proyecto. Así que eso está en la siguiente diapositiva número 10. Así que buscamos SonarLink Connected-Mode Project y seleccionamos este único, Single Property Project Key. Para obtener la clave del proyecto, vamos a nuestro proyecto y puedes encontrarlo en la pestaña Información. Y está activo en la clave de la organización aquí. O también puedes encontrarlo en la URL. Así que aquí estamos, casi hemos terminado. Ahora necesitas recargar la extensión. Y el nodo enviará el comando para recargar la extensión. Así que creo que la mejor manera sería simplemente cerrar el VS Code y volverlo a abrir. Ok, el enlace txt. Para tener los inicios adecuados para el enlace del versionador. Y ta-da, tenemos nuestro problema con la fusión de las declaraciones if disponibles porque, para el análisis, usamos el perfil de SonarCloud. Ahora te mostraré otro truco. Espero que funcione. Al sincronizar los proyectos entre SonarCloud y SonarLint, el conjunto de reglas es lo que ya hemos visto. Pero también lo que quizás quieras sincronizar son las soluciones de los problemas. Así que abramos nuestros problemas. Y, ok, digamos que, ok, aquí está el problema del código comentado. Aquí está en SonarLint. Y digamos que no quiero arreglarlo. Creo que es genial que este código esté comentado aquí y eso lo hace aún mejor.

Así que puedes cambiar el estado del problema. Resolverlo como 'no se corregirá' significa que simplemente no quieres corregirlo por cualquier razón. Me gusta este comentario y quiero mantenerlo. Ahora este problema ya no está abierto. No lo verás en tu página de resumen, así que aquí, es 14 en lugar de 15. Y también, SonarLint debería poder cargar esta resolución y no mostrar este problema más. Pero para eso, necesitas actualizar la conexión. Y por supuesto, puedes reiniciar. VS Code, eso definitivamente funcionará. Pero también puedes, deberías poder actualizar la vinculación al proyecto. Para eso, en la vista Common Palette, tal vez ya conozcas el atajo para Common Palette. Y puedes actualizar la vinculación. Y todo desaparece. A veces necesitas editar el código para que el enlace de resumen active el problema. Y nada funciona. Sí, eso sucede cuando quieres mostrar algo a alguien. Tic, tic, tic. De acuerdo, chicos, simplemente... Puedes cerrar y abrir el VSCode. O intentar recargar Windows. Eso es como un reinicio suave del VSCode. Y... Tampoco funciona. Lo siento por eso. De acuerdo, reiniciemos el VSCode. De acuerdo, aquí estamos. Lo siento por eso. Entonces... Y ves que tenemos muchos problemas, pero este comando ya no está subrayado porque el estado de la......resolución del problema se obtuvo de SonarCloud. De esta manera, no necesitas dejar comentarios aquí, como, sí, Lint, no sé qué, ignorar, lo que sea. Todas esas cosas están en el servidor y disponibles en SonarCloud. Así que aquí está el modo conectado de SonarLint a SonarCloud. Puedes hacer lo mismo conectándolo a SonarCube y tendrás la misma configuración para tu IDE como en la... en tu Integración Continua.

De acuerdo, hemos terminado con el modo conectado y ahora vendrá el siguiente paso, que creo que es el más interesante y el más difícil. Así que quiero que estemos preparados para eso. Sería genial si... Tal vez solo mencionaré una cosa porque hubo una pregunta interesante. Básicamente, la pregunta fue cómo puedes configurar SonarLint de manera diferente para diferentes proyectos. Y el uso del Modo Conectado es en realidad una forma de hacerlo porque en el Modo Conectado tienes un perfil de calidad que puedes definir por proyecto. Entonces, si estás en el Modo Conectado puedes tener diferentes perfiles de calidad para diferentes proyectos. Esta es la forma en que puedes tener diferentes configuraciones para diferentes proyectos. Y también la ventaja es que puedes compartir la configuración en el equipo. Así que SonarCloud puede ser un lugar central donde configuras tu proyecto limpio básicamente. De acuerdo. Y también si no usas el Modo Conectado para tener diferentes configuraciones. Estas son las configuraciones de usuario pero también es posible en VS Code tener configuraciones de espacio de trabajo. Así que si abres esto, hay un espacio de trabajo. Actualmente está vacío, pero de la misma manera puedes configurarlo. Así que ves que se crea en mi proyecto y puedes hacer commit y esto será específico para los proyectos. Ahora, vamos a ir a SonarCloud.

Para eso, vayamos a la pestaña de Administración. La Administración está en la parte inferior izquierda y aquí tienes el Método de Análisis. Tenemos el Análisis Automático de Sonar Cloud activado porque era el valor predeterminado cuando estábamos editando el proyecto. Y desactívelo porque ya no lo usaremos. Y sigamos el tutorial sobre GitHub Actions. Entonces, el Análisis Automático de Sonar Cloud activaría el análisis en cada envío a la rama o en las solicitudes de extracción. Ahora vamos a crear una Acción de GitHub, que básicamente hará lo mismo, pero podremos agregar más pasos y podremos agregar una ejecución de pruebas.

Primero, debes ir a tu repositorio de GitHub. Hay un enlace aquí. Y debes hacer clic aquí en el nuevo secreto del repositorio, y copiar el valor y el nombre. Entonces será el token de ahora, déjame ponerlo aquí. Simplemente copia y pega los dos valores de este tutorial en estos dos campos. Y editemos, aquí está, ahora está disponible. Continuemos, espero que funcione para todos los que lo estén haciendo.

Ahora necesitamos crear un archivo YAML construido, aquí dice crear una fecha, pero como no tenemos ninguna, la crearemos. Puedes copiar la ruta, creo que será más práctico aquí. Entonces tenemos JavaScript, así que haces clic a la derecha, luego puedes copiar la ruta. Y en el VS code, desde la raíz del proyecto puedes crear un nuevo archivo e insertarlo, el VS code creará automáticamente todos los directorios que se requieren. Esta es la ubicación predeterminada para GitHub actions, por lo que GitHub sabrá automáticamente que, okay, este es el archivo que debo tratar como una Acción de GitHub. Y puedes copiar este archivo aquí. Aquí tienes todo para tener la misma configuración, configurar el mismo análisis que solíamos tener. Así que ahora continuamos, y necesitas crear otro archivo que contendrá la configuración del análisis. Este archivo se llama Propiedades del Proyecto Inteligente. También lo creas en la raíz, y copias el contenido. Puedes eliminar todos estos comentarios y cosas. Dice que has terminado, y de hecho, si lo enviamos, tendremos análisis, pero no tendremos cobertura. Así que para tener la cobertura, te pediré que abras las diapositivas. Vale, estoy un poco lejos. Aquí está, por favor agrega estas dos líneas a las propiedades del proyecto en el servidor. Esto establecerá la versión del proyecto, y esto establecerá la ubicación del informe de cobertura. El informe de cobertura debe estar en formato ALCOV. En mi proyecto aquí tenemos solo el ejecutor de pruebas, y aquí usamos el procesador de resultados, un tipo de informador, que lo convertirá a ALCOV. Por lo tanto, ya se generará en formato ALCOV. Estamos casi allí. Ahora necesitamos agregar más pasos al archivo YAML de construcción de STM32V1, porque necesitamos ejecutar las pruebas. Así que lo hacemos entre estos dos pasos, entre la verificación del proyecto y entre el escaneo de SonarCloud. Ten cuidado aquí, porque esta sangría es importante para el formato. Estos guiones deben estar alineados y los espacios y usos deben estar alineados. Aquí usamos otra opción disponible, que tiene Yarn. Aquí instalamos las dependencias y aquí ejecutamos las pruebas de Yarn, que generará la cobertura para nosotros. Vale, Tibor, alguien está pidiendo el enlace a las diapositivas. No te escucho, Tibor, estás silenciado. Lo siento, compartiré el enlace nuevamente. Vale, gracias. Vale, intentaré ir más despacio. Lo siento, chicos.

Acabo de darme cuenta de que ya hemos pasado una hora y por eso estaba tratando de ser un poco más rápido. Bien, aquí tenemos, hasta ahora hemos agregado dos archivos. Built.yaml, que es la Configuración de GitHub Actions y Sonra Project Properties. Esas son las propiedades para el análisis. No hay nada especial aquí. Clave del proyecto, Clave de la organización, eso es lo que ya vimos contigo en Sonra Insight, Versión del proyecto. No es obligatorio, pero será útil para nosotros en el siguiente paso y el enlace al, no enlace, la ruta relativa a los informes. Así que por supuesto, esta ruta relativa debería estar allí durante el paso de CI, no en una llamada YOLO.

Así que tan pronto como tengas, si estás listo con estos dos archivos, puedes hacer commit en el master. Configura el análisis de Sonra Cloud. Así que ahora estoy listo para hacer push. Tan pronto como haga push, GitHub creará las GitHub Actions. Si abres el proyecto ahora, hay algunas GitHub Actions que son antiguas, que hice hace como 20 horas cuando estaba preparando, pero probablemente no tengas nada allí. Tan pronto como haga push, deberías tener una nueva GitHub Action en ejecución. Tal vez pueda mostrarte cómo se vería. Tan pronto como hagas push, tendrás aquí este elemento que aparecerá en la pestaña de Acciones. Tendrás este sonar cloud aquí con estos pasos, que primero construye las GitHub Actions, luego verifica todas las dependencias, genera el informe de cobertura y escanea y ejecuta el escaneo en el sonar cloud. Con este análisis de GitHub Actions, podrás ver todos los registros del análisis. Si algo sale mal, podrás verlo. Verás qué se ha tomado, cuánto tiempo, etc. Y, tan pronto como tengamos esto configurado, también veremos el análisis de sonar cloud en GitHub. Entonces, verás algo como esto después de que se ejecute esta GitHub Action, así que verás la cobertura de tu proyecto, y si haces clic en ella, verás el desplegable en qué archivos tienen qué cobertura, y puedes abrirlo y ver las líneas verdes, que están cubiertas, las líneas rojas que no están cubiertas, etc. De esta manera, puedes agregar no solo cobertura, sino también, por ejemplo, en parte de problemas externos si estás usando alguna otra herramienta para vincular tus proyectos, y puedes agregar problemas externos. Entonces, puedes agregar en tu GitHub Action un paso más para ejecutar tu, Sí, enlace por ejemplo, aquí, y en las propiedades del proyecto, puedes establecer esta ruta a este, sí, informe de problemas de enlace. Vale, veo que, chicos, la gente está escribiendo que no está funcionando. Entonces, mientras no funcione, pasaré a otro módulo sobre puntos críticos de seguridad. Entonces, en el título de esta masterclass, ves que no se trata solo de calidad de código, sino también de seguridad. Entonces, SonarCloud te proporciona muchas reglas de seguridad. Para este proyecto, no tenemos ninguna, pero tenemos dos puntos críticos de seguridad. Así que te voy a mostrar, ¿qué es esto? Entonces, para la seguridad, no siempre es fácil. Decir que tienes un problema aquí, que eres vulnerable aquí, puedes tener algunos lugares que son peligrosos y que requieren una revisión manual. Entonces, en nuestro proyecto, tenemos dos puntos críticos de seguridad. Estos puntos críticos de seguridad no son solo problemas simples, porque puedes revisarlos manualmente y decir que, vale, los he revisado, entiendo de qué se trata y es seguro. Entonces, para cada punto crítico de seguridad, tienes una descripción de él. Y hay una pestaña donde puedes leer cómo puedes entender si estás en riesgo. Entonces, si esto es realmente peligroso para ti. Y también tienes una pestaña sobre cómo solucionarlo. Así que aquí tengo un uso de protocolo HTTP, no HTTPS para mi URL. Y, digamos que lo revisé aquí, no hay peligro para mí usar un protocolo inseguro. Y digo que es seguro. Tan pronto como sea seguro, ya no se mostrará. Um, ya no se mostrará bajo los puntos críticos de seguridad. Y hay otro punto crítico de seguridad, donde creas, donde cargas el script desde internet y no estás comprobando su integridad. Aquí, digamos que lo revisé, leí la descripción, digo que, vale, de hecho, estoy en riesgo. Es un recurso externo, no puedo estar seguro de que esto es lo que espero allí y tengo que poner alguna integridad aquí. Así que aquí tengo algunos ejemplos, debería poner un número SHA para este script en mi código. Entonces, eso es lo que necesitaré arreglar en mi código. Pero eso también requerirá que haga push de algo y aún no puedo hacer push. Nope. Bueno, sé que no es genial, pero desafortunadamente no tengo una mejor idea, así que finjamos que podré hacer push.

Entonces, en tu código, abrirás este punto crítico de seguridad, así que está en la línea 111. Ya te preparé la solución. Aquí tienes el script.integrity y aquí tiene la función que convierte la integridad. Y, lo empujaría normalmente y abriría la EPR y lo fusionaría. Y luego, cuando se fusiona, diré que está solucionado y puedo cambiar el estado de este punto crítico de seguridad a solucionado. No lo haré en caso de que esto eventualmente funcione para que realmente podamos hacerlo juntos. Y aquí, ves que tenemos un estado de punto crítico de seguridad entre el 50% y todos estos impactos en la calidad de tu proyecto.

De acuerdo, creo que pasaré a la siguiente parte de nuestra masterclass, así que será, desafortunadamente, todo teórico. Pero aún así es interesante. Entonces, cuando hablamos de Sonar Cloud, no se trata solo de verificar tus problemas. Esto no es tan útil cuando quieres conocer el estado de tu proyecto, si quieres lanzarlo, desplegarlo, por ejemplo. Para eso, tenemos la noción de calidad de puerta. La calidad de puerta te muestra si es desplegable, si es lanzable. La calidad de puerta también es configurable a nivel de proyecto, a nivel de organización. Hay una calidad de puerta predeterminada de Sonar, que contiene diferentes condiciones de cobertura, número de problemas, etc. Puedes tener la tuya propia, por supuesto. Y cuando la calidad de puerta está en verde, eso significa que estás listo para continuar. Si tienes una amenaza, debes solucionar algo. Aquí ves que por alguna razón no tenemos nuestra calidad de puerta, ¿por qué? Porque en Sonar Cloud, el concepto de calidad de puerta va de la mano con el concepto de nuevo código. Se calcula solo en el nuevo código. ¿Qué significa nuevo código? Es el código reciente en el que te estás enfocando. Puedes pensar en él como el código que se introdujo desde la última versión, o el código que se agregó en el último mes. Hay diferentes formas de verlo. Ahora puedes hacer esto, de hecho. Si la definición de nuevo código no está configurada para un proyecto, vamos a configurarla. Puedes presionarlo aquí mismo en la calidad de puerta. O también está disponible en la administración de nuevo código. Entonces, nuevo código, vamos a configurarlo como la versión anterior. Versión anterior. Eso significa que tan pronto como la versión cambie, lo veremos. Ahora ves que la página de vista del servidor cambió porque tenemos este nuevo código, período establecido, pero aún no se ha calculado porque aún no hemos realizado el análisis. Entonces, ¿por qué es tan bueno tener nuevo código? Eso significa que no debes enfocarte en todo esto, no en el legado, sino en toda esta deuda que tienes en tu proyecto. Esto es especialmente bueno en proyectos grandes con una larga historia donde los agregas a un cierto cloud y tienes miles de problemas. Y, por supuesto, no es posible solucionarlos todos, o tal vez sea posible, pero eso no es gratificante para los desarrolladores. Y no es efectivo. Y enfocarse en el nuevo código no solo tiene sentido para el mantenimiento, para asegurarse de que las nuevas características que se entregan se hagan correctamente. También te permite, de hecho, solucionar la calidad general del código porque probablemente sabes que la mayoría de las veces, los desarrolladores no crean nuevo código, sino que editan el existente. Eso significa que tan pronto como toques el código existente, hay algunos problemas allí, y eso se convierte en nuevo código tan pronto como lo coeditas, y solucionarás esos problemas a medida que comiencen a estar en el período de nuevo código. En Sonar Cloud, tienes en la parte superior derecha ayuda con documentación, y aquí también tienes conceptos principales. Así que démosle la vuelta. Aquí tenemos estos conceptos principales, y aquí puedes leer estas explicaciones sobre nuevo código, tal vez sean un poco mejores que las que acabo de explicar, pero espero que esté claro para ti. Para las solicitudes de extracción, eso es un poco diferente. Para las solicitudes de extracción, el nuevo código es todo lo que agregaste en esta solicitud de extracción. Entonces aquí, digamos que la calidad de puerta para la solicitud de extracción pasará si no hay problemas en el código de esta solicitud de extracción, no desde la última versión, y pasar la calidad de puerta, por supuesto, no se trata de desplegar o lanzar. Se trata de fusionar la solicitud de extracción con el master. Me pregunto si todavía está todo, oh chicos, está funcionando. ¿Alguien puede confirmar que lograron hacer push? Yay, genial. Ahora vamos a GitHub, no tenemos mucho tiempo, pero creo que casi estamos allí.

Entonces, en acciones, ahora vemos esta acción en ejecución. Aquí tenemos el título del commit y dentro tienes tu Sonar Cloud y se está ejecutando, así que esto tomará un par de minutos. Y ahora estamos en mi proyecto aquí. Ves que aún no tenemos cobertura. Así que esa cobertura que te estaba mostrando era de un proyecto antiguo de Tibber. Así que necesitamos esperar por eso y mientras esperamos por eso te pediré que hagas otra cosa. Por favor, soluciona este punto crítico de seguridad. Descomenta el código alrededor de las líneas 103, 105 y 113. Y no solo lo empujes a master, sino crea una rama. Así que git checkout rama solucionar punto crítico de seguridad. Necesitamos esto para poder crear una solicitud de extracción. Así que lo voy a empujar. Ahora es cuando vas a crear una solicitud de extracción, por favor ten mucho, mucho cuidado. No te apresures a crear una solicitud de extracción en tu propio proyecto, no en el proyecto bifurcado. Así que cuando presiones y crees una solicitud de extracción, por favor aquí selecciona tu propio repositorio, no mi repositorio, porque no podrás ejecutar Sonar Cloud en otra aplicación. Así que creamos una solicitud de extracción en su propio repositorio, Así que, okay.

Tenemos Sonar Cloud listo. Tenemos nuestra cobertura aquí. Aún no hay historial, pero por supuesto, cuando tengamos más análisis, verás la tendencia aquí sobre el proyecto. Y en tu rama principal, tienes la calidad de puerta en verde ahora. Ves que todo está en cero aquí porque no tenemos código nuevo. Así que todo esto es parte del análisis inicial. Esto es, digamos, tu vida anterior, comienzas desde lo nuevo, y todo está en cero. No es genial que la cobertura sea cero, sin embargo. Pero, okay. Descubrimos esa línea. Pero la calidad de puerta está en verde, incluso con la cobertura, que es cero, porque son realmente pocas líneas aquí. Así que, ahora hemos terminado con el análisis de GitHub. Perdón, el análisis de las acciones de GitHub. Ahora, volvamos a la solicitud de extracción. Como hemos configurado las acciones de GitHub, debería activar el análisis para la solicitud de extracción. Y verás el comando dejado por Sonar Cloud con la calidad de puerta y con los problemas, que se informan en esta solicitud de extracción. Y tal vez algunos de ustedes notaron que hay un error aquí. Y aquí tenemos la función, que no devuelve nada aquí, obtenemos el valor de esta función. Y así en un mundo perfecto donde tienes Sonar Cloud funcionando en GitHub no podrás fusionar esta solicitud de extracción hasta okay, de hecho eso depende de la configuración de tu proyecto pero este botón no estará en verde para la fusión, ya que tendrás un problema en tu proyecto. Okay, me siento un poco tonto explicándote todo esto y no poder mostrarlo. Okay, aquí está. Comenzó. Comenzó y pronto podremos ver esto que acabo de explicar. Por cierto, acabo de verificar que 16 personas bifurcaron tu informe solo. Así que eso es genial. 16 o 16? 16. 16, hay más personas que dicen que lo van a hacer bien incluso en el primer paso. Así que esta acción se está ejecutando en el teléfono. Dale un minuto. Así que un minuto más y tendrás los resultados aquí. Y no es que solo veas este resultado aquí. También ves la solicitud de extracción en tu, especie de cloud. Así que aquí ves que no hay nada aquí. Ni siquiera sabía de esta animación, es divertida.

Así que tan pronto como tengas el análisis listo, aparecerá aquí. Pero aquí ya tenemos una rama. De acuerdo, vamos a reiniciar. Creo que casi hemos terminado. Entonces, lo que va a suceder a continuación es que vamos a obtener esta compilación, vas a obtener este análisis y lo vamos a corregir. Vamos a agregar un retorno. No estamos empujando para no romper este análisis. No estoy seguro de cómo se anulan entre sí. De acuerdo, aquí estamos. Así que aquí está nuestro resultado. Puedo hacer clic en él, ver aquí en SonarCloud que estoy usando la salida de esta función que no devuelve nada. Y si abro la solicitud de extracción, verás que aún puedo fusionar. Esto es configurable, incluso puedes permitir la fusión pero no está en verde, así que debes hacer algo. Así que voy a empujar esta solución a la rama y eso debería disparar el nuevo análisis. De acuerdo, eso aún va a tomar algún tiempo.

Y lo último que no hicimos. Lo siento, llegamos un poco tarde, pero es desafortunado que GitHub estuviera caído. Entonces, en tu proyecto local, vamos a la rama principal. No vamos a perder tiempo creando solicitudes de extracción solo para ver la parte. Aquí tienes dos archivos, nuevo archivo y nuevo archivo de prueba. Así que tiene un poco de código para que veamos el nuevo código en acción. Así que tienes algunas pruebas, comentas eso. Así que tienes otra configuración. Ahora conectémonos directamente a la rama principal. Lo siento, no es eso, olvidé decirte que cambiaste la imitando la nueva iteración en desarrollo. Así que cambia la versión en las propiedades de tu proyecto a cero dos en estas propiedades del proyecto de Sonar. Y descomenta estos dos archivos. Y hagamos un push. Solo estaba yendo a nuestra solicitud de extracción. De acuerdo, aún no ha disparado el segundo, el segundo commit. No, probablemente incluso la rama principal no será tan rápida en obtenerlo. De hecho, no. La rama principal está trabajando en esto para mí, no estoy seguro de cómo está para ti. Así que la gente está preguntando si puedes repetir de nuevo, qué cambiaste en el archivo de Propiedades del Proyecto de Sonar. Cambié 01 a 02. De acuerdo, así que el nuevo código está definido por la versión. Este número, sí. Por el número. Entonces, este será, este commit en el que cambiamos esta versión será el primer análisis en el período de nuevo código. Y... solicitud de extracción. Mm-hm, solicitud. De acuerdo, así que la solicitud de extracción también ha comenzado. Lo siento, chicos, por hacer esto en paralelo. Así que la idea inicial era hacerlo uno por uno, pero para acelerar un poco, lo estoy haciendo en paralelo. Así que tenemos este análisis de la solicitud de extracción en ejecución, y en paralelo tenemos nuestro análisis de la rama principal, nuevo código, nueva versión en ejecución. Así que abriré mi proyecto. Y como, y probablemente te hayas dado cuenta tan pronto como hemos configurado este nuevo período de código, tenemos estas dos pestañas disponibles. Te estás enfocando solo en el nuevo código, pero por supuesto puedes ver el general. Por supuesto, para security, es posible que desees solucionar problemas de seguridad, incluso si están en código antiguo. Puntos calientes de seguridad que podrían ser los mismos. De acuerdo, tenemos nuestro análisis listo. Desde hace 12 minutos, creo que es la marca de tiempo del commit. Y aquí está, nuestro nuevo código con una cobertura del 50%. Ves que la cobertura es demasiado baja. Es inferior al 80%. Ese es el umbral predeterminado, que hace que la puerta de calidad falle. Tenemos dos problemas de código. Así que aquí en nuestro código, que implementamos, tenemos aquí, esta variable asignada a tiempo antes o y aquí tenemos esta variable temporal creada sin uso. Y aquí ves esta cobertura, con esta condición, que solo está cubierta en una condición, en una rama. Entonces, aquí está con el nuevo código, lo que quería compartir contigo. Con la solicitud de extracción, todavía estamos esperando. De acuerdo, aquí está, para mí ha terminado. Así que ahora ves que hemos solucionado el error, la puerta de calidad ha sido aprobada, el botón de fusión está en verde. Y puedo fusionar. De acuerdo, también quería mostrarte que puedes ver la solicitud de extracción aquí.

Aquí está, y creo que eso es todo. Espero que esas personas todavía estén disfrutando de esta masterclass y hayan aprendido cosas nuevas. Quería aclarar que esta es solo una forma de usarlo. Esto es solo GitHub, GitHub Actions y JavaScript. SonarCloud admite muchos lenguajes, muchas plataformas, plataformas de CI, plataformas de revisión de código. Así que creo que casi todo lo que está disponible actualmente en el mercado se puede licenciar en la nube.

De acuerdo. Tenemos a una persona más casi lista. Genial. Entonces, en las diapositivas, en las diapositivas, tienes el Twitter de SonarSource, así que si quieres seguirlo, para conocer las noticias, y hay un enlace a la comunidad, la comunidad de SonarSource, puedes, si algo no funciona para ti, si necesitas ayuda, puedes iniciar un hilo allí y nuestros desarrolladores, personalmente yo, T-Bird personalmente, los revisamos regularmente y respondemos. O tal vez alguien más de la empresa o de la comunidad pueda responderte. Y creo que eso es todo.