Ionic Presentacion.pdf

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 A VA 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 A VA 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  V E C O N C A L M A Y A P R E N D E B I E N

Gracias

@ivanbtrujillo