Introducción

Existen herramientas, a veces accesorias y a veces esenciales, para hacer la vida más fácil a los desarrolladores de Angular.

La lista de herramientas que se presenta en este capítulo no es exhaustiva. Corresponde a las herramientas que usamos a diario en nuestros trabajos de desarrollo.

Compodoc

Logo de Compodoc

Los nuevos desarrolladores a menudo consideran que escribir documentación es una pérdida de tiempo. Sin embargo, es un paso esencial en el desarrollo de una aplicación compleja.

Compodoc es una herramienta de código abierto que facilita la generación de documentación para un proyecto Angular. El resultado es un diseño de sitio web limpio y receptivo que incluye funcionalidad de búsqueda y hermosos temas. Por supuesto, permite la generación en varios idiomas, incluido el español.

Este proyecto acepta todos los colaboradores motivados disponibles en: https://github.com/compodoc/compodoc

1. Instalación

Su instalación es relativamente simple ya que basta con agregar el paquete @compodoc/compodoc usando el administrador de paquetes npm.

npm install -g @compodoc/compodoc

Compodoc usa el archivo tsconfig.app.json ubicado en la raíz de un proyecto Angular generado por Angular CLI.

{  
 "extends": "./tsconfig.json",  
 "compilerOptions": {  
   "outDir": "./out-tsc/app",  
   "types": []  
 },  
 "include": [  
   "src/**/*.ts"  
 ],  
 "exclude": [  
   "src/test.ts",  ...

WakaTime

WakaTime es una herramienta para evaluar el tiempo empleado en un entorno de desarrollo. Proporciona una interfaz web que permite conocer con precisión el tiempo dedicado a un proyecto.

Acoplado a GitHub, indica qué lenguaje de programación se usa, en qué archivo y en qué proporción.

Es compatible con más de 50 entornos de desarrollo. Por supuesto, Visual Studio Code forma parte de la lista.

Después de registrarse en el sitio https://wakatime.com/, todo lo que tiene que hacer es instalar una extensión en el entorno de desarrollo.

1. Funcionamiento

WakaTime funciona con el mismo principio que una API REST. Por lo tanto, cada usuario tiene una clave (Secret API Key) que permite la autenticación. Esto es visible en la configuración de una cuenta autenticada en wakatime.com.

Parámetros de una cuenta en la página https://wakatime.com

2. Instalación

La extensión se instala como cualquier otra extensión de Visual Studio Code, haciendo clic en el último icono de la izquierda y buscando por nombre.

Instalación de la extensión WakaTime

El tiempo dedicado a un proyecto aparece en la barra azul en la parte inferior del entorno de desarrollo.

Una representación más detallada y gráfica está disponible en el sitio web de la herramienta: https://wakatime.com

Visualización en la página...

Travis

Travis es un software de integración continua de código abierto. Permite, de forma automatizada, la compilación, el lanzamiento de pruebas unitarias y extremo a extremo y el despliegue de una aplicación.

Junto con GitHub, asegura que la aplicación no haya sufrido ninguna regresión desde la última integración (commit) de git por parte de los desarrolladores.

El primer paso es crear una cuenta en el sitio https://travis-ci.com/. Se proporciona una función a los usuarios de GitHub, ya que se puede utilizar para la autenticación.

En la lista de repositorios, debe seleccionar aquel con el que se relacionará la integración continua y activar Travis haciendo clic en el botón Trigger a build.

Travis trabaja desde un solo archivo, llamado .travis.yml y ubicado en la raíz del proyecto Angular, lo que le permite definir todos los pasos que hay que realizar. Este archivo está escrito en YAML. Es un lenguaje más claro y legible que XML o CSV.

Travis inicia cada integración continua en una máquina nueva, completamente aislada e independiente. Por lo tanto, es necesario definir qué distribución de Linux se utilizará y si los derechos de superusuario serán esenciales o no. También necesita saber qué idioma se usa y qué comandos deben lanzarse.

1. Configuración

Como mínimo, un archivo .travis.yml para Angular se vería así:

## C:\ENI_Angular\PokemonManager\.travis.yml ##  
  
# Lenguaje de programación utilizado  
language: node_js  
# Version del lenguaje  
node_js:  
 - "13"  
  
# Distribución usada de Linux  
dist: trusty  
# ¿Debes ser superusuario para ejecutar...

Codacy

Codacy es una herramienta para asignar una nota a un proyecto alojado en GitHub. Detecta errores de estilo, duplicaciones y cobertura de escritura conjunta.

Soporta más de 20 lenguajes de programación y permite seguir la evolución del proyecto commit tras commit.

La integración de Codacy en un proyecto Angular se realiza en dos pasos:

integrar el complemento de GitHub en el proyecto,
registrarse en la web de Codacy y configurar el proyecto.

1. Plug-in GitHub

Después de autenticarse en GitHub, el marketplace está disponible en el panel superior. Una búsqueda rápida con Codacy como palabra clave encontrará el complemento. En la parte inferior, el botón Install it for free autoriza a Codacy a acceder a repositorios públicos.

2. codacy.com

Después de autenticarse en el sitio https://www.codacy.com/, aparece una lista de repositorios públicos disponibles y un simple clic en el botón Add agrega el repositorio a la lista de proyectos revisados de Codacy.

Tras unos momentos, se analiza el depósito y se proporciona el veredicto tan esperado.

Got 351 problemas, pero Codacy no tiene ninguno

La aplicación PokemonManager desarrollada en los capítulos anteriores tiene 351 errores y Codacy le otorgó una calificación de B. No está tan mal.

3. Configuración

Afortunadamente, la mayoría de los errores son errores de estilo. Además...

Firebase

Firebase es una plataforma desarrollada por Google que le permite configurar rápidamente un entorno de backend. El acceso a esta plataforma se realiza desde una API REST que está en constante evolución para satisfacer las necesidades de la aplicación frontend que lo solicita.

Tiene todas las herramientas necesarias para configurar una base de datos; autenticación, almacenamiento en la nube, aprendizaje automático, supervisión…

Aquí nos centraremos en la autenticación y el uso de la base de datos, que son los dos servicios más útiles, en nuestra opinión. Firebase es tan vasto que se necesitaría todo un libro para tratar de cubrir todas sus funciones.

1. Requisitos previos

El uso de la plataforma Firebase requiere la creación de una cuenta y un nuevo proyecto en la dirección: https://firebase.google.com/

Luego, debe agregar los paquetes firebase y @ angular/fire al proyecto Angular usando el administrador de paquetes npm.

npm install firebase @angular/fire --save

Finalmente, los módulos correspondientes deben agregarse al archivo principal de la aplicación app.module.ts.

// C:\ENI_Angular\PokemonManager\src\app-module.ts  
import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
  
// Módulos  
import { AppRoutingModule } from './app-routing.module';  
import { HttpClientModule } from '@angular/common/http';  
  
// FontAwesome  
import { FontAwesomeModule } from '@fortawesome/
angular-fontawesome';  
  
// Formularios  
import { FormsModule } from '@angular/forms';  
  
// Componentes  
import { AppComponent } from './app.component';  
import { GeneracionesComponent } from './components/  
generaciones/generaciones.component';  
import { PokemonsComponent } from './components/pokemons/  
pokemons.component';  
  
// locale: España  
import { LOCALE_ID } from '@angular/core';  
import { registerLocaleData } from '@angular/common';  ...

Código Konami

El código Konami es el código de trucos más famoso del mundo. En la cultura pop, escritores, guionistas, diseñadores de todos los ámbitos de la vida siguen refiriéndose a él.

Así, lo encontramos en el juego League Of Legends, en el manga Full Metal Alchemist, en el sitio web de Overwatch e incluso en Facebook y Discord.

Arriba, arriba, abajo, abajo, izquierda, derecha, izquierda, derecha, b, a

Muchos paquetes npm facilitan la instalación de este código de trucos en una aplicación Angular y actúan en consecuencia. El más simple es ngx-konami (https://github.com/lauthieb/ngx-konami).

Para instalarlo, simplemente use el administrador de paquetes en una terminal.

npm install --save ngx-konami

A continuación, el módulo se puede importar al módulo principal de un proyecto Angular.

// C:\ENI_Angular\PokemonManager\src\app-module.ts  
import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
  
// Módulos  
import { AppRoutingModule } from './app-routing.module';  
import { HttpClientModule } from '@angular/common/http';  
  
// Componentes  
import { AppComponent } from './app.component';  
import...

Herramientas complementarias