Archivo de la etiqueta: curso gratis ionic 2 español

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

ionic, , , , , , , , , , , , , , , , , , ,

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

Indice Tutorial Ionic >>

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:

Tutorial de Ionic – Crear una aplicación para guardar nuestros sitios geolocalizados – Parte 1 – Navegación por Tabs

ionic, , , , , , , , , , ,

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

Indice Tutorial Ionic >>

 

¡¡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 capítulo anterior de este tutorial sobre Ionic 2 creamos una app simple, un minijuego de adivinar números que nos sirvió para prender cómo se programa la lógica de una página en Ionic 2.

Vimos cómo pasar variables entre el controlador de la página y la vista y cómo llamar a funciones desde un evento de la vista como pulsar un botón.

La aplicación era extremadamente sencilla y toda la lógica se desarrollaba en la misma página, sin embargo lo normal en cualquier aplicación que sea mínimamente completa es que tenga varias vistas o páginas y haya que navegar entre ellas.

Hoy vamos a aprender a hacer una aplicación con varias páginas y veremos cómo podemos navegar entre ellas, para ello vamos a realizar una aplicación de ejemplo.

Descripción de la aplicación:

La aplicación consistirá en una herramienta que nos permita guardar el lugar donde nos encontramos actualmente recogiendo las coordenadas gracias al gps del móvil.

Está aplicación puede sernos útil por ejemplo para recordar donde hemos aparcado el coche o para guardar un restaurante que nos ha gustado y queremos volver más tarde etc.

La aplicación constará de una pantalla inicial con un mapa donde se mostrará la posición actual y un botón para añadir la posición actual. Al pulsar el botón se abrirá una ventana modal con un pequeño formulario donde añadir una descripción y un fotografía.

Los lugares que guardemos se mostrarán en otra página que contendrá un listado de tus sitios guardados.

Al pinchar sobre uno de nuestros sitios guardados se abrirá otra ventana modal donde mostraremos la foto, la dirección y la descripción del mismo.

Bien, vamos a comenzar creando nuestra aplicación. Desde la consola de comandos o terminal escribimos:

ionic start misSitios blank

Una vez creada nuestro proyecto vemos que por defecto nos ha generado la página home dentro de la carpeta pages.

Nosotros a priori vamos a utilizar tres páginas, una con el mapa donde se muestra nuestra posición actual, otra con el listado de nuestros sitios guardados y otra que llamaremos info donde mostraremos información sobre la aplicación y que simplemente utilizaremos de relleno para tener una tercera página y poder mostrar mejor como funciona la navegación entre páginas.

Las paginas normalmente suelen estar asociadas a «tabs» o pestañas y se navega entre ellas cambiando de tab.

Ionic Generator

Nosotros podemos crear las páginas a mano creando una carpeta dentro de la carpeta pages con su vista html y su controlador .ts, y su css, también podemos crear y configurar los tabs a mano, pero el cli (command line interface o interfaz de linea de comandos) de ionic nos facilita muchísimo el trabajo. Ionic dispone de una herramienta llamada ionic generator.

Ionic generator nos permite generar plantillas con los componentes que queramos.

Con el siguiente comando obtenemos la lista de elementos disponible que podemos generar con ionic generator:

ionic g --list

Recordad que debemos estar dentro de la carpeta del proyecto para poder ejecutar cualquier comando de ionic, por lo que deberemos escribir cd misSitios desde consola para entrar dentro de la carpeta de nuestro proyecto.

La lista de elements que podemos generar automáticamente con ionic generator son:

  • Component: Los componentes son un conjunto de html, con su css y su comportamiento que podemos reutilizar en cualquier lugar sin tener que reescribir de nuevo todo.
  • Directive:
    Una directiva sirve para modificar atributos de un elemento.
  • Page: Páginas.
  • Pipe: Los pipes son lo que angular 1 se consideraban filtros.
  • Provider:Los providers son proveedores que se encargan del manejo de datos, bien extraídos de la base de datos, desde una api, etc.
  • Tabs: Nos genera la página maestra de Tabs y una página para cada tab.

Veremos con más detalle cada elemento según lo vayamos necesitando, para este ejemplo de momento nos interesan los Tabs.

Seleccionamos Tabs y como  nombre le ponemos misTabs, también podemos generar directamente los tabs con el siguiente comando:

ionic g tabs misTabs

Al ejecutar el comando primero nos pregunta el número de tabs que queremos crear, para este ejemplo vamos a utilizar 3.Utilizamos la flecha hacia abajo del cursor para seleccionar el tres y pulsamos enter.

Acto seguido debemos introducir el nombre del primer tab: le damos el nombre de Inicio y pulsamos enter.

Después nos pide que introduzcamos el nombre para el segundo Tab: A este tab le vamos a llamar Listado.

Pulsamos enter una vez mas y por ultimo introducimos el nombre del tercer tab. Le llamamos Info y pulsamos enter.

captura ionic generator tabs

Hay que tener cuidado al utilizar el comando ionic g tabs porque si alguna de las páginas que creamos con ionic g tabs ya existe la «machaca» y la crea de nuevo vacía.

Si echamos un vistazo a las carpetas de nuestro proyecto vemos que en la carpeta /src/pages se han creado cuatro páginas nuevas, una por cada uno de los tabs que acabamos de crear y una cuarta llamada mis-tabs que sera la página maestra de los tabs.

 

captura-de-pantalla-2017-01-28-a-las-15-57-22

Desde la versión 3 de ionic al crear una página con ionic generator además del archivo nombre_pagina.ts también se genera un archivo nombre_pagina.module.ts en cada página generada, este archivo se utiliza para poder realizar lo que se conoce como Lazy Loading, que permite cargar paginas y recursos bajo demanda acelerando así la carga de las páginas.

Esta nueva característica es opcional, si no queremos utilizarla, para que no de error deberiamos eliminar el archivo xxx.module.ts de todas las páginas.

Para poder realizar lazy loading necesitamos importar IonicPage junto con NavController de ionic-angular e incluir el decorador @IonicPage() en cada página. El decorador @IonicPage() nos permite definir los deep links directamente en el componente, esto lo hace automáticamente ionic generator al crear una página.

Como a partir de ahora vamos a utilizar lazy loading, si ionic generator no lo genera automáticamente, tendremos que crear estos elementos a mano.

Si abrimos el archivo mis-tabs.module.ts vemos que tiene el siguiente  código:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MisTabsPage } from './mis-tabs';

@NgModule({
  declarations: [
    MisTabsPage,
  ],
  imports: [
    IonicPageModule.forChild(MisTabsPage),
  ],
  exports: [
    MisTabsPage
  ]
})
export class MisTabsPageModule {}

Como vemos  importa NgModule, IonicPageModule y la propia página, en este caso MisTabsPage, después en @NgModule se declara MisTabsPage en declarations, en  imports con IonicPageModule.forchild(MisTabsPage) y en exports.

Si abrimos el archivo mis-tabs.ts dentro de carpeta mis tabs vemos el siguiente código:

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

/**
 * Generated class for the MisTabsPage tabs.
 *
 * See https://angular.io/docs/ts/latest/guide/dependency-injection.html for
 * more info on providers and Angular DI.
 */
@Component({
  selector: 'page-mis-tabs',
  templateUrl: 'mis-tabs.html'
})
@IonicPage()
export class MisTabsPage {

  inicioRoot = 'InicioPage'
  listadoRoot = 'ListadoPage'
  infoRoot = 'InfoPage'


  constructor(public navCtrl: NavController) {}

}

Esta es la pagina maestra donde vamos a controlar la navegación por tabs.

Vemos que ha creado una variable para cada tab (inicioRoot,listadoRoot, e infoRoot) y les ha asignado el controlador de una página a cada uno entre comillas (‘). Al realizar Lazy loading no necesitamos importar las páginas ni declararlas en app.module.ts, simplemente se declaran en su propio archivo de modulo y se hace referencia con el nombre de la clase como string, por eso hay que ponerlo entre comillas.

Bien, si ejecutamos ionic seve -l para ver e resultado ahora nos muestra la página home que se crea por defecto al crear un proyecto ionic vacío, tenemos que indicarle a la aplicación que la página inicial debe ser la página maestra con los tabs que acabamos de crear.

Cambiar el root de nuestra aplicación (Página principal)

Para indicarle a la aplicación que la página principal sea la página maestra de los tabs que acabamos de crear debemos editar el archivo src/app/app.component.ts e importar la pagina MisTabsPage con import y luego a la variable rootPage asignarle el nombre de la clase de la página que queremos asignar como página principal, en este caso MisTabsPage.

Dado que nuestro componente MisTabsPage está ahora cargado utilizando lazy loaded, no queremos importarlo directamente y hacer referencia a él en cualquier lugar. En su lugar, podemos pasar una cadena que coincida con el componente por lo tanto debemos asignar a rootPage la cadena ‘MisTabsPage’ entre comillas, es decir debemos sustituir:

rootPage = HomePage;

Por:

rootPage = 'MisTabsPage';

El código del archivo src/app/app.component.ts completo quedaría así:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

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

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

El import de la página home ya no lo necesitamos así que podemos eliminarlo. De hecho podemos eliminar la carpeta de la pagina home ya que no la vamos a utilizar en esta aplicación, eso sí, antes de borrar la carpeta de la página home elimina también el import y las declaraciones de homePage en el archivo app.module.ts.

El archivo app.component.ts es el punto de entrada de nuestra aplicación, vemos que se define como un componente que utiliza como plantilla el archivo app.html.

@Component({
  templateUrl: 'app.html'
})

Si vemos el contenido de app.html podemos observar que únicamente contiene la siguiente linea de código:

<ion-nav [root]="rootPage"></ion-nav>

Le asigna como root (es decir como página inicial o raíz) la variable rootPage, y como a la variable rootPage le hemos asignado la página MisTabsPage, la aplicación cargará dentro de <ion-nav> el contenido de la página MisTabsPage.

De momento no necesitamos modificar nada mas en app.component.ts, solo comentar que por defecto se importa el elemento platform que tiene el método ready que podemos utilizar para ejecutar acciones que queremos que se produzcan en el momento que la aplicación esté completamente cargada:

platform.ready().then(() => { ... }

De momento lo dejamos como está.

Ahora ya podemos ejecutar nuestra aplicación y ver las tres pestañas que nos ha creado:

Nuestra app con tabs
Nuestra app con tabs

Como vemos ha creado por defecto un icono para cada pestaña.

Vamos a ver como podemos cambiar los iconos de los tabs para ello vamos ahora a ver el contenido de la plantilla mis-tabs.html:

<ion-tabs>
    <ion-tab [root]="inicioRoot" tabTitle="Inicio" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="listadoRoot" tabTitle="Listado" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="infoRoot" tabTitle="Info" tabIcon="information-circle"></ion-tab>
</ion-tabs>

Como podemos observar la página maestra de los tabs (mis-tabs.html) solamente contiene el contenedor de tabs que se define con la etiqueta <ion-tabs> y luego una etiqueta <ion-tab> por cada tab. También podemos observar que cada tab tiene el atributo [root] donde se le asigna la variable que indica la pagina que se debe mostrar en cada tab.

Luego tenemos el atributo tabTitle al que se le asigna el texto que se muestra en el tab, si solo queremos que se muestre el icono podemos eliminar o dejar vacío este atributo.

Y por último tenemos el atributo tabIcon y es aquí donde se le asigna el icono que se muestra en cada tab, si solo queremos que se muestre texto podemos eliminar o dejar vacío este atributo.
Si corres la aplicación en el navegador con ionic serve -l puedes observar que en iOS los iconos son diferentes a los iconos de Android. Los iconos cambian dependiendo de la plataforma móvil adaptandose al estilo propio de la plataforma. Esta es una de las ventajas de ionic a partir de la versión 2, que no te tienes que preocupar por adaptar el estilo que tu app para cada plataforma ya que la mayoría los elementos se adaptan automáticamente al estilo propio de cada sistema.

Probablemente te estarás preguntando, pero…¿de donde salen estos iconos?.La respuesta es simple, ionic viene de serie con una colección de los iconos mas comunes lista para ser usada solamente con asignar como hemos visto el nombre del icono al atributo tabIcon.

El listado de iconos disponibles lo podéis consultar el la documentación oficial de ionic desde el siguiente enlace: https://ionicframework.com/docs/ionicons/

El tab Inicio lo vamos a dejar con el icono home, al tab Listado le vamos a asignar el icono list-box y al tab Info le vamos a asignar el icono information-circle:

<ion-tabs>
  <ion-tab [root]="inicioRoot" tabTitle="Inicio" tabIcon="home"></ion-tab>
  <ion-tab [root]="listadoRoot" tabTitle="Listado" tabIcon="list-box"></ion-tab>
  <ion-tab [root]="infoRoot" tabTitle="Info" tabIcon="information-circle"></ion-tab>
</ion-tabs>

Para observar mejor como cambiamos entre las distintas páginas de momento vamos a poner un comentario en cada una.

Editamos inicio.html y dentro de ion-content añadimos lo siguiente:

<!--
  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>
  <h1>Esta es lá página de inicio, aquí situaremos un mapa con un botón de añadir lugar.</h1>
</ion-content>

Editamos listado.html y añadimos los siguiente:

<!--
  Generated template for the Listado page.

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

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

</ion-header>


<ion-content padding>
  <h1>Aquí estará el listado de sitios guardados.</h1>
</ion-content>

Y por último editamos info.html dejándolo de la siguiente manera:

<!--
  Generated template for the Info page.

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

  <ion-navbar>
    <ion-title>Info</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<h1>Mis sitios:</h1>
<p>Aplicación de muestra del Tutorial de Ionic 2 – Construye Apps móviles multiplataforma con ionic 2 desde cero.</p>
</ion-content>

Ahora al navegar por las pestañas podemos ver algo parecido a esto:

Nuestras tres pestañas en funcionamiento-.
Nuestras tres pestañas en funcionamiento.

Como no quiero hacer posts demasiado largos de momento lo dejamos aquí. Hoy hemos aprendido a crear una aplicación con tabs para navegar entre diferentes paginas usando el comando ionic g tabs.

En el próximo post seguiremos creando nuestra aplicación para guardar sitios. Insertaremos un mapa en la página de inicio y capturaremos las coordenadas actuales.

 

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