[AppStudio] Aplicaciones universales a un click de ratón

Hola a todos!

Hace ya casi un año que escribí sobre AppStudio por última vez. Mucho ha llovido desde entonces y AppStudio a cambiado mucho así que, ahora que está de moda en el cine, quiero hacer un “reboot” del artículo original.

En este año que ha pasado, AppStudio ha crecido y cambiado mucho:

Hace un año…	Hace unos minutos…

La filosofía sigue siendo la misma, pero el diseño ha evolucionado, al igual que la usabilidad. Ahora puedes generar apps Windows también, incluso cuenta con un “simulador” Windows adicional al de Windows Phone, en el que ver la preview de tus apps. Porque además, AppStudio soporta ahora apps universales:

Todo esto y muchas más novedades son lo que me han decidido a reescribir ese artículo original, para repasarlas todas y ver lo que nos puede ofrecer una herramienta que cada vez es más potente.

Vamos a empezar por el principio…

Ahora podemos entrar a AppStudio desde AppStudio.Windows.com. Una vez dentro, tenemos un menú en la parte superior de la pantalla con varias opciones. Las más interesantes ahora: “My projects”, “Start new” y “Sample apps”. Start new nos lleva directamente a crear una nueva app, al igual que el botón “Start new project” que tenemos en la parte superior derecha de la pantalla.

My projects

Esta opción nos lleva a nuestra área personal, donde podremos ver los proyectos que hemos inciado, los hayamos terminado o no, y nos ofrece opciones para manejar cada proyecto:

Directamente desde esta pantalla podremos editar un proyecto ya existente con el botón “Edit” de cada uno, generar el código fuente y el paquete de publicación compilado con el botón “Generate” o eliminarlo si no deseamos conservarlo, usando el botón “Delete”.

Sample apps

En el menú “Sample apps” encontraremos dos aplicaciones universales creadas por el equipo de AppStudio:

Por cada app, podremos descargarnos su código fuente generado con AppStudio, de forma que tengamos una referencia del tipo de código que genera, como se estructura y como funciona. También vamos a poder ver las aplicaciones en funcionamiento, tanto para Windows Store como para Windows Phone, puesto que ambas aplicaciones de ejemplo están publicadas en las tiendas de la plataforma. Es una forma muy sencilla de ver de que es capaz AppStudio y como lo hace internamente. Si no te las has descargado, hazlo! además he de reconocer que la de Windows App Studio es bastante resultona gráficamente. Kudos para el equipo!

Start new o Start new project

Y llegamos a la parte interesante! con la opción de menú “Start new” o el botón “Start new project” se carga la pantalla de plantillas. Aquí encontraremos tres secciones:

• Primero las plantillas más usadas: Estas son las plantillas destacadas, que más suelen usarse. Nos permiten crear nuestro proyecto tanto para Windows Phone como para Windows Store.
• Plantillas web apps: Nos permite crear una aplicación a partir de un sitio web existente. Por ahora solo funciona para Windows Phone.
• Más plantillas: Son iguales que las primeras que vimos, simplemente más tipos y diseños para que no partas de 0 en tu proyecto.

Es importante darnos cuenta que la primera de todas las plantillas, “Empty App” nos permite crear una aplicación totalmente vacía con la que comenzar. Es la que vamos a usar en este artículo, así que vamos a por ella. Pinchamos en “Empty App” y nos mostrará un popup con el preview de la plantilla.

En este caso está totalmente vacía, ya que se trata de una aplicación totalmente en blanco:

Presionando el botón “Create” pasamos a la página central de la creación de una aplicación en App Studio:

Aquí podemos definir toda nuestra aplicación a golpe de ratón. Lo mejor es que, además, todo lo que vayamos cambiando se irá actualizando en el simulador que tenemos a la izquierda, con lo que podremos ver una preview en tiempo real de como va a quedar nuestra app. Tenemos que tener en cuenta que no es un emulador de Windows Phone, es una simulación, no creo que sea 100% exacta, pero a un 90% seguro que coincide. Pero hay que tenerlo en cuenta.

Lo primero que necesitamos es cambiar el nombre de nuestra aplicación. En este caso yo quiero hacer una app que muestre los vídeos de youtube que tenemos en WPSUG, por lo que la app se llamará WPSUG. Original eh? Podemos cambiar el título escribiendo en la caja de texto que está justo sobre el emulador, donde pone “App Title”.

Ahora vamos a ponerle algo de contenido. Al lado derecho del simulador tenemos 6 cajas punteadas. en cada una de ella podemos añadir una sección. Justo debajo tenemos los tipos de secciones:

• Rss: El contenido de un RSS que tengamos disponible.
• Html: Contenido html estático que podemos incluir en la aplicación.
• Youtube: Una busqueda, un usuario o una lista de reproducción.
• Flickr: Una busqueda de flickr.
• Bing: Una busqueda de Bing.
• Facebook: Una página de facebook.

Debajo de estas, disponemos de dos secciones más, en la categoría avanzada:

• Menú: Si no tenemos suficiente con las secciones iniciales, limitadas a 6, podemos usar un menú para crear más subsecciones.
• Colección: Nos permite crear una colección de datos, ya sean estáticos (dentro de la app) o dinámicos (en la nube). En ambos casos puedes definir las columnas que tendrá la colección y el tipo de cada una de ellas.

En nuestro caso, vamos a empezar con una sección HTML, que será la primera que verá el usuario al entrar. En esta sección vamos a explicar un poco que es WPSUG y la finalidad de la aplicación. Al presionar sobre la opción de Html, se abre un popup donde podemos indicar el título de la sección y el contenido HTML:

Una vez que estemos contentos con el texto solo tenemos que presionar “Confirm” para terminar de añadir la sección.

A continuación vamos a crear una sección de YouTube, donde mostraremos los videos del usuario “WPSUG”. Este tipo de sección solo nos pide que indiquemos el título, el tipo de busqueda y el término. En nuestro caso, el título será  “Webcasts”, el tipo de busqueda será por usuario y el término será “WPSUG”, como se puede ver en la siguiente pantalla:

Presionamos el botón “Confirm”, se añade la nueva sección y ya podremos interactuar con el simulador y ver los datos reflejados. Incluso si pinchamos en el botón verde bajo el teléfono que pone “Windows preview” podremos ver una previsualización, e interactuar con ella, de nuestra app en Tablet.

Y ya está, estos eran los datos que queríamos mostrar. Ahora lo que necesitamos es personalizar la aplicación. En primer lugar, podemos presionar en el link “Edit” de cada una de las secciones que hemos creado. Acuerdate de guardar primero con el botón “Save” que tienes en la parte superior derecha, para no perder nada. Al presionar “Edit” veremos la configuración de la página de detalle de cada elemento, en el caso de la sección de tipo YouTube. podremos elegir como se muestra la lista: con o sin imágen, solo título, imágen grande, solo imágenes, bloques con imagen de fondo y texto superpuesto… hay un montón de combinaciones posibles:

Cuando tengamos el diseño que queremos, solo tendremos que guardar con el botón “Save” y volver atrás con el botón atrás que hay al lado del nombre de la sección.

Ahora, otra cosa que podemos hacer es cambiar el logotipo por defecto de Windows que se muestra al lado del título. En la parte superior izquierda de la pantalla, al lado de la caja de texto donde escribimos el título de la aplicación, podemos ver el logo por defecto. pinchando sobre él, nos permite seleccionar otro de nuestro equipo, del OneDrive asociado a la cuenta con la que hagamos entrado en AppStudio o de recursos de AppStudio. En mi caso voy a escoger el logo de WPSUG que tengo en mi equipo. La imagen debe cumplir algunos requisitos:

• Debe tener un alto y ancho mayor de 300 píxeles.
• Debe ser cuadrada (mismo alto y ancho).

Una vez que escojamos una imágen que cumpla esas dos reglas, se subirá y colocará automáticamente en su posición. Ahora necesito cambiar el Fondo de la app, quiero que sea blanco y el color de la letra, para que la app no sea blanca y negra. Para ello, previo guardado de los cambios, Vamos a pasar de la pestaña “Content” en la que hemos estado a “Themes”:

Tenemos varias opciones aquí. En primer lugar podemos escoger el esquema de colores entre tres opciones:

• Tema oscuro (Dark Style). Es el tema oscuro del dispositivo por defecto.
• Tema claro (Light Style). Es el tema claro del dispositivo por defecto.
• Personalizar el tema (Custom Style). Un tema nuevo creado por nosotros.

En el tema personalizado, podemos cambia el color de la barra de aplicación, el color de fondo y el color de letra. Incluso podemos añadir una imagen de fondo a la aplicación si lo deseamos. Una vez que la aplicación quede a nuestro gusto, podemos guardar los cambios y continuar a los Tiles, donde podremos definir los tiles que usaremos en nuestra aplicación. En nuestro caso, vamos a usar el tema oscuro por defecto.

Podemos escoger entre tres tipos de tile diferente:

• Flip template: Un tile que tiene contenido en la parte de atrás y gira para mostrarlo.
• Cycle template: Un tile al que podemos asociar una colección de imágenes (si tenemos) que se irán mostrando.
• Iconic template: Un tile con texto y una imagen a mostrar.

En el caso de nuestro ejemplo, vamos a usar el flip template. Nos permite mostrar el logo de WPSUG en varios tamaños y especificar una imagen extra como contenido trasero del tile.

En esta misma pestaña podemos definir también el uso de una splash screen y lock screen. pulsando sobre el botón “Splash & Lock” en la parte de arriba. Tendremos la posibilidad de especificar la imagen que queremos usar en la SplashScreen de Windows Phone y Windows Store y la imagen de lock screen de Windows Phone.

Y una vez definido esto último, estamos listos para terminar el proceso en la pestaña de “Publish info”. En esta última pestaña podremos definir varios parámetros de la aplicación:

• App title: El título de la aplicación.
• App Description: Una descripción para incluir en la aplicación.
• Language: Esto es una novedad incluida hace muy poco tiempo. Nos permite indicar el idioma por defecto de la aplicación, de forma que a la hora de certificar no tengamos problemas. Por ejemplo, la aplicaión WPSUG tiene los textos en español. Si selecciono como Language el Inglés, fallará la revisión de la tienda.
• Include about page: Si lo habilitamos se incluye una página About automáticamente.
• Enable ad client: Nos permite habilitar la inclusión de publicidad e indicar los datos del PubCenter de Microsoft.
• Associate app with the Store: permite asociar esta aplicación con la tienda directamente para poder publicarla.
• Privacy Statement URL: url a la declaración de privacidad de la aplicación. Si no vamos a modificar la aplicación, no es necesario incluir una url propia y AppStudio usará una por defecto.

Ya solo nos queda darle al botón grande y azul que pone “Finish” para poder recoger los frutos de nuestro trabajo. Esto nos llevará a una página donde podremos ver la previsualización de nuestra aplicación tanto en tablet como en teléfono, interactuar con ella y ver si se nos ha olvidado algo:

Si todo es correcto, solo tenemos que presionar el botón “Generate” y aparecerá un popup donde podremos indicar que queremos obtener exactamente:

En estos momentos, solo podemos generar código/paquetes para Windows Phone 8.1 y Windows 8.1. Podemos escoger si queremos obtener un paquete instalable o uno de publicación y añadir algún comentario. Por úlimo al darle a Generate se cerrará el popup y en la parte de abajo de la pantalla podremos ver un indicador de la generación. Es muy rápido pero no es necesario que esperemos. El sistema nos enviará un email cuando termine, avisándonos de que nuestra aplicación está completa.

Es interesante notar que cada generación de una aplicación no pisa la generación anterior. mantenemos como un histórico, de ahí la opción de añadir un comentario. podemos tener varias versiones generadas y ver exactamente que hicimos en cada una apuntándolo en el campo de comentarios.

Y esto es todo por hoy. Espero que os sea muy útil y ayude a que exprimáis todo el jugo a AppStudio.

Un saludo y happy coding!