Archivo de la etiqueta: google maps

Tutorial de Ionic – Peticiones http – API REST

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, 聽hoy vamos a ver como podemos comunicar una aplicaci贸n desarrollada con ionic con una API REST,聽para ello vamos a aprender como realizar peticiones a un servidor remoto a trav茅s de http.

En esta peque帽a prueba vamos a ver como podemos acceder a una API REST para obtener desde un servidor remoto un listado de usuarios. Para este peque帽o ejemplo vamos a utilizar聽RANDOM USER GENERATOR que como se indica en su web es una API libre de c贸digo abierto para generar datos de usuario aleatorios para realizar pruebas. Como Lorem Ipsum, pero con personas.

Lo que vamos a hacer es simplemente realizar una llamada a esta API donde recibiremos como respuesta un listado de usuarios que mostraremos en nuestra vista.

Antes de nada vamos a crear una nueva aplicaci贸n de prueba:

ionic start pruebahttp1 blank

Ahora vamos a crear un provider donde gestionaremos la comunicaci贸n con el servidor remoto:

ionic g provider http

Se habr谩 creado una carpeta providers (si no exist铆a) y dentro una carpeta con el nombre del provider que acabamos de crear (http) y dentro un archivo .ts con el mismo nombre.

Por defecto contendr谩 el siguiente c贸digo:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
聽聽Generated class for the HttpProvider provider.

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

  constructor(public http: HttpClient) {
    console.log('Hello HttpProvider Provider');
  }

}

Vemos que al crear un provider ya se importa el m贸dulo HttpClient.

Para poder utilizar HttpClient tenemos que importar y declarar HttpClientModule en el archivo 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 { HomePage } from '../pages/home/home';
import { HttpProvider } from '../providers/http/http';
import { HttpClientModule } from '@angular/common/http';



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

http.get

Ahora vamos a a帽adir un m茅todo que llamaremos loadUsers a nuestro provider para obtener la lista de usuarios desde el servidor, por lo tanto editamos el archivo http.ts y a帽adimos el siguiente c贸digo:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
聽聽Generated class for the HttpProvider provider.

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

  path : string = 'https://randomuser.me/api/?results=25';
  
  constructor(public http: HttpClient) {
    console.log('Hello HttpProvider Provider');
  }

  loadUsers(){
    return this.http
    .get(this.path)
  }
}
http.get devuelve el resultado de la solicitud en la forma de un observable.
El listado de usuarios tendr谩 un formato similar a este:
{
聽聽"results": [
聽聽聽聽{
聽聽聽聽聽聽"gender": "male",
聽聽聽聽聽聽"name": {
聽聽聽聽聽聽聽聽"title": "mr",
聽聽聽聽聽聽聽聽"first": "romain",
聽聽聽聽聽聽聽聽"last": "hoogmoed"
聽聽聽聽聽聽},
      "location": {
聽聽聽聽聽聽聽聽"street": "1861 jan pieterszoon coenstraat",
聽聽聽聽聽聽聽聽"city": "maasdriel",
聽聽聽聽聽聽聽聽"state": "zeeland",
聽聽聽聽聽聽聽聽"postcode": 69217
聽聽聽聽聽聽},
      "email": "romain.hoogmoed@example.com",
      "login": {
聽聽聽聽聽聽聽聽"username": "lazyduck408",
聽聽聽聽聽聽聽聽"password": "jokers",
聽聽聽聽聽聽聽聽"salt": "UGtRFz4N",
聽聽聽聽聽聽聽聽"md5": "6d83a8c084731ee73eb5f9398b923183",
聽聽聽聽聽聽聽聽"sha1": "cb21097d8c430f2716538e365447910d90476f6e",
聽聽聽聽聽聽聽聽"sha256": "5a9b09c86195b8d8b01ee219d7d9794e2abb6641a2351850c49c309f1fc204a0"
聽聽聽聽聽聽},
      "dob": "1983-07-14 07:29:45",
      "registered": "2010-09-24 02:10:42",
      "phone": "(656)-976-4980",
      "cell": "(065)-247-9303",
      "id": {
聽聽聽聽聽聽聽聽"name": "BSN",
聽聽聽聽聽聽聽聽"value": "04242023"
聽聽聽聽聽聽},
      "picture": {
聽聽聽聽聽聽聽聽"large": "https://randomuser.me/api/portraits/men/83.jpg",
聽聽聽聽聽聽聽聽"medium": "https://randomuser.me/api/portraits/med/men/83.jpg",
聽聽聽聽聽聽聽聽"thumbnail": "https://randomuser.me/api/portraits/thumb/men/83.jpg"
聽聽聽聽聽聽},
      "nat": "NL"
    }
  ],
  "info": {
聽聽聽聽"seed": "2da87e9305069f1d",
聽聽聽聽"results": 1,
聽聽聽聽"page": 1,
聽聽聽聽"version": "1.1"
聽聽}
}
Ahora vamos a crear la vista en home.html para mostrar un bot贸n que llamar谩 a la funci贸n
cargarUsuarios,y un listado de items con los usuarios que crearemos recorriendo con *ngFor el array usuarios que posteriormente vamos a crear en el controlador:
<ion-header>
  <ion-navbar>
    <ion-title>
      Usuarios
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let usuario of usuarios">
      <ion-avatar item-start>
        <img [src]="usuario.picture.medium">
      </ion-avatar>
      <h2>{{ usuario.name.first }}</h2>
      <p>{{ usuario.email }}</p>
    </ion-item>
  </ion-list>
  <button ion-button full (click) = "cargarUsuarios()">Cargar Usuarios</button>
</ion-content>
Ahora vamos a modificar home.ts para obtener los datos desde el provider y mostrarlos en la vista.
Editamos home.ts e importamos el provider httpProvider que acabamos de crear:
import { HttpProvider } from '../../providers/http/http';
Para poder utilizarlo debemos inyectarlo en el constructor:
constructor(public navCtrl: NavController, public http: HttpProvider) {

  }
Justo antes del constructor vamos a definir una variable miembro donde guardaremos el array de usuarios que recibamos desde el servidor:
usuarios : any[];

Promesas y Observables

Ahora vamos a crear un m茅todo que que a su vez llamar谩 al m茅todo loadUsers de nuestro provider para recibir los datos de los usuarios:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpProvider } from '../../providers/http/http';

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

  usuarios : any[];

  constructor(public navCtrl: NavController, public http: HttpProvider) {

  }

  cargarUsuarios(){
    this.http.loadUsers().subscribe(
      (res) => { 
        this.usuarios = res['results'];
      },
      (error) =>{
        console.error(error);
      }
    )
  }


}

Como podemos observar llamamos al m茅todo loadUsers聽que hemos definido en el provider, pero no utilizamos then sino subscribe, esto es porque http no devuelve una promesa si no que devuelve un observable. Un observable se queda a la espera de recibir datos y nosotros nos “subscribimos” recibiendo estos datos en cuanto est茅n disponibles.
Esta cualidad se puede utilizar para suscribirnos a la url y observar si ha habido cambios, como por ejemplo si es un sitio de noticias donde se est谩n continuamente renovando.

La diferencia entre promesas y observables a groso modo es que la promesa devuelve los datos una 煤nica vez cuando estos son recibidos mientras que un observable se queda “vigilando” si se han producido cambios y se ejecuta cada vez que un cambio se produce, aunque hasta que no te suscribes a un observable 茅ste no se ejecutar谩.

Si solo necesitamos recibir los datos una 煤nica vez sin necesidad de observar si se han producido cambios podemos utilizar promesas. Una promesa se ejecuta una vez que se haya resuelto la llamada y recibimos los datos en la funci贸n .then(res=>{… }).

El c贸digo del provider en el archivo http.ts utilizando una promesa quedar铆a de la siguiente manera:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';

/*
聽聽Generated class for the HttpProvider provider.

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

  path : string = 'https://randomuser.me/api/?results=25';
  
  constructor(public http: HttpClient) {
    console.log('Hello HttpProvider Provider');
  }

  loadUsers(){
    return this.http
    .get(this.path)
    .toPromise();

  }  
}

Debemos importar el operador toPromise聽para convertir el observable en promesa 聽con import ‘rxjs/add/operator/toPromise’;聽 y simplemente a帽adir toPromise()聽despu茅s del get.

Ahora en home.ts聽solo tenemos que sustituir subscribe por then:

cargarUsuarios(){
  this.http.loadUsers().then(
    (res) => { 
      this.usuarios = res['results'];
    },
    (error) =>{
      console.error(error);
    }
  )
}

Si ejecut谩is la aplicaci贸n con ionic serve -l y puls谩is en el bot贸n Cargar Usuarios podr茅is ver algo como esto:

Listado de usuarios
Listado de usuarios

Pod茅is observar como cada vez que puls茅is el bot贸n la lista de usuarios cambia ya que Random User Generator como su propio nombre indica devuelve una lista aleatoria de usuarios.

http.post

RANDOM USER GENERATOR聽 nos ha servido para aprender ha hacer una petici贸n get a una API REST para recibir datos, en este caso una lista de usuarios.

Si quer茅is conectaros con un servicio que teng谩is corriendo en un servidor remoto y necesit谩is pasarle datos desde la aplicaci贸n para que se guarden en el servidor tenemos que usar http.post.

Vamos a imaginar que tenemos corriendo un servicio en PHP cuya url sea www.miservicio.com/adduser/聽que est谩 programado para recibir v铆a post un nuevo usuario para guardarlo en la base de datos del servidor.

Tendremos que crear 聽una funci贸n similar a esta:

postDatos(){
  let datos = { nombre:'Edu',email:'edu.revilla.vaquero@gmail.com'}
  
  let options = {
聽聽聽聽headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  };
 var url = 'www.miservicio.com/adduser/';
 return new Promise(resolve => {
  this.http.post(url,JSON.stringify(datos),options)
     .subscribe(data => {
       resolve(data);
      });
 });
}

En la variable datos 聽tenemos un objeto con los datos del usuario que queremos enviar al servidor, en este caso nombre y email.

Despu茅s definimos la variable options donde a su vez definimos las cabeceras en la variable headers, dependiendo de la configuraci贸n del servidor podr铆a necesitar par谩metros diferentes en la cabecera.

Como vemos http.post es bastante parecido a http.get, solo que como segundo par谩metro le pasamos la variable que contiene los datos que queremos enviar convertida a formato JSON con聽JSON.stringify(datos), como tercer par谩metro le pasamos options.

En聽data聽recibiremos la respuesta que nos de el servidor.

Vamos a ver un ejemplo de como obtendr铆amos los datos enviados desde nuestra aplicaci贸n con un servicio desarrollado en PHP en el servidor:

<?php
$postdata = file_get_contents("php://input");
if (isset($postdata)) {
$request = json_decode($postdata);
echo $request->nombre;
echo $request->email;
}
?>

Evidentemente en otros lenguajes de programaci贸n del lado del servidor el c贸digo para recibir los datos ser铆a diferente, pero se escapa del prop贸sito de este tutorial el abordar como ser铆a en cada leguaje. Si alguno hace la prueba en otro lenguaje y quiere compartirlo en los comentarios para ayudar a los dem谩s ser谩 bien recibido :-).

Eso es todo por hoy.

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 8 – Eliminar un sitio desde el listado deslizando el item con "ItemSliding".

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 modificar un sitio, hoy vamos a mejorar nuestra app para que se puedan eliminar nuestros sitio, pero para aprender m谩s sobre las posibilidades de ionic lo vamos ha hacer desde el listado, deslizando el elemento del listado hacia la izquierda nos mostrar谩 el bot贸n de eliminar. Tambi茅n aprovecharemos para aprender a utilizar聽AlertController聽para mostrar un dialogo que pida confirmaci贸n antes de eliminar el sitio.

Vamos a ver como ser铆a:

Lo primero que vamos a hacer es modificar el listado para a帽adir un ion-item-sliding聽que es un componente que nos permite deslizar el item, debemos introducir el item dentro de ion-item-sliding y le vamos a a帽adir despues del item un elemento ion-item-options聽que nos permite a帽adir opciones que se mostrar谩n al deslizar el item. Se pueden a帽adir tantas opciones como desees, nosotros solo vamos a necesitar una para borrar el elemento. Vamos a ver como tiene que quedar el c贸digo, editamos el archivo listado.html聽y lo dejamos de la siguiente manera:

<!--
聽聽Generated template for the ListadoPage 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-sliding #item *ngFor="let sitio of sitios">
    <ion-item (click)="muestraSitio(sitio)">
      <ion-thumbnail item-left>
        <img [src]="sitio.foto">
      </ion-thumbnail>
      <h2>{{ sitio.address }}</h2>
      <p>{{ sitio.description }}</p>
    </ion-item>
    <ion-item-options side="right">
      <button ion-button  color="danger" (click)="borrarSitio(sitio.id)"><ion-icon name="trash"></ion-icon>
         Borrar
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>
</ion-content>

Como podemos observar hemos puesto el *ngFor聽en la etiqueta ion-item-sliding que ahora envuelve al ion-item que ya ten铆amos.

Despues del ion-item hemos a帽adido un componente ion-item-options聽al que le indicamos que se muestre en el lado derecho (side=”right”).

Dentro de ion-item-options tenemos un bot贸n con in icono (ion-icon) que muestra el icono “trash” que es el t铆pico cubo de basura y el texto “borrar”.
En el evento click del bot贸n le decimos que llame a la funci贸n borrarSitio.

Si probamos la aplicaci贸n pod茅is comprobar en el listado que los items ahora se pueden arrastrar hacia la izquierda y aparece el bot贸n de borrar:

Borrando un sitio
Borrando un sitio

Ahora debemos definir la funci贸n borrar sitio en el controlador del listado. Antes de borrar vamos a sacar un dialogo de confirmaci贸n que nos preguntar谩 si realmente queremos eliminar el sitio, para ello vamos a utilizar el componente Alert.

Alerts

Los alerts son una excelente manera de ofrecer al usuario la posibilidad de elegir una acci贸n espec铆fica o una lista de acciones. Tambi茅n pueden proporcionar al usuario informaci贸n importante, o requerir que tomen una decisi贸n.

Ionic nos proporciona los siguientes tipos de Alerts:

En este caso 聽como lo que queremos es que el usuario confirme el borrado del sitio vamos a utilizar alert de confirmaci贸n.

Para poder utilizar un alert lo primero que debemos hacer es importar AlertController e inyectarlo en el constructor, por lo tanto vamos a editar聽el archivo listado.ts聽y a帽adimos el siguiente c贸digo:

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


/**
聽* 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 modalCtrl : ModalController,
              public db : DbProvider,
              public alertCtrl : AlertController) {
  }

....

Ahora聽聽vamos a聽聽a crear la funci贸n borrarSitio()聽y definiremos dentro de ella el alert 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 la base de datos

           }
        }
      ]
    });

    alert.present();

 }

Para crear un alert utilizamos el m茅todo create donde tenemos que definir el t铆tulo en este caso “Confirmar borrado”, el mensaje: “驴Estas seguro de que deseas eliminar este sitio?”.

Despu茅s definimos los dos botones de acci贸n uno para SI y otro para NO, en text definimos el texto del bot贸n y en handler definiremos la acci贸n que debemos realizar, en caso de pulsar “No” no hacemos nada, en caso de pulsar “Si” procederemos a eliminar el sitio.

Una vez definido el alert con聽alert.present()聽hacemos que se muestre.

Ahora que ya sabemos como se usan los alerts vamos a escribir el c贸digo del bot贸n “Si” para borrar el sitio.

Lo primero que tenemos que hacer es crear un nuevo m茅todo en el provider DbProvider聽para eliminar los sitios, por lo tanto editamos el archivo db.ts y a帽adimos la funci贸n borrarSitio():

public borrarSitio(id){
     let sql = "DELETE FROM sitios WHERE id= ? ";
     return this.db.executeSql(sql,[id]);
  }

Recibimos como par谩metro id que es el id del sitio que queremos eliminar de la base de datos, ejecutamos la query y si todo ha ido bien e sitio se habr谩 eliminado para siempre de la base de datos.

Ahora que ya tenemos preparada la funci贸n para borrar el sitio en el provider vamos a volver al alert de confirmaci贸n en listado.ts聽para definir las operaciones a realizar al pulsar el bot贸n “Si”, en la funci贸n handler del bot贸n “Si” a帽adimos el siguiente c贸digo:

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: () => {

              this.db.borrarSitio(id).then((res)=>{
            // Una vez borrado el sitio recargamos el listado
              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) */ })

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

    alert.present();

   }

Lo primero que hacemos es llamar al m茅todo que acabamos de crear en el provider con this.db.borrarSitio(id) pas谩ndole como par谩metro el id del sitio.

En el then lo que vamos ha hacer es refrescar el listado para ello debemos modificar la variable miembro this.sitios que contiene los sitios que se muestran en el listado, lo que hacemos es volver a cargar de la base de datos los sitios, como acabamos de borrar un sitio este no aparecer谩. Para cargar los sitios de la base de datos utilizamos el m茅todo this.db.getSitios que ya tenemos definido y hacemos exactamente el mismo proceso que en la funci贸n 聽ionViewDidEnter聽para rellenar el array this.sitios con los datos obtenidos desde la base de datos. De hecho podemos definir una funci贸n que se encargue de recoger los sitios de la base de datos y rellenar el array this.sitios en lugar de repetir el c贸digo de ionViewDidEnter, eso ya lo dejo como mejora opcional.

Si ejecut谩is el c贸digo comprobar茅is que ya pod茅is borrar los sitio que no os interesen conservar en vuestro dispositivo.

Eso es todo por hoy.

 

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 7 – Modificar nuestros sitios.

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 煤ltimo post vimos como mostrar en un modal los sitios guardados y como abrir el navegador GPS para que nos marque la ruta hasta el.

Hoy vamos seguir desarrollando la app para poder modificar los sitios que tenemos guardados.

Lo primero que vamos a hacer es crear una variable miembro en el controlador del modal聽modal-detalle-sitio.ts聽a la que vamos a llamar edit y que ser谩 del tipo boolean por lo que la a帽adimos debajo de la variable sitio que ya ten铆amos definida:

...

export class ModalDetalleSitio {

聽聽sitio: any;
  edit : boolean = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl : ViewController) {

...

Esta variable nos servir谩 para mostrar u ocultar el formulario de edici贸n del sitio en funci贸n de si vale true o false. De inicio la ponemos a false para que no se muestre el formulario hasta que pulsemos en el bot贸n editar.

Bien, ahora vamos a modificar la vista para a帽adir el formulario y el bot贸n de editar.

El formulario ser谩 muy parecido al que pusimos en la vista del modal nuevo-sitio.

Editamos el archivo聽modal-detalle-sitio.html聽y a帽adimos el siguiente c贸digo marcado con fondo amarillo:

<!--
聽聽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 *ngIf="!edit">
    <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-col text-center>
         <button ion-button icon-left clear small (click)="editar()">
           <ion-icon name="editar"></ion-icon>
           <div>Editar</div>
         </button>
      </ion-col>
    </ion-row>
</ion-card>
 <ion-card *ngIf="edit">
      <ion-card-content>
      <form (ngSubmit)="guardarCambios()">
      <ion-item>
        <img [src]="sitio.foto" *ngIf="sitio.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)]="sitio.description" name="description"></ion-textarea>
      </ion-item>
      <button ion-button type="submit" block>Actualizar Sitio</button>
    </form>
    </ion-card-content>
    </ion-card>
</ion-content>

Vayamos por partes:

En primer lugar al ion-card que ya ten铆amos y que muestra los datos del sitio le hemos a帽adido *ngIf=”!edit”, con esto le indicamos que solo se muestre si la variable edit est谩 a false, es decir cuando no se est谩 editando:

  <ion-card *ngIf="!edit">

Despu茅s debajo del bot贸n “Como llegar” hemos creado otra columna (ion-col) donde mostramos el bot贸n Editar, en el evento click del bot贸n editar llamamos a la funci贸n editar() que posteriormente definiremos en el controlador, aunque ya adelanto que simplemente cambiar谩 el valor de la variable edit a true:

 <ion-col text-center>
         <button ion-button icon-left clear small (click)="editar()">
           <ion-icon name="editar"></ion-icon>
           <div>Editar</div>
         </button>
      </ion-col>

Despu茅s hemos a帽adido otro elemento ion-card al que le hemos puesto la directiva condicional *ngIf=”edit”, al contrario que el card anterior se mostrar谩 cuando la variable edit valga true, es decir, que dependiendo del valor de edit se mostrar谩 una cosa o la otra.

 <ion-card *ngIf="edit">

Despu茅s dentro de ion-card-content hemos creado un formulario para editar los campos modificables del sitio, en este caso la descripci贸n y la foto.

En el evento (ngSubmit) del formulario llamamos a la funci贸n guardarCambios()聽que definiremos despu茅s en el controlador:

      <form (ngSubmit)="guardarCambios()">

Al igual que ten铆amos en el formulario del modal nuevo sitio, tenemos un item con una imagen聽que mostramos solo si la variable sitio.foto contiene alg煤n valor (*ngIf=”sitio.foto):

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

Despu茅s tenemos el bot贸n para sacar una nueva foto:

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

Al pulsar en el bot贸n se llamar谩 a la funci贸n sacarFoto que deberemos definir en el controlador.

Despu茅s tenemos otro item con el text-area para modificar la descripci贸n del sitio:

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

Por 煤ltimo antes de cerrar el form tenemos un bot贸n para guardar los cambios:

<button ion-button type="submit" block>Actualizar Sitio</button>

Recordad que al pulsar el bot贸n se lanzar谩 el formulario que en el evento submit llama a la funci贸n聽guardarCambios().

Bien, ahora que ya tenemos preparada la vista tenemos que definir en el controlador todos los m茅todos que vamos a necesitar por lo que vamos a editar el archivo聽modal-detalle-sitio.ts.

Lo primero de todo, como vamos a utilizar la c谩mara y tambi茅n vamos a necesitar el provider db.ts que tenemos creado para gestionar la base de datos, necesitamos importarlos e inyectarlos en el constructor por lo tanto editamos el archivo聽modal-detalle-sitio.ts y a帽adimos el siguiente c贸digo:

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



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

  sitio: any;
  edit : boolean = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl : ViewController, private launchNavigator : LaunchNavigator, private camera: Camera, private db: DbProvider ) {
      this.sitio = this.navParams.data;
}

...

Bien, ahora vamos a definir la funci贸n editar que se ejecuta al pulsar el bot贸n editar, como podemos observar simplemente cambia la variable this.edit a true:

editar(){
   this.edit = true;
 }

Si ejecut谩is ahora la aplicaci贸n en el m贸vil ver茅is que al pulsar sobre el bot贸n editar desaparece el card con los datos y aparece el peque帽o formulario para cambiar la foto y la descripci贸n. Evidentemente no podemos tomar una nueva foto ni聽guardar los cambios ya que todav铆a no hemos definido estas funciones en el controlador, por lo tanto vamos a definir ahora la funci贸n sacarFoto():

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

Como pod茅is observar esta funci贸n es exactamente igual que la que definimos en el modal nuevo sitio, la 煤nica diferencia es que la foto resultante se la asignamos a la variable this.sitio.foto en lugar de a this.foto.

Si ten茅is alguna duda sobre como聽obtener una fotograf铆a de la c谩mara del m贸vil pod茅is repasar la parte 4 de este tutorial donde vimos con m谩s detalle como utilizar la c谩mara del m贸vil para obtener una foto.

Por 煤ltimo necesitamos guardar los cambios en la base de datos as铆 que vamos a definir el m茅todo guardarCambios()聽que se ejecuta al lanzar el formulario con el bot贸n “Actualizar Sitio”:

guardarCambios(){
    this.db.modificaSitio(this.sitio).then((res)=>{
        this.edit = false;
    },(err)=>{  /* alert('error al meter en la bd'+err) */ })
  }

Llamamos a una funci贸n del provider db llamada modificaSitio y le pasamos como par谩metro 聽this.sitio, si todo ha ido bien nos devolver谩 una promesa, al ejecutar la promesa ponemos la variable this.edit a false para que se oculte el formulario y se vuelva a mostrar la informaci贸n del sitio.

Nos quedar铆a crear la funci贸n modificaSitio en el provider para guardar las modificaciones en la base de datos, por lo tanto vamos a editar el archivo db.ts que se encuentra en la carpeta providers y vamos a a帽adir la siguiente funci贸n:

public modificaSitio(sitio){
    let sql = "UPDATE sitios  SET lat = ?, lng = ?, address = ?, description = ?, foto = ? WHERE id = ? ";
    return this.db.executeSql(sql,[sitio.lat,sitio.lng,sitio.address,sitio.description,sitio.foto, sitio.id]);
  }

En funci贸n modificaSitio聽ejecutamos la sql para modificar los datos del sitio en la base de datos.

Las ‘?‘ se sustituyen por los valores en el orden en que se encuentran en el array que se le pasa como segundo par谩metro al m茅todo this.db.executeSql.

Por si alguno se ha despistado os pongo a continuaci贸n el c贸digo completo hasta el momento del provider聽db.ts:聽

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

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

聽聽public modificaSitio(sitio){
聽聽聽聽let sql = "UPDATE sitios  SET lat = ?, lng = ?, address = ?, description = ?, foto = ? WHERE id = ? ";
聽聽聽聽return this.db.executeSql(sql,[sitio.lat,sitio.lng,sitio.address,sitio.description,sitio.foto, sitio.id]);
聽聽}

}

Tambi茅n os dejo a continuaci贸n como tiene que quedar el archivo聽modal-detalle-sitio.ts:

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 { 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;
  edit : boolean = false;


  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl : ViewController, private camera: Camera, private db: DbProvider, 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)
    );

 }

 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(){
    this.db.modificaSitio(this.sitio).then((res)=>{
    //  alert(res);
      for (var i in res)
      {
        alert(i+' - '+res[i]);
      }
        this.edit = false;
    },(err)=>{   alert('error al meter en la bd'+err)  })
  }


}

Eso es todo por hoy, en el siguiente post聽seguiremos desarrollando聽la app.

 

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

Tutorial de Ionic – Crear una aplicaci贸n para guardar nuestros sitios geolocalizados – Parte 2: Mostrando el mapa.

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

Hola a todos:

En el post anterior creamos una aplicaci贸n con tres tabs y vimos como navegar entre ellas.
Hoy vamos a seguir construyendo la aplicaci贸n.Lo siguiente que vamos a hacer es mostrar un mapa en la p谩gina de inicio centrado en las coordenadas actuales donde nos encontremos.

Lo primero que vamos a necesitar es cagar la librer铆a de Google maps , si quieres saber m谩s sobre la api de google maps聽puedes consultar este tutorial.

Editamos el archivo index.html聽que es la plantilla principal que se carga al iniciar la aplicaci贸n聽y a帽adimos la siguiente linea antes de 聽cargar el script 聽build/main.js:

<script src="https://maps.google.com/maps/api/js"></script>

El c贸digo completo quedar铆a as铆:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="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">

  <!-- 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.log('Error', err));
聽聽聽聽}
聽聽-->

  <link href="build/main.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>

   <script  src="https://maps.google.com/maps/api/js"></script>

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

</body>
</html>

Como vemos esta el la p谩gina principal donde se va a cargar todo el contenido de la app dentro de <ion-app></ion-app> que es componente raid de la aplicaci贸n.

Ahora para poder acceder a las coordenadas del m贸vil entra en juego ionic native.

Con ionic native lo que hacemos es instalar un plugin que nos da acceso a alguna caracter铆stica nativa del m贸vil como la c谩mara, el gps, la br煤jula etc a trav茅s de typescript sin tener que programar nosotros en c贸digo nativo (Java para Android, Swift o objetive c para iOS).

Simplemente instalamos el plugin y luego importamos el plugin de ionic-native.

En la documentaci贸n de ionic 聽podemos ver todos los plugins disponibles en ionic native:

http://ionicframework.com/docs/v2/native/

En esta ocasi贸n necesitamos el plugin聽cordova-plugin-geolocation.
Este plugin proporciona informaci贸n sobre la ubicaci贸n del dispositivo, tales como la latitud y la longitud.

Para instalarlo desde el terminar dentro de la carpeta de nuestro proyecto tenemos que ejecutar los聽siguientes comandos:

ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="La app necesita geolocalizaci贸n"
npm install @ionic-native/geolocation --save

Nos sacar谩 un mensaje diciendo que falta instalar el plugin @ionic/cli-plugin-cordova y nos preguntar谩 si queremos instalarlo, le decimos que si.

Si est谩s utilizando Linux o Mac y te sale un error al intentar instalar el plugin prueba a ejecutar el comando con sudo por delante.

Si os muestra un warning como este:

npm WARN ajv-keywords@2.1.0 requires a peer of ajv@>=5.0.0 but none was installed.

Pode铆s solucionarlo escribiendo el siguiente comando:

npm install ajv@latest

Antes de nada debemos declarar el plugin como provider en el archivo app.module.ts, para ello editamos dicho archivo, importamos el plugin Geolocation y lo a帽adimos en la secci贸n providers:

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 { MyApp } from './app.component';


@NgModule({
  declarations: [
    MyApp,

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

Bien, ahora vamos a importar el plugin en el controlador de la p谩gina inicio, para ello dentro de la carpeta pages/inicio editamos el archivo inicio.ts聽e importamos el plugin Geolocation de ionic-native.
Tambi茅n vamos a聽importar聽Platform 聽desde ionic-angular para poder acceder al evento ready de Platform聽que se lanza cuando la aplicaci贸n se ha cargado completamente y esta lista. Esto nos evita errores al intentar llamar a un plugin antes de que se haya cargado.

Para importar estos dos m贸dulos incluimos las siguientes lineas en los imports:

import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

Ahora cuando la aplicaci贸n est茅 completamente cargada y lista (con el evento ready de Platform) vamos a obtener las coordenadas donde nos encontramos y mostrar un mapa centrado en las coordenadas actuales.

Creamos una variable miembro llamada map del tipo any (admite cualquier valor) que contendr谩 el manejador del mapa de google.
Despu茅s para poder utilizar Platform tenemos que inyectarlo como dependencia en el constructor de la clase, tambi茅n debemos inyectar Geolocation en el constructor. En el evento ready de Platform llamaremos a una funci贸n聽que vamos a llamar obtenerPosicion. En estos momentos el c贸digo de inicio.ts deber铆a quedarnos as铆:

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

import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';


/*
聽聽Generated class for the Inicio page.

聽聽See http://ionicframework.com/docs/v2/components/#navigation for more info on
聽聽Ionic pages and navigation.
*/
@IonicPage()
@Component({
  selector: 'page-inicio',
  templateUrl: 'inicio.html'
})
export class InicioPage {

  map: any; // Manejador del mapa.

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

     platform.ready().then(() => {
      // La plataforma esta lista y ya tenemos acceso a los plugins.
        this.obtenerPosicion();
     });

  }

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

}

Hagamos un peque帽o par茅ntesis en nuestra app para hablar de un par de conceptos que vamos a utilizar con frecuencia en nuestros desarrollos con ionic 2:

Promesas

Vemos que dentro del constructor lamamos al m茅todo ready()聽 de聽platform聽 y despu茅s de un punto utilizamos la palabra then(…).

Esto es lo que llamamos una promesa.

Normalmente los plugins de聽ionic-native聽nos devuelven una promesa

Las promesas las inclu铆a angular 1 pero ahora las promesas ya son nativas en EMACScript 6.

Las promesas vienen a sustituir a los callbacks. Se ejecuta la 聽funci贸n y cuando obtenemos un resultado en el then se ejecuta el c贸digo que necesitemos.

Si falla la ejecuci贸n de alguno podemos utilizar la funci贸n catch para tratar el error.

Funciones de flecha

Otra cosa que te puede resultar rara es que dentro del then en lugar de ejecutar una funci贸n al uso estamos utilizando lo que se denomina funciones de flecha o en ingl茅s (Fat Arrow functions).

La funciones con flecha permiten crear funciones an贸nimas m谩s f谩cilmente y adem谩s permiten utilizar this en el contexto actual.
Vamos a ver聽un poco m谩s en detalle esto con聽
el siguiente ejemplo:

class MiClase {
  constructor() {
    this.nombre = 'Eduardo';
    setTimeout(() => {
      // Esto imprim茅 en la consola "Eduardo" ya que en las funciones con flecha this hace referencia al contexto actual.
      console.log(this.nombre);
    });
  }
}

Esto ser铆a lo mismo que escribir lo siguiente:

class MiClase {
  constructor() {
    this.nombre = 'Eduardo';
    var _this = this;
    setTimeout(function() {
     console.log(_this.nombre);
    });
  }
}

Ahora que ya conocemos lo que son las promesas y las funciones de flecha podemos seguir con nuestra aplicaci贸n.

Antes de nada vamos a a帽adir una聽variable en en controlador 聽que vamos a vamos a llamar聽coords聽y聽en ella guardaremos un objeto con la latitud y longitud donde nos encontramos.

Por lo tanto encima del constructor de la clase despu茅s de la variable map definimos la variable coords:

...

export class Inicio {

聽聽map: any; // Manejador del mapa.
 coords : any = { lat: 0, lng: 0 }

  constructor(

...

Si el editor os marca los errores observareis que os subraya this.obtenerPosicion(), esto es evidentemente porque estamos llamando a una funci贸n que todav铆a no hemos definido.

Vamos a definir la funci贸n obtenerPosici贸n():

obtenerPosicion():any{
    this.geolocation.getCurrentPosition().then(res => {
      this.coords.lat = res.coords.latitude;
      this.coords.lng = res.coords.longitude;

      this.loadMap();
    })
    .catch(
      (error)=>{
        console.log(error);
      }
    );
  }

La funci贸n聽getCurrentPosition()聽del plugin Geolocation nos devuelve una promesa.

Como podemos observar resolvemos la promesa con una funci贸n de flecha. En la funci贸n de flecha recibimos como par谩metro el objeto res. Lo que nos interesa obtener es la longitud y latitud donde nos encontramos, estos valores est谩n en res.coords.longitude y res.coords.latitude.
Asignamos esos valores al objeto de la variable this.cords que acabamos de definir y despu茅s llamamos a la funci贸n this.loadMap()聽que a煤n no hemos creado.

Recordad que debemos de聽utilizar this聽para hacer referencia a聽las variables聽miembro y m茅todos que definamos en la clase del controlador.

Ahora deberemos crear la funci贸n loadMap聽que se encargar谩 de mostrar un mapa en la p谩gina centrado en las coordenadas que hemos recogido.

Antes de definir la funci贸n necesitamos crear el contenedor donde se va a mostrar el mapa en la vista. La librer铆a javascript de Google maps lo que hace es insertar un mapa en un div, por lo que necesitamos crear ese div en la vista y luego pas谩rselo como referencia para crear el mapa.

Editamos la vista de la p谩gina inicio, es decir el archivo inicio.html聽y a帽adimos un div dentro de ion-content 聽al que le asignamos como id “map”:

<!--
聽聽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-content>

Ahora tenemos que asignarle un tama帽o al mapa as铆 que por primera vez vamos a editar el archivo de estilos de una p谩gina, en este caso vamos a editar el archivo inicio.scss.

La extensi贸n del archivo .scss, hace referencia a que es una archivo Sass, sus siglas hacen referencia a (Syntactically Awesome Stylesheets) algo as铆 como “Hoja de estilo sint谩cticamente impresionante”.

Sass聽es un lenguaje de hoja de estilos que extiende el css tradicional proveyendo de varios mecanismos que est谩n presentes en los lenguaje de programaci贸n. Con Sass puedes utilizar variables,聽c贸digo anidado, mixins, etc.

Ionic ya viene con Sass instalado lo que hace realmente f谩cil su utilizaci贸n. Sass es un lenguaje de script que es traducido a css. Podemos a帽adir reglas聽de estilo de igual manera que lo hacemos con css por lo que de momento para definir el tama帽o del mapa no necesitamos saber mas. Si quieres m谩s informaci贸n sobre Sass puede consultar la documentaci贸n oficial:聽http://sass-lang.com/documentation/

Veamos como tiene que quedar el archivo inicio.scss:

page-inicio {
ion-content{
聽聽聽聽#map {
聽聽聽聽聽聽width: 100%;
聽聽聽聽聽聽height: 100%;
    }
  }
}

Como podemos ver聽dentro del elemento page-inicio definimos el estilo para ion-content聽 y a su vez dentro definimos el estilo para #map al que le estamos diciendo que ocupe todo al ancho y el alto de la p谩gina, como vemos Sass nos permite anidar los elementos.

Bien, una vez hechos estos preparativos ya podemos definir la funci贸n loadMap que se encargar谩 de mostrar un mapa en la pagina centrado en las coordenadas que hemos recogido. 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;聽. Veamos como tiene que quedar el c贸digo de聽inicio.ts聽con la variable google definida y nuestra funci贸n loadMap:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

declare var google: any;



/**
聽* Generated class for the Inicio page.
聽*
聽* See http://ionicframework.com/docs/components/#navigation for more info
聽* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
  selector: 'page-inicio',
  templateUrl: 'inicio.html',
})
export class InicioPage {

 map: any; // Manejador del mapa.
 coords : any = { lat: 0, lng: 0 }

  constructor(public navCtrl: NavController, public navParams: NavParams,private geolocation: Geolocation,public  platform: Platform) {
    platform.ready().then(() => {
      // La plataforma esta lista y ya tenemos acceso a los plugins.
        this.obtenerPosicion();
     });

  }

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

  loadMap(){
   let mapContainer = document.getElementById('map');
    this.map = new google.maps.Map(mapContainer, {
      center: this.coords,
      zoom: 12
    });
}

 obtenerPosicion():any{
    this.geolocation.getCurrentPosition().then(res => {
      this.coords.lat = res.coords.latitude;
      this.coords.lng = res.coords.longitude;

      this.loadMap();
    })
    .catch(
      (error)=>{
        console.log(error);
      }
    );
  }
}

En la funci贸n loadMap()聽asignamos a la variable mapContainer聽el elemento div con id=”map” que hab铆amos creado en la vista y creamos un mapa con google.maps.Map聽donde le pasamos dos par谩metros, el primero es el elemento contenedor del mapa que lo hemos recogido en la variable mapContainer聽y el segundo par谩metro es un objeto donde le pasamos la configuraci贸n del mapa, en este caso le pasamos las coordenadas al par谩metro center聽y le decimos que muestre el mapa con un zoom de 12.

En este punto si probamos nuestra aplicaci贸n en el navegador con ionic serve -l deber铆amos ver algo como esto:

Pantalla de Inicio con nuestro mapa
Pantalla de Inicio con nuestro mapa

Para no hacer demasiado largo este post lo vamos a dejar aqu铆.

En el siguiente post seguiremos desarrollando la app, veremos como a帽adir un bot贸n FAB, como a帽adir un marcador al mapa y como crear una ventana modal y pasarle datos desde el controlador de la p谩gina que hace la llamada.

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

Todo lo que debes saber sobre geolocalizaci贸n y la api javascript de Google Maps para su uso en tu web o app.

Hola a todos:

He querido realizar un tutorial que recoja todos los elementos que entran en juego a la hora de trabajar con geolocalizaci贸n en javascript, el uso de la api v3 de聽google maps y en definitiva todas las posibilidades que nos ofrece la geolocalizaci贸n a la hora de utilizarla tanto en una web o en una app hibrida que utilice javascript en una webview como聽聽apache cordova/phonegap, ionic, etc.

Como los post muy largos son aburridos de leer he decidido dividir este tutorial en varios cap铆tulos en posts diferentes.

A lo largo de este contenido veremos como mostrar un mapa est谩tico como una imagen, mostrar mapas din谩micos con marcadores, obtener las coordenadas actuales de nuestro dispositivo, obtener las coordenadas de un punto a partir de una聽direcci贸n, obtener una direcci贸n a partir de unas coordenadas, buscar lugares de inter茅s cercanos al punto donde nos encontramos, aprenderemos a crear una funci贸n que calcule la distancia en kilometros entre dos puntos a partir de sus coordenadas. Tambi茅n he a帽adido un post antiguo donde muestro como abrir el mapa nativo de nuestro dispositivo para mostrar la ruta hasta un punto (Android, iOSm Windows Phone) formando una url concreta en funci贸n del sistema operativo que estemos utilizando.

A continuaci贸n pos pongo los links a cada uno de los capitulos que forman este tutorial dedicado a la geolocalizaci贸n:

Al ser un tema extenso es posible que se hayan quedado聽algunas cosas en el tintero. No dud茅is en dejar en los comentarios sugerencias para ampliar este tutorial con alg煤n tema sobre geolocalizaci贸n聽en聽javascript que no se haya tratado, o cualquier comentario que querais hacer al respecto.

Espero que os sea de utilidad.

Un saludo

Obtener Coordenadas a partir de una direcci贸n

En el anterior post vimos como obtener una direcci贸n a partir de unas coordenadas, en esta ocasi贸n vamos a realizar el proceso contrario.

Vamos a obtener unas coordenadas a partir de una direcci贸n en formato texto.

Una vez m谩s vamos a crear un ejemplo para ilustrar mejor como funciona y las posibilidades que ofrece.

En el ejemplo que os propongo vamos a mostrar un mapa y una caja de texto donde introduciremos la direcci贸n que deseamos buscar, al pulsar e el bot贸n el mapa se centrar谩 en esa direcci贸n mostrando en ella el marcador.

veamos el c贸digo que necesitamos para conseguir esto:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Obtener Coordenadas a partir de una direcci贸n</title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
<script>

mapa = {
 map : false,
 marker : false,

 initMap : function() {

 // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar.

 mapa.map = new google.maps.Map(document.getElementById('mapa'), {
   center: {lat: 43.2686751, lng: -2.9340005},
   scrollwheel: false,
   zoom: 14,
   zoomControl: true,
   rotateControl : false,
   mapTypeControl: true,
   streetViewControl: false,
 });

 // Creamos el marcador
 mapa.marker = new google.maps.Marker({
 position: {lat: 43.2686751, lng: -2.9340005},
 draggable: true
 });

 // Le asignamos el mapa a los marcadores.
  mapa.marker.setMap(mapa.map);

 },

// funci贸n que se ejecuta al pulsar el bot贸n buscar direcci贸n
getCoords : function()
{
  // Creamos el objeto geodecoder
 var geocoder = new google.maps.Geocoder();

 address = document.getElementById('search').value;
 if(address!='')
 {
  // Llamamos a la funci贸n geodecode pasandole la direcci贸n que hemos introducido en la caja de texto.
 geocoder.geocode({ 'address': address}, function(results, status)
 {
   if (status == 'OK')
   {
// Mostramos las coordenadas obtenidas en el p con id coordenadas
   document.getElementById("coordenadas").innerHTML='Coordenadas:   '+results[0].geometry.location.lat()+', '+results[0].geometry.location.lng();
// Posicionamos el marcador en las coordenadas obtenidas
   mapa.marker.setPosition(results[0].geometry.location);
// Centramos el mapa en las coordenadas obtenidas
   mapa.map.setCenter(mapa.marker.getPosition());
   agendaForm.showMapaEventForm();
   }
  });
 }
 }
}
</script>
</head>
<body onload="mapa.initMap()">
 <h1>Obtener Coordenadas a partir de una direcci贸n</h1>
 <div id="mapa" style="width: 450px; height: 350px;"> </div>
 <div><p id="coordenadas"></p></div>
 <input type="text" id="search"> <input type="button" value="Buscar Direcci贸n" onClick="mapa.getCoords()">
</body>
</html>

Como Podemos observar el proceso es muy parecido al mostrado en la entrada聽Obtener la direcci贸n a partir de unas coordenadas聽con la diferencia de que en esta ocasi贸n le pasamos a geodecoder como par谩metro la direcci贸n en lugar de las coordenadas, y en la funci贸n callback que le pasamos recibimos las coordenadas en聽results[0].geometry.location.

Como necesitamos tener acceso a la variable map, y a la variable marker desde la funci贸n getCoords y no es buena practica crear variables globales, hemos creado un objeto llamado mapa para proteger el espacio de nombres y dentro hemos definido las dos variables y las dos funciones. Como ya sabemos initMap se llama en el evento onload del body, y getCoords al pulsar el bot贸n de buscar, 聽como est谩n dentro del objeto mapa tenemos que a帽adirles mapa. por delante para ejecutarlas.

Con este sencillo c贸digo obtenemos un potente buscador utilizando la api de google maps.

脥ndice 聽 – 聽 <– Cap铆tulo Anterior聽 聽–聽聽Capitulo Siguiente –>

Obtener la direcci贸n a partir de unas coordenadas

En ocasiones puede ser interesante saber a que direcci贸n pertenecen unas coordenadas. Por ejemplo podemos estar programando una aplicaci贸n que recoge las coordenadas donde nos encontramos y nos interesa saber a que direcci贸n corresponde.

Para conseguir esto debemos echar mano de Google Maps Geodecoder.

Como siempre la mejor forma de verlo es con un ejemplo, as铆 que vamos a crear un mapa y a帽adirle un marcador arrastrable, 聽cuando se arrastre聽聽el marcador a una posici贸n recogemos las coordenadas donde esta situado el marcador y sacamos un alert con la direcci贸n.

El c贸digo completo ser铆a este:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Obtener Dirreci贸n</title>
<meta charset="utf-8" />
< script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
< script>
function initMap() {
 // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar.
 var map = new google.maps.Map(document.getElementById('mapa'), {
 center: {lat: 43.2686751, lng: -2.9340005},
 scrollwheel: false,
 zoom: 8,
 zoomControl: true,
 rotateControl : false,
 mapTypeControl: true,
 streetViewControl: false,
 });
 // Creamos el marcador
 var marker = new google.maps.Marker({
 position: {lat: 43.2686751, lng: -2.9340005},
 draggable: true
 });
 // Le asignamos el mapa a los marcadores.
 marker.setMap(map);
 // creamos el objeto geodecoder
 var geocoder = new google.maps.Geocoder();
// le asignamos una funcion al eventos dragend del marcado
 google.maps.event.addListener(marker, 'dragend', function() {
 geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 var address=results[0]['formatted_address'];
 alert(address);
 }
 });
});
}
</script>
</head>
<body onload="initMap()">
 <h1>Obtener Direcci贸n</h1>
 < div id="mapa" style="width: 450px; height: 350px;"> </div>
</body>
</html>

Como vemos, despu茅s de crear el mapa y a帽adirle el marcador creamos el objeto geodecoder.

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

Despu茅s al marcador le asignamos la funci贸n que se ejecutara en el evento dragend, es decir, cuando se suelte el marcador despu茅s de arrastrarlo.
Dentro de esta funci贸n geodecoder.geodecode()聽pasandole como primer par谩metro un objeto con las coordenadas, en este caso las del marcador{‘latLng’: marker.getPosition()}, y聽como segundo parametro una funci贸n callback anonima que recibe como parametros results y status.

Si聽status es igual a聽google.maps.GeocoderStatus.OK, es decir, 聽se ha recibido correctamente la direcci贸n mostramos la direcci贸n que se encuentra en results[0][‘formatted_address’]

La estructura completa del objeto que recibimos seria esta:

{
 "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
 }
 }
 }
 } ]
}

En address_components聽podemos encontrar todos los elementos que componen la direcci贸n por separado.

Para facilitar la obtenci贸n de un elemento de la direcci贸n podemos construir una funci贸n como esta:

function getAddressComponent(address,component)
{
 var components = address[0]['address_components'];

 for (var i in components)
 {
 if(components[i]['types'].indexOf(component)>-1)
 {
 return components[i]['long_name'];
 }
 }
 return false;
}

Como primer par谩metro pasaremos la variable results que recibimos en la funci贸n聽geocoder.geocode(),聽y como segundo par谩metro el componente que queremos extraer.

Por ejemplo si queremos mostrar el c贸digo postal llamar铆amos a la funci贸n de la siguiente manera:

alert(getAddressComponent(results,postal_code));

Para m谩s informaci贸n sobre c贸mo crear mapas:

Mostrar un mapa interactivo de Google Maps

Para saber m谩s sobre como crear marcadores:

A帽adir marcadores a Google Maps

脥ndice 聽 – 聽 <– Cap铆tulo Anterior聽 聽–聽聽Capitulo Siguiente –>