Archivo de la etiqueta: ionic

Tutorial de IONIC: Navegación por Tabs

tutorial ionic 4-5, , , , , , ,

Hoy vamos a aprender cómo se genera una aplicación con varias páginas en forma de tabs o pestañas y veremos cómo podemos navegar entre ellas, para ello vamos a crear un nuevo proyecto de ejemplo.

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

Indice Tutorial Ionic >>

Vamos a utilizar la plantilla tabs para crear nuestra aplicación lo que nos generará un proyecto con una estructura ya creada para utilizar tabs.

Desde la consola de comandos o terminal escribimos:

 ionic start ejemploTabs tabs

Como siempre elegimos Angular como framework y a la pregunta “Integrate your new app with Capacitor to target native iOS and Android?” respondemos que No.

Al crear nuestra aplicación con la plantilla tabs nos genera por defecto tres tabs.

Nos situamos como siempre dentro de la carpeta del proyecto que acabamos de crear desde la consola, si ejecutamos el comando ionic serve -l podemos ver algo como esto:

Recuerda que al ejecutar ionic serve con el parámetro -l te preguntará si quieres instalar @ionic/lab.

También puedes comprobar como quedaría en un dispositivo móvil sin necesidad de instalar @ionic/lab, utilizando el inspector de Chrome (boton derecho en cualquier parte de la página y seleccionando inspeccionar),  y seleccionando la vista móvil en el panel:

Veamos ahora el código que se ha generado al iniciar el proyecto:

Lo primero que podemos observar es que que se han generado 5 carpetas dentro de src/app, una carpeta llamada explorer-container que contiene un componente que se va a utilizar en las páginas de los tabs, veremos que son los componentes y cómo se crean más adelante, después una por cada tab (tab1,tab2,y tab3) y por último otra llamada tabs: 

tab1, tab2 y tab3 son páginas normales como las que ya conocemos que simplemente contienen lo que queramos que se muestre en cada pestaña.

La página tabs es la página maestra donde vamos a mostrar los tabs con los iconos y controlar la ruta para que se muestre el contenido de la página correspondiente al tab activo.

Si vemos el contenido de la carpeta tabs podemos observar que contiene los archivos típicos de cualquier página en ionic, pero además contiene otro archivo llamado tabs.router.module.ts que es módulo donde se define las ruta de cada tab:

Vamos antes de nada a ver como es el html para crear los tabs con sus correspondientes iconos, si abrimos en el editor el archivo tabs.page.html vemos que contiene el siguiente código:

 
<ion-tabs>
 
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
 
</ion-tabs>

Es bastante intuitivo, tenemos la etiqueta ion-tabs que es el contenedor general para los tabs.

Después tenemos el componente ion-tab-bar donde definimos la barra donde se va a mostrar los iconos de los tabs, vemos que además tiene el atributo slot=”bottom”, con este atributo le estamos indicando que la barra se tiene que mostrar en la parte inferior de la pantalla.

Si queremos que los tabs se muestren en la parte superior deberemos cambiar slot=”bottom” por slot=”top”.

Por último definimos el botón de cada tab con el componente  ion-tab-button que como vemos lleva el atributo tab=”tab1″ donde le indicamos el nombre del tab que se debe activar al pulsar sobre él, este nombre es importante para posteriormente indicar en las rutas.

Dentro cada tab contiene un ion-icon donde indicamos que icono se debe mostrar con el atributo name, y un ion-label con el texto que queremos que se muestre en cada pestaña.

Si solo queremos que se muestre el icono sin ningún texto solo tenemos que eliminar la etiqueta ion-label.

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/

Los iconos a su vez puede tener tres estilos diferentes:

  • Outline.
  • Filled.
  • Sharp

Bien, veamos ahora el contenido del archivo tabs.routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
 
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];
 
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Lo interesante aquí es la declaración de las rutas de los tabs:

Vemos que se declara la constante routes y dentro indicamos que el path ‘tabs’ está asociado al componente TabsPage, y luego como “hijos” (children) están definidos cada uno de los tabs con su ruta indicada en path y a su vez en children se carga con loadChildren el módulo de la página a mostrar. 

Puede resultar un poco engorroso, pero no debes preocuparte demasiado, el trabajo de crear las rutas ya lo hace ionic por tí, solo debes hacer algunos cambios siguiendo esta estructura si quieres añadir un nuevo tab a tu proyecto, vamos a ver como se hace a continuación.

Como el contenido que se muestra en cada tab es una página, si queremos añadir un nuevo tab a nuestro proyecto crearemos una nueva página, por lo tanto vamos a crear una nueva página llamada tab4:

ionic g page tab4

Al crear una página nueva ionic automáticamente añade la ruta de la página a app-routing.module.ts, en este caso no nos interesa porque la página tab4 va a depender de la página maestra tabs y que tiene su propio módulo para definir las rutas (tabs.router.module.ts), tal y como hemos visto, por lo tanto vamos a editar el archivo app-routing.module.ts y eliminamos la siguiente línea que nos ha generado:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
 { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
 // { path: 'tab4', loadChildren: './tab4/tab4.module#Tab4PageModule' } // debemos eliminar esta línea
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule {}

Ahora vamos a definir la ruta del nuevo tab en tabs.routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
 
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];
 
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}
 

Simplemente hemos copiado la estructura de los otros tabs para el tab4:
... 
 {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
 },
 
…

Ya solo nos queda modificar el html del archivo tabs.page.html para añadir el botón de la nueva pestaña:

<ion-tabs>
 
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab3">
      <ion-icon name="cube"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab4">
      <ion-icon name="alarm"></ion-icon>
      <ion-label>Tab 4</ion-label>
    </ion-tab-button>
 
  </ion-tab-bar>
 
</ion-tabs>

Ya tenemos en funcionamiento nuestra aplicación con los cuatro tabs:

Puedes descargar o clonar este proyecto desde GitHub en el siguiente link:

https://github.com/edurevilla/libro-ionic-5-tabs.git

 

Eso es todo por hoy.

Tutorial de IONIC: Menú lateral

tutorial ionic 4-5, , , , , , , , ,

Hola a todos, por diversos motivos he tenido abandonado el blog durante una temporada, por fin estoy de vuelta y me dispongo a seguir con el tutorial de Ionic que dejé a medias.

En el último post vimos cómo navegar entre páginas con Ionic, hoy vamos a seguir con el tutorial aprendiendo a utilizar los menús laterales.

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

Indice Tutorial Ionic >>

Podemos crear un  proyecto de ionic utilizando la plantilla sidemenu y ya nos crearía la estructura de una aplicación con un menú lateral y dos páginas de ejemplo.

Sin embargo, para entender mejor cómo funciona vamos a crear un proyecto con la plantilla blank y vamos a añadir nosotros los componentes necesarios para generar un menú lateral.

Lo primero que vamos ha hacer es crear un nuevo proyecto:

ionic start menu blank

Seleccionamos Angular y le podemos decir que no queremos integrar Capacitor, para este ejemplo no lo necesitamos.

Bien, una vez se haya generado el proyecto nos situamos desde la consola dentro de la carpeta menú que se acaba de crear.

Como por defecto ya nos crea la página home, vamos a crear otra página que se llame listado:

ionic g page listado

La idea es tener dos opciones en el menú, una que nos lleve a la página de inicio (home) y otra que nos lleve a una segunda página, en este caso la página listado que acabamos de crear.

La plantilla principal de nuestra aplicación, la que se va a cargar siempre al inicio se encuentra en el archivo app.component.html.

Si echamos un vistazo al contenido de app.component.html vemos que contiene lo siguiente:

<ion-app>
 <ion-router-outlet></ion-router-outlet>
</ion-app>

Dentro de ion-router-outlet se carga el contenido de la página que esté activa en ese momento, es decir la que indique la ruta actual.

Aquí vamos a añadir el menú, que dependiendo de la opción seleccionada cambiará la ruta para mostrar dentro de ion-router-oulet la página que hayamos seleccionado.

Editamos app.component.html y añadimos el siguiente código:

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false">
            <ion-item [routerDirection]="'root'" [routerLink]="'/listado'">
              <ion-icon slot="start" [name]="'list'"></ion-icon>
              <ion-label>
                Listado
              </ion-label>
            </ion-item>
            <ion-item [routerDirection]="'root'" [routerLink]="'/home'">
              <ion-icon slot="start" [name]="'home'"></ion-icon>
              <ion-label>
                Inicio
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu> 
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Lo primero que hacemos es envolver todo en una etiqueta ion-split-pane, esto permite adaptarse a pantallas más grandes (como tabletas) y muestra el menú justo al lado de su contenido. Le asignamos la propiedad contentId=”main-content” que serà el id que le vamos a asignar a la etiqueta ion-router-outlet donde irá el contenido de la aplicación.

Después tenemos ion-menu que es el componente que contiene el menú y al que asignaremos tambien el parámetro contentId=”main-content”, dentro del mismo añadimos su contenido igual que si sería una página, hemos añadido un ion-header con un toolbar y dentro el título del menú.

Después tenemos un ion-content y dentro hemos creado un listado con dos items con las opciones del menú.

Como vimos en el anterior capítulo routerDirection sirve para indicar la dirección de la animación.

En el parámetro routerLink de cada item definimos la ruta que tenemos que cargar al pulsar en el.

Observa que la ruta está entre comillas simples dentro de las comillas dobles, esto es para que lo tome como un literal en lugar de una variable.

También podríamos definir una variable con un array de opciones con sus rutas y hacer un bucle para mostrar las opciones, pero para simplificar hemos creado las dos opciones a mano directamente.

Si ejecutamos la aplicación en un navegador de escritorio con ionic serve se mostrará el menú siempre visible a la izquierda del contenido, sin embargo si ejecutamos ahora la aplicación con ionic serve -l a tamaño móvil no veremos nada especial, solo la página home, para poder ver el menú tenemos que crear un botón para hacer que se muestre el menú. Para ello vamos a modificar el archivo home.page.html,  y añadimos un botón especial llamado ion-menu-button que se encarga de abrir y cerrar el menú, de paso vamos a eliminar todo lo que hay dentro de ion-content y a añadir un texto en el contenido para indicar que es la página de inicio:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>     
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <div class="ion-padding">
      <p>Yo soy la página de inicio</p>
  </div>
</ion-content>

Para finalizar vamos a modificar también la plantilla de la página listado para añadir a la cabecera el botón del menú y de paso añadimos un pequeño listado en el contenido para que haga honor a su nombre, editamos el archivo listado.page.html y añadimos lo siguiente:

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
    <ion-title>listado</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
    <ion-list>
        <ion-item>
          <ion-label>
            Item 1 del listado
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            Item 2 del listado
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            Item 2 del listado
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            Item 3 del listado
          </ion-label>
        </ion-item>
      </ion-list>
</ion-content>

Ahora si ejecutamos ionic serve -l veremos nuestro menú en acción:

Puedes descargar o clonar este proyecto desde GitHub en el siguiente link:

https://github.com/edurevilla/libro-ionic-5-menu.git

 

Eso es todo por hoy, el el siguiente post seguiremos aprendiendo más sobre Ionic.

Tutorial de IONIC: Introducción

tutorial ionic 4-5, , , , ,

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

Indice Tutorial Ionic >>

Hola todos:

Hace tiempo escribí en este blog una serie de tutoriales sobre ionic, estos tutoriales estaban basados en ionic 2/3 y se han quedado desactualizados  con las últimas versiones de IONIC, aprovechando que acabo de sacar mi libro actualizado: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero. voy a iniciar una serie de tutoriales sobre IONIC.

He decidido dejar los tutoriales antiguos avisando de que son para versiones antiguas de ionic, por si alguien necesita esa información para mantener alguna aplicación antigua, y porque me es más sencillo volver a escribir desde cero que adaptar los tutoriales que ya existen.

Sin más preámbulos vamos a empezar con una pequeña introducción:

¿Que es ionic?

Ionic es un framework que nos permite crear de una manera rápida y sencilla aplicaciones móviles multiplataforma (Android, IOS, Windows, PWAs…) utilizando tecnologías web (HTML, JAVASCRIPT, CSS).

Para poder utilizar elementos web en una aplicación móvil utiliza lo que se conoce como una  Webview.

A este tipo de aplicaciones se las conoce como aplicaciones híbridas. El resultado final es una app “nativa” que puedes subir a las tiendas de apps.

Ionic nos ofrece un montón de componentes para crear la interfaz de usuario con estilo nativo listos para utilizar por lo que podemos crear aplicaciones con una estética profesional y con muy poco esfuerzo.

La principal ventaja de utilizar Ionic es que es multiplataforma, es decir que con un mismo código podemos generar apps para Android, IOS y Web e incluso aplicaciones de escritorio utilizando Electron, por lo que el tiempo y coste de desarrollo y mantenimiento de una app se reduce sensiblemente.

Otra ventaja es que si dispones de conocimientos previos en desarrollo web frontend ya tienes medio camino andado ya que la curva de aprendizaje será mucho menor.

Además Ionic dispone de muchos componentes ya creados para que sin apenas esfuerzos puedas desarrollar una app de apariencia profesional sin necesidad de ser un gran diseñador.

Novedades a partir de la versión 4 de IONIC

Ionic 2/3 estaba basado en Apache Cordova y Angular.

Apache cordova nos permite ejecutar nuestro código escrito con tecnología web (html, css, javascript) encapsulado en una webview y hace de puente entre esta y nos permite hacer uso de las funciones nativas del móvil (cámara, gps, etc) a través de plugins.

Sin embargo a partir de la versión 4 de Ionic se incorpora Capacitor.

Capacitor

Al igual que lo hacía apache cordova, Capacitor hace de puente entre nuestra aplicación web y el dispositivo nativo.

Capacitor además se integra mejor cuando ejecutamos nuestra aplicación en otros entornos que no sean dispositivos móviles como en navegadores de escritorio facilitando el desarrollo de progressive web apps (PWA).

Hasta la versión 4 Ionic utilizaba Angular como framework de desarrollo para crear componentes web basados en angular. 

A partir de la versión 4 Ionic utiliza componentes web genéricos, para crear los Web Components, el equipo de Ionic creó una herramienta llamada Stencil.

Los Web components son un conjunto de web APIs que te permiten crear etiquetas HTML personalizadas que son reutilizables.

Stencil

Stencil es una herramienta que crea componentes web, y el equipo Ionic ha creado un conjunto de componentes web con Stencil que forman parte de Ionic Core. 

Ionic Core contiene el conjunto de los componentes web que componen la biblioteca de la interfaz de usuario de Ionic (listas, botones, selectores, etc.).

Nosotros no necesitamos utilizar Stencil ni entender cómo funciona para utilizar los componentes que el equipo de ionic a creado para nosotros. 

Angular

Al utilizar componentes web genéricos y no componentes Angular podemos utilizar cualquier framework por lo que no es obligatorio el uso de Angular. Si te sientes más cómodo utilizando otro framework puedes hacerlo.

Sin embargo en este tutorial vamos a utilizar Angular para desarrollar nuestras aplicaciones ya que Angular nos proporciona muchas cosas listas para usar que nos ayudan a construir aplicaciones bien estructuradas. 

Hay una biblioteca llamada @ionic/angular que es la biblioteca de ionic específica de Angular, es la que ya veníamos utilizando antes de la versión 4 de ionic, este paquete ofrece funcionalidades adicionales que solo se pueden utilizar con Angular, sin embargo utiliza los mismos componentes web que pueden ser utilizados con otro framework. 

Angular nos permite aprovechar las ventajas de este framework, además como Angular siempre ha sido el framework por defecto de Ionic hay mucho más soporte y muchas más apps desarrolladas con ionic utilizando Angular.

Además hay muchas librerías y utilidades ya creadas en Angular para utilizar con Ionic.

Angular utiliza TypeScript como lenguaje de programación, si no dominas estas tecnologías mencionadas no te preocupes, trataré de ir explicando las cosas básicas necesarias según las vayamos necesitando en los ejemplos que realizaremos.

La versión 4 de Ionic también trae cambios en la navegación entre páginas utilizando ahora el router de Angular.

También cambian en la versión 4 los ciclos de vida de las páginas, ya no utilizamos por ejemplo ionWillLoad o ionViewDidEnter, en su lugar utilizaremos ngOnInit.

Si vienes de utilizar ionic en versiones anteriores te será útil conocer estas diferencias, si empiezas de cero no te preocupes, veremos todo lo que necesitas saber para desarrollar aplicaciones con Ionic en la versión actual.

Vamos a ver como instalar Ionic y todas la herramientas necesarias para empezar a desarrollar tus aplicaciones con Ionic.

Instalar Node.js

Para instalar ionic debemos instalar primero Node.js para ello descargamos el paquete con la versión LTS de http://nodejs.org/ y lo instalamos. 

Si estás usando linux y quieres utilizar un gestor de paquete puedes consultar aquí los pasos a seguir para instalar Node.js usando un gestor de paquetes según la distribución que tengas instalada:

https://nodejs.org/es/download/package-manager/

Instalar ionic

Una vez instalado nodejs abrimos un terminal (consola del sistema) e instalamos ionic con el siguiente comando:

npm install -g ionic

 

Una vez instalado ya podemos crear aplicaciones con ionic y ejecutarlas en el navegador, sin embargo para poder ejecutarlas en un dispositivo o emulador Android debemos instalar las herramientas de desarrollo de Android, así mismo para poder ejecutar la app para IOS necesitaremos instalar Xcode.

Cabe mencionar que aunque Android Studio lo podemos instalar en cualquier plataforma, es decir podemos desarrollar para Android desde un pc con Windows, Linux o MAC, para poder compilar las Apps para IOS necesitamos un MAC con Xcode instalado.

Para instalar Android Studio descargalo desde la página oficial y sigue las instruciónes dependiendo de tu sistema operatico: https://developer.android.com/studio/index.html.

Para instalar Xcode en Mac solo tenemos que buscarlo en la App Store e instalarlo, es gratuito.

Por último necesitaremos un editor de código que nos coloree typescript para facilitarnos el trabajo. En realidad podríamos editar el código con cualquier editor de texto plano, pero una buena opción para typescript es utilizar Visual Studio Code de Microsoft que es multiplataforma y podéis descargarlo desde el siguiente enlace:  https://code.visualstudio.com/

Hola Mundo en Ionic

Vamos a crear nuestra primera aplicación con Ionic, el famoso “hola mundo” que siempre es el punto inicial en el aprendizaje de cualquier lenguaje de programación o framework.

Para crear nuestro proyecto “hola mundo” iremos a la consola de comandos o terminal y escribimos el siguiente comando:

ionic start hola-mundo blank

 

Seleccionamos Angular como framework y tras un rato descargando los paquetes necesarios para crear nuestra aplicación ya estará listo nuestro proyecto.

El comando start de ionic cli (command–line interface)  se utiliza  para crear (iniciar) un nuevo proyecto, el siguiente parámetro es el nombre del proyecto, en este caso hola-mundo, el siguiente parámetro es el tipo de plantilla que vamos a utilizar, en este caso blank que indica que utilizaremos una plantilla vacía.

Existen tres tipos de plantillas:

  • blank : Crea una plantilla vacía.
  • sidemenu: Crea una plantilla con menú lateral.
  • tabs: Crea una plantilla con Tabs (Pestañas). 

Para ver el resultado en el navegador debemos entrar dentro de la carpeta del proyecto ‘hola-mundo’ que se acabamos de crear con ionic start y escribimos el siguiente comando:

ionic serve -l

 

Podemos utilizar simplemente ionic serve, pero con el parámetro -l nos muestra como queda nuestra app en IOS, Android  y Windows.

Para poder ejecutar ionic serve con el parámetro -l tenemos que instalar @ionic/lab, por eso la primera vez que lo ejecutemos nos pedirá que instalemos el paquete @ionic/lab:

Install @ionic/lab? (Y/n)

Le decimos que sí pulsando la tecla ‘Y’.

En la barra superior a la derecha desplegando la opción platforms podemos seleccionar en qué plataformas queremos ver cómo queda nuestra aplicación.Vista de cómo quedaría nuestra primera App con plantilla Blank en el navegador.

Si no utilizamos -l mostrará solo una plataforma a pantalla completa.

Como podemos ver,  sin nosotros hacer nada tenemos creada la estructura de una app que podremos modificar para añadir lo que necesitemos.

Eso es todo por hoy,  el el próximo post analizaremos la estructura de un proyecto de IONIC y veremos cómo empezar a modificar nuestro Hola Mundo.

Como crear componentes personalizados con Ionic

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 posts anteriores hemos aprendido a crear nuestras apps multiplataforma con Ionic.
Ionic nos ofrece un montón de componentes ya creados para utilizar en nuestras apps y realmente nos permiten con poco esfuerzo crear una interfaz funcional para nuestras aplicaciones.

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

Indice Tutorial Ionic >>

Sin embargo hay momentos que puede interesarnos crear nuestros propios componentes personalizados.

Un componente es simplemente algo que podemos mostrar las veces que queramos en la pantalla, como si fuese una etiqueta html, solo que a su vez un componente puede estar formado por etiquetas html y otros componentes.

Para ver mejor como podemos crear nuestro propios componentes personalizados en Ionic vamos a crear un proyecto de prueba al que vamos a llamar miComponente:

ionic start miComponente blank

Una vez creado el proyecto si  entramos en home.ts veremos esto:

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

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

  constructor(public navCtrl: NavController) {

  }

}

En Ionic todo son componentes, de hecho las páginas de nuestra aplicación son componentes, si nos fijamos tiene un decorador @Component por lo que podemos ver que la propia pagina es un componente  que tiene el selector ‘page-home’ y como plantilla utiliza el archivo home.html.

Vamos a crear un sencillo componente al que vamos a llamar saludar, para ello vamos a echar mano de ionic generator, nos situamos dentro la carpeta de  nuestro proyecto en la consola de comandos y tecleamos lo siguiente:

ionic g component saluda

Con esto se habrá creado una nueva carpeta llamada components y dentro una carpeta llamada saluda que al igual que las páginas contiene un archivo .ts como controlador, un archivo .scss para los estilos y su plantilla .html.

Si observamos lo que contiene el archivo saluda.html vemos que simplemente muestra el contenido de la variable text dentro de un div:

<!-- Generated template for the SaludaComponent component -->
<div>
  {{text}}
</div>

Vemos que text está definida en el controlador saluda.ts y contiene la famosa frase “Hello Word”

import { Component } from '@angular/core';

/**
 * Generated class for the SaludaComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;

  constructor() {
    console.log('Hello SaludaComponent Component');
    this.text = 'Hello World';
  }

}

Como vemos el controlador de un componente es prácticamente igual que el de una página.

Tenemos el decorador @Component donde se indica que su selector es ‘saluda‘ y la plantilla que utiliza es saluda.html.

Para poderlo utilizar tenemos que importar y declarar el componente 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 { HomePage } from '../pages/home/home';
import { SaludaComponent } from '../components/saluda/saluda';


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

Para utilizarlo en la página home editamos el archivo home.html y añadimos la etiqueta con el componente que acabamos de crear:

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

<ion-content padding>
  <saluda></saluda>
</ion-content>

Así de fácil.

Si ejecutamos nuestra app de ejemplo con ionic serve -l veremos algo similar a esto:

 

A nuestro componente le podemos añadir también atributos personalizados.
Por ejemplo podemos pasarle un atributo que se llame nombre de esta manera:

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

<ion-content padding>
 <saluda nombre="Eduardo"></saluda>
</ion-content>

Luego en el controlador definimos el parámetro de entrada con el decorador Input de la siguiente manera:

import { Component, Input } from '@angular/core';

/**
 * Generated class for the SaludaComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;
  @Input('nombre') nombre : string;

  constructor() {
    console.log('Hello SaludaComponent Component');
    this.text = 'Hello World';
  }

}

Para poder utilizar el decorador Input debemos importarlo primero.

Ahora podemos hacer que en lugar de saludar al mundo con “Hello Word” salude a la persona que recibamos en el parámetro nombre:

import { Component, Input } from '@angular/core';

/**
 * Generated class for the SaludaComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;
  @Input('nombre') nombre : string;

  constructor() {
    console.log('Hello SaludaComponent Component');
    this.text = 'Hola '+this.nombre;
  }

}

Bien, si como en el ejemplo hemos pasado “Eduardo” al parámetro nombre cabría esperar ver en pantalla “Hola Eduardo”, sin embargo comprobamos que muestra “Hola undefined”, a no ser que tus padres te hayan puesto de nombre undefined hay algo que no está funcionando.

Eso eso es porque estamos accediendo a la variable this.nombre desde el constructor, y en el momento que se ejecuta el constructor aun no están accesibles los parámetros que recibimos en nuestro componente, para ello utilizamos ngOnInit:

/**
 * Generated class for the SaludaComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;
  @Input('nombre') nombre : string;

  constructor() {
    console.log('Hello SaludaComponent Component');
  }


  ngOnInit(){
    this.text = 'Hola '+this.nombre;
  }


}

Ahora podemos comprobar que muestra el nombre que le hayamos pasado.

También podemos utilizar la la variable nombre directamente en la plantilla de nuestro componente de esta manera:

<!-- Generated template for the SaludaComponent component -->
<div>
  Hola {{ nombre }}
</div>

Por ultimo si en lugar de pasarle directamente el nombre al componente queremos utilizar una variable debemos poner el parámetro entre corchetes , por ejemplo imaginemos que tenemos un array de usuarios  y queremos saludarles a todos, en home.ts definiriamos un array de usuarios:

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

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

  usuarios: any = [
    { 
      nombre: 'Eduardo',
      edad: 41
    },
    { 
      nombre: 'Pedro',
      edad: 28
    },
    { 
      nombre: 'Francisco',
      edad: 34
    },
    { 
      nombre: 'Maria',
      edad: 43
    }
  ]

  constructor(public navCtrl: NavController) {

  }

}

Ahora en home.html podemos recorrer el array con *ngFor y mostrar nuestro componente saludo pasándole la variable usuario.nombre:

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

<ion-content padding>
 <saluda  *ngFor="let usuario of usuarios" [nombre]="usuario.nombre"></saluda>
</ion-content>

Como podemos ver en este caso el parámetro nombre va entre corchetes []  ya que lo que le pasamos no es un texto literal sino una variable.

Si probamos este ejemplo veremos algo como esto:

Este ejemplo es muy sencillo y es solo para explicar como funcionan los componentes en Ionic, evidentemente no merece la pena crear un componente que solo contenga un div y un texto, pero podemos ampliar nuestro componente añadiendo una imagen o una ficha completa con los datos del usuario, o cualquier otro elemento que se nos ocurra.

Espero que estos sencillos ejemplos sirvan para comprender como crear componentes personalizados en Ionic.

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

Como crear una app multi idioma con Ionic

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, hoy vamos a aprender como crear una app multi idioma con Ionic.

Como siempre vamos a crear una app de ejemplo así que desde consola creamos un nuevo proyecto al que vamos a llamar ejemploidioma:

ionic start ejemploidioma blank --cordova

Con –cordova le indicamos que incluya apache cordova para poder generar el código para android e ios.

Para crear un app multi idioma con Ionic vamos a instalar la librería  ngx-translate:

npm install npm install @ngx-translate/core @ngx-translate/http-loader --save

Ahora en app.module.ts tenemos que añadir los siguientes imports:

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { HttpClient, HttpClientModule } from "@angular/common/http";

Justo debajo de los imports, antes de @NgModule añadimos el siguiente código:

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, "../assets/i18n/", ".json");
}

Por último declaramos dentro de imports lo que esta marcado en amarillo:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot({
          loader: {
              provide: TranslateLoader,
              useFactory: HttpLoaderFactory,
              deps: [HttpClient]
          }
      })
 
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

El código completo de app.module.ts quedaría de la siguiente manera:

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 { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { HttpClient, HttpClientModule } from "@angular/common/http";

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, "../assets/i18n/", ".json");
}

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

Ahora vamos a editar app.component.ts  y añadimos el siguiente código:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateService } from '@ngx-translate/core';

import { HomePage } from '../pages/home/home';

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

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private translateService: TranslateService) {
    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.
      this.translateService.setDefaultLang('es');
      this.translateService.use('es');

      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Con this.translateService.setDefaultLang(‘es’); le idicamos que el idioma por defecto es el español y con this.translateService.use(‘es’); hacemos que sea el idioma seleccionado.

Dentro de la carpeta src/assets vamos a crear una carpeta llamada i18n y dentro de esta situaremos los archivos con los literales en los diferentes idiomas, en este ejemplo vamos a usar inglés y español, por lo que vamos a crear dos archivos llamados en.json para inglés y es.json para español:

En en.json pondremos  lo siguiente:

{
  "HOLA": "Hi {{ value }}",
  "IDIOMA": "Language",
  "BIENVENIDO" : "Welcome"
}

 

Y en es.json:

{
  "HOLA": "Hola {{ value }}",
  "IDIOMA": "Idioma",
  "BIENVENIDO" : "Bienvenido"
}

 

Como puedes observar es un archivo en formato json donde la clave es lo que escribiremos en la vista y  el valor es lo que se mostrará en función del idioma seleccionado.

Como puedes ver HOLA se traduce como “Hola {{ value }}”, donde value se sustituirá por el valor pasado, veremos un poco más adelante como se utiliza.

Ya estamos preparados para traducir  nuestra app.

Vamos a modificar home.html y vamos a crear un ejemplo sencillo donde vamos a tener un elemento ion-card que simplemente nos da la Bienvenida y nos saluda y un selector para cambiar de idioma:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ejemplo Idioma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header text-center>
      {{ 'BIENVENIDO' | translate }}
    </ion-card-header>
      
    <ion-card-content>
      <p text-center>
        {{ 'HOLA' | translate:{value: 'Eduardo'} }} 
      </p>
    </ion-card-content>
  </ion-card>

  <ion-item>
    <ion-label>{{ 'IDIOMA' | translate }} </ion-label>
    <ion-select [(ngModel)]="idioma" (ionChange)="cambioIdioma($event)">
      <ion-option value="es">Español</ion-option>
      <ion-option value="en">Inglés</ion-option>
    </ion-select>
  </ion-item>
</ion-content>

Como vemos en la etiqueta ion-select le decimos que en el evento (ionChange) llame a la función cambioIdioma($event), $event contendrá la opción seleccionada.

Para traducir las cadenas al idioma seleccionado utilizamos en pipe o barra vertical ‘|’ seguido de la palabra translate que es filtro que se aplica.

Como comenté antes podemos pasarle un valor al filtro translate de la siguiente manera:

{{ ‘HOLA’ | translate:{value: ‘Eduardo’} }}

Con esto le estamos diciendo que traduzca la cadena HOLA y le pase al fintro el value ‘Eduardo’.

Al ir a buscar el valor en el archivo json sustituirá valúe por ‘Eduardo’:

“HOLA”: “Hi {{ value }}”,

Esto puede servirnos de ayuda cuando queremos traducir cadenas mostrando un valor que dependiendo del idioma se debe mostrar en una posición diferente de la cadena, por ejemplo la frase “Este es el coche de Eduardo” en inglés sería “this is Eduardo’s car”.

Por lo tanto en inglés podríamos pasarle el nombre y traducirlo así:
“this is {{ value }}’s car”,

Mientras que en español sería
“Este es el coche de {{ value }}”

Bien, ahora solo nos queda definir la función cambioIdioma en el controlador home.ts, para poder cambiar de idioma necesitaremos importar TranslateService e inyectarlo en el constructor:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';

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

  constructor(public navCtrl: NavController, private translateService: TranslateService) {

  }

  cambioIdioma(selectedValue){
    this.translateService.use(selectedValue);
  }

}

Con selectedValue es el idioma que hemos seleccionado en el select y con this.translateService.use(selectedValue) le estamos diciendo que utilice el idioma que le pasamos.

Ya podemos probar nuestro pequeño ejemplo, ejecutando ionic serve -l desde consola veremos algo como esto en nuestro navegador:

Ejemplo de app multi idioma con ionic
Ejemplo de app multi idioma con ionic

Por último, como extra si desde el controlador necesitamos traducir una cadena podemos utilizar this.translateService.instant().

Por ejemplo si queremos mostrar un loading y que se muestra cargando en el idioma seleccionado, teniendo ya definido el literal cargando en los ficheros .json podemos hacer lo siguiente:
this.loading = this.loadingCtrl.create({
      content: this.translateService.instant('Cargando'),
      spinner: 'dots',
    });
Hay que tener e cuenta que  translate.instant es síncrono, por lo que tenemos que estar seguros de que  los archivos lang  han sido cargados para obtener traducciones.
En su lugar también se puede utilizar translate.get, que devuelve un elemento observable.
Para saber más sobre ngx-translate podeis visitar su página oficial en http://www.ngx-translate.com/
Eso es todo por hoy, espero que te sea de utilidad.

 

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