Documentos de Académico
Documentos de Profesional
Documentos de Cultura
-1-
1 - Introducción
Hola a todos, hoy voy a comenzar con la serie de entradas destinadas a aprender a crear
aplicaciones móviles multiplataforma utilizando Ionic 2.
Aunque este tutorial está destinado a aprender ionic 2 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.
-2-
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.
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.
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
-3-
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.
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.
P.D: si no quieres perderte los próximos capítulos del tutorial ¡suscribete a mi blog!
-4-
2 - Instalar ionic y las
herramientas necesarias para
el desarrollo
En el post anterior hicimos una introducción sobre ionic 2 y sus características.
Hoy vamos a ver como instalar ionic 2 y todas la herramientas necesarias para empezar a
desarrollar tus aplicaciones con Ionic 2.
Para instalar ionic debemos instalar primero nodejs para ello descargamos el paquete mas
reciente de http://nodejs.org/ y lo instalamos.
Una vez instalado nodejs abrimos un terminal (consola del sistema) e instalamos ionic y cordova
con el siguiente comando:
Si lo estás ejecutando en linux o en mac debes utilizar sudo por delante, es decir:
Al utilizar sudo ejecutamos el comando con privilegios de administrador (root) por lo que nos
pedirá la contraseña de usuario.
Una vez instalado ya podríamos crear aplicaciones con ionic y ejecutarlas en el navegador, sin
embargo para poder ejecutarlas en un dispositivo o emulador Android debemos instalar las
herramientas de desarrollo de Android, así mismo para poder ejecutar la app para IOS
necesitaremos instalar Xcode.
Cabe mencionar que aunque Android Studio lo podemos instalar en cualquier plataforma, es
decir podemos desarrollar para Android desde un pc con Windows, Linux o MAC, Para poder
compilar las Apps para IOS necesitamos un MAC con Xcode instalado.
-5-
Para instalar Xcode en Mac solo tenemos que buscarlo en la App Store e instalarlo, es gratuito.
Existen soluciones en la nube como Phonegap Build para poder compilar una App para IOS si no
disponemos de un MAC.
Ahora vamos a ver como instalar android studio en Ubuntu (Linux), Mac OS y Windows:
java -version
Por ultimo Instalamos Android studio via ppa con los siguientes comandos:
-6-
sudo apt-get update
sudo apt-get install android-studio lib32stdc++6 mesa-utils
cd /opt/android-studio/bin
./studio.sh
Instalamos java SE
http://www.oracle.com/technetwork/es/java/javase/downloads/index.html
https://developer.android.com/studio/index.html
2. Arrastra Android Studio y suéltalo en la carpeta Applications. Luego inicia Android Studio.
3. Elige si deseas importar configuraciones previas de Android Studio y luego haz clic en OK.
Instalamos java SE
-7-
http://www.oracle.com/technetwork/es/java/javase/downloads/index.html
Despues le damos a examinar directorio y buscamos donde esta la carpeta del jdk, en mi caso en
C:\Program Files\Java\jdk1.8.0_101
https://developer.android.com/studio/install.html
Este editor nos marcara los errores de sintaxis mientras introducimos el código lo que no ayuda
bastante. Si prefieres otros editores eres libres de utilizar el que más te guste.
Puedes dejar en los comentarios que editor con soporte para typescript utilizas y así ampliamos
el abanico de posibilidades.
En el próximo post veremos como crear por fin nuestro primer hola mundo con Ionic 2.
Un saludo.
-8-
P.D: si no quieres perderte los próximos capítulos del tutorial ¡suscribete a mi blog!
-9-
…
Hasta aquí la previsualización.
http://tutorialesenpdf.com/ionic-framework/