IONIC

DESARROLLO DE APLICACIONES MÓVILES

ING. MARCO ANTONIO CONDARCO MIRABAL
¿Qué es Ionic?

• Se le denomina un SDK (Software Development Kit) completo y de

código abierto para el desarrollo de aplicaciones móviles híbridas.
La versión original fue lanzada en 2013 y construida sobre AngularJS
y Apache Cordova. Las versiones más recientes, conocidas como
Ionic 3 o simplemente «Ionic», están basadas en AngularJS. Ionic
proporciona herramientas y servicios para desarrollar aplicaciones
móviles híbridas utilizando tecnologías web como CSS, HTML5 y
Sass (Syntactically awesome style sheets). Las aplicaciones pueden
compilarse con estas tecnologías web y luego distribuirse a través
de tiendas de aplicaciones nativas para ser instalado en dispositivos
aprovechando Cordova. Ionic fue creado por Max Lynch, Ben Sperry
y Adam Bradley de Drifty Co. en 2013.
• Ionic es la plataforma que facilita la creación de aplicaciones
móviles con tecnologías web para los programadores web. La
plantilla de Ionic permite a los desarrolladores crear aplicaciones
móviles en diferentes plataformas que pueden instalarse en
teléfonos con Android e iOS.
• Desarrollado sobre AngularJS y lanzada su versión alfa el noviembre
de 2013. Se lanzó una versión beta 1.0 en marzo de 2014, una
versión final 1.0 en mayo de 2015 y varias versiones 2.0 en 2016.
Ionic utiliza su base para proporcionarnos la estructura de
aplicación mínima sobre la que poder comenzar a trabajar, mientras
que Ionic en sí nos ofrecerá facilidades en el desarrollo de la
interfaz de usuario. Con esta dupla, AngularJS con su versatilidad y
potencia para la creación de aplicaciones e Ionic Framework para el
desarrollo de la interfaz, obtenemos una herramienta de creación
de aplicaciones completísima, con la que ahorraremos tiempo y
trabajo en el desarrollo de cada proyecto.
¿Por qué usar Ionic?

• Ionic facilita la creación de aplicaciones híbridas utilizando HTML5

debido a su Framework de código abierto y también es
completamente gratuito. El uso de Angular JS lo hace perfecto para
el desarrollo de aplicaciones altamente interactivas y tiene una gran
gama de herramientas y servicios que hacen que la ejecución de
Ionic sea bastante simple.
• Ionic viene con CLI (Command-Line Interface), que ayuda a los
desarrolladores móviles a construir y probar aplicaciones iónicas en
cualquier plataforma. Permite a los usuarios desplazarse por miles
de listas sin que su rendimiento se vea afectado. Los usuarios
pueden crear sus propias aplicaciones, personalizarlas para
Android, iOS y desplegarlas.
Ventajas de Ionic • Desde una única fuente podremos llegar a las plataformas
que soporta este Framework (Android e iOS).
• El desarrollo principal se realiza en HTML junto con CSS y
JS, lenguajes muy extendidos por la comunidad de
desarrolladores, con lo que la implantación de esta
herramienta en la empresa, facilitará el desarrollo de
proyectos de la forma más efectiva aun cuando la plantilla
de desarrolladores contenga nuevas incorporaciones.
• Una herramienta tan “reciente” como Ionic sea capaz de
dar soporte a un gigantesco Framework como AngularJS,
nos hace plantearnos hasta dónde serán capaces de llegar,
teniendo ya en vistas incluir otros Frameworks como
EmberJS o KnockOut por ejemplo. Si ya contamos con una
aplicación web que queremos convertir en aplicación
móvil, en la mayoría de los casos habremos hecho uso de
JavaScript, por lo que el código es reutilizable.
• Para el caso de aplicaciones híbridas, tendremos con un
único proceso de desarrollo e implementación, una
aplicación para Android, iOS y Web.
Ventajas de Ionic
• Ionic se centra en construir para los estándares
web modernos y para dispositivos móviles
modernos. Para Android, Ionic es compatible
con Android 4.1 y versiones superiores. Para iOS,
Ionic admite iOS 7 en adelante. Ionic 2 es
compatible con la plataforma universal de
Windows para crear aplicaciones de Windows
10. Ionic Framework, impulsado por AngularJS,
es compatible con las aplicaciones BlackBerry
10.
• El uso de Ionic te permitirá crear, construir, y
compilar aplicaciones en cualquier plataforma,
todo con un solo comando. Por eso se considera
un potente CLI.
• Si te desesperas con poco, te gustará Ionic. Está
hecho para ser rápido.
• El Ionic Creator. Es el que te permitirá crear las
Interfaces sin tener que meterte en código.
Podrás crear la parte gráfica fácil sin tocar el
código para nada (Es una herramienta de
creación de interfaz de arrastrar y soltar).
¿Qué es IONIC? ¿A qué se debe su popularidad?
• En el Mundo del desarrollo de aplicaciones móviles, existen tres
alternativas para poder desarrollar aplicaciones multiplataforma, la
primera es crearla de forma nativa, la segunda es desarrollarla de
forma web y la tercera es desarrollarla de forma híbrida.
• Framework Ionic, es necesario conocer las diferencias de una
aplicación nativa, web e híbrida.
Aplicaciones nativas

• Las aplicaciones móviles

nativas son las que se
desarrollan específicamente
para cada sistema operativo,
iOS, Android o Windows
Phone, adaptando a cada uno
el lenguaje con el que se
desarrolla: lenguaje Objective-
C para iOS, Java y Kotlin para
Android, y .Net para Windows
Phone.
Aplicaciones Web

• Las aplicaciones móviles web se

desarrollan con lenguaje Javascript,
CSS o HTML. A diferencia de las
aplicaciones nativas, la aplicación
web es compatible y se adapta a
cualquier sistema operativo, por lo
que no tiene que desarrollarse una
app para cada uno como sucede con
el caso anterior. Asimismo, se
adapta al navegador móvil utilizado
por el dispositivo.El desarrollo de
este tipo de app es más económico
que el anterior. Sin embargo, como
inconveniente destaca que no
funciona sin conexión a Internet.
Aplicaciones Híbridas

• Se llaman híbridas
porque combinan aspectos de
las aplicaciones nativas y de
las aplicaciones web según
más convenga. Las
aplicaciones híbridas hacen
uso de la tecnología de
desarrollo web, es decir, HTML,
CSS y Javascript y generan
aplicaciones mediante el uso
de un navegador interno de los
celulares llamado Webview.
Conclusión
• Ionic es una herramienta, gratuita y Open Source, para el desarrollo de
aplicaciones híbridas basadas en HTML5, CSS3, Javascript o Typescript.
• Está construido con Sass y Javascript y optimizado con Angular.
• Entre sus principales características están:
1. Alto rendimiento, Ionic está construido para ser rápido gracias a la
mínima manipulación del DOM, con cero jQuery y con aceleraciones de
transiciones por hardware.
2. Ionic utiliza Angular con el fin de crear un marco más adecuado para
desarrollar aplicaciones ricas y robustas.
3. Centro Nativo, Ionic se inspira en las SDK de desarrollo móviles nativos
más populares, por lo que es fácil de entender para cualquier persona
que ha construido una aplicación nativa para iOS o Android.
• Node.js es un proyecto de
código abierto diseñado para
ayudarnos a escribir programas
JavaScript que se comuniquen
a redes, sistemas de archivos u
otras fuentes de entrada-salida
(I/O). Es básicamente esto, una
plataforma de I/O simple y
estable encima de la cual
podemos desarrollar módulos.
• En líneas generales podemos decir que
Node.js es un intérprete de Javascript
que trabaja del lado del servidor y
cambia completamente la noción de
cómo este debería trabajar.
• Lo innovador de este entorno de
ejecución es que, tradicionalmente, los
programadores trabajan utilizando
JavaScript del lado del cliente pero
buscan un nuevo lenguaje para el lado
del servidor; con Node.js esto ya no
sería necesario pues al tratarse de un
intérprete de Javascript se podría
utilizar el mismo lenguaje de
programación en ambos lados.
Debes usar Node.js porque...
• Porque puede ejecutarse en una variedad
de servidores, entre los que destacan
Microsoft Windows, Mac OS X y Unix.
• Porque plataformas como Linkedin, eBay o
PayPal fueron creadas con Node.js, lo que
indirectamente es una muestra de su
calidad.
• Su rendimiento ha sorprendido a
programadores de todo el mundo, pues
permite crear trabajos de gran calidad y
disminuye el margen de experimentar
errores técnicos.
• Su parecido con JavaScript hace que este
lenguaje sea más fácil de aprender.
• Node.js abre todo un nuevo mundo de
posibilidades para los programadores, a
quienes permitirá crear aplicaciones
altamente escalables e innovadoras,
escribiendo códigos que permitan decenas
de miles de conexiones simultáneas en un
único servidor. Hasta el momento la
mayoría de los programas de servidor
permiten un máximo de aproximadamente
4.000 usuarios conectados al mismo
tiempo, por lo que para aumentar esta cifra
las empresas deben agregar servidores,
problema que desaparecería con el uso de
Node.js ya que este puede soportar
decenas de miles de conexiones
concurrentes y así disminuir los costes de
infraestructura.
Debes usar Node.js porque...
• Es ideal para manejar aplicaciones de
alto tráfico de usuarios y eventos, como
por ejemplo Twitter donde a cada
segundo se envían cientos de miles de
tuits.
• El desarrollo de aplicaciones es mucho
más rápido, las aplicaciones también y
por lo tanto el usuario puede acceder a
una mejor experiencia de uso. Esto se
debe a que Node.js utiliza el motor V8
de Google.
• El hecho de permitir a los
desarrolladores escribir en JavaScript
tanto del lado del servidor como del
lado del cliente hacer que la
transferencia de datos entre estos
puntos sea más rápida y por lo tanto
reduce los tiempos de trabajo.
• Promueve el intercambio entre
desarrolladores, quienes pueden
inspirarse en las soluciones de otros
colegas para sus propios trabajos o
compartir sus logros con estos y así
generar una comunidad colaborativa.
• Es la mejor opción del mercado para
aplicaciones en tiempo real, como chats
online o determinados juegos.
¿Que es Apache Cordova?
• Apache Cordova es un marco de
desarrollo móvil de código
abierto. Permite utilizar las
tecnologías estándar web como
HTML5, CSS3 y JavaScript para
desarrollo multiplataforma,
evitando el lenguaje de
desarrollo nativo cada
plataformas móviles.
Aplicaciones ejecutan dentro de
envolturas para cada plataforma
y dependen de enlaces
estándares API para acceder a de
cada dispositivo sensores, datos y
estado de la red.
• Apache Cordova se graduó en
octubre de 2012 como un
proyecto de nivel superior dentro
de la Apache Software
Foundation (ASF). A través del
ASF, futuro desarrollo Cordova
asegurará administración abierta
del proyecto. Siempre
permanecerá libre y de código
abierto bajo la licencia Apache,
versión 2.0. Visite
cordova.apache.org para obtener
más información.
• Apache Cordova es un framework de
licencia libre que cuenta con muchas Apis
de diversos dispositivos móviles para
desarrollar aplicaciones nativas, hibridas y
Webs dentro de un smartphone. Cada ves
está tomando más énfasis en el mundo de
los programadores y es que para el
desarrollo de las aplicaciones se utilizan las
tecnologías web HTML, CSS y JavaScript.

• Una de las grandes peculiaridades de este

entorno de trabajo es la posibilidad de
desarrollar para iOS, Android y demás
sistemas operativos sin la necesidad de
programar en sus lenguajes nativos (Java,
Objetive-C, etc.)
• Angular es un framework de desarrollo
para JavaScript creado por Google. La
finalidad de Angular es facilitarnos el
desarrollo de aplicaciones web SPA y
además darnos herramientas para
trabajar con los elementos de una web
de una manera más sencilla y optima.

• Otro propósito que tiene Angular es la

separación completa entre el front-end
y el back-end en una aplicación web.

• Ya sabemos que es Angular, pero…

¿que es una aplicación web SPA?
¿Que es una aplicación web SPA desarrollada con Angular?

• Una aplicación web SPA creada con

Angular es una web de una sola página,
en la cual la navegación entre secciones
y páginas de la aplicación, así como la
carga de datos, se realiza de manera
dinámica, casi instantánea,
asincronamente haciendo llamadas al
servidor (backend con un API REST) y
sobre todo sin refrescar la página en
ningún momento.

• Es decir las aplicaciones web que

podemos hacer con Angular son
reactivas y no recargan el navegador,
todo es muy dinámico y asíncrono con
ajax.
• Otra ventaja que tiene este
framework es que está
respaldado por Google y tiene
una comunidad brutalmente
grande detrás.

• Gracias a esto y a la popularidad

del framework las empresas
están solicitando profesionales
que sepan desarrollar webapps
con este framework.
¿Qué es TypeScript?

• TypeScript es un lenguaje de programación

de código abierto con herramientas de
programación orientada a objetos, muy
favorable si se tienen proyectos grandes.

• TypeScript es un lenguaje de programación

de código abierto desarrollado por
Microsoft, el cual cuenta con herramientas
de programación orientada a objetos, muy
favorable si se tienen proyectos grandes.
Anders Hejlsberg, arquitecto principal del
desarrollo del lenguaje de programación
C#, es el principal participante en el
desarrollo de este lenguaje.
• TypeScript convierte su código
en Javascript común. Es
llamado también Superset de
Javascript, lo que significa que
si el navegador está basado en
Javascript, este nunca llegará a
saber que el código original fue
realizado con TypeScript y
ejecutará el Javascript como
lenguaje original.
• ¿Qué es un superset?
• Se trata de un lenguaje escrito sobre otro
lenguaje. En este caso Typescript es eso, un
lenguaje basado en el original, ofreciéndonos
grandes beneficios como el descrito
anteriormente, aunque existen otros beneficios.
Por ejemplo, mientras otros superset de
JavaScript nos alejan del código original,
Typescript, por el contrario, es muy similar a
Javascript y a C# gracias a que su creador posee
conocimientos de ambos lenguajes.

• Actualmente Angular 2, uno de los frameworks

más famosos de JavaScript, está siendo
desarrollando en TypeScript, para lo cual
conocer este lenguaje será fundamental para
entender y darle un mejor uso a la nueva
versión de Angular.
Visual Studio Code ¿Qué es?

• VS Code es un editor de código fuente

sofisticado que admite muchas
funcionalidades practicas al momento de
trabajar con el código. Estas son algunas de
ellas:

• Lenguajes de programación

• La edición de código no está limitada para

C# y VB (lenguajes propietarios de
Microsoft) si no que de nueva cuenta el
Open Source está en el paquete: Java, Go,
C, C++, Ruby, Python, PHP, Perl, JavaScript,
Groovy, Swift, PowerShell, Rust, DockerFile,
CSS, HTML, XML, JSON, Lua, F#, Batch, SQL,
Objective-C, IONIC, Angular
Pasos para crear aplicaciones Web moviles
1. Instale Node JS 6. Cree una App con la siguiente
sintaxis ionic start myapp1 tabs
2. Instale Ionic CLI
3. Instale Apache Cordova
4. Instale Visual Studio Code
como IDE
5. Cree una carpeta en el disco
que dese con el nombre
identificando aplicaciones
Ionic
AGREGAR UN TÍTULO
DE DIAPOSITIVA (5)