Una de las novedades con la salida del SDK de Windows Live es el control de chat, un componente que utilizando el servicio de Windows Live ID y Windows Live Messenger permite tener la opcion de chat para implementarlo en un sitio web.
Un control bastante sencillo de implementar y de utilizar que permite a los usuarios que con su cuenta de windows live pueda acceder a una ventana de chat y al messenger en un solo sitio.
La implemetacion de este control es bastante sencilla y consta de 2 pasos.
1. Registrar sitio y obtener el Applicaition ID
Cada vez que se desarrolla utilizando los servicios de Windows Live hay que adquirir un Application ID encargado de la identificacion del sitio dentro de Live, para ello ir a http://live.azure.com e iniciamos sesion con una cuenta de Windows Live.
En este portal se pueden registrar hasta 20 aplicaciones difetenres que consuman los servicios. En la pagina de Summary seleccionar la opcion New Service ubicado en la parte superior derecha.
De esta forma indicamos el registro de una aplicacion dentro de Live, para ello seleccionar la opcion Live Sevices: Existing APIs.
El formulario de registro es bastante sencillo de llenar, simplemente colocarlo los siguientes datos:
Service Component Label: Nombre del sitio, para el control de chat este nombre no se va a ver relfejado en ninguna parte.
Srvice Component Description: Descripcion del sitio.
Domain: Pagina de Inicio donde esta la aplicacion, sin necesidad de colocar el http://.
Return Url: pagina donde va a estar ubicado el control de chat.
Para finalizar clic en Create y listo, posterior al registro, el sistema presenta el Application ID asignado al sitio, este valor se va a necesitar al momento de colocar el control en la pagina.
2. Colocar scripts, control de Chat en sitio y asignar Application ID
Una vez registrado el sitio en Windows Live, para agregar el control de chat a un sitio web hay que incluir 3 componentes
- Encabezado, en el tag htm de la pagina se coloca el alias wl para indicar que todos los controles q contenagan este dato estas sujetos a la definicion del javascrip definido alli. <html xmlns:wl="http://apis.live.net/js/2010">
- Hacer referencia al javascript encargado del proceso de autenticacion. <script src="http://js.live.net/4.0/loader.js"></script>
- Agregar el control de chat en cualquier parte del tag body de nuestra pagina. <wl:chat-frame event-name="<Nombre del Sitio>" client-id="<Application ID>"> En este ultimo paso en el campo <Application ID> se debe colocar el valor que Windows Live nos retorno al momento del registro.
A continuacion muestro un ejemplo de como es este proceso en una pagina HTML y en una de ASP.NET (ASPX)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wl="http://apis.live.net/js/2010">
<head>
<title>Titulo de la Pagina</title>
<script src="http://js.live.net/4.0/loader.js"></script>
</head>
<body>
<div>
<br />
<wl:chat-frame event-name="<Nombre del Sitio>" client-id="<Application ID>">
</wl:chat-frame>
</div>
</body>
</html>
ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chat.aspx.cs" Inherits="NFN.Chat" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wl="http://apis.live.net/js/2010">
<head id="Head1" runat="server">
<title>Titulo de la Pagina</title>
<script src="http://js.live.net/4.0/loader.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<wl:chat-frame event-name="<Nombre del Sitio>" client-id="<Application ID>">
</wl:chat-frame>
</div>
</form>
</body>
</html>
Como se puede ver el proceso es bastante sencillo y tanto para una pagina asp.net como html el proceso es identico.
Este control es visualmente personalizable, simplemente es agregar al tag del control alguna de las siguientes propiedades con los valores especificados
El uso de este control es bastante sencillo, para iniciar a chatear, debemos inciar sesion con nuestro Windows Live ID.
Hecho esto, Vamos a ver como en la parte superior del control no sola mente se activa el control de chat sino tambien los contactos del messenger, de esta manera vamos a poder tanto chatear como hablar por messenger de manea independiente pero desde el mismo control, a continuacion una serie de pantallazos de ejemplo para visualizar mas detalladamente.
Nuestro Framework .NET es un portal de entusiastas y expertos en tecnologias de desarrollo Microsoft al cual pertenezo, tuve la oportunidad y orgullo de implementar este control de chat un este sitio, para cualquier consulta con los expertos los invito a visitar el sitio http://nuestroframework.net/
Y visitar el chat: http://nuestroframework.net/Articles/NFNChat.aspx
Para mayor info recomiendo ir al portal de desarrollo de Windows Live: http://dev.live.com
Info de control de Chat: http://msdn.microsoft.com/en-us/library/ff750122.aspx
La invitacion es a aprovechar estos recursos, si bien messenger es una herramienta que hoy en dia se ha convertido en una necesidad para muchos, vale la pena aprovecharla no solo para comunicarnos con nuestros contactos sino tambien de compartir con quienes deseemos.
Gerardo Ramos – Microsoft Student Partner
.png)
.png)
.jpg)
.jpg)
.jpg)
.jpg)
.png)
.png)
