Primeros pasos PWA/Angular en Linux Mint

Esta entrada está dedicada a la instalación y primeros pasos para la creación de Progressive Web Apps con Angular en Linux Mint.

Instalación

Instalar node.js y npm

En una consola escribir:

$ sudo apt install nodejs npm

Visual Studio

Descargar e instalar la imagen .deb de Visual Studio (opcional, pero recomendable por el autocompletamiento y como novatos lo vamos a necesitar) de aquí. Si el instalador no se abre automáticamente, entonces en una consola escribir:

$ cd Descargas
$ sudo dpkg -i code_xxx_amd64.deb

Instalar Git

$ sudo apt install git gitk

Instalar Angular

En la consola escribir:

$ sudo npm install -g @angular/cli

Para verificar la correcta instalación de Angular debemos escribir en la consola:

$ ng --version

Workspace para nuestras pruebas

Crear una carpeta donde vamos a poner todos nuestros proyectos de prueba (el nombre puede ser cualquiera), y de preferencia hacerlo lo más cerca de nuestra raíz:

$ mkdir angular_ws

Creación de proyectos

Creando nuestro primer proyecto

Entramos a la carpeta angular_ws y creamos nuestro primer proyecto:

~$ cd angular_ws
~/angular_ws $ ng new prueba1

(He escrito la ruta antes del prompt ($) para saber dónde estamos y hacia dónde vamos.)

El comando ng NO debe ser ejecutado como root, y el nombre del proyecto puede ser el que queramos. Se nos van a preguntar dos cosas, contestar con y a Would you like to add Angular routing?, y en la siguiente pregunta Which stylesheet format would you like to use? moverse con las tecla de flecha hacia abajo para posicionarse en SCSS y dar Enter.

En este momento (3-sep-20) no tengo la más remota idea de lo que dichas opciones significan, algún día lo sabré, pero hoy así hay que hacerlo.

Angular usa Git para descargar sus cosas, así que debemos identificarnos en éste (Git). En este momento no es importante si lo saben usar o no, sólo hay que hacerlo. Primero entramos al directorio de nuestro proyecto prueba1 y luego escribimos nuestras credenciales:

~/angular_ws $ cd prueba1
~/angular_ws/prueba1 $ git config user.name "fjrg76"
~/angular_ws/prueba1 $ git config user.email "fjrg76@hotmail.com"

El nombre de usuario y correo electrónico es el que ustedes deseen.

En este punto el proyecto prueba1 ya está configurado y listo para usarse. Pero para ponerle algo de emoción vamos a ver si funciona correctamente. De hecho lo hace, pero es agradable verlo trabajando (aunque todavía no está en formato PWA). En la consola escribir el siguiente comando y esperar a que el proyecto se cargue en el navegador por defecto:

~/angular_ws/prueba1 $ ng serve -o

Aunque cerremos la pestaña recién abierta, la consola se queda clavada en el servidor, así que para volver al prompt y continuar con el resto de comandos deberemos presionar CTRL-C.

Convertir el proyecto a PWA

El siguiente paso es convertir (no sé si “convertir” sea la palabra correcta) el proyecto a PWA. Para ello deberemos ejecutar en la consola el siguiente comando:

~/angular_ws/prueba1 $ ng add @angular/pwa

Si supiera lo que estamos haciendo les platicaría lo que esté comando hizo, pero lo único que sé es que modificó algunos archivos del proyecto original y creó una carpeta dist/.

Para ver la estructura de archivos del proyecto pueden ejecutar un ls en la consola, pero también pueden hacerlo desde Visual Studio, que desde que lo instalamos no lo hemos usado. En el navegador de archivos de su distro Linux buscar la carpeta prueba1, dar click derecho con el ratón y escoger Abrir con -> Visual Studio. Visual Studio se abrirá apuntando al proyecto:

¡Ejecutando nuestra primer PWA!

Por fin podemos ejecutar nuestra primer PWA. Ni hace nada útil, ni sé porqué hace lo que hace, y tampoco se ve diferente de la que corrida de hace un momento, pero es tiempo de verla en ejecución. En la consola escribir:

~/angular_ws/prueba1 $ ng build --prod
~/angular_ws/prueba1 $ ng serve -o

PWA funcionando como PWA

Este paso sólo funciona en Chrome, por lo que si su navegador por defecto no es éste, entonces realizar lo necesario para abrirlo (tal vez hasta instalarlo), y una vez abierto escribir en una pestaña la dirección http://localhost:4200/

Una vez en la página hacer la combinación de teclas CTRL-SHIFT-I, buscar la opción Lighthouse en el panel que se abrió a la derecha, y generar un reporte (Generate report):

El reporte que yo obtuve es el siguiente:

Supongo que un performance de 22 no es bueno, pero ya veremos después la forma de mejorarlo. El objetivo de hoy fue instalar todo lo necesario para crear PWAs con Angular.

Palabras finales

Fue un gran paso llegar hasta aquí, y lo siguiente, por orden de dificultad es:

  1. Comenzar a hacer aplicaciones simples con formularios.
  2. Empezar a utilizar los sensores del teléfono celular.

Quedo al pendiente de sus comentarios.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s