PDF de programación - Manual de introducción a Ionic

Tabla de contenido

Contenidos
Introducción
Instalación
Conceptos básicos

Nuestro primer proyecto
Estructura de carpetas
Código básico

Componentes

Área de contenidos
Cabeceras
Pies de página
Botones y enlaces
Listados
Tarjetas
Formularios
Iconos

Arquitectura de una aplicación

Configuración y rutas
Controladores
Vistas
Servicios
Directivas
Ejemplo completo

Plugins
Publicación
Más información
Ejercicios 1
Ejercicios 2

1.1
1.2
1.3
1.4
1.4.1
1.4.2
1.4.3
1.5
1.5.1
1.5.2
1.5.3
1.5.4
1.5.5
1.5.6
1.5.7
1.5.8
1.6
1.6.1
1.6.2
1.6.3
1.6.4
1.6.5
1.6.6
1.7
1.8
1.9
1.10
1.11

2

3

Contenidos

Contenidos

Manual de introducción a Ionic.

4

Introducción

Introducción

Ionic es un framework open source construido usando HTML5, CSS3 y Javascript para el
desarrollo de aplicaciones híbridas para dispositivos móviles. La librería está orientada
únicamente a su visualización en dispositivos móviles, es decir, no es una librería
responsive tipo Bootstrap que se adapte a distintos tamaños de pantalla. Todo esto hace
que los componentes tengan una apariencia más similar a la nativa, que funcionen más
rápido, y por lo tanto que mejore la experiencia del usuario que use la aplicación.

Ionic incluye una completa librería de componentes, estilos y animaciones que simulan el
aspecto nativo de las distintas plataformas. Estos componentes adoptarán automáticamente
la apariencia nativa del dispositivo en el que si visualicen. Por ejemplo, si incluimos un
checkbox en un formulario, al compilar y visualizar dicha aplicación en Android, el checkbox
adoptará un aspecto distinto al que mostraría en iOS.

Otra característica interesante de Ionic es que utiliza Angular para el desarrollo del código
dinámico de la aplicación. Ionic nos permite crear una aplicación sin necesidad de escribir ni
una línea de Javascript ni de Angular, solamente con CSS y HTML. Pero para aplicaciones
más complejas podemos usar Angular, lo que nos permitirá una mayor potencia a la hora de
crear contenidos dinámicos, para por ejemplo mostrar un listado a partir de datos cargados
de Internet o almacenados en el móvil. Además Angular nos permite estructurar el código
de la aplicación y modularizar las distintas partes del mismo siguiendo patrones de
desarrollo como MVC, donde tendríamos el código separado en modelos de datos, vistas y
controladores.

Las aplicaciones híbridas son básicamente páginas web que se ejecutan o renderizan
dentro de un navegador web de una aplicación nativa. Es decir, el desarrollador crea la
aplicación usando código web (como HTML, CSS, Javascript, etc.) y el framework Ionic en
este caso. Una vez finalizado el desarrollo, este código se copiará dentro de una aplicación
nativa, que consistirá en una única pantalla de tipo visor web en la que se cargará el código
de la página web. Esta técnica nos permite generar a partir de código web una aplicación
compilada como si fuera nativa, que se puede instalar en cualquier dispositivo y que la
podemos publicar en el market de aplicaciones.

5

Introducción

Además, las aplicaciones híbridas tienen muchas otras ventajas, pero la principal es la
velocidad de desarrollo, ya que con un único código web podemos generar aplicaciones
para todas la plataformas: Android, iOS, Windows Phone, etc. Simplemente tendremos que
crear la aplicación nativa de cada plataforma con un visor web e incluir nuestro código
dentro.

Ionic, gracias a que viene integrado con Cordova (o PhoneGap), también permite el acceso
a las características nativas de los dispositivos. Es decir, desde el código web podremos
hacer uso de los sensores del dispositio como GPS, cámara, acelerómetros, brújula, etc. o
incluso a las opciones de almacenamiento o la agenda de contactos.

Ahora que ya hemos visto que es Ionic y lo que puedes hacer con él, vamos a empezar
explicando como instalar esta herramienta y como crear nuestra primera aplicación.

6

Instalación

Instalación

En esta sección vamos a ver en detalle todo el proceso de instalación de Ionic y de todas
las dependencias necesarias para que funcione. Estas son:

NodeJs
Ionic
Otras dependencias

Instalar NodeJs

En primer lugar tenemos que instalar en gestor de paquetes de NodeJs (npm) para poder
instalar el propio Ionic y algunas otras dependencias que nos harán falta. Para instalarlo
símplemente podemos descargarlo e instalarlo desde su Web:

https://nodejs.org/en/

O en Linux instalarlo usando el gestor de paquetes:

sudo apt-get install nodejs
sudo apt-get install npm

Instalar Ionic

Para instalar la última versión de Ionic y Cordova(*) tenemos que ejecutar el siguiente
comando:

$ sudo npm install -g cordova ionic

Nota: En Windows tenéis que quitar "sudo" del comando anterior.

(*) Nota: Como ya mencionamos en la introducción Ionic utiliza Cordova para acceder
a las características nativas de los dispositivos móviles y también para poder compilar
el código para cada plataforma como si fuera una app nativa.

Para comprobar si se ha instalado correctamente podemos escribir en un terminal el
siguiente comando:

7

Instalación

$ ionic

Esto nos tendría que mostrar un listado con todas las opciones disponibles del cli (intérprete
de línea de comandos) de Ionic. Con esto ya tendríamos instalado tanto Ionic como
Cordova, por lo que podríamos empezar a trabajar, pero antes de nada tendremos que
revisar algunas dependencias más.

Otras dependencias

Hay algunas dependencias más que dependerán del sistema operativo que uséis y de las
plataformas para las que queráis compilar vuestras aplicaciones. En la sección
"Plataformas" veremos más información sobre esto.

Además también es posible que queráis usar Gulp, Bower o SASS, aunque su instalación
es opcional sí que se recomiendan ya que os ayudarán mucho en el desarrollo de este tipo
de aplicaciones:

$ sudo npm install -g gulp
$ sudo npm install -g bower
$ sudo gem install sass

¿Qué es Gulp? Gulp es un sistema de construcción que permite automatizar tareas
comunes o repetitivas de desarrollo, tales como la minificación de código JavaScript,
recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin
fin de tareas más. Para mas información consultad: http://gulpjs.com/

¿Qué es Bower? Bower es un gestor de paquetes para el desarrollo Web. Es decir,
cualquier librería de código abierto que puedas necesitar para el desarrollo de tu front-end
lo podrás gestionar con Bower, él se encargará de instalar la librería y todas sus
dependencias e incluso de las actualizaciones. Para mas información consultad:
http://bower.io/

¿Qué es SASS? SASS es un metalenguaje de CSS que nos permite programar hojas de
estilo usando variables, reglas CSS anidadas, mixins (facilitan la definición de estilos
reutilizables), importación de hojas de estilos y muchas otras características. Ionic incluye
los fuentes de sus hojas de estilos en SASS, así que podemos aprovechar para modificarlas
usando este lenguaje. Para mas información consultad: http://sass-lang.com/

8

Conceptos básicos

Conceptos básicos

En esta sección vamos a ver los conceptos básicos de la librería Ionic. En primer lugar
crearemos nuestra primera aplicación y analizaremos la estructura que tienen los proyectos.
A continuación veremos como generar una aplicación para diferentes plataformas, como
Android o iOS. Y por último las opciones más importantes del interprete de línea de
comandos (cli) de Ionic, para compilar y emular nuestros proyectos.

!Manos a la obra!

9

Nuestro primer proyecto

Crear nuestro primer proyecto

En esta sección vamos a ver los primeros pasos que tenemos que seguir para crear un
proyecto:

1. Usar el clic de Ionic para crear el proyecto.
2. Añadir la plataforma para la que vamos a compilar.
3. Compilar y ejecutar el proyecto en un navegador, emulador o dispositivo real.

En las siguientes secciones se detallan cada uno de estos pasos.

1. Crear un nuevo proyecto

Ionic facilita la creación de proyectos usando su intérprete de línea de comandos (cli),
mediante el cual podremos generar proyectos en "blanco" (en el que la primera pantalla
esté vacía) para empezar a programar su contenido desde cero. Para crear un proyecto
tenemos que escribir el siguiente comando en un terminal:

$ ionic start myApp blank

Al ejecutar este comando se creará una carpeta llamada "myApp" con el contenido del
nuevo proyecto de Ionic. Además el código de la aplicación incluirá una primera pantalla
vacía, en la cual podremos empezar a escribir nuestro código.

El cli de Ionic también permite generar proyectos con algo de contenido para no partir desde
cero:

$ ionic start myApp tabs
$ ionic start myApp sidemenu

Los cuales generarían respectivamente un proyecto de Ionic con la navegación mediante
pestañas o con un menú lateral. En la imagen inferior se puede ver un ejemplo de estos tres
tipos:

10

Nuestro primer proyecto

2. Añadir las plataformas destino

Como siguiente paso tendríamos que añadir las plataformas para las cuales queremos
compilar. Ionic (con la ayuda de Cordova) permite generar código para multitud de
plataformas, entre ellas están Android, iOS, Amazon Fire OS, Blackberry 10, navegador,
Firefox OS, Ubuntu, WebOS, Windows Phone 8 y Windows. Las posibles plataformas para
las que podemos generar dependerán del sistema operativo que utilicemos, por ejemplo,
para iOS solo podremos compilar desde un Mac. En general soporta las siguientes
combinaciones:

Mac

Linux

Windows

iOS
Amazon Fire OS
Android
BlackBerry 10
Navegador
Ubuntu
Windows Phone 8
Windows
Firefox OS

x
x
x
x
x

x

x
x
x
x
x

x

x
x
x
x

x
x
x

Para añadir una plataforma para la cual queremos compilar nuestro proyecto usaremos el
siguiente comando:

$ ionic platform add <nombre-de-la-plataforma>

Por ejemplo, para añadir la plataforma de compilación Android usaríamos:

$ ionic platform add android

11

Nuestro primer proyecto

Para ver un listado de las plataformas instaladas y las disponibles simplemente tenéis que
ejecutar:

$ ionic platform

El código de las plataformas se