SignalR: Mantener activa siempre la comunicación

En un anterior entrada describí SignalR. SignalR permite la comunicación fluida entre un navegador Web y un Servidor. En esta entrada vamos describir como proceder cuando se producen errores de conectividad entre el Navegador y el Servidor.

Introducción arquitectura de comunicación en SignalR

Cuando se produce un fallo de conectividad; SignalR intenta restablecer la comunicación en varias ocasiones (Reconexión). Si persiste el fallo; finalmente finaliza la comunicación (Desconexión). Por defecto se realizan 3 reintentos en 30 segundos. El número de reintentos y el tiempo de timeout es configurable (con las propiedades DisconnetTimeout and KeepAlive). SignalR dispone de eventos tanto en la parte cliente como en la servidor. Los eventos de reconexión se producen cuando se restaura la comunicación perdida y los eventos de desconexión cuando se da por finalizada la comunicación.

  • En la parte Servidor:
    • OnReconnected()
    • OnDisconnected()
  • En la parte Cliente:
    • $.connection.hub.reconnected
    • $.connection.hub.disconnected

En este articulo, se explica la más a fondo la arquitectura de comunicación de SignalR.

Problema

Hay ocasiones en que se produce una caída de conectividad durante un largo periodo de tiempo; por ejemplo:

  • Caída de la linea.
  • Reinicio de la Servidor o Servicio Web.
  • Parada programa del Servidor por mantenimiento/actualización.

Estas caídas de conectividad provocarán que se produzca la desconexión. La idea es restablecer la comunicación tan pronto vuelva a estar operativa la conectividad sin necesidad de recargar la pagina.

Solución

La manera para realizarlo es volver a iniciar una nueva conexión en el evento de desconexión. En nuestro caso a los 10 segundos de producirse la desconexión; se intentará restaurarla.

   $.connection.hub.start().done(function() { $("#status").text('Connected'); });
        $.connection.hub.disconnected(function() {
		$("#status").text('Disconnected');
        setTimeout(function() {
                $.connection.hub.start().done(function() {  $("#status").text('Connected'); });
            }, 10000);
        });
Publicado en SignalR | Etiquetado | Deja un comentario

Detectar navegador IE

Empezaremos el artículo no recomendandolo; usar la técnica de detectar el navegador para habilitar/deshabilitar funcionalidades es una mala practica. En su lugar es recomendable utilizar librerías que nos detectan las funcionalidades y no dependen del navegador. De esta manera nos aislamos de las mejoras y cambios que puedan surgir con nuevas versiones de los navegadores. En este caso recomendamos el uso de Modernizr.

Por ejemplo, el navegador soporta vídeo en formato h264

if (Modernizr.video.h264 == "") {
    // dosen't support h264
}

En alguna ocasión la librería no nos retorna información sobre una determinada funcionalidad. Por ejemplo si el navegador soporta Active X. A continuación se describen diferentes tácticas:

1.- Tags de Comentarios HTML

Internet Explorer hasta su versión 9 incorpora tags condicionales en los comentarios .

<!--[if !IE]><!-->
This text dosen't view on other Browers and Internet Explorer Browser IE10 or greater
<!--<![endif]-->

<!--[if IE]>
This text only view on Internet Explorer Browser IE9 and earlier
<![endif]-->

2.- Analizar el userAgent del object navigator del Navegador

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');  //IE10 and earlier
    var trident = ua.indexOf('Trident/'); //IE11
 if ((msie>0) || (trident>0))
     alert('Show on Internet Explorer');
 else 
     alert('Show on other Browser');

JQuery hasta la versión 1.9 tenia una llamada en su API para detectarlo Drecated en jquery 1.9 ($.browser.msie). Pero ya esta deprecada y no funciona para IE11.

3.- Detectar si soporta Active X (solo soportado por Internet Explorer)

        var isIE = "ActiveXObject" in window;    
        if (isIE)
           alert('Show on Internet Explorer');
        else
           alert('Show on other Browser');

En Servidor hay un método en .NET para determinar si el Active X esta soportado (Request.Browser.ActiveXControls) pero para IE11 no funciona.

Publicado en javascript, Uncategorized | Etiquetado | Deja un comentario

Proveedores de mapas estáticos

Existen diferentes proveedores que ofrecen una api para obtener mapas que podemos usar en nuestras aplicaciones; vamos a comentar cuatro de ellos:

Ejemplo de Uso:

A nivel básico disponemos de un asistente para generar generar urls de los diferentes proveedores (sin necesidad de entrar en las apis de los proveedores) ;-).

Google MapsGoogleMaps

Google Maps ofrece un servicio mediante en el cual realizando una petición HTTP nos retorna un mapa. Este servicio se describe Static Maps API V2.
El mapa obtenido como máximo es de 1280×1280 pixeles (resultado de multiplicar el tamaño por la escala). Hay una versión professional Google Maps For Business que permite obtener un mapa de 2048×2048 pixeles.

API scale=1 scale=2 scale=4
Free 640x640 640x640(returns 1280×1280 pixels) Not available.
Google Maps API for Business 2048x2048 1024x1024(returns 2048×2048 pixels) 512x512(returns 2048×2048 pixels)

Ejemplo de Uso:

En nuestro caso realizamos la llamada a la Api configurando los siguientes parámetros en el request de la Url:

  • center: latitud y logitud.
  • zoom: zoom de la Imagen.
  • size: tamaño de la imagen.
  • scale: escalado de la imagen.
  • maptype: tipo de mapa.
  • formato: formato de la imagen (por defecto png).

http://maps.googleapis.com/maps/api/staticmap?center=41.3833,2.1833&zoom=14&scale=2&size=640×640&sensor=false&maptype=satellite&format=jpg
Mapa Google

Bing Maps BingMaps

De la misma manera Microsoft también nos ofrece un servicio mediante en el cual realizando una petición HTTP nos retorna un mapa. Este servicio se describe Bing Maps REST Services Static Map. En este caso nos hemos de dar de alta en el servicio; ya que no admite peticiones anónimas. Posee mayores limitaciones de uso a nivel libre.
El mapa obtenido como máximo es de 900×834 pixeles.

Ejemplo de Uso:

En nuestro caso realizamos la llamada a la api configurando los siguientes parámetros de la Url:

  • maptype: tipo de mapa (en la url). Por ejemplo Aerial para vista satélite.
  • latitud, longitud: (en la url).
  • zoom: zoom de la imagen (en la url).
  • mapsize: tamaño de la imagen (parámetro request de la url).
  • fmt: formato de la imagen (parámetro request de la url).
  • key: clave para peticiones

http://dev.virtualearth.net/REST/V1/Imagery/Map/Aerial/41.3833,2.1833/14?mapSize=900,834&fmt=jpeg&key=Ajqteq7Vn6Sapasq31fUPf57YzRUhU1WiYoEmhCN7OkAJdhB2cTf-JBfmKaC9BaC
Mapa Bing

Nokia Maps NokiaMaps

Funciona igual que los servicios previos con una petición REST HTTP que nos retorna un mapa. Este servicio se describe en el siguiente documentoMap Image API Developer’s Guide. En este caso nos hemos de dar de alta en el servicio; ya que no admite peticiones anónimas. Hay disponible una licencia libre; con limitaciones de uso.
El mapa obtenido admite tamaños grandes (por ejemplo 2048×2024) y sin logo del proveedor de la API. El proveedor de imágenes no es el mismo que en las anteriores api; en algunos caso parece menos perfilado y no tan amplio.

Ejemplo de Uso:

En nuestro caso realizamos la llamada a la Api configurando los siguientes parámetros en el request de la Url:

  • c: latitud y logitud del centro del mapa.
  • z: zoom de la Imagen.
  • h: altura de la imagen.
  • w: anchura de la imagen.
  • t: tipo de mapa (1 para vista satélite).
  • nodot: no muestre punto en el centro del mapa

http://image.maps.cit.api.here.com/mia/1.6/mapview?app_id=DemoAppId01082013GAL&app_code=AJKnXv84fjrb0KIHawS0Tg&c=41.3833,2.1833&h=2048&w=2048&z=15&nodot&t=1
Mapa Nokia

OpentStreetMaps OpenStreetMaps

Solo dispone proveedores de mapas de carreteras; es decir no hay vista de terreno. Hay una red de servidores disponibles; pero no esta asegurada su continuidad.

Ejemplo de Uso:

En nuestro caso realizamos la llamada a la Api configurando los siguientes parámetros en el request de la Url:

  • center: latitud y logitud del centro del mapa.
  • zoom: zoom de la Imagen.
  • size: tamaño de la Imagen.

http://staticmap.openstreetmap.de/staticmap.php?center=41.3833,2.1833&zoom=14&size=1024×1024
OpenStreetMap

Publicado en Maps, Uncategorized | Etiquetado , , | Deja un comentario

Primera Aplicación Sharepoint en Provider-Hosted (III)

En el anterior entrada configuramos la aplicación para desarrollo. En esta entrada vamos a desplegar la aplicación en un entorno de producción.

7.- Generamos un nuevo registro de Aplicación

  • 1.- Acceder a http://[Sharepoint Host]/_layouts/15/appregnew.aspx
  • 2.- Generar Id y Secret
  • 3.- Indicar el Host. El host es donde desplegaremos la parte web de la aplicación: Servidor, Website de Azure,….

8.- Generamos el paquete con la App para Sharepoint.

  • 1.- En el proyecto App; editamos el fichero AppManifest.xml.
  • 2.- Poner el Id generado en el Atributo ClientId del Path
  • 3.- Poner en el elemento StartPage del Path Properties el host donde desplegaremos la parte web en lugar de ~remoteAppUrl
  • 8GenerarApp

  • 4.- Publicamos el proyecto App, esto nos generará un fichero de paquete .app

9.- Desplegamos la App en el Catalogo de Aplicaciones y en un Site de Sharepoint.

  • 1.- Acceder a http://[Sharepoint Host]/sites/Apps
  • 2.-Vamos Aplicaciones para Sharepoint
  • 3.-Subimos en esta lista de Aplicaciones el fichero de paquete .app generado en el punto anterior.
  • 4.- Navegamos al Site Contents/Contenidos del Sitio del Site donde queremos incorporar la aplicación.
  • 5.- Seleccionamos Add App/Agregar Aplicación.
  • 6.- Seleccionamos From Your Organization/De Su Organización y pulsamos en nuestra App.

10.- Publicamos la Web en Servidor Web de Producción.

  • 1.- Poner el Id generado en el valor del Setting ClientId. y poner el Secret generado en el valor del Setting ClientSecret.
  • 2.- Publicamos el proyecto Web en nuestro servidor de Producción.
Publicado en SharePoint | Etiquetado , | Deja un comentario

Primera Aplicación Sharepoint en Provider-Hosted (II)

En el anterior entrada creamos el entorno de pruebas y el proyecto de la App. En esta entrada vamos a configurar la aplicación para poderla integrarla con el entorno de pruebas de Sharepoint y poderla ejecutar en local.

3.- Registrar la App en el Sharepoint

  • 1.- Acceder a http://[Sharepoint Host]/_layouts/15/appregnew.aspx
  • 2.- Generar Id y Secret
  • 3.- Indicar el Host. Si no se indica puerto automáticamente coge el 443 (https). En nuestro caso selecciono el localhost:44310; que es mi puerto de https en mi servidor local de IIS.
  • 4.- Crear el Registro
  • 3cNewAppOnSharepoint

4.- Vincular el proyecto App en el Registro previo del Sharepoint

  • 1.- En el proyecto App; editamos el fichero AppManifest.xml.
  • 2.- Poner el Id generado en el Atributo ClientId del Path AppPrincipal/RemoteWebApplication.
    1 VincularRegistroApp

5.- Vincular el proyecto Web en el Registro previo del Sharepoint

  • 1.- En el proyecto Web; editamos el ficheroWeb.config.
  • 2.- Poner el Id generado en el valor del Setting ClientId.
  • 3.- Poner el Secret generado en el valor del Setting ClientSecret.
    1 VincularRegistroWeb

6.- Ejecución en Visual Studio

En la pagina Default.aspx añadimos el texto Hello World. Al ejecutar la solución con F5. Automáticamente se publica la App en nuestro entorno de pruebas y solicita la ejecución de la App. La App nos redirige automáticamente a nuestra Web en el Servidor local.
EjecuciónLocal
Podemos poner breakpoins y a depurar ;-)

Continua en la siguiente entrada Primera Aplicación Sharepoint en Provider-Hosted (III)

Publicado en SharePoint | Etiquetado , , | 2 comentarios

Primera Aplicación Sharepoint en Provider-Hosted (I)

Introducción

Vamos a realizar una App para Sharepoint 2013 o Online; en el modelo de Aplicación Provider-Hosted.

El objetivo es mostrar:

  • Como instalar/configurar App en Sharepoint.
  • Como instalar/configurar App Servidor Web.
  • Como depurar en entorno de pruebas.
  • Como deplollar en entorno de producción.

1.- Crear Entorno de Desarrollo en Sharepoint

Las Apps en Sharepoint se pueden publicar en:

  • Un entorno de pruebas para test/debug. En este caso se publica en un SiteCollection basado en la Plantilla de Desarrollador.
  • Un entorno de producción en Sharepoint. En este caso se publica en el Catálogo de Aplicaciones. Desde esta manera esta disponibles para todos nuestros Sites. Para añadir al Site; se debe seleccionarla desde las Apps disponibles en nuestro Catálogo de Aplicaciones.
  • En el Market. En esta entrada no entraemos en este tipo de publicación. ;-)
  • 1.- Crear el sitio de Desarrollador (entorno de pruebas).
    1NewSiteDevApp

2.- Crear Proyecto en Visual Studio 2013

  • 1.- Crear un proyecto de Tipo App for Sharepoint 2013.
    Si no lo tenemos disponible, debe instalar las Office Developer Tools.
    Create Project App Sharepoint
  • 2.- Completar asistente de creación. Introducimos la url del Entorno de desarrollo de Sharepoint (creado en el paso anterior) y seleccionamos Provider-Hosted.
    Asistente Nueva AppSharepoint
  • 3.- Siguiente. Podemos vincular la App de Sharepoint y Servidor Web mediante Certificado; no es nuestro caso.
    Paso 2 Asistente New App Sharepoint
  • En Visual Studio 2012 el asistente genera una App en Web Forms Application. Aunque podemos cambiarla a MVC Web Application. En Visual Studio 2013 el asistente nos permite seleccionar si la App es Web Forms Application o MVC Web Application.

Finalmente tenemos una solución con dos proyectos: Un proyecto Web Forms Application para nuestro Servidor Web y otro proyecto App para nuestro Sharepoint.

Continua en la siguiente entrada Primera Aplicación Sharepoint en Provider-Hosted (II)

Publicado en SharePoint, Visual Studio | Etiquetado , , | 1 comentario

Aplicaciones en Sharepoint

Alojamiento de Aplicaciones en Sharepoint

Alojamiento de Aplicaciones en Sharepoint

Sharepoint-Hosted

Sharepoint ofrece una página HTML con código; este código se ejecuta en el navegador del usuario.

  • Aislado en el propio Sharepoint.
  • Solo HTML y JSOM (JavaScript object model) sin acceso a base de datos. Hay que destacar que las llamadas JSOM son asíncronas.
  • Privilegios los del usuario.

AutoHosted

Sharepoint despliega automáticamente la aplicación sobre un Servicio de Windows Azure; el código se ejecuta en el servicio desplegado.

  • Windows Azure
  • Código CSOM (.NET client-side object model) ejecutado en entorno de desarrollo soportado por Windows Azure y SQL Azure. Generalemente C#.
  • OAuth 2 o Cross Domain Library.
  • Se despliega una instancia de la aplicación para cada añadido de la misma.

Provider-Hosted

Sharepoint se conecta un servidor Web que ofrece la aplicación como servicio externo.

  • En un servidor Web (incluye servicios Web que ofrece Azure).
  • Código CSOM. Cualquier entorno de desarrollo y base de datos.
  • OAuth o Cross Domain Library.
  • Permite un escalado puro en multitenant.
Publicado en SharePoint | Etiquetado | 1 comentario