jueves, enero 09, 2014

Creando una aplicacion movil hibrida desde Windows Phone 8 y HTML5 I

Hola a tod@s!
Hoy quiero presentarles este articulo en cual voy a explicar como podemos crear aplicaciones hibridas para Windows Phone 8, en al cua nuestra aplicacion principal es una aplicacion HTML5, utilizando todo lo que nos ofrece el estandar, mas CSS3 y javaScript para este tipo de aplicaciones.
La importancia es que muchos desarrolladores les gusa mas o prefieren desarrollar sobre HTML5 por ser un desarrollo multiplataforma ya que el cambio en el aplicativo HTML5 es minimo o casi que nulo entre las diferentes plataformas moviles mas fuertes en este momento en el mercado.
Me refiero por supuesto a Android, iOS y Windows Phone.
Una de las desventajas de las aplicaciones desarrolladas sobre HTML5 es que no pueden acceder a los recursos fisicos del dispositivo en el cual se ejecutan, pues es el comportamiento de las aplicaicones web por seguridad a la red y a los recursos del servidor web de aplicaicones.
Sin embargo nuestros clientes nos piden una aplicacion que sean o tenga una interfaz de usuario (UI) Waoo, o muy relevante, y nuestros amigos colaboradores disenadores graficos estan mucho mas familiarizados con HTML que con otras tecnologias de representaciones graficas como XAML, por ejemplo.
Entonces despues de haber desarrollado un App sobre HTML5 nos piden que ademas nuestra App capture una fotografia desde nuestro SmartPhone, esto resulta un enorme reto sobre nuestra aplicacion HTML5 pues su naturaleza restringue el acceso al hardware del dispositivo, esto es lo que nos hace crear una aplicacion hibrida, la cual utilizara recursos de hardware, usando codigo nativo y nuestra aplicacion HTML5 ya desarrollada.
Bueno, no mas palabras … y “manos a obra”.
1. Creamos un proyecto de Windows Phone 8, voy a definir los pasos necesarios para esto, a pesar que pueden ya conocerlos de memoria los que desarrollamos todos los dias.
Abrimos VS2013, seleciconamos nuestro lenguaje de desarrollo, en este caso C# (C Sharp), y buscamos las plantillas de Windows Phone y ubicamos en la ventana que se muestra un Windows Phone App
image
2. Luego de darle un nombre a nuestro proyecto y crearlo, VS2013 crea una estructura completa de nuestra App para Windows Phone 8.
En mi caso coloco com nombre de mi App Celeste.WP8Hibryd.AppMobHtml.
Como es una aplicaicon HMTL5 la que vamos a implementar, debo eliminar la cabecera de la pagina XAML que coloca por defecto VS2013 en la plantilla y luego adicionar un objeto WebBrowser, este objeto es el que nos va a permitir mostrar nuestras Apps escritas en HTML5
3. En nuestra pagina principal que crea nuestra platilla ed VS2013 para Windows Phone vamos a eliminar la cabecera de la paginas ya que necesitamos toda el area de la pantalla de nuestra aplicación en HTML5, y luego de eliminar esta porcion del codigo XAML vamos a adicionar un control Web browser.
image
Lo que vamos a eliminar es el StackPanel, es mucho mas sencillo hacerlo desde la ventana de codigo XAML.
Ahora vamos a ir al toolbox y buscamos el control webbrowser y lo arrastramos y soltamos en la pantalla de diseño de tal manea que quede en el grid que quedo como control principal de nuestra pagina XAML.
image
Arrastramos y soltamos el control sobre la superficie de diseno y verificamos las siguientes propiedades, nuestra pantalla debe verse como la siguiente imagen:
image
Si nos damos cuenta en la ventana de la derecha, la ventana ed propiedades del control WebBrowser, hemos selecionado las propiedades de IsGeolocalizationEnabled y IsScriptEnabled, esta ultima propiedad es la que nos permitira acceder a codigo nativo C# desde codigo javascript de nuestra aplicacion HTML5 para moviles.
Ademas en la parte inferior de la ventana de propiedades podemos observar que el control WebBrowser tiene el HorizontalAlignment y VerticalAlignment en Strech que nos permite que el control ocupe todo el ancho y todo el alto de muestra pantalla del dispositivo.
Ahora vamos a empezar a escribir codigo C# para nuestra aplicacion hibrida. Abrimos la ventana de codigo C# usando la tecla F7, y en el constructor de nuestra pagina escribimos el siguiente codigo:
   1:              this.webBrowser1.NavigateToString(@"<html>
   2:                      <body>
   3:                          <h1 id="
"btnAccion"">App Hibrida HTML5 Win Phone 8</h1>
   4:                          <h1 id="
"mensaje"" style=""color:red""></h1>
   5:                      </body>
   6:                      <script>
   7:                          document.getElementById('btnAccion').onclick = function()
   8:                          {
   9:                              //window.external.notify('foo');
  10:                              window.location = '/getNativeFunction';
  11:                          };
  12:                          function callback(mesg)
  13:                          {
  14:                              document.getElementById('mensaje').innerHTML = mesg;
  15:                          }
  16:                      </script>
  17:                  </html>"
);
  18:          }



Lo que tenemos aqui es una pagina HTML5 en la cual hay dos etiquetas H1 con un id especifico para cada una para poder ubicar estas etiquetas a traves de codigo javascript.

A traves de document.getElementById le asigno el evento onclick al elemento que llame btnAccion y cree una funcion en javascript para comunicarme con el codigo de la aplicacion nativa, esto es el codigo escrito en C#, para ello hay dos formas, la primera, es con windows.external.notify y el nombre del metodo a ejecutar.

En este caso estoy utilizando el segundo metodo o sea window.location y le paso una url a ejecutar, debido a que es mas acorde con la funcionalidad de apps HTML5 con otras plataformas, especificamente con iOS, sin tener que cambiar el codigo javascript para una u otra plataforma.

En la funcion callback toma el resultado de la aplicacion nativa y lo muestra en la aplicacion HML5.

El codigo HTML va a hacer 3 cosas basicamente:

1. mostrar un mensaje: App Hibrida HTML5 Win Phone 8

2. Cuando haga clic sobre esa etiqueta HTML, va a llamar el codigo nativo mediante window.location, y dentro de window.location, el manejador para eso, que va a ser codigo nativo.
3.Luego, que se ejecuta el codigo nativo, se hace una devolucion de llamada para volver a llamar a codigo JavaScript.

Ahora necesitamos otras funciones para manejar la navegacion, para ello vamos  a utilizar el evento navigating del control WebBrowser y poder controlar esto.

Entonces en el constructor creamos la siguiente linea de codigo:

   1:   this.webBrowser1.Navigating += webBrowser1_Navigating;
   



Y creamos el metodo que se ejecuta cuando se dispare el evento:

   1:          void webBrowser1_Navigating(object sender, NavigatingEventArgs e)
   2:          {
   3:              // Aqui verificamos si el AbsolutePath es igual a /getNativeFunction, que es loq ue se jecuta en 
   4:              // el javascript de la app HTML5 
   5:              if (e.Uri.AbsolutePath == "/getNativeFunction")
   6:              {
   7:                  // esto es para edcirle al WebControl que no trate de navegar a /getnativeFunction
   8:                  // porque en realidad esta url no existe
   9:                  e.Cancel = true;
  10:   
  11:                  // Aqui codigo de aplicacion nativo
  12:                  // Lo anterior lo reemplazariamos por lo que queremos que haga nuestra aplicacion nativa
  13:   
  14:                  // Ahora queremos devolver la llamada al codigo javascript
  15:                  // para ello vamos a hacer una llamada anonima utilizando una expresion lambda
  16:                  // para que se ejecute en el thread corecto e independiente del principal
  17:                  Dispatcher.BeginInvoke(() =>
  18:                      {
  19:                          MessageBox.Show("Hola desde codigo nativo");
  20:                          webBrowser1.InvokeScript("callback", "Codigo nativo llamando javascript");
  21:                      }
  22:                      );
  23:              }
  24:          }




Ahora ya podemos ejecutar el app en el emulador de Windows Phone

imgEmulatorWP81

Si damos clic sobre la etiqueta, entonces llamamos desde JavaScript una funcionalidad escrita en código nativo C#:
 imgEmulatorWP82

Y posteriormente, al dar clic al botón del mensaje, le pasamos un parámetro al método JavaScript y lo muestra en color rojo en la segunda etiqueta H1.
 imgEmulatorWP83

Este es un ejemplo muy sencillo de como crear app escritas en HTML5 sobre Windows Phone creando lo que se conoce como un App Hibrida, la cual puede utilizar recrsos de ambos mundos, subsanando la carecia de acceso a los recursos de hardware a traves de codigo nativo de la aplicacion.
En proximos post como hacer esto pero utilizando un recurso del smartphone: la camara.
Que tengan un año lleno de muchas bendiones!!!
Happy coding!





martes, enero 07, 2014

[WinPh8] Nuevos Emuladores para Windows Phone 8

Hola a tod@s! Hoy les comparto los nuevos emuladores que se han publicado para desarrollar para Windows Phone 8

Hay que descargar las actualizaciones 2 y 3 del Windows Phone 8 SDK, con las mismas requerimientos anteriores, esto no vuelve a instalar el SDK solo adiciona los nuevos emuladores.

Aquí pueden descargar los emuladores del Update 2
Aquí pueden descargar los emuladores del Update 3

Recuerden que los emuladores de Windows Phone 8 son realmente maquinas virtuales de Hyper-V y sus PC deben contar con la capacidad de activar Virtualización por hardware. Disfrútenlos!