Cree una aplicación web alojada en Android, iOS y Windows con ManifoldJS

Recientemente en // BUILD / 2015, Microsoft anunció manifoldJS, la forma más sencilla de crear aplicaciones alojadas en todas las plataformas. Si bien John Shewchuk, miembro técnico y director de tecnología de la Plataforma de desarrolladores de Microsoft, hizo un gran trabajo al crear una aplicación web alojada en el escenario (puede ver el resumen aquí), me gustaría entrar en más detalles, explicando por qué debería usar aplicaciones web alojadas y cómo crear una por sí mismo utilizando manifoldJS.

Porqué Hosted y ManifoldJS?

Las aplicaciones web alojadas aportan lo mejor de la web para almacenar aplicaciones con un mínimo esfuerzo. Son una excelente manera de obtener un mayor alcance de los usuarios con la experiencia que ya ha construido. 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 es lo diferente que es el proceso en cada plataforma. ManifoldJS cambia eso poniendo el foco en W3C Manifest 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, la creamos de forma nativa y luego usamos Cordova para rellenar las plataformas que no tienen soporte nativo..

Primeros pasos con ManifoldJS

Hay básicamente 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 desean ejecutar manifoldJS en la nube, tenemos las mismas herramientas en el sitio web.

Lo primero que debes hacer es crear un manifiesto para tu 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 mi propio sitio:

"name": "This Here Web", "short_name": "THW", "icons": ["src": "images / tiny.png", "tamaños": "70x70", "type": " image / png "]," start_url ":" index.html "," scope ":" http: //*.thishereweb.com "," display ":" standalone "," orientación ":" landscape "

Para obtener más detalles sobre la creación de un archivo de manifiesto, incluida la forma de servirlo desde su servidor web, consulte esta publicación en el manifiesto. Si desea un poco de ayuda para construir ese manifiesto, pruebe el generador de código en el sitio manifoldjs.com. Le guiaremos a través de los valores que necesita con el asistente y luego le proporcionaremos un manifiesto completado para su sitio web al final.

Usando la herramienta CLI

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

Instalando la herramienta:

npm install manifoldjs grunt manifoldjs

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

ManifoldJS http://www.thishereweb.com

A partir de ahí, sucederá una de dos cosas:

  1. Si tiene un manifiesto en su sitio, lo desplegará, junto con las imágenes correspondientes, y construirá las aplicaciones a partir de él..
  2. 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 utilizaremos imágenes de marcador de posición para que podamos construir las herramientas..

Si desea ver lo que está sucediendo, simplemente active algunos registros y mantenga la vista en la consola. Junto con el registro, tenemos otras opciones que puede configurar para controlar el resultado de la herramienta..

Parámetros

Parámetro Descripción
(necesario) URL del sitio web alojado
-m | -manifestar (Opcional) Ubicación del archivo de manifiesto de la aplicación web W3C (URL o ruta local). Si no se especifica, la herramienta busca un manifiesto en la URL del sitio. De lo contrario, se creará un nuevo manifiesto que apunta a la URL del sitio..
-d | -directorio (Opcional) Ruta a los archivos de proyecto generados (valor predeterminado: directorio actual)
-s | (Opcional) Nombre corto de la aplicación. Cuando se especifica, anula el valor short_name del manifiesto
-l | -loglevel (Opcional) Rastreo de opciones de nivel de registro; Niveles de registro disponibles: depuración, rastreo, información, advertir, error (valor por defecto: advertir)
-p | -plataformas (Opcional) Plataformas para generar. Plataformas soportadas: windows, android, ios, chrome (valor por defecto: todas las plataformas)
-b | -construir (Opcional) Fuerza el proceso de construcción.

Usando el generador de manifiesto basado en la web

Toda esta gran funcionalidad también está disponible en nuestra herramienta web. Visita el generador web y comienza..

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

Su aplicación "Ámbito de aplicación"

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 a contenido de nuestros dominios, simplemente agregue los valores de acceso URI a su manifiesto.

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

Como desarrolladores web, siempre pedimos API que nos ayuden a difuminar las líneas entre el conjunto de características de las aplicaciones nativas y la 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, utilizamos Cordova para realizar el relleno de 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 realmente tiene acceso a toda la superficie API de Windows Universal Apps, que es todo, desde Bluetooth hasta una 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 pueda llamar directamente o llamar 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 quedan algunos pasos finales que los desarrolladores deberán completar.. 

Para cada plataforma, proporcionamos orientación sobre cómo implementar en cada App Store. 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 adecuadas, y también le indicaremos la dirección correcta para ello..

Las aplicaciones web alojadas le permiten desarrollar aplicaciones de la tienda a la vez que mantienen la integridad y la singularidad de la web. Ahora, el desarrollo de esas aplicaciones es ahora un poco más simple con ManifoldJS. Tú te centras en los estándares web, nosotros haremos el resto..

Más práctica 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 estamos en la misión de crear mucho más con Microsoft Edge. 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 siete partes que abarca desde el diseño responsivo hasta los juegos casuales y la optimización del rendimiento)
  • The Modern Web Platform Jump Start (los fundamentos de HTML, CSS y JavaScript)
  • Desarrollar aplicaciones universales de Windows con HTML y JavaScript JumpStart (use el JS que ya creó para crear una aplicación)

Y algunas herramientas gratuitas: Visual Studio Community, Azure Trial y herramientas de prueba en varios navegadores para Mac, Linux o Windows.

Este artículo es parte de la serie web dev tech de Microsoft. Estamos muy contentos de compartir Microsoft Edge y lo nuevo Motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o realice pruebas a distancia en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.