Empezando con Windows Azure Mobile Services

Nuevo Tutorial! Hoy veremos como crear una simple aplicación de Windows 8 que se encuentre conectada a Windows Azure Mobile Service.

Datos de Introducción
Qué es un Mobile Service? –> http://j.mp/T3AYQt
Qué es Windows Azure? –> http://j.mp/UYSYqt
Trial Gratis de Windows Azure –> http://j.mp/VeceWu

1) Para empezar, necesitaremos estar logeados en el portal de Windows Azure, y crear un Mobile Service haciendo click en New>Compute>Mobile Service>Create, tal como lo muestra la imagen:

2) Para crear un Mobile Service necesitamos agregar una URL, y especificar si crearemos una nueva base de datos, o si usaremos una existente.

3) Si decidimos crear un nueva base de datos, necesitamos especificarle su nombre, el servidor, el usuario y su contraseña.

4) Una vez creado nuestro nuevo Mobile Service, lo veremos de la siguiente manera:

(Para acceder a los datos del Mobile Service, simplemente daremos click en la flecha)

5) Una vez en el panel de inicio del Mobile Service, elegiremos nuestra plataforma [Choose Platform] (en nuestro caso: Windows Store), y haremos click en «Create a new Windows Store app»

6) Lo siguiente será crear una tabla, y para ello haremos click en «Create TodoItem Table» la cual nos creará una tabla por defecto llamada TodoItem (la cual contiene tres campos id, text, complete)

Para probar el funcionamiento de nuestra primera app conectada a Mobile Service seleccionaremos el lenguage y haremos clic en «Download».

7) Al descargar la aplicación notaremos que tiene el mismo nombre del Mobile Service, y que ya esta lista para ser probada en Visual Studio 2012!

La aplicación tiene dos pasos en el primero insertando elementos en la tabla (con un ‘id’ automatico, un ‘text’ obtenido desde el textbox, y con un ‘complete’ por default en false), y en el segundo paso al seleccionar un elemento cambia su valor en ‘complete’ a true y desaparece de la lista. Estos cambios podemos verlos al ver los datos en la tabla todoitem en la base de datos que hemos creado en Azure.

En el próximo post veremos como conectar Windows Azure Mobile Services a una aplicación de Windows 8 ya existente.

Saludos

Creando una aplicación para Windows 8 en pocos minutos!

En muy…

pero en..

muy pocos minutos..

podrás hacer tu aplicación para la tienda de Windows con el siguiente tutorial:

1) Empezaremos con crear una nueva solución en Visual Studio y elegimos el template Split App para Javascript

2) Luego de crear la aplicación nos dirigimos hacia el archivo data.js , allí veremos muchas líneas de código, que para suerte de ustedes.. utilizaremos muy poco en este tutorial:

3) Pulsaremos F5 para poder visualizar nuestra solución:

Al navegar sobre la solución notaremos que se trata de una aplicación que tiene a varios elementos que se encuentran en grupos. Sabiendo eso, empezaremos a modificar parte del código que encontramos en el archivo data.js

Recomendación: Revisa la segunda captura en el método GenerateSampleData() encontrás lo siguiente:

*itemContent –> es el contenido que tiene cada elemento (item)

*itemDescription –> Descripción de cada item

*groupDescription –> Descripción del grupo

*darkGray/lightGray/mediumGray –> Es el lugar en donde se encuentran las imagenes

*SampleGroups –> Grupos de ejemplos

*SampleItems –> Elementos de ejemplos

4)

En mi caso empecé con la idea de desarrollar una aplicación llamada «Planetario», la cual muestra los datos de los 8 planetas del sistema solar (a Plutón no lo contaré..). Los planetas se encuentran en dos grupos: Planetas Externos e Internos.

Ya tenemos lista la idea!, ahora hay que hacerla realidad. Para ello he creado muchas variables itemContent (para agregarle algunos datos de cada planeta, por ejemplo Mercurio tiene una distancia media al Sol de 57909100km!!!), luego agregue 2 itemDescription (pero podría haber agregado 8), y mantuve un groupDescription (muy genérico)

continuando con las modificaciones, he agregado algunas variables con la dirección de las imagenes de cada planeta. Y por último he modificado las variables de sampleGroups y sampleItems

el siguiente paso fue agregar las imágenes de mi aplicación (tanto las de los planetas, como las que son necesarias para poder publicarlas)

y..ya tenemos casi lista la aplicación!!

y…

si observan en mi caso tengo dos grupos por lo cual debo hacer un poco más grande las imágenes..

(eso es posible hacerlo modificando el width y height de .itemspage.itemslist.item , el cual lo podemos encontrar en el archivo items.css) <– esto es opcional, así que no se preocupen..

Y..tambien si queremos podemos cambiar el color de fondo (agregando Background en el archivo de default.css)

Aprovechando que estamos haciendo una app que no utiliza una conexión a internet para su funcionamiento, modificaremos el Package.appmanifest (podés acceder a eso desde el Explorador de Soluciones o «Solution Explorer»)

Listo, ya podés probar tu aplicación a full y llevarla directo al Windows Store!!!

Si ya estás listo para subir tu app!,  mirá el siguiente post –> http://j.mp/Tfqqbd

Temporalmente les comparto la aplicación que he mostrado en el post –> http://j.mp/13OyLdD

NOTA: El siguiente post fue dirigido para todos aquellos que desean comenzar a desarrollar su primera app para Windows 8, para aquellos con conocimientos.. tengo otros post que seguramente les interesará 🙂

NOTA2: La app y el post lo he terminado antes de irme de viaje (así que.. imaginen la velocidad a la que realizado todo)