Presentaciones Mariano Carrizo - eCommerce IT Camp

27
Ecosistemas Mobile WebApps a Nativas Mariano A. Carrizo d of Mobile – IDS Soluciones eCommerce tructor – LinkedIn / IT Master Professional Training ager – Grupo de Desarrolladores iOS de Argentina @kiwox marianocarrizo

Transcript of Presentaciones Mariano Carrizo - eCommerce IT Camp

Page 1: Presentaciones Mariano Carrizo - eCommerce IT Camp

Ecosistemas MobileWebApps a Nativas

Mariano A. CarrizoHead of Mobile – IDS Soluciones eCommerceInstructor – LinkedIn / IT Master Professional TrainingManager – Grupo de Desarrolladores iOS de Argentina

@kiwox marianocarrizo

Page 2: Presentaciones Mariano Carrizo - eCommerce IT Camp

Web Mobile Web

Page 3: Presentaciones Mariano Carrizo - eCommerce IT Camp
Page 4: Presentaciones Mariano Carrizo - eCommerce IT Camp

Mobile Web WebApp

Page 5: Presentaciones Mariano Carrizo - eCommerce IT Camp

<meta name=“apple-mobile-web-app-capable” content=“yes”>

@media all and (display-mode: standalone) { /* Reglas para WebApp */}

If(window.navigator.standalone) { /* Código WebApp */}

CSS

JS

HTML

Page 6: Presentaciones Mariano Carrizo - eCommerce IT Camp

<link rel="apple-touch-icon" sizes="57x57" href="/img/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon-180x180.png">

<link rel="apple-touch-icon" href="/img/icono_todos.png">

Page 7: Presentaciones Mariano Carrizo - eCommerce IT Camp

PWA: Progressive Web Apps

https://developers.google.com/web/progressive-web-apps/

• WebWorkers• Notificaciones Push• Off-line• Seguridad• Optimización• Metadatos normalizados• Cross-Platform

Más info:

Page 8: Presentaciones Mariano Carrizo - eCommerce IT Camp

{ "name": "AliExpress", "short_name": "AliExpress", "icons": [{ "src": "/img/android-chrome-36x36.png", "sizes": "36x36", "type": "image/png" },{ "src": "/img/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }], "start_url": "/?from=homescreen", "display": "standalone", "background_color": "#fff", "theme_color": "#000", "orientation": "portrait"}

<link rel="manifest" href="/manifest.json">

https://m.aliexpress.com

Page 9: Presentaciones Mariano Carrizo - eCommerce IT Camp
Page 10: Presentaciones Mariano Carrizo - eCommerce IT Camp

HTMLCSSJSMEDIA

Nativo

Page 11: Presentaciones Mariano Carrizo - eCommerce IT Camp

HTML

Nativo

Page 12: Presentaciones Mariano Carrizo - eCommerce IT Camp

CheffSteps TripCase Untappd

Page 13: Presentaciones Mariano Carrizo - eCommerce IT Camp
Page 14: Presentaciones Mariano Carrizo - eCommerce IT Camp

Objective-CSwiftC/C++

JavaC/C++

Page 15: Presentaciones Mariano Carrizo - eCommerce IT Camp

Híbrido Nativo

+

Page 16: Presentaciones Mariano Carrizo - eCommerce IT Camp

• Interfaces convencionales

• Poco uso de hardware

• Mayor dependencia de servidor

• Actualizaciones constantes

• Prototipos y pruebas de concepto

• Todas las plataformas

• UI de alto impacto

• Performance crítica

• Funcionalidad off-line

• Actualizaciones parciales

• Volúmen de datos

• Integrado a la plataforma

Híbrido Nativo

Page 17: Presentaciones Mariano Carrizo - eCommerce IT Camp

Explotando el potencial mobile:Cómo llevar mi negocio a la mano del

consumidor

Federico Homovc - [email protected]

Page 18: Presentaciones Mariano Carrizo - eCommerce IT Camp

Aplicaciones nativasVentajas para las tiendas on line•Mejor experiencia de usuario• App diferenciada por plataforma• Diseño específico para mobile• Acceso a funcionalidades del dispositivo•Mayor conversión

Page 19: Presentaciones Mariano Carrizo - eCommerce IT Camp

Conversión en mobile

Page 20: Presentaciones Mariano Carrizo - eCommerce IT Camp

Plataformas de eCommerce

Panorama actual• Para las plataformas de eCommerce, la solución

mobile es una web responsive• Alternativas: Web responsive, web app, app

nativa•Mobile first y Mobile only

Page 21: Presentaciones Mariano Carrizo - eCommerce IT Camp

Estadísticas de conversión

Page 22: Presentaciones Mariano Carrizo - eCommerce IT Camp

Integración con plataformas de eCommerce

Panorama actual• Evolución de APIs• Oauth2• Documentación y soporte existentes• Buena performance

Page 23: Presentaciones Mariano Carrizo - eCommerce IT Camp

Integración con plataformas de eCommerceLimitaciones externas• Falta de recursos en plataformas• Falta de soluciones óptimas (Soap vs Rest)

Desafíos• Adaptación de la información• Experiencia de usuario omnichannel• Mantenimiento de la información sincrónico y asincrónico

Page 24: Presentaciones Mariano Carrizo - eCommerce IT Camp

Integración con plataformas externas

Page 25: Presentaciones Mariano Carrizo - eCommerce IT Camp

App factories

Ventajas• Código reutilizable• Opciones de personalización• Configuración• Bajo costo

Page 26: Presentaciones Mariano Carrizo - eCommerce IT Camp

App factoriesDificultades• Integración con servicios externos (push

notifications, analytics, etc)• Actualización de apps en gran escala• Customización•Mantenimiento cross-platform•Mantenimiento de código

Page 27: Presentaciones Mariano Carrizo - eCommerce IT Camp

Preguntas