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

Estándar

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

AM1

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:

AM2

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

Screenshot (86)

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)

Screenshot (101)

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

Screenshot (102)

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)

Screenshot (97)

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

Screenshot (90)

y…

Screenshot (92)

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..

Screenshot (94)

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

Screenshot (95)

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”)

Screenshot (96)

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)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s