En esta entrada quiero compartir mis primeros pasos en un intento por aprender a usar el Framework Ionic2 para desarrollar Aplicaciones Híbridas.
Ionic2 actualmente está en versión Beta, los desarrolladores del Framework han hecho importantes cambios, ahora ha sido desarrollado usando la ultima versión del Framework Angular2.
La versión de Angular2 también tiene importantes cambios, lo mas destacado es el uso de TypeScript el cual es un lenguaje de programación que hereda de JavaScript, TypeScript incorpora Tipado de datos y definición de Objetos basados en Clases. Con TypeScript podemos configurar la versión de ECMAScript para la cual el código TypeScript será compilado en código JavaScript nativo.
Entorno de Desarrollo
Para crear proyectos en Ionic2 primero tenemos que configurar nuestro entorno de desarrollo, para esto tenemos que instalar los siguientes programas:
Node.js
En la Internet existen muchos tutoriales de como instalar Node.js por lo tanto no voy a copiar y pegar en esta entrada como se hace la instalación, pero si recomiendo la documentación oficial de Node.js para realizar el proceso según el tipo de sistema operativo que se tenga.
---> Instalación Node.js
NPM
Es un gestor de paquetes para Node.js con este programa podemos instalar paquetes desarrollados para Node.js JavaScript. Recomiendo la documentación oficial de instalación para NPM.
---> Instalación NPM
Ionic2
Suponiendo que se han instalado correctamente Node.js y NPM ahora el paso siguiente es instalar el SDK de Ionic2, igual que los programas anteriores no voy a copiar y pegar como se hace la instalación pero si recomiendo la documentación oficial.
---> Instalación Ionic2
Según la documentación oficial Ionic2 todavía está en versión beta pero podemos seguir creando proyectos de Ionic en la versión 1, por defecto al crear proyectos estos se crean por ahora en Ionic1.
Para poder crear proyecto en Ionic2 hay que indicarlo de forma explicita usando una bandera en el comando para crear el proyecto, esta bandera es --v2 un ejemplo sería:
En Ionic2 ya se implementa Angular2 por lo tanto no tenemos que instalar nada, por que Ionic automáticamente descarga y configura las dependencias necesarias.
Atom
Para escribir nuestro código JavaScript recomiendo el editor de texto inteligente Atom me ha gustado mucho usarlo ademas recomiendo instalar el paquete Atom TypeScript para el desarrollo de aplicaciones usando TypeScript que nos va a servir mucho.
---> Descargar Atom
Crear un Proyecto
Ahora que tenemos todo instalado podemos crear un primer proyecto en Ionic2, para esto tenemos que ejecutar desde una terminal el siguiente comando:
Como escribí inicialmente cuando se instala Ionic por defecto al crear los proyectos estos se crean con la versión Ionic1 y no con la versión Ionic2 por que actualmente está en versión Beta. Para crear un proyecto en Ionic2 hay que especificarlo con el uso de la bandera --v2.
Cuando se ejecuta el comando se crea el directorio demo0 para el proyecto, se descargan las librerías y plugins necesarias ademas se descarga la plantilla Blank para crear un proyecto en blanco desde el cual iniciar.
Estructura del Proyecto
El directorio demo0 del proyecto Ionic2 tiene la siguiente estructura:
.
├── app
├── config.xml
├── gulpfile.js
├── hooks
├── ionic.config.json
├── node_modules
├── package.json
├── plugins
├── resources
├── tsconfig.json
├── tslint.json
├── typings
├── typings.json
└── www
7 directories, 7 files
Por ahora solo nos interesa conocer lo siguiente, en el directorio app vamos a tener todo el código fuente que vamos a escribir para nuestra aplicación, se puede relacionar con el ambiente de desarrollo de nuestra aplicación, en el directorio www es donde se genera y código fuente compilado para poner en producción, es decir, es el código de nuestra aplicación que ha sido optimizado para ejecutarse. En el archivo config.xml se encuentra información sobre nuestra aplicación como el nombre, descripción y versión.
Si observamos el directorio app, tiene la siguiente estructura:
app/
├── app.ts
├── pages
└── theme
2 directories, 1 file
Si observamos el directorio www tiene la siguiente estructura:
www/
└── index.html
0 directories, 1 file
Ejecutar el Proyecto
Ahora podemos hacer una prueba de ejecutar el proyecto, para esto tenemos varias opciones:
Ejecuta la aplicación en el Navegador
$ ionic serve
Si tenemos dinero, ejecuta la aplicación en iOS
$ ionic run ios
Para los mas pobres, ejecutamos la aplicación en Android
$ ionic run android
Para hacer una prueba rápida ejecutamos la aplicación en el Navegador y podemos observar lo siguiente:
 |
| Ionic2 Plantilla Blank |
Realizar algunos Cambios
Esta es la plantilla en blanco que genera nuestro proyecto Ionic2 pero ahora queremos hacer algunos cambios para personalizar un poco nuestra aplicación.
Primero vamos a modificar el archivo config.xml para dar un nombre, descripción y numero de versión a nuestra aplicación.
Ahora si queremos cambiar el contenido que se muestra en la página de la plantilla en blanco debemos modificar el archivo home.html que está dentro del directorio app:
app/
├── app.ts
├── pages
│ └── home
│ ├── home.html
│ ├── home.scss
│ └── home.ts
└── theme
├── app.core.scss
├── app.ios.scss
├── app.md.scss
├── app.variables.scss
└── app.wp.scss
3 directories, 9 files
NOTA: Es importante tener claro que no debemos modificar nada de lo que esté en el directorio www por que el contenido de este directorio se crea automáticamente por Ionic ademas todo lo que nosotros programemos debe estar en el directorio app.
Hacemos nuevamente una prueba rápida ejecutamos la aplicación en el Navegador y podemos observar lo siguiente:
 |
| Ionic2 Demo 0 |
Listo, por ahora eso es todo para empezar el intento de aprendizaje con Ionic2 y Angular2 próximamente voy actualizar esta entrada para mostrar la ejecución en un emulador y un dispositivo Android.
