Creați o aplicație web găzduită pe Android, iOS și Windows utilizând ManifoldJS

Recent, la // BUILD / 2015, Microsoft a anunțat manifoldJS - cel mai simplu mod de a construi aplicații găzduite de pe platforme. În timp ce John Shewchuk, tehnician și CTO pentru platforma Microsoft Developer, a făcut o treabă excelentă pentru a construi o aplicație web găzduită chiar pe scenă (puteți vedea recapitulările de aici), aș dori să intru într-un pic mai detaliat, explicând de ce ar trebui să utilizați aplicații web găzduite și cum să construiți unul pentru tine folosind manifoldJS.

De ce este găzduit și distribuit??

Aplicațiile web găzduite oferă cele mai bune de pe web pentru a stoca aplicațiile cu efort minim. Ele sunt o modalitate excelentă de a obține mai multă experiență cu experiența pe care ați construit-o deja. Și când actualizați experiența dvs. web, utilizatorii dvs. primesc aceeași actualizare și în aplicațiile web găzduite! 

Problema este că, până acum, lucrul dificil privind aplicațiile găzduite a fost cât de diferit este procesul pe fiecare platformă. ManifoldJS se transformă prin faptul că pune accentul pe Manifestul W3C pentru aplicații web - o abordare bazată pe standarde, cu sursă deschisă pentru crearea de aplicații - și apoi utilizează acele metadate pentru a crea o aplicație nativă găzduită pe Android, iOS și Windows. 

Atunci când o platformă suportă aplicații găzduite, o construim nativ și apoi folosim Cordova pentru a umple platformele care nu au suport nativ.

Noțiuni de bază cu ManifoldJS

Există în principiu două moduri de a merge. Dacă sunteți un dezvoltator web care locuiește în linia de comandă, începeți cu interfața CLI. Pentru cei care doresc să ruleze manifoldJS în nor, avem aceleași instrumente pe site.

Primul lucru pe care doriți să îl faceți este să creați un manifest pentru site-ul dvs. web. Acest lucru ar trebui să fie destul de familiar pentru dezvoltatorii web, deoarece este un obiect simplu JSON. Iată o mostră din site-ul meu:

"nume": "Acest web aici", "short_name": "THW", "pictograme": ["src" image / png "]," start_url ":" index.html "," domeniu ":" http: //*.thishereweb.com "," afișare ":" autonomă "," orientare ":" peisaj "

Pentru mai multe detalii despre construirea unui fișier manifest, inclusiv despre cum să îl difuzați de pe serverul dvs. web, verificați această postare pe manifest. Dacă doriți o mică clădire de ajutor care se manifestă, încercați generatorul de cod de pe site-ul manifoldjs.com. Vă vom îndruma cu valorile de care aveți nevoie cu ajutorul expertului și apoi vă vom oferi un manifest completat pentru site-ul dvs. web la sfârșit.

Utilizarea instrumentului CLI

ManifoldJS rulează pe o tehnologie familiară. Singura cerință este că ai instalat Node.js. ManifoldJS va funcționa pe orice sistem (Mac, Linux, Windows), dar poate construi numai aplicații pentru platforme care sunt acceptate pe acel sistem.

Instalarea instrumentului:

npm instalați manifoldjs grunt manifoldjs

ManifoldJS va gestiona instalarea pentru toate dependențele sale prin intermediul NPM. De acolo, pur și simplu treceți în site-ul dvs.:

ManifoldJS http://www.thishereweb.com

De acolo, se va întâmpla unul din cele două lucruri:

  1. Dacă aveți un manifest pe site-ul dvs., acesta îl va trage în jos, împreună cu imaginile corespunzătoare și va construi aplicațiile din acesta.
  2. Dacă nu aveți un manifest pe acest site, vom presupune pur și simplu anumite date implicite și vom genera aplicațiile împreună cu un manifest pentru dvs. De asemenea, vom folosi imagini cu destinații de înlocuire, astfel încât să putem construi în continuare instrumentele.

Dacă doriți să vedeți ce se întâmplă, pur și simplu porniți o înregistrare și păstrați-vă ochii pe consola. Odată cu logarea, avem și alte opțiuni pe care le puteți seta pentru a controla ieșirea instrumentului.

Parametrii

Parametru Descriere
(necesar) Adresa URL a site-ului găzduit
-m | -manifest (Opțional) Localizarea fișierului manifestului W3C Web App (URL sau calea locală). Dacă nu este specificat, instrumentul caută un manifest în adresa URL a site-ului. În caz contrar, va fi creat un nou manifest care să indice adresa URL a site-ului.
-d | -Directory (Opțional) Calea către fișierele de proiect generate (valoarea implicită: directorul curent)
-s | -shortname (Opțional) Numele scurt al aplicației. Când este specificat, acesta suprascrie valoarea short_name a manifestului
-L | -loglevel (Opțional) Urmărirea opțiunilor nivelului jurnalului; Nivelele log disponibile: depanare, urmărire, info, avertizează, eroare (valoare implicită: a avertiza)
-p | -platforms (Opțional) Platforme de generat. Platformele acceptate: ferestre, android, ios, crom (valoare implicită: toate platformele)
-b | Construieste (Opțional) Forțează procesul de construcție

Utilizarea Generatorului de Manifesturi bazate pe Web

Toate aceleași funcții excelente sunt disponibile și în instrumentul nostru bazat pe web. Vizitați generatorul web și începeți.

Odată ce ați finalizat pașii, veți face doar clic pe descărcare la sfârșit și veți fi trimis un zip cu toate pachetele.

Aplicația dvs. "Domeniul de aplicare"

Manifestul pentru aplicațiile Web vă permite să specificați "domeniul de aplicare" al aplicației dvs. Acest lucru ajută la determinarea locului în care se oprește aplicația dvs. și începe deschiderea web. Doar URL-urile din domeniul dvs. de aplicare vor apărea în aplicație. Dacă utilizați mai mult de un domeniu sau sunați conținut din domeniile noastre, pur și simplu adăugați valori de acces URI la manifest.

O experiență Web chiar mai puternică cu API-uri native

În calitate de dezvoltatori web, intotdeauna solicităm API-uri care ne ajută să blurăm liniile dintre setul de aplicații native și cel al web-ului. Aplicațiile web găzduite reprezintă un mediu de încredere pe majoritatea platformelor, unde codul este legat direct de un dezvoltator. Din această cauză, unele platforme vă permit să aveți acces la API-uri native pe care nu le puteți accesa în browser.

Pe Android, iOS și Windows, folosim Cordova pentru a suplimenta aplicațiile găzduite. Avantajul suplimentar al acestui lucru este că puteți adăuga fișierele Cordova js pe site-ul dvs. web și puteți utiliza aceste API-uri în aplicația găzduită. Cu toate acestea, în Windows 10 aveți de fapt acces la întreaga suprafață API a Windows Universal Apps - asta este totul de la interfața Bluetooth la interfața umană de nivel inferior. Pentru a permite aceste API-uri pentru aplicația dvs., pur și simplu adăugați-o la manifestul dvs.:

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

Cu regulile de acces în vigoare, vom porni API-urile pentru a vă apela direct sau pentru a apela API-urile Cordova.

Pasii urmatori

Lucrăm să facem chiar mai ușor procesul de construire a aplicațiilor web găzduite, dar pentru moment există încă câțiva pași finali care vor fi în mâinile dezvoltatorilor pentru a finaliza. 

Pentru fiecare platformă, oferim îndrumări cu privire la modul de implementare a fiecărui App Store. Testarea este o parte importantă a dezvoltării aplicațiilor și, de asemenea, avem sfaturi și sugestii pentru a profita la maximum de aplicația web găzduită. De asemenea, toate aplicațiile trebuie să fie trimise la magazinele de aplicații corespunzătoare și vă vom îndruma și în direcția corectă pentru acest lucru.

Aplicațiile web găzduite vă permit să dezvoltați aplicații din magazin, menținând în același timp integritatea și unicitatea web. Acum, dezvoltarea acestor aplicații a devenit puțin mai simplă cu ManifoldJS. Te concentrezi pe standardele web, vom face restul.

Mai multe mâini cu JavaScript

S-ar putea să vă surprindă puțin, dar Microsoft are o grămadă de învățare gratuită pe multe subiecte JavaScript open source și suntem într-o misiune de a crea mult mai mult cu Microsoft Edge. Verificați seria de învățare a echipei noastre:

  • Sfaturi practice de performanță pentru a vă face HTML / JavaScript mai rapid (o serie de șapte părți de la design receptiv la jocuri casual la optimizarea performanțelor)
  • Platforma Modern Web Jump Start (fundamentele HTML, CSS și JavaScript)
  • Dezvoltarea aplicațiilor Windows Universal cu JumpStart HTML și JavaScript (utilizați JS pe care l-ați creat deja pentru a crea o aplicație)

Și câteva instrumente gratuite: Visual Studio Community, Azure Trial și instrumente de testare cross-browser pentru Mac, Linux sau Windows.

Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.

Cod