En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:
Indice Tutorial Ionic >>
- Tutorial de Ionic - Construye Apps móviles multiplataforma con ionic desde cero
- Tutorial de Ionic - Instalar ionic y las herramientas necesarias para el desarrollo
- Tutorial de Ionic - Hola Mundo en Ionic
- Tutorial de Ionic - Estructura de un proyecto Ionic
- Tutorial de Ionic - Mini Juego de acertar números en ionic 2, el controlador de la página y Data Binding y *ngIF
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 1 - Navegación por Tabs
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 2: Mostrando el mapa.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 3: Añadiendo FAB, marcador y ventana modal.
- 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.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 5 - Guardando nuestros sitios en una base de datos local
- 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.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 7 - Modificar nuestros sitios.
- 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".
- Tutorial de Ionic - Peticiones http - API REST
- Tutorial de Ionic - Firebase - parte 1: Autenticación con correo y contraseña
- Tutorial de Ionic - Firebase - parte 2: Database - Guardar nuestros sitios en la nube.
- Como mejorar el rendimiento de ionic en iOS y solución al problema de las peticiones http CORS
- Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.
- Firmar el apk para subirlo a Google Play
- Mostrar un mapa offline en Ionic con Leaflet
- Directiva para mostrar y ocultar menú al hacer scroll en Ionic
- Como crear una app multi idioma con Ionic
- Como crear componentes personalizados con 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 dentro mostramos 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:
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:
Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts :-),También puedes seguirme en Twitter en @revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.
Muy buenos post sobre ionic.
Enhorabuena y espero que sigas así, quedo a la espera de nuevos contenidos sobre ionic.
Gracias
Muy buen tutorial!!! felicitaciones al creador
tengo un problema, cuando quiero ver el detalle, la ventana modal no se visualiza, pero está creada porque toda la interfaz queda bloqueada. Incluso cuando apreto el boton back del celular veo que la ventana modal se cierra (aparece un segundo cuadno se está cerrando).
alguna idea de qué puede estar pasando???
muchas gracias
Hola excelente tutorial, muchas gracias por tomarte el tiempo y compartir tu conocimiento con el mundo.
Me pasaba lo mismo que a Nicolas, dure un par de horas buscando la solución y por fin la encontré.
El problema esta en el constructor de modal-detalle-sitio.ts, cuando pedimos el sitio que pasamos por parámetro a el NavParams nos esta devolviendo undefined.
this.sitio = this.navParams.get(‘miSitio’); <— Error, esto hace que cuando se intenta hacer el binding en el modal-detalle-sitio.html no lo pueda resolver y por eso no aparece correctamente pagina.
Lo solucioné de la siguiente manera:
this.sitio = this.navParams.data;
Espero les sirva este aporte.
y repito excelente tutorial, muchas gracias…
Gracias, efectivamente se corrigió el error.
¡Muchas grácias Luis!, no había tenido tiempo de revisarlo hasta ahora, por lo visto con la última versión algunos cosas han cambiado. Grácias por el aporte, ya lo he cambiado.
Hola Eduardo, en primer lugar darte las gracias y la enhorabuena por el tutorial, estoy aprendiendo muchísimo con él.
Quería realizar un aporte, que creo que queda mucho más claro y fácil de entender con la función comoLlegar, y es que importando el plugin LaunchNavigator la función quedaría así:
comoLlegarAlt(){
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)
);
}
Además tiene una amplía configuración de parámetros, cargando el LaunchNavigatorOptions también. Aunque la pega es que creo que no tiene soporte para windows phone.
Enlace : https://ionicframework.com/docs/native/launch-navigator/
Hola writ3r, muchas gracias por el aporte, he modificado el post para utilizar LaunchNavigator
hola buenas tardes , primeramente felicitar y agradecer los tutoriales que ha hecho el administrador , muy buenos y muy bien explicados, solo tengo un problema a la hora de usar el laucherNavigate , a la hora que ejecuto el boton como llegar no se acciona nada nisiqiera me manda el arror y ya me fije que al accionarse tuviera el nombre del metodo correcto y ada y quisiera ver que es . Ya me fije bien paso por paso pero nose que pasa, agradecería mucho una aportacion , gracias
Hola, a mi me sucede lo mismo, prácticamente se cuelga la aplicación y no permite ni ir para atrás ni nada, encontraste la solución?
Saludos
No amigo desafortunadamente no, ya busque por internet y la verdad nose, practicamente el modal se congela una vez que el metodo comoLlegar se activa o el boton pues, si lo hayo la solución con mucho gusto la pondré aqui , en tal caso tu la hayas agradeceria lo comentaras por que ya llevo días con esto y nada jajaja
Hola Eduard Antonio:
Parece que es un problema con la nueva versión, podéis probar a instalar una versión anterior del plugin con:
ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator@3
Otra opción es utilizar en lugar del plugin la función de javascript que explico en este post:
http://reviblog.net/2014/07/08/abrir-mapa-nativo-en-ios-android-y-windows-phone-desde-un-link/
Un saludo
Muchisimas Gracias Eduardo Revilla , si lo probaré. Gracias por su tiempo de responder.
Una pregunta @Eduardo sevilla , quisiera ver si me podrias ayudar en este problema, la app ya me habia funcionado en mi cel pero de un momento aca la pantalla de inicio de pone en blanco y asi se queda , nose si sea por que actualice ionic CLI o nose , pero por que sucede este problema? agradecería el aporte
en el ionic serve me sale esto :
Runtime Error
Uncaught (in promise): TypeError: Cannot read property ‘executeSql’ of null TypeError: Cannot read property ‘executeSql’ of null at DbProvider.CreateTableSitios (http://localhost:8100/build/main.js:52993:23) at http://localhost:8100/build/main.js:119348:53 at t.invoke (http://localhost:8100/build/polyfills.js:3:8971) at Object.onInvoke
pero debe de ser por que debe correr en el celular
aqui estan los archivos que relacionan esa parte
https://gist.github.com/anonymous/6ff4f86aec1debeaa86fee494f30fd88