DESARROLLO DE

APLICACIONES
¿PORQUÉ USO IONIC?

• Desarrollo de apps utilizando tecnologías web

• No necesitas aprender lenguaje nativo

• Basado en Javascript y Angular

• Gran libreria de plugins propios: NG - Cordova

• Gran rendimiento en el dispositivo comparado a otros frameworks

• Código reutilizable

• Interfaz grafica muy cuidada

LA BASE DE IONIC

A N G U L A R . J S Y C O R D O VA

Angular: Lógica de la aplicación.

Cordova: Comunicación con el dispositivo
Aplicaciones con Ionic
HTTP://SHOWCASE.IONICFRAMEWORK.COM/

Nada que envidiar a apps nativas

R E Q U I S I T O S PA R A D E S A R R O L L A R

• Node.JS

• Paquetes Cordova y Ionic

• SDK de Android / Xcode

• Java JDK (Android)

• Apache-ant

• Ios-sim (Mac OS)

I N S TA L A C I Ó N D E N O D E . J S

• Descargar para tu sistema: www.nodejs.org

• Instalar

• Verificación: node -v
I N S TA L A C I Ó N C O R D O V A & I O N I C

PERMISOS GLOBAL PA Q U E T E S

• sudo npm install -g cordova ionic

XCODE / SDK ANDROID
• Xcode: Appstore 






• Android Studio: http://developer.android.com/sdk/

index.html
J AVA J D K

• Android nativo esta basado en Java. Ionic funciona

sobre cordova, y cordova necesita comunicarse con la
parte nativa y compilar una app. 



http://www.oracle.com/technetwork/java/javase/
downloads/jdk8-downloads-2133151.html
C O N F I G U R A N D O A N D R O I D E N E L PAT H

• En nuestro PATH, añadimos la ruta a platform-tools y tools.

• MACOS (.bash_profile o .zshrc).

• export PATH=${PATH}:/Users/ivanbtrujillo/Library/Android/
sdk/platform-tools:/Users/ivanbtrujillo/Library/Android/
sdk/tools

• Windows: Propiedades del sistema > Configuración

avanzada > Variables de entorno

• ¿Porqué instalar Android Studio y no SDK únicamente?

A PA C H E A N T

Herramienta de apache que realiza tareas

repetitivas en el momento de compilar

• OSX: brew install ant

• Windows: Descargar , descomprimir y añadir al PATH

http://ant.apache.org
IOS-SIM (MAC OS)

Utilidad desarrollada por Phonegap para lanzar

una aplicación IOS en el emulador IOS desde la
linea de comandos.

• Debemos instalar ios-sim via npm para poder lanzar la

app de cordova a un emulador de IOS en mac OS.



sudo npm install -g ios-sim
FA L L O A L E M U L A R E N Y O S E M I T E

• En OS X Yosemite se ha detectado un problema que impide

iniciar el emulador desde cordova de forma normal, utilizando
ionic emularte ios. Para corregirlo hay que hacer lo siguiente:

• Instalar brew

• Instalar reattach-to-user-namespace vía brew

• Ejecutar nuestra aplicación en el emulador de IOS de esta forma: 




reattach-to-user-namespace ios-sim launch ./platforms/ios/build/
emulator/miaplicacion.app
 PA S O S PA R A G E N E R A R L A A P P
• Crear un proyecto:

sudo ionic start miaplicacion blank

• Añadir una plataforma:


sudo ionic platform add ( ios / android)

• Compilar la aplicación para la plataforma indicada


sudo ionic build ( ios / android )

• Emular la aplicación

sudo ionic emulate ( ios / android )



En OS X Yosemite, ejecutarlo así: reattach-to-user-namespace ios-sim launch ./platforms/
ios/build/emulator/miaplicacion.app

• Ejecutar la app en un dispositivo USB


sudo ionic run ( ios / android )

• Ejecutar la app en el navegador (no funcionan los plugins)


sudo ionic serve
PA R A T E R M I N A R

Proximamente:
Estructura del proyecto
Componentes de Ionic
Plugins vía NG-Cordova
Creando nuestro primer proyecto
Consejos
H T M L , C S S , J AVA S C R I P T Y A N G U L A R . J S
N O A B U S E S D E L C O P Y PA S T E
VE CON CALMA Y APRENDE BIEN

Gracias

@ivanbtrujillo