[Windows 10] ”Project Westminster”, de la Web a App Universal

WebIntroducción

Windows 10 ha llegado como la culminación en el viaje hacia la convergencia en el desarrollo entre plataformas Windows. Ahora hablamos de Apps Universales escritas una única vez con un código común tanto para la lógica de negocio como para la interfaz de usuario. Además, generamos un único paquete que mantendrá una interfaz consistente y familiar para el usuario pero adaptada a cada plataforma.

Windows 10

Windows 10

Podemos crear apps que funcionen en todo tipo de dispositivos como teléfonos, tabletas, portátiles, dispositivos IoT, Surface Hub e incluso HoloLens. Para ello tenemos las vías utilizadas hasta este momento, es decir, utilizando C# y XAML (o VB, C++, etc).

Sin embargo, Windows 10 tiene como objetivo ser una plataforma potente pero versátil y accesible para cualquier tipo de desarrollador sin tener en cuenta su origen de partida.

Universal Windows Platform Bridges

Llegar a Windows es mucho más sencillo que nunca. Si tienes una web, si tienes una App en iOS o Android e incluso si partes de una App Win32, existen nuevas opciones destinadas a facilitar la llegada de esas Apps a Windows de la forma más sencilla posible. Estamos hablando de los Windows Bridge toolkits.

Tenemos a nuestra disposición cuatro Bridges diferentes:

  • Project Westminster: Permite crear Apps Windows empaquetando una página web pudiendola publicar en la Store.
  • Project Islandwood: Windows Bridge para iOS (también conocido como proyecto Islandwood) es una herramienta que permite importar proyectos XCode para crear una App Windows 10 reutilizando la mayor cantidad de código Objective C posible.
  • Project Astoria: Windows Bridge para Android (también conocido como proyecto Astoria) es una herramienta que permite comprobar la cantidad de código java a reutilizar, de modo que, nos permite crear App Windows 10 reutilizando código.
  • Project Centennial: Windows Bridge para App clásicas permite empaquetar y publicar Apps basadas en .NET y Win32 como Apps Windows Store. Además, permite el acceso a servicios o APIs UWP.
Universal Windows Platform Bridges

Universal Windows Platform Bridges

NOTA: Al momento de leer estas líneas solo Project Westminster (Web) y Project Islandwood (iOS) están disponibles. Project Astoria (Android) llegará en breve y para Project Centennial (Win32) debemos esperar algo más, hasta final de año.

Project Westminster

El Bridge Windows para Apps web o también conocido como proyecto Westminster permite crear y publicar una App Windows 10 utilizando una web responsive para ello. Se reutiliza el código de la web para crear una App disponible para teléfonos, tablets, PCs, Xbox, Raspberry Pi, etc.

Entre las principales características tenemos:

  • Opción de reescalar y adaptar la App para ofrecer la mejor experiencia en cada familia de dispositivo.
  • Tenemos la posibilidad de acceso a APIs Windows desde Javascript. Por ejemplo, integrar comandos de voz con Cortana, añadir Live Tiles o notificaciones.
  • Podemos depurar con las herramientas de desarrollo de Microsoft Edge.
  • Publicar en la Store con acceso a analíticas, reviews, etc.
  • Monetizar añadiendo In-App Purchases.

Para poder crear nuestra App Windows 10 desde una web necesitamos unos requisitos mínimos:

  • Visual Studio 2015
  • Herramientas desarrollo Windows 10

De la Web a App!

1º Creamos App Universal Javascript

Comenzamos creando un nuevo proyecto de tipo Windows Universal Javascript:

Creamos nuevo proyecto

Creamos nuevo proyecto

Una vez creado tendremos la siguiente estructura en el proyecto:

Estructura inicial

Estructura inicial

2º Borramos todo excepto recursos y manifiesto

Procedemos a borrar todo el contenido exceptuando la carpeta images con recursos y el archivo de manifiesto. La estructura del proyecto se quedara:

Borramos lo necesario

Borramos lo necesario

3º Editamos el manifiesto

La página de inicio del archivo de manifiesto estara asignada a un archivo que acabamos de borrar:

Archivo de manifiesto

Archivo de manifiesto

Realizamos el cambio por la página web que vayamos a utilizar como App:

Página a utilizar

Página a utilizar

Además, añadimos una regla de contenido a nuestra URI para especificar la posibilidad de navegación y tipo de acceso:

URI de contenido

URI de contenido

4º Ejecutamos

Todo listo. Ejecutamos nuestra App:

Voila!

Voila!

Podéis descargar el ejemplo completo realizado a continuación:

También tenéis el código fuente disponible e GitHub:

Ver GitHub

Recordad que podéis dejar cualquier comentario, sugerencia o duda en los comentarios.

¿Y ahora?

Ahora la parte más importante de todas, hacer de la App, una App Windows de la máxima calidad. Podemos añadir integración con Cortana, notificaciones, etc. Nos centraremos en opciones de esta índole en otro artículo.

Más información

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