2 d’abril de 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ç de 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ç de 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ç de 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ç de 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ç de 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 de 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ó: