Archivo de la etiqueta: tutorial ionic en español

Mostrar un mapa offline en Ionic con Leaflet

Hola a todos:

En posts anteriores vimos como mostrar un mapa de Google maps en ionic, sin embargo ¿que pasa si queremos mostrar información en un mapa sin conexión?, google maps no nos podrá mostrar el mapa.

En lugar de utlizar Google maps en esta ocasión vamos a utilizar Leaflet para mostrar un mapa.

Leaflet  es una biblioteca javascript de código abierto que nos permite crear mapas.

Lanzado por primera vez en 2011, es compatible con la mayoría de las plataformas móviles y de escritorio, y es compatible con HTML5 y CSS3 .

Es una de las bibliotecas de mapas de JavaScript más populares y es utilizada por los sitios web como FourSquare , Pinterest y Flickr .

Para poder mostrar un mapa offline es necesario tener alojados locálmente los titles que forman el mapa, si quieres mostrar un mapa de todo el mundo offline a día de hoy podemos afirmar  que es inviable ya que eso supondría muchísimos gigas de información, sin embargo si que puede ser viable mostrar un mapa offline de una ciudad.

Si por ejemplo estás desarrollando una aplicación de turismo de una ciudad concreta donde vas a mostrar en un mapa  los monumentos que merece la pena visitar en dicha ciudad, o cualquier otra información geolocalizada en un mapa, puede ser interesante el poder mostrar un mapa sin necesidad de tener conexión a Internet en ese preciso momento.

Vamos a ver como podemos solucionar esto en ionic 3, y como siempre la mejor manera de verlo es con un ejemplo.

Lo primero que vamos ha hacer es crear un nuevo proyecto en ionic que vamos a llamar mapaoffline:

ionic start mapaoffline blank

Una vez creado el en proyecto entramos en la carpeta con:

cd mapaoffline

Ahora vamos a descargar Leaflet, para ello descargamos la última versión desde  la sección de descargas de su página oficial en el siguiente enlace:

http://leafletjs.com/download.html

Se habrá descargado un archivo .zip, antes de nada debemos descomprimirlo para extraer su contenido:

 

Ahora vamos a crear una carpeta llamada leaflet en src/assets y dentro vamos a copiar la carpeta images y el archivo leaflet.css.

Una vez hecho esto vamos a cargar el archivo leaflet.css en index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  -->

  <link href="build/main.css" rel="stylesheet">
  <link href="assets/leaflet/leaflet.css" rel="stylesheet">
  

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  
  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

Ahora vamos a instalar leaflet desde consola con los siguiente comandos:

npm install leaflet --save
npm install @types/leaflet --save

Ahora que ya tenemos instalado leaflet necesitamos descargar los tiles del mapa que vamos a mostrar, para ello vamos a echar mano de una herramienta llamada Mobile Atlas Creator (MOBAC), para descargarla accedemos al siguiente enlace: http://mobac.sourceforge.net/ y bajamos en la página hasta encontrar Download y pulsamos en latest stable version para descargar la aplicación.

Una vez descargada tenemos que descomprimir el archivo zip y dentro encontraremos el archivo ejecutable.

Al ejecutar Mobile Atlas Creator nos pide introducir un nombre para el atlas (en este caso le llamamos simplemente mapa) y el formato, tenemos que seleccionar Osmdroid ZIP.

 

Pulsamos Aceptar y nos mostrará un mapa, podemos mover zoom para ver mejor la zona que queremos seleccionar. Si hacemos doble click en un punto el mapa hará zoom y se centrará en ese punto, por ello para localizar la zona que queremos mostrar es mejor partir de un zoom que nos permita ver donde estamos e ir haciendo doble click hasta obtener la localización y zoom que nos interesa.

En el panel de la izquierda en la sección map source tenemos los mapas de los que podemos obtener los tiles, muchos son solo de una zona en concreto, yo para este ejemplo voy a utilizar OpenStreetMap4UMaps.eu que nos ofrece un mapa de todo el mundo.

Debajo del panel Map Source tenemos  el panel Zoom Levels, aqui debemos seleccionar los niveles de zoom que queremos que tenga el mapa, cabe mencionar que cuantos más niveles de zoom mas tiles necesitaremos y por ende mas espacio ocuparán las imágenes.

Marcamos por ejemplo 11,12,13,14, y 15.

Ahora tenemos que seleccionar la porción del mapa que queremos descargar:

En la parte de arriba del mapa tenemos una barra de zoom que podemos mover para ver mejor la parte del mapa que queremos seleccionar. Con el ratón sobre el mapa seleccionamos un área.

Yo por ejemplo he seleccionado la zona de Bilbao, de está manera podré mostrar un mapa de Bilbao sin conexión.

Ahora debajo del panel Zoom Levels tenemos el panel Atlas content, aquí vamos a pulsar en el botón Add Selection lo que nos creará un Layer  que si lo desplegamos vemos que contiene dentro los niveles de zoom que hemos seleccionado.

Bien, una vez que hemos seleccionado el área que queremos descargar tenemos que seleccionar Create Atlas y acto seguido comenzará a generar el atlas:

El atlas que se ha generado será un archico .zip con el nombre que le hemos dado al atlas en este caso mapa seguido de la fecha y hora en la que ha sido generado y lo encontrarás en la carpeta atlases dentro de la carpeta  donde tengas Mobile Atlas Creator.

Bien, ahora vamos descomprimir el archivo zip que nos ha generado, al descomprimir vemos que dentro de la carpeta que nos ha creado hay otra carpeta llamada 4uMaps, vamos a cambiarle el nombre a la carpeta por simplemente mapa y a copiar esta carpeta dentro de la carpeta assets de nuestro proyecto:

 

Una vez que tenemos Los tiles copiados en la carpeta assets de nuestro proyecto ya podemos mostrarlos en el mapa.

Vamos a editar home.html e igual que hacíamos cuando creamos un mapa con google maps vamos a crear un div con id=”map” donde se renderizará el mapa:

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

<ion-content padding>
<div id="map"></div>
</ion-content>

Ahora le vamos a definir el tamaño para que ocupe toda la pantalla por lo tanto editamos home.scss y añadimos lo siguiente:

page-home {
    #map{
        width:100%;
        height: 100%;
    }
}

Ahora en home.ts vamos a ver como se crea un mapa con leaflet:

Lo primero que debemos hacer es importar leaflet:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as L from 'leaflet';

Ahora vamos a crear una variable de clase llamada map donde guardaremos la instancia del mapa que vamos a crear:

...

export class HomePage {

  map : any;

  constructor(public navCtrl: NavController) {

  }

...

Ahora cuando se haya cargado la página en el método onViewDidLoad vamos a crear el mapa de la siguiente manera:

ionViewDidLoad() {
  
   this.map = L.map('map').
     setView([ 43.2603479, -2.9334110],
     12);

   L.tileLayer('assets/mapa/{z}/{x}/{y}.png', {    maxZoom: 15  }).addTo(this.map);
   
   L.marker([ 43.2603479,-2.9334110],{draggable: true}).addTo(this.map);
 
 }

Para crear un mapa con Leaflet utilizamos L.map(‘map’), ‘map’ es el id del div que hemos creado en la vista home.html y que es donde se va a renderizar el mapa.

Después con el metodo .setView le indicamos las coordenadas donde se tiene que posicionar el mapa, en este caso son las del centro de Bilbao.

Con L.tileLayer() añadimos al mapa una capa de tiles que va a contener los tiles del mapa que hemos descargado, como primer parámetro le pasamos la ruta donde se encuentran los tiles que puede ser una url si estamos utilizando un mapa online o la ruta donde se encuentrar alojados los archivos para mostrar el mapa offline como es el caso.

Si nos fijamos en la ruta vemos que es ‘assets/mapa/{z}/{x}/{y}.png’,   z, x e y hacen referencia respectivamente al nivel de Zoom, tiles en el eje X y tiles en el eje Y.

Obtendrán el valor correspondiente automáticamente en función de la posición del mapa y al tener la carpeta de los tiles ordenada por estos parámetros no te tienes que preocupar.

Despues con L.marker  creamos un marcador en en las coordenadas indicadas y le decimos que sea  arratrable (draggable) y con .addTo(this.map) lo añadimos a nuestro mapa.

El código completo de home.ts quedaría así:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as L from 'leaflet';

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

  map;

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {
   
    this.map = L.map('map').
      setView([ 43.2603479, -2.9334110],
      12);

    L.tileLayer('assets/mapa/{z}/{x}/{y}.jpg', {    maxZoom: 15  }).addTo(this.map);
    
    L.marker([ 43.2603479,-2.9334110],{draggable: true}).addTo(this.map);
  
  }

}

Ahora si ejecutamos nuestra app aunque no tengamos conexión a internet podemos mostrar un mapa:

 

Eso es todo por hoy, como siempre espero que os sea de utilidad.

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  🙂, también puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

También os recuerdo que ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra:

Anuncios

Firmar el apk para subirlo a Google Play

Hola a todos,

Como el título del post indica hoy vamos a ver cómo generar un archivo .apk firmado para poder subirlo a google play.

Este es el último paso que debemos dar una vez tenemos desarrollada y lista nuestra aplicación para poder subirla a la tienda de aplicaciones de Google.

Android exige que todos los APK se firmen digitalmente con un certificado para poder instalarse.

Cuando firmas un APK se adjunta a este el certificado de clave pública que asocia el APK contigo y con tu clave privada correspondiente. Esto es necesario para poder lanzar cualquier actualización de la app asegurándose que provenga del autor original, por eso es importantísimo que guardemos el archivo keystore generado a buen recaudo para poder lanzar futuras actualizaciones ya que todas las aplicaciones deben usar el mismo certificado durante su vida útil.

Un keystore es un campo binario que contiene una o más claves privadas.

Si desarrollas una app nativa puedes generar el keystore firmar el apk desde Android studio, nosotros vamos a ver como firmar una aplicación   generada desde ionic o apache cordova desde consola.

Para poder firmar el apk desde consola debemos seguir una serie de pasos que vamos a ver a continuación:

Lo primero que necesitamos es generar  el keystore:

Si por ejemplo nuestra app se llama miapp para generar un keystore  abrimos  una terminal, nos situamos en la carpeta de nuestro proyecto y escribimos el siguiente comando:

keytool -genkey -v -keystore miapp.keystore -alias miapp -keyalg RSA -keysize 2048 -validity 10000

miapp.keystore es el archivo que se va a generar, el alias es un nombre de identificación para tu clave, en este caso le hemos llamado miapp.

Con keysize le indicamos que el tamaño de la clave sea de 2048 bits, es recomendavle dejarlo en este valor.

Por último con -validity fijamos el período de validez de tu clave en años, creo que  con 10000 años será suficiente ;-P.

Al ejecutar el comando nos pide que introduzcamos una serie de datos:

Introduzca la contraseña del almacén de claves: 

Volver a escribir la contraseña nueva: 

¿Cuáles son su nombre y su apellido?

¿Cuál es el nombre de su unidad de organización?

¿Cuál es el nombre de su organización?

¿Cuál es el nombre de su ciudad o localidad?

¿Cuál es el nombre de su estado o provincia?

¿Cuál es el código de país de dos letras de la unidad?

Te pide dos veces la contraseña, es importante que recuerdes la contraseña que has introducido ya que la necesitarás después.

Al final te muestra los datos que has introducido y te pide confirmación, le decimos que si:

¿Es correcto CN=Eduardo, OU=Revilla, O=revigames, L=Abadiño, ST=Bizkaia, C=ES?

  [no]:  Si

Lo que os sale debe ser algo parecido a la siguiente imagen:

Bien, con esto ya hemos generado un archivo llamado miapp.keystore en la raiz de nuestro proyecto.

Ahora vamos a crear un nuevo archivo en la raiz del proyecto llamado build.json, lo creamos con nuestro editor de código y dentro escribimos el siguiente código:

{
     "android": {
         "debug": {
             "keystore": "miapp.keystore",
             "storePassword": "XXXXX",
             "alias": miapp",
             "password" : "XXXX",
             "keystoreType": ""
         },
         "release": {
             "keystore": "miapp.keystore",
             "storePassword": "XXXX",
             "alias": "miapp",
             "password" : "XXXX",
             "keystoreType": ""
         }
     }
 }

El primero es para la versión de debug y “release” es para la versión final que vas a subir a la play store.

En el campo keystore debes poner la ruta del archivo .keystore que acabamos de generar, si lo has generado en la raíz solo debes de poner el nombre del archivo, en este caso miapp.keystore.

En alias ponemos el alias que hemos puesto al crear el archivo

Después en storePassword debe poner la contraseña del almacén de claves que indicaste al crear el archivo.

En password debemos poner la contraseña.

Guardamos el archivo y ya solo nos queda generar el apk firmado con el siguiente comando:

ionic cordova build android --release

Si no ha detectado errores y se ha compilado bien podrás encontrar el apk firmado que debes subir a play store en la siguiente ruta dentro de tu aplicación:

/platforms/android/build/outputs/apk/android-release.apk

Eso es todo por hoy, espero que os haya sido de utilidad y ver vuestras apps triunfando en la play store pronto ;-).

Aprovecho para deciros que si has creado alguna app con ionic y la tienes en la play store puedes compartirlo en los comentarios, así servirá como inspiración para que otras personas puedan ver lo que se puede crear con ionic y al mismo tiempo seguro que ganáis alguna descarga extra que siempre viene bien 😉

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  🙂, también puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

También os recuerdo que ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra:

 

Libro: Desarrollo de aplicaciones móviles multiplataforma con Ionic desde cero: IONIC 3

Hola a todos,

Como diría Francisco Umbral, ¡He venido a hablar de mi libro! ;-P

Hoy vengo a anunciaros que por fin he publicado en Amazon mi libro para aprender a programar aplicaciones multiplataforma con ionic.

El libro está en español por lo que será de especial utilidad para aquellos que no se arreglen bien con el inglés.

El libro contiene parte del contenido que ya he compartido en este blog pero revisado y mejorado, además he organizado mejor los contenidos y he añadido mucha información extra.

No quiero aburriros promocionando mi libro, simplemente si te ha gustado el contenido sobre ionic que he compartido en este blog y quieres tenerlo mas completo y mejor organizado y de paso apoyarme ya puedes comprar este libro en amazon:

 

No quiero aburriros más así que muchas gracias a todos los que me habéis apoyado 🙂

 

Un saludo y hasta el proximo post.

Tutorial de Ionic – Mini Juego de acertar números en ionic 2, el controlador de la página y Data Binding y *ngIF

Hola a todos:

Después de ver en el capitulo anterior cómo modificar la plantilla de una página para simplemente mostrar el texto “Hola Mundo”, hoy 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 2. 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 2 que en este caso le vamos a llamar adivina: abrimos el terminal o consola de comandos y escribimos:

ionic start adivina blank

Nos situamos dentro de la carpeta del proyecto de acabamos de crear:

cd adivina

Y una vez dentro ejecutamos ionic serve para ver en el navegador los cambios que vayamos haciendo en nuestra aplicación.

ionic serve

Recuerda que si utilizas la opción -l con ionic serve puede visualizar como queda la app en todas las plataformas.

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

Editamos su contenido para que quede de la siguiente manera:

<ion-header>
  <ion-navbar>
    <ion-title>
      Adivina el número secreto
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content 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 }}</p>
   <button ion-button block (click)="compruebaNumero()">Adivina</button>
</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 ionic 1 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 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 este 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 }}</p>

Si ya conoces ionic o angular sabes de que se trata. En este caso las 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. En este caso la variable contendrá el texto “mayor” en caso de que el número secreto sea mayor al introducido, “menor” en caso de ser menor e “igual” en caso de ser igual.

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

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

En la documentación oficial de ionic podéis ver más sobre como crear distintos tipos de botones con ionic 2: https://ionicframework.com/docs/v2/components/#buttons

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.ts que se genera automáticamente al crear un proyecto en blanco veremos el siguiente código:

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

import { NavController } from 'ionic-angular';

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

  constructor(public navCtrl: NavController) {
    
  }

}

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.

Ionic 2 se basa Angular 2 que a su ver utiliza TypeScript, así que es muy beneficioso conocer angular 2 y typescript.
Aquí vamos a explicar a groso modo las cuestiones imprescindibles para poder desenvolvernos con ionic 2 pero para saber más sobre angular y sacarle el máximo partido podéis consultar en http://learnangular2.com/  así como otros muchos recursos que se pueden encontrar en la red para aprender Angular 2.

Analicemos el código de home.ts:

Lo primero que vemos son dos lineas import:

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

import { NavController } from 'ionic-angular';

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 AngularJS, librerías de terceros que podemos instalar o nuestras propias  librerías.

En este caso se importa el elemento Component de Angular y el elemento NavController de ionic-angular.

NavController lo utilizaremos más adelante para poder navegar entre distintas páginas, de momento en este ejemplo no lo necesitamos.

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

Después vemos el siguiente código:

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

@Component es un decorador de Angular. Angular 2 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:’page-home’, que es el selector css que se va a aplicar a la página, y templateUrl:’home.html’ que es la plantilla html que va a renderizar la página.

Por último se exporta una clase llamada HomePage:

export class HomePage {

  constructor(public navCtrl: NavController) {
    
  }

}

Tenemos que exportar la clase para luego poderla importar si queremos llamar a  la página desde cualquier otro sitio de la aplicación, por ejemplo cuando navegamos entre páginas.
Vemos que la clase tiene un constructor, en TypeScript la creación de clases es muy similar a como 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 click en un botón deben formar parte de la clase HomePage qué es el controlador de la página.

Como ya hemos visto en la plantilla home.html utilizamos (ngModel)]=”num” para recoger en la variable num el valor que se introduzca en el campo input, también mostrábamos otra variable llamada mayorMenor que indicará  si el número introducido es mayor o menor que el número que hay que adivinar:

 <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 }}</p>

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

export class HomePage {

  num:number;
  mayorMenor: string = '...';

  constructor(public navCtrl: NavController) {
    
  }

}

Como 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 ya que 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 como valor le vamos a asignar la respuesta a la llamada a una función llamada numAleatorio que crearemos a continuación.

Definimos la variable numSecret de tipo number:

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 nos devolverá un número aleatorio.

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

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 lo hemos definido así:

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

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

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

Esta función compara el número secreto que esta 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”, “mayor” o “igual” 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.ts quedará de esta manera:

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

import { NavController } from 'ionic-angular';

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

  num:number;
  mayorMenor: string = '...';
  numSecret: number = this.numAleatorio(0,100);

  constructor(public navCtrl: NavController) {
    
  }

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

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

}

Ahora si lo ejecutamos en el navegador con ionic serve (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 … de”, en estos momentos  no hay introducido ningún número por lo que no aparece ningún número en el texto.

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:

Vista de nuestro Juego en acción
Vista de nuestro Juego en acción

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”.

Cuando acertemos el número secreto el texto dirá que el número secreto es igual al 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 contenga el texto ‘igual’.

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

<ion-card *ngIf="mayorMenor=='igual'">
     <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-cardhttps://ionicframework.com/docs/v2/components/#cards

Queremos que está card se muestre solo cuando la variable de nuestro controlador mayorMenor contenga el texto ‘igual’ después de hacer la comprobación.

Aquí entra en juego la directiva condicional *ngIf:

<ion-card *ngIf="mayorMenor=='igual'">

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==’igual’.

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.html y añadimos *ngIf al botón Adivina para que solo se  muestre cuando no hemos acertado el número:

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

Ahora añadimos el botón “Volver a Jugar” a home.html:

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

Con *ngIf indicamos que solo se muestre cuando hayamos acertado el número, y en el evento (click) le indicamos que ejecute la función reinicia().

Por lo tanto ahora  vamos a editar nuestro controlador (home.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);
  }

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, si queréis ver como sería la solución completa con contador de intentos Luis Jordán me ha hecho llegar su solución, en el siguiente enlace podéis encontrar el código de la página home que ha mejorado realizado Luis: https://drive.google.com/file/d/0B7M15FxlLmQJZHBSTUlfMmFkSmM/view?usp=sharing

De momento este simple ejemplo nos ha servido para aprender algunos conceptos básicos sobre Ionic 2, en el siguiente capitulo veremos como navegar entre distintas páginas de una aplicación.

P.D: si no quieres perderte los próximos posts ¡suscribete a mi blog! , también puedes seguirme en Twitter en ‎@revigames y si compartes este post en tus redes sociales te estaré muy agradecido 🙂

Ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra: