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

Hola a todos.

En el capitulo anterior de este tutorial sobre Ionic 2 creamos una app simple, un minijuego de adivinar números que nos sirvió para prender como se programa la lógica de una página en Ionic 2.

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

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

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

Descripción de la aplicación:

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

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

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

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

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

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

ionic start misSitios blank --v2

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

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

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

Ionic Generator

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

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

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

ionic g --list

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

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

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

Generamos los tabs con el siguiente comando:

ionic g tabs misTabs

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

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

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

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

captura ionic generator tabs

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

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

 

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

Si editamos el archivo mis-tabs.ts dentro de carpeta mis tabs, vemos que se ha generado el siguiente código:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Inicio } from '../inicio/inicio'
import { Listado } from '../listado/listado'
import { Info } from '../info/info'

/*
  Generated class for the MisTabs tabs.

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

  tab1Root: any = Inicio;
  tab2Root: any = Listado;
  tab3Root: any = Info;

  constructor(public navCtrl: NavController) {

  }

}

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

Si ejecutamos desde consola ionic serve -lab (siempre dentro de la carpeta de nuestro proyecto) veremos que salen una serie de errores. Eso es porque hay un pequeño bug y es que el comando ionic g cuando genera paginas les agrega la palabra Page por detrás, si vemos el código ts de cualquiera de las paginas que hemos creado, por ejemplo inicio.ts vemos que la clase controladora de la página que ha generado se llama InicioPage, sin embargo cuando las trata de importar en mis-tabs.ts le llama Inicio a secas, por lo tanto debemos añadirle Page  por detrás al nombre de las páginas en los imports.

Después vemos que ha creado tres variables miembro, una para cada página que contiene una instancia de cada página, aquí también debemos añadirle Page por detrás, por lo tanto el código del archivo mis-tabs.ts debería quedar de la siguiente manera:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InicioPage } from '../inicio/inicio'
import { ListadoPage } from '../listado/listado'
import { InfoPage } from '../info/info'

/*
  Generated class for the MisTabs tabs.

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

  tab1Root: any = InicioPage;
  tab2Root: any = ListadoPage;
  tab3Root: any = InfoPage;

  constructor(public navCtrl: NavController) {

  }

}

He marcado de amarillo las variables que tenéis que cambiar añadiendo Page por detrás.

Bien, ahora ya no muestra  esos errores sin embargo vemos que todavía nos muestra la página home que se crea por defecto al crear un proyecto ionic vacío, tenemos que indicarle a la aplicación que la página inicial debe ser la página maestra con los tabs que acabamos de crear.

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

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

rootPage = HomePage;

Por:

rootPage = MisTabsPage;

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

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

import { MisTabsPage } from '../pages/mis-tabs/mis-tabs';


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

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

El import de la página home ya no lo necesitamos así que podemos eliminarlo. de hecho podemos eliminar la carpeta de la pagina home ya que no la vamos a utilizar en esta aplicación.

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

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

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

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

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

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

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

De momento lo dejamos como está.

Por último todas las páginas y servicios que vayamos a utilizar los tenemos que declarar en el archivo app.module.ts. 

Todas las páginas que creemos tienen que ser añadidas tanto al array declarations como al array entryComponents.

Todos los providers que creemos tienen que ser añadidos al array providers. Los providers los veremos más adelante

Por último todos los componentes personalizados o pipes deben ser añadidos al array declarations.

Siempre que vayamos a declarar o utilizar alguna página, modulo o componente en cualquier lugar debemos importarlo primero, así que en app.module.ts debemos importar tanto la página maestra de los tabs como las tres páginas. Un vez importadas tal y como hemos mencionado, debemos declararlas en declarations y en entryComponents.

Vemos como quedaría el código del archivo app.module.ts. Destaco con fondo amarillo los cambios que debéis realizar.

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { MisTabsPage } from '../pages/mis-tabs/mis-tabs';
import { InicioPage } from '../pages/inicio/inicio';
import { ListadoPage } from '../pages/listado/listado';
import { InfoPage } from '../pages/info/info';

@NgModule({
  declarations: [
    MyApp,
    MisTabsPage,
    InicioPage,
    ListadoPage,
    InfoPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    MisTabsPage,
    InicioPage,
    ListadoPage,
    InfoPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

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

Nuestra app con tabs
Nuestra app con tabs

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

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

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Inicio" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Listado" tabIcon="text"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Info" tabIcon="stats"></ion-tab>
</ion-tabs>

Como podemos observar la página maestra de los tabs (mis-tabs.html) solamente contiene el contenedor de tabs que se define con la etiqueta <ion-tabs> y luego una etiqueta <ion-tab> por cada tab. También podemos observar que cada tab tiene el atributo [root] donde se le asigna una variable que si volvemos al controlador en mis-tabs.ts vemos que a cada una de esas variables (tab1Root, tab3Root y tab3Root) les hemos asignado una página que hemos importado. Por lo tanto al pulsar sobre un tab se carga el contenido de la página a la que apunta la variable que tiene asignada.

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

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

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

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

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

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Inicio" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Listado" tabIcon="list-box"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Info" tabIcon="information-circle"></ion-tab>
</ion-tabs>

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

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

<!--
  Generated template for the Inicio page.

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

  <ion-navbar>
    <ion-title>Inicio</ion-title>
  </ion-navbar>

</ion-header>


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

Editamos listado.html y añadimos los siguiente:

<!--
  Generated template for the Listado page.

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

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

</ion-header>


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

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

<!--
  Generated template for the Info page.

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

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

</ion-header>


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

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

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

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

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

Un saludo y hasta el próximo post.

P.D: si no quieres perderte los próximos posts ¡suscribete a mi blog! 😉

 

Anuncios

Tutorial de Ionic 2 – 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 como 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 ha 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 mas 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 --v2

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 capitulo anterior.

Dentro de ion-content que como sabemos es donde va el contenido de la página es donde esta 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 linea 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 muestren 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 que 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 tenias 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. 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! 😉

Tutorial de Ionic 2 – Estructura de un proyecto Ionic 2

Hola a todos:

En el post anterior vimos como crear un proyecto en ionic 2 creando el famoso “Hola Mundo”.

Hoy vamos a ver la estructura de carpetas y archivos que se general al crear un proyecto ionic.

Al crear un proyecto con ionic 2 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:

Estructura de carpetas de un proyecto Ionic 2
Estructura de carpetas de un proyecto Ionic 2

Veamos que contiene cada carpeta:

hooks: Contiene scripts que se ejecutan en el proceso de construcción de la app y que pueden ser creados por el propio sistema de compilación para personalizar comandos de cordova, automatizar procesos, etc. Normalmente no tendremos que modificar nada aquí.

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.

platforms:  En esta carpeta se generará los proyectos nativos para cada plataforma que hayas añadido previamente. Si hemos añadido la plataforma IOS y Android se creará  una carpeta llamada ios y otra llamada android  y dentro tendrán los archivos y carpetas con la estructura de un proyecto nativo.
Estas carpetas se generan al añadir la plataforma y se actualizan cada vez que compilas o ejecutas el proyecto en un emulador o en un dispositivo. Salvo excepciones no tendremos que modificar nada en estas carpetas.

plugins: Contiene los plugins de Cordova que hayamos instalado. Se crean automáticamente en esta carpeta al instalar un plugin así  que tampoco tendremos que modificar nada en esta carpeta a mano.

resources: Contiene el icono y la “splash screen” (pantalla de presentación) de la aplicación con la que después podremos crear automáticamente todas las imágenes en todos los tamaños necesarios para cada plataforma, lo que nos ahorrará mucho tiempo al no tener que generar a mano todos los tamaños de imagen necesarios del icono y la pantalla de presentación. Veremos más adelante como se generan automáticamente.

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.

www:  Esta carpeta se genera automáticamente y contiene la versión actual del código cada vez que efectuamos un cambio. Si habías trabajado anteriormente con ionic 1 puede que tengas la tentación de editar el contenido de esta carpeta pero NO debemos cambiar nada aquí ya que todo lo que cambiemos en esta carpeta se machacará con cada cambio que realicemos en la carpeta src que es  donde realmente debemos editar nuestra aplicación.

Veamos ahora varios archivos que se generan al crear un proyecto com ionic 2.

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

config.xml: El archivo config.xml contiene parámetros que se utilizan cuando se construye un proyecto nativo a partir de un proyecto ionic. Aquí deberemos indicar los permisos especiales que necesite la aplicación y otras configuraciones que puedan ser necesarias.

Ionic.config.json:  Contiene información básica sobre la configuración nuestro proyecto, se utiliza si vas a subir tu aplicación a la plataforma Ionic.io.

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. Ocasionalmente puede que tengamos que editar algún archivo fuera del directorio src como el archivo config.xml.

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

Si desplegamos el directorio src podemos ver la carpeta pages, en está 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 un página llamada home, que como su propio nombre indica es la pagina 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.

Carpeta pages dentro de src.
Carpeta pages dentro de src.

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

El archivo home.html que contiene la plantilla html de la página.
El archivo home.scss que contiene el archivo sass donde podremos modificar el estilo de los componentes de la página.
El archivo home.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 mas adelante en profundidad cada una de las partes de una página.

Modificando nuestro hola mundo

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

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

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

Contenido home.html.

Las paginas 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 tutorial. 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/v2/components/

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

Como ionic está basado en Angular 2  si en algún caso no nos es suficiente con los componentes que nos ofrece ionic podríamos crear nuestros propios componentes personalizados de la misma manera que en angular 2, 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 mas 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-navbar>
    <ion-title>
      Hola Mundo
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <h1>¡¡¡¡Hola Mundo!!!!</h1>
</ion-content>

Contenido modificado de home.html.

 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:

Nuestro Hola Mundo en acción.
Nuestro Hola Mundo en acción.

Ahora ya si podemos ver nuestro Autentico Hola Mundo en acción.

En el siguiente capitulo veremos como implementar la lógica de una página en el controlador, para ello construiremos un minijuego de acertar números con ionic.

P.D: si no quieres perderte los próximos capítulos del tutorial ¡suscribete a mi blog! 😉

 

Tutorial de Ionic 2 – Hola Mundo con Ionic 2

Hola a todos:

En el capitulo anterior vimos como instalar ionic y las herramientas de desarrollo que necesitamos para crear aplicaciones multiplataforma con ionic 2.

Ahora vamos a crear nuestra primera aplicación con Ionic 2, 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 ó terminal y escribimos el siguiente comando:

ionic start hola-mundo blank --v2

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. Por ultimo usamos –v2 para indicar que vamos a crear un proyecto de ionic 2, si no lo indicamos nos creará un proyecto de ionic 1.

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

Con el parámetro -l nos muestra como queda nuestra app en las tres plataformas soportadas, es decir, IOS, Android  y Windows.

captura-de-pantalla-2016-12-13-a-las-19-21-19
Vista de como quedaría nuestra primera App con plantilla Blank en el navegador.

Si no utilizamos -l mostrará solo una plataforma.

Para ver las posibilidades de ionic podemos crear un proyecto de prueba con plantilla tabs  y otro con sidemenu:

ionic start appTabs tabs --v2
Aplicación con plantilla tabs
Aplicación con plantilla tabs
ionic start appSide sidemenu --v2
Aplicación con plantilla sidemenu
Aplicación con plantilla sidemenu

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

En el próximo capitulo profundizaremos en la estructura de carpetas de una aplicación con ionic 2 y modificaremos nuestro hola mundo.

P.D: si no quieres perderte los próximos capítulos del tutorial ¡suscribete a mi blog! 😉

Tutorial de Ionic 2 – Instalar ionic y las herramientas necesarias para el desarrollo

En el post anterior hicimos una introducción sobre ionic 2 y sus características.

Hoy vamos a ver como instalar ionic 2 y todas la herramientas necesarias para empezar a desarrollar tus aplicaciones con Ionic 2.

Para instalar ionic debemos instalar primero nodejs  para ello descargamos  el paquete mas reciente de http://nodejs.org/ y lo instalamos. 

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

npm install -g cordova ionic

Si lo estás ejecutando en linux o en mac debes utilizar sudo por delante, es decir:

sudo npm install -g cordova ionic

Al utilizar sudo ejecutamos el comando con privilegios de administrador (root) por lo que nos pedirá la contraseña de usuario.

Una vez instalado ya podríamos 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 Xcode en Mac solo tenemos que buscarlo en la App Store e instalarlo, es gratuito.

Existen soluciones en la nube como Phonegap Build para poder compilar una App para IOS si no disponemos de un MAC.

Ahora vamos a ver como instalar android studio en Ubuntu (Linux), Mac OS y Windows:

Como instalar Android Studio en Ubuntu

Primero debemos instalar Java SE Development Kit 8:

Desde consola ejecutamos los siguientes comandos:

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer

Para verificar la versión de java instalada escribimos:

java -version

Ahora para configurar las variables de entorno escribimos lo siguiente:

sudo apt-get install oracle-java8-set-default

Para versiones de 64 bits tenemos que instalar los siguientes paquetes:

sudo dpkg --add-architecture amd64 
sudo apt-get update 
sudo apt-get install libncurses5:amd64 libstdc++6:amd64 zlib1g:amd64

Por ultimo Instalamos Android studio via ppa con los siguientes comandos:

sudo apt-add-repository ppa:paolorotolo/android-studio
sudo apt-get update
sudo apt-get install android-studio lib32stdc++6 mesa-utils
cd /opt/android-studio/bin
./studio.sh

 

Como Instalar Android Studio en Mac

Instalamos java SE

Descargamos la última versión de aqui:

http://www.oracle.com/technetwork/es/java/javase/downloads/index.html

La instalamos y después descargamos e instalamos android studio

https://developer.android.com/studio/index.html

Después de descargar el paquete seguimos los siguientes pasos:

  1. Ejecuta el archivo DMG de Android Studio.
  2. Arrastra Android Studio y suéltalo en la carpeta Applications. Luego inicia Android Studio.
  3. Elige si deseas importar configuraciones previas de Android Studio y luego haz clic en OK.
  4. El asistente de configuración de Android Studio te guiará en el resto de la configuración. Esto incluye la descarga de componentes del Android SDK que se necesiten para el desarrollo.

Como instalar android studio en windows

Instalamos java SE

Descargamos la última versión de aqui:

http://www.oracle.com/technetwork/es/java/javase/downloads/index.html

Buscamos variables de entorno en el panel de control, le damos añadir nueva y le damos el nombre de JAVA_HOME.

Despues le damos a examinar directorio y buscamos donde esta la carpeta del jdk, en mi caso en C:\Program Files\Java\jdk1.8.0_101

Le damos a aceptar y listo.

Ahora descargamos android studio de aquí:

https://developer.android.com/studio/install.html

Una vez descargado lo ejecutamos el instalador y ya tendríamos Android studio funcionando.

Instalar un editor de código compatible con TypeScript

Para finalizar de instalar las herramientas necesarias, como último paso 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 personalmente recomiendo utilizar Visual Studio Code de Microsoft que es multiplataforma y podéis descargarlo desde el siguiente enlace:  https://code.visualstudio.com/

Este editor nos marcara los errores de sintaxis mientras introducimos el código lo que no ayuda bastante. Si prefieres otros editores eres libres de utilizar el que más te guste.

Puedes dejar en los comentarios que editor con soporte para typescript utilizas y así ampliamos el abanico de posibilidades.

En el próximo post veremos como crear por fin nuestro primer hola mundo con Ionic 2.

Un saludo.

P.D: si no quieres perderte los próximos capítulos del tutorial ¡suscribete a mi blog! 😉

Tutorial de Ionic 2 – Construye Apps móviles multiplataforma con ionic 2 desde cero

Introducción

Hola a todos, hoy voy a comenzar con la serie de entradas destinadas a aprender a crear aplicaciones móviles multiplataforma utilizando Ionic 2.

Aunque este tutorial está destinado a aprender ionic 2 desde cero si que es recomendable tener un conocimiento básico de javascript, html y css, por lo que si eres desarrollador web podrás reciclar tus conocimientos.

Aunque los puristas tal vez piensen que es mejor aprender una base teórica solida antes de empezar a programar nada, creo que esto puede hacer que muchos desistan  por el camino. En cambio es mucho más motivador ver que nada más empezar se puede hacer cosas que funcionan aunque sean sencillas y ir sobre la marcha aprendiendo conceptos a medida que los vamos necesitando.

Es probable que se queden cosas en el tintero pero aprenderás lo suficiente para empezar a desarrollar  tus propias apps y podrás investigar por tu cuenta cuando te encuentres con alguna necesidad que no este explicada en este tutorial.

Iremos aprendiendo las cosas sobre la marcha según las vayamos necesitando en los ejemplos de aplicaciones que vamos a realizar.

Voy a intentar separar el tutorial en entradas relativamente cortas para que se haga más ameno el aprendizaje.

Vamos a ver una pequeña introducción sobre que es ionic y que nos aporta en el desarrollo de aplicaciones móviles.

¿Ques es ionic?

Ionic es un framework que nos permite crear de una manera rápida y sencilla aplicaciones móviles multiplataforma (Android, IOS, Windows) utilizando tecnologías web (HTML, JAVASCRIPT, CSS).
Para poder utilizar elementos web en la app 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 2 esta basado en Apache Cordova y Angular 2, por lo que serán necesarios unos conocimientos básicos de estas tecnologías para sacar mayor provecho al desarrollo.

Además ionic 2 utiliza TypeScript como lenguaje de programación, si no dominas las anteriores tecnologías mencionadas no te preocupes, tratare de ir explicando las cosas básicas necesarias según las vayamos necesitando en los ejemplos que realizaremos.

No profundizare en cada tecnología, es decir no voy a hacer un tutorial  completa de Angular 2, seguro que puedes encontrar con facilidad muchos en la web, solo aprenderemos una pequeña base que nos permita saber lo suficiente para realizar las cosas más comunes de una app, sin embargo podrás investigar por tu cuenta si en algún momento necesitas saber algo más sobre Angular.

Al terminar sabrás lo suficiente para defenderte y crear tus propias aplicaciones.

Ventajas de utilizar ionic para desarrollar apps

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 Windows, por lo que 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.

Desventajas de utilizar ionic para desarrollar apps

La principal diferencia con las apps puramente nativas es que estas utilizan los elementos de la interfaz nativa de la plataforma en lugar de correr en una webview, lo que supone una mayor fluidez en el funcionamiento de la app a la hora de cambiar de pantalla, hacer scroll, etc, sin embargo con los dispositivos cada vez más potentes que existen en el mercado y la mejora en el rendimiento de las webview que incorporan las versiones modernas de los sistemas operativos móviles,  esta diferencia en el rendimiento es cada vez menos notoria y en la mayoría de los casos la experiencia de usuario de una aplicación híbrida desarrollada con ionic bien diseñada será muy similar a la de una aplicación nativa.

Diferencia entre Ionic 2 e Ionic 1

En ionic 1 la apariencia de la App era igual para cada plataforma salvo que modificases elementos en función de la plataforma lo que hace más engorroso el diseño si queremos diferenciar el diseño según la plataforma.
Con ionic 2 sin tener que modificar nada tendremos un diseño con el estilo propio de cada plataforma (con material design en caso de Android) dando una  apariencia de app nativa.

La estructura del proyecto y la organización del código esta mejor estructurada y es más modular, lo que nos permite un desarrollo mas organizado y fácil de mantener.

Ionic 2 dispone del comando Ionic generator que nos permite desde consola crear diferentes elementos como páginas, tabs, providers etc, ahorrandonos tiempo de desarrollo. Veremos Ionic generator y más adelante.

Ionic 2 se basa en Angular 2 por lo que incorpora las mejoras en cuanto a rendimiento que ha incorporado AngularJs en su nueva versión.

Como ya he mencionado Ionic 2 utiliza typescript, lo que nos permite utilizar toda la potencia de la programación orientada a objetos, tipado estático, además nos permite utilizar todos los elementos de EcmaScript 6 y muchos del futuro EcmacScript 7. Veremos esto con más profundidad en próximos capítulos.

Un saludo y hasta el próximo post.

P.D: si no quieres perderte los próximos capítulos del tutorial ¡suscribete a mi blog! 😉

 

Códigos promocionales de tu App para iOS en la App Store

Hola a todos, hoy vengo a hablaros de los códigos promocionales para las apps de iOS.

Los códigos promocionales son códigos que permiten descargar gratuitamente nuestra aplicación cuando es de pago.

Normalmente se utilizan cuando queremos promocionar nuestra app y queremos que nos hagan una review en un blog o web especializada o cualquier otro canal donde normalmente nos van a pedir un código promocional si la app es de pago.

También puedes utilizarlo para regalarsela a un amigo, regalarlo en un sorteo… etc.

Cada código solo puede utilizarse una vez y si no se utiliza caduca a las 4 semanas de haberse generado.

A día de hoy apple permite generar 100 códigos gratuitos por cada app y se pueden utilizar en cualquier territorio donde se venda la app.

Aunque el proceso para crear códigos promocionales es muy sencillo, la primera vez que queremos generar uno puede que nos cueste un poco encontrar desde donde se accede.

Vamos a ver como crear esos códigos promocionales y también os explicaré cómo hay que usarlos en la App Store ya que si se lo queréis regalar a un familiar o amigo puede que les tengas que explicar cómo tienen que usarlo.

Bien, lo primero que tenemos que hacer es entrar en itunes connect: https://itunesconnect.apple.com

Nos pedirá nuestro usuario (Apple ID) y contraseña de nuestra cuenta de desarrollador de apple.

Una vez dentro tenemos que hacer click en Mis apps.

Seleccionamos la app de la que deseamos obtener códigos promocionales en caso de tener mas de una.

Ahora tenemos que seleccionar la pestaña Prestaciones:

Captura de pantalla 2016-08-03 a las 9.13.13

Ahora seleccionamos códigos promocionales en el menú de la izquierda (1).

Después debemos introducir el número de códigos que queremos obtener (2).

Por último pulsaremos sobre el botón Generar códigos (3).

Captura de pantalla 2016-08-03 a las 9.20.27

Se abrirá una ventana para que aceptemos las condiciones de uso, aceptamos las condiciones y pulsamos el botón Generar códigos.

Se abrirá una ventana con la lista de códigos generados que deberás copiar, dando la opción también de descargar esos códigos en un archivo .txt.

Hasta aquí hemos visto cómo generar los códigos promocionales como desarrolladores, ahora vamos a ver cómo se utilizan para descargar nuestra aplicación gratis en la app store como usuarios.

Bien, desde nuestro iPhone o dispositivo iOS debemos acceder a la aplicación App Store que tenemos instalada por defecto en el dispositivo.

Una vez dentro, tenemos que acceder a la sección Destacado.

Dentro de la sección destacado tenemos que desplazar la pantalla hacia abajo hasta llegar al final y veamos un botón que pone Canjear.

Ahora pulsamos el botón Canjear y nos aparecerá una pantalla como esta:

IMG_1780

Podemos introducir el código manualmente o utilizar la cámara para escanear.

Una vez introducido el código pulsamos en Canjear y la aplicación se instalará gratuitamente en nuestro dispositivo.

Como veis es un proceso bastante sencillo, pero como se suele decir una vez de visto todo el mundo es listo ;-P.

Un saludo