lunes, 25 de julio de 2016

Proyecto Inicial en Ionic2 y Angular2 usando una Plantilla en Blanco

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.




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.




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.


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:

$ ionic start proyecto --v2

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.





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:

$ ionic start demo0 blank --v2

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


No hay comentarios.:

Publicar un comentario