Después de haber instalado Ionic en local, podemos comenzar a desarrollar nuestra primera app. Como verás, dar los primeros pasos en Ionic es sencillo, todavía más si tienes algunos conocimientos de Angular, como los que hemos abordado en el Manual de Angular 2.

En este artículo verás cómo puedes crear tu primera app con Ionic 2 y algunos componentes sencillos con los que podamos comenzar de una manera fácil, llegando un poco más allá que presentar un simple texto por pantalla.

Realmente no vamos a explicar demasiadas cosas de Ionic todavía y lo que necesitamos para poder hacer esta pequeña práctica depende realmente más de Angular que del propio Ionic. También dejaremos para más adelante entrar en detalle sobre cada elemento de la aplicación y la estructura de un proyecto con Ionic 2, aunque sí nos servirá para ir familiarizándonos con la arquitectura de las apps híbridas.

Crear una app desde cero con el template en blanco

Vamos a comenzar creando una nueva app con el template en blanco. Recordamos que esta operación la haces cómodamente usando el CLI de Ionic, con un comando como el que sigue:

ionic start hola-mundo blank --v2

Ese comando lo ejecutarás desde la página donde tienes tus proyectos y creará una carpeta llamada "hola-mundo" donde colocará el proyeco de Ionic recién generado. Ahora nos movemos a esa carpeta y podemos comenzar a trabajar con nuestro editor de código preferido.

Localizando el código de la página de inicio de la app

A la hora de desarrollar un proyecto de app con Ionic 2 la gran mayoría del trabajo lo vamos a realizar dentro de la carpeta "src" del proyecto. Allí encontramos un subdirectorio llamado "pages" que contiene las páginas de nuestro proyecto. De momento solo hay una, llamada "home".

Si abres la carpeta "src/pages/home" encontrarás tres archivos distintos:

1. Un HTML que contiene la vista de la pantalla de inicio de nuestra app.
2. Un CSS (archivo scss porque realmente Ionic usa Sass como preprocesador CSS) que contiene las hojas de estilo para esta página.
3. Un archivo .ts (de TypeScript) con lo que sería la declaración del componente de esta página.

Lo más sencillo para comenzar es abrir el HTML y editar alguna cosa. El archivo se llama home.html y verás que ya tiene un poco de código.

Puedes alterar home.html. Al final es solo un poco de HTML, por lo que no te costará nada de trabajo. Puedes dejar algo como lo que sigue:

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

<ion-content padding>
  <h1>Hola Mundo</h1>
  <p>Estamos en Ionic 2 y este es el componente de la página Home.</p>
</ion-content>

Lanzar la app en el navegador

Esto también lo vimos en el ejemplo del artículo anterior. Se trata de arrancar el servidor web con el que podemos ejecutar esta página y ver cómo nos ha quedado después de la edición. Vamos a usar el "Ionic Lab" para ver la página de una forma similar a como se vería en un móvil. Lo lanzamos con este comando:

ionic serve --lab

Este es el aspecto que tendría la app, para la plataforma Android, una vez puesta en marcha con el Ionic Lab.

Modificar el archivo TypeScript con código del componente

Ahora prestemos atención a nuestro archivo TypeScript que tiene el código para registrar el componente de la home. Está en la carpeta "src/pages/home" y se llama "home.ts".

Como puedes comprobar si abres el archivo, Ionic 2 usa el formato de trabajo que viene dado en EcmaScript 2015 (ES6), con imports y clases de programación orientada a objetos. Pero además encontramos un @Component que quizás no habías visto nunca, si es que no conoces de antemano Angular. Eso ese @Component se llama "decorator" y es algo que aporta TypeScript.

No te preocupes si todo te parece muy diferente a como estás acostumbrado en tu experiencia del trabajo con Javascript, lo iremos viendo poco a poco, de modo que irás despejando tus dudas. Pero de momento vamos simplemente a ponerle un poco de código para hacer una simple prueba.

En la declaración de la clase, vamos a agregar una propiedad. Las propiedades como en Programación Orientada a Objetos se pueden declarar como variables después de la línea donde comienza la vista privada (export class HomePage...).

test:string = "Bienvenido a Ionic 2";

Aquí hemos colocado algo que es característico de TypeScript, que es la definición de tipos. Seguramente te llamará la atención "test:string". Ese ":string" es lo que indica a TypeScript que el tipo de la variable "test" es una cadena de caracteres. La definición de tipos nos ayuda a la hora de compilar un programa, pues si accidentalmente asignamos un tipo diferente a la variable "test", el compilador de TypeScript nos avisará. Además, si usas VSCode (Visual Studio Code), que ya tiene una integración con TypeScript, cualquier error de tipos será advertido en tiempo real, en el momento de escribir tu código.

Para no dar lugar a dudas, el código de la clase nos quedará así ahora:

export class HomePage {
  test:string = "Bienvenido a Ionic 2";
  
  constructor(public navCtrl: NavController) {
    
  }

}

La gracia consiste ahora en mostrar ese texto de la propiedad "test" en la página. Es tan sencillo como editar el HTML (archivo "home.html") y colocarle en cualquier lugar:

<p>{{test}}</p>

Si una vez realizadas estas modificaciones vas a tu navegador, deberías ver los cambios ya refrescados. Esto es debido a que el propio servidor de Ionic 2 tiene un "watch" que refresca la página (live reload) automáticamente. Claro está, necesitas asegurarte de:

• Tener el servidor ejecutándose en el terminal.
• No haber errores en el código (si hubiese el propio terminal te los mostrará).
• Esperar un poco, ya que el proceso de live reload requiere traspilar los archivos de código TypeScript y eso requiere de unos segundos. Más o menos tiempo dependiendo de la capacidad de procesamiento de tu ordenador.
• Obviamente, requiere también que no hayas cerrado la pestaña del proyecto en el navegador. Si hubieses cerrado puedes acceder de nuevo a la URL (el puerto puede haber cambiado también entre ejecuciones del servidor), o bien parar el servidor y volverlo a poner en marcha, en cuyo caso te abrirá una nueva pestaña con el proyecto en marcha.

Agregar un nuevo componente de Ionic

Vamos a acabar este "hola mundo" colocando un componente nuevo de Ionic 2 en el template HTML, para observar cómo se visualizan los datos. En la documentación de Ionic 2 encontrarás decenas de componentes listos para su uso, unos más sencillos que otros y con integración más fácil y difícil. Vamos a escoger algo de aplicación inmediata, como "ion-icon", que sirve para colocar un icono.

Los componentes Ionic ya los reconoce automáticamente el sistema al usarlos en la vista de la página. Puedes agregar el siguiente HTML en tu archivo "home.html".

<p>
    <ion-icon name="logo-angular"></ion-icon>
    Me gusta Angular
  </p>

Al guardar el fichero se refrescará la página y podrás ver el nuevo párrafo con el icono de Angular.

Conclusión

Hemos podido empezar a meterle mano en el código de la app. De momento hemos hecho modificaciones muy muy simples, pero todo es comenzar. A partir de aquí podremos ir incrementando la dificultad para hacer cosas más asombrosas.

Lo que has podido comprobar es que el flujo de trabajo con Ionic 2 es bastante ágil, pudiendo desarrollar y visualizar los cambios en pocos instantes en el navegador. Si te has entretenido en echar un vistazo a la documentación, en la sección "components", habrás visto que hay muchas cosas de las que podrás sacar partido para hacer diversos comportamientos comunes de las aplicaciones realmente rápido.