Archivo de la etiqueta: ionic 2 modal

Tutorial de Ionic – Crear una aplicaci贸n para guardar nuestros sitios geolocalizados – Parte 6 – Mostrar detalles del sitio guardado y abrir navegador gps para llegar a el.

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos, en el post anterior聽vimos como guardar nuestros sitios en la base de datos y como mostrar los sitios que tenemos guardados en la p谩gina listado.

Hoy vamos a mostrar el detalle del sitio聽al pulsar sobre el en el listado. La idea es que nos muestre la direcci贸n, la foto y la descripci贸n que hayamos introducido, adem谩s vamos a a帽adir un bot贸n de “Como llegar” para que nos abra el navegador gps del m贸vil con la direcci贸n hac铆a dicho sitio. Ya no volveremos a olvidar donde hemos aparcado el coche, o podremos recordar como volver a ese restaurante que tanto nos gust贸.

Lo primero que tenemos que hacer es crear un nuevo modal con ionic generator:

ionic g page modalDetalleSitio

Ahora en listado.ts debemos importar el componente聽ModalController聽 de la librer铆a ionic-angular, por lo tanto despu茅s de NavController y NavParams importamos tambi茅n ModalController.

import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';

Debemos inyectar tambi茅n en el constructor el componente ModalController al que hemos llamado modalCtrl:

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public modalCtrl : ModalController,
    public db: DbProvider) { ......

Ahora ya podemos crear un m茅todo en listado.ts聽para abrir el modal que acabamos de crear pasandole como par谩metro el sitio que queremos mostrar:

muestraSitio(sitio){
      let modalSitio = this.modalCtrl.create( 'ModalDetalleSitioPage', sitio );
      modalSitio.present();
   }

Vamos a modificar el listado para que al pulsar sobre un sitio de la lista se abra el modal por lo tanto editamos listado.html y a帽adimos lo siguiente:

<!--
聽聽Generated template for the Listado page.

聽聽See http://ionicframework.com/docs/components/#navigation for more info on
聽聽Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Listado</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-list>
  <ion-item *ngFor="let sitio of sitios" (click)="muestraSitio(sitio)">
    <ion-thumbnail item-left>
      <img [src]="sitio.foto">
    </ion-thumbnail>
    <h2>{{ sitio.address }}</h2>
    <p>{{ sitio.description }}</p>
  </ion-item>
</ion-list>
</ion-content>

Con esto llamamos al m茅todo muestraSitio que acabamos de definir en el controlador listado.ts聽y le pasamos como par谩metro el sitio sobre el se ha hecho click.

Ahora vamos a editar el archivo modal-detalle-sitio.ts聽y vamos a importar e inyectar en en constructor el elemento聽ViewController聽que lo utilizaremos para poder cerrar el modal:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

/**
聽* Generated class for the ModalDetalleSitio 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 {

  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl : ViewController) {
}

...

Vamos a crear tambi茅n una funci贸n para cerrar el modal a la que luego llamaremos desde el bot贸n de cerrar de la vista:

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

Ahora vamos a crear una variable miembro llamada sitio donde vamos a guardar el objeto con los datos del sitio que recibimos desde NavParams como par谩metro al abrir el modal desde la p谩gina listado:

...
export class ModalDetalleSitioPage {

聽聽sitio: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl : ViewController) {
      this.sitio = this.navParams.data;
}

...

Ahora ya estamos listos para poder mostrar los datos del sitio el la vista, as铆 que editamos el archivo聽modal-detalle-sitio.html聽e introducimos el siguiente c贸digo:

<!--
聽聽Generated template for the ModalDetalleSitio page.

聽聽See http://ionicframework.com/docs/components/#navigation for more info on
聽聽Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>{{ sitio.address }}</ion-title>
     <ion-buttons start>
      <button ion-button (click)="cerrarModal()">
        <ion-icon name="md-close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-card>
    <img [src]="sitio.foto" *ngIf="sitio.foto" />
    <ion-card-content>
       <ion-item text-wrap>
          <h2>{{ sitio.address }}</h2>
           <p>{{ sitio.description }}</p>
        </ion-item>
    </ion-card-content>
    <ion-row>
      <ion-col text-center>
         <button ion-button icon-left clear small (click)="comoLlegar()">
           <ion-icon name="navigate"></ion-icon>
           <div>Como llegar</div>
         </button>
      </ion-col>
    </ion-row>
</ion-card>
</ion-content>

Como t铆tulo del modal hemos puesto la direcci贸n que est谩 almacenada en sitio.address.

Despu茅s a帽adimos el bot贸n para cerrar el modal, para ello le indicamos que en el evento click llame a la funci贸n cerrarModal que hemos definido en el controlador.

Despu茅s dentro de ion-content 聽creamos un elemento ion-card y dentromostramos la foto solo si existe con el condicional *ngIf.

Despu茅s dentro de ion-card-content 聽mostramos la direcci贸n y la descripci贸n.

Por 煤ltimo creamos un bot贸n con un icono de tipo navigate dentro de un elemento ion-col que a su vez esta dentro de un elemento ion-row. Hacemos esto para conseguir que el bot贸n se muestre centrado gracias a la propiedad text-center que hemos a帽adido a la etiqueta ion-col.

Para saber m谩s sobre los componentes disponibles en ionic pod茅is una vez m谩s leer la documentaci贸n oficial de ionic:聽https://ionicframework.com/docs/components/

Como podemos observar en el evento click del bot贸n llamamos a la funci贸n comoLlegar().

La idea es que cuando pulsemos en el bot贸n nos habr谩 el navegador gps que tengamos instalado por defecto en el m贸vil para indicarnos la ruta a seguir para llegar al lugar.

Vamos 聽ello vamos a crear la funci贸n comoLlegar en el controlador.

Aunque podr铆amos utilizar la funci贸n聽que ya expliqu茅 en est茅 post perteneciente a la serie de posts que publiqu茅 hace tiempo sobre google maps, vamos a utilizar en su lugar el plugin LaunchNavigator que ya nos ofrece esta funcionalidad de forma nativa (gracias a聽writ3r聽por el aporte).

Lo primero que debemos hacer es instalar el plugin escribiendo los siguientes comandos desde consola:

ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
npm install --save @ionic-native/launch-navigator

Ahora debemos importar y declarar el plugin en app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { Geolocation } from '@ionic-native/geolocation';
import { Camera } from '@ionic-native/camera';
import { DbProvider } from '../providers/db/db';
import { SQLite } from '@ionic-native/sqlite';
import { LaunchNavigator } from '@ionic-native/launch-navigator';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Geolocation,
    Camera,
    DbProvider,
    SQLite,
    LaunchNavigator

  ]
})
export class AppModule {}

Ahora editamos 聽el archivo modal-detalle-sitio.ts, importamos el plugin LauchNavigator, lo inyectamos en el constructor 聽y a帽adimos el m茅todo comoLlegar:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { LaunchNavigator } from '@ionic-native/launch-navigator';

/**
聽* 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;

  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl : ViewController, private launchNavigator : LaunchNavigator) {
     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)
    );

 }
}

El m茅todo navigate de launchNavigator recibe como par谩metro la direcci贸n donde queremos llegar, en este caso las coordenadas separadas por una coma que tenemos en las variables this.sitio.lat y this.sitio.lng.

Si ejecutamos nuestra aplicaci贸n en en m贸vil obtendremos algo como esto al entrar en el detalle de un sitio de la lista:

Modal detalle del sitio
Modal detalle del sitio

Bien , por hoy lo dejamos aqu铆, ya podemos guardar nuestros sitios favoritos, o recordar donde hemos aparcado el coche por ejemplo, podemos mostrar los sitios que hemos guardado y podemos abrir el navegador gps para poder llegar asta el lugar.

Aunque se puede mejorar mucho esta aplicaci贸n, ya podemos decir que es funcional y nos ha servido para aprender muchos conceptos sobre ionic. Como siempre os animo a que experiment茅is y trat茅is de mejorar la app por vuestra cuenta ya que es una magnifica forma de aprender y mejorar.

En el pr贸ximo post聽seguiremos desarrollando la app y veremos como modificar un sitio guardado.

 

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Tutorial de Ionic – Crear una aplicaci贸n para guardar nuestros sitios geolocalizados – Parte 5 – Guardando nuestros sitios en una base de datos local

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

En el post anterior聽obtuvimos la direcci贸n a partir de las聽coordenadas, creamos el formulario para introducir la descripci贸n del lugar y aprendimos a sacar fotograf铆as con nuestro m贸vil, bien, todo esto nos vale de muy poco si cuando cerramos la aplicaci贸n perdemos toda esta informaci贸n.

Para poder guardar nuestros sitios y que sigan all铆 para poder consultarlos siempre que queramos tenemos que almacenarlos en una base de datos local en el dispositivo.

Provider

Antes de nada vamos a introducir un concepto nuevo, para manejar los datos que introduciremos y extraeremos de la base de datos vamos a utilizar un聽provider.

Los providers son proveedores que se encargan del manejo de datos, bien extra铆dos de la base de datos, desde una API REST, etc.

Para crear un provider acudimos una vez m谩s a ionic generator con el comando 聽ionic g provider.

Para crear un proveedor para gestionar nuestra base de datos de sitios escribimos desde consola:

ionic g provider db

Esto nos crear谩 un archivo typescript con el nombre del proveedor que聽hemos creado, en este caso db.ts dentro de la carpeta providers.

Por supuesto聽pod茅is dar el nombre que dese茅is al provider que acabamos que crear, no tiene por que ser 聽“db”.

Vamos a echar un vistazo al c贸digo que se ha generado聽por defecto en聽db.ts:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

/*
聽聽Generated class for the Db provider.

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

  constructor(public http: Http) {
    console.log('Hello Db Provider');
  }

}

Por defecto al crear un provider importa Http ya que los providers pueden ser utilizados para obtener datos des una petici贸n a un servicio mediante Http, sin embargo como lo vamos a utilizar para gestionar nuestra base de datos no lo necesitamos y podemos eliminarlo, tambi茅n debemos eliminarlo del constructor. Tampoco vamos a necesitar el “import ‘rxjs/add/operator/map'”, por lo que podemos eliminarlo tambi茅n.

Para crear una base de datos vamos a utilizar SQlite, as铆 que lo primero que necesitamos es instalar el plugin escribiendo desde consola:

ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic-native/sqlite

Recuerda que si est谩 utilizando Linux o Mac necesitar谩s utilizar sudo por delante.

Una vez instalado el plugin ya podemos importarlo聽聽en nuestro provider desde ionic-native.
Para poder utilizarlo 聽inyectamos la dependencia SQLite en el constructor, adem谩s vamos a crear una variable miembro llamada db donde se guardar谩 el manejador de la base de datos una vez establecida la conexi贸n :

import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

/*
聽聽Generated class for the Db provider.

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

  db : SQLiteObject = null;
  constructor(public sqlite: SQLite) {
    console.log('Hello Db Provider');
  }

...
Ahora vamos a crear en nuestro provider un m茅todo para crear/abrir la base de datos:
public openDb(){
      return this.sqlite.create({
          name: 'data.db',
          location: 'default' // el campo location es obligatorio
      })
      .then((db: SQLiteObject) => {
       this.db =db;
     })
  }

Como vemos utilizamos el m茅todo openDatabase al cual le pasamos como par谩metro un objeto especificando el nombre y la localizaci贸n.El campo location lo dejamos en ‘default’.

Este m茅todo crea la base de datos si no existe y abre la conexi贸n.
Si todo ha ido bien聽resuelve la promesa pasandonos como par谩metro el manejador de la base de datos que es de tipo SQLiteObject, se lo asignamos a this.db para poder utilizarlo en las funciones que vamos a crear.

Ahora vamos a crear una tabla con los campos que vamos a necesitar para guardar nuestros sitios con los campos que necesitamos:

public createTableSitios(){
    return this.db.executeSql("create table if not exists sitios( id INTEGER PRIMARY KEY AUTOINCREMENT, lat FLOAT, lng FLOAT, address TEXT, description TEXT, foto TEXT )",{})
  }

Si ya has trabajado antes con otras bases de datos como por ejemplo MySQL聽聽no te costar谩 trabajo entender como funciona SQLite聽ya que la sintaxis es muy similar aunque con algunas limitaciones.

En este caso nuestra tabla va a tener un campo id聽de tipo integer que sera la clave primaria, un campo lat聽de tipo float donde guardaremos la latitud de las coordenadas, un campo lng de tipo float聽donde guardaremos la longitud, un campo address de tipo text para guardar la direcci贸n, un campo llamado description de tipo text donde guardaremos la descripci贸n del sitio y por 煤ltimo un campo foto tambi茅n de tipo text donde guardaremos la foto en formato base 64.

Para continuar vamos a crear un m茅todo para guardar nuestros sitios:

public addSitio(sitio){
    let sql = "INSERT INTO sitios (lat, lng, address, description, foto) values (?,?,?,?,?)";
    return this.db.executeSql(sql,[sitio.lat,sitio.lng,sitio.address,sitio.description,sitio.foto]);
  }

En la sql definimos el insert con los campos de la tabla que vamos a introducir y en los valores ponemos interrogaciones ‘?’, 聽luego en el m茅todo execute pasamos como primer par谩metro la sql y como segundo un array con los valores que corresponden a los campos donde van las interrogaciones, es decir hay que poner el valor de los campos en el mismo orden. El valor de los campos lo recibimos como par谩metro en el objeto sitio. Cuando posteriormente llamemos a la funci贸n addSitio le tendremos que pasar un objeto con todos los campos.

Para poder utilizar el provider聽 y SQLite debemos importar ambos en聽app.module.ts聽y declararlos en la secci贸n providers, ionic generator nos ha a帽adido autom谩ticamente nuestro provider DbProvider en app.module.ts as铆 que solo tenemos que preocuparnos de importar y declarar Sqlite:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { Geolocation } from '@ionic-native/geolocation';
import { Camera } from '@ionic-native/camera';
import { DbProvider } from '../providers/db/db';
import { SQLite } from '@ionic-native/sqlite';


@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Geolocation,
    Camera,
    DbProvider,
    SQLite
  ]
})
export class AppModule {}

Vamos a importar nuestro provider tambi茅n en聽app.component.ts聽y vamos a abrir la base de datos y crear la tabla en聽platform.ready聽para asegurarnos de que el plugin SQlite聽ya se ha cargado antes de utilizarlo:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { DbProvider } from '../providers/db/db';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'MisTabsPage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public db: DbProvider) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
        this.db.openDb()
       .then(() => this.db.createTableSitios())

    });
  }
}

Por 煤ltimo importamos el provider en la p谩gina donde vamos a utilizarlo, en este caso en modal-nuevo-sitio.ts,tambi茅n聽debemos inyectarlo en el constructor :

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';



/**
聽* Generated class for the ModalNuevoSitio 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) {
  }

...

Si recordamos el post anterior, en la vista 聽modal-nuevo-sitio.html, en el evento聽ngSubmit聽del formulario llam谩bamos a la聽funci贸n聽guardarSitio().
Vamos a definir esta funci贸n en el controlador del modal en el archivo聽modal-nuevo-sitio.ts:

guardarSitio(){
    let sitio = {
聽聽聽聽聽聽lat: this.coords.lat,
聽聽聽聽聽聽lng: this.coords.lng ,
聽聽聽聽聽聽address: this.address,
聽聽聽聽聽聽description: this.description,
聽聽聽聽聽聽foto: this.foto
    }
    this.db.addSitio(sitio).then((res)=>{
      this.cerrarModal();
     /*  alert('se ha introducido correctamente en la bd'); */
    },(err)=>{ /* alert('error al meter en la bd'+err) */ })
}

Bien, como podemos observar en el c贸digo lo que hacemos es crear un objeto llamado sitio al que le asignamos los valores que tenemos recogidos.

Recuerda que el聽valor de la descripci贸n 聽se refleja autom谩ticamente el la variable this.description 聽que tenemos definida en el controlador al utilizar [(ngModel)], las coordenadas y la direcci贸n ya las ten铆amos recogidas y la foto se le asigna a this.foto en el momento de sacarla.

Despu茅s llamamos al m茅todo addSitio que hemos definido en nuestro provider聽pas谩ndole como par谩metro el objeto sitio.

Si todo ha ido bien聽cerramos el modal.

Bien, en este punto ya podemos guardar nuestros sitios en la base de datos, ahora nos toca poder sacar y mostrar un listado de los sitios que hemos guardado.

Para ello lo primero que vamos a hacer es crear un nuevo m茅todo en nuestro provider para obtener los sitios que tenemos guardados en la base de datos, por lo tanto editamos el archivo db.ts聽y a帽adimos el m茅todo聽getSitios:

import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

/*
聽聽Generated class for the Db provider.

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

  db : SQLiteObject = null;
  constructor(public sqlite: SQLite) {
    console.log('Hello Db Provider');
  }

  public openDb(){
      return this.sqlite.create({
          name: 'data.db',
          location: 'default' // el campo location es obligatorio
聽聽聽聽聽聽})
聽聽聽聽聽聽.then((db: SQLiteObject) => {
聽聽聽聽聽聽聽this.db =db;
聽聽聽聽聽})
聽聽}

聽聽public createTableSitios(){
聽聽聽聽return this.db.executeSql("create table if not exists sitios( id INTEGER PRIMARY KEY AUTOINCREMENT, lat FLOAT, lng FLOAT, address TEXT, description TEXT, foto TEXT )",{})
聽聽}

聽聽public addSitio(sitio){
聽聽聽聽let sql = "INSERT INTO sitios (lat, lng, address, description, foto) values (?,?,?,?,?)";
聽聽聽聽return this.db.executeSql(sql,[sitio.lat,sitio.lng,sitio.address,sitio.description,sitio.foto]);
聽聽}

聽聽public聽getSitios(){
聽聽聽聽let sql = "SELECT * FROM sitios";
聽聽聽聽return this.db.executeSql(sql,{});
聽聽}

}

Ha llegado el momento de mostrar nuestros sitios en la p谩gina listado, as铆聽que editamos el archivo listado.ts聽yvamos a importar el provider DbProvider en el controlador de la p谩gina listado, debemos una vez m谩s inyectar DbProvider en el constructor, tambi茅n vamos a crear una variable miembro llamada sitios聽 de tipo any que contendr谩 un array con todos los sitios que tenemos guardados:

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


/**
聽* Generated class for the Listado 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 Listado {
  sitios: any;

  constructor(public navCtrl: NavController, public navParams: NavParams,public db : DbProvider) {
  }

...

Ahora necesitamos extraer nuestros sitios de la base de datos cuando accedamos a la p谩gina del listado, podr铆amos hacerlo en el evento聽ionViewDidLoad聽que se ejecuta al cargar la p谩gina, el problema es que al contrario del modal, que se carga cada vez que lo llamamos, las paginas que se muestran al cambiar de pesta帽a se cargan una 煤nica vez al inicio, por lo que si guardamos nuevos sitios estos no se refrescaran a no ser que cierres la aplicaci贸n y la vuelvas a abrir.

Este es por lo tanto un buen momento para incorporar un nuevo concepto:

Ciclo de vida de una p谩gina

Cuando generamos una p谩gina con ionic generator vemos que nos crea por defecto el m茅todo ionViewDidLoad().

Como ya hemos comentado este m茅todo se ejecuta cuando la p谩gina se ha cargado:

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

Vamos a ver los m茅todos con los que cuenta ionic聽en funci贸n de los eventos del ciclo de vida de una p谩gina:

  • ionViewDidLoad:
    Se ejecuta cuando la p谩gina se ha terminado de cargar.
    聽聽聽Este evento s贸lo ocurre una vez por p谩gina cuando se est谩 creando.
    聽 聽
  • ionViewWillEnter:聽
    聽聽聽Se ejecuta cuando la p谩gina est谩 a punto de entrar y convertirse en la p谩gina activa.

  • ionViewDidEnter:
    聽聽聽Se ejecuta cuando la p谩gina ha sido cargada y ahora es la p谩gina activa.
    聽聽
  • ionViewWillLeave:
    聽聽聽Se ejecuta cuando se est谩 a punto de salir de la p谩gina y ya no ser谩 la p谩gina activa.

  • ionViewDidLeave:
    聽聽聽Se ejecuta cuando se ha salido de forma completa de la p谩gina
    聽聽聽y ya no es la p谩gina activa.

  • ionViewWillUnload:
    聽聽聽Se ejecuta cuando la p谩gina est谩 a punto de ser destruida,
    聽聽聽ella y todos sus elementos.

Bien, una vez sabido esto, vamos a cargar nuestros sitios en el evento聽ionViewDidEnter, es decir cada vez que entremos en la p谩gina, una vez se ha cargado y est谩 activa.

A帽adimos el m茅todo ionViewDidEnter al controlador de la p谩gina listado en el archivo listado.ts聽y hacemos聽la llamada para extraer nuestros sitios de la base de datos:

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


/**
聽* Generated class for the Listado 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) {
  }

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

  ionViewDidEnter(){
     this.db.getSitios().then((res)=>{
    this.sitios = [];
    for(var i = 0; i < res.rows.length; i++){
        this.sitios.push({
          id: res.rows.item(i).id,
          lat: res.rows.item(i).lat,
          lng: res.rows.item(i).lng,
          address: res.rows.item(i).address,
          description: res.rows.item(i).description,
          foto: res.rows.item(i).foto
        });
    }

    },(err)=>{ /* alert('error al sacar de la bd'+err) */ })
   }

}

Al llamar a this.db.getSitios obtenemos una promesa donde en res聽obtenemos el recurso devuelto por la base de datos. No podemos acceder directamente a los registros extraidos de la base de datos, debemos llamar a聽res.rows.item, y pasarle entre par茅ntesis el indice del elemento que queremos obtener, para ello recorremos聽res.rows mediante un bucle for y a帽adimos cada聽item al array this.sitios.

Al finalizar el bucle 聽this.sitios contendr谩 un array con todos los sitios que hemos guardados en la base de datos.

Ahora solo nos queda mostrarlos en el listado:

Vamos a editar la vista de la p谩gina listado, para ello abrimos el archivo listado.html, borramos el texto provisional que ten铆amos y lo dejamos de la siguiente manera:

<!--
聽聽Generated template for the Listado page.

聽聽See http://ionicframework.com/docs/v2/components/#navigation for more info on
聽聽Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Listado</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
<ion-list>
  <ion-item *ngFor="let sitio of sitios">
    <ion-thumbnail item-left>
      <img [src]="sitio.foto">
    </ion-thumbnail>
    <h2>{{ sitio.address }}</h2>
    <p>{{ sitio.description }}</p>
  </ion-item>
</ion-list>
</ion-content>

Como vemos dentro de ion-content聽hemos creado un elemento ion-list, despu茅s con *ngFor聽recorremos nuestro array de sitios creando un elemento ion-item por cada iteraci贸n.

Con ion-thumbnail mostramos una miniatura de la foto del sitio, despues聽mostramos la direcci贸n y la descripci贸n.

Como veis no tiene mayor dificultad. Si quer茅is saber m谩s sobre el componente ion-list y sus posibilidades pod莽eis consultar la documentaci贸n oficial siguiendo este enlace:

https://ionicframework.com/docs/components/#lists

Si todo ha ido bien la pantalla listado deber铆a tener un aspecto similar a este, bueno… tal vez en tus fotos no salga un gato ;-P

 

Recordad que como estamos utilizando plugins nativos necesitamos ejecutar la aplicaci贸n en un emulador o en un dispositivo f铆sico escribiendo en consola:

ionic cordova run android

Esto es todo de momento, hoy hemos aprendido como guardar datos en una base de datos local con SQLite, hemos aprendido a crear un provider para utilizarlo como servicio para gestionar los accesos a la base de datos y hemos aprendido como funcionan los ciclos de vida de un p谩gina.

En el siguiente post聽seguiremos avanzando con nuestra app. Hay muchas cosas que se pueden mejorar, aqu铆 solo pretendo explicar los conceptos b谩sicos para que pod谩is crear vuestras propias aplicaciones. Os animo a que experiment茅is y trat茅is de mejorar la app, es sin duda la mejor forma de aprender. Pod茅is compartir vuestra experiencias en los comentarios y as铆 ayudar a los que tengan alg煤n problema.

 

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Tutorial de Ionic – Crear una aplicaci贸n para guardar nuestros sitios geolocalizados – Parte 4 – Mostrando la direcci贸n a partir de las coordenadas y sacando foto con la c谩mara.

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

En el post anterior vimos como poner un marcador al mapa, aprendimos a utilizar los botones FAB y aprendimos a utilizar ventanas modales.

Hoy vamos a continuar desarrollando nuestra app, vamos a crear un peque帽o formulario en el modal donde mediante una llamada a la api de google maps obtendremos y mostraremos la direcci贸n a partir de las coordenadas y permitiremos introducir una descripci贸n y 聽tambi茅n tomar una fotograf铆a del lugar.

Bien, vayamos por partes:

Ahora vamos聽a a帽adir al controlador del modal tres variables nuevas que vamos a necesitar:

  • Una聽variable de tipo string聽 que vamos a llamar address聽donde聽guardaremos la direcci贸n que luego mostraremos en la vista.
  • Una variable de tipo string a la que vamos a llamar description y que contendr谩 la descripci贸n del lugar que introduzcamos desde el formulario.
  • Por 煤ltimo una variable de tipo any que vamos a llamar foto, donde guardaremos una foto del lugar codificada en base 64.

Por lo tanto editamos el controlador de nuestro modal (modal-nuevo-sitio.ts) encima del constructor de la clase despu茅s de la variable coords聽definimos las siguientes variables:

...

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) {}

...

Para obtener la direcci贸n correspondiente a unas coordenadas Google maps cuenta con el elemento Geodecoder.聽

Vamos a ver brevemente como funciona Google Maps 聽Geodecoder:

Para realizar una petici贸n debemos crear un objeto dela clase Geodecoder y llamar al m茅todo geodecode pasandole las coordenadas y una funci贸n callback donde recibimos los datos en caso de tener 茅xito y el estado de la petici贸n:

var geocoder = new google.maps.Geocoder();

geocoder.geocode({'location': coords} , function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
       // en results tenemos lo que nos devuelve la llamada;
    } else {
      // Ha habido alg煤n error
    }
});

Para obtener los resultados tenemos pasarle una funci贸n callback, sin embargo lo que nos interesa en que nos devuelva una promesa que es la mejor manera de gestionar las peticiones as铆ncronas desde el controlador.

Creando nuestras propias promesas

Ya vimos en el capitulo anterior como se tratan las funciones que nos devuelve una promesa utilizando then, pero si queremos que una funci贸n que creemos nosotros devuelva una promesa tenemos que devolver un objeto Promise donde la promesa se crea a partir de una funci贸n聽callback en el que ejecutaremos la sentencia que nos devolver谩 el resultado as铆ncrono y 聽llamaremos a las funciones pasadas como argumento resolve y reject. Si la operaci贸n se a ejecutado correctamente se llama a resolve, y si a ocurrido un error llamamos a reject.

Sabiendo esto para conseguir que geodecode nos devuelva la direcci贸n en una promesa tenemos que utilizar un peque帽o truco que consiste en crear una funci贸n聽que vamos a llamar getAddress聽y que haremos que nos devuelva una promesa con el resultado de la llamada a geodecode, para ello editamos el archivo modal-nuevo-sitio.ts a帽adimos la siguiente funci贸n en el controlador:

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);
            }
        });
    });
}

Como podemos ver la funci贸n retorna una promesa donde se le pasa como par谩metro una funci贸n con resolve y reject, luego dentro de la funci贸n se ejecuta la llamada a geodecoder.geodecode pas谩ndole las coordenadas y la funci贸n callback donde si se ha recibido como status聽google.maps.GeocoderStatus.OK significa que hemos recibido correctamente los datos y entonces ejecutamos resolve, de lo contrario ejecutamos reject.

De esta manera podemos hacer que geodecode nos devuelva una promesa.

Nota: al igual que hicimos en la pagina de inicio, para que聽Typescript no de error por no reconocer la clase google cuando la llamemos desde la funci贸n que vamos a crear, vamos a declarar la variable google justo debajo de los imports con declare聽var聽google:聽any;聽

Ahora en el m茅todo ionViewDidLoad聽que se ejecuta cuando la p谩gina se ha cargado vamos ha hacer una llamada a getAddress聽pas谩ndole las coordenadas que hemos recibido para obtener la direcci贸n y asign谩rsela a this.address:

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
      });
  }

Un ejemplo de la estructura de datos que recibimos en聽results聽ser铆a:

{
聽"results": [ {
聽"types": street_address,
聽"formatted_address": "Etorbidea Abandoibarra, 2, 48001 Bilbo, Bizkaia, Espa帽a",
聽"address_components": [ {
聽"long_name": "2",
聽"short_name": "2",
聽"types": street_number
聽}, {
聽"long_name": "Etorbidea Abandoibarra",
聽"short_name": "Etorbidea Abandoibarra",
聽"types": route
聽}, {
聽"long_name": "Bilbo",
聽"short_name": "Bilbo",
聽"types": [ "locality", "political" ]
聽}, {
聽"long_name": "Bizkaia",
聽"short_name": "BI",
聽"types": [ "administrative_area_level_2", "political" ]
聽}, {
聽"long_name": "Euskadi",
聽"short_name": "PV",
聽"types": [ "administrative_area_level_1", "political" ]
聽}, {
聽"long_name": "Espa帽a",
聽"short_name": "ES",
聽"types": [ "country", "political" ]
聽}, {
聽"long_name": "48001",
聽"short_name": "48001",
聽"types": postal_code
聽} ],
 "geometry": {
聽"location": {
聽"lat": 43.26861,
聽"lng": -2.934380000000033
聽},
 "location_type": "ROOFTOP",
 "viewport": {
聽"southwest": {
聽"lat": 43.26726101970851, 
聽"lng": -2.9357289802915147
聽},
 "northeast": {
聽"lat": 43.26995898029151,
聽"lng": -2.933031019708551
聽}
 }
 }
 } ]
}

Lo que nos interesa obtener que es la direcci贸n completa se encuentra en results[0][‘formatted_address’], por lo tanto 聽le asignamos este dato a this.address.

Mostrando las coordenadas y la 聽direcci贸n.

Ahora vamos a a帽adir en la vista un componente ion-card聽 donde mostraremos las coordenadas y la direcci贸n donde nos encontramos, editamos el archivo modal-nuevo-sitio.html聽para que quede de la siguiente manera:

<!--
聽聽Generated template for the ModalNuevoSitio page.

聽聽See http://ionicframework.com/docs/v2/components/#navigation for more info on
聽聽Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Nuevo sitio</ion-title>
    <ion-buttons start>
      <button ion-button (click)="cerrarModal()">
        <ion-icon name="md-close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header>
      Localizaci贸n actual
    </ion-card-header>
    <ion-card-content>
      <p><strong>lat:</strong>{{ coords.lat}}<br/>
      <strong>lng:</strong>{{coords.lng }}</p>
      <hr>
      <p>{{ address }}</p>
    </ion-card-content>
  </ion-card>
</ion-content>

Como pod茅is observar hemos creado un componente ion-card que consta a su vez de un elemento ion-card-header donde ponemos como t铆tulo “Localizaci贸n 聽actual”, y en ion-car-content pondremos el contenido que queremos mostrar, en este caso mostramos un elemento <p> donde mostramos el valor de las variables coords.lat y coords.lng que hemos definido en el controlador y que contendr谩n las coordenadas actuales.

Por otro lado mostramos otro elemento <p> con el contenido de la variable address que de momento no contiene nada pero que contendr谩 la direcci贸n que corresponda con las coordenadas que hemos recogido.

Al pulsar en el FAB se abrir谩 el modal mostrando algo similar a esto:

Modal con las coordenadas y a direcci贸n
Modal con las coordenadas y a direcci贸n

Creando el formulario.

Vamos a seguir a帽adiendo elementos a la vista del modal. Adem谩s de las coordenadas y la direcci贸n queremos dar la posibilidad de tomar una foto del lugar y escribir anotaciones.
Para ello vamos a crear dentro del card, debajo de la direcci贸n un peque帽o formulario donde habr谩 un bot贸n para sacar una foto y un campo text-area para 聽escribir una descripci贸n del lugar.

Editamos de nuevo modal-nuevo-sitio.html聽y a帽adimos lo que est谩 marcado de amarillo:

<!--
聽聽Generated template for the ModalNuevoSitio page.

聽聽See http://ionicframework.com/docs/v2/components/#navigation for more info on
聽聽Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Nuevo sitio</ion-title>
    <ion-buttons start>
      <button ion-button (click)="cerrarModal()">
        <ion-icon name="md-close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header>
     <strong>Localizaci贸n actual</strong>
    </ion-card-header>
    <ion-card-content>
      <p><strong>lat:</strong>{{ coords.lat}}<br/>
      <strong>lng:</strong>{{coords.lng }}</p>
      <hr>
      <p>{{ address }}</p>
      <hr/>
      <form (ngSubmit)="guardarSitio()">
      <ion-item>
        <img [src]="foto" *ngIf="foto" />
        <button ion-button icon-left full type="button" (tap)="sacarFoto()">
          Foto&nbsp;&nbsp;
          <ion-icon name="camera"></ion-icon>
        </button>
      </ion-item>
      <hr/>
      <ion-item>
        <ion-label>Descripci贸n</ion-label>
        <ion-textarea [(ngModel)]="description" name="description"></ion-textarea>
      </ion-item>
      <button ion-button type="submit" block>Guardar Sitio</button>
    </form>
    </ion-card-content>
    </ion-card>
</ion-content>

Como vemos al formulario le hemos a帽adido (ngSubmit), con esto le indicamos que cuando se ejecute el evento submit del formulario se ejecute la funci贸n guardarSitio definida en el controlador.

Despu茅s hemos a帽adido un elemento ion-item, donde vamos a mostrar la imagen con la fotograf铆a que tomemos:

<img [src]="foto" *ngIf="foto" />

Por un lado con [src] le indicamos que la imagen va a mostrar lo que contenga la variable foto, que hemos definido el el controlador y que al principio estar谩 vac铆a, y por otro lado con *ngIf le indicamos que solo se muestre la imagen si dicha variable foto tiene un valor, es decir聽que solo se mostrar谩 una vez hayamos tomado la fotograf铆a.

Despu茅s tenemos un bot贸n que al pulsar llama a la funci贸n sacarFoto que despu茅s definiremos en el controlador:

<button ion-button icon-left full type="button" (tap)="sacarFoto()">
          Foto&nbsp;&nbsp;
          <ion-icon name="camera"></ion-icon>
 </button>

Con icon-left聽le indicamos al bot贸n que el icono se situar谩 a la izquierda, para mostrar el icono despu茅s del texto “Foto” y un par de espacios en blanco “&nbsp;” insertamos el elemento ion-icon聽con 聽el icono camera.

Despu茅s tenemos un campo de tipo ion-textarea聽donde podremos introducir la descripci贸n del sitio:

<ion-item>
    <ion-label>Descripci贸n</ion-label>
    <ion-textarea [(ngModel)]="description" name="description"></ion-textarea>
</ion-item>

Por 煤ltimo tenemos un bot贸n de tipo submit para enviar el formulario. Recordad que cuando pulsemos en este bot贸n se disparar谩 el evento ngSubmit聽y por lo tanto se ejecutar谩 la funci贸n guardarSitio聽tal y como hemos definido en la etiqueta form.

Utilizando la c谩mara del tel茅fono m贸vil

Ahora vamos a ver como sacar una foto y para que se muestre en la etiqueta img que hemos creado:

Para poder utilizar la c谩mara del m贸vil tenemos que instalar el plugin cordova-plugin-camera con el siguiente comando:

ionic cordova plugin add cordova-plugin-camera --save
npm install --save @ionic-native/camera

Ahora el controlador del modal (modal-nuevo-sitio.ts) tenemos聽聽que importar Camera desde ionic-native聽e inyectarlo en el constructor:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

declare var google:any;
/**
聽* Generated class for the ModalNuevoSitio 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) {
  }
...

Tambi茅n debemos importar Camera en聽app.module.ts聽y declararlo como provider:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Geolocation } from '@ionic-native/geolocation';
import { Camera } from '@ionic-native/camera';

import { MyApp } from './app.component';


@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},Geolocation,Camera
  ]
})
export class AppModule {}

Ahora vamos a crear聽el m茅todo sacarFoto en聽en el controlador (modal-nuevo-sitio.ts)聽que se ejecutar谩 al pulsar sobre el bot贸n Foto.

En el archivo modal-nuevo-sitio.ts聽a帽adimos el siguiente c贸digo dentro del controlador:

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);
    });
  }

Para sacar una foto utilizamos el m茅todo getPicture聽pas谩ndole un array de opciones. En las opciones definimos las caracter铆sticas que va a tener la imagen:

  • encodingType:聽Selecciona la codificaci贸n del archivo de imagen devuelto, puede ser JPEG o PNG.
  • targetWidth:聽Anchura de la foto.
  • targetHeight:聽Altura de la foto.
  • destinationType: Define el formato del valor devuelto, puede ser :
    • DATA_URL devuelve la imagen como una cadena codificada en base64.
    • FILE_URI: Crea un archivo con la imagen y devuelve la ruta al archivo.
    • NATIVE_URI: devuelve la ruta nativa al archivo (assets-library:// en iOS o content:// en Android).
  • sourceType: Indica el origen de la foto, puede ser:
    • CAMERA (por defecto).
    • PHOTOLIBRARY
    • SAVEDPHOTOALBUM
  • correctOrientation: Gira la imagen para corregir la orientaci贸n del dispositivo durante la captura.

Puedes visitar el siguiente enlace para conocer聽todas las opciones posibles y saber m谩s sobre el plugin Camera:

https://ionicframework.com/docs/native/camera/

En this.foto聽guardamos la imagen聽codificada en formato base64 que recibimos de la c谩mara, para poder mostrarla como parte de la url en el par谩metro src de la imagen tenemos que a帽adirle聽“data:image/jpeg;base64,”聽por delante.

Por si alguno se ha perdido muestro el contenido completo de como tiene que quedar en estos momentos el archivo聽modal-nuevo-sitio.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,  ViewController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

declare var google:any;

/*
聽聽Generated class for the ModalNuevoSitio page.

聽聽See http://ionicframework.com/docs/v2/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 ) {}

  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);
    });
  }

}

A帽adiendo plataformas

Bien, hasta ahora hemos estado probando nuestra aplicaci贸n en el navegador, sin embargo no podemos probar el plugin camera desde el navegador. Ha llegado la hora de probar nuestra aplicaci贸n en un dispositivo m贸vil.

Lo primero que tenemos que hacer es a帽adir la plataforma en la que queremos probar nuestra aplicaci贸n.

Para a帽adir una plataforma utilizamos el siguiente comando desde consola, recordad que debemos esta siempre dentro de la ios
ionic platform add wp

Por lo tanto si queremos probar nuestra app en android escribiremos:

ionic cordova platform add android

Esto nos crear谩 una carpeta llamada platforms si no estaba creada, y a帽adir谩 una carpeta android con todo el c贸digo necesario para poder generar un archivo apk instalable.

En Mac y Linux tal vez os pida que escrib谩is聽sudo por delante.

Ejecutando nuestra app en el dispositivo m贸vil

Una vez tenemos a帽adida la plataforma si enchufamos nuestro m贸vil con un cable usb a nuestro pc podemos ejecutar la app directamente en el dispositivo con el siguiente comando:

ionic cordova run android

Si no dispon茅is de un dispositivo tambi茅n pod茅is emular la aplicaci贸n utilizando ionic emulate:

ionic cordova emulate android

En ios tambi茅n puedes entrar en la carpeta 聽platforms/ios y abrir el archivo con extensi贸n .xcodeproj desde聽Xcode y ejecutarlo o emularlo聽desde Xcode.

El el m贸vil la app con el modal abierto se ver铆a algo as铆:

Nuestra App funcionando en un dispositivo m贸vil.
Nuestra App funcionando en un dispositivo m贸vil.

Como pod茅is observar mi gato se ha prestado voluntariamente para posar en la foto ;-P

Dependiendo del sistema operativo que utilic茅is en vuestro pc y del dispositivo puede que teng谩is alg煤n 聽problema para que os reconozca el m贸vil, yo no tengo tiempo de investigar cada caso pero googleando seguro que dais con la soluci贸n, 聽os animo a que dej茅is en los comentarios si ten茅is alg煤n problema y que qui茅n encuentre la soluci贸n lo ponga para ayudarnos unos a otros.

Por hoy lo dejamos aqu铆, en el siguiente capitulo veremos como guardar nuestros sitios en una base de datos local en nuestro dispositivo.

 

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso:

Tutorial de Ionic – Crear una aplicaci贸n para guardar nuestros sitios geolocalizados – Parte 3: A帽adiendo FAB, marcador y ventana modal.

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

En el post anterior聽vimos como insertar en nuestra app un mapa de google maps centrado en las coordenadas actuales.
Vamos a continuar desarrollando nuestra app.

Para poder apreciar mejor donde estamos situados vamos a mostrar un marcador personalizado en el mapa que nos indique nuestra posici贸n.

Para el marcador vamos a utilizar una imagen personalizada. La forma correcta de utilizar im谩genes locales en nuestra app es alojarlas en la carpeta src/assets, as铆 que vamos a crear dentro de src/assets una carpeta la la que llamaremos img聽donde alojaremos nuestras im谩genes.

Podemos poner la imagen que queramos como 聽marcador para el mapa. Si no os quer茅is complicar pod茅is dar bot贸n derecho sobre la siguiente imagen y descargarla para utilizarla en este ejemplo:

Bien, una vez descargada la imagen la copiamos en la carpeta img que acabamos de crear.

Ahora para situar el marcador en el mapa editamos el archivo inicio.ts聽y en la funci贸n聽loadMap()聽que muestra el mapa a帽adimos el siguiente c贸digo:

loadMap(){

   let mapContainer = document.getElementById('map');
    this.map = new google.maps.Map(mapContainer, {
      center: this.coords,
      zoom: 12
    });
    
    // Colocamos el marcador
    let miMarker = new google.maps.Marker({
              icon : 'assets/img/ico_estoy_aqui.png',
              map: this.map,
              position: this.coords
          });

}

No hay mucho que comentar, como veis para crear un marcador creamos un objeto google.maps.Marker 聽y le pasamos un objeto como par谩metro donde en icon le indicamos donde se aloja la imagen del icono, en este caso la ruta a la imagen que hemos guardado destro de assets en la carpeta img es ‘assets/img/ico_estoy_aqui.png’, si vuestra imagen se llama de otra forma ten茅is l贸gicamente que poner el nombre de la imagen que vay谩is a utilizar.
En map聽le idicamos la variable que contiene el mapa donde se tiene que situar, es este caso this.map, por ultimo en position聽le asignamos las coordenadas donde se tiene que situar, en este caso le pasamos la variable this.coords que contiene las coordenadas actuales.

Ahora si ejecutamos ionic serve -l veremos en el navegador algo como esto:

Mostrando un marcador en el mapa
Mostrando un marcador en el mapa

Ahora vamos a dar un paso m谩s y vamos a a帽adir un聽FAB (Floating Action Button) es decir bot贸n de acci贸n flotante al mapa.Los FAB son componentes est谩ndar de material design, tienen la forma de un c铆rculo y flotan聽sobre el contenido en una posici贸n fija.

Este FAB lo utilizaremos para a帽adir la posici贸n actual a nuestros sitios, para ello haremos que cuando se pulse en el fav se habra una ventana modal donde mostraremos un peque帽o formulario donde aparecer谩n las coordenadas y la direcci贸n de la posici贸n actual y nos permitir谩 a帽adir una descripci贸n y una fotograf铆a desde la c谩mara de nuestro m贸vil.

Vayamos por partes.

Primero vamos a colocar el FAB en la vista de muestra p谩gina de inicio, editamos el archivo inicio.html y a帽adimos lo聽que esta marcado聽con fondo amarillo.

<!--
聽聽Generated template for the Inicio page.

聽聽See http://ionicframework.com/docs/v2/components/#navigation for more info on
聽聽Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Inicio</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <div id="map"></div>
   <ion-fab right top>
    <button ion-fab (tap)="nuevoSitio()">
      <ion-icon name="pin"></ion-icon>
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>
  </ion-content>

Bien, como vemos tenemos el componente ion-fab al que le indicamos que se sit煤e arriba a la derecha con聽right聽y聽top.

En su interior contiene un bot贸n al que le tenemos que indicar que es del tipo ion-fab.

Con (tap)=”nuevoSitio()”聽le indicamos que cuando se pulse o tape el bot贸n se llame a la funci贸n nuevoSitio()聽que聽definiremos luego en el controlador de la p谩gina.

Despu茅s tenemos dos componentes ion-icon聽para mostrar los iconos en el FAB, uno con el icono pin y otro con el icono add, lo habitual es mostrar un solo icono, pero he querido poner dos para que quede m谩s claro que queremos a帽adir una localizaci贸n.

Si probamos ahora nuestra app tendr谩 un aspecto similar a este:

Bien, ahora vamos a definir la funci贸n聽nuevoSitio()聽en el controlador, editamos el archivo inicio.ts y a帽adimos la siguiente funci贸n debajo de la funci贸n loadMap:

nuevoSitio(){
 // aqu铆 vamos a abrir el modal para a帽adir nuestro sitio.
}

La idea es que al llamar a esta funci贸n desde el FAB se abra un modal para poder a帽adir una descripci贸n y una foto a muestro sitio si lo deseamos, vamos a explicar un poco que son los modales y como se utilizan:

Modales

Los modales son como ventanas que se abren dentro de nuestra aplicaci贸n sin que afecten a la pila de navegaci贸n.

Para crear un modal debemos de crear una p谩gina con el ionic generator.
Desde consola vamos a escribir el siguiente comando para crear el modal donde ir谩 el formulario para introducir el nuevo sitio:

ionic g page modalNuevoSitio

Ahora en inicio.ts debemos importar el componente聽ModalController聽 de la librer铆a ionic-angular, por lo tanto despu茅s de NavController y NavParams importamos tambi茅n ModalController.

import { NavController, NavParams, ModalController } from 'ionic-angular';

Debemos inyectar tambi茅n en el constructor el componente ModalController al que hemos llamado modalCtrl:

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private geolocation: Geolocation,
    public modalCtrl : ModalController,
    platform: Platform) {

    ......

Ahora ya estamos listos para crear el modal en nuestra funci贸n nuevoSitio.

Para crear un modal utilizamos el m茅todo聽create del componente ModalController聽y le pasamos como primer par谩metro un string con el nombre del 聽controlador de la p谩gina que hemos creado para el modal llamado聽ModalNuevoSitioPage.
El segundo par谩metro es opcional y se utiliza para pasarle datos a nuestro modal, en este caso lo vamos a utilizar para pasarle el objeto聽this.coords que contiene las coordenadas que hemos obtenido.

Una vez creado el modal para que se muestre en pantalla invocamos al m茅todo present();

nuevoSitio(){
  // aqu铆 vamos a abrir el modal para a帽adir nuestro sitio.
   let mimodal = this.modalCtrl.create( 'ModalNuevoSitioPage',this.coords );
   mimodal.present();
}

Ahora que sabemos como mostrar un modal y como pasarle datos desde la p谩gina que lo llama, vamos a ver como recibimos esos datos y los mostramos en el modal.

Recordad que al usar lazy loading y declarar la p谩gina del modal en su propio modulo (inicio.module.ts)no debemos declararlo en app.module.ts.

Vamos a crear una variable 聽en el controlador del modal (modal-nuevo-sitio.ts)聽que al igual que en la p谩gina inicio llamaremos coords y sera de tipo any, esta variable al igual que en la p谩gina de inicio va a contener un objeto con la latitud y longitud que recibimos en la llamada.

Para recibir los datos desde la p谩gina que llama al modal solo tenemos que utilizar el m茅todo聽get聽de NavParams聽que ya se importa por defecto al crear una p谩gina. Con navParams controlamos los par谩metros que recibimos.
Dentro de la funci贸n聽ionViewDidLoad聽que se ejecuta al cargar la vista vamos a asignar a cada atributo聽del objeto coords聽 que acabamos de crear el valor que corresponde de la latitud y longitud que recibimos.
Veamos como tiene que quedar el c贸digo de modal-nuevo-sitio.ts en estos momentos:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


/*
聽聽Generated class for the ModalNuevoSitio page.

聽聽See http://ionicframework.com/docs/v2/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 }

  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalNuevoSitioPage');
    this.coords.lat = this.navParams.get('lat');
    this.coords.lng = this.navParams.get('lng');
  }
}

Ahora que hemos recibido las coordenadas desde la p谩gina inicio vamos a mostrarlas en el modal para comprobar que las recibimos correctamente, para ello vamos a editar el archivo聽modal-nuevo-sitio.html聽y simplemente a帽adimos las coordenadas dentro de ion-content:

<ion-content padding>
  <p>Hemos recibido: {{ coords.lat }}, {{ coords.lng }}<p>
</ion-content>

Si probamos ahora muestra aplicaci贸n observamos que al pulsar el bot贸n (FAB) que hemos creado para a帽adir sitios nos abre una ventana modal donde se muestran las coordenadas que acabamos de recibir, pero tenemos un peque帽o problema, y es que no tenemos forma de cerrar聽el modal, as铆 que antes de editar cualquier otra cosa en la p谩gina vamos a crear un bot贸n de cerrar.

Para cerrar el modal tenemos que importar en el controlador de la pagina del modal (modal-nuevo-sitio.ts) el controlador ViewController e inyectarlo en el constructor.

Luego creamos una funci贸n que vamos a llamar cerrarModal donde utilizaremos 聽el m茅todo聽dismiss de ViewController para cerrarlo:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,  ViewController } from 'ionic-angular';


/*
聽聽Generated class for the ModalNuevoSitio page.

聽聽See http://ionicframework.com/docs/v2/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 }
  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl : ViewController ) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalNuevoSitioPage');
    this.coords.lat = this.navParams.get('lat');
    this.coords.lng = this.navParams.get('lng');
  }

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

}

Ahora vamos a a帽adir el bot贸n de cerrar que llamar谩 a la funci贸n cerrarModal que acabamos de crear 聽en la cabecera de la vista de la p谩gina del modal (modal-nuevo-sitio.html), aprovechamos tambien para cambiar el t铆tulo del modal a “Nuevo sitio”:

<!--
聽聽Generated template for the ModalNuevoSitio page.

聽聽See http://ionicframework.com/docs/v2/components/#navigation for more info on
聽聽Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Nuevo sitio</ion-title>
   <ion-buttons start>
      <button ion-button (click)="cerrarModal()">
        <ion-icon name="md-close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <p>Hemos recibido: {{ coords.lat }}, {{ coords.lng }}<p>
</ion-content>

Ahora ya tenemos un bot贸n de cerrar para nuestro modal, si hab茅is seguido correctamente todos los pasos al pulsar sobre el FAV聽se聽abrir谩 nuestro modal como en la siguiente imagen:

Por ahora lo dejamos aqu铆, hoy hemos aprendido聽como a帽adir un marcador al mapa de Google maps, como a帽adir a nuestra app botones tipo FAB, y como crear, abrir, pasar datos y cerrar un modal.
En el pr贸ximo post veremos como a帽adir un nuevo 聽con descripci贸n y foto, haciendo uso de la c谩mara del m贸vil.

Si necesitas desarrollar una aplicaci贸n m贸vil no dudes en solicitarme un presupuesto sin compromiso: