Ionic es un framework de desarrollo híbrido móvil de amplio uso en la industria. Entre sus principales características se destacan el desempeño, integración con AngularJS, similitud de interfaces finales con las nativas y el soporte a integración de hardware vía Apache Cordova. En este meetup usamos un proyecto real Ionic creado para uno de nuestros clientes, para analizar todo el proceso de construcción (de más de 3 meses), conociendo las principales características de la implementación y todos las experiencias que enfrentamos en este reto de equipo. Revisaremos todo lo que hicimos: la estructura de equipo, tecnologías, método de trabajo, obstáculos, etc. compartiendo con los asistentes el caso de éxito de una experiencia real.

1. An Evening with…
Ionic Framework
Arkho Innova Meetup Series

2. • Un espacio para compartir experiencias
y conocimiento
• Un espacio para hacer relaciones entre
equipos con intereses afines
• Un espacio para pasarla bien
Gracias por su asistencia!!!

3. 1. El framework
2. El proyecto
3. La experiencia
4. Lo que viene
Nuestro viaje para hoy…

4. El framework

5. Item Híbrido Nativo
Tecnología
HTML 5, Javascript (JS), CSS y Apache
Cordova
iOS /Swift; Android/Java
Reusabilidad de la
implementación
Alta Ninguna, código independiente
Desempeño
Medio (depende de ejecución de JS y
plugins nativos)
Alto (máximo desempeño posible)
Soporte de plataforma
Medio (depende de plugins nativos Apache
Cordova)
Completo (características del SDK y el
sistema operativo)
UI Medio (emulación de controles UI nativos)
Completo (características del SDK y el
sistema operativo)
Presupuesto Medio Alto
La batalla nativo vs. híbrido

8. Ionic

9. Ionic

10. El proyecto

11. Objetivos
1. Aumentar la calidad de servicio para los clientes y en
específico en el proceso de reserva de taxis, creando
herramientas de auto-atención, de fácil acceso
y uso.
2. Reducir costos de atención en operación y atención de
llamadas de reserva al callcenter.
Alcance del proyecto
1. Login
2. Reservar servicio de taxi
3. Solicitar nuevo servicio
4. Calificación del servicio

12. La experiencia

13. Los números del proyecto
• 4 integrantes en el equipo
• 3 meses de trabajo
• 356 historias
• Más de 10 sprints (todos con review)
• 25 branches en GitLab
• 4 contextos de prueba (ionic serve, ionic view,
xcode/android studio, teléfonos reales)
• Más de 60 incidencias (15 reportadas por el cliente)
• 2 plataformas (iOS & Android)

14. Equipo
Líder de Proyecto Arquitecto Ingeniería UI QA
• Responsable de
entrega
• Relación con
cliente
• Participante del
desarrollo
• Responsabilidad
de equipo.
• Se tomaron
decisiones
conjuntas.
• Javascript/
HTML/CSS
• Responsabilid
ad de equipo.
• Se tomaron
decisiones
conjuntas.
• Desempeñado
por el equipo
de ingeniería
en las últimas
etapas

15. Método

16. Gestión

17. PoCs
• Más de 15 PoCs distintas en diferentes Sprints
• Integraciones con Google
• Pruebas de Cordova Plugins

18. Servicios
• Diseño de servicios en SOAPUI.
mockServices para cada uno de los
casos de prueba
• Inclusión de headers para evitar
CORS y tipo de contenido
adecuado.
• Manejo de errores tipo
500,401,404, etc.
• Cada servicio con múltiples
respuestas usando scripts Groovy
• Prueba con POSTMAN
• Shell para automatización de inicio
de servicios para integración
continua

19. Mapa
• La parte central de la APP
• Dos distintas integraciones:
desde cero y usando ng-map
• Inhabilitamos UI y tooltips

20. Geo*
• Usamos Geolocation por Cordova plugin y por HTML5 geolocation API. Estamos usando
Cordova*
• Integrado con Google Maps API SDK 3 (markers, display, etc.)
• Integrado con servicios Google Places Autocomplete
• Integrado con servicios Google Reverse Geocoding

21. {
"name": "TheApp",
"app_id": "bb32da5c",
"gulpStartupTasks": [
"sass",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
],
"proxies": [{
"path": "/theapp-app/",
"proxyUrl": "https://servicios.theclient.cl:443/theapp-app/"
}]
}
Proxies
• Invocar los servicios en modo
“desarrollo”
• Evitar problemas de acceso desde un
ambiente no real a los servicios (Cors)
.constant('webservices', {
url : 'http://localhost:8100/theapp-app/',
config : {
headers : {
'Accept' : 'application/json, text/plain, */*',
'Content-Type' : 'application/json; charset=utf-8;'
},
timeout : 15000
}
})

22. {
"dev" : {
...
},
"qa" : {
"google_analytics" : "UA-82813354-1",
"google_maps" : "https://maps.googleapis.com/maps/api/js?
key=AIzaSyC8a6uEEoOLqqthc4_psw7Y1vtX2mWS_N4&libraries=places",
"gcm_number" : "351097259074",
"app_version" : "0.5.0",
"url_services" : “https://servicios.theclient.cl:443/theapp-app/",
"url_term_and_cond" : "https://servicios.theclient.cl:443/theapp-app/conditions"
},
"production" : {
...
}
}
Parámetros
...gulp.task(‘remove-proxy’, function() {
return replace({
regex: "http://localhost:8100/theapp-app/",
replacement: param. url_services,
paths: appFile,
recursive: false,
silent: false,
});
});
...
• Múltiples configuraciones por ambiente
• Reemplazo de código usando Gulp

23. Cordova
• cordova-plugin-dialogs (alerts y dialogs)
• cordova-plugin-geolocation (geo?)
• cordova-plugin-x-toast (toast alerts)
• cordova-plugin-splashscreen (splash)
• cordova-plugin-network-information
(offline)
• cordova-plugin-whitelist (?)
• ionic-plugin-keyboard (bug iOS)
• cordova-plugin-ios-disableshaketoedit
(shake to edit)
• cordova-plugin-google-analytics
(analytics)
• cordova-plugin-app-version (app
version)
• cordova-plugin-device (?)

24. Efectos
• Distintas pruebas para la usabilidad del marker en el mapa
• Slide out/in en estado del servicio
• Mensajes emergentes Toast

25. Analítica
• Plugin de Cordova
• Integración de screen
view (en cada ingreso)
y éxito/error de
servicios
• También se registra el
tiempo de
respuesta de
servicios

26. Lo que viene

27. Lo que viene
• Profundizar en Ionic 2
• Angular 2
• Organisation and Structure
• Tooling
• Navigation
• Template Syntax
• ES6 Syntax
• Profundizar en frameworks alternativos
como AppCelerator

28. Referencias
1. http://mobile-frameworks-comparison-chart.com/
2. http://ionicframework.com/
3. http://ngcordova.com/
4. https://ngmap.github.io/
5. https://developers.google.com/maps/documentation/javascript/places
6. https://developers.google.com/maps/documentation/javascript/geocoding#ReverseGeocoding
7. https://github.com/driftyco/ionic/issues/1798
8. http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
9. http://codepen.io/mhartington/pen/bwdoA
10. https://github.com/apache/cordova-plugin-geolocation
11. https://www.thepolyglotdeveloper.com/2014/09/show-native-toast-notifications-using-ionic-framework/
12. https://github.com/nleclerc/cordova-plugin-ios-disableshaketoedit
13. https://www.thepolyglotdeveloper.com/2014/06/using-google-analytics-ionicframework/
14. http://caniuse.com/
15. https://developers.google.com/maps/documentation/javascript/events?hl=es
16. http://blog.ionic.io/handling-cors-issues-in-ionic/
17. https://github.com/wallin/angular-gravatar
18. http://www.joshmorony.com/7-reasons-why-ionic-2-is-better-than-ionic-1/
19. http://www.joshmorony.com/how-to-convert-an-ionic-1-application-to-ionic-2/
20. http://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/
21. http://www.joshmorony.com/intro-to-ecmascript-6-and-angular-2-for-ionic-developers/
22. https://crosswalk-project.org

29. An Evening with…
Ionic Framework
Arkho Innova Meetup Series