2 d’abril del 2018

Electron: aplicacions d'escriptori amb tecnologia web

Darrerament, he publicat una sèrie d'articles sobre com fer una aplicació híbrida, per Android, iOS i web utilitzant typescript (javascript), html i CSS3.

En aquest article, veurem com amb aquesta mateixa base de codi podem construir també una aplicació d'escriptori gràcies a Electron. Bàsicament, el que fa és empaquetar l'aplicació Ionic que ja teníem per poder construir una aplicació d'escriptori, que s'executa sobre una pàgina Chrome personalitzada. La part bona és que Electron s'ocupa de tot, així que els canvis a fer són mínims.

Ho mostrarem amb l'aplicació per saber l'hora de sortida i posta del sol que vàrem fer pas a pas:

El codi de l'aplicació Ionic final està disponible en el Github: v1.0.

Per desgràcia, no hi ha encara una plantilla per a un projecte Electron amb Ionic. Hi ha informació diversa, però és difícil extreure'n el gra de la palla. A mi m'han servit molt els articles del bloc de Rob Ferguson. Tot seguit us resumeixo el procés d'adaptar una aplicació Ionic que ja tenim funcionant per afegir-hi Electron i poder generar una aplicació d'escriptori.

En primer lloc, instal·lem electron:
 npm install -g electron

Tot seguit creem un directori electron a l'arrel del projecte hi hi posem la pàgina principal d'electron, main.js, modificada per carregar l'aplicació Ionic:
const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');

// Module for file manipulations
const fs = require('fs');

// config json
let config_file = path.dirname(process.execPath)+'/config_keys.json';

if(!fs.existsSync(config_file)) {
   config_file = app.getAppPath()+'/config_keys.json';
}

const config = JSON.parse(fs.readFileSync(config_file, 'utf-8'));

process.env.GOOGLE_API_KEY = config.GOOGLE_API_KEY;  //  = "YOUR_API_KEY";

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 1024, height: 768});

  // and load the index.html of the app.
  const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '/../www/index.html'),
    protocol: 'file:',
    slashes: true
  });

  mainWindow.loadURL(startUrl);
  // mainWindow.loadURL("http://localhost:8100");

  // Open the DevTools.
  // mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
});

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

El contingut és bàsicament el d'un projecte inicial d'Electron. Els canvis que s'han fet són:
  • [10-22] Es llegeix un fitxer de configuració config_keys.json que inclou el codi de la clau de Google per a les API de les aplicacions de Maps i Geolocation. Sense aquesta clau, l'aplicació d'escriptori no té permisos per utilitzar geolocalització.
  • [32-37] S'indica a Electron d'on ha de carregar la pàgina inicial. Justament és la de l'aplicació Ionic.
El fitxer de claus config_keys.json es guarda a l'arrel del projecte, i el seu contingut serà com segueix (lògicament, canviant la clau per una de bona):
 {
 "GOOGLE_API_KEY": "You_API_Key_here" 
 }

Al fitxer src/index.html d'Ionic eliminem la referència a cordova.js, que no és necessària en una aplicació d'escriptori:
  <!-- cordova.js required for cordova apps (remove if not needed)
  <script src="cordova.js"></script>
 -->

Finalment, editem el package.json per afegir-hi les noves dependències i instruccions de com treballar amb electron:
 {
  ...
  "scripts": {
    ...
    "start": "ionic serve --no-open",
    "electron": "electron .",
    "dist": "electron-builder",
    ...
  },
  ...
  "devDependencies": {
    "@angular/cli": "^1.5.4",
    "@angular/router": "^5.0.3",
    "@ionic/app-scripts": "3.1.8",
    "@types/node": "^8.0.53",
    "concurrently": "^3.5.0",
    "electron": "^1.7.9",
    "electron-builder": "^19.45.1",
    "ionic-mocks": "^1.0.4",
    "typescript": "2.4.2",
    "wait-on": "^2.0.2"
  },
  "config": {
    "ionic_source_map_type": "source-map"
  },
  "main": "electron/main.js",
  "build": {
    "appId": "com.blogspot.anomenaidesa.sunsetsunrise",
    "files": [
      "electron/main.js",
      "www/**/*"
    ],
    "extraFiles": [
      "config_keys.json"
    ],
    "mac": {
      "category": "productivity"
    },
    "linux": {
      "category": "Utility"
    }
  },
  ...
 }

Ara només ens cal instal·lar les dependències amb:
 npm install

I provar l'aplicació executant primer en un terminal:
 npm start

I, quan acabi de preparar l'aplicació, en un altre terminal:
 npm run electron

Un cop comprovat que obtenim el mateix funcionament que abans amb Ionic, ja podem generar l'aplicació d'escriptori. És tan senzill com fer:
 npm run dist

En Linux, el resultat és una aplicació distribuïble, SunriseSunset-1.1.0-x86_64.AppImage, que encapsula totes les dependències i que es pot executar directament. El resultat és el següent:

 
Tal com es pot veure, té l'aspecte natiu d'una aplicació Ubuntu i el funcionament és idèntic al que teníem en l'aplicació Ionic original.

Noteu com una mateixa base de codi typescript/html/css3 permet generar aplicacions mòbils, web i d'escriptori. Si no necessitem les prestacions addicionals d'una aplicació nativa, la flexibilitat d'aquesta proposta resulta extremadament atractiva, no us sembla?

Com sempre, si voleu practicar, teniu el codi final a la vostre disposició en el meu Github: v1.1.0.

De fet, fins i tot podeu descarregar i provar directament l'aplicació d'escriptori: SunriseSunset-1.1.0-x86_64.AppImage (per Ubuntu, Debian o altres variants compatibles).

Ja em comentareu què us ha semblat !

29 de març del 2018

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

Part VII: Personalització d'icones i tipus de lletra

Aquest article ens mostrarà com canviar el tipus de lletra que utilitza una aplicació i com afegir icones personalitzades.

Fins ara hem fet una aplicació per saber l'hora de sortida i posta del sol:
Ara anem a personalitzar-la una mica, amb icones i tipus de lletra diferents.

Comencem pel tipus de lletra. En tenim moltes de disponibles a Google fonts. N'escollim una que s'ajusti a les necessitats (Poppins en el nostre cas) i descomprimim els fitxer *.ttf a assets/fonts. Tot seguit declarem la nova font i la posem per defecte, editant el fitxer theme/variables.scss per afegir:
 ...
 // Fonts
 // --------------------------------------------------

 //@import "roboto";
 //@import "noto-sans";

 @font-face {
  font-family: "Poppins";
  //font-style: normal;
  //font-weight: 400;
  src:  url($font-path+'/Poppins-Regular.ttf');
 }
 @font-face {
  font-family: "Poppins";
  src:  url($font-path+'/Poppins-Bold.ttf');
  font-weight: bold;
 }
 @font-face {
  font-family: "Poppins";
  src: url($font-path+'/Poppins-Italic.ttf');
  font-style: italic;
 }
 @font-face {
  font-family: "Poppins";
  src: url($font-path+'/Poppins-BoldItalic.ttf');
  font-weight: bold;
  font-style: italic;
 }

 $font-family-base: "Poppins";

 $font-family-md-base: "Poppins";
 $font-family-ios-base: "Poppins";
 $font-family-wp-base: "Poppins";

Pel que fa a les icones, si n'hem d'utilitzar moltes seria convenient declarar un nou tipus de lletra, però si són poques, és molt molt senzill afegir-les directament. Per això, escollim icones lliures, per exemple a Flaticon, procurant que siguin d'un sol color i en format SVG. Llavors les afegim a app/app.scss:
 ...
 // --- Custom icons -------------------------------------------------------------------
 //
 // https://stackoverflow.com/a/44575053/1581368
 // To generate a font : https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/
 ion-icon {
    &[class*="custom-"] {
        // Instead of using the font-based icons we're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="custom-sunrise"] {
        mask-image: url(../assets/icon/sunrise.svg);
    }
    &[class*="custom-sunset"] {
        mask-image: url(../assets/icon/sunset.svg);
    }
 }

I llavors ja els podem utilitzar normalment a home.html:
 ...
    <ion-item-divider color="light">
      {{ "APP.timetable" | translate }}
    </ion-item-divider>
    <ion-item>
      <ion-icon name="custom-sunrise" color="orange" item-left></ion-icon>
      <ion-note item-right>{{ sunrise }}</ion-note>
    </ion-item>
    <ion-item>
      <ion-icon name="custom-sunset" color="blue" item-left></ion-icon>
      <ion-note item-right>{{ sunset }}</ion-note>
    </ion-item>
 ...

El resultat es pot veure a continuació:

Observem en el lateral com s'ha carregat correctament el fitxer de fonts (les versions normal i negreta, que són les que s'utilitzen).

I d'aquesta manera tan senzilla podem donar-li un aspecte més polit a una aplicació. Per acabar-ho d'arrodonir, completem la pàgines de contacte, de crèdits i afegim informació al repositori de Github (en el fitxer README.md).

Com sempre, teniu tot el codi a la vostre disposició en el Github: v1.0.

I amb aquests retocs finals podem donar l'aplicació per completada. Espero que hagi resultat útil. Si teniu alguna idea per millorar-la, traduccions a altres idiomes o qualsevol comentari, no dubteu a comentar/contactar.

24 de març del 2018

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

Part VI: Traducció a diversos idiomes

Aquest article ens mostrarà com permetre diversos llenguatges en la nostre aplicació.

Fins ara hem fet una aplicació per saber l'hora de sortida i posta del sol:
Per introduir la possibilitat d'utilitzar diversos idiomes, utilitzarem el paquet ngx-translate. En primer lloc l'instal·lem:
 npm install @ngx-translate/core --save
 npm install @ngx-translate/http-loader --save

Seguint les instruccions d'ús, afegim a app.module.ts els mòduls i serveis necessaris:
 ...
 import { SplashScreen } from '@ionic-native/splash-screen';
 
 // ngx-translate
 import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';

 import { HttpClientModule, HttpClient } from '@angular/common/http';
 ...
 import { LangService } from '../providers/lang-service';

 // Translations
 export function createTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }
 
 @NgModule({
   ...
   imports: [
     ...
     CalendarModule,
     TranslateModule.forRoot({
       loader: {
           provide: TranslateLoader,
           useFactory: (createTranslateLoader),
           deps: [HttpClient]
       }
     }),
     IonicModule.forRoot(MyApp)
   ],
   ...
   providers: [
     ...
     Network,
     LangService
   ]
 })
 ...

Observem com hem utilitzem un servei LangService per gestionar la detecció de l'idioma i el canvi de llenguatge. Per això creem un fitxer providers/lang-service.ts amb el següent contingut:
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { TranslateService } from '@ngx-translate/core';

 @Injectable()
 export class LangService {
  onLang : BehaviorSubject = new BehaviorSubject("");

  lang_sets : Array = [];

  constructor(public translate: TranslateService) {
    console.log('### LangService');
  }

  init(lang_default: string, lang_sets: Array, lang_fallback?: string) {
    // Verify that some sets are present
    if(lang_sets.length==0) {
      console.error("[LangService] error: no lang_sets defined");
      return;
    } else {
      this.lang_sets = lang_sets;
    }

    // Verify default is present in lang_sets
    if(this.lang_sets.indexOf(lang_default) == -1) {
      console.log("[LangService] Warning: trying to use default lang '"+
                   lang_default+"' which is not present in lang_sets");
      console.log("[LangService] Warning: setting default to first" 
                   "language in set");
      lang_default = this.lang_sets[0];
    }

    // this language will be used as a fallback when a translation 
    // isn't found in the current language
    if(!lang_fallback) lang_fallback = lang_default;

    this.translate.setDefaultLang(lang_fallback);

    let langRegex = new RegExp(this.lang_sets.join("|"), 'gi');

    // get browser language by default
    let userLang = navigator.language.split('-')[0];
    userLang = langRegex.test(userLang) ? userLang : lang_default;

    this.setLanguage(userLang);
    // ----------------------------------------------------------------    
  }

  getCurrentLang() {return this.translate.currentLang};

  setLanguage(lang: string) {
    // Verify default is present in lang_sets
    if(this.lang_sets.indexOf(lang) == -1) {
      console.log("[LangService] Warning: trying to use lang '"+lang+
                  "' which is not present in lang_sets");
      return;
    }

    // the lang to use, if the lang isn't available, it will use 
    // the current loader to get them
    this.translate.use(lang);        
    console.log("[LangService] Using language: "+
                 this.translate.currentLang);

    // Inform to all subscriptors
    this.onLang.next(lang);
  }
 }

Observem com el servei:
  • [8] Declara un BehaviorSubject onLang que permetrà notificar un canvi d'idioma a la resta de l'aplicació.
  • [16-48] La funció init permet indicar quin idioma s'utilitza per defecte en l'aplicació (lang_default), el conjunt de llenguatges possibles (lang_sets), i quin és el llenguatge que s'utilitzarà si una traducció no existeix en un idioma (normalment, serà el llenguatge que utilitza com a primari el programador). La funció fa comprovacions d'errors i llavors estableix com a llenguatge per defecte a usar, el que tingui definit l'usuari en el seu dispositiu/navegador.
  • [50] La funció getCurrentLang simplement retorna el llenguatge actualment actiu en l'aplicació.
  • [52-68] La funció setLanguage estableix el llenguatge a utilitzar en l'aplicació, si existeix en el conjunt de disponibles. En cas contrari, agafa el que hi hagi per defecte en l'aplicació.

Aquest servei s'inicialitza a app.component.ts:
 ...
 import { LangService } from '../providers/lang-service';
 ...
  constructor( ..., langService : LangService ) 
  {
     platform.ready().then(() => {
       ...
       langService.init("en", ["en", "ca"]);
     });
   }
 ...

Podem veure com l'aplicació estarà en anglès i català. Per això, cal posar els fitxers d'idioma a assets/i18n/ca.json i assets/i18n/es.json. El nom es correspon al codi d'idioma i el contingut és un JSON senzills amb les traduccions. Per exemple, pel català:
 {
 "APP.title": "Sortida/posta de Sol",
 "APP.place": "Lloc",
 "APP.lat": "Latitud",
        ...
 }

Ara el que ens queda és utilitzar les traduccions en els missatges del programa, i permetre el canvi d'idioma. Modificarem la pàgina home.html:

 <ion-header>
  <ion-navbar>
    <ion-title>{{ "APP.title" | translate }}</ion-title>
  </ion-navbar>
 </ion-header>

 <ion-content padding>
  <ion-list>
    <ion-item-divider color="light">
      {{ "APP.language" | translate }}
    </ion-item-divider>
    <ion-item>
      <ion-label>{{ "APP.lang-current" | translate }}</ion-label>
      <ion-select [(ngModel)]="lang" (ionChange)="doChangeLang()" item-right>
        <ion-option value="ca">Català</ion-option>
        <ion-option value="en">English</ion-option>
      </ion-select>              
    </ion-item>
    ...

Observem que:
  •  [3, 10, 13] S'han canviat els missatges de text pel seu identificador en el fitxer d'idioma i demanant la seva traducció.
  • [14-17] S'ha afegit una opció de canvi d'idioma que crida la funció doChangeLang().

La funció doChangeLang() s'implementa a home.ts, que s'ha modificat de la següent manera:
 ...
 import {TranslateService} from '@ngx-translate/core';
 import { LangService } from '../../providers/lang-service';
 ...
   constructor(  ...,
                 public translate: TranslateService,
                 public langService : LangService,  
               )
   ...
   ionViewDidLoad() {
     ...
     this.dateMsg = "APP.today";

     this.langService.onLang.subscribe(lang=> {
       this.lang = this.translate.currentLang;
       console.log("[HomePage] Current lang: "+this.lang);
       moment.locale(this.lang);  
     });
   }
 
   selectDate() {
     const options: CalendarModalOptions = {
       title: this.translate.instant("APP.date-choose"),
       canBackwardsSelected: true,
       closeLabel: this.translate.instant('APP.Cancel'),
       doneLabel: this.translate.instant('APP.Done'),
     ...
   }
   ...
   doChangeLang() {
     this.langService.setLanguage(this.lang);
   }
 }

On podem veure com:
  • Assignem codis de traducció (p.e. a dateMsg) per mostrar-los traduïts en un html.
  • Utilitzem this.translate.instant() per traduir directament.
  • Es crida al servei langService per canviar l'idioma globalment.
  • Ens subscribim a langService.onLang per canviar el format del dia/hora segons el llenguatge actual.
També cal modificar location-select.html per traduir els missatges, tal com ho hem fet amb home.html.

Però la part més delicada és modificar l'idioma de GoogleMaps. El llenguatge es fixa en crear el mapa, i fins on jo sé, l'API no permet canviar-lo després. Per això, ha calgut modificar el codi de google-maps-service.ts de la següent manera:

 ...
 import { LangService } from '../providers/lang-service';
 ...
  constructor(  ...,
                 public langService : LangService,  
               ) 
  {
     this.langService.onLang.subscribe(lang=> {
       if(this.googleMapScriptElement) {
         console.log("[GoogleMapsService] Current lang: "+lang);
 
         this.updateScriptSrc();
       }
     });
  }
  ... 
  updateScriptSrc() {
    let lang = this.langService.getCurrentLang();

    console.log("[GoogleMapsService].updateScriptSrc with lang: "+lang);
    
    if(this.googleMapScriptElement) {
      let head = document.getElementsByTagName('head')[0];
      let scripts = Array.prototype.slice.call(head.getElementsByTagName('script'));
      let styles = Array.prototype.slice.call(head.getElementsByTagName('style'));

      scripts.forEach(s=> {
        if(s.src.indexOf("://maps.google") != -1) head.removeChild(s);
        else if(!s.src || s.src.indexOf("cordova.js") != -1 || 
                          s.src.indexOf("ion-dev.js") != -1) {}
        else console.log("Skip removing <script src='"+s.src+"'");
      });
      styles.forEach(s=> {
        if(s.textContent.indexOf(".gm-style") != -1) head.removeChild(s);
        else console.log("Skip removing <style>", s);
      });
      document.body.removeChild(this.googleMapScriptElement);
    }

    let script = document.createElement("script");
    script.id = "googleMaps";

    if(this.apiKey){
      script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + 
                   '&callback=mapInit&libraries=places&language='+lang;
    } else {
      script.src = 'http://maps.google.com/maps/api/js?callback=mapInit&'
                            'amp;libraries=places&language='+lang;       
    }    

    this.googleMapScriptElement = document.body.appendChild(script);
  }
  ...

Bàsicament, importem el LangService per subscriure'ns al canvi d'idioma. Quan es produeix, s'actualitza GoogleMaps, eliminant els scripts i estils que afegeix i recreant el mapa amb el nou llenguatge.

Amb tot plegat, podem veure el resultat en la imatge:



Podem observar en la consola els missatges del LangService quan es detecta l'idioma i quan es canvia. També el nou control per canvi d'idioma en la pantalla.

Si ens fixem en la consola, podem veure que la recreació del mapa de GoogleMaps no és del tot perfecte. Tot i eliminar els scripts i estils per evitar duplicats, probablement encara queda alguna cosa que és detectada en carregar el nou mapa. A la llarga, això aniria consumint memòria, però tampoc no canviarem d'idioma constantment, no?

Com sempre, teniu tot el codi a la vostre disposició en el Github: v0.5 (amb traducció a diversos idiomes).

Ara ja tenim una aplicació funcional i en diversos idiomes, però podem fer-hi encara alguns canvis estètics, amb icones personalitzades i tipus de lletra diferents; i finalment, no oblidem completar el projecte donant les dades de contacte i afegint-hi una pàgina per donar crèdit als projectes i persones que l'han fet possible.

Seguiu l'evolució de l'aplicació:

14 de març del 2018

Múltiples espais de treball (escriptoris) a Ubuntu

Fa temps que m'he acostumat a treballar amb múltiples espais de treball (escriptoris). En concret, jo utilitzo una configuració de 2x4.

Normalment, ho configuro amb alguna aplicació, però sempre em costa trobar el lloc concret on es defineix. Així que he buscat com fer-ho usant la línia de comanda i aquí teniu la solució:
 $ gsettings set \
   org.compiz.core:/org/compiz/profiles/unity/plugins/core/ vsize 2
 $ gsettings set \
   org.compiz.core:/org/compiz/profiles/unity/plugins/core/ hsize 4

I el resultat:

Observeu al centre l'intercanviador d'escriptoris de 2x4 !!

Fàcil i ràpid, eh?

7 de març del 2018

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

Part V: Versió amb Google Maps

Aquest article ens mostrarà com utilitzar Google Maps per escollir el lloc en l'aplicació per saber l'hora de sortida i posta de sol.

Fins ara hem vist:

Ara utilitzarem Google Maps per poder escollir el lloc. Tot i que hi ha molta informació sobre com utilitzar Google Maps, la informació sol estar incompleta o no acabar-se d'adaptar a les nostres necessitats concretes.

En general, una de les meves primeres fonts d'informació són els articles de Josh Morony. Són acurats i força actualitzats. Tota una referència. I just podem trobar-hi el que busquem: "com fer una pàgina de selecció de lloc amb Google Maps i Ionic". Seguirem el tutorial i fem els canvis necessaris per afegir la funcionalitat a la nostra aplicació.

Afegim el mòdul de xarxa, que permetrà verificar quan tenim connexió de dades, i les definicions de tipus per Google Maps:
 $ ionic cordova plugin add cordova-plugin-network-information
 $ npm install --save @ionic-native/network
 $ npm install @types/google-maps --save

Seguint el tutorial, afegim la pàgina nova (LocationSelect) i els nous proveïdors a app.module.ts:
 ...
 import { CalendarModule } from "ion2-calendar";
 import { LocationSelect } from '../pages/location-select/location-select';
 import { Connectivity } from '../providers/connectivity-service';
 import { GoogleMapsService } from '../providers/google-maps-service';
 import { Network } from '@ionic-native/network';
 ...
  declarations: [
    ...
    HomePage,
    LocationSelect,
    TabsPage
  ],
  ...
  entryComponents: [
    ...
    HomePage,
    LocationSelect,
    TabsPage
  ],
  providers: [
    ...
    Geolocation,
    Connectivity,
    GoogleMapsService,
    Network
  ]
 ...

Ara afegim les pàgines dels proveïdors de servei, segons el tutorial. En primer lloc, providers/connectivity-service.ts:
 import { Injectable } from '@angular/core';
 import { Network } from '@ionic-native/network';
 import { Platform } from 'ionic-angular';

 @Injectable()
 export class Connectivity {
  onDevice: boolean;

  constructor(public platform: Platform, public network: Network) {
    this.onDevice = this.platform.is('cordova');
  }

  isOnline(): boolean {
    if(this.onDevice && this.network.type){
      return this.network.type != 'none';
    } else {
      return navigator.onLine; 
    }
  }

  isOffline(): boolean {
    if(this.onDevice && this.network.type){
      return this.network.type == 'none';
    } else {
      return !navigator.onLine;   
    }
  }

  watchOnline(): any { return this.network.onConnect(); }
  watchOffline(): any { return this.network.onDisconnect(); }
 }

I tot seguit, providers/google-maps-service.ts:
 import { Injectable } from '@angular/core';
 import { Connectivity } from './connectivity-service';
 import { Geolocation } from '@ionic-native/geolocation';

 @Injectable()
 export class GoogleMapsService {
  mapElement: any;
  pleaseConnect: any;
  map: any;
  mapInitialised: boolean = false;
  mapLoaded: any;
  mapLoadedObserver: any;
  currentMarker: any;
  apiKey: string; //  = "YOUR_API_KEY";
  lat: number = null;
  lon: number = null;

  constructor( public connectivityService: Connectivity, 
               public geolocation: Geolocation ) 
  {
  }

  init( mapElement: any, pleaseConnect: any, 
        lat: number, lon: number 
       ): Promise 
  {

    this.mapElement = mapElement;
    this.pleaseConnect = pleaseConnect;
    this.lat = lat;
    this.lon = lon;

    return this.loadGoogleMaps();
  }

  loadGoogleMaps(): Promise {
    return new Promise((resolve) => {
      if(typeof google=="undefined" || typeof google.maps=="undefined") {
        console.log("Google maps JavaScript needs to be loaded.");
        this.disableMap();

        if(this.connectivityService.isOnline()){
          window['mapInit'] = () => {
            this.initMap().then(() => {
              resolve(true);
            });

            this.enableMap();
          }

          let script = document.createElement("script");
          script.id = "googleMaps";

          if(this.apiKey){
            script.src = 'http://maps.google.com/maps/api/js?key=' + 
                       this.apiKey + '&callback=mapInit&libraries=places';
          } else {
            script.src = 'http://maps.google.com/maps/api/js' + 
                                     '?callback=mapInit&libraries=places';       
          }

          document.body.appendChild(script);  
        } 
      } else {
        if(this.connectivityService.isOnline()){
          this.initMap();
          this.enableMap();
        } else {
          this.disableMap();
        }

 resolve(true);
      }

      this.addConnectivityListeners();
    });
  }

  initMap(): Promise {
    this.mapInitialised = true;

    return new Promise((resolve) => {
      if(this.lat && this.lon) {
        this.initMapPos(this.lat, this.lon);
        resolve(true);

      } else {
        this.geolocation.getCurrentPosition().then((pos) => {
          this.initMapPos(pos.coords.latitude, pos.coords.longitude);
          resolve(true);

        }).catch((error) => {
          console.log('Error getting location'+JSON.stringify(error));
          return Promise.reject("Unable to get location");
        });
      }
    });
  }

  initMapPos(lat: number, lon: number) {
    let latLng = new google.maps.LatLng(lat, lon);
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement, mapOptions);
  }

  disableMap(): void {
    if(this.pleaseConnect){
      this.pleaseConnect.style.display = "block";
    }
  }

  enableMap(): void {
    if(this.pleaseConnect){
      this.pleaseConnect.style.display = "none";
    }
  }

  addConnectivityListeners(): void {
    this.connectivityService.watchOnline().subscribe(() => {
      setTimeout(() => {
        if(typeof google=="undefined" || typeof google.maps=="undefined") {
          this.loadGoogleMaps();
        } else {
          if(!this.mapInitialised) {
            this.initMap();
          }
          this.enableMap();
        }
      }, 2000);
    });

    this.connectivityService.watchOffline().subscribe(() => {
      this.disableMap();
    });
  }
 }

En aquest fitxer hem fet alguns canvis:
  • [6] Hem canviat el nom de la classe a GoogleMapsService.
  • [14] Hem eliminat l'apiKey. Se n'hauria de generar una per poder-la utilitzar en l'aplicació però, per fer proves, podem treballar sense.
  • [15-16] Declarem les variables per poder inicialitzar el mapa a partir d'una posició concreta, enlloc de la posició del nostre dispositiu.
  • [24-31] Afegim paràmetres per la posició desitjada a la funció init i els traslladem als corresponents camps de la classe. 
  • [59] Hem afegit el paràmetre que faltava a la petició: '&libraries=places'.
  • [79-109] En la funció initMap, utilitzem la posició obtinguda durant la inicialització, o si està buida, usem el servei de geolocalització. També hem separat el codi d'inicialització de Google Maps en una nova funció initMapPos per no repetir codi.

Pel que fa a la pàgina LocationSelect, el fitxer d'estils location-select/location-select.scss no s'ha modificat, en el fitxer location-select/location-select.html només s'han traduït els textos al català, i el fitxer controlador location-select/location-select.ts s'ha modificat per poder passar la localització actual al servei GoogleMapsService:
 ...
 import { NavParams } from 'ionic-angular';
 import { GoogleMapsService } from '../../providers/google-maps-service';
 ...
 export class LocationSelect {
    ...
    location: any; 
    lat: number = 42.582104;
    lon: number = 1.0008419;
  
    constructor( public navCtrl: NavController, 
   public params: NavParams,
   public maps: GoogleMapsService, 
   public platform: Platform, 
   public geolocation: Geolocation, 
   public viewCtrl: ViewController) 
    {
      this.searchDisabled = true;
      this.saveDisabled = true;

      this.lat = params.get('lat');
      this.lon = params.get('lon');
    }

    ionViewDidLoad(): void {
      this.maps.init( this.mapElement.nativeElement, 
                      this.pleaseConnect.nativeElement, 
                      this.lat, this.lon).then(() => {
        this.autocompleteService = 
               new google.maps.places.AutocompleteService();
 this.placesService = 
               new google.maps.places.PlacesService(this.maps.map);
 this.searchDisabled = false;
      }); 
    }
    ...

On:
  • [2] S'ha afegit la classe NavParams per poder passar paràmetres a la pàgina.
  • [8-9] S'han afegit membres a la classe per a guardar la posició inicial.
  • [12] S'utilitza el controlador NavParams en la classe, per a rebre els paràmetres.
  • [21-22] Es llegeixen i es guarden els paràmetres relacionats amb la posició.
  • [28] Els paràmetres de la posició s'utilitzen en la crida init del servei GoogleMapsService.

I finalment només ens queda modificar la pàgina HomePage per afegir la funcionalitat. En el controlador home.ts:
 ...
 import { LocationSelect } from '../location-select/location-select';
 ...
 export class HomePage {
  ...
  launchLocationPage() {
    let modal = this.modalCtrl.create( LocationSelect,
                                       {lat: this.lat, lon: this.lon});
    modal.onDidDismiss((location) => {
      if(location) {
        console.log("Nou lloc: ", location);
        
        this.lat = location.lat;
        this.lon = location.lng;
        this.posMsg = location.name;
        this.posError = false;
        this.getSunriseSunsetFromApi();
      }
    });

    modal.present(); 
  }
 }

Hem afegit:
  • [2] La importació de la nova pàgina per a seleccionar el lloc.
  • [6-22] La funció launchLocationPage per mostrar la finestra de selecció de lloc. Observem com passem els paràmetres de la posició actual a la nova pàgina [8], i com s'actualitzen les dades i missatges en cas d'haver escollit un lloc, en el retorn de la pàgina [13-17].

En la part de visualització home.html, simplement activem la crida a la funció anterior:
  ...
  <ion-item color="light" *ngIf="posError" (click)="launchLocationPage()">
    <h2 text-wrap>No s'ha pogut obtenir la posició actual.</h2>
    <p text-wrap>Verifica el GPS i/o els permisos.</p>
    <ion-icon name="warning" color="danger" item-left></ion-icon>
  </ion-item>
  <ion-item (click)="launchLocationPage()">
    <ion-label>Latitud</ion-label>
    <ion-note item-right>{{ lat | number: "1.1-7" }}</ion-note>
  </ion-item>
  <ion-item (click)="launchLocationPage()">
    <ion-label>Longitud</ion-label>
    <ion-note item-right>{{ lon | number: "1.1-7" }}</ion-note>
  </ion-item>
  ...

I ja ho tenim tot a punt ! Provem de seguida la nova funcionalitat:

Podem veure com el mapa s'obre en una nova finestra superposada, si té prou espai, i com permet escollir un lloc, auto-completant les opcions. En escollir-ne una, el mapa es posició en ella i, en guardar-la, s'utilitza per calcular les hores de sortida/posta del sol en la nostra aplicació:

Podem veure en la consola l'objecte retornat pel servei de Google Maps. Les seves propietats s'utilitzen per actualitzar les dades en la pàgina principal.
Com sempre, teniu tot el codi a la vostre disposició en el Github: v0.4 (amb Google Maps).

Ara ja tenim una aplicació funcional, però encara la podem completar en alguns aspectes. Per exemple, podríem afegir-hi traducció a diversos idiomes; també es poden fer alguns canvis estètics, amb icones personalitzades i tipus de lletra diferents; i finalment, completar el projecte donant les dades de contacte i afegint una pàgina per donar crèdit als projectes i persones que l'han fet possible.

Seguiu l'evolució de l'aplicació:

2 de març del 2018

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

Part IV: Versió amb calendari

Aquest article ens mostrarà com afegir un calendari per escollir el dia en l'aplicació per saber l'hora de sortida i posta de sol.

Fins ara hem vist:

Ara afegirem un calendari senzill per poder escollir el dia. Tenim diferents opcions de calendari per Ionic i Angular. Si no necessitem res molt especial, el millor sol ser anar per una opció que estigui actualitzada, ben documentada i, si pot ser, amb una demostració que permeti veure bé la seva funcionalitat.

Afegim el mòdul de calendari ion2-calendar, que sembla complir tot l'anterior, al projecte. Escollim aquest perquè permet obrir una finestra per escollir la data:
 $ npm install ion2-calendar moment --save

Seguint la documentació, afegim el mòdul a app.module.ts:
 ...
 import { CalendarModule } from "ion2-calendar";
 ...
  imports: [
    BrowserModule,
    HttpClientModule,
    CalendarModule,
    IonicModule.forRoot(MyApp)
  ],
 ...
Ara implementem la funcionalitat desitjada en la pàgina home.ts:
import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Geolocation } from '@ionic-native/geolocation';
import { CalendarModal, 
         CalendarModalOptions, 
         CalendarResult 
       } from "ion2-calendar";
import * as moment from 'moment';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  API: string = "https://api.sunrise-sunset.org/json";
  
  // Estany de Sant Maurici
  lat: number = 42.582104;
  lon: number = 1.0008419;

  sunrise : string;
  sunset : string;

  date : Date = new Date();
  dateMsg: string = "Avui";
  posMsg : string;
  posError : boolean = false;

  constructor(  public http: HttpClient,
                private geolocation: Geolocation,
                public modalCtrl: ModalController
  )
  {
    moment.locale('ca-ES');
  }

  ionViewDidLoad() {
    this.geolocation.getCurrentPosition().then((answer) => {
      this.lat = answer.coords.latitude;
      this.lon = answer.coords.longitude;
      this.posMsg = "Posició actual";
      this.getSunriseSunsetFromApi();

    }).catch((error) => {
       console.log('Error getting location', error);
       this.posMsg = "Per defecte";
       this.posError = true;
       this.getSunriseSunsetFromApi();
     });
  }

  selectDate() {
    const options: CalendarModalOptions = {
      title: 'Escull la data',
      canBackwardsSelected: true,
      closeLabel: "Cancel·lar",
      doneLabel: "Fet",
      weekdays: moment.weekdaysShort(),
      weekStart: 1,
    };
    let myCalendar =  this.modalCtrl.create(CalendarModal, {
      options: options
    });

    myCalendar.present();

    myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
      if(date) {
        console.log(date);
        this.date = date.dateObj;
        this.dateMsg = this.date.toLocaleDateString("ca-ES");
        this.getSunriseSunsetFromApi();
      }
    });
  }

  getSunriseSunsetFromApi() {
    let data = {  lat: this.lat.toString(), 
                  lng: this.lon.toString(),
                  formatted: "0",
                  date: this.date.toISOString().slice(0,10)
                };
    console.log("Calling API with date= "+data.date);

    const params = new HttpParams({fromObject: data});
    const headers = new HttpHeaders().set("Accept", "application/json");
    let options = {headers: headers, params: params, withCredentials: false};

    this.http.get(this.API, options).subscribe(answer => {
      if (answer['status']=="OK") {
        let date_options = {hour: "2-digit", minute: "2-digit"};

        this.sunrise = new Date(answer['results'].sunrise)
                                .toLocaleTimeString("ca-ES", date_options);
        this.sunset = new Date(answer['results'].sunset)
                                .toLocaleTimeString("ca-ES", date_options);
      }
    },
    err => console.log(err)
    );    
  }
}

Observem les modificacions que hi hem fet:
  • [6-10] Importem les classes necessàries pel calendari.
  • [26-27] Declarem noves variables per la data escollida.
  • [33] Afegim el controlador Modal de Ionic per poder obrir el calendari en una finestra.
  • [36] Indiquem el llenguatge a utilitzar per a mostrar dates en el calendari.
  • [54-77] Declarem una nova funció selectDate, que ens permet obrir el calendari per escollir la data i assignar-la a les variables que hem declarat. Aquesta funció es cridarà a partir de la interfície d'usuari, com veurem en el codi de home.html. Els paràmetres de configuració del calendari els hem obtingut de la documentació del mòdul. A l'exemple de codi que es presenta en la documentació simplement hi hem afegit l'assignació a les variables i la crida a l'API.
  • [83] S'ha afegit un nou paràmetre a l'hora de cridar l'API per tal d'utilitzar la data seleccionada enlloc de l'actual.

Les modificacions fetes a home.tml són poques:
 ...
    <ion-item-divider color="light">Data</ion-item-divider>
    <ion-item (click)="selectDate()">
      <ion-icon name="search" item-left color="primary"></ion-icon>
      <ion-note item-right>{{ dateMsg }}</ion-note>
    </ion-item>
 ...
Hi hem afegit una icona i hem canviat el missatge fixe pel contingut de la variable dateMsg, però la part més interessant és la captura de l'event click en el <ion-item>. Utilitzem les opcions per capturar les interaccions de l'usuari que ens proporciona Angular. En aquest cas, el que es fa és cridar la funció selectDate del nostre controlador (la que obre el calendari i crida l'API amb la nova data seleccionada).

Podem provar el codi en el navegador, com sempre amb:
 $ ionic serve -c -s
En fer clic en la fila de la data, s'obre una finestra amb el calendari:

 Podem veure en la consola l'objecte que rep el calendari. Tot seguit, en escollir una nova data i tancar la finestra, es crida l'API i la pantalla s'actualitza amb la nova informació:


Observem com s'ha actualitzat la data i les hores de sortida/posta del sol, i també podem comprovar en la consola com s'ha cridat l'API amb la data que s'havia escollit.

Com sempre, teniu tot el codi a la vostre disposició en el Github: v0.3 (amb calendari).

En la propera modificació, podríem permetre canviar el lloc, enlloc d'utilitzar la posició actual.

Seguiu l'evolució de l'aplicació:

27 de febrer del 2018

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

Part III: Versió amb Geolocalització

Aquest article ens mostrarà com afegir geolocalització a l'aplicació per saber l'hora de sortida i posta de sol justament del lloc on ens trobem.

Fins ara hem vist:

Ara afegirem geolocalització per obtenir la posició actual del mòbil. La precisió variarà depenent de si està el GPS actiu, o si el posicionament és per les antenes de ràdio, wifi, etc... Però pel que necessitem nosaltres, serà més que suficient.

Afegim el mòdul de Geolocalització del Ionic al projecte:
$ ionic cordova plugin add cordova-plugin-geolocation \\
        --variable GEOLOCATION_USAGE_DESCRIPTION="Per posicionar-te"
$ npm install --save @ionic-native/geolocation
Ja veieu que es tracta d'un mòdul que requereix Cordova. Molts d'aquest mòduls només estan disponibles en un dispositiu físic (mòbil o tablet) i no en el navegador d'un PC. És important comprovar sempre la compatibilitat, per no tenir sorpreses.

En el cas que ens ocupa, Browser apareix llistat com a compatible, pel que sí podem utilitzar-lo en el navegador d'un PC (això sí, ens demanarà permís abans de permetre la localització).

Comprovem la documentació del propi mòdul per veure com utilitzar-lo:


Aquest codi l'afegirem a la pàgina home.ts. Però no ens hem d'oblidar d'afegir també el proveïdor Geolocation en el fitxer app.module.ts. Ens cas contrari, generaria un error de l'estil:


Ja que hi estem posats, organitzarem el codi separant la crida a l'API en una funció separada. Ens anirà bé, ja que la cridarem en un parell de situacions diferents.

També aprofitarem per generar un missatge indicant si la posició en la que es calcula és l'actual o la que hi ha per defecte (en cas de no poder usar la geolocalització). En aquest cas, donarem també un avís en la pantalla, en forma d'error o advertiment.

Bé, el codi quedaria com segueix:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Geolocation } from '@ionic-native/geolocation';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  API: string = "https://api.sunrise-sunset.org/json";
  
  // Estany de Sant Maurici
  lat: number = 42.582104;
  lon: number = 1.0008419;

  sunrise : string;
  sunset : string;

  posMsg : string;
  posError : boolean = false;

  constructor(  public navCtrl: NavController,
                public http: HttpClient,
                private geolocation: Geolocation
  )
  {  }

  ionViewDidLoad() {
    this.geolocation.getCurrentPosition().then((answer) => {
      //console.log(answer);
      this.lat = answer.coords.latitude;
      this.lon = answer.coords.longitude;
      this.posMsg = "Posició actual";
      this.getSunriseSunsetFromApi();

    }).catch((error) => {
       console.log('Error getting location', error);
       this.posMsg = "Per defecte";
       this.posError = true;
       this.getSunriseSunsetFromApi();
     });
  }

  getSunriseSunsetFromApi() {
    console.log("Calling API...");

    let data = {  lat: this.lat.toString(), 
                  lng: this.lon.toString(),
                  formatted: "0"
                };

    const params = new HttpParams({fromObject: data});
    const headers = new HttpHeaders().set("Accept", "application/json");
    let options = {headers: headers, params: params, withCredentials: false};

    this.http.get(this.API, options).subscribe(answer => {
      console.log(answer);

      if (answer['status']=="OK") {
        let date_options = {hour: "2-digit", minute: "2-digit"};

        this.sunrise = new Date(answer['results'].sunrise)
                            .toLocaleTimeString("ca-ES", date_options);
        this.sunset = new Date(answer['results'].sunset)
                            .toLocaleTimeString("ca-ES", date_options);

        console.log(this.sunrise);
        console.log(this.sunset);
      }
    },
    err => console.log(err)
    );    
  }
}

Observem els canvis:
  • [5] Importem el nou mòdul de geolocalització.
  • [21-22] Declarem les noves variables pel missatge del lloc i el possible error.
  • [26] Afegim el nou proveïdor de geolocalització.
  • [30-44] Ara, en carregar la pàgina provem d'obtenir la posició actual tal com en indica la documentació del mòdul. Si tot és correcte, obtenim la posició; en cas contrari, utilitzem la que tenim per defecte. En tot cas, actualitzem un missatge per l'usuari i una senyal d'error.
  • [46-75] La crida a l'API que calcula la sortida/posta de sol l'hem separat en una funció pròpia. A part d'això, no hi hem fet canvis.

També cal modificar el fitxer home.html per mostrar el nou missatge i el possible error:
 ...
<ion-content padding>
  <ion-list>
    <ion-item-divider color="light">Lloc: {{ posMsg }}</ion-item-divider>
    <ion-item color="light" *ngIf="posError">
      <h2>No s'ha pogut obtenir la posició actual</h2>
      <p>Verifica els permisos</p>
      <ion-icon name="warning" color="danger" item-left></ion-icon>
    </ion-item>
    ...

Només hi hem afegit un ion-item per mostrar un error en cas que no es pugui utilitzar la geolocalització. Fixem-nos en l'ús de l'operador *ngIf d'Angular. Amb ell, només es mostrarà l'element (i tot el seu contingut) si es compleix la condició indicada (en aquest cas, si la variable posError s'avalua com a certa [línia 41, quan salta un error en provar de geolocalitzar]).

El resultat, quan salta l'error, es pot veure a continuació:

Si mirem els missatges en la consola, podem veure que l'error que es produeix és un 403 (intent d'accedir a un recurs sense permisos adients).

En canvi, si li donem els permisos adequats, el resultat que obtenim és:

Noteu com el codi corresponent a l'error ja no es mostra ! En canvi, en la consola podem veure l'objecte que ens retorna el mòdul de geolocalització.

I d'aquesta manera tant senzilla hem aconseguit geolocalitzar l'aplicació. Com sempre, teniu tot el codi a la vostre disposició en el Github: v0.2 (amb geolocalització).

En la propera modificació, podríem afegir un calendari per escollir la data que volem, enlloc d'utilitzar l'actual.

Seguiu l'evolució de l'aplicació:

24 de febrer del 2018

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

Part II: Versió "clavada a ferro"

Aquest article ens mostrarà com fer una aplicació amb Ionic per saber l'hora de sortida i posta de sol en un lloc determinat.

En la primera part vàrem preparar el projecte inicial.

Ara farem una primera versió senzilla, on fixarem el lloc i el dia. Més endavant anirem modificant el codi per fer-lo més útil en general (i de passada anirem veien diferents tècniques).

En lloc de fer el càlcul de l'hora de sortida/posta de sol directament, l'aplicació es connectarà a internet per a obtenir-la. Amb una cerca ràpida a Google podem trobar una API que sembla feta a mida a https://sunrise-sunset.org/api.

En una primera versió, podem fer una petició simple amb:
 https://api.sunrise-sunset.org/json?
             lat=36.7201600&lng=-4.4203400&formatted=0

I obtindrem una resposta en JSON similar a:


Fixeu-vos que només necessitem la latitud i la longitud i fer una petició a l'API anterior per obtenir les dades que necessitem en la nostre aplicació.

En una aplicació Ionic, per poder fer peticions web, primer hem d'importar el mòdul HttpClientModule al fitxer app.module.ts. Quedaria com segueix:
 ...
 import { SplashScreen } from '@ionic-native/splash-screen';

 import { HttpClientModule } from '@angular/common/http';

 @NgModule({
  declarations: [
   ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  ...

Amb això ja podem implementar la funcionalitat desitjada en la pàgina home.ts:
 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';

 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

 @Component({
  selector: 'page-home',
  templateUrl: 'home.html'
 })
 export class HomePage {
  API: string = "https://api.sunrise-sunset.org/json";
  
  // Estany de Sant Maurici
  lat: number = 42.582104;
  lon: number = 1.0008419;

  sunrise : string;
  sunset : string;

  constructor(  public navCtrl: NavController,
                public http: HttpClient )
  { }

  ionViewDidLoad() {
    console.log("Calling API...");

    let data = {  lat: this.lat.toString(), 
                  lng: this.lon.toString(),
                  formatted: "0"
                };

    const params = new HttpParams({fromObject: data});
    const headers = new HttpHeaders().set("Accept", "application/json");
    let options = { headers: headers, 
                    params: params, 
                    withCredentials: false
                  };

    this.http.get(this.API, options).subscribe(answer => {
      console.log(answer);

      if (answer['status']=="OK") {
        let date_options = {hour: "2-digit", minute: "2-digit"};

        this.sunrise = new Date(answer['results'].sunrise)
                               .toLocaleTimeString("ca-ES", date_options);
        this.sunset = new Date(answer['results'].sunset)
                               .toLocaleTimeString("ca-ES", date_options);

        console.log(this.sunrise);
        console.log(this.sunset);
      }
    },
    err => console.log(err)
    );
  }
 }

Observem l'estructura:
  • [4] Hem importat les classes que necessitarem.
  • [11-18] Declarem les variables internes a la classe, amb el seu tipus (gràcies, Typescript !) i opcionalment amb un valor per defecte. Aquí fixarem el valor de la latitud i la longitud del lloc que ens interessi a partir de les dades GPS (que podem obtenir a través de google maps, per exemple).
  • [21] Afegim el proveïdor per a les connexions a internet en el constructor.
  • [24] ionViewDidLoad és una funció que es crida una sola vegada, i és el lloc ideal per posar-hi codi d'inicialització. En aquest cas, com que les nostres dades no varien gaire sovint, les podem inicialitzar aquí. Val la pena consultar els cicles de vida d'una pàgina a Ionic a NavController.
  • [27-30] Preparem les dades en el format requerit per l'API. Necessitem convertir els números en strings.
  • [32-37] Generem els paràmetre i capçaleres de la nostre petició a l'API, i finalment ho posem tot plegat en un objecte options.
  • [39-55] Fem la petició i quan obtenim la resposta, extraiem les dades que volem mostrar. En cas d'error, traiem un missatge per la consola.
Val la pena comentar que la petició web retornarà les dades al cap d'un temps indeterminat. Per això, el valor es retorna a través d'un Observable, al qual ens subscrivim per rebre el seu valor quan estigui disponible.

Fixem-nos com el fitxer home.ts actua com a controlador de les dades de la classe. Per la seva banda, la visualització d'aquestes es fa en el fitxer home.html:
<ion-header>
  <ion-navbar>
    <ion-title>Sortida/posta de Sol</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item-divider color="light">Lloc</ion-item-divider>
    <ion-item>
      <ion-label>Latitud</ion-label>
      <ion-note item-right>{{ lat }}</ion-note>
    </ion-item>
    <ion-item>
        <ion-label>Longitud</ion-label>
        <ion-note item-right>{{ lon }}</ion-note>
      </ion-item>
  
    <ion-item-divider color="light">Data</ion-item-divider>
    <ion-item>
      <ion-note item-right>Avui</ion-note>
    </ion-item>

    <ion-item-divider color="light">Horari</ion-item-divider>
    <ion-item>
      <ion-icon name="sunny" color="orange" item-left></ion-icon>
      <ion-note item-right>{{ sunrise }}</ion-note>
    </ion-item>
    <ion-item>
      <ion-icon name="moon" color="blue" item-left></ion-icon>
      <ion-note item-right>{{ sunset }}</ion-note>
    </ion-item>

  </ion-list>
</ion-content>

L'estructura utilitza tags tipus html que, de fet, són components pre-definits de Ionic. Amb això podem construir una interfície d'usuari agradable sense molt d'esforç: amb llistes, icones, etiquetes, etc...

El més destacable és com podem utilitzar en el fitxer html les variables que tenim definides en el nostre controlador, gràcies als operadors d'enllaç de dades d'Angular. En la nostre aplicació només utilitzem l'operador d'interpolació, {{ var }}, que serà substituït en la pàgina de sortida pel valor que tingui la variable en la classe en cada moment.

Bé, ha arribat el moment de veure el resultat:
 $ ionic serve -c -s

El resultat ens apareixerà en una finestra nova al navegador:


Observem com gràcies a les "Eines de desenvolupador" podem veure els missatges que surten per la consola. En el cas d'un objecte com el que obtenim de la petició a l'API [línia 40], el podem expandir i veure'n tots els detalls.

Però anem a veure com es genera l'aplicació mòbil. De fet, si tenim els SDK d'Android i el XCode ja instal·lats i configurats, és tan senzill com:
 $ ionic cordova build android
 $ ionic cordova build ios

El resultat es pot veure a continuació:


A l'esquerra hi ha una captura de pantalla directe des d'un Samsung S6, i a la dreta el resultat en l'emulador d'un iPhone 7.

Tal com es pot observar, Ionic ens permet obtenir una aplicació que corre en els dos principals sistemes operatius mòbils (i en la web, tot sigui dit de passada) a partir d'un mateix codi.

I parlant de codi, si us animeu a provar l'aplicació, la teniu disponible al GitHub: v0.1 (clavada a ferro). Proveu-la, i ja em comentareu.

Més endavant anirem modificant l'aplicació per permetre variar el lloc i la data, la qual cosa ens permetrà veure noves tècniques de programació, ús del GPS en els dispositius mòbils, etc...
Seguiu l'evolució de l'aplicació:

22 de febrer del 2018

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ó:

18 de febrer del 2018

Ionic: aplicacions multi-plataforma amb el mateix codi

Com qui no vol la cosa, porto treballant amb Ionic des de fa gairebé un any i mig. Vaig arribar a Ionic v1 buscant una plataforma que permetés desenvolupar aplicacions multi-plataforma (Android, iOS i web) amb els mínims canvis de codi. Justament això era el que oferia Ionic v1.

Però no tot era perfecte. Al cap d'un mes, vaig voler provar una de les betes de Ionic 2. I ja no hi va haver tornada enrere. La nova versió de Ionic afegia el que li mancava a Ionic v1: una millor estructuració del codi, orientació a objectes i SOBRETOT verificació de tipus gràcies a la substitució del javascript pel Typescript com a llenguatge base de programació.


La ràpida evolució d'Ionic m'ha provocat alguns inconvenients quan s'han introduït canvis que trencaven la compatibilitat amb el codi anterior, però en general ha evolucionat en la bona direcció.

És interessant destacar que la base del Ionic és Angular i les tecnologies web: javascript, HTML5 i CSS. Això vol dir que es beneficia directament de l'evolució dels navegadors i de tot el suport a internet en general. I la propera versió, Ionic 4, generarà directament components web, pel que es podrà utilitzar amb qualsevol framework enlloc d'Angular.

Bé, crec que ja he fet prou venda del producte.

Properament veurem com de fàcil és fer una aplicació mòbil amb Ionic. Però mentrestant, si voleu provar Ionic, us aconsello que seguiu les instruccions d'instal·lació per a la vostra plataforma a https://ionicframework.com/getting-started.

Com a consell addicional, instal·leu primer el NVM seguint les instruccions de https://ionicframework.com/docs/developer-resources/using-nvm/. Això us permetrà canviar fàcilment les versions del Node, necessari per executar Ionic, i evitarà problemes de permisos (o haver d'utilitzar el sudo per instal·lar paquets).

Si teniu dubtes, podeu utilitzar els comentaris (o anar directament al fòrum de Ionic). Ànims !