An evening with ... Ionic Framework Meetup
-
Upload
arkhotech -
Category
Technology
-
view
57 -
download
1
Transcript of An evening with ... Ionic Framework Meetup
• 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!!!
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
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
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
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• 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