viernes, 29 de julio de 2016

Ionic2 con Navegación entre dos Páginas y aplicación de estilo usando Plantilla en Blanco

Continuando con mi intento de aprendizaje en Ionic2 y Angular2 en mi anterior entrada [Proyecto Inicial en Ionic2 y Angular2 usando una Plantilla en Blanco] presento los pasos iniciales para empezar a trabajar con Ionic2, ahora vengo a presentar un nuevo avance en el uso básico de navegación entre páginas y aplicando algo de estilo a la plantilla en blanco de nuestra primera Aplicación Ionic, también muestro como podemos probar nuestra aplicación directamente en un dispositivo físico Android y en un emulador de Android.



¡Vámos allá!



Crear un Proyecto


Para crear un proyecto usando Ionic2 usamos la siguiente instrucción desde línea de comandos, es importante tener en cuenta el uso de la bandera --v2 para indicar la creación de un proyecto usando Ionic en su versión 2 así:


$ ionic start demo1 blank --v2


Con el argumento blank indicamos que vamos a crear el proyecto usando la plantilla en blanco para Ionic.



Estructura del Proyecto


Para tener mas claridad sobre la estructura del proyecto es recomendable leer mi anterior entrada [Proyecto Inicial en Ionic2 y Angular2 usando una Plantilla en Blanco] para nuestro proyecto demo1 tenemos la siguiente estructura en el directorio app del proyecto:


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


El archivo app.ts contiene la clase Main de nuestra aplicación, si observamos el archivo existe la definición de clase MyApp cuando ejecutamos la aplicación esta clase es la primera que se ejecuta y desde ésta se define cual es la pagina raíz de nuestra aplicación en nuestro caso se establece la clase HomePage la cual es la pagina creada bajo el directorio page/home.

Todas las paginas que crean en Ionic deben tener una estructura como en el caso de la pagina home, se usa el mismo nombre del directorio de la pagina para los archivos home.html home.scss y home.ts.

[ver archivo app/app.ts]


Ejecutar Aplicación


Para ejecutar la aplicación tenemos varias opciones, en mi anterior entrada [Proyecto Inicial en Ionic2 y Angular2 usando una Plantilla en Blanco] mostré como probar la aplicación desde un navegador web, ahora voy a mostrar como probar nuestra aplicación en dispositivo físico Android y en un emulador Android.


  • Dispositivo Android: Se ejecuta la aplicación usando la siguiente instrucción desde linea de comandos.

$ ionic run android --livereload


Para que la instrucción tenga efecto en dispositivo físico Android se asume que exista un dispositivo Android conectado al equipo mediante USB y que tenga activa las opciones de depuración para programadores, Ionic automáticamente reconoce el dispositivo conectado, compila, instala y ejecuta la aplicación.

Con el atributo --livereload se indica que podemos tener una vista en vivo de los cambios que realicemos a nuestro código fuente de aplicación, de esta forma no tenemos que ejecutar constante mente el comando cada vez que realicemos un cambio que queremos ver.


  • Emulador Android: Se ejecuta la aplicación usando la siguiente instrucción desde linea de comandos.

$ ionic emulate android --livereload


Para que la instrucción anterior tenga efecto se asume que exista un emulador creado de Android en el equipo.


Demo1 Ionic2
Demo1 Ionic2


Realizar algunos Cambios


Vamos a modificar el archivo home.html cambiando el contenido, agregando un Botón y un Footer a la aplicación:

[ver archivo app/pages/home/home.html]



La estructura de una página para aplicación tiene un área de Header o encabezado, un área de Contenido y un área de Footer o pie de página.

El header tiene una barra de navegación con titulo, a la cual podemos agregar otros elementos como botones o iconos. El elemento ion-navbar sólo puede ser agregado dentro del elemento header, si queremos agregar una barra similar pero al footer o pie de pagina debemos usar el elemento ion-toolbar al cual podemos agregar otros elementos como botones o iconos.

La plantilla en blanco no agrega tiene un estilo poco llamativo, podemos agregar un color o cambiar el estilo del botón.

Para agregar un color al header y al footer podemos usar la tabla de colores que se genera por defecto con el proyecto Ionic o también podemos usar nuestros propios colores modificando el archivo app.variables.scss:

[ver archivo app/theme/app.variables.scss]


Si queremos modificar un elemento con un color específico, podemos por ejemplo agregar el color correspondiente a primary los elementos ion-navbar y ion-toolbar.

Si deseamos que nuestro botón tenga el ancho de todo el contenido en nuestra aplicación usamos el atributo block al elemento button.


Estilo Ionic2
Estilo Ionic2



Crear Páginas


Para crear páginas nuevas podemos usar la instrucción desde linea de comandos que nos provee Ionic la cual construye los archivos necesarios para una página, Ionic usa una convención de nombres usando kebob-casing para los archivos .html .scss .ts incluyendo el nombre del directorio, es recomendable usar esta convención de nombres ya que facilita la depuración de errores a los desarrolladores.


$ ionic g page Pagina1


El comando recibe como argumentos dos atributos, el atributo page indica a Ionic que se va a generar una página y el atributo Pagina1 indica a Ionic el nombre de la clase generada para la página. Ionic automáticamente genera los nombres de los archivos y el directorio usando la convención kebob-casing.

Cuando se crea la nueva página se genera la siguiente estructura de directorios en el directorio app del proyecto:



app/
├── app.ts
├── pages
│   ├── home
│   │   ├── home.html
│   │   ├── home.scss
│   │   └── home.ts
│   └── pagina-1
│       ├── pagina-1.html
│       ├── pagina-1.scss
│       └── pagina-1.ts
└── theme
    ├── app.core.scss
    ├── app.ios.scss
    ├── app.md.scss
    ├── app.variables.scss
    └── app.wp.scss

4 directories, 12 files



Para continuar vamos a crear otra pagina que tenga el nombre Pagina2, a continuación vamos a ver como crear una navegación básica entre las páginas generadas para el proyecto Ionic2.

Cuando ejecutamos el comando para generar páginas, nos muestra un mensaje similar al siguiente:

Don't forget to add an import for pagina-2.scss in app/themes/app.core.scss:

  @import "../pages/pagina-2/pagina-2.scss";


Nos sugiere agregar el import para el estilo propio de la pagina-2.scss esto nos sirve para personalizar el estilo de cada pagina que nosotros creamos y no usar el estilo global definido para la aplicación en el archivo app.variables.scss.




Navegación entre Páginas


Para el caso concreto de realizar la navegación entre la página HomePage y la página Pagina1Page debemos tener en cuenta lo siguiente, primero debemos agregar al template de la pagina HomePage un botón con un evento de click que llame a una función de la clase HomePage en este caso la función tiene el nombre irPagina1().

Desde la función irPagina1() definida en la clase HomePage se hace el llamado al objeto NavController el cual tiene métodos que nos permite hacer llamados a otras páginas, las páginas son acumuladas en una estructura tipo LIFO (Ultimo en Entrar, Primero en Salir).

Para poder hacer el llamado llamado al objeto de clase Pagina1Page debemos hacer un import de la referencia a la clase, de esta forma podemos hacer el llamado de la función push para navegar a la Pagina1Page así this.navCtrl.push(Pagina1Page).


[ver archivo app/pages/home/home.html]

[ver archivo app/pages/home/home.ts]


Navegación Pagina1
Navegación Pagina1


De forma similar hacemos lo mismo con Pagina1Page desde la cual hacemos el llamado para navegar a Pagina2Page.


[ver archivo app/pages/pagina-1/pagina-1.html]

[ver archivo app/pages/pagina-1/pagina-1.ts]


Navegación Pagina2
Navegación Pagina2


Anteriormente mencionamos que la navegación entre páginas se maneja en una estructura tipo LIFO por sus siglas en ingles (Last In, First Out) tenemos a disposición el método pop() de la clase NavController el cual nos permite regresar al la página anterior.


[ver archivo app/pages/pagina-2/pagina-2.html]

[ver archivo app/pages/pagina-2/pagina-2.ts]


Listo eso es todo lo que he podido aprender hasta ahora, algo es algo, para complementar la información que he compartido voy a dejar unos enlaces a las referencias que estoy siguiendo en mi intento de aprender Ionic2.




Referencias




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.