Min goalfor dette prosjektet er å illustrere hvor enkelt du kan lage HTML5 og Javascript projects arbeid i tilnærmet opprinnelig hastigheter på mobile applikasjoner.

Egenskaper


Den mobile applikasjonen kjører på iOS og Android via Cordova.

Windows 10 universal app runs opprinnelig på, vel, Windows 10.

Dette prosjektet kan også kjøres som en hosted nettsted, selv om jeg har det skalert som er best for mobile enheter.

Krav

PC eller Mac

webserver

Cross-plattform test matrise (som en BrowserStack, IDE, eller gratis virtuelle maskiner for EdgeHTML, gjengivelse motor for Microsoft Edge og hostet web app innhold på Windows 10)

Oppsett

Last ned kilde fra GitHub.

Last ned og installere en web server (jeg bruker MAMP på OS X, eller den innebygde IIS-server med Visual Studio på Windows).

Åpne Prosjekt
< ol>
Start nettserver.

Naviger til berømte-vinkel-Pokemon /app /
.


Theproject er utviklet for å fungere på mobile enheter , så bruk den mobile emulator inyour nettleser for å få riktig visning. Her er hva det vil se ut på aniPhone 6 inne i emulator via Chrome desktop nettleser (375x667):

Hvordan Itworks

Hittingthe Database



Jeg pullall av informasjonen fra PokeAPI, whichhas en veldokumentert API, men det mangler bilder for hver av Pokémon. Forthe bilder, trekker jeg bare navnet på den tiden valgte Pokémon og legge det til på slutten av denne nettadressen: http://img.pokemondb.net/artwork/. Foreksempel: http://img.pokemondb.net/artwork/venusaur.jpg vil lede deg til en imageof Vanosaur. Nifty, ikke sant? Dessverre har de ikke en API tilgjengelig.


eachtime brukeren trykker på Neste
knapp, en tilfeldig numberis generert mellom en min /max verdi som jeg har definert (si, en til 20), og itpulls en Pokémon fra databasen som matcher det tallet. Her er hva itlooks som:


http://pokeapi.co/api/v1/pokemon/1/
returnerer en JSON objekt forBulbasaur. Du kan spille med sin API.

LoopingThrough Data


Jeg thenloop gjennom at JSON objekt og angi egenskapene jeg finner for å variablesin Hjørne, ved hjelp av $ Scope objektet.


Here'san eksempel: Twitter /* * Grab Pokemon fra DB * /$ scope.getPokemon = function () {//generere et tilfeldig tall og bruke den for neste pokemon getRandomInt ($ omfang .minVal, $ scope.maxVal); //Hente data fra DB og tegne det å screene $ http.get ($ scope.dbURL + $ scope.pokemonNum + "/") .success (funksjon (data) {$ scope.name = data.name; $ omfang. Bildeadresse = $ scope.imgDbURL + $ scope.name.toLowerCase () + '.jpg'; /* 1) Tøm ut den nåværende array å lagre de nye elementene i det * 2) Utnytt det første tegnet for hver evne fra databasen * 3) Oppbevar den evnen i en ny abilityObj & legge den inn i evner matrisen * /$ scope.abilities.length = 0; for (var i = 0; i < data.abilities.length; i ++) {var capitalizedString = capitalizeFirstLetter (data.abilities [i] .name); Var abilityObj = {name: capitalizedString}; $ scope.abilities.push (abilityObj); } $ Scope.hitPoints = data. hp; Var firstType = data.types [0] .name; $ scope.types.name = capitalizeFirstLetter (firstType); determineNewBgColor (); }) .error (Funksjon (status) {console.log (status); $ scope.name = "Kunne ikke få Pokemon fra DB";}); };

Du maynotice at jeg har også et par andre funksjoner her, slik som capitalizeFirstLetter, whichdoes akkurat det. Jeg ønsket de evner og type (f.eks gift, gress, fly) for å ha stor forbokstav, siden de kommer tilbake fra databasen inall små bokstaver.


Jeg alsoloop gjennom evner og presse dem til en evne objekt , som ser slik ut:
$ scope.abilities = [{name: "Sleep"}, {name: "Spis"}];

databasealso returnerer flere typer for visse Pokémon, som Charizard, som isflying samt brann. . For å holde ting enkelt, men jeg bare ønsket å returnone fra databasen
$ scope.types = {name: "Grass"}; Var firstType = data.types [0] .name;
Tegning den til skjermen


Famo.ushas to bølger av tegning innhold til skjermen ved å skape flater, som er den elementer som inneholder tekst, bilder, etc .:

Script

FA-direktiver (HTML)


Ididn't bruke Javascript for å trekke flater i dette programmet. I stedet valgte jeg å bruke bare FA (Famous-Vinkel) direktiver, for eksempel:
< - Navn - > < fa-modifier fa-opprinnelse = "origin.center" fa-align = "align .frontName "fa-size =" size.frontName "fa-translate =" trans.topLayer "> < fa-overflaten class = "front-name-text" > {{name}} < /fa-overflaten > < /fa-modifier >

Dette er for thename over Pokémon på frontskjermen


You'llnotice at overflaten er pakket av en. fa-modifier. Du kan lese om de i dokumentasjonen Famo.us, butthey hovedsak justere egenskapene til en overflate, for eksempel justering, størrelse og opprinnelse. Det tok meg en stund å vikle hodet rundt forskjellen betweenalignment og opprinnelse, så her er hvordan jeg kom til å forstå det.


Origin


Dette er referansepunktet onany flate. Hvis jeg ønsker å tegne et rektangel og flytte den rundt på skjermen, Ineed å bestemme hvilke punkt på at rektangelet vil være min utgangspunkt. De Famo.us docs forklare det godt. Thevalues ​​er lagt ut som følger:
$ scope.origin = {//XY topLeft: [0, 0], topRight: [1, 0], senter: [0,5, 0,5], bottomLeft: [0, 1] , bottomRight: [1, 1];}

Alignment


Dette er en overflate beliggenhet onthe skjermen. Når du gjør endringer i justeringen, er det ved hjelp av opprinnelse asthe referansepunkt for å starte fra
$ scope.align = {//XY frontName. [0,50, 0,10], frontImg: [0,50, 0,40], backImg: [0,5, 0,38], senter: [0,50, 0,50];}
WhereAngular Endelig Comes In


Nowhere er der du kan sette alle dine Vinkel ferdigheter og data bindende til workwith vinkel gjennomføring. Hvis du allerede har opplevd withAngular, så det er ikke radikalt annerledes her
< -.! Neste-knappen - > < fa-modifier fa-opprinnelse = "origin.center" fa-align = "align. nextBtn "fa-size =" size.btn "fa-skala =" scale.nextBtn.get () "fa-translate =" trans.topLayer "> < fa-overflaten class = "one-edge-shadow center-align next-btn" ng-klikk = "getPokemon (); nextBtnPressAnim (); frontImgAnim ()" > {{nextBtn}} < /fa-overflaten > < /fa-modifier >

Thisbutton vises på den første skjermen og bare trekker en annen Pokémon fra thedatabase. Alle de ng (Hjørne) direktiver du er kjent med, er her, for eksempel ng-klikk .
Jeg har flere functionshere. Legg merke til at de ikke er kommaseparert.


Jeg amalso binding verdien av $ scope.nextBtn til {{nextBTn}} i HTML.


toallow Famo.us og Vinkel å arbeide sammen, vi trenger å ta med $ Famo.us på thetop av vår Javascript-fil. Her er hvordan du gjør det:
angular.module ('famousAngularStarter') .controller ('PokemonCtrl', ['$ omfang', '$ http', '$ berømte ", funksjon ($ omfang, $ http, $ berømt ) {/* Sprøyt famo.us til DOM * /var Utsikt = $ berømte ['berømte /core /View']; Var Modifier = $ berømte ['berømte /core /Modifier']; Var Surface = $ berømte ['berømte /core /Surface ']; Var Transform = $ berømte [' berømte /core /Transform ']; Var Transitionable = $ berømte [' berømte /overganger /Transitionable ']; Var Timer = $ berømte [' berømte /verktøy /Timer " ];
Animasjoner


Whatwould en høyytelses app være uten animasjoner Famo.us er pakket withthem, noe som gjør det enkelt å komme i gang Her er en for å animere bildet syne?. . foran Twitter /* *OnClick: Stiller opasitet og skala for front bildet når brukeren klikker "Next" btn * 1) Slår opacity usynlig raskt før du går tilbake til opprinnelig opasitet, avslører ny Pokemon * 2) Slår trappe ned før raskt snu den tilbake til opprinnelig størrelse * /$ scope.frontImgAnim = function () {var hideDuration = 200; Var returnDuration = 1 300; $ scope.opac.imgFront. set (0, {varighet: hideDuration, kurve: "easeIn"}, funksjon returnToOrigOpacity () {$ scope.opac.imgFront.set (1, {varighet: returnDuration, kurve: "easeIn"})}); $ scope.scale.imgFront .set ([0,5, 0,5], {varighet: hideDuration, kurve: "easeIn"}, funksjon returnToOrigSize () {$ scope.scale.imgFront.set ([0,8, 0,8], {varighet: returnDuration, kurve: "easeIn"})});}

thereare flere kurvetyper du kan bruke her. Kassa docs for mer info. I'malso bruker en tilbakeringingsfunksjonen, returnToOrigSize, slik at bildet growand deretter krympe tilbake til den opprinnelige størrelsen.

Pointsof Frustrasjon


Jeg raninto noen problemer underveis.
< h3> FA-direktivene har sine eiendommer Sett som Strings
fa-opprinnelse = "origin.center"

Hvis youhave en stavefeil, applikasjonen vil bare bruke standardverdiene for thatproperty. Dette snagged meg flere ganger, og det er derfor du ser jeg satt alle myproperties som et objekt, slik som align.frontName, tomake det lettere å lese.

Legge Classes
< p> Infa-direktiver du legge til flere klasser som strenger, og de er ikke anbefale kommaseparert
. < fa-overflaten class = "one-edge-shadow center-align next-btn" ng- klikk = "infoBtnPressAnim (); flip ()" > {{infoBtnText}} < /fa-overflaten >

Hvis youtry å legge klasser ved å skape flater i Javascript, passerer du i en rekke ofstrings
Var logo = ny Surface ({egenskaper:. {...} , klasser: ['backfaceVisibility, klasse-to']});

Det tookme en stund å forstå det, som jeg bare funnet løsningen i thisthread

Famo.us + Vinkel synes å være frarådet. (For nå)


Midwaythrough dette prosjektet, så jeg at Famo.us jobbet på en forbedret versjon ofthe rammeverk som inkluderer Mixed Mode. Famo.us + Vinkel doesn'ttake nytte av disse tilleggene (ennå) minst. Det betyr ikke at FA er goinganywhere, slik det fungerer helt greit-det er bare at du ikke skal få thelatest funksjoner.

Resources

Famo .us Slackchat

BizSpark, for å få gratis MSFT dev lisenser og web hosting

E-post meg med spørsmål

Lær hvordan du kan snu dette til en Cordova app for mobile plattformer < .no>
Flere Hands-On Med Javascript


Denne artikkelen ispart av webutvikling serien fra Microsoft tech evangelistene på practicalJavaScript læring, åpen kildekode-prosjekter, og interoperabilitet beste praksis, herunder MicrosoftEdge leseren og den nye EdgeHTML gjengivelsesmotor.


Vi encourageyou å teste over nettlesere og enheter, inkludert Microsoft Edge-the defaultbrowser for Windows 10-med gratis verktøy på dev.modern.IE:

Scan nettstedet ditt for ut-av -date biblioteker, layout problemer og tilgjengelighet

Bruk virtuelle maskiner for Mac, Linux og Windows

Remotely test for Microsoft Edge på din egen enhet

Coding Lab på GitHub : Cross-browser testing og beste praksis


I dybden techlearning på Microsoft Edge og Web Platform fra våre ingeniører andevangelists:

Microsoft Edge Web Summit 2 015 (hva du skal forvente med den nye nettleseren, nye støttede webplattform standarder, og gjesteforelesere fra Script samfunnet)

Woah, jeg kan teste Edge & IE på en Mac & Linux! (fra Rey Bango)

Advancing Javascript uten å bryte Web (fra Christian Heilmann)

The Edge Rendering Engine som gjør Web Just Work (fra Jacob Rossi)

Slipp løs 3D Rende Med WebGL (fra David Catuhe inkludert Vorlon.js og Babylon.js prosjekter)

Hosted Web Apps og Web Platform Innovations (fra Kevin Hill og Kiril Seksenov inkludert manifoldJS prosjektet)


Flere freecross-plattform verktøy og ressurser for web-plattform:

Visual Studio Kode for Linux, Mac OS og Windows

Codewith Node.js og freetrial på Azure







Previous:Leser QR-koder du bruker mobil Vision API

Next Page:Komme i gang med HealthKit: Part 2