Este documento describe el desarrollo de aplicaciones móviles con Ionic 2. Explica brevemente la historia de las aplicaciones móviles, las diferentes arquitecturas de aplicaciones, y conceptos clave como Javascript, TypeScript y Angular 2. Luego introduce Ionic 2 como un framework para crear aplicaciones híbridas, y describe sus herramientas como Ionic CLI, Ionic View y Ionic Cloud.

1. Desarrollo de
aplicaciones
móviles con
IONIC 2
Ing. Diego Liebel

2. Contenidos
1. Introducción
2. Contextos
3. Arquitectura
a. AppNativas
b. AppHybridas
c. AppWeb
4. Javascript
a. EMA’s
b. Typescript
c. Angular 2
5. Ionic 2
2
Ideas generales, conceptos, evolución,
contextos, paradigmas, filosofías.

3. Introducción BREVE HISTORIA
Aplicaciones móviles evolución
Las primeras aplicaciones datan a
principio de los 90s (agendas, juegos
2D, editores de ringtones)
Evolucionaron rápidamente a las
tecnologías de transmisión de datos(
WAP y EDGE).
Se lanza al mercado el Blackberry en
2002
El lanzamiento de iPhone de Apple
2007 y Android de Google en 2008.
Desde ahí todo comenzó
Más info en techaheadCorp.com
3
En 2010 Apple App Store, Android
Market llegan a 1 billón de descargas.
En diciembre 2011 tanto App Store
como Android Market llegan a cifras de
10 billones de descargas.
En 2012 Google lanza Google Play.
En 2013 App Store y Google Play llega
50 billones de descargas.
En 2017 App Store llega a 2.2 millones
de apps y Google play 2.8 millones de
apps.

4. 4

5. Situación
actual
Existen clientes que necesitan
una app para ayer.
5

6. La gran pregunta...
6
Qué hacemos?

7. El Contexto
Analizando...
7

8. 8
Apps Nativas
Apps Hibridas
Apps Web

9. Apps Nativas
Java, Objective-C o
Swift, . Net (C#)
9
Estan desarrolladas con un sdk
específico para cada plataforma en
particular
Android IOS Windows

10. Apps Web ó
WebApps
Cliente Browser:
Javascript, Html, CSS
Servidor: Java, Ruby
PHP, Python……... 10
Aplicaciones web que funcionan
directamente con el navegador web.

11. Apps
Hibridas
11
Aplicaciones web embebidas en un
contenedor nativo.
Tiene acceso a las librerías y componentes nativos de la plataforma.

12. 12
Apps Web Apps Hibridas Apps Nativas
Accesos limitados Accesos al dispositivos
Desarrollo ágil
Factores de desarrollo
Desarrollo dedicado
Mayor Rendimiento ->Bajo rendimiento
Multiples lenguajes
- Java
- Objective-C o Swift
- C# o VB
Único lenguaje
- Javascript, Html, Css
- Javascript, Html, Css
- Javascript, Html, Css

13. 13

14. 14
Ionic
Es un framework para el desarrollo de aplicaciones híbridas
basadas en html5, css y javascript, con una estética y usabilidad
mobile friendly
Utiliza AngularJs (framework javascript de Google) y el
proyecto Apache Cordova.

15. 15
Ionic
Estructura y estética + Funcionalidad

16. Antes de
avanzar
Tengamos en
cuenta algunas
cuestiones…..
JavaScript
TypeScript
Angular JS

17. JAVASCRIPT
17
Es un lenguaje de programación interpretado, basado en
el estándar ECMAScript (ES). Se define como orientado
a objetos, basado en prototipos, imperativo, débilmente
tipado y dinámico.

18. TYPESCRIPT
Let’s start with the
first set of slides
18
TypeScript es un superconjunto de JavaScript, que
esencialmente añade tipado estático y objetos basados
en clases. (Popularmente javascript con vitaminas).
El mismo posee un compilador que traduce de
TypeScript a javascript de forma original.
Es un lenguaje de programación libre y de código
abierto desarrollado y mantenido por Microsoft.

19. ANGULAR 2
Let’s start with the
first set of slides
19
Framework para desarrollo de SPA (Single Page
Application)
Permite extender el HTML con etiquetas propias
● Con aspecto personalizado (HTML, CSS)
● Con comportamiento personalizado (JavaScript)
Interfaz basado en componentes (no en páginas).
Se recomienda usar con TypeScript (aunque se puede
con ES5 y ES6).
Inyección de dependencias
Mucho más…...

20. 20
Angular 2 != Angular 1
● Está implementado desde cero, no como una evolución de Angular 1
● Angular 2 no es compatible con Angular 1
● Cuidado, la documentación de Angular 1 no sirve para Angular 2

21. 21
Plataformas y Gestión de paquetes
Plataforma para ejecutar
aplicaciones JS fuera del
navegador
Gestor de herramientas de
desarrollo y librerías
JavaScript (integrado con
node.js)

22. 22
Construcción de proyecto / empaquetados

23. Retomando…
con
Ionic

24. Ionic V1
24
▪ Se han hecho más de UN MILLÓN
de apps
▪ Básicamente se creó un SDK híbrido
que no existía en su tiempo.
▪ Fue hecho durante iOS 6 y Android
2.3
IoIonic V2Ioic V1
▪ Mayor rendimiento, mayor optimización
▪ Aproximación más modular por
componentes de Angular 2
▪ Definición más simple de componentes y
servicios mediante clases
▪ Dependency Injection simplificada con
TypeScript
▪ Sintaxis de bindings más clara
▪ Detección de errores en fase de
“compilación” con TypeScript
Angular 1.x Angular 2.x

25. 25
Que ofrece ionic 2 sobre apache Cordova?
➔ Integración con Angular 2
➔ Pack de iconos según Sistema Operativo
➔ Librería de componentes compatibles.
➔ Visualización de diseño en los cuales se pueden visualizar como se van en
Android,iOS o Windows Phone
➔ Catálogos de plugins Apache Cordova probados y con soporte.
➔ Herramienta y Servicios.

26. 26

27. Herramientas
y servicios
Herramienta de CLI
27
Ionic-cli
Es una herramienta de líneas de comandos (cli) para
gestionar proyectos: creación, compilación, publicación,
instalar/desinstalar plugins, ejecución del servidor, entre
otras funcionalidades.

28. Herramientas
y servicios
Ionic Creator
28
Creator
Es una herramienta de diseño visual, de
arrastrar y soltar.
http://docs.usecreator.com/docs

29. 29

30. Ionic View
Ionic Demo
30
Ionic-view: Aplicacion móvil que permite
visualizar una app desarrollada en ionic.

31. Ionic Cloud
Servicios ionicos
31
Servicios que ofrece ionic
Ionic Services
Auth: sistema de autenticación de ionic e
interacción de autenticación de redes sociales.
Deploy: realizar despliegues on demand, sin
requerir binarios de plataforma.
Push: servicio de notificaciones push
centralizado.
Packege: permite empaquetar el proyeto para
enviar a Apple App Store y Google Play or
colegas.
https://ionic.io/discover

32. Ionic Cloud
32

33. Herramientas
y serviciosIniciando con
IONIC 2
33
Para ello se utilizará el cli de Ionic: ionic-cli
Tener instalado Nodejs (este incluye npm)
Requisitos...
Poseer una terminal de línea de comando como
administrador para la instalación.
Instalación por npm
npm install -g cordova ionic
Se verifica la instalación
ionic

34. Herramientas
y serviciosIniciando con
IONIC 2
34
Existen varias plantillas con lo que se puede comenzar
black , tab , sidemenu
Comenzar un proyecto...
Creación de proyecto con cli de Ionic
ionic start ejemplo sidemenu --v2 --ts
Desplegar el proyecto sobre el navegador
ionic serve -l

35. Herramientas
y servicios
35
● Configuración
○ ionic.config.json: configuración proyecto
○ package.json: librerias
○ tsconfig.json: compilador
○ Config.xml: configuración estética de pantallas
● Librerías descargadas
○ node_modules
● Documentación del proyecto
○ Hooks
● Recursos de multimedia
○ /resources /directorio de las imágenes de device
Estructura del Proyecto

36. Herramientas
y servicios
36
● Plugins o addons
○ /plugins -manejo extra para manejo nativo
● Configuración de proyecto una vez compilado, nombre,
iconos, entre otros.
○ /www
Estructura del Proyecto

37. Herramientas
y servicios
37
● Donde comienza la magia src
● index.html pagina principal
● manifest.json definiciones globales del proyecto
● /app
○ app.modules.ts Configuración de los módulos
○ app.component.ts Routeo de los diferentes
módulos
○ app.scss estilos de manera global.
● /assest definición de los recursos extras
● /themes
○ Variables.scss customizar las variables globales
del css de ionic e incluso los propios estilos
Estructura del Proyecto

38. Herramientas
y servicios
38
● /pages pantallas de la diferentes vistas
○ Home.html planillas
○ Home.ts componentes - logica
○ homes.scss estilo de esa vista en particular.
Estructura del Proyecto

39. 39
Componentes
y páginas
Ionic ofrece una serie de componentes especialmente
diseñados para móviles
Todos los componentes comienzan con el tag
<ion-comp>
Com: nombre específico de un componente
Cada componente tiene un diseño y comportamiento
adaptado a la plataforma

40. 40

41. 41

42. 42

43. “
43
http://ionicframework.com/docs/

44. 44
Apps realizadas
themes
plugins
Starters
https://market.ionic.io

45. Aplicaciones
realizadas
45

46. 46

47. 47

48. Gracias por su atención
preguntas?
48
Saludos
▪ dliebel
▪ diegoliebel@gmail.com
▪ @diegoliebel

49. Bibliografias
Consultadas
Recursos
Fuentes
49
▪ Ionic - ionicframework.com
▪ AngularJs - angularjs.org
▪ Angular - angular.io
▪ Standard- Ecma International - ecma-international.org
▪ TypeScript - typescriptlang.org
▪ Node.js - nodejs.org
▪ NPM - npmjs.com
▪ Los logos son oficiales, y son una copia fiel.
▪ Presentation template by SlidesCarnival
▪ Photographs by Unsplash
▪ Learn more about slidedocs at duarte.com/slidedocs
▪ Inspirado en Micael Gallego, profesor, investigador y
profesional Universidad Rey Juan Carlos

50. “
No hay tecnologías buenas ni malas,
sólo se deben utilizar en el contexto
adecuado.
Ing. Liebel
50