Manifold.JS: cómo crear una aplicación web alojada en Android, iOS y Windows

Recientemente en //CONSTRUIR/ 2015anunció Microsoft múltipleJS – la forma más sencilla de crear aplicaciones alojadas en todas las plataformas. Si bien John Shewchuk, Technical Fellow y CTO de Microsoft Developer Platform, hizo un gran trabajo al crear una aplicación web alojada en el escenario (puede ver el resumen aquí), me gustaría entrar un poco más en detalle: por qué las aplicaciones web alojadas y cómo crear una para usted usando manifoldJS.

¿Por qué Hosted y ManifoldJS?

Las aplicaciones web alojadas ofrecen lo mejor de la web para almacenar aplicaciones con un mínimo esfuerzo. Son una excelente manera de obtener más alcance de usuarios con la experiencia que ya ha creado. ¡Y cuando actualiza su experiencia web, sus usuarios también obtienen la misma actualización en las aplicaciones web alojadas!

El problema es que, hasta ahora, lo difícil de las aplicaciones alojadas era lo diferente que es el proceso en cada plataforma. manifoldJS cambia eso al poner el foco en el Manifiesto W3C para aplicaciones web – un enfoque de código abierto basado en estándares para crear aplicaciones – y luego utiliza esos metadatos para crear una aplicación nativa alojada en Android, iOS y Windows.

Cuando una plataforma admite aplicaciones alojadas, las creamos de forma nativa y luego usamos Cordova para rellenar las plataformas que no tienen soporte nativo.

Primeros pasos con ManifoldJS

Básicamente, hay dos formas de ponerse en marcha. Si es un desarrollador web que vive en la línea de comandos, comience con la interfaz CLI. Para los desarrolladores que quieren ejecutar manifoldJS en la nube, tenemos las mismas herramientas en el sitio web.

Lo primero que debe hacer es crear un manifiesto para su sitio web. Esto debería ser bastante familiar para los desarrolladores web, ya que es un objeto JSON bastante simple. Aquí hay una muestra de este sitio:

{
  "name": "This Here Web",
  "short_name": "THW",
  "icons": [
  {
  "src": "images/tiny.png",
  "sizes": "70x70",
  "type": "image/png"
  }
  ],
  "start_url": "index.html",
  "scope":"http://*.thishereweb.com"
  "display": "standalone",
  "orientation": "landscape"
  }

Para obtener más detalles sobre la creación de un archivo de manifiesto, incluido cómo servirlo desde su servidor web, consulte esta publicación en el manifiesto.

Si desea un poco de ayuda para crear ese manifiesto, pruebe el generador de código en sitio manifoldjs.com. Lo guiaremos a través de los valores que necesita con el asistente y luego le proporcionaremos un manifiesto completo para su sitio web al final.

Uso de la herramienta CLI

ManifoldJS se ejecuta en tecnología familiar. El único requisito es que tengas instalado node.js. ManifoldJS se ejecutará en cualquier sistema (Mac, Linux, Windows), pero solo puede crear aplicaciones para plataformas compatibles con ese sistema.

Instalación de la herramienta:

C:> npm install manifoldjs
C:> grunt manifoldjs

ManifoldJS se encargará de la instalación de todas sus dependencias a través de NPM. A partir de ahí, simplemente pasa en su sitio web:

C:> ManifoldJS http://www.thishereweb.com

A partir de ahí ocurrirá una de dos cosas:

• Si tiene un manifiesto en su sitio, lo desplegará, junto con las imágenes correspondientes, y creará las aplicaciones a partir de él.
• Si no tiene un manifiesto en el sitio, simplemente asumiremos algunos datos predeterminados y generaremos sus aplicaciones, junto con un manifiesto para usted. También usaremos imágenes de marcador de posición para poder seguir construyendo las herramientas.

Si desea ver lo que sucede, simplemente active el registro y vigile la consola. Junto con el registro, tenemos una serie de otras opciones que puede configurar para controlar la salida de la herramienta:

Parámetros

Uso del generador de manifiestos basado en la web

Toda esta misma gran funcionalidad también está disponible en nuestra herramienta basada en la web. Visita el generador web y empezar

Una vez que complete los pasos, simplemente haga clic en la descarga al final, y se le enviará un zip con todos sus paquetes.

Tu App “Alcance”

El Manifiesto para aplicaciones web le permite especificar el «alcance» de su aplicación. Esto ayuda a determinar dónde se detiene su aplicación y comienza la web abierta. Solo las URL dentro de su alcance aparecerán en la aplicación. Si está utilizando más de un dominio o está llamando contenido de nuestros dominios, simplemente agregue valores de acceso de URI a su manifiesto.

Una experiencia web aún más potente con API nativas

Como desarrolladores web, siempre solicitamos API que nos ayuden a desdibujar las líneas entre el conjunto de características de las aplicaciones nativas y el de la web. Las aplicaciones web alojadas son un entorno confiable en la mayoría de las plataformas, donde el código está vinculado directamente a un desarrollador. Debido a esto, algunas plataformas le permiten tener acceso a API nativas a las que no puede acceder en el navegador.

En Android, iOS y Windows, usamos Cordova para rellenar las aplicaciones alojadas. La ventaja adicional de esto es que puede agregar los archivos cordova js a su sitio web y usar esas API en su aplicación alojada.

Sin embargo, en Windows 10 tiene acceso a toda la superficie de la API de las aplicaciones universales de Windows, desde Bluetooth hasta la interfaz humana de bajo nivel. Para permitir estas API para su aplicación, simplemente agregue esto a su manifiesto:

"mjs_urlAccess": [
  { "url": "http://manupjs.azurewebsites.net/" },
  { "url": "http://www.manifoldjs.com/" }
   ],

Con las reglas de acceso implementadas, activaremos las API para que llame directamente o llame a través de las API de cordova.

Próximos pasos

Estamos trabajando para hacer que el proceso de creación de aplicaciones web alojadas sea aún más fácil, pero por ahora todavía hay algunos pasos finales que estarán en manos de los desarrolladores para completar. Para cada plataforma, proporcionamos cómo implementar en cada tienda de aplicaciones . Las pruebas son una parte importante del desarrollo de aplicaciones y también tenemos consejos y sugerencias para aprovechar al máximo su aplicación web alojada. Además, todas las aplicaciones deben enviarse a las tiendas de aplicaciones correspondientes, y también lo guiaremos en la dirección correcta para eso.

Pensamientos finales

Las aplicaciones web alojadas le permiten desarrollar aplicaciones de tienda mientras mantiene la integridad y la singularidad de la Web. Ahora, desarrollar esas aplicaciones ahora es un poco más simple con múltipleJS. Concéntrese en los estándares web, nosotros haremos el resto.

Más prácticas con JavaScript

Puede que te sorprenda un poco, pero Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de código abierto de JavaScript y tenemos la misión de crear mucho más con Borde de Microsoft. Echa un vistazo a la serie de aprendizaje de nuestro equipo:

• Consejos prácticos de rendimiento para hacer que su HTML/JavaScript sea más rápido (una serie de 7 partes desde el diseño receptivo hasta los juegos casuales y la optimización del rendimiento)
• La plataforma web moderna JumpStart (los fundamentos de HTML, CSS y JS)
• Desarrollo de aplicaciones universales de Windows con HTML y JavaScript JumpStart (use el JS que ya ha creado para crear una aplicación)

Y algunas herramientas gratuitas: Comunidad de Visual Studio, Prueba de Azurey herramientas de prueba de navegador cruzado para Mac, Linux o Windows.

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y el nuevo Motor de renderizado EdgeHTML contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/

(dpe)