An Evening with… Ionic FrameworkArkho Innova Meetup Series

• 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!!!

1. El framework 2. El proyecto 3. La experiencia 4. Lo que viene

Nuestro viaje para hoy…

El framework

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

Ionic

Ionic

El proyecto

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

La experiencia

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)

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

• Responsabilidad de equipo.

• Se tomaron decisiones conjuntas.

• Desempeñado por el equipo de ingeniería en las últimas etapas

Método

Gestión

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

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

Mapa

• La parte central de la APP • Dos distintas integraciones:

desde cero y usando ng-map • Inhabilitamos UI y tooltips

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

{ "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 } })

{ "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

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 (?)

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

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

Lo que viene

Lo que viene• Profundizar en Ionic 2

• Angular 2 • Organisation and Structure • Tooling • Navigation • Template Syntax • ES6 Syntax

• Profundizar en frameworks alternativos como AppCelerator

Referencias1. 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

An Evening with… Ionic FrameworkArkho Innova Meetup Series