Ionic: aplicació per saber l'hora de sortida/posta del sol (I)

Part I: Preparació

Per mostrar les excel·lències de Ionic, anem a fer una aplicació senzilla. En aquest cas, una que ens indiqui a quina hora surt i s'amaga el sol en un lloc determinat, en un dia determinat. Pot ser interessant per una sortida romàntica o en el seu defecte, per fotògrafs solitaris ;-)

Si no coneixeu Ionic o encara no l'heu instal·lat, podeu llegir el meu article al respecte.

En primer lloc, crearem l'aplicació partint d'una base que ja ens dona el propi Ionic. Per això fem:

$ ionic start SunriseSunset

Escollim la base 'tabs', indiquem que volem generar codi iOs/Android i comença la instal·lació. Quan ens pregunti si volem integrar l'aplicació amb Ionic Pro, li podem dir que no, de moment.

El resultat és un directori SunriseSunset ja preparat. Podem comprovar que tot ha anat bé amb:

$ cd SunriseSunset
$ ionic serve -c -s

Això compilarà l'aplicació i ens obrirà una finestra en el navegador per defecte. En el Chromium, obrim les "Eines per a desenvolupadors" i la barra de selecció de dispositius i se'ns mostrarà alguna cosa similar a:

Podem interactuar amb les icones tal com ho faríem en un dispositiu mòbil. També veurem els missatges que vagin apareixent en la consola, la qual cosa ens serà molt útil per depurar el codi, més endavant.

Si comprovem els missatges que ens ha donat durant la creació del directori font, podrem veure com ja està tot preparat per treballar amb el git (que és sistema de control de versions més utilitzat en l'actualitat). Per defecte està pensat per treballar amb Ionic Pro, però res no ens impedeix de fer-ho en el nostre compte personal a Github.

Primer hem de crear un repositori remot a Github i després associar-hi el nostre directori de treball. Ho podem fer seguint les indicacions de https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/ amb:

$ git config --global user.email "el_teu_correu@email.com"
$ git config --global user.name "El Teu Nom"
$ git config --global push.default simple
$ git commit -m "Ionic. Template tabs."
$ git remote add origin https://github.com/_usuari_/SunriseSunset.git
$ git push -u origin master

Tot seguit comprovem com el nostre repositori a Github ja conté el codi:

Per editar el codi, recomano el VisualStudioCode. És un editor lleuger que ens permetrà treballar sense distraccions i de forma eficient, amb compleció de codi, ajuda en línia i una multitud d'altres funcionalitats que anireu descobrint sobre la marxa.

En la imatge es pot veure l'estructura de fitxers del projecte (a l'esquerra) i el codi HTML modificat amb tags propis del Ionic.

Amb això acabem les tasques de preparació i ja ho tenim tot a punt per a implementar el que vulguem.

Ben aviat comprovarem el senzill que resulta fer l'aplicació que ens hem proposat. Serà en la segona part :-)

Seguiu l'evolució de l'aplicació:

• En la segona part crearem l'aplicació, fixant el lloc.
• En la tercera part afegirem geolocalització.
• En la quarta part afegirem un calendari.
• En la cinquena part afegirem Google Maps per triar el lloc.
• En la sisena part afegirem traduccions a diversos idiomes.
• En la setena part personalitzarem icones i tipus de lletra.