[Evento] Christmas Windows Phone Sessions

Introducción

El pasado octubre nos juntamos Josue Yeray, Rafa Serna, Alejandro Campos, Roberto Luis Bisbé y un servidor para organizar un gran evento sobre Windows Phone en Madrid llamado Windows Phone Week Spain.

Fue un día intenso con muchas charlas técnicas tratando temas como
Azure Mobile Services, Windows Phone App Studio, MVVM y buenas
prácticas, análisis de rendimiento, pasar apps de WP7 a WP8, Nokia
Imaging SDK y mucho más donde. Además tuvimos un divertido concurso
final con regalos, muchas charlas interesantes, devirtualización de
muchos, etc. En definitiva, un gran día dedicado a Windows Phone con una
enorme aceptación. Tanta que, debido a personas que no pudieron
asistir, a los límites del aforo y por petición popular, estas navidades
vamos a realizar una serie de webcasts con todo lo que contamos en la
Windows Phone Week Spain. Pero como no podíamos quedarnos quietos, hemos
añadido webcast nuevos con más temática que a buen seguro serán de tu
interés.

Christmas Windows Phone Sessions

Asi nace las Christmas Windows Phone Session,  12 webcasts cargados de información técnica tratando múltiples temas relacionados con Windows Phone con los ponentes del Windows Phone Week como encargados además contando con la colaboración de Santiago Porras.

Las sesiones

Las sesiones serán las siguientes:

  • Introducción al diseño de Apps para Windows Phone

Lunes 2 de diciembre de 6pm a 7pm, por Santiago Porras

¿Aún no conoces Modern UI y sus
reglas? Descubre la guía de diseño Modern UI para Windows Phone, las
bases sobre las que se ha desarrollado este revolucionario estilo de
diseño y cuáles son las reglas que debemos seguir para diseñar nuestras
aplicaciones.

Regístrate

  • Desde Windows Phone 7 a Windows Phone 8

Martes 3 de diciembre de 6pm a 7pm, por Roberto Luis Bisbé

Migrar aplicaciones de Windows Phone 7
a Windows Phone 8 es algo relativamente sencillo, que se puede
convertir en una travesía por el desierto en función de la complejidad
de
nuestra app, En esta sesión veremos algunos trucos a tener en cuenta al
migrar nuestras apps, y las opciones que tenemos para mantener
compatibilidad entre Windows Phone 8 y 7.5.

Regístrate

  • Desarrollando con MVVM

Miércoles 4 de diciembre de 6pm a 7pm, por Josue Yeray

Aprende a escribir mejor código, más
mantenible y extensible, usando el patron MVVM, IoC y servicios. Veremos
los conceptos necesarios para escribir buen código que nos permita
crear mejores apps.

Regístrate

  • Windows Phone 8 Update 3. Cambios para los desarrolladores

Jueves 5 de diciembre de 6pm a 7pm, por Javier Suarez Ruíz

A pesar de no contar con nueva versión
del SDK sí que contamos con interesantes novedades en el último Update
del sistema. En esta sesión aprenderemos todas esas novedades a nivel de
desarrollo como por ejemplo, todos los cambios necesarios a realizar
para adaptar nuestras aplicaciones actuales a las nuevas pantallas a
1080p que están a punto de llegar
.
Regístrate

  • Optimiza tus apps de Windows Phone 8

Lunes 9 de diciembre de 6pm a 7pm, por Alejandro Campos Magencio

¿Desarrollas o tienes pensado
desarrollar apps para Windows Phone con .NET y XAML? Entonces
necesitarás saber qué puede afectar al rendimiento de tu app, cómo
mejorarlo para que su comportamiento sea el más óptimo posible, y qué
herramientas tienes a tu disposición. Y en esta sesión te lo contamos
con ejemplos prácticos.

Regístrate

  • ¡¡¡NFC a tope!!!

Martes 10 de diciembre de 6pm a 7pm, por Rafa Serna

¿Sabes qué es NFC? ¿dónde y cómo
podemos usarlo? Estas y otras preguntas más intentaremos resolverlas en
este webcast, en donde veremos cómo poder interactuar entre nuestras
aplicaciones
Windows Phone con la tecnología NFC.

Regístrate

  • Descubriendo Windows Phone App Studio

Jueves 12 de diciembre de 6pm a 7pm, por Javier Suarez Ruíz

¿Conoces Windows Phone App Studio?,
¿aún no? En esta sesión conoceremos todas las posibilidades de esta
nueva herramienta web gratuita destinada a la creación de Aplicaciones
para Windows Phone 8.

Regístrate

  • Efectos alucinantes con Nokia Imaging SDK

Viernes 13 de diciembre de 6pm a 7pm, por Josue Yeray

¿Quieres hacer una aplicación que
trabaje con imágenes? ¿Te parecen alucinantes los filtros de Instagram?
En esta sesión veremos como implementar en nuestras aplicaciones filtros
alucinantes con la nueva librería de imágenes de Nokia!

Regístrate

  • Diseño de Apps exclusivas para Windows Phone

Lunes 16 de diciembre de 6pm a 7pm, por Santiago Porras

¿Quieres hacer aplicaciones más
atractivas para Windows Phone con interfaces con un toque exclusivo como
la App de Facebook? Descubre tips para diseñar Apps para Windows
Phone creando interfaces que las hagan exclusivas y fascinantes y que
consigan que los usuarios descubran nuevas experiencias con sus
dispositivos.

Regístrate

  • Azure Mobile Services, desde las trincheras

Martes 17 de diciembre de 6pm a 7pm, por Rafa Serna

La pata de servicios
móviles de Windows Azure es muy extensa y golosa. Con esta charla
intentaremos ver que nos aporta Mobile Services y como podemos de una
forma fácil, integrar en nuestra aplicación de Windows Phone un completo
y extenso BackEnd en la nube. Autenticación, lógica, servicio de datos y
demás complementos, casi a un click de distancia.

Regístrate

  • Cimbalino Toolkit y Multilingual Toolkit

Miércoles 18 de diciembre de 6pm a 7pm, por Josue Yeray

Cuando estamos desarrollando nuestras
aplicaciones, no necesitamos reinventar la rueda. Existen ciertos
frameworks que pueden ayudarnos en tareas comunes, simplificar el
desarrollo y ayudarnos a realizar cosas complejas. Cimbalino Toolkit,
creado por Pedro Lamas de Nokia, nos ayudará con multitud de servicios,
behaviors y controles ya listos para trabajar. Multilingual App Toolkit
nos ayudará a
soportar multiples idiomas en nuestra aplicación.

Regístrate

  • Distribución empresarial en Windows Phone 8

Jueves 19 de diciembre de 6pm a 7pm, por Javier Suarez Ruíz

En esta sesión aprenderemos todo lo
necesario para distribuir Aplicaciones Windows Phone en la empresa sin
necesidad de pasar por la Store. Aprenderemos como obtener un
certificado empresarial, como firmar aplicaciones, como distribuirla e
incluso aprenderemos el concepto de Company Hub creando uno paso a paso.

Regístrate

NOTA: Todas las sesiones serán grabadas para poder
visualizarlas posteriormente aunque no dudéis en conectar online para
aprovechar y poder realizar preguntas al ponente de turno.

Más información

[Tips and Tricks] Windows Phone. Detener la sintetización de voz

Introducción

Una de las novedades más interesantes del SDK de Windows Phone 8 son las Speech APIs (Text to Speech, Speech to Text, Comandos de voz, etc.). Nos centrarnos en TTS (Text To Speech) o lo que es lo mismo sintetizar un sonido a partir de un texto escrito.

El problema

Ya en un artículo anterior
vimos como utilizar esta API. Sin embargo, ene se artículo no veíamos
un detalle muy importante. Una vez iniciada la slintetización de un
texto, ¿cómo lo paramos?. A esa sencilla pregunta responderemos en este
Tips and Tricks.

La solución

Vamos a crear una aplicación de ejemplo:

Aplicación de Windows Phone


Lo primero que debemos hacer antes de continuar es aádir la capacidad de Reconocimiento de voz (ID_CAP_SPEECH_RECOGNITION).
Para ello dentro de carpeta Properties encontramos el archivos
WMAppManifiest.xml. Lo abrimos y nos dirigimos a la pestaña Capacidades:

ID_CAP_SPEECH_RECOGNITION

Creamos
la interfaz. Añadiremos la interfaz más simple posible para nuestro
objetivo, un par de botones. Uno para comenzar a sintetizar texto en voz
y el segundo para detenerlo:

<StackPanel>
<Button Content="Leer" Click="Leer_Click"/>
<Button Content="Parar de leer" Click="Parar_Click"/>
</StackPanel>

 

 

Añadimos los eventos en el code-behind:

private void Leer_Click(object sender, RoutedEventArgs e)
{
 
}
 
private void Parar_Click(object sender, RoutedEventArgs e)
{
 
}
Nos centramos en la lógica del primer botón. Para cancelar la síntesis
de voz tenemos que asignar el valor devuelto por el método SpeakTextAsync del objeto SpeechSynthesizer a una variable de tipo IAsyncAction
para posteriormente llamar al método Cancel del IAsyncAction para
cancelar la síntesis de voz. Para ello, creamos una variable global de
tipo IAsyncAction:
private IAsyncAction _task;
Y en la lógica del clic del botón:
var synth = new SpeechSynthesizer();
 
var voices = InstalledVoices.All.Where(v => v.Language == "es-ES").OrderByDescending(v => v.Gender);
 
synth.SetVoice(voices.FirstOrDefault(v => v.Gender == VoiceGender.Male));
 
_task = synth.SpeakTextAsync("Esto es una prueba. Realmente dura mucho más de lo necesario. Si quieres puedes parar pulsando el botón Parar Voz");

Instanciamos un objeto de tipo SpeechSynthesizer. Con LINQ seleccionamos el conjunto de sintetizadores españoles de la clase InstalledVoices. Seleccionamos el genéro masculino por ejemplo. Establecemos el sintetizador elegido utilizando el método SetVoice. Por último, llamamos al método SpeakTextAsync que recibirá como parámetro el texto a sintetizar en voz.

En el clic del segundo botón:

_task.Cancel();

Fácil, ¿verdad?

Podéis descargar el ejemplo desde el siguiente enlace:

Más información

[Tips and Tricks] Windows Phone. Optimiza tus Apps a pantallas grandes

Novedades de la actualización Update 3

Desde hace unas semanas ya tenemos disponible la actualización Update 3 (también conocida previamente como GDR3). Entre el listado de mejoras incluidas contamos con:

  • Más grande. Se suprime el límite de tamaño en
    resolución establecido permitiendo la llegada en el futuro de teléfonos
    con pantallas de 5 o 6 pulgadas con resolución de 1080p (1080 × 1920).
  • Más potencia. La actualización permite también utilizar los procesadores de cuatro núcleos de Qualcomm.
  • Mayor personalización. La actualización permite asignar tonos diferentes a diferentes Apps como mensajes, correos, recordatorios, alarmas, etc.
  • Mayor control. Podemos controlar que Apps se ejecutan en Background y ahora además podemos cerrarlas.
  • Más accesible. Se realiza un esfuerzo por facilitar
    el uso del dispositivo a personas invidentes. Se permite la gestión de
    llamadas, correos, contactos, uso de Skype o Lync, etc.

Nuevos dispositivos llegan…

El pasado 22 de Octubre Nokia presentaba en Abu Dhabi su primera flamante tablet, el Lumia 2520. También desvelaba dos nuevos smartphones de pantalla grande los Lumia 1520 y 1320:

Con los dispositivos recién anunciados por Nokia se aumenta el rango
de posibilidades en resoluciones y aspect ratio. El Nokia Lumia 1520
cuenta con una resolución de 1080x1920px y el Nokia Lumia 1320 cuenta
con una resolución de 720x1280px, ambos con una pantalla de 6 pulgadas y
16:9 de aspect ratio.

Esto abre un nuevo debate a los desarrolladores, ¿cómo preparo mis
Apps para sacar el máximo provecho en este tipo de dispositivos?

Impacto en Apps existentes

Aplicaciones Windows Phone 8

En el archivo de manifiesto vienen incluidas las resoluciones que soportará nuestra Aplicación:

<ScreenResolutions>
     <ScreenResolution Name="ID_RESOLUTION_WVGA"/>
     <ScreenResolution Name="ID_RESOLUTION_WXGA"/>
     <ScreenResolution Name="ID_RESOLUTION_HD720P"/>
</ScreenResolutions>
La resolución 1080p no se distingue de los 720p, por lo tanto, si nuestra Aplicación soporta 720p (ID_RESOLUTION_HD720P) funcionará en dispositivos 1080p.

NOTA: Si tu Aplicación Windows Phone 8 no soporta 720p tampoco estará disponible para dispositivos 1020p.

Aplicaciones Windows Phone 7

Las Aplicaciones Windows Phone 7 funcionaran sin problemas en
dispositivos con la actualización Update 3 y con un aspect ratio de
16:9. Sin embargo, y dado que estas Aplicaciones se crearon con un
aspect ratio de 15:9, no se reescalaran correctamente dejando una banda
negra en la parte superior de la pantalla.

Optimizando Apps a pantallas grandes

Como ya hemos comentado, contamos con una nueva resolución. Sin duda,
para poder ofrecer a nuestros usuarios la mejor experiencia posible en
cualquiera de las resoluciones disponibles, necesitamos identificar cada
una de ellas, la nueva resolución de 1080p incluida:

Sin embargo, entre las resoluciones 720p y 1080p no podemos encontrar
diferencias utilizando la propiedad App.Current.Host.Content.ScaleFactor o Application.Current.Host.Content.ActualHeight ya que en ambas devuelven los mismos resultados, 150 y 853 respectivamente.

¿Cómo diferenciar entonces entre un dispositivo 720p y otro 1080p?

Microsoft nos facilita una nueva clase DeviceExtendedProperties que nos facilita información relacionada con la resolución. Las nuevas propiedades son:

  • PhysicalScreenResolution: Variable de tipo Size, nos devuelve el ancho y alto de la pantalla en pixeles.
  • RawDpiX: Variable de tipo double, devuelve los DPI del horizontal de la pantalla.
  • RawDpiY: Variable de tipo double, devuelve los DPI del vertical de la pantalla.

Podremos detectar si estamos ante un dispositivo 1080p de la siguiente forma:

static private double _screenSize = -1.0f;
static private double _screenDpiX = 0.0f;
static private double _screenDpiY = 0.0f;
static private Size _resolution;
 
try
{
     _screenDpiX = (double)DeviceExtendedProperties.GetValue("RawDpiX");
     _screenDpiY = (double)DeviceExtendedProperties.GetValue(";RawDpiY");
     _resolution = (Size)DeviceExtendedProperties.GetValue("PhysicalScreenResolution");
 
     _screenSize = Math.Sqrt(Math.Pow(_resolution.Width / _screenDpiX, 2) +
                   Math.Pow(_resolution.Height / _screenDpiY, 2));
}
catch (Exception e)
{
     _screenSize = 0;
}
 
return (_screenSize >= 6.0f);

NOTA: Gracias a las nuevas propiedades vistas anteriormente podemos calcular el tamaño en pulgadas de la pantalla. Podéis ajustar el valor. De momento no existen dispositivos con pantallas de 5″ aunque podríamos considerar un Phablet a un dispositivo de 5″.

Detectado cuando estamos ante las nuevas pantallas de 6″ de los
nuevos dispositivos que llegarán como el Nokia Lumia 1520 o el Nokia
Lumia 1320 nos permite adaptar dinamicamente el layout de nuestra
Aplicación para aprovechar de la mejor manera posible cada dispositivo.

¿Cómo?

Bien, como solemos hacer, vamos a crear una Aplicación de ejemplo para ello:

Vamos a crear un listado tipo album que
adaptaremos segun el tipo de resolución. En dispositivos WVGA y WXGA
mostraremos dos columnas mientras que en dispositivos 720p y 1020p
mostraremos una columna más de una forma similar a como el propio
sistema muestra una columna más de tiles.

Comenzamos centrándonos en la interfaz de la Aplicación, añadimos el listado donde mostrar todas las fotos del album:

<phone:LongListSelector>
</phone:LongListSelector>
Definimos el template de cada elemento del listado:
<DataTemplate>
     <Grid Margin="10, 5">
     <Grid.RowDefinitions>
          <RowDefinition Height="*" />
          <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Image Grid.Row="0" Source="{Binding Image}" Style="{StaticResource GridImage}" />
     <TextBlock Grid.Row="1" Margin="0" Text="{Binding Title}" />
</Grid>
</DataTemplate>

Necesitamos datos para poder probar… vamos a darle solución.
Crearemos una viewmodel para nuestra vista donde obtendremos un listado
de elementos.

Antes de crear la viewmodel, definiremos el modelo, cada elemento del album:

public class Item
{
     public string Title { get; set; }
     public string Image { get; set; }
}
A continuación, en nuestro viewmodel crearemos una colección de elementos:
private ObservableCollection<Item> _items;
 
public ObservableCollection<Item> Items
{
     get
     {
          return _items;
     }
}
Creamos un método LoadData donde se creará un listado de datos que para
este ejemplo será el listado de juegos de la inminente Xbox One:
private void LoadData()
{
_items = new ObservableCollection<Item>
{
new Item
{
     Title = "Forza Motorsport 5",
},
new Item
{
     Title = "Ryse: Son of Rome",
},
new Item
{
     Title = "Kinect Sports Rivals",
},
new Item
{
     Title = "Dead Rising 3",
},
new Item
{
     Title = "Halo para Xbox One",
},
new Item
{
     Title = "Sunset Overdrive",
},
new Item
{
     Title = "Quantum Break",
},
new Item
{
     Title = "Killer Instinct",
},
new Item
{
     Title = "Project: Spark",
},
new Item
{
     Title = "Zoo Tycoon",
},
new Item
{
     Title = "Titanfall",
},
new Item
{
     Title = "Call of Duty: Ghosts",
}
};
Cargamos los datos desde el constructor:
public MainViewModel()
{
     LoadData();
}

Creamos un estilo por defecto que se utilizará en nuestra Aplicación. En
este archivo de recursos crearemos los estilos a usar por defecto, en
nuestro ejemplo, el estilo por defecto del listado:

<Style x:Key="ListStyle" TargetType="phone:LongListSelector">
     <Setter Property="GridCellSize" Value="140, 140" />
</Style>
Añadimos el archivo de recursos en nuestro App.xaml:
<ResourceDictionary>
     <ResourceDictionary.MergedDictionaries>
          <ResourceDictionary Source="Themes/DefaultStyles.xaml" />
     </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Asignamos el estilo correspondiente al listado:
Style="{StaticResource ListStyle}"
Todo listo!. Si ejecutamos nuestra Aplicación obtendremos el siguiente resultado:

Pinta bien, aunque… podemos mejorar la experiencia de uso segun el dispositivo!

Crearemos otro archivo de recursos destinado a sobrescribir el
utilizado por defecto en dispositivos con pantallas grandes. En este
archivo de recursos definimos el estilo a usar en nuestra lista album:

<Style x:Key="ListStyle" TargetType="phone:LongListSelector">
     <Setter Property="GridCellSize" Value="140, 140" />
</Style>
Nos crearemos un helper que utilizaremos para detectar si estamos ante
un dispositivo 1080p (tal y como vimos previamente) para cargar
dinámicamente el archivo de recursos destinado a pantallas grandes y
sobrescribir el layout:
public static void Set1080PTheme()
{
     if (ResolutionHelper.Is1080P)
     {
         var the1080PTheme = new ResourceDictionary
         {
             Source = new Uri("/EjemploResolucion;component/Themes/HDStyles.xaml", UriKind.RelativeOrAbsolute)
         };
 
         Application.Current.Resources.MergedDictionaries.Add(the1080PTheme);
     }
}
Lo llamaremos al inicio de nuestra Aplicación en el App.xaml.cs:
ThemeSelector.Set1080PTheme();
Y el resultado es el siguiente:

Podéis descargar el ejemplo realizado en el siguiente enlace:

NOTA: Es importante
recordar que con el Update 3 no hemos recibido un nuevo SDK. Tendremos
emulador de 1080p proximamente pero por ahora probaremos usando los
emuladores actuales, en concreto, el emulador 720p. Nokia pondrá en su
servicio Remote Device Access dispositivos 1080p a disposición de los desarrolladores.

Otros detalles

Tenemos otro listado de puntos importantes en los cuales centrar
nuestra atención con el objetivo de preparar la Aplicación a cualquier
resolución:

  • SplashScreen: Para poder utilizar una SplashScreen
    en dispositivos 1020p debemos utilizar una imagen llamada
    SplashScreenImage.Screen-720p.jpg. Para que se visualice correctamente
    la imagen debe ser de 720x1280px. La imagen se escalara en dispositivos
    1080p para ocupar la pantalla completa. Si queremos evitar este escalado
    debemos utilizar una imagen de 1080x920px. En este caso, en 1080p no se
    realizaría ningun escalado pero si se reduciría en dispositivos 720p.
  • Uso de imágenes a mayor resolución. Es recomendable
    utilizar recursos preparados para 1080p y dejar al sistema escalar la
    imagen a resoluciones menores como 720p en caso necesario.
  • Mayor uso de memoria. Con una pantalla mayor y
    mejor resolución como hemos visto se tiende a utilizar recursos de mayor
    calidad, lo que provoca también un mayor consumo de memoria. Recordar
    que podemos solicitar un mayor consumo de memoria utilizando la
    etiqueta ID_FUNCCAP_EXTEND_MEM en el archivo de manifiesto. Más información en el siguiente enlace.

Más Información

[Evento CartujaDotNet] Tips and Tricks de Resharper + Conociendo WebStorm

El evento

En esta ocasión tendremos un evento doble. Contaremos con dos interesantes charlas.

Como
desarrolladores debemos esforzarnos no solo por escribir código que
resuelva la problemática planteada, sino escribir código de calidad y
añadir test  al mismo entre otras tareas. ¿Y si contásemos con ayuda?.
En la primera de las charlas se hablará de Resharper,
herramienta que entre otras características resalta los errores de toda
la solución al vuelo, nos facilita técnicas avanzadas de
refactorización, proporciona herramientas de pruebas unitarias,
funciones de búsqueda y navegación, formateado o limpieza de código para
C#, VB.NET, ASP.NET, XML y XAML. Si no conoces la herramienta no te
arrepentirás de acercarte al evento, y si la conoces, seguro que te
sorprenderás de conocer ciertos trucos y características de la herramienta que probablemente no conocías.

En la segunda charla hablaremos de WebStorm,
IDE para JavaScript que facilita el desarrollo. Para cada objeto
muestra sus posibles métodos y propiedades. También tiene un editor HTML
que muestra el CSS asociado a cada etiqueta de la página que estamos
editando.

Fecha

El evento tendrá lugar el próximo Jueves, 21 de Noviembre de 18:30h a 21:00h. Cada charla tendrá una duración de 1 hora con descanso intermedio.

Lugar

Tendrá lugar en el Cloud Pointing de Sevilla situado en el Parque Empresarial Nuevo Torneo. Tenéis la información exacta del lugar a continuación:

c Biología, 12, Edificio Vilamar 2, 3ª Planta
Parque Empresarial Nuevo Torneo
41015 Sevilla

Ponente

Contaremos con un ponente de lujo, Hadi Hariri. Hadi es consultor y desarrollador, MVP de
C# durante los últimos años. Sus mayores interes recaen en la
arquitectura de software y el desarrollo web. Autor de libros y
colaborador frecuente en múltiples publicaciones técnicas, Hadi lleva
dando charlas técnicas a nivel internacional durante más de una década.
También lleva adelante la comunidad Málaga. NET User Group.

¿Te lo vas a perder?

Más información

[Windows Phone] ASP.net SignalR, mundo de posibilidades!

Introducción

La evolución en el mundo de las Aplicaciones es constante y rápido y
los usuarios cada vez requieren funcionalidades más exigentes. Muchas de
las Applicaciones destacadas en la tienda hacen un correcto uso de
respuesta inmediata, famosos chats, famosos juegos donde los usuarios
dibujan en tiempo real, finanzas, etc. ¿Como realizar este tipo de
Aplicaciones?. Si estas interesado sigue leyendo porque en este artículo
aprenderemos como crear Aplicaciones en tiempo real para Windows Phone
utilizando SignalR.

¿SignalR?

SignalR es una biblioteca Open Source (disponible en GitHub) perteneciente a la familia ASP.NET destinada a la creación de aplicaciones que respondan en tiempo real.
Si alguna vez habéis trabajado con conexiones persistentes conceptos
como “Long Polling” o “Web Sockets” os serán familiares. Estos conceptos
se utilizan en conexiones persistentes que permiten una interacción
continua por parte de clientes con el servidor. No entraremos a analizar
los problemas concecuentes en los conceptos anteriores ya que no es el
objetivo del artículo, lo que si vamos a destacar es que SignalR nos
añade una capa de abstracción que negocia automáticamente los
transportes a autilizar e irá haciendo “fallback” hasta encontrar una
capa que se pueda usar. Automáticamente verificará si se soporta “Web
Sockets”, en caso contrario utilizará “Server Sent Events”, y asi hasta
llegar al “Long Polling” como última alternativa.

NOTA: En este artículo utilizaremos la versión 2.0
para crear nuestras Aplicaciones. Si queréis ver que cambios hay entre
SignalR 1.x y la versión 2.0 podéis echarle un vistazo al siguiente enlace.

Manos a la obra!

Vamos a comenzar creando una simple web que utilizará el cliente jQuery de SignalR donde los usuarios conectados entrarán a un chat donde poder comunicarse entre ellos.

Para ello:

  1. Crearemos un proyecto web.
  2. Añadiremos las librerías de SignalR haciendo uso de NuGet.
  3. Crearemos una clase OWIN para ayudarnos a configurar el arranque de la Aplicación.
  4. Usaremos las librería jQuery de SignalR en la web para enviar mensajes y mostrar los mensajes recibidos desde el Hub.

Comenzamos por el primer paso, vamos a crear un proyecto Visual Studio utilizando la plantilla “ASP.NET Empty Web Application”:

Procedemos a instalar las librerías de SignalR. Para ello utilizaremos NuGet y tenemos dos opciones:

  • Opción A: Hacemos clic drecho sobre las referencias del proyecto,
    elegimos gestionar paquetes NuGet, buscamos SignalR y elegimos el
    paquete deseado pulsando instalar:

  • Opción B: Abrimos la consola de NuGet, Package Manager Console (Tools | Library Package Manager | Package Manager Console) y ejecutamos el siguiente comando:

install-package Microsoft.AspNet.SignalR

Tras la instalación podemos comprobar que contamos con nuevas
referencias en el proyecto además de nuevos scripts dentro de la carpeta
Scripts.

Añadimos una nueva clase a nuestro proyecto, la llamaremos ChatHub:

public class ChatHub : Hub
{
     public void EnviarMensaje(string mensaje)
     {
          Clients.All.Enviar(mensaje);
     }
}

Analicemos que hemos incluido en esas cortas líneas. De entrada, la clase deriva de la clase Microsoft.AspNet.SignalR.Hub. La clase Hub nos aporta un RPC de alto nivel sobre una conexión persistente. Microsoft.AspNet.SignalR.Hub.Clients
es un objetivo de tipo dynamic que utilizaremos para relacionar la
parte del cliente con la del servidor. La clase basicamente permite a la
parte cliente, por ejemplo desde jQuery, acceder a sus métodos.

Por lo tanto:

  • Declaramos métodos públicos en el hub para que desde la parte cliente se pueda acceder a ellos.
  • Usamos un objetivo dynamic llamado Clients para acceder a los clientes conectados al Hub.
  • Llamamos a una función en el cliente para actualizar la información (en nuestro ejemplo esa función es Enviar).

Continuamos, añadimos otra clase llamada Startup:

public class Startup
{
     public void Configuration(IAppBuilder app)
     {
          // Any connection or hub wire up and configuration should go here
          app.MapSignalR();
     }
}
Añadimos la página HTML (Add | HTML Page). En el código
añadido añadiremos el código necesario para crear el chat. De entrada
en el Header dela página incluiremos los scripts necesarios:
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="/Scripts/jquery.signalR-2.0.0.min.js"></script>
<script src="/signalr/hubs"></script>
Dentro del Body añadimos:
<h1>SignalR Chat </h1>
<p>
<label for="Mensaje">Mensaje:</label>
<input type="text" id="Mensaje" />
</p>
<p>
<input type="button" id="Enviar" value="Enviar Mensaje" />
</p>
<ul id="Mensajes">
Simple. Una caja de texto donde permitir al usuario escribir su mensaje,
un botón para enviarlo y un listado donde ir mostrando todos los
mensajes. Por último, añadimos el siguiente script:
<script type="text/javascript">
$(function () {
var chat = $.connection.chatHub;
chat.client.enviar = function (mensaje) {
$('#Mensajes').append('<li>' + mensaje + '</li>');
};
$.connection.hub.start().done(function () {
$("#Enviar").click(function () {
chat.server.enviarMensaje($('#Mensaje').val());
$('#Mensaje').val("");
});
});
});
</script>
Analicemos detenidamente el código añadido en el script. El objetivo del
mismo es comunicarse con el Hub creado. Creamos un proxy del hub
utilizando:
$.connection.yourHubClass
E inicializamos el hub usando:
$.connection.hub.start()
Listo!. Pulsamos F5 y ejecutamos el proyecto en modo debug en el
navegador. Copiamos la URL y abrimos más instancias del navegador u
otros navegadores. Para probar el resultado bastará con enviar mensajes
desde cada navegador y ver como el resultado aparece en cada uno de
ellos. Impresionante, ¿cierto?

La Aplicación Windows Phone

Ya hemos visto la potencia de SignalR y posiblemente a estas alturas
muchas ideas estarán rondando vuestra cabeza. Sería fantástico poder
utilizar la tecnología en Aplicaciones móviles…

Se puede!. Hay librerías para trabajar con SignalR para:

  • jQuery (ya la hemos probado)
  • .NET 4.0/4.5
  • Silverlight 5
  • Windows Store Apps
  • Windows Phone
  • Portable Class Library
  • MonoTouch
  • MonoDroid

Además el equipo de SignalR se encuentra trabajando para que en un futuro se tenga también librerías para:

  • IOS (nativa)
  • Java
  • C++

Vamos a crear una aplicación Windows Phone donde utilizaremos las
librerías SignalR para Windows Phone y analizar todas las posibilidades:

En este ejemplo para simplificar al máximo el proceso y lograr
concentrar toda la atención en SignalR vamos a seleccionar un proyecto
de tipo Windows Phone Application.

Comenzamos añadiendo las librerías SignalR cliente para Windows
Phone. Al igual que hicimos previamente con la parte web, utilizaremos
NuGet para instalar las librerías:

Tras instalar las librerías vamos a comenzar a crear nuestra Aplicación Chat. Comenzamos por la interfaz:

<StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
     <ScrollViewer Height="450">
          <TextBlock Name="chatDialog" Width="320" Padding="5"
          Foreground="{StaticResource PhoneAccentBrsh}" FontSize="36"/>
     </ScrollViewer>
     <StackPanel Orientation="Horizontal">
          <TextBox Name="chatTextbox" MaxLength="20" Width="350" HorizontalAlignment="Center"/>
          <Button Content="Enviar"/>
     </StackPanel>
</StackPanel>
Añadimos un texto (control TextBlock) donde iremos añadiendo los
mensajes enviados y recibidos del chat además de por supuesto una caja
de texto (control TextBox) donde escribir los mensajes y un botón para
enviarlos.
IHubProxy _chat;
HubConnection _hubConnection;
En el evento OnNavigatedTo, evento que se ejecutará siempre que una
página pasa a ser la página activa (se entra en la página) iniciamos el HubConnection con la ruta hacia nuestro servidor.  Una vez creado el Proxy Hub, usamos la síntaxis HubProxy.On<T>
para registrar un evento del lado del cliente (que el servidor podrá
llamar). En nuestro caso el evento será Message que añadirá a un
TextBlock dela interfaz el mensaje recibido:
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
     base.OnNavigatedTo(e);
 
     // Conectamos con el servicio:
     _hubConnection = new HubConnection("http://localhost:12345/");
 
     // Creamos un proxy con el servicio chat:
     _chat = _hubConnection.CreateHubProxy("ChatHub");
 
     // Cuando recibamos un mensaje, los mostraremos:
     _chat.On<string>("Message", message => Deployment.Current.Dispatcher.BeginInvoke(() =>
     {
          chatDialog.Text += "n" + message;
     }));
 
     // Inicio de la conexión:
     await _hubConnection.Start();
}
El clic de botón utilizará el Hub Proxy creado anteriormente para
incovar métodos del servidor. El primer parámetro de la función Invoke
es el nombre del método (en el servido)r y a continuación tenemos la
lista de los parámetros aceptados por el servidor:

Todo listo!. Pulsamos F5 y ejecutamos la aplicación en el emulador.
Tras ejecutarse la aplicación y esperar unos leves segundos (tiempo que
tardará el programa en llamar al servicio) y…

Error!. No podemos conectar con nuestro servicio.

Oops!, ¿que ocurre?

Ya sabemos porque. El emulador de Windows Phone 8 es una máquina
virtual en Hyper-V y la red de la misma es distinta a la de la máquina
de desarrollo.

Para resolver el problema causado por la dirección localhost debemos
reconfigurar el servicio web e IIS Express para aceptar conexiones de
otros dispositivos. Estos dispositivos conectarán con el servicio
utilizando la IP de la máquina de desarrollo.

Ya hemos mencionado que vamos a utilizar la IP de la máquina de
desarrollo. Abre el símbolo del sistema en la máquina de desarrollo y
escribe:

ipconfig

Esta línea de comando nos facilitará la dirección IP de la máquina.
Vamos a modificar el archivo de configuración de IIS Express que lo
podéis encontrar en la ruta:

%USERPROFILE%<your user name>DocumentsIISExpressconfig

El nombre del fichero es applicationhost.config. Lo
abrimos y buscamos la sección <sites>. Buscamos el sitio que tenga
el nombre de nuestro servicio y nos fijamos en el apartado
<bindings>.

Tenemos un binding ya establecido a localhost que no podemos
eliminar. Por lo tanto, añadimos un segundo binding igual al ya creado
reemplazando localhost por la IP de la máquina de desarrollo. Añadimos
también en el Firewall de Windows una excepción para IIS Express en el
puerto que estámos utilizando.

Guardamos los cambios. Cerramos Visual Studio y lo volvemos a
ejecutar con privilegios de Administrador (es necesario para registrar
nuestra aplicación con un servicio no alojado en localhost). Ejecutamos
la aplicación.

Todo listo. Pulsa F5 para ejecutar la aplicación en el emulador. El emulador arrancará y si probramos el chat… mágico!

El resultado

Llegado a este punto lo tenemos todo listo. Podéis ver el resultado a continuación:

Podéis descargar el ejemplo desde el siguiente enlace:

NOTA: En la descarga tambien tenéis disponible la Aplicación Windows 8 del chat.

Conclusiones

Hemos aprendido las posibilidades que nos brinda SignalR, framework destinado a la creación de Aplicaciones en tiempo real.
Hemos sido capaces de configurar SignalR en un Host OWIN  creando un
cliente sencillo HTML + JavaScript. A continuación hemos creado una
Aplicación Windows Phone 8 utilizando C # + XAML que puede comunicarse
con nuestro servidor SignalR.

Más información

Unificación de las Stores de Windows y Windows Phone

Introducción

Hasta el momento actual, como
desarrolladores si nos interesaba crear Aplicaciones Windows Phone y
Windows Store necesitábamos contar con dos cuentas de desarrollador, uno
para cada plataforma. El coste de cada cuenta de desarrollador es:

  • Usuario individual, 19$ para la Windows Phone Store y 49$ para la Windows Store.
  • Empresa, 19$ para la Windows Phone Store y 99$ para la Windows Store.

Además, contábamos con dos portales para cada Store. Hasta ahora…

¿Qué cambia exactamente?

Las Stores se unifican!.
A partir de ahora como desarrolladores tendremos que realizar un
único pago pudiendo publicar para ambas plataformas. El coste se queda
de la siguiente forma:

  • Usuario individual: 19$ por las dos.
  • Empresa: 99$ por las dos.

Nos ahorramos dinero como desarrollador además de tener mayor facilidad al publicar Aplicaciones.

¿Y si…?

  • ¿Y si ya tenía cuenta de desarrollador de la Windows Store?

Ya tienes también cuenta de la Windows Phone Store.

  • ¿Y si ya tenía cuenta de desarrollador de la Windows Phone Store?

Ya tienes cuenta de la Windows Store.

  • ¿Y si tenía cuenta de ambas?

Pues Microsoft quiere premiar tu compromiso y te regalará un Token para poder renovar gratuitamente cuando caduque.

Más Información

Evento comunidades técnicas. Sesiones de Windows Phone 8, Windows 8 y Azure

Introducción

Los chicos de Microsoft están de gira durante el mes de Octubre y
Noviembre con un evento que se celebrará en varias ciudades y destinada a
varios roles (devs, sistemas, emprendedores, etc.), el TechDay Tour 2013. En Sevilla tendra lugar el próximo 5 de Noviembre
con una agenda repleta de contenidos de 9:30h a 18:00h que os
recomiendo nos os perdáis. Entre otros ponentes, tendremos la presencia
de Luis Guerrero, DPE Technical Evangelist en Microsoft España, a quien no se le ocurre otra idea que… aumentar aun mas el número de charlas.

¿Cómo?

Ha decidido promover un pequeño evento entre las comunidades para
extender y ver otros puntos no vistos en el TechDay y claro… nos
apuntamos encantados!

El Evento

El evento tendrá lugar después del TechDay de 18:00h a 20:00h. Como ya hemos comentado será un evento de comunidades, CartujaDotNet y UXNug, en donde tendremos 3 charlas técnicas abordando temas sobre Windows 8 y Windows Phone, Azure, SignalR y Xamarin.

¿Te apuntas?

El Lugar

Tendrá lugar en el Cloud Pointing de Sevilla situado en el Parque Empresarial Nuevo Torneo. Tenéis la información exacta del lugar a continuación:

c Biología, 12, Edificio Vilamar 2, 3ª Planta
Parque Empresarial Nuevo Torneo
41015 Sevilla

Lo importante, las Sesiones

  • Patrones de desarrollo de Software en Windows Phone y Windows 8

Las aplicaciones cada día son más
complejas en funcionalidad, así que utilizar patrones de software nos
ayuda a solucionar nuestros problemas de la manera más adecuada. En
Windows Phone 8 y Windows 8 se pueden utilizar algunos patrones para
agilizar el desarrollo de aplicaciones muy grandes o con funcionalidad
muy compleja.

Ponente: Luis Guerrero (@guerrerotook), DPE Technical Evangelist en Microsoft España.

  • Introducción al desarrollo de apps móviles real time haciendo uso de signalR

La evolución en el mundo de las
Aplicaciones es constante y rápido y los usuarios cada vez requieren
funcionalidades más exigentes. Muchas de las Applicaciones destacadas en
la tienda hacen un correcto uso de respuesta inmediata, famosos chats,
famosos juegos donde ambos oponentes dibujan en tiempo real, etc.
¿Quieres aprender a realizar este tipo de Aplicaciones?. Si quieres
aprender como realizar en Windows Phone 8 y Windows 8  Aplicaciones que
funcionen en tiempo real utilizando SignalR, no te pierdas esta sesión!

Ponente: Javier Suárez Ruiz (@jsuarezruiz),
Entusiasta de la tecnología con años de experiencia en aplicaciones
móviles. Colabora habitualmente con la comunidad, coordinador del grupo
de usuarios CartujaDotNet.

  • Xamarin mas Azure

Los clientes y los usuarios nos piden que
nuestras Apps estén en distintos sistemas operativos.Mostraremos como
crear código backend multiplataforma y deslocalizado usando Xamarin 2.0 y
Azure. Tus Apps disponibles para Android, iOS y Mac partiendo desde el
código Windows reutilizando el 80%. ¡Así no echarás horas extras!

Ponente: Pablo Escribano (@PaulEcrivain),
Desarrollador de Aplicaciones en .Net y Mono/Xamarin con más de 10 años
es experiencia. Defensor del Software Libre. Coordinador de MonoHispano
y UXNUG. Fundador de CartujaDotNet.

Más Información