Archivo de la etiqueta: ionic

Tutorial de IONIC: Navegaci贸n por Tabs

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:

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 鈥淚ntegrate 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 鈥榯abs鈥 est谩 asociado al componente TabsPage, y luego como 鈥渉ijos鈥 (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

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:

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=鈥漨ain-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=鈥漨ain-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

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

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 鈥渘ativa鈥 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 鈥渉ola mundo鈥 que siempre es el punto inicial en el aprendizaje de cualquier lenguaje de programaci贸n o framework.

Para crear nuestro proyecto 鈥渉ola 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 (commandline 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 鈥榟ola-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

 

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

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 鈥淗ello 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

 

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