Arquitectura de Software

Aplicaciones «Móviles»

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?

3

¿Que es Arquitectura?

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

5

Alguno de ustedes a hecho una aplicación

móvil?

6

Alguno de ustedes a hecho una pagina web?

7

Alguno de ustedes a hecho una aplicación web?

8

Dos tipos: Aplicaciones nativas (IOS, Android, Windows

Phone, etc.)

Aplicaciones Web???

Soluciones Móviles

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

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

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?

12

Preguntas?

13

Componentes: Servidor

SOAP REST

Cliente HTML5 CSS3 Javascript

Arquitectura de App Web

14

Servicios Web: SOAP REST

Base de Datos DLLs

Servidor

15

HTML5 Accesibilidad (Navegadores de PCs y de

Smartphones)

Standard by W3C

Ahora incluye la posibilidad de tener Video y Audio

Cliente

16

CSS3 Uso de una gran cantidad de colores

Transiciones 3D

Agregar nuevas fuentes (@font-face)

Muchos efectos mas

Cliente

17

Javascript Respuesta a Eventos

Acceso a datos y consumo de Servicios Web

Manejo de DOM

Cliente

18

¿Y la Arquitectura?

19

Estrategia de Construcción de BackEnd

Estrategia de Organización de Código FrontEnd

Estrategia de Presentación Multiplataforma

Estrategias

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

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

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

23

Preguntas?

24

CCRSYS - SupervisiónCaso de Éxito

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)

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

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

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

29

Vista en Smartphone

30

Vista en PC

31

Más preguntas?Twitter: @scyrizales