Wilson Vargas
Wilson Vargas

Un programador enamorado de su código.

Wilson Vargas
Author

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Share


Suscribete


Mantente al tanto de mis nuevos artículos

Tags


Featured on Planet Xamarin badge

Twitter


Cómo hacer un chat al estilo de WhatsApp con Azure Mobile Service

Wilson VargasWilson Vargas

Este artículo está dedicado a mi novia y está narrado cuando aún eramos amigos.

Hace unos días estuve conversando tranquilamente por WhatsApp con una chica que quiero y estimo muchísimo, luego de unas cuantas horas de conversación empezamos a notar que el servicio de WhatsApp empezaba a fallar por ratos, he ahí que salió la promesa de hacer un WhatsApp solo para los dos.
Al día siguiente de la conversación y de haber notado estas fallas, estaba hablando con un compañero de oficina y de pronto salió la pregunta ¿Qué tan difícil será crear un Chat para la empresa?. La primera respuesta que le di fue: "Próximamente voy a escribir cómo hacer eso, vas a ver ;)".

Además, estoy muy contento de que algunos de mis blog posts sean tomados en cuenta para una iniciativa que tiene Microsoft para todos nosotros, está iniciativa es Azure Boxes, espero que este artículo sea muy pronto publicado y pues si vienes de ahí, esto ya es una realidad.

En este artículo te mostraré una forma sencilla de cómo hacer un chat al estilo de WhatsApp utilizando los servicios móviles de Microsoft Azure, debo aclarar que en esta primera versión no están implementadas todas las características de WhatsApp, pero sí las más importantes como la autenticación con Microsoft Account, el envío de notificaciones y el almacenamiento de los mensajes enviados, yo sé que ustedes le van a echar mano al código y harán de está aplicación mejor cada día.

Yo estoy asumiendo que tú ya tienes una cuenta de Microsoft Azure lista para usar, si aún no tienes una puedes conseguirla de estás tres maneras:

También estoy asumiendo que tú cuentas con una cuenta de desarrollador en el mercado de Windows, si aún no cuentas con eso puedes revisar los siguientes enlaces para poder obtener una, puede obtener una con las siguientes suscripciones:

Empecemos

Lo primero que vamos hacer es preparar nuestro entorno en Azure, para eso vamos a crear un servicio móvil de la siguiente manera:
Nuevo -> Compute -> Mobile Servicios -> Crear

Pones un nombre adecuado, escoges una base de datos ya sea nueva o existente, tu suscripción, eliges la región donde estará ubicado y finalmente el lenguaje de tu Backend.

Ahora, debes elegir un nombre adecuado para tu base de datos, eliges un servidor donde alojar tu base de datos, en mi caso ya tengo uno creado, pero si tú vas a crear uno nuevo no hay problema.

Nuevamente en el portal de administración de Azure debemos acceder a nuestro nuevo servicio móvil que hemos creado.

Para este ejemplo necesitamos crear una tabla llamada Chat, es sencillo tal vez, pero en versiones posteriores va a tener muchas más tablas, pero por ahora solo crearemos esa.
En el detalle de nuestro servicio móvil hacemos clic en DATA, cómo se muestra en la imagen:

Agregar nueva tabla.

Le ponemos un nombre a nuestra tabla y le otorgamos ciertos permisos, para este ejemplo los permisos que asignaremos será el de "Solo usuarios autenticados"

Ahora accedemos a la información de nuestra tabla para poder agregarle los atributos correspondientes.

En la opción Columnas simplemente vamos a agregar tres atributos adicionales a los que ya están creados, para esto solo hacemos clic en "Agregar Columna"

Estos son los tres atributos que vamos a adicionar a nuestra tabla creada, asegúrate de que el atributo TimeStamp tenga el tipo de dato Date

Por ahora dejaremos nuestro servicio móvil en Azure como está, más adelante volveremos a configurar el tema de autenticación y notificaciones.

A Codificar

Abrimos Visual Studio y vamos a crear una App Universal. Hacemos clic en Archivo -> Nuevo -> Proyecto y elegimos Universal App

Lo que hago normalmente es pasar todas las imágenes de la carpeta Assets de los proyectos Windows Phone y Windows 8.1 a una nueva, con el mismo nombre, creada en el proyecto compartido, aún no comprendo porque Microsoft sigue creando esas carpetas en diferentes proyectos.

Para este ejemplo eliminaremos el archivo MainPage.xaml de los proyectos Windows Phone y Windows 8.1 para luego agregarlo en el proyecto compartido y así aprovechar todos los beneficios del código compartido.
En el nueva solución vamos al proyecto compartido y creamos las siguiente carpetas: Assets, Common, Model y Views. Para crear estas carpetas hacemos lo siguiente:

Lo que hacemos ahora es pasar todas las imágenes que estaban en la carpeta Assets de los proyectos Windows Phone y Windows 8.1 y copiarlas en la carpeta Assets del proyecto compartido, luego eliminamos esta carpeta de ambos proyectos, dejándola solamente en el proyecto compartido.
Ahora, eliminamos el archivo MainPage.xaml de los proyectos Windows Phone y Windows 8.1 y luego lo creamos este archivo en la carpeta Views del proyecto compartido de la siguiente manera:

Creamos un Pagina en blanco y le asignamos el mismo nombre que teníamos MainPage.xaml

Ahora en el proyecto de Windows 8.1 vamos a instalar el SDK de Live para poder hacer la autenticación con nuestra cuenta Microsoft, en este paso tuve un problema ya que yo había descargado el SDK por Nugget pero tenía un error extraño que se solucionó descargando el SDK desde el siguiente enlace.

Una vez instalado el SDKLive lo agregamos a nuestras referencias de la siguiente manera:

En la pestaña Windows 8.1 seleccionamos Extensiones y buscamos Live SDK elegimos el SDK correspondiente y hacemos clic en Aceptar.

NOTA: La misma acción debemos hacer en el proyecto de Windows Phone.
Ahora vamos agregar algunas herramientas que necesitamos para poder interactuar con nuestro servicio móvil creado en Azure, para eso hacemos clic derecho a la solución y buscamos la opción Administrar paquetes de Nugget

A continuanción vamos a instalar es el SDK de Azure Mobile Services para eso solo buscamos en el administrador de paquetes Nugget lo que necesitamos instalar y listo.

Ahora vamos a instalar el SDK de Services Bus para eso hacemos los mismo que con el SDK de Mobile Service, con la diferencia de que está búsqueda se encuentra normalmente en la tercera pestaña, asegúrate de que el SDK que estés instalando sea igual al de la imagen

Después de hacer todo eso la estructura de tu solución debe ser similar a esta:

Ahora en la carpeta Common vamos a agregar el siguiente archivo de estilos StandardStyles.xaml esta es una plantilla de estilos ligeramente modificada que uso normalmente en algunos proyectos.

Adicionalmente, en la carpeta Common crearemos una clase llamada Configuracion.cs para tener todas nuestras credenciales de nuestros servicio móvil en esta clase estática.

Seleccionamos el tipo de archivo que sea una clase y escribimos el nombre

Dentro de esta clase escribimos el siguiente código:

Cada una de las constantes las usamos en todo el proyecto así que es importante cambiarlas una vez terminemos este tutorial.
Ahora, en la carpeta Model agregamos una clase llamada Chat.cs

Dentro de esta clase vamos a escribir todos los atributos que nosotros creamos en nuestro servicio móvil, tu clase debe tener el siguiente aspecto. Si deseas puedes ignorar la ultima propiedad la puse por motivos de una próxima actualización.

En el archivo App.xaml agregamos la plantilla de estilos de la carpeta Common como un recurso a nuestro proyecto, para eso escribimos los siguiente:

Luego en el archivo App.xaml.cs instanciamos el objeto que vamos a utilizar para interactuar con nuestro servicio móvil.

Ahora, en el archivo MainPage.xaml escribimos el código para hacer la UI de nuestro chat, yo hice una simple, pero tú puedes hacer una con muchas más características, recuerda tú eres el genio ;)

Finalmente en el archivo MainPage.xaml.cs escribimos el código para la lógica de nuestra aplicación, más adelante explicaré los métodos más importantes.

El método Authenticate() es el que nos permite la autenticación con nuestra cuenta Microsoft, para esta aplicación solo vamos a necesitar los datos básicos como nombre y apellido con el objetivo de ver quien envió el mensaje, en unas próximas versiones podremos agregar autenticación con Facebook, Twitter, Google+ y me dieron la idea de autenticarse con Yammer, pero eso queda pendiente.

El manejador del evento OnPushNotification() es el que nos proporciona el estilo de notificación que nosotros vamos a implementar en esta versión solo la notificación Toast, en versiones posteriores podremos implementar más notificaciones.

El manejador del botón Enviar, es el que simplemente hace una inserción en nuestro servicio móvil alojado en Azure.
Además de esto hay métodos como CheckForInternetAccess() o RefreshChatItems() que sus propios nombres lo dicen uno sirve para verificar la conexión a internet y el otro para actualizar el CollectionView que utilizo para mostrar los mensajes.

Asociando nuestra aplicación

Para poder hacer uso de la autenticación en nuestra aplicación nosotros tenemos que darle ciertas credenciales a nuestro servicio móvil para que este nos proporcione un token de autorización, como lo dije al principio para este ejemplo vamos a utilizar los servicios de Microsoft Account, tal vez más adelante usaremos los servicios de Facebook, Twitter o Google+.

Para conseguir las credenciales y definir que nuestra aplicación usará los servicio de Live tenemos que crear una aplicación en nuestro portal del mercado de Windows y elegir Enviar una aplicación.

Elegimos la opción Nombre de la aplicación.

Le ponemos el nombre a nuestra aplicación y reservamos el nombre.

Luego ingresamos a la opción Servicios.

Visitamos el sitio de Live Services para actualizar las credenciales de nuestro servicio.

En la opción configuraciones de la aplicación copiamos las credenciales de Package ID, Client ID y Client Secret. Para luego poder utilizarlas en el servicio móvil y servicio de notificaciones de Windows Azure.

En la opción configuración de la API, elegimos en ambas opciones para poder autenticarnos desde nuestro servicio móvil.
En la dirección de re direccionamiento ponemos una url parecida a esta, pero reemplazando la url de tu servicio móvil.

https:// < URL-de-tu-servicio-movil >/login/microsoftaccount

Finalmente guardas esta configuración y regresas al panel de tu aplicación y guardas la configuración de tu servicio.

Regresamos a Visual Studio para asociar nuestra aplicación y así poder probar las notificaciones y la autenticación.
En Visual Studio, en nuestro proyecto de Windows 8.1 hacemos clic derecho y elegimos la opción Tienda y luego Asociar Aplicación con la Tienda.

En la nueva ventana seleccionamos la aplicación correspondiente y luego en Siguiente.

NOTA: Para el proyecto de Windows Phone debes hacer exactamente lo mismo.

Solo eso debemos hacer en Visual Studio, ahora regresamos a nuestro portal de administración de Microsoft Azure.
En nuestro portal elegimos nuestro servicio móvil y luego la opción IDENTIDAD

Pegamos las credenciales que teníamos copiadas de nuestro servicio en Live.

Solo guardamos y ya podemos probar la autenticación en nuestra aplicación.
Notarás que tengo los botones de Guardar y Descartar duplicados, déjame decirte que es algo muy extraño que me pasa en mi portal de Azure y estoy usando Internet Explorer, yo siento que es más fluido para este tipo de servicios, en fin son cosas que aún no entiendo :P

Ahora, en tu servicio móvil eliges la opción PUSH para poder configurar una parte de las notificaciones.

Nuevamente copiamos las credenciales en la sección Windows y guardamos

Ahora en nuestro panel de administración vamos a la parte de Service Bus para configurar las notificaciones.
Elegimos nuestro servicio de la aplicación que hemos creado.

En la opción NOTIFICACIONES HUB elegimos nuestro servicio.

En la opción CONFIGURACION buscamos la sección Windows, pegamos las credenciales de nuestro servicio Live y finalmente Guardamos

Ahora regresamos a nuestro servicio móvil y elegimos la opción DATA y hace clic sobre nuestra tabla creada.

Elegimos la opción SCRIPT y modificamos el código de la opción INSERT para poder enviar notificaciones cada vez que inserten o envíen un mensaje.

Copiamos el siguiente código.

Obteniendo las credenciales.

Azure Mobile Service

Para obtener nuestras credenciales de nuestro servicio móvil vamos al que hemos creado y hacemos clic en la opción CONECTAR A UNA APLICACIÓN WINDOWS EXISTENTE.

Y copiamos las credenciales que ahí indican

Service Bus

Para obtener las credenciales de nuestro servicio de notificaciones vamos a la opción SERVICE BUS

Elegimos el servicio correspondiente

Luego hacemos clic en NOTIFICACIONES HUB y seleccionamos nuestro servicio

Ahora seleccionamos la opción Ver Cadena de Conexión

Finamente, aquí podemos copiar las credenciales para poder pegarlas donde te indiqué líneas más arriba.

Ahora F5 y Rezar

Al momento de iniciar en la aplicación de Windows 8.1 el servicio de Live nos pedirá autorización para utilizar los datos requeridos.

El ejemplo lo he probado con Javier Escobar, él me está ayudando a dar mantenimiento a algunas aplicaciones que tengo en la tienda y fue la primera victima de esta aplicación, desde ahora conversamos sobre los cambios que vamos hacer por este chat.




Como verás la aplicación al ser universal se ejecuta perfectamente en Windows 10 y en Windows Phone también se ejecuta igual y ni que hablar del servicio de notificaciones, funciona de maravilla.
El código fuente de este tutorial esta disponible en mi cuenta de GitHub.

NOTA: Si deseas hacer una versión privada de este tutorial y quieres utilizar repositorios privados de GitHub, puedes ver este vídeo de mi amigo Juan Carlos Ruiz.
https://juank.io/como-obtener-repositorios-git-privados-gratuitos/

Conclusión

Como viste en este tutorial se utilizó los servicios móviles de Azure, para poder hacer una chat simple con una autenticación en Microsoft Account, espero que con la colaboración de ustedes este chat pueda crecer y poder agregándole más características, como crear grupos, chats internos, el famoso “Visto” y demás cosas, estoy seguro de que se hará. Nos leemos pronto 

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Comentarios