DESARROLLO DE APLICACIONES ¿PORQUÉ USO IONIC? • Desarrollo de apps utilizando tecnologías web • No necesitas aprender
Views 125 Downloads 0 File size 1MB
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