Ejemplos de aplicaciones: ASP.NET MVC 2 + jQuery Mobile + Web Services, Android y WPF MVVM

Ejemplos de aplicaciones: ASP.NET MVC 2 + jQuery Mobile + WS, Android y WPF MVVM.

Comparto aquí los ejemplos de una pequeña aplicación implementada en 4 versiones, donde partió siendo un demo en web con ASP.NET MVC 2 que utiliza un poco de jQuery, este demo fue el inicio para implementar otras aplicaciones con la misma estructura que pudieran ser ejecutadas en otras plataformas, al primer demo se le implemento un área que ofreciera la aplicación web en versión móvil con jQuery Mobile, posteriormente se le implementaron Servicios Web los cuales ofrecieran los datos para ser consumidos por otras aplicaciones cliente; Pasando a otra plataforma, se implementó la versión para Android que se conecta a los WS mencionados; y por último se implementó la cuarta versión para Windows que fue desarrollada en WFP utilizando ahora el patrón MVVM.

El pase de diapositivas requiere JavaScript.

Debo aclarar que esto no es un tutorial de como se desarrollaron estos ejemplos, es solo para compartir resultados y los archivos fuente para que puedan ejecutar los ejemplos.

La versión web con ASP.NET MVC 2 y  jQuery Mobile, + Web Services.

Estructura ASP.NET MVC 2 + WS.

Esta es la solución del ejemplo, como mencioné, se agregó un área llamada m (móvil) cuyo resultado es accedido en la URL localhost/m/ en esta área se agregaron las vistas y también controladores donde se utilizó jQuery Mobile (esta parte es la presentada en el tutorial paso a paso: Aplicación web móvil con jQuery Mobile y ASP.NET MVC 2 disponible en 5 partes); la carpeta WebServices contiene los distintos servicios web creados cuyo objetivo es proveer los datos para la aplicación Android (esta parte se implementó como ejemplo en la asignatura que impartí, aquí el doc. con una breve explicación acerca de la implementación), en estos servicios agregue algunas clases para reutilizar los roles y usuarios existentes en la aplicación.

Mejora a realizar: en este ejemplo, se tienen 2 controladores y 1 servicio web por cada módulo, entonces, si se planea optimizar el acceso a datos entonces deben modificarse los 2 controladores y el ws, lo que debe hacerse es crear un conjunto de clases que sean consideradas como Servicios, estos servicios serán los encargados de manipular los datos y ofrecer miembros públicos para poder devolver o recibir datos, entonces, estos servicios serán accedidos desde los distintos controladores y ws haciendo nuestra aplicación más eficiente y robusta.

El código fuente del ejemplo: está disponible en una carpeta compartida de SkyDrive.

Presento de forma resumida algunas pantallas de este ejemplo.

Index - ASP MVC 2.
Clientes - ASP MVC 2

La versión web móvil con jQuery Mobile.

Inicio - web jQuery Mobile.
Clientes - web jQuery Mobile.
Ventas- web jQuery Mobile.

Los Web Services.

Vista local del Web Service Clientes. - MVC 2.

La versión para Android.

Datos cliente Activity - Andoid app.

La aplicación para Android fue también el ejemplo para que los alumnos implementaran su aplicación de proyecto en Android en la asignatura que impartí, esta pequeña app mantiene la estructura de la versión web y versión web móvil, de igual forma, no tengo un tutorial paso a paso del desarrollo de este demo, pero elabore algunos documentos de introducción que fueron la base para el desarrollo, los documentos son: Introducción a aplicaciones móviles | La interfaz de usuario | La interfaz de usuario – parte 2 |  Servicios Web .NET y consumo en Android | Seguridad personalizada en WS .net y consumo en Android; actualmente existen muchos tutoriales en la red que pueden ayudar en el desarrollo de aplicaciones para Android y de igual forma para el desarrollo de aplicaciones en otras plataformas.

El código fuente de este proyecto está disponible en el repositorio de GitHub https://github.com/afelipelc/Agencia2012

Presento de forma resumida algunas pantallas de este ejemplo.

Login Activity - Andoid app.
Home Activity - Andoid app.
Clientes Activity - Andoid app.

La versión en Windows Presentation Fundation (WPF) con MVVM para Windows.

Estructura de la solución - WPF MVVM

Este ejemplo fue algo adicional que por mi parte quise realizar, no fue parte de la asignatura, sin embargo, como no había trabajado con MVVM busque información al respecto y encontré este blog bastante completo y muy útil para desarrollar una aplicación modular con WPF MVVM utilizando Prism, el link es MVVM and WPF using VB.Net Article Index podemos leer acerca de Prism en http://compositewpf.codeplex.com/ y descargarlo de http://www.microsoft.com/download/en/confirmation.aspx?id=28950 en este ejemplo se utilizaron controles adicionales como IntegerUpDown y DecimalUpDown, la biblioteca completa se encuentra en http://wpftoolkit.codeplex.com/

Otro ejemplo avanzado es WPF Application Framework utilizado para crear aplicaciones estructuradas con MVVM, se encuentra disponible en http://waf.codeplex.com/

En la red existen también muchos tutoriales acerca de WPF con MVVM pero en lo personal encontré más útil el tutorial citado.

Entonces seguido el tutorial citado que se encuentra escrito en VB  obtuve como resultado mi ejemplo que esta conformado por 8 proyectos donde 4 son los módulos y el resto la capa de datos, la capa de lógica del negocio, y la infraestructura que contiene clases utilizadas en todo el proyecto como BaseViewModel.

Traductores de código VB a C# por si fuera necesariohttp://converter.telerik.com/ y http://www.developerfusion.com/tools/convert/vb-to-csharp/

El código fuente de mi ejemplo: está disponible en la carpeta compartida de SkyDrive.

Presento de forma resumida algunas pantallas de este ejemplo.

Vista principal - WPF MVVM

Buscar clientes - WPF MVVM
Autos - WPF MVVM
Vender auto - WPF MVVM
Ventas - WPF MVVM

Conclusión.

En lo personal trabajar en el desarrollo de aplicaciones para distintas plataformas es agradable y requiere de trabajo, ya que no debemos limitarnos a trabar en una sola plataforma, para estos ejemplo, lo que se ha tocado es más de .Net, Java Script, C# y Java con Android, todo esto realizado en MS Windows 7, sin embargo, podemos también trabajar en Linux desarrollando aplicaciones de escritorio como por ejemplo con Griffon, o crear aplicaciones web utilizando algunos frameworks existentes como Spring, ZK, o algún otro que se adapte a nuestras necesidades, ademas de utilizar otros servidores de BD y no solo SQL Server.

Trabajando con MVC y MVVM para mí es más práctico MVVM ahora que he realizado el ejemplo, ya que basta implementar propiedades y enlazarlas a los elementos de la vista, de igual forma implementar los comandos; con esto ya no nos preocupamos de programar o recoger datos de la vista como se hace con MVC que requiere de un poco más de trabajo para lograr el mismo resultado.

Ojala que estos ejemplos sean útiles para quienes accedan a ellos y los revisen, se que son básicos pero en algo pueden servir.

Saludos.

4 comentarios en “Ejemplos de aplicaciones: ASP.NET MVC 2 + jQuery Mobile + Web Services, Android y WPF MVVM

Escribe tu comentario:

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s