Build en Hosted Web App på Android, iOS og Windows Bruke ManifoldJS
360
Del
8
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Sponset Innhold
Dette sponset post har et produkt som er relevant for våre lesere mens møte våre redaksjonelle retningslinjer for å være objektiv og pedagogisk.
Nylig på //BUILD /2015 Microsoftannounced manifoldJS-de enkleste wayto bygge hosted apps på tvers av plattformer. Mens John Shewchuk, Teknisk Fellowand CTO for Microsoft Developer Platform, gjorde en god jobb bygning ahosted web app rett på scenen (du kan se oppsummering her), jeg har lyst til å gå inn i en litt moredetail, forklarer hvorfor du bør bruke vert web apps og hvordan du kan bygge en for deg selv ved hjelp manifoldJS.
Hvorfor Hosted andManifoldJS?
Hosted web apps bringe det beste av nettet til å lagre programmer på withminimal innsats. De er en fin måte å få mer bruker rekkevidde med experienceyou've allerede bygget. Og når du oppdaterer nettopplevelse, brukerne getthe samme oppdateringen i vert web apps også!
Problemet er, til nå, hardthing om vertsbaserte apps var hvordan ulike prosessen er på hver platform.ManifoldJS endringer som ved å sette fokus på W3C Manifest for Web Apps-astandards-drevet, open source tilnærming for å lage apps-og deretter bruker thatmetadata å skape en hosted innfødt app på Android, iOS og Windows.
Når aplatform støtter hosted apps, vi bygger det smertefritt, og da bruker vi Cordova topolyfill plattformene som ikke har innebygd støtte.
Får StartedWith ManifoldJS
Det er i utgangspunktet to måter å komme i gang. Hvis du er en web developerwho bor i kommandolinjen, start med CLI-grensesnittet. For utviklere som wantto kjører manifoldJS i skyen, har vi de samme verktøyene på nettstedet.
Det første du ønsker å gjøre er å lage et manifest for yourwebsite. Dette bør være ganske kjent for webutviklere, som det er en fairlysimple JSON objekt. Her er et eksempel fra min egen side: product: {"name": "Dette her Web", "SHORT_NAME": "THW", "ikoner": [{"src": "images /tiny.png", " størrelser ":" 70x70 "," type ":" image /png "}]," start_url ":" index.html "," scope ":" http: //*.thishereweb.com "," vise ":" stående "," orientering ":" landskapet "}
For mer informasjon om å bygge et manifest fil, inkludert hvordan toserve det fra webserveren din, sjekk ut dette innlegget på manifestet. Ifyou ønsker litt hjelp bygning som manifest, prøv koden generator på manifoldjs.com nettstedet. Vi vil gå youthrough verdiene du trenger med veiviseren, og deretter gi deg acompleted manifest for ditt nettsted på slutten.
Bruke CLI Tool
ManifoldJS kjører på kjent teknologi. Den eneste requirementis at du Node.js har installert. ManifoldJS vil kjøre på alle systemer (Mac, Linux, Windows), men kan bare bygge apps for plattformer som støttes onthat system
Installere verktøyet.
NPM installere manifoldjsgrunt manifoldjs
ManifoldJS vil håndtere installere for alle sine dependenciesthrough NPM. Derfra du bare pass på nettstedet ditt:
ManifoldJS http://www.thishereweb.com
derfra, en av to ting skje:
Hvis du har amanifest på nettstedet ditt, vil det trekke det ned, sammen med correspondingimages, og bygge apps fra den.
Hvis du ikke har amanifest på nettstedet, vil vi bare anta noen standarddata og generateyour apps, sammen med et manifest for deg. Vi vil også bruke plassholderbilder sowe kan fortsatt bygge verktøyene.
Hvis du ønsker å se hva som skjer, bare slå på somelogging og holde øye med konsollen. Sammen med logging, har vi en numberof andre alternativer du kan stille inn til å styre produksjonen av verktøyet.
Parametere
Parameter
Beskrivelse
< hjemmeside-url > (påkrevd)
nettadressen til vert nettsiden -m | -manifest (valgfritt)
Plassering av W3C Web App manifest fil (URL eller lokal bane). Hvis ikke angitt, ser verktøyet for et manifest i webadressen. Ellers vil et nytt manifest opprettes peker til webadressen. -d | -directory (valgfritt)
Sti til de genererte prosjektfiler (standardverdi: gjeldende mappe) -s | -shortname (valgfritt)
Application kort navn. Når spesifisert, overstyrer den SHORT_NAME verdien av manifest l | -loglevel (valgfritt)
Tracing loggnivået alternativer; Tilgjengelige logg nivåer: debug, spor, info, advare, feil plakater (standardverdi: advare
) -p | -platforms (valgfritt)
Platforms å generere. Støttede plattformer: vinduer, Android, iOS, krom plakater (standardverdi: alle plattformer) b | -Bygg (valgfritt)
Tvinger byggeprosessen
Bruke Web-BasedManifest Generator
Alt dette samme gode funksjonaliteten er tilgjengelig i vår web-basedtool også. Besøk nett generator og komme i gang.
Når du har fullført trinnene, vil du bare klikke på downloadat slutten, og en zip med alle dine pakker vil bli sendt til deg.
Din App "Scope"
Manifest for Web Apps lar deg spesifisere "scope" ofyour app. Dette bidrar til å bestemme hvor din app stopper og åpne web begins.Only adressene i omfang vil dukke opp i programmet. Hvis du bruker mer thanone domene, eller ringer innhold fra våre domener, er å legge inn URI accessvalues til manifest.
En Even MorePowerful Web Erfaring med innfødte APIer
Som webutviklere, vi alltid ber om APIer som hjelper usblur linjene mellom funksjonssettet for native apps og at de web.Hosted web apps er en betrodd miljø på de fleste plattformer, der koden istied direkte tilbake til en utbygger. På grunn av dette, noen plattformer kan du tohave tilgang til innfødte APIer at du ikke kan nå i nettleseren.
På Android, iOS og Windows, bruker vi Cordova til polyfill for thehosted apps. Den ekstra fordel med dette er at du kan legge til Cordova jsfiles til nettstedet ditt og bruke disse APIene i vert app. Men inWindows 10 du faktisk har tilgang til hele API overflaten av WindowsUniversal Apps-det er alt fra Bluetooth til lavnivå menneskelig interface.To tillate disse API-er for din app, bare legge dette til din manifest:
"mjs_urlAccess": [{"url": "http://manupjs.azurewebsites.net/"}, {"url": "http://www.manifoldjs.com/"}],
With adgangs regler på plass, vi vil slå på APIer for youto ringe direkte, eller ring gjennom Cordova APIer.
Neste trinn
Vi jobber med å gjøre prosessen med å bygge vert web appseven enklere, men for Nå er det fortsatt noen få siste trinnene som vil være i hendene på utviklerne å fullføre.
For hver plattform, gir vi veiledning om hvordan du distribuerer til hver App Store. Testing er animportant del av app utvikling, og vi har også tips og forslag glemme mest mulig ut av din vert web app. Også apps alle må besubmitted til de aktuelle app butikker, og vi vil peke deg i rightdirection for det også.
Hosted web apps tillate deg å utvikle butikk apps whilemaintaining integritet og egenart av nettet . Nå utvikler de appsjust fikk litt enklere med ManifoldJS. Du fokuserer på theweb standarder, så ordner vi resten.
Flere Hands-On Med Javascript
Det kan overraske deg litt, men Microsofthas en haug med gratis læring på mange åpen kildekode Javascript emner, og vi er ona oppdrag å skape mye mer med MicrosoftEdge. Sjekk ut vårt team læring serien:
Praktiske Ytelses tips for å gjøre din HTML /Javascript Raskere (en syv-del serier fra responsiv design til casual spill til ytelsesoptimalisering)
The Modern Web Platform Jump Start (det grunnleggende HTML, CSS og Javascript)
Utvikling Universal Windows Apps med HTML og Javascript Jumpstart (bruk JS du allerede har opprettet for å bygge en app)
Og noen gratis verktøy:. Visual Studio fellesskaps, Azure Trial, og cross-browsertesting verktøy for Mac, Linux eller Windows
Denne artikkelen er en del av web dev techseries fra Microsoft. Vi er glade for å dele
Microsoft Edge
og de nye
EdgeHTML rendering motoren
med deg. Få gratis virtuelle maskiner eller teste eksternt på din Mac, iOS, enhet @ Android eller Windows
http://dev.modern.ie/
.