Arquitectura de software para aplicaciones móviles
-
Upload
sergio-castillo -
Category
Documents
-
view
8.426 -
download
1
Transcript of Arquitectura de software para aplicaciones móviles
![Page 1: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/1.jpg)
Arquitectura de Software
Aplicaciones «Móviles»
![Page 2: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/2.jpg)
2
Sergio Castillo Yrizales
Líder de Proyectos CCR
Expositor de la comunidad JSPeru
4 años de experiencia en soluciones web
3 años en soluciones móviles
¿Quien soy?
![Page 3: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/3.jpg)
3
¿Que es Arquitectura?
![Page 4: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/4.jpg)
4
Uno de cada diez peruanos ya tiene un smartphone.
El 86% de los peruanos se conecta a internet.
¿Por que móvil?
Fuente: Ipsos Apoyo 2011
![Page 5: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/5.jpg)
5
Alguno de ustedes a hecho una aplicación
móvil?
![Page 6: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/6.jpg)
6
Alguno de ustedes a hecho una pagina web?
![Page 7: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/7.jpg)
7
Alguno de ustedes a hecho una aplicación web?
![Page 8: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/8.jpg)
8
Dos tipos: Aplicaciones nativas (IOS, Android, Windows
Phone, etc.)
Aplicaciones Web???
Soluciones Móviles
![Page 9: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/9.jpg)
9
Ventajas Más Rápidas Mejores Gráficos
Desventajas Muchas tecnologías por aprender (Objective-C,
Java, Silverlight, Flex…) Diferentes Mercados (AppStore, Google Play,
Windows MarketPlace…)
Aplicaciones Nativas
![Page 10: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/10.jpg)
10
Ventajas Un solo grupo de tecnologías (HTML+CSS+JS) Compatibles en todos los Mercados
(PhoneGap, Titanium…) Menor costo de Desarrollo Menor Curva de aprendizaje
Desventajas Rápidas…
Aplicaciones Web
![Page 11: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/11.jpg)
11
Depende de tu aplicación: Aplicaciones nativas
Juegos Acceso a sensores, cámara, etc.
Aplicaciones web móviles Varios objetivos Objetivo principal: consumo de información. Accesibilidad Mercado variado que incluye PCs, Macs y
Smartphones
¿Y cual elijo?
![Page 12: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/12.jpg)
12
Preguntas?
![Page 13: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/13.jpg)
13
Componentes: Servidor
SOAP REST
Cliente HTML5 CSS3 Javascript
Arquitectura de App Web
![Page 14: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/14.jpg)
14
Servicios Web: SOAP REST
Base de Datos DLLs
Servidor
![Page 15: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/15.jpg)
15
HTML5 Accesibilidad (Navegadores de PCs y de
Smartphones)
Standard by W3C
Ahora incluye la posibilidad de tener Video y Audio
Cliente
![Page 16: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/16.jpg)
16
CSS3 Uso de una gran cantidad de colores
Transiciones 3D
Agregar nuevas fuentes (@font-face)
Muchos efectos mas
Cliente
![Page 17: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/17.jpg)
17
Javascript Respuesta a Eventos
Acceso a datos y consumo de Servicios Web
Manejo de DOM
Cliente
![Page 18: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/18.jpg)
18
¿Y la Arquitectura?
![Page 19: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/19.jpg)
19
Estrategia de Construcción de BackEnd
Estrategia de Organización de Código FrontEnd
Estrategia de Presentación Multiplataforma
Estrategias
![Page 20: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/20.jpg)
20
Servicios Web REST Flexibilidad de Desarrollo Uso adecuado de los verbos HTTP GET, POST,
PUT y DELETE Buena estrategia de manejo de Cache Diversas tecnologías: .NET(WCF), JAVA(Jersey,
RESTlet)
Estrategia BackEnd
![Page 21: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/21.jpg)
21
Patron MVC Modelos para comunicarse con los servicios Controladoras que responden a la interacción
de los usuarios Vistas que permiten separar el diseño de la
programación Tecnologías: Backbone, AngularJS, etc…
Estrategia FrontEnd
![Page 22: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/22.jpg)
22
Muchas veces pasada por alto Muy importante para maximizar la
satisfacción del usuario Dos estrategias:
Responsive Design Framework UI: Jquery Mobile, SenchaTouch,
etc…
Estrategia de Presentación
![Page 23: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/23.jpg)
23
Preguntas?
![Page 24: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/24.jpg)
24
CCRSYS - SupervisiónCaso de Éxito
![Page 25: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/25.jpg)
25
Se necesita una aplicación que pueda ser usada en nuestros equipos Windows Mobile
Asi mismo se debe poder accesar a la misma desde las PCs de la empresa
Y en el futuro debe poder accesarse desde dispositivos Android
Problema (Req. Técnicos)
![Page 26: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/26.jpg)
26
Patrón MV* mediante Backbone Modelos que manejas la data
Vistas que responden a eventos y construyen el DOM
Rutas que controlan el flujo de la aplicación
Estrategia FrontEnd
![Page 27: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/27.jpg)
27
Servicios REST con WCF Integración con la BD MS SQL Server
Flexibilidad en formatos de Respuesta (JSON)
Buen IDE (Visual Studio)
Estrategia BackEnd
![Page 28: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/28.jpg)
28
Framework: Jquery Mobile Compatibilidad con la mayor cantidad de
dispositivos: Windows Phone, IOS, Android, Blackberry 10, Windows Mobile.
Desarrollo Amigable
Estrategia de Presentación
![Page 29: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/29.jpg)
29
Vista en Smartphone
![Page 30: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/30.jpg)
30
Vista en PC
![Page 31: Arquitectura de software para aplicaciones móviles](https://reader036.fdocuments.mx/reader036/viewer/2022062418/556316dbd8b42a51498b4ed4/html5/thumbnails/31.jpg)
31
Más preguntas?Twitter: @scyrizales