En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Indice Tutorial Ionic >>

• Tutorial de Ionic - Construye Apps móviles multiplataforma con ionic desde cero
• Tutorial de Ionic - Instalar ionic y las herramientas necesarias para el desarrollo
• Tutorial de Ionic - Hola Mundo en Ionic
• Tutorial de Ionic - Estructura de un proyecto Ionic
• Tutorial de Ionic - Mini Juego de acertar números en ionic 2, el controlador de la página y Data Binding y *ngIF
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 1 - Navegación por Tabs
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 2: Mostrando el mapa.
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 3: Añadiendo FAB, marcador y ventana modal.
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 4 - Mostrando la dirección a partir de las coordenadas y sacando foto con la cámara.
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 5 - Guardando nuestros sitios en una base de datos local
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 6 - Mostrar detalles del sitio guardado y abrir navegador gps para llegar a el.
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 7 - Modificar nuestros sitios.
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 8 - Eliminar un sitio desde el listado deslizando el item con "ItemSliding".
• Tutorial de Ionic - Peticiones http - API REST
• Tutorial de Ionic - Firebase - parte 1: Autenticación con correo y contraseña
• Tutorial de Ionic - Firebase - parte 2: Database - Guardar nuestros sitios en la nube.
• Como mejorar el rendimiento de ionic en iOS y solución al problema de las peticiones http CORS
• Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.
• Firmar el apk para subirlo a Google Play
• Mostrar un mapa offline en Ionic con Leaflet
• Directiva para mostrar y ocultar menú al hacer scroll en Ionic
• Como crear una app multi idioma con Ionic
• Como crear componentes personalizados con Ionic

Hola a todos, hoy voy a comenzar con la serie de entradas destinadas a aprender a crear aplicaciones móviles multiplataforma utilizando Ionic.

Introducción

Aunque este tutorial está destinado a aprender ionic desde cero si que es recomendable tener un conocimiento básico de javascript, html y css, por lo que si eres desarrollador web podrás reciclar tus conocimientos.

Aunque los puristas tal vez piensen que es mejor aprender una base teórica solida antes de empezar a programar nada, creo que esto puede hacer que muchos desistan  por el camino. En cambio es mucho más motivador ver que nada más empezar se puede hacer cosas que funcionan aunque sean sencillas y ir sobre la marcha aprendiendo conceptos a medida que los vamos necesitando.

Es probable que se queden cosas en el tintero pero aprenderás lo suficiente para empezar a desarrollar  tus propias apps y podrás investigar por tu cuenta cuando te encuentres con alguna necesidad que no este explicada en este tutorial.

Iremos aprendiendo las cosas sobre la marcha según las vayamos necesitando en los ejemplos de aplicaciones que vamos a realizar.

Voy a intentar separar el tutorial en entradas relativamente cortas para que se haga más ameno el aprendizaje.

Vamos a ver una pequeña introducción sobre que es ionic y que nos aporta en el desarrollo de aplicaciones móviles.

¿Ques es ionic?

Ionic es un framework que nos permite crear de una manera rápida y sencilla aplicaciones móviles multiplataforma (Android, IOS, Windows) utilizando tecnologías web (HTML, JAVASCRIPT, CSS).
Para poder utilizar elementos web en la app utiliza lo que se conoce como una  Webview.
A este tipo de aplicaciones se las conoce como aplicaciones híbridas. El resultado final es una app “nativa” que puedes subir a las tiendas de apps.

Ionic 2 esta basado en Apache Cordova y Angular 2, por lo que serán necesarios unos conocimientos básicos de estas tecnologías para sacar mayor provecho al desarrollo.

Además ionic 2 utiliza TypeScript como lenguaje de programación, si no dominas las anteriores tecnologías mencionadas no te preocupes, tratare de ir explicando las cosas básicas necesarias según las vayamos necesitando en los ejemplos que realizaremos.

No profundizare en cada tecnología, es decir no voy a hacer un tutorial  completa de Angular 2, seguro que puedes encontrar con facilidad muchos en la web, solo aprenderemos una pequeña base que nos permita saber lo suficiente para realizar las cosas más comunes de una app, sin embargo podrás investigar por tu cuenta si en algún momento necesitas saber algo más sobre Angular.

Al terminar sabrás lo suficiente para defenderte y crear tus propias aplicaciones.

Ventajas de utilizar ionic para desarrollar apps

La principal ventaja de utilizar Ionic es que es multiplataforma, es decir que con un mismo código podemos generar apps para Android, IOS y Windows, por lo que tiempo y coste de desarrollo y mantenimiento de una app se reduce sensiblemente.

Otra ventaja es que si dispones de conocimientos previos en desarrollo web frontend ya tienes medio camino andado ya que la curva de aprendizaje será mucho menor.

Además Ionic dispone de muchos componentes ya creados para que sin apenas esfuerzos puedas desarrollar una app de apariencia profesional sin necesidad de ser un gran diseñador.

Desventajas de utilizar ionic para desarrollar apps

La principal diferencia con las apps puramente nativas es que estas utilizan los elementos de la interfaz nativa de la plataforma en lugar de correr en una webview, lo que supone una mayor fluidez en el funcionamiento de la app a la hora de cambiar de pantalla, hacer scroll, etc, sin embargo con los dispositivos cada vez más potentes que existen en el mercado y la mejora en el rendimiento de las webview que incorporan las versiones modernas de los sistemas operativos móviles,  esta diferencia en el rendimiento es cada vez menos notoria y en la mayoría de los casos la experiencia de usuario de una aplicación híbrida desarrollada con ionic bien diseñada será muy similar a la de una aplicación nativa.

Diferencia entre Ionic 2 e Ionic 1

En ionic 1 la apariencia de la App era igual para cada plataforma salvo que modificases elementos en función de la plataforma lo que hace más engorroso el diseño si queremos diferenciar el diseño según la plataforma.
Con ionic 2 sin tener que modificar nada tendremos un diseño con el estilo propio de cada plataforma (con material design en caso de Android) dando una  apariencia de app nativa.

La estructura del proyecto y la organización del código esta mejor estructurada y es más modular, lo que nos permite un desarrollo mas organizado y fácil de mantener.

Ionic 2 dispone del comando Ionic generator que nos permite desde consola crear diferentes elementos como páginas, tabs, providers etc, ahorrandonos tiempo de desarrollo. Veremos Ionic generator y más adelante.

Ionic 2 se basa en Angular 2 por lo que incorpora las mejoras en cuanto a rendimiento que ha incorporado AngularJs en su nueva versión.

Como ya he mencionado Ionic 2 utiliza typescript, lo que nos permite utilizar toda la potencia de la programación orientada a objetos, tipado estático, además nos permite utilizar todos los elementos de EcmaScript 6 y muchos del futuro EcmacScript 7. Veremos esto con más profundidad en próximos capítulos.

También puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.