Archivo de la etiqueta: libro ionic español

Mostrar un mapa offline en Ionic con Leaflet

Hola a todos:

En posts anteriores vimos como mostrar un mapa de Google maps en ionic, sin embargo ¿que pasa si queremos mostrar información en un mapa sin conexión?, google maps no nos podrá mostrar el mapa.

En lugar de utlizar Google maps en esta ocasión vamos a utilizar Leaflet para mostrar un mapa.

Leaflet  es una biblioteca javascript de código abierto que nos permite crear mapas.

Lanzado por primera vez en 2011, es compatible con la mayoría de las plataformas móviles y de escritorio, y es compatible con HTML5 y CSS3 .

Es una de las bibliotecas de mapas de JavaScript más populares y es utilizada por los sitios web como FourSquare , Pinterest y Flickr .

Para poder mostrar un mapa offline es necesario tener alojados locálmente los titles que forman el mapa, si quieres mostrar un mapa de todo el mundo offline a día de hoy podemos afirmar  que es inviable ya que eso supondría muchísimos gigas de información, sin embargo si que puede ser viable mostrar un mapa offline de una ciudad.

Si por ejemplo estás desarrollando una aplicación de turismo de una ciudad concreta donde vas a mostrar en un mapa  los monumentos que merece la pena visitar en dicha ciudad, o cualquier otra información geolocalizada en un mapa, puede ser interesante el poder mostrar un mapa sin necesidad de tener conexión a Internet en ese preciso momento.

Vamos a ver como podemos solucionar esto en ionic 3, y como siempre la mejor manera de verlo es con un ejemplo.

Lo primero que vamos ha hacer es crear un nuevo proyecto en ionic que vamos a llamar mapaoffline:

ionic start mapaoffline blank

Una vez creado el en proyecto entramos en la carpeta con:

cd mapaoffline

Ahora vamos a descargar Leaflet, para ello descargamos la última versión desde  la sección de descargas de su página oficial en el siguiente enlace:

http://leafletjs.com/download.html

Se habrá descargado un archivo .zip, antes de nada debemos descomprimirlo para extraer su contenido:

 

Ahora vamos a crear una carpeta llamada leaflet en src/assets y dentro vamos a copiar la carpeta images y el archivo leaflet.css.

Una vez hecho esto vamos a cargar el archivo leaflet.css en index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  -->

  <link href="build/main.css" rel="stylesheet">
  <link href="assets/leaflet/leaflet.css" rel="stylesheet">
  

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  
  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

Ahora vamos a instalar leaflet desde consola con los siguiente comandos:

npm install leaflet --save
npm install @types/leaflet --save

Ahora que ya tenemos instalado leaflet necesitamos descargar los tiles del mapa que vamos a mostrar, para ello vamos a echar mano de una herramienta llamada Mobile Atlas Creator (MOBAC), para descargarla accedemos al siguiente enlace: http://mobac.sourceforge.net/ y bajamos en la página hasta encontrar Download y pulsamos en latest stable version para descargar la aplicación.

Una vez descargada tenemos que descomprimir el archivo zip y dentro encontraremos el archivo ejecutable.

Al ejecutar Mobile Atlas Creator nos pide introducir un nombre para el atlas (en este caso le llamamos simplemente mapa) y el formato, tenemos que seleccionar Osmdroid ZIP.

 

Pulsamos Aceptar y nos mostrará un mapa, podemos mover zoom para ver mejor la zona que queremos seleccionar. Si hacemos doble click en un punto el mapa hará zoom y se centrará en ese punto, por ello para localizar la zona que queremos mostrar es mejor partir de un zoom que nos permita ver donde estamos e ir haciendo doble click hasta obtener la localización y zoom que nos interesa.

En el panel de la izquierda en la sección map source tenemos los mapas de los que podemos obtener los tiles, muchos son solo de una zona en concreto, yo para este ejemplo voy a utilizar OpenStreetMap4UMaps.eu que nos ofrece un mapa de todo el mundo.

Debajo del panel Map Source tenemos  el panel Zoom Levels, aqui debemos seleccionar los niveles de zoom que queremos que tenga el mapa, cabe mencionar que cuantos más niveles de zoom mas tiles necesitaremos y por ende mas espacio ocuparán las imágenes.

Marcamos por ejemplo 11,12,13,14, y 15.

Ahora tenemos que seleccionar la porción del mapa que queremos descargar:

En la parte de arriba del mapa tenemos una barra de zoom que podemos mover para ver mejor la parte del mapa que queremos seleccionar. Con el ratón sobre el mapa seleccionamos un área.

Yo por ejemplo he seleccionado la zona de Bilbao, de está manera podré mostrar un mapa de Bilbao sin conexión.

Ahora debajo del panel Zoom Levels tenemos el panel Atlas content, aquí vamos a pulsar en el botón Add Selection lo que nos creará un Layer  que si lo desplegamos vemos que contiene dentro los niveles de zoom que hemos seleccionado.

Bien, una vez que hemos seleccionado el área que queremos descargar tenemos que seleccionar Create Atlas y acto seguido comenzará a generar el atlas:

El atlas que se ha generado será un archico .zip con el nombre que le hemos dado al atlas en este caso mapa seguido de la fecha y hora en la que ha sido generado y lo encontrarás en la carpeta atlases dentro de la carpeta  donde tengas Mobile Atlas Creator.

Bien, ahora vamos descomprimir el archivo zip que nos ha generado, al descomprimir vemos que dentro de la carpeta que nos ha creado hay otra carpeta llamada 4uMaps, vamos a cambiarle el nombre a la carpeta por simplemente mapa y a copiar esta carpeta dentro de la carpeta assets de nuestro proyecto:

 

Una vez que tenemos Los tiles copiados en la carpeta assets de nuestro proyecto ya podemos mostrarlos en el mapa.

Vamos a editar home.html e igual que hacíamos cuando creamos un mapa con google maps vamos a crear un div con id=”map” donde se renderizará el mapa:

<ion-header>
<ion-navbar>
  <ion-title>
    Ionic Blank
  </ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<div id="map"></div>
</ion-content>

Ahora le vamos a definir el tamaño para que ocupe toda la pantalla por lo tanto editamos home.scss y añadimos lo siguiente:

page-home {
    #map{
        width:100%;
        height: 100%;
    }
}

Ahora en home.ts vamos a ver como se crea un mapa con leaflet:

Lo primero que debemos hacer es importar leaflet:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as L from 'leaflet';

Ahora vamos a crear una variable de clase llamada map donde guardaremos la instancia del mapa que vamos a crear:

...

export class HomePage {

  map : any;

  constructor(public navCtrl: NavController) {

  }

...

Ahora cuando se haya cargado la página en el método onViewDidLoad vamos a crear el mapa de la siguiente manera:

ionViewDidLoad() {
  
   this.map = L.map('map').
     setView([ 43.2603479, -2.9334110],
     12);

   L.tileLayer('assets/mapa/{z}/{x}/{y}.png', {    maxZoom: 15  }).addTo(this.map);
   
   L.marker([ 43.2603479,-2.9334110],{draggable: true}).addTo(this.map);
 
 }

Para crear un mapa con Leaflet utilizamos L.map(‘map’), ‘map’ es el id del div que hemos creado en la vista home.html y que es donde se va a renderizar el mapa.

Después con el metodo .setView le indicamos las coordenadas donde se tiene que posicionar el mapa, en este caso son las del centro de Bilbao.

Con L.tileLayer() añadimos al mapa una capa de tiles que va a contener los tiles del mapa que hemos descargado, como primer parámetro le pasamos la ruta donde se encuentran los tiles que puede ser una url si estamos utilizando un mapa online o la ruta donde se encuentrar alojados los archivos para mostrar el mapa offline como es el caso.

Si nos fijamos en la ruta vemos que es ‘assets/mapa/{z}/{x}/{y}.png’,   z, x e y hacen referencia respectivamente al nivel de Zoom, tiles en el eje X y tiles en el eje Y.

Obtendrán el valor correspondiente automáticamente en función de la posición del mapa y al tener la carpeta de los tiles ordenada por estos parámetros no te tienes que preocupar.

Despues con L.marker  creamos un marcador en en las coordenadas indicadas y le decimos que sea  arratrable (draggable) y con .addTo(this.map) lo añadimos a nuestro mapa.

El código completo de home.ts quedaría así:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as L from 'leaflet';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  map;

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {
   
    this.map = L.map('map').
      setView([ 43.2603479, -2.9334110],
      12);

    L.tileLayer('assets/mapa/{z}/{x}/{y}.jpg', {    maxZoom: 15  }).addTo(this.map);
    
    L.marker([ 43.2603479,-2.9334110],{draggable: true}).addTo(this.map);
  
  }

}

Ahora si ejecutamos nuestra app aunque no tengamos conexión a internet podemos mostrar un mapa:

 

Eso es todo por hoy, como siempre espero que os sea de utilidad.

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  🙂, también puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

También os recuerdo que ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra:

Anuncios

Firmar el apk para subirlo a Google Play

Hola a todos,

Como el título del post indica hoy vamos a ver cómo generar un archivo .apk firmado para poder subirlo a google play.

Este es el último paso que debemos dar una vez tenemos desarrollada y lista nuestra aplicación para poder subirla a la tienda de aplicaciones de Google.

Android exige que todos los APK se firmen digitalmente con un certificado para poder instalarse.

Cuando firmas un APK se adjunta a este el certificado de clave pública que asocia el APK contigo y con tu clave privada correspondiente. Esto es necesario para poder lanzar cualquier actualización de la app asegurándose que provenga del autor original, por eso es importantísimo que guardemos el archivo keystore generado a buen recaudo para poder lanzar futuras actualizaciones ya que todas las aplicaciones deben usar el mismo certificado durante su vida útil.

Un keystore es un campo binario que contiene una o más claves privadas.

Si desarrollas una app nativa puedes generar el keystore firmar el apk desde Android studio, nosotros vamos a ver como firmar una aplicación   generada desde ionic o apache cordova desde consola.

Para poder firmar el apk desde consola debemos seguir una serie de pasos que vamos a ver a continuación:

Lo primero que necesitamos es generar  el keystore:

Si por ejemplo nuestra app se llama miapp para generar un keystore  abrimos  una terminal, nos situamos en la carpeta de nuestro proyecto y escribimos el siguiente comando:

keytool -genkey -v -keystore miapp.keystore -alias miapp -keyalg RSA -keysize 2048 -validity 10000

miapp.keystore es el archivo que se va a generar, el alias es un nombre de identificación para tu clave, en este caso le hemos llamado miapp.

Con keysize le indicamos que el tamaño de la clave sea de 2048 bits, es recomendavle dejarlo en este valor.

Por último con -validity fijamos el período de validez de tu clave en años, creo que  con 10000 años será suficiente ;-P.

Al ejecutar el comando nos pide que introduzcamos una serie de datos:

Introduzca la contraseña del almacén de claves: 

Volver a escribir la contraseña nueva: 

¿Cuáles son su nombre y su apellido?

¿Cuál es el nombre de su unidad de organización?

¿Cuál es el nombre de su organización?

¿Cuál es el nombre de su ciudad o localidad?

¿Cuál es el nombre de su estado o provincia?

¿Cuál es el código de país de dos letras de la unidad?

Te pide dos veces la contraseña, es importante que recuerdes la contraseña que has introducido ya que la necesitarás después.

Al final te muestra los datos que has introducido y te pide confirmación, le decimos que si:

¿Es correcto CN=Eduardo, OU=Revilla, O=revigames, L=Abadiño, ST=Bizkaia, C=ES?

  [no]:  Si

Lo que os sale debe ser algo parecido a la siguiente imagen:

Bien, con esto ya hemos generado un archivo llamado miapp.keystore en la raiz de nuestro proyecto.

Ahora vamos a crear un nuevo archivo en la raiz del proyecto llamado build.json, lo creamos con nuestro editor de código y dentro escribimos el siguiente código:

{
     "android": {
         "debug": {
             "keystore": "miapp.keystore",
             "storePassword": "XXXXX",
             "alias": miapp",
             "password" : "XXXX",
             "keystoreType": ""
         },
         "release": {
             "keystore": "miapp.keystore",
             "storePassword": "XXXX",
             "alias": "miapp",
             "password" : "XXXX",
             "keystoreType": ""
         }
     }
 }

El primero es para la versión de debug y “release” es para la versión final que vas a subir a la play store.

En el campo keystore debes poner la ruta del archivo .keystore que acabamos de generar, si lo has generado en la raíz solo debes de poner el nombre del archivo, en este caso miapp.keystore.

En alias ponemos el alias que hemos puesto al crear el archivo

Después en storePassword debe poner la contraseña del almacén de claves que indicaste al crear el archivo.

En password debemos poner la contraseña.

Guardamos el archivo y ya solo nos queda generar el apk firmado con el siguiente comando:

ionic cordova build android --release

Si no ha detectado errores y se ha compilado bien podrás encontrar el apk firmado que debes subir a play store en la siguiente ruta dentro de tu aplicación:

/platforms/android/build/outputs/apk/android-release.apk

Eso es todo por hoy, espero que os haya sido de utilidad y ver vuestras apps triunfando en la play store pronto ;-).

Aprovecho para deciros que si has creado alguna app con ionic y la tienes en la play store puedes compartirlo en los comentarios, así servirá como inspiración para que otras personas puedan ver lo que se puede crear con ionic y al mismo tiempo seguro que ganáis alguna descarga extra que siempre viene bien 😉

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  🙂, también puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

También os recuerdo que ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra:

 

Libro: Desarrollo de aplicaciones móviles multiplataforma con Ionic desde cero: IONIC 3

Hola a todos,

Como diría Francisco Umbral, ¡He venido a hablar de mi libro! ;-P

Hoy vengo a anunciaros que por fin he publicado en Amazon mi libro para aprender a programar aplicaciones multiplataforma con ionic.

El libro está en español por lo que será de especial utilidad para aquellos que no se arreglen bien con el inglés.

El libro contiene parte del contenido que ya he compartido en este blog pero revisado y mejorado, además he organizado mejor los contenidos y he añadido mucha información extra.

No quiero aburriros promocionando mi libro, simplemente si te ha gustado el contenido sobre ionic que he compartido en este blog y quieres tenerlo mas completo y mejor organizado y de paso apoyarme ya puedes comprar este libro en amazon:

 

No quiero aburriros más así que muchas gracias a todos los que me habéis apoyado 🙂

 

Un saludo y hasta el proximo post.

Como mejorar el rendimiento de ionic en iOS y solución al problema de las peticiones http CORS

Hola a todos:

Esta semana he estado trabajando en una aplicación con ionic para un cliente.

La aplicación funcionaba estupendamente en todos los dispositivos Android donde la he probado, evidentemente en dispositivos más antiguos el funcionamiento era un poco menos fluido pero aceptable en cualquier caso, sin embargo a la hora de probar la app en un dispositivo iOS, concretamente en un iPhone 6 que tengo para probar las apps en un dispositivo real me he llevado una decepción.

La aplicación tiene que mostrar una lista con imágenes e información bastante grande, además tiene un buscador para filtrar el listado por varios campos.

El scroll no iba muy fino a pesar de utilizar [virtualScroll] para el listado, cuando filtraba el listado por algunos campos a la hora de refrescar el contenido del listado iba a trompicones y tardaba en responder… en fin, la experiencia de usuario dejaba bastante que desear.

Lo primero que he hecho es pulir el código todo lo que he podido intentando que sea lo más eficiente posible, pero no ha sido suficiente.

Investigando un poco en el blog oficial de ionic me he encontrado con WKWebView.

Podéis leer la entrada del blog de ionic en este enlace:

http://blog.ionic.io/cordova-ios-performance-improvements-drop-in-speed-with-wkwebview/

Como sabemos ionic utiliza apache cordova que a su vez utiliza la webview del sistema para mostrar el contenido de nuestra aplicación.

Actualmente, la plataforma iOS proporciona dos webviews diferentes.

Está la webview más antigua (y más lenta) llamada “UIWebView” y otra mas nueva llamada “WKWebView“.

El navegador web predeterminado de iOS es Safari, internamente Safari utiliza WKWebView, sin embargo ionic debido a diversas incompatibilidades y problemas  técnicos utiliza UIWebView.

WKWebView es más rápida que UIWebView, además Apple proporciona actualizaciones en cada versión de iOS.

Para utilizar WKWebView solo tenemos que instalar en nuestra aplicación un plugin que proporciona ionic-team.

Para instalar el plugin desde consola ejecutamos el siguiente comando:

ionic cordova plugin add https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git --save

Solo con instalar este plugin mi aplicación iba muchísimo mas fluida en mi iPhone.

Probad vuestra aplicación con este plugin y si todo va bien perfecto, sin embargo yo tube problemas con CORS  (Cross Origin Resource Sharing) al hacer peticiones al servidor ya que yo no tenia acceso para cambiar nada en el servidor y por lo tanto no podía cambiar las cabeceras de respuesta del servidor para aceptar peticiones cross origin.

Esto lo podemos resolver de dos maneras, utilizando en plugin de ionic native HTTP: https://ionicframework.com/docs/native/http/

El único problema es que sólo funciona en el dispositivo y no proporciona toda la potencia del servicio Http de Angular.

Para solucionar esto podemos utilizar ionic-native-http-connection-backend que podéis encontrar en github: https://github.com/sneas/ionic-native-http-connection-backend

La forma de instalarlo sería:

npm install ionic-native-http-connection-backend --save
ionic cordova plugin add cordova-plugin-http2

Después en app.module.ts tendríamos que añadir lo siguiente:

import { NgModule } from '@angular/core';
import { NativeHttpFallback, NativeHttpModule } from 'ionic-native-http-connection-backend';
import { RequestOptions, Http } from '@angular/http';

@NgModule({
    declarations: [],
    imports: [
        NativeHttpModule
    ],
    bootstrap: [],
    entryComponents: [],
    providers: [
        {provide: Http, useClass: Http, deps: [NativeHttpFallback, RequestOptions]}
    ],
})
export class AppModule {
}

Una vez hecho esto ya podemos realizar peticiones http sin problemas, si quieres saber como relizar peticiones http con ionic puedes consultar el siguiente post: Tutorial de Ionic – Peticiones http – API REST

Con estas dos cosas he conseguido que la aplicación funcione correctamente y con una fluidez mas que aceptable en iOS.

Bueno, por hoy aquí lo dejo con estos pequeños consejos, espero que os sea útil.

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  🙂, también puedes seguirme en Twitter en ‎@revigames y me ayudas si compartes este post en las redes sociales.

Ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra:

Tutorial de Ionic – Firebase – parte 2: Database – Guardar nuestros sitios en la nube.

Hola a todos:

El el post anterior vimos como autenticar un usuario en firebase con email y contraseña, hoy vamos ha ver como utilizar Firebase Database para guardar nuestros sitios en la nube.

Para ello vamos a crear un provider para gestionar nuestros sitios en firebase Database, por lo tanto desde consola nos situamos dentro de la carpeta de nuestro proyecto y creamos en nuevo provider:

ionic g provider firebaseDb

Ahora editamos el archivo firebase-db.ts que se acaba de generar dentro de la carpeta providers/firebase-db, eliminamos el import Http y rxjs/add/operator/map e importamos AngularFireDatabase, FirebaseListObservable  y nuestro provider AuthProvider quedando de la siguiente manera:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { AuthProvider } from '..auth/auth';
/*
  Generated class for the FirebaseDbProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class FirebaseDbProvider {

  constructor(public afDB: AngularFireDatabase, public auth: AuthProvider) {
    console.log('Hello FirebaseDbProvider Provider');
  }
}

Como necesitamos el id del usuario lo primero que vamos ha hacer es añadir la función getUser al provider auth que creamos en el post anterior, por lo tanto editamos auth.ts y añadimos esta función:

// Obtenemos el id de usuario.
 getUser(){
    return this.afAuth.auth.currentUser.uid;
 }

Bien, ahora que ya podemos obtener el id de usuario vamos a añadir en el archivo firebase-db.ts un método para guardar nuestros sitios en Firebase database:

guardaSitio(sitio){
     sitio.id  = Date.now();
     return this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+sitio.id).set(sitio) 
  }

Como vemos la función recibe como parámetros  sitio que será un objeto con los datos de nuestro sitio.

Al objeto sitio le añadimos un campo id para identificarlo y así poder luego modificarlo. Como necesitamos que el id sea diferente cada vez vamos a utilizar Date.now() que nos devuelve los milisegundos transcurridos desde el 1 de enero de 1970, con esto  nos aseguramos que no se repita el id, a no ser que seas capaz de guardar dos sitios en menos de un milisegundo ;-P.

En firebase se guarda la información con estructura de árbol en formato JSON. Para acceder a ella tenemos que hacer referencia a la “ruta” a la que queremos acceder.

En este caso le estamos diciendo que guarde nuestro sitio con esta estructura ‘sitio/_id_usuari_/_id_sitio_/_sitio_’.

El id de usuario lo obtenemos con la función que acabamos de definir en  AuthProvide  this.auth.getUser().

Dentro de sitio colgarán los diferentes id de usuarios de los cuales a su vez colgarán los diferentes sitios de cada usuarios.

Para verlo mas claro en el modal nuevo-sitio vamos a modificar el método guardarSitio para que en lugar de guardar el sitio en la base de datos local SQlite lo guarde en firebase y podamos ver la estructura de como se guarda la información en firebase.

Editamos modal-nuevo-sitio.ts y hacemos los siguientes cambios:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController  } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
// import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';


/**
 * Generated class for the ModalNuevoSitioPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-modal-nuevo-sitio',
  templateUrl: 'modal-nuevo-sitio.html',
})
export class ModalNuevoSitioPage {

  coords : any = { lat: 0, lng: 0 }
  address: string;
  description: string = '';
  foto: any = '';

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,  
    private viewCtrl : ViewController, 
    private camera: Camera,
    // private db: DbProvider
    private dbFirebase :FirebaseDbProvider,
  ) {
  
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalNuevoSitioPage');
      this.coords.lat = this.navParams.get('lat');
      this.coords.lng = this.navParams.get('lng');
       this.getAddress(this.coords).then(results=> {
        this.address = results[0]['formatted_address'];
      }, errStatus => {
          // Aquí iría el código para manejar el error
      });
  }

  cerrarModal(){ 
    this.viewCtrl.dismiss();
  }

  getAddress(coords):any {
    var geocoder = new google.maps.Geocoder();

    return new Promise(function(resolve, reject) {
        geocoder.geocode({'location': coords} , function (results, status) { // llamado asincronamente
            if (status == google.maps.GeocoderStatus.OK) {
                resolve(results);
            } else {
                reject(status);
            }
        });
    });
  }

  sacarFoto(){

    let cameraOptions : CameraOptions = {
        quality: 50,
        encodingType: this.camera.EncodingType.JPEG, 
        targetWidth: 800,
        targetHeight: 600,
        destinationType: this.camera.DestinationType.DATA_URL,
        sourceType: this.camera.PictureSourceType.CAMERA,
        correctOrientation: true
    }


    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is a base64 encoded string
        this.foto = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }

  guardarSitio(){
    let sitio = {
      lat: this.coords.lat,
      lng: this.coords.lng , 
      address: this.address, 
      description: this.description, 
      foto: this.foto
    }
  
this.dbFirebase.guardaSitio(sitio).then(res=>{
        console.log('Sitio guardado en firebase:');
        this.cerrarModal();
    })
   }
}

Como ahora vamos a guardar nuestros sitios en firebase he comentado el import de DbProvider ya que ahora no lo vamos a utilizar, y en la función guardarSitio hemos sustituido la linea this.db.addSitio… por this.dbFirebase.guardaSitio…

Como vemos llamamos a la función guardaSitio del provider FirebaseDbProvider que hemos creado más arriba y le pasamos como parámetro el objeto sitio con los datos de nuestro sitio.

Ahora ejecutamos nuestra aplicación y vamos a la consola de firebase, antes de guardar ningún sitio si seleccionamos Database en el menú de la izquierda de la consola de firebase veremos algo como esto:

Ahora vamos a guardar un nuevo sitio desde nuestra app, rellenamos los campos del formulario del modal nuevo sitio y le damos a guardar, si todo ha ido bien ahora en la consola de firebase veremos algo como esto (pulsa en el icono ‘+’ para desplegar los campos):

Como vemos los datos de guardan en una estructura de árbol, en el primer nivel esta sitio, de sitio ‘cuelga’ los id de usuario, en este caso solo tenemos el nuestro pero si distribuís la aplicación por cada usuario habrá un nodo, de cada usuario ‘cuelgan’ los ids de cada sitio, y de cada id a su vez cuelgan los campos del sitio.

Ahora que ya podemos guardar nuestros sitios en firebase vamos a ver como podemos obtener todos los sitios que tenemos guardados para mostrarlos en el listado:

Lo primero que vamos ha hacer es crear una función en firebase-db.ts para obtener el listado de sitios guardados en firebase database:

getSitios(){
    return this.afDB.list('sitios/'+this.auth.getUser()).valueChanges();
  }

Para obtener el listado de sitios guardados utilizamos el método list de AngularFireDatabase pasando como parámetro la ruta a partir de la cual queremos obtener los datos, en este caso queremos obtener todo lo que cuelgue de sitios/id_usuario,  es decir todos los sitios de nuestro usuario, el id de usuario una vez más lo obtenemos con this.auth.getUser() que hemos creado en nuestro provider AuthProvider.

Con .valueChanges() devolvemos un observable cuando se produzcan cambios en la base de datos.

Bien, llegados a este punto vamos a modificar el controlador de la página listado para que en lugar de obtener los datos de la base de datos local los obtenga directamente de firebase.

Editamos listado.ts e importamos FirebaseDbProvider:

import { Component } from '@angular/core';
import { AlertController, IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';


/**
 * Generated class for the ListadoPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-listado',
  templateUrl: 'listado.html',
})
export class ListadoPage {

  sitios: any;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public db : DbProvider,
    public modalCtrl : ModalController,
    public alertCtrl : AlertController,
    public dbFirebase :FirebaseDbProvider,

  ) {

  }

Ahora en la función ionViewDidEnter() vamos a sustituir this.db.getSitios().then((res)=>{…}) por lo siguiente:

ionViewDidEnter(){
   
    this.dbFirebase.getSitios().subscribe(sitios=>{
      this.sitios = sitios;
    })

}

La función getSitios() que como hemos visto a su vez llama al método list de AngularFireDatabase nos devuelve un observable, por lo que nos suscribimos al resultado. Aquí podemos ver claramente la diferencia entre un observable y una promesa.

Guardamos en this.sitios la lista de sitios que obtenemos lo que hará que se refresque automáticamente en la vista del listado.

Como ya sabemos una promesa ejecuta lo que tengamos definido en  then(res=>{ …}) una vez tenga listo el resultado, pero esto se ejecuta una única vez, sin embargo un observable va a ejecutar lo que tengamos definido en .subscribe(res=>{…}) cada vez que haya un cambio en el resultado. Por ejemplo si desde la consola de firebase cambiamos a mano el campo description de nuestro sitio, este se verá automáticamente reflejado en nuestra aplicación, es interesante hacer la prueba.

En este momento ya podemos guardar sitios en firebase y mostrarlos en el listado:

Lo siguiente que vamos ha hacer es la modificación de los sitios guardados.

Para ello primero vamos ha hacer una pequeña modificación a la función guardaSitio() de nuestro provider firebase-db.ts:

guardaSitio(sitio){
   if(!sitio.id){
      sitio.id  = Date.now();
    }
    return this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+sitio.id).set(sitio) 
  }

Hemos añadido un if para comprobar si el sitio que recibimos en la función tiene el campo id definido.

Como utilizamos el id del sitio para establecer la ruta del registro, si el sitio que recibimos para guardar no tiene id significa que es un sitio nuevo y entonces le damos un id, si ya tiene un id significa que es un sitio que ya existe y hay que modificar.

Modificar un registro en firebase se hace exactamente igual que crear uno nuevo, si la ruta a la que hacemos referencia no existe crea el registro, si ya existe entonces modifica el registro existente en firebase.

Ahora vamos a  modificar el archivo modal-detalle-sitio.ts para hacer que al guardar los cambios al editar un sitio existente se guarden los cambios en firebase, para ello vamos a importar FirebaseDbProvider para poder llamar a la función guardaSitio que acabamos de modificar, y vamos también a modificar la función guardarCambios para que guarde los cambios en firebase en lugar de en la base de datos local:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { LaunchNavigator } from '@ionic-native/launch-navigator';
import { Camera, CameraOptions } from '@ionic-native/camera';
// import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';

/**
 * Generated class for the ModalDetalleSitioPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-modal-detalle-sitio',
  templateUrl: 'modal-detalle-sitio.html',
})
export class ModalDetalleSitioPage {

  sitio: any;
  edit : boolean = false;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private viewCtrl : ViewController,
    private launchNavigator : LaunchNavigator,
    private camera: Camera, 
  //  private db: DbProvider,
    private dbFirebase :FirebaseDbProvider

  ) {
     this.sitio = this.navParams.data;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalDetalleSitioPage');
  }

  cerrarModal(){ 
    this.viewCtrl.dismiss();
  }

  comoLlegar(){
    let destino = this.sitio.lat+', '+this.sitio.lng;
    this.launchNavigator.navigate(destino)
    .then(
      success => console.log('Launched navigator'),
      error => console.log('Error launching navigator', error)
    );  
 }

 editar(){
   this.edit = true;
 }

 sacarFoto(){

    let cameraOptions : CameraOptions = {
        quality: 50,
        encodingType: this.camera.EncodingType.JPEG, 
        targetWidth: 800,
        targetHeight: 600,
        destinationType: this.camera.DestinationType.DATA_URL,
        sourceType: this.camera.PictureSourceType.CAMERA,
        correctOrientation: true
    }


    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is a base64 encoded string
        this.sitio.foto = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }

  guardarCambios(){ 

     let sitio = {
      id : this.sitio.id,
      lat: this.sitio.lat,
      lng: this.sitio.lng , 
      address: this.sitio.address, 
      description: this.sitio.description, 
      foto: this.sitio.foto
    }

    this.dbFirebase.guardaSitio(sitio).then(res=>{
        console.log('Sitio modificado en firebase');
        this.cerrarModal();
    })
   }

}

Hemos comentado el import de DbProvider porque ya no lo estamos utilizando.

Ahora si pruebas la aplicación con el panel de firebase abierto podrás ver que si modificas un sitio que tengas guardado automáticamente se verá reflejado este cambio en el registro de firebase.

Para concluir solo nos queda eliminar sitios.

Vamos a añadir a  FirebaseDbProvider en el archivo firebase-db.ts una función para eliminar un sitio de la base de datos de firebase:

public borrarSitio(id){
        this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+id).remove();

}

Como puedes ver es muy sencillo, solo necesitamos recibir el id del sitio que queremos eliminar y haciendo referencia a la ruta de nuestro sitio (que una vez más es sitios/_id_usuario_/id_sitio) utilizamos la función remove() para eliminar el sitio.

Ahora en el listado solo tenemos que sustituir la llamada a borrarSitio() de la base de datos local  de DbProvider por la función que acabamos de crear en FirebaseDbProvider, por lo tanto editamos el archivo listado.ts y dejamos la función borrarSitio() de la siguiente manera:

borrarSitio(id){

    let alert = this.alertCtrl.create({
      title: 'Confirmar borrado',
      message: '¿Estás seguro de que deseas eliminar este sitio?',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          handler: () => {
            // Ha respondido que no así que no hacemos nada
          }
        },
        {
          text: 'Si',
          handler: () => {
               // AquÍ borramos el sitio en firebase
              this.dbFirebase.borrarSitio(id); 
           }
        }
      ]
    });
    
    alert.present();

 }

Como podemos observar ya no necesitamos obtener de nuevo los sitios una vez borrado para que se refresque el listado ya que al ser firebase una base de datos en tiempo real el listado se actualiza automáticamente.

Podéis probar a borrar un sitio y veréis como el sitio se elimina automáticamente en el panel de firebase y el listado se actualiza.

Eso es todo por hoy, con esto ya podemos hacer muchas cosas interesantes utilizando firebase, seguro que se os ocurren grandes ideas para realizar apps utilizando firebase como backend. Podéis dejarme en los comentarios  esas grandes ideas, no se lo contaré a nadie ;-P

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  🙂, también puedes seguirme en Twitter en ‎@revigames y me ayudas si compartes este post en las redes sociales.

Ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra:

Tutorial de Ionic – Estructura de un proyecto Ionic 2

Hola a todos:

En el post anterior vimos como crear un proyecto en ionic 2 creando el famoso “Hola Mundo”.

Hoy vamos a ver la estructura de carpetas y archivos que se general al crear un proyecto ionic.

Al crear un proyecto con ionic 2 se crea una carpeta con el nombre del proyecto y dentro de ella una estructura de archivos y directorios que contiene todos los elementos del proyecto.

Vamos a echar un vistazo a la estructura de archivos y carpetas que se ha generado al crear nuestro proyecto hola-mundo:

Estructura de carpetas de un proyecto Ionic 2
Estructura de carpetas de un proyecto Ionic 2

Veamos que contiene cada carpeta:

hooks: Contiene scripts que se ejecutan en el proceso de construcción de la app y que pueden ser creados por el propio sistema de compilación para personalizar comandos de cordova, automatizar procesos, etc. Normalmente no tendremos que modificar nada aquí.

node_modules: La carpeta node_modules se genera automáticamente al instalar las dependencias npm con “npm install”. Este comando explora el archivo package.json para todos los paquetes que necesitan ser instalados. No necesitamos tocar nada en esta carpeta.

platforms: En esta carpeta se generará los proyectos nativos para cada plataforma que hayas añadido previamente. Si hemos añadido la plataforma IOS y Android se creará  una carpeta llamada ios y otra llamada android  y dentro tendrán los archivos y carpetas con la estructura de un proyecto nativo. En MAC se suele crear por defecto la plataforma IOS al crear un proyecto, en Windows cuando creas un proyecto no aparecerá esta carpeta hasta que añadas alguna plataforma,veremos más adelante cómo se añaden plataformas.

Estas carpetas se actualizan cada vez que compilas o ejecutas el proyecto en un emulador o en un dispositivo. Salvo excepciones no tendremos que modificar nada en estas carpetas.

plugins: Contiene los plugins de Cordova que hayamos instalado. Se crean automáticamente en esta carpeta al instalar un plugin así  que tampoco tendremos que modificar nada en esta carpeta a mano.

resources: Contiene el icono y la “splash screen” (pantalla de presentación) de la aplicación con la que después podremos crear automáticamente todas las imágenes en todos los tamaños necesarios para cada plataforma, lo que nos ahorrará mucho tiempo al no tener que generar a mano todos los tamaños de imagen necesarios del icono y la pantalla de presentación. Veremos más adelante como se generan automáticamente.

src: Esta es la carpeta más importante y donde realizaremos la mayor parte de nuestro trabajo. Aquí es donde están los archivos con el contenido de nuestra aplicación, donde definimos las pantallas, el estilo y el comportamiento que tendrá nuestra aplicación.

www:  Esta carpeta se genera automáticamente y contiene la versión actual del código cada vez que efectuamos un cambio. Si habías trabajado anteriormente con ionic 1 puede que tengas la tentación de editar el contenido de esta carpeta pero NO debemos cambiar nada aquí ya que todo lo que cambiemos en esta carpeta se machacará con cada cambio que realicemos en la carpeta src que es  donde realmente debemos editar nuestra aplicación.

Veamos ahora varios archivos que se generan al crear un proyecto con ionic 2.

.editorconfig y .gitignore son dos archivos ocultos, así que dependiendo de tu sistema puede que no los veas, están relacionados con la configuración del editor de código y Git, en principio no tenemos que preocuparnos por ellos.

config.xml: El archivo config.xml contiene parámetros que se utilizan cuando se construye un proyecto nativo a partir de un proyecto ionic. Aquí deberemos indicar los permisos especiales que necesite la aplicación y otras configuraciones que puedan ser necesarias.

Ionic.config.json:  Contiene información básica sobre la configuración nuestro proyecto, se utiliza si vas a subir tu aplicación a la plataforma Ionic.io.

package.json: Contiene paquetes y dependencias de nodeJS.

tsconfig.json y tslint.json: Son archivos que contienen información necesaria a la hora de compilar TypeScript, no necesitamos editar estos archivos.

Aunque pueda parecer complicado en realidad la mayoría de los elementos los gestiona automáticamente Ionic y nosotros solo tenemos que preocuparnos de la carpeta src que es donde se va a situar nuestro código. Ocasionalmente puede que tengamos que editar algún archivo fuera del directorio src como el archivo config.xml.

Ahora que ya hemos visto la estructura de un proyecto en ionic 2 vamos a modificar nuestro hola-mundo para que realmente diga “hola mundo”.

Si desplegamos el directorio src podemos ver la carpeta pages, en está carpeta es donde se van a alojar todas la páginas que contenga nuestra aplicación. Para que nos entendamos una página será como una vista o un pantalla de nuestra aplicación.

Al crear un proyecto con la plantilla blank ionic genera por defecto un página llamada home, que como su propio nombre indica es la página inicial que se va a mostrar al iniciar nuestra aplicación. Esta página la podemos mantener como página principal y modificarla, o podemos eliminarla y crear otra con el nombre que nosotros queramos. De momento vamos a mantener la que nos ha creado por defecto y vamos a modificar su contenido.

Carpeta pages dentro de src.
Carpeta pages dentro de src.

Como podemos ver dentro de la carpeta de la página home que nos ha creado hay tres archivos:

El archivo home.html que contiene la plantilla html de la página.
El archivo home.scss que contiene el archivo sass donde podremos modificar el estilo de los componentes de la página.
El archivo home.ts que es el archivos typescript que contiene el controlador de la página, donde definiremos el comportamiento de la misma, como por ejemplo la función con la lógica a ejecutarse cuando se pulse sobre un botón de la página etc. Veremos mas adelante en profundidad cada una de las partes de una página.

Modificando nuestro hola mundo

Si abrimos el archivo home.html veremos que contiene algo como esto:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

Contenido home.html.

Las páginas se pueden crear utilizando html puro, sin embargo aquí podemos ver algunas etiquetas que no corresponden con las etiquetas html “estándar”. Lo que vemos aquí son componentes de ionic.

Ionic nos ofrece una amplia gama de componentes listos para utilizar y que nos facilitarán la labor de crear nuestra interfaz de usuario con un estilo atractivo y profesional.
Iremos viendo  diferentes componentes de ionic según los vayamos necesitando a lo largo de este tutorial. En este enlace podéis consultar en la documentación oficial de ionic los componentes disponibles con pequeños ejemplos de como implementarlos: https://ionicframework.com/docs/v2/components/

Todos los componentes de ionic comienzan con el prefijo “ion-“.

Como ionic está basado en Angular 2  si en algún caso no nos es suficiente con los componentes que nos ofrece ionic podríamos crear nuestros propios componentes personalizados de la misma manera que en angular 2, aunque en la mayoría de los casos no será necesario ya que ionic nos ofrece una amplia gama de componentes para poder desarrollar nuestras aplicaciones.
Veremos mas sobre componentes en posteriores capítulos.

En la página principal (y única de momento) de nuestro proyecto hola-mundo vemos que tenemos los siguientes componentes:

  • ion-header: Cabecera.
  • ion-navbar: Barra de navegación.
  • ion-title: Título.
  • ion-content: Contenido de la página.

Bien, vamos a cambiar el contenido de ion-title por “Hola Mundo”, también vamos a borrar todo lo que hay dentro de la etiqueta ion-content y vamos a poner orgullosos “<h1>¡¡¡¡Hola mundo!!!!<h1>”, así el código de home.html debería quedar de la siguiente manera:

<ion-header>
  <ion-navbar>
    <ion-title>
      Hola Mundo
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <h1>¡¡¡¡Hola Mundo!!!!</h1>
</ion-content>

Contenido modificado de home.html.

 Si desde el terminal,escribimos ionic serve -l para ver desde el navegador como queda en las tres plataformas nuestra aplicación veremos algo como esto:

Nuestro Hola Mundo en acción.
Nuestro Hola Mundo en acción.

Ahora ya si podemos ver nuestro Autentico Hola Mundo en acción.

En el siguiente capitulo veremos como implementar la lógica de una página en el controlador, para ello construiremos un minijuego de acertar números con ionic.

P.D: si no quieres perderte los próximos capítulos del tutorial ¡suscribete a mi blog! 😉

Ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra: