Cómo instalar y comenzar a trabajar en Senda

Vamos a dar las instrucciones para poder trabajar en el proyecto con el mínimo de instalaciones y permitiendo la convivencia con otros proyectos que necesiten distintas versiones de Angular o Ionic.

Instalar Visual Studio code

Recomendamos visual studio code para trabajar, aunque se pueden usar otros entornos de desarrollo.

https://code.visualstudio.com/Download

Instalar node

Node es el interprete de javascript. Lo usaremos para compilar la aplicación.

En lugar de descargar node como ejecutable, recomendamos descargar el fichero zip e instalarlo a mano: esto permite un control más fino y poder cambiar de versión de node sin requerir elevación de privilegios.

Así que descargamos el fichero zip en esta ubicación:

https://nodejs.org/en/download/prebuilt-binaries

Y lo descomprimimos y lo instalamos en una carpeta de nuestro disco duro:

Luego editaremos las variables de path de nuestro ordenador para añadir la ruta donde lo hemos instalado:

Comprobar que node está instalado

Abre una ventana de comandos y ejecuta ``ǹode```: deberás ver algo así:

C:\Users\Administrator>node
Welcome to Node.js v20.16.0.
Type ".help" for more information.
> 

Instalar git

https://git-scm.com/downloads

Descargamos el ejecutable e instalamos. Nosotros hemos contestado a todas las preguntas con el valor recomendado.

Clonamos el repositorio

Abrimos una linea de comandos y ejecutamos:

PS C:\>git clone https://github.com/djsordo/senda
PS C:\> cd senda
PS C:\senda> git config user.email "TU-CORREO-ELECTRONICO-AQUI"
PS C:\senda> git config user.name "TU-NOMBRE-AQUI"

Los comandos git config es porque esa información nos la solicitará la primera vez que hagamos un git push. Cuanto antes facilitemos un valor, mejor.

Opcional: podemos clonar también el proyecto wiki para mantener la documentación si queremos:

git clone https://github.com/djsordo/senda/wiki.git

Abrimos el proyecto con visual studio y npm install

Abrimos visual studio y abriremos el proyecto donde lo hayamos creado. En un terminal ejecutaremos:

PS C:\senda> npm install 

La carpeta scripts tiene también su propio node_modules, que precisará de su propia instalación:

PS C:\senda> cd scripts
PS C:\senda\scripts> npm install

Personalizamos y configuramos

En el proyecto hay una carpeta private que no es pública: no está en el repositorio. Esto es debido a que el repositorio es público y ciertas cosas, como contraseñas y datos de configuración, API keys y similares no pueden compartirse en datos públicos.

Dentro encontraremos dos carpetas:

• environments debe colocarse en SENDA_HOME\projects\mobile\src
• private debe colocarse en SENDA_HOME

Los ficheros environment.*.ts tienen las api keys para acceder a los servicios de firebase y son privadas. Se facilita un fichero environment.example.ts con el formato de lo que tiene que ir.

Configuraremos el fichero config.ps1

Este fichero configura el PATH para que podamos acceder a una serie de ficheros que vienen instalados como dependencias de desarrollo del proyecto: son ejecutables que se quedan instalados en el node_modules y que son necesarios para el proyecto.

Al instalarse localmente y no en la máquina, no interfiere con otros proyectos.

Total, que crea un fichero llamado config.ps1 con el siguiente contenido:

<#
    config.ps1
#>

function global:prompt {
    "[senda] $(get-location)> "
}

if( [string]::IsNullOrEmpty( $env:PROJECT_HOME ) ) {
    
    $env:PROJECT_HOME="c:\senda"

    $env:PATH="$env:PROJECT_HOME\node_modules\.bin;$env:PROJECT_HOME\node_modules\scripts:$env:PATH"

}

Cada vez que abramos visual studio code, hay que ejecutar este fichero config.ps1: configurará las rutas necesarias. A partir de ahora, cuando ejecutemos ionic encontrará el comando del proyecto y lo ejecutará.

PS C:\senda> . ./private/config.ps1
[senda] C:\senda >ionic serve
> ng.cmd run mobile:serve --host=localhost --port=8100

Nos logamos en firebase (necesario para hacer despliegues)

Tras ejecutar config.ps1 ya podemos acceder al comando firebase ya que ahora se encuentra dentro del propio proyecto. Vamos a ver la versión:

[senda] C:\senda> firebase --version 
11.30.0

y nos logamos:

[senda] C:\senda> firebase login --no-localhost

Y serguimos las instrucciones que nos solicitará.

Cómo será nuestro día a día en senda

Abriremos el proyecto en visual studio y cada vez que abramos un terminal ejecutaremos:

PS C:\senda> . .\private\config.ps1
[senda] C:\senda>

Ejecutar la aplicación en local

> ionic serve

O bien uno de estos tres comandos:

> ionic serve --configuration=development
> ionic serve --configuration=integration
> ionic serve --configuration=test

Trabajo con ramas en git

No vamos a complicarnos la vida con muchas ramas en git, pero una recomendación saludable es crearnos nuestra propia rama y trabajar en ella:

PS C:\senda> git branch mi_usuario
PS C:\senda> git checkout mi_usuario

Aquí la rama se llama mi_usuario.

Cuando tengamos un cambio listo, lo mejor es traernos las novedades que haya en la rama principal, para resolver posibles conflictos en nuestra rama:

PS C:\senda> git pull origin main

A partir de aquí podemos resolver todos los conflictos que se presenten y arreglar los errores que se nos presenten por los cambios que hayan hecho otros compañeros. Una vez que lo tengamos "fino", pasamos nuestro desarrollo a la rama principal:

PS C:\senda> git checkout main
PS C:\senda> git merge mi_usuario

En esta fase no se producirán errores, ya que los deberíamos haber resuelto en la fase anterior.

Y cuando estemos confortables, podemos subir a github de vuelta nuestros cambios:

PS C:\senda> git push origin main

volvemos a nuestra rama y vuelta a empezar:

PS C:\senda> git checkout mi_usuario

Acceso a la aplicación firebase

La aplicación de linea de comandos firebase está instalada como dependencia desarrollo. No hace falta instalarla en tu máquina.

Desplegar version web en desarrollo

[senda] C:\senda> .\scripts\deploy_web.ps1 desa
....
Project Console: https://console.firebase.google.com/project/sendaestadisticas-com-desa/overview
Hosting URL: https://sendaestadisticas-com-desa.web.app