Archivo de la etiqueta: ionic 4

Tutorial de IONIC 4/5:Mini Juego de acertar números (actualizado)

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

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

Indice Tutorial Ionic >>

Después de ver en el post anterior como modificar la plantilla de una página para simplemente mostrar el texto “Hola Mundo”, vamos a avanzar un poco más en nuestro aprendizaje y vamos a programar nuestra primera aplicación interactiva.

Se trata de un simple juego de acertar el número secreto. La aplicación creará un número aleatorio que nosotros debemos adivinar.

Por primera vez vamos a programar con Ionic. Por el camino aprenderemos conceptos como Data Binding, que nos permite actualizar valores entre el html y el controlador y recoger las acciones del usuario como  pulsar un botón.

Bien, sin más preámbulos  vamos a empezar:

Vamos a crear un nuevo proyecto Ionic que en este caso le vamos a llamar adivina: Abrimos el terminal o consola de comandos y situándonos en la carpeta donde queremos crear nuestro proyecto escribimos:

ionic start adivina blank --type=ionic-angular

 

Nos situamos dentro de la carpeta del proyecto de acabamos de crear y una vez dentro ejecutamos ionic serve para ver en el navegador los cambios que vayamos haciendo en nuestra aplicación:

 ionic serve -l

 

Recuerda que si utilizas la opción -l con ionic serve puedes visualizar como queda la app en todas las plataformas, la primera vez que ejecutes el comando en un proyecto nuevo te pedirá que instales @ionic/lab.

Ahora abrimos la carpeta del proyecto que acabamos de crear en el editor, entramos en src/app/home y abrimos el archivo home.page.html.

Editamos su contenido para que quede de la siguiente manera:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Adivina el número secreto
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <div class="ion-padding">
    <ion-input type="number" min="1" max="100" [(ngModel)]="num" placeholder="Introduce un número del 1 al 100"></ion-input>
    <p>El número secreto es {{ mayorMenor }} {{ num }}</p>
    <ion-button expand="block" (click)="compruebaNumero()">Adivina</ion-button>     
  </div>
</ion-content>

 

Si nunca antes has programado en angular ni en ionic es posible que el código te resulte extraño, no te preocupes, ahora vamos a ver lo que es cada cosa, si por el contrario ya has programado en angular o en versiones anteriores de ionic es probable este código te resulte familiar.

Tenemos una plantilla básica de una página con ion-header, ion-navbar y ion-title donde hemos puesto el título de nuestra aplicación “Adivina el número secreto”. Hasta aquí ninguna novedad con lo que ya habíamos visto en el capítulo anterior.

Dentro de ion-content que como sabemos es donde va el contenido de la página tenemos un div al que le aplicamos la clase ion-padding que deja un espacio entre el borde de la pantalla y el contenido dentro de este div es donde está lo interesante:

<ion-input type="number" min="1" max="100" [(ngModel)]="num" placeholder="Introduce un número del 1 al 100"></ion-input>


Primero tenemos un ion-input que es muy parecido a un input de html, le decimos que sea de tipo number, le ponemos un rango mínimo a 1 y máximo a 100.

El siguiente parámetro [(ngModel)] es el encargado de hacer el Data Binding entre el valor del input y una variable llamada num que estará definida como luego veremos en el controlador de la página. Este es un Data Binding bidireccional ya que si se introduce un valor en el input automáticamente este será reflejado en la variable del controlador, del mismo modo si algún proceso cambia el valor de esta variable en el controlador éste automáticamente aparecerá reflejado como valor del input. 

Por último el input tiene un placeholder indicando que se introduzca un valor entre 1 y 100.

La siguiente línea es un párrafo que contiene lo siguiente:

 <p>El número secreto es {{ mayorMenor }} {{ num }}</p>

Si ya conoces ionic o angular sabes de qué se trata. En este caso con las dobles llaves “{{ }}”  hacemos un Data Binding unidireccional, mayorMenor es una variable que estará definida en el controlador y con las dobles llaves muestra su valor. 

La variable contendrá el texto “mayor que” en caso de que el número secreto sea mayor al introducido, “menor que” en caso de ser menor e “igual a” en caso de ser igual.

En las últimas llaves mostramos el valor de la variable num, veremos cómo al introducir un número este se actualiza automáticamente.

Por último tenemos un botón para comprobar si el número introducido coincide con el número secreto:

<ion-button expand=”block” (click)=”compruebaNumero()”>Adivina</ion-button>

En la documentación oficial de ionic podéis ver más sobre cómo crear distintos tipos de botones con ionic:https://ionicframework.com/docs/api/button

De momento esto es todo lo que necesitamos en la plantilla de nuestro juego.

Ahora necesitamos programar el comportamiento en el controlador de la página.

Si abrimos el archivo home.page.ts que se genera automáticamente al crear un proyecto en blanco veremos el siguiente código:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

}

 

Este código esta es typeScript. Como ya hemos comentado TypeScript permite utilizar elementos de las últimas versiones del estándar ECMAscript aunque todavía no estén implementadas en el navegador que estemos utilizando. También nos permite utilizar variables tipadas.

Como hemos comentado anteriormente con Ionic vamos a utilizar Angular que a su vez utiliza TypeScript, así que es muy beneficioso conocer Angular y typescript.

Aquí vamos a explicar a groso modo las cuestiones más importantes para poder desenvolvernos con ionic pero para saber más sobre Angular y sacarle el máximo podéis encontrar en la red muchos recursos para aprender Angular.

Analicemos el código de home.page.ts:

Lo primero que vemos es una línea import:

import { Component } from ‘@angular/core’;

Import se utiliza para importar módulos que contienen librerías y clases para poder utilizarlas en nuestro proyecto. Podemos importar módulos propios de Ionic que ya se incorporan al crear un proyecto, librerías de Angular, librerías de terceros que podemos instalar o nuestras propias  librerías.

En este caso se importa el elemento Component de @angular/core. 

Las páginas son componentes de Angular, por eso necesitamos importar Component.

Después vemos el siguiente código:

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

 

@Component es un decorador de Angular. Angular usa los decoradores para registrar un componente.

Los decoradores empiezan con @.

Los decoradores se colocan antes de la clase y definen cómo se va a comportar esta.

Existen los siguientes  decoradores:

  • @Component
  • @Injectable
  • @Pipe
  • @Directive

De momento nos interesa @Component.

En el código vemos que @Component contiene un objeto con dos atributos, selector:’app-home’, que es el selector que se va a aplicar a la página,  templateUrl:’home.page.html’ que es la plantilla html que va a renderizar la página y styleUrls: [‘home.page.scss’] donde se indica dónde se encuentran los estilos que se van a aplicar al componente, es decir,  en este caso a la página.

Por último se exporta una clase llamada HomePage:

export class HomePage {

  constructor() {}

}

 

Podemos añadir a la clase un constructor en caso de que necesitemos iniciar atributos de la clase, inyectar dependencias o realizar alguna operación en el momento de crear la clase, en este ejemplo no lo vamos a necesitar, lo veremos más adelante en otros ejemplos.

En TypeScript la creación de clases es muy similar a cómo sería en otros lenguajes de programación orientado a objetos como Java.

Todos los datos que se muestran en la plantilla y todas las funciones a las que se llame por ejemplo al hacer clic en un botón deben formar parte de la clase HomePage que es el controlador de la página.

Como ya hemos visto en la plantilla home.page.html utilizamos [(ngModel)]=”num” para recoger en la variable num el valor que se introduzca en el campo input, también mostramos otra variable llamada mayorMenor que indicará  si el número introducido es mayor o menor que el número que hay que adivinar y mostramos la variable num que se actualizará instantáneamente al introducir un número.

<ion-input type="number" min="1" max="100" [(ngModel)]="num" placeholder="Introduce un número del 1 al 100"></ion-input>
<p>El número secreto es {{ mayorMenor }} {{ num }}</p>


Por lo tanto estas variables deben de estar definidas en el controlador dentro de la clase HomePage del archivo home.page.ts:

import { Component } from '@angular/core';
 
@Component({
 selector: 'app-home',
 templateUrl: 'home.page.html',
 styleUrls: ['home.page.scss'],
})
export class HomePage {
 
 num:number;
 mayorMenor = '...';
 
  constructor() {}
 
}

 

Cómo podemos observar para definir una variable ponemos el nombre de la variable y seguido de dos puntos “:” el tipo de valor que va a contener. Si lo deseamos podemos inicializar la variable con un valor en el momento de declararla. 

En este caso num es de tipo number y mayorMenor de tipo string  aunque no es necesario ponerlo ya que al inicializarla con una cadena de texto automáticamente se le asigna el tipo string.

La variable mayorMenor va a contener un texto con la palabra “Mayor”, “Menor” o “Igual” según sea el caso. Inicializamos la variable mayorMenor con tres puntos suspensivos “…”.

Los tipos primitivos  de variable que podemos definir son:

  • number (Numérico).
  • string (cadenas de texto).
  • boolean (Booleano: true o false).
  • any (cualquier tipo).
  • Array.

También vamos a necesitar otra variable que contenga el número secreto que debemos adivinar, le vamos a llamar numSecret y cómo valor le vamos a asignar la respuesta a la llamada a una función llamada numAleatorio que crearemos a continuación.

Vamos a definir la variable numSecret de tipo number debajo de las dos variables anteriores:

numSecret: number = this.numAleatorio(0,100);

 

Hacemos referencia a la  función numAleatorio con this porque va a ser un método de la propia clase.

Ahora vamos a  crear la función numAleatorio que como su nombre indica nos devolverá un número aleatorio entre dos números:

numAleatorio(a,b)
{
    return Math.round(Math.random() * (b - a) + parseInt(a, 10));
}

 

Esta función recibe como parámetros dos valores que serán el rango mínimo y el máximo para el número aleatorio, es este caso le estamos pasando 0 y 100 por lo que obtendremos un número aleatorio entre 0 y 100.

Por último vamos a crear la función compruebaNumero que se llama al pulsar el botón Adivina que en la parte html como recordarás lo hemos definido así:

<ion-button expand="block" (click)="compruebaNumero()">Adivina</ion-button>

 

Y ahora en home.page.ts definimos la función dentro de la clase HomePage:

compruebaNumero(){
    if(this.num)
    {
      if(this.numSecret < this.num)
      {
        this.mayorMenor = 'menor que';
      }
      else if(this.numSecret > this.num)
      {
        this.mayorMenor = 'mayor que';
      }
      else{
        this.mayorMenor = '';
      }
    }
  }

 

Esta función compara el número secreto que está contenido en la variable numSecret con el número introducido por el usuario que se aloja en la variable num y le asigna a la variable mayorMenor el texto “menor que”, “mayor que” o “igual a” en función de si es menor, mayor o igual que esta.

Observa que debemos utilizar this para las variables ya que son atributos de la propia clase.

El código completo de home.page.ts quedará de esta manera:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  num: number;
  mayorMenor = '...';
  numSecret: number = this.numAleatorio(0,100);
 
  constructor() {}
 
  numAleatorio(a, b) {
    return Math.round(Math.random() * (b - a) + parseInt(a, 10));
  }
 
  compruebaNumero(){
    if(this.num)
    {
      if(this.numSecret < this.num)
      {
        this.mayorMenor = 'menor que';
      }
      else if(this.numSecret > this.num)
      {
        this.mayorMenor = 'mayor que';
      }
      else{
        this.mayorMenor = '';
      }
    }
  }
}

 

Ahora si lo ejecutamos en el navegador con ionic serve -l (si no lo tenías ya en marcha), podemos ver un campo para introducir un número, y debajo un texto que dice “el número secreto es … ”, en estos momentos  no hay introducido ningún número por lo que aparecen los puntos suspensivos.

Si introducimos un número vemos que automáticamente en el texto aparece ese número el mismo tiempo que lo escribimos. Eso es porque estamos realizando un Data Binding con la variable num. Al utilizar [(ngModel)]=”num” en el campo input le estamos indicando que la variable coja el valor que introducimos en el input y lo refresque automáticamente en todos los sitios donde se utilice, por ejemplo en el texto de debajo.Lo mismo ocurre si cambiamos el valor de la variable desde el código.

Por últimos si pulsamos el botón adivina obtendremos algo como esto:

Al pulsar el botón se ha ejecutado la función compruebaNumero(), dentro de la función se ha comprobado que el número secreto es mayor a 12 por lo que a la variable mayorMenor se le asigna el texto “mayor que”.

Cuando acertemos el número secreto el texto dirá que el número secreto es el número introducido. Esto es un poco soso, vamos a hacer algunos cambios para que cuando acertemos el número nos muestre un mensaje felicitándonos por haber acertado.

Este mensaje lo ponemos en la plantilla html pero solo se debe mostrar cuando se cumpla una condición y es que la variable mayorMenor no contenga ningún texto, eso ocurre cuando hemos acertado ya que si el número introducido no es ni mayor ni menor, es decir que es es igual al número secreto hacemos la siguiente asignación this.mayorMenor = ”.

Vamos a añadir lo siguiente en home.page.html justo antes del botón “Adivina”:

<ion-card *ngIf="mayorMenor==''">
  <ion-card-header>
  ¡¡¡Enhorabuena!!!
</ion-card-header>
<ion-card-content>
    Has acertado, el número secreto es el {{ num }}
</ion-card-content>
</ion-card>

 

Aprovecho la ocasión para introducir otro componente de ionic: ion-card, las cards o “tarjetas” son componentes que muestran la información en un recuadro. Como vemos dentro contiene otros dos componentes <ion-card-header> y <ion-card-content>, Como habrás adivinado el primero permite mostrar una cabecera dentro de la tarjeta y el segundo el contenido que deseemos.

En la documentación oficial de ionic podéis ver todas las posibilidades que tiene ion-card: https://ionicframework.com/docs/v2/components/#cards

Queremos que está card se muestre solo cuando la variable de nuestro controlador mayorMenor contenga una cadena vacía después de hacer la comprobación.

Aquí entra en juego la directiva condicional *ngIf:

<ion-card *ngIf=“mayorMenor==””>

La directiva *ngIf es una directiva estructural, lo que significa que nos permite alterar el DOM (Document Object Model), estas directivas llevan un asterisco “*” delante.

Con *ngIf le estamos indicando que el elemento donde se encuentra, ion-card en este caso, solo se muestre si se cumple la condición que tiene definida entre las dobles comillas. En este caso le estamos diciendo que solo se muestre el elemento ion-card cuando mayorMenor==’’.

Sabiendo esto vamos a darle otra vuelta de tuerca más y vamos a añadir un botón para volver a jugar una vez que hemos acertado, este botón llamará a una función para volver a generar un nuevo número aleatorio y reiniciará las variables para que se oculte el ion-card. Este botón debe permanecer oculto hasta que hayamos acertado, y cuando se muestra debe ocultarse el botón Adivina para que no podamos pulsarlo después de haber adivinado el número hasta que empecemos una nueva partida.

Editamos home.page.html y añadimos *ngIf al botón Adivina para que solo se  muestre cuando no hemos acertado el número:

<ion-button *ngIf="mayorMenor!=''" expand="block" (click)="compruebaNumero()">Adivina</ion-button>

 

Ahora añadimos el botón “Volver a Jugar” justo después del de Adivina en home.page.html:

<ion-button *ngIf="mayorMenor==''" expand="block" (click)="reinicia()">Volver a Jugar</ion-button>

 

Con *ngIf indicamos que solo se muestre cuando hayamos acertado el número, es decir cuando la variable mayorMenor esté vacía, y en el evento (click) le indicamos que ejecute la función reinicia().

Por lo tanto ahora  vamos a editar nuestro controlador (home.page.ts) y añadimos la función reinicia(), que como hemos dicho debe reiniciar las variables para poder comenzar el juego:

 reinicia(){
   // reiniciamos las variables
   this.num = null;
   this.mayorMenor = '...';
   this.numSecret = this.numAleatorio(0,100);
 }

 

Si acertamos el número veremos algo como esto:

Vista de nuestro juego al acertar.
Vista de nuestro juego al acertar.

Ahora ya podemos volver a jugar una vez de que hemos adivinado el número.

Este juego se podría mejorar añadiendo un contador de intentos. Podríamos limitar el número de intentos y mostrar un mensaje si se han consumido todos los intentos sin acertar el número secreto. Esto lo dejo como deberes para el que quiera practicar más, sin duda experimentar y tratar de modificar el juego es una de las mejores formas de aprender.

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

https://github.com/edurevilla/libro-ionic-adivina.git.

  Eso es todo por hoy,  nos vemos en el próximo post :).

Tutorial de IONIC 4/5: Estructura de un proyecto en IONIC

tutorial ionic 4-5, , , , , ,

Estructura

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

Indice Tutorial Ionic >>

Vamos a ver la estructura de carpetas y archivos que se generan al crear un proyecto ionic.

Al crear un proyecto con ionic se crea una carpeta con el nombre del proyecto y dentro de ella una estructura de archivos y directorios que contiene todos los elementos del proyecto. Vamos a echar un vistazo a la estructura de archivos y carpetas que se ha generado al crear nuestro proyecto hola-mundo:

Veamos qué contiene cada carpeta:

e2e: Aquí se encuentra el código para escribir tests end to end que prueben la aplicación, no nos vamos a preocupar de esta carpeta.


node_modules: La carpeta node_modules se genera automáticamente al instalar las dependencias npm con “npm install”. Este comando explora el archivo package.json para todos los paquetes que necesitan ser instalados. No necesitamos tocar nada en esta carpeta.

src: Esta es la carpeta más importante y donde realizaremos la mayor parte de nuestro trabajo. Aquí es donde están los archivos con el contenido de nuestra aplicación, donde definimos las pantallas, el estilo y el comportamiento que tendrá nuestra aplicación.
Dentro de src tenemos las siguientes subcarpetas: 

La carpeta app, que es donde se ubicará las páginas que creemos para la aplicación, los servicios y toda la lógica de programación.

La carpeta assets donde almacenaremos aquellos recursos que necesitemos para nuestra aplicación, como imágenes etc.

La carpeta environments contiene un archivo llamado environment.prod.ts y un archivo llamado environment.ts. Ambos archivos exportan un objeto llamado environment donde podemos definir variables de entorno, por defecto contienen la variable variable production que podemos utilizar para diferenciar cuando vamos a ejecutar la aplicación en producción en en modo desarrollo. De momento no nos vamos a preocupar por esto.

La carpeta theme contiene el archivo variables.scss donde se definen las variables css de ionic. Por defecto vienen definidos algunos colores que podemos utilizar.

El archivo global.scss: En este archivo podemos colocar css que se utilice globalmente en cualquier sitio de nuestra aplicación.

index.html: Es el punto de entrada de nuestra aplicación, la mayoría de las veces no necesitaremos cambiar nada aquí.

karma.conf.js: Es el archivo de configuración de karma, se utiliza para la realización de test unitarios.

main.ts: Es el punto de entrada del módulo principal de nuestra aplicación. No necesitaremos cambiar nada aquí.

polyfills.ts: Es un archivo de configuración que se genera al crear un proyecto angular, no necesitaremos modificar nada en el.

test.ts: Este archivo es requerido por karma.conf.js que como hemos comentado se utiliza para realizar tests unitarios. 

tsconfig.app.json, tsconfig.spec.json y typings.d.ts:Contienen configuraciones typescript para los tests.

.editorconfig y .gitignore son dos archivos ocultos, así que dependiendo de tu sistema puede que no los veas, están relacionados con la configuración del editor de código y Git, en principio no tenemos que preocuparnos por ellos.

angular.json: Archivo de configuración de la app.

 

Ionic.config.json:  Contiene información básica sobre la configuración nuestro proyecto.

package.json: Contiene paquetes y dependencias de nodeJS.

tsconfig.json y tslint.json: Son archivos que contienen información necesaria a la hora de compilar TypeScript, no necesitamos editar estos archivos.

Aunque pueda parecer complicado en realidad la mayoría de los elementos los gestiona automáticamente Ionic y nosotros solo tenemos que preocuparnos de la carpeta src que es donde se va a situar nuestro código.

Modificando nuestro hola mundo

Ahora que ya hemos visto la estructura de un proyecto en ionic vamos a modificar nuestro hola-mundo para que realmente diga “hola mundo”.

Si desplegamos el directorio src podemos ver la carpeta app, en esta carpeta es donde se van a alojar todas la páginas que contenga nuestra aplicación. Para que nos entendamos una página será como una vista o un pantalla de nuestra aplicación.

Al crear un proyecto con la plantilla blank ionic genera por defecto una página llamada home, que como su propio nombre indica es la página inicial que se va a mostrar al iniciar nuestra aplicación. Esta página la podemos mantener como página principal y modificarla, o podemos eliminarla y crear otra con el nombre que nosotros queramos. De momento vamos a mantener la que nos ha creado por defecto y vamos a modificar su contenido.

Como podemos ver dentro de la carpeta de la página home que nos ha creado hay cinco archivos:

El archivo home.module.ts: En este archivo se importan los módulos y funcionalidades requeridas.

El archivo home.page.html que contiene la plantilla html de la página.

El archivo home.page.scss que contiene el archivo sass donde podremos modificar el estilo de los componentes de la página.

home.page.spec.ts este archivo se utiliza para las pruebas unitarias, no nos vamos a preocupar de él por ahora.

El archivo home.page.ts que es el archivos typescript que contiene el controlador de la página, donde definiremos el comportamiento de la misma, como por ejemplo la función con la lógica a ejecutarse cuando se pulse sobre un botón de la página etc. Veremos más adelante en profundidad cada una de las partes de una página.

Si abrimos el archivo home.page.html veremos que contiene algo como esto:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
</ion-content>

 

Las páginas se pueden crear utilizando html puro, sin embargo aquí podemos ver algunas etiquetas que no corresponden con las etiquetas html “estándar”. Lo que vemos aquí son componentes de ionic.

Ionic nos ofrece una amplia gama de componentes listos para utilizar y que nos facilitarán la labor de crear nuestra interfaz de usuario con un estilo atractivo y profesional.

Iremos viendo  diferentes componentes de ionic según los vayamos necesitando a lo largo de este libro. En este enlace podéis consultar en la documentación oficial de ionic los componentes disponibles con pequeños ejemplos de como implementarlos: https://ionicframework.com/docs/components/

Todos los componentes de ionic comienzan con el prefijo “ion-“.

Cómo ionic está basado en Web components si en algún caso no nos es suficiente con los componentes que nos ofrece ionic podríamos crear nuestros propios componentes personalizados, aunque en la mayoría de los casos no será necesario ya que ionic nos ofrece una amplia gama de componentes para poder desarrollar nuestras aplicaciones.

Veremos más sobre componentes en posteriores capítulos.

En la página principal (y única de momento) de nuestro proyecto hola-mundo vemos que tenemos los siguientes componentes:

  • ion-header: Cabecera.
  • ion-navbar: Barra de navegación.
  • ion-title: Título.
  • ion-content: Contenido de la página.

Bien, vamos a cambiar el contenido de ion-title por “Hola Mundo”, también vamos a borrar todo lo que hay dentro de la etiqueta ion-content y vamos a poner orgullosos “<h1>¡¡¡¡Hola mundo!!!!<h1>”, así el código de home.html debería quedar de la siguiente manera:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Hola Mundo
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <div class="ion-padding">
    <h1>¡¡¡¡Hola mundo!!!!</h1>
  </div>
</ion-content>

 

Si desde el terminal,escribimos ionic serve -l  para ver desde el navegador como queda en las tres plataformas nuestra aplicación veremos algo como esto:

 

Eso es todo por hoy,  en el próximo post crearemos un mini juego para seguir aprendiendo a crear aplicaciones con este potente framework llamado IONIC.

Tutorial de IONIC 4/5: 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

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.