Como empezar con Ionic 2

Hola Beatcoders!!voy a escribir en breves lineas, los pasos básicos y necesarios para empezar a trabajar con Ionic 2
Pero primero una intro... Que es Ionic 2?

Ionic 2 es un framework para el desarrollo de aplicaciones híbridas, inicialmente pensado para móviles y tablets, aunque ahora también capaz de implementar aplicaciones web e incluso dentro de poco aplicaciones de escritorio multiplataforma. Su característica fundamental es que usa por debajo Angular 2 y una cantidad de componentes enorme, que facilita mucho el desarrollo de las aplicaciones.

Se trata de una estupenda herramienta para la creación de aplicaciones sorprendentes, pensada para obtener resultados de una manera rápida y con una menor inversión económica, ya que permite crear aplicaciones para distintas plataformas móviles con una misma base de código.

Qué es una aplicación híbrida?

Una aplicación híbrida es aquella que permite desarrollar apps para móviles en base a las tecnologías web: HTML + CSS + Javascript. Son como cualquier otra aplicación de las que puedes instalar a través de las tiendas de aplicaciones para cada sistema, por lo que en principio usuarios finales no percibirán la diferencia con respecto a otros tipos de aproximaciones diferentes, como las aplicaciones nativas.

Las aplicaciones híbridas son interesantes por diversos motivos:

Con una misma base de código serán capaces de compilar apps para funcionar correctamente en una gran cantidad de sistemas operativos de móviles o tablets. Generalmente nos será suficiente que nuestra app funcione en iOS y Android, pero Ionic es capaz de compilar a otros sistemas como Windows Phone.
El coste del desarrollo es sensiblemente menor, ya que no es necesario contar con varios equipos de desarrollo para cada lenguaje concreto de cada plataforma.
El tiempo de desarrollo también es menor, ya que solo es necesario construir la aplicación una vez e inmediatamente la tendremos en todas las plataformas a las que nos dirigimos.
Es de más fácil adaptación para los desarrolladores que vienen de la web.
Pero todo no son ventajas, también podemos enumerar algunas desventajas en relación a las aplicaciones nativas (aquellas construidas con los lenguajes propios de cada sistema, Java para Android y Swift / Objective-C para iOS):

El rendimiento de una aplicación nativa suele ser mejor que el de una híbrida, aunque las híbridas han mejorado mucho en este sentido.
Al ejecutarse en un web view dependemos de las tecnologías disponibles para el desarrollo web, que pueden ser menos ricas y potentes que las disponibles en nativo.
En las aplicaciones nativas trabajamos directamente con el hardware del teléfono, mientras que en las híbridas dependemos de plugins para su acceso. Esto puede derivar en problemas, pero afortunadamente cada vez son menores.

Integración con Angular 2

Ionic 2 está desarrollado sobre el framework Javascript Angular 2. Esto quiere decir que para el desarrollo con Ionic 2 podemos apoyarnos en todas las ventajas de desarrollo con Angular, lo que nos permitirá contar con una excelente estructura de proyecto, el trabajo con buenas prácticas, uso de patrones de diseño de software variados y una buena gama de componentes y directivas.

Desarrollo basado en componentes

En Ionic 2, heredado del desarrollo con Angular, trabajamos en base a componentes. Esto quiere decir que nuestras aplicaciones serán compuestas por un árbol de componentes que se utilizan los unos a los otros para la conclusión de los objetivos globales de la aplicación.

Todos los frameworks modernos usan esta arquitectura, que se ha demostrado que es la que ofrece un mejor código, más fácilmente escalable y mantenible.

Los componentes están pensados para, de manera modular y encapsulada, resolver pequeños problemas. Por ejemplo puede haber componentes para implementar un sencillo botón, componentes para hacer un sistema de navegación por tabs, para selectores de fechas, etc. Integrando componentes somos capaces de construir aplicaciones grandes y complejas. Ionic 2 nos ofrece ya de base una cantidad muy grandes de componentes que son capaces de trabajar perfectamente en dispositivos móviles con pantallas táctiles pero obviamente para el desarrollo de nuestras aplicaciones necesitaremos construir nuestros propios componentes que implementen los comportamientos más específicos de nuestro modelo de negocio.

TypeScript

Otra cosa que viene dada por el desarrollo de Angular es el uso del lenguaje TypeScript, que no es más que un "superset" de Javascript. Dicho de otra forma, TypeScript es Javascript pero con añadidos pensados para mejorar el trabajo por parte de los desarrolladores, haciéndonos más productivos.

No debemos pensar en TypeScript como un problema por ser algo que debemos aprender de nuevo. TypeScript es en realidad Javascript, por lo que no significa aprender un nuevo lenguaje, sino agregar algunas cosas al que ya conoces, cosas que en definitiva te van a ayudar durante la etapa de desarrollo y a la hora de mantener las aplicaciones en el futuro.

TypeScript requiere una transpilación del código, de modo que aquel código que escribes en TypeScript se convierta en código Javascript capaz de ejecutarse en cualquier navegador. Esa transpilación la realiza Ionic 2 por debajo, por lo que no representa un problema para el desarrollador.

Look & feel adaptado al dispositivo

Los componentes de Ionic 2 ya vienen adaptados al dispositivo de manera estética. Quiere decir que, cuando se compila una aplicación para iOS el componente se visualizará de manera diferente que cuando se compila para Android. En Android usará Material Design mientras que en iOS usará las guías de diseño definidas por Apple.
(Siempre y cuando se respeten los estándares de Ionic 2 y utilicemos los tags correctos para programar)

Esto es una ventaja en sí, porque las personas disfrutarán de aplicaciones con una experiencia de usuario cercana a la que están acostumbrados en su teléfono y nos evita a los desarrolladores la necesidad de trabajar más para conseguir este efecto. Sin embargo, como autores de las apps con Ionic 2 también somos capaces de alterar el diseño de las aplicaciones, proporcionando una experiencia de usuario específica y original para nuestra propia aplicación.

Desarrollo y compilado de aplicaciones

Con Ionic 2 desarrollamos aplicaciones con las tecnologías web. Durante toda la etapa de desarrollo usaremos el navegador para visualizar las aplicaciones, lo que permite un flujo de trabajo muy productivo, ya que no se tiene que compilar. Aunque lo cierto es que, por la necesidad de transpilar el código de TypeScript a Javascript compatible con el navegador, no será tan rápido de visualizar los cambios como simplemente refrescar la página del navegador.

Una vez que la app está construida se tiene que realizar el proceso de compilación, en el que se producen los ejecutables específicos para cada dispositivo. Ese proceso sí es un poco más pesado para el procesador, pero se hace solo cuando tenemos que lanzar una nueva versión que se subirá a las tiendas de aplicaciones.

Apache Cordova y Phonegap

Ionic 2 se basa también en Apache Cordova para la implementación de las aplicaciones. Hay partes, como el acceso a los componentes nativos del dispositivo, en las que se usan plugins que nos proporciona Apache Cordova principalmente y Phonegap en algunos casos. Actualmente también Ionic es proveedor de algunos plugins para trabajo con la parte nativa del teléfono.

Aquí como nativo nos referimos a elementos como la cámara, acelerómetro, teclado virtual, etc. Todos esos elementos se pueden usar desde las aplicaciones de Ionic, con los correspondientes plugins nativos, que forman una especie de puente entre el desarrollo con Javascript y el teléfono.

Apache Cordova también es el software que nos permite compilar el desarrollo realizado con Ionic con tecnologías web en aplicaciones para móviles instalables vía tiendas de aplicaciones.

Ahora vamos a lo práctico:

Partimos de una base en la cual ya tenemos un repositorio con un template de aplicación armado en Ionic 2 y nuestro sistema operativo es Linux o Mac con la última versión de NPM instalada.
O directamente que estemos utilizando una IDE de desarrollo en la nube como Cloud9

  • Paso 1

Lo primero que debemos hacer es clonar nuestro repositorio GIT base ejecutando el siguiente comando:

git clone http://repourl.beatcoding.com/repotemplate.git

  • Paso 2

Instalar Ionic y cordova dentro de la carpeta del proyecto

npm install -g ionic@2 cordova

  • Paso 3

Instalar todas las dependencias y componentes de proyecto

npm install

  • Paso 4

Si todo salió bien, simplemente tenemos que ejecutar el emulador y visualizar la aplicación

ionic serve -p8080 -d -l

La url va a ser relativa segun el puerto que hayamos designado anteriormente, ejemplo en este caso:

http://localhost:8080/ionic-lab

Comparto algunos links de documentación que los puede ayudar en el transcurso de desarrollo.

Icons: https://ionicframework.com/docs/ionicons/
Docs: https://ionicframework.com/docs/
Componentes Nativos: https://ionicframework.com/docs/native/