¡Hola de nuevo! En los dos últimos artículos escribí acerca de la instalación de Ionic Framework y pudimos ver la estructura de un proyecto. En este artículo vamos a crear la primera aplicación con Ionic.

Objetivo de la aplicación

La aplicación que vamos a desarrollar pedirá un nombre de usuario mediante una caja de texto. Si el nombre no está vacío y tiene más de cuatro caracteres imprimirá un mensaje en pantalla «El usuario [NombreDeUsuario] se ha registrado correctamente.«.

La aplicación tendrá un Footer que indicará «Primera Aplicación«.

NOTA: Los componentes que se utilizarán en los ejemplos se pueden examinar en la siguiente dirección: http://ionicframework.com/docs/components/

Creación del Proyecto

Para crear el proyecto abrimos la consola de Node.js y escribimos:

ionic start PrimeraAplicacion blank

Y en la carpeta de la aplicación ejecutamos la siguiente instrucción para manejar el archivo scss:

ionic setup sass

El archivo scss/ionic.app.scss

Este archivo indica las variables por defecto aplicadas a los estilos de la aplicación. Existen una serie de clases en Ionic (bar-stable, bar-royal, bar-positive…) que toman sus colores de este fichero. Nosotros, por supuesto, podemos sobrescribirlos.

La variable que indica el «color» de la aplicación es la variable $positive. Voy a establecer el color positivo a #026735.

El archivo www/index.html

En este fichero estableceremos el HTML de la aplicación. Lo primero va a ser añadir la cabecera y el footer a la pantalla. Después incluiremos los elementos de contenido de la pantalla.

Cabecera

Para añadir una cabecera, se ha de añadir una etiqueta ion-header-bar

<ion-header-bar class=»bar-positive»>
<h1 class=»title»>Programando con Rupert</h1>
</ion-header-bar>

Footer

El footer es un div que ha de tener la clase bar-footer junto con la clase de color que nos interese:

<div class=»bar bar-footer bar-dark»>
<div class=»title»>Primera Aplicación</div>
</div>

Contenido

El contenido de la pantalla se ha de establecer dentro de la etiqueta ion-content. A partir de aquí se puede establecer el HTML que queramos. Aunque Ionic ya incluye una serie de estilos que podemos encontrar en la URL mencionada anteriormente.

En este punto ya tenemos el HTML estructurado, es momento de añadirle funcionalidad

El archivo www/js/main.js

En este ejemplo voy a crear un fichero main.js para separar las funcionalidades de mi aplicación, pero se puede trabajar sin problemas sobre el fichero app.js

Por último, añadimos la referencia a main.js desde index.html

<script src=»js/main.js»></script>

Y añadimos el evento onclick al botón

<button class=»button button-positive» onclick=»Registrar()»>
Registrar
</button>

Probar la aplicación

Para probar la aplicación, desde la consola de Node.js, y ubicados en la carpeta del proyecto, ejecutamos:

ionic serve –lab

Con este artículo ya hemos metido un poco el hocico en el modo de trabajo con Ionic. En siguientes artículos nos centraremos en las diferentes características de Ionic Framework y sus componentes.

¡Hasta la próxima!
Rupert.