Flutter, Análisis estático de código con SonarQube.

Este artículo te dará una breve introducción a una herramienta de análisis para tu código. Trataremos de responder: ¿Para qué se usa?, ¿Cómo instalarlo?

La versión en Ingles de este artículo: Link

Introducción

Sonarqube como tantas herramientas similares, nos permite realizar un análisis estático de código, esto nos guiará a detectar puntos susceptibles de mejora.

¿Por qué usar sonarqube?

Nos va a dar una ayuda para identificar las cosas que hacemos bien, pero principalmente las cosas que hacemos mal. Entre los principales usos, podemos destacar la posibilidad de identificar aspectos tales como:

código duplicado
código muerto
estándares de codificación
comentarios innecesarios
falta de test unitarios y test de integración.
tamaño de los archivos y métodos
código espagueti
vulnerabilidades

¿Qué información nos puede mostrar sonarqube?

Quality Gate: Reglas que el proyecto analizado debe cumplir para poder pasar de etapa.
Bugs y Vulnerabilidades: Hace referencia a fallos reales o potenciales.
Code smells: Es un indicativo que puedes mejorar la escritura de tu código. No quiere decir que tengas algún error, pero podría aumentar el riesgo de tener futuros errores.
Coverage: Nos permite conocer que cantidad de código ha sido probado y validado por los tests.

¿Cómo instalarlo y usarlo?

Veamos los pasos para que lo instales y puedas integrarlo en tu día a día.

Prerrequisitos:

Docker

Instalación y ejecución

1) Instalar sonarqube desde la terminal con el siguiente comando: docker pull sonarqube

2) Ejecutar el contenedor de sonarqube, dos formas de hacerlo:

Usando el siguiente comando
```
docker run -d --name sonarqube -e SONAR_ES_BOOTSTRAP_CHECKS_DISABLE=true -p 9000:9000     sonarqube:latest
```
Si descargaste una versión diferente a la latest cambiar a la versión especifica. Importante recordar el --name para un uso posterior

La segunda forma de hacerlo es por medio de docker como se muestra en la siguiente imagen: Importante recordar el name para un uso posterior

3) Ingresa a localhost:9000 para validar que todo corre bien, encontrarás una sección como la siguiente imagen, el usuario y la clave es admin:

4) Vamos a instalar un plugin para poder soportar el análisis en Flutter,

Descargar de la sección releases la última versión del archivo .jar
Vamos a copiar el archivo descargado usando la terminal y pegarlo en el contenedor de docker.
Desde la aplicación de docker vamos a ejecutar el cli y luego vas a tomar el "id-docker" del contendor de docker como muestra las siguientes imágenes.
Luego vas a copiar el archivo .jar al contendor de docker de la siguiente forma: file_path.jar: path donde descargaste el archivo .jar id-docker: id del contenedor obtenido en el paso anterior name: nombre del contenedor. Si seguiste el tutorial sin hacer cambios, es sonarqube

docker cp file_path.jar id-docker:/opt/name/extensions/plugins
Verifica en la consola cli que tengas el archivo .jar en la ubicación correcta.
Reinicia el contendor de docker

5) Descargar el SonarScanner

Descarga el archivo .zip para tu OS y configura cómo una variable del sistema para tu OS.
Ej: En mi Mac,
- Descargue y descomprimí en una carpeta llamada tools en $HOME
- Luego configuración mi bash/zsh es de la siguiente forma: export PATH="$PATH":"$HOME/tools/sonar-scanner/bin"

6) Volvamos a retomar ingresando a localhost:9000

7) Seguido de eso vas a crear un proyecto y vas a elegir la opción Manually.

8) Ingresa una key y un nombre de tu elección

9) Ingresa un token para tu proyecto a tu elección.

10) Crea un archivo de configuración en tu proyecto de flutter llamado: sonar-project.properties

 # Project identification
 sonar.projectKey=flutter_rocks
 sonar.projectName=Flutter Rocks
 sonar.projectVersion=1.0

 # Source code location.
 # Path is relative to the sonar-project.properties file. Defaults to .
 # Use commas to specify more than one folder.
 sonar.sources=lib
 sonar.tests=test

 # Encoding of the source code. Default is default system encoding.
 sonar.sourceEncoding=UTF-8

 # Allows reuse of an existing analyzer report
 # sonar.dart.analysis.reportPath=

 # Analyzer mode
 # Can be:
 # - flutter (flutter analyze) - default
 # - dart (dart analyze)
 # - legacy (dartanalyzer)
 # sonar.flutter.analyzer.mode=

Si quieres usar tu propio linter analyzer agrega esto:

 sonar.dart.analysis.useExistingOptions=true

El analysis_options.yaml debe existir en root del proyecto.

11) Ejecuta el comando para tu OS cómo te lo indica la consola de SonarQube en la raíz de tu proyecto.

 sonar-scanner \
 -Dsonar.projectKey=NAME \
 -Dsonar.sources=. \
 -Dsonar.host.url=http://localhost:9000 \
 -Dsonar.login=AuthenticationToken -X;

12) Resultado: Puedes recargar tu dashboard para ver todos resultados.

PD: Si te ocurre un error al indexar los archivos de la carpeta test, puedes seguir esta solución

 sonar.test.inclusions=**/*test*/**
 sonar.exclusions=**/*test*/**

PD2: Si quieres excluir las clases generadas por el build_runner, puedes usar la solución anterior.

 sonar.exclusions=**/*.g.dart,**/*.gr.dart,**/*.freezed.dart

Conclusión

Sonarqube puede convertirse en un aliado para proyectos donde tengas equipos que requieran evaluar la calidad del código y dar un salto de calidad. Te permitirá crear "reglas" para que un equipo pueda ir a la par de las expectativas de los clientes. Aun esta muy crudo para flutter y creo que puede bastar con una de las siguientes librerias.

Static code anlysis, creo que en la gran mayoria basta con usar alguna de estas librarias Lint, VeryGoodAnalysis, Pedantic

Realmente los pasos para ejecutar e instalar sonarqube son cortos; lo que quería lograr era ser lo más detallado posible para personas que apenas estén empezando y necesitan un paso a paso más detallado.

Gracias por llegar hasta acá.
Recuerda dar un like y compartir.

Nos vemos en un próximo articulo de Flutter!!

jamescardona11