Share
Nå som du har lært de grunnleggende konseptene til sikring, er det på tide å sette ting i bruk og bygge en app. I denne veiledningen lærer du hvordan du utvikler en app ved hjelp av sikringsrammen. Spesielt skal du lære følgende:
Hvis du trenger en oppfriskning på sikring, sjekk ut mitt forrige innlegg i denne serien: Innføring av sikring for Cross-Platform App Development.
For å begynne å jobbe med sikring, gå til nedlastingssiden og registrer deg for en konto. Du kan også logge på en eksisterende konto hvis du har en.
Sikring er tilgjengelig for både Windows og MacOS. Last ned og installer riktig installasjonsprogram for plattformen. På nedlastingssiden peker de også på Fuse-pluginene som er tilgjengelige for ulike tekstredigerere. Installer den for teksteditoren din. Fuse-pluginene inkluderer kodeavslutning, goto-definisjon og visning av logger generert fra appen, som alle gjør utvikler apps mer praktiske.
Vi vil også dekke hvordan du forhåndsviser appen ved hjelp av egendefinert forhåndsvisning. Dette krever at Android Studio eller Xcode installeres på datamaskinen.
En grunnleggende forståelse av webteknologier som HTML, CSS og JavaScript er nyttig, men ikke nødvendig.
Du lager en stoppeklokkeapp som også måler avstanden som dekkes. Avstanden måles ved hjelp av geolokalisering. Brukeren kan også lage runder, og den enkelte avstand og tid for hvert runde vil bli vist på skjermen.
Slik ser appen ut:
Du kan se den komplette kildekoden i opplæringen GitHub repo.
Når du har installert Fuse Studio, bør du nå kunne opprette et nytt Fuse-prosjekt. Bare åpne Fuse Studio og klikk på Nytt sikringsprosjekt knapp. Skriv inn navnet på prosjektet, og klikk Skape:
Dette vil opprette en ny mappe i den valgte katalogen. Åpne den mappen og åpne MainView.ux fil. Som standard vil den bare ha
Hei Verden!
Forhåndsvisningen skal nå oppdateres med teksten du angav:
Det er den viktigste utviklingsarbeidet i Fuse. Bare lagre endringene til noen av filene i prosjektkatalogen, og de vil automatisk bli reflektert i forhåndsvisningen på skrivebordet.
Du kan også se loggene i bunnpanelet. Du kan utløse din egen ved å bruke console.log (), som i nettleseren. Den eneste forskjellen er at du må JSON.stringify () objekter for å se sin verdi, siden console.log () implementering i sikring kan bare sende strenge.
Nå er vi klare til å bygge appen. Åpne MainView.ux fil og fjern
På samme måte som i et HTML-dokument, er standarden å inkludere eiendelene - ting som fonter, stilark og skript - før selve oppslaget på siden. Så legg til følgende inne i
Dette importerer skrifttypen som er angitt i Fil Tilordne og gi den navnet Tynn. Merk at dette ikke gjør det til standard skrift for hele siden. Hvis du vil bruke denne skrifttypen, må du bruke navnet sitt (Tynn) på den spesifikke teksten du vil bruke den på.
Du kan laste ned skrifttypen fra opplæringen GitHub repo. Deretter oppretter du en eiendeler / fonter / robot mappe inne i roten prosjekt katalogen og sette .tTF filen i den.
Hvis du vil bruke en annen skrift, kan du laste den ned fra dafont.com. Det er der jeg lastet ned skrifttypen for denne appen.
Deretter vil vi bruke ikoner i appen. Sikringen har egentlig ikke innebygde elementer og ikon sett som lar deg gjøre det. Det tilbyr en måte å inkludere eksisterende ikonfonter i appen din på. Siden ikonfonter er i hovedsak skrifter, kan vi bruke samme metode for å inkludere skrifter:
Du kan laste ned ikonfonten fra GitHub repo eller laste den ned direkte fra fontawesome.com. Merk at ikke alle ikonene på fontawesome er gratis, så det er best å sjekke selve ikonsiden før du bruker den. Hvis du ser en "pro" -label ved siden av ikonet, kan du ikke bare bruke den i prosjektet uten å betale.
Deretter må vi inkludere JavaScript-filen for denne siden. Vi kan gjøre det ved å bruke
Ikke glem å lage scripts /MainView.js fil ved roten til prosjektkatalogen.
For å maksimere kodens gjenbruk, tillater Fuse oss å lage egendefinerte komponenter fra eksisterende. I koden under bruker vi en div som fungerer som en beholder for andre elementer. I dette tilfellet bruker vi det som en gjenbrukbar komponent for å opprette en knapp.
Sikring kommer med mange elementer. Det er elementer for å legge ut innhold som
For å opprette en gjenbrukbar komponent, legg til en ux: Klasse eiendom til et presentasjonselement som du vil bruke som en base. I dette tilfellet bruker vi en Margin legger plass utenfor beholderen. Her har vi bare angitt en enkelt verdi, så denne marginen brukes på alle sider av panelet. Farge legger til en bakgrunnsfarge til elementet:
Inne i
Inne i ux: Eiendom. Du kan deretter vise verdien som følger med eiendommen ved å bruke ReadProperty PropertyName, hvor Eiendomsnavn er verdien du leverte til ux: Eiendom. Dette vil tillate deg å levere en Tekst eiendom når du bruker
Deretter ønsker vi å tilby brukeren en slags tilbakemelding mens knappen trykkes. Vi kan gjøre det via triggere og animatorer. Utløsere er i utgangspunktet hendelseslytterne - i dette tilfellet, 10% større enn den opprinnelige størrelsen og endre fargen sin. Varighet og DurationBack lar deg angi hvor lang tid det tar for animasjonen å nå toppen og nå sin slutt.
Deretter lager vi
Først er det ux: Navn eiendom. Dette gjør at vi kan gi et navn til et bestemt element, slik at vi senere kan referere til det. I dette tilfellet bruker vi den til å endre den Farge eiendom mens du trykker på knappen.
Vi har også brukt et betinget element som heter løper er en falsk en. Vi leverer verdien for denne variabelen når vi kommer til JavaScript-delen. For øyeblikket vet du at denne variabelen indikerer om tidtakeren for øyeblikket kjører eller ikke.
ReadProperty Text
Vi kan nå fortsette med hovedinnholdet. Først pakker vi alt i en
I koden ovenfor brukte vi fire verdier for Margin. I motsetning til CSS, er verdien fordelt igjen, topp, høyre, bunn. Hvis bare to verdier er angitt, er det venstre til høyre, øverst på bunnen. Du kan bruke markeringsverktøyet i Fuse Studio til å visualisere de anvendte margenene.
Deretter legger vi til et bakgrunnsbilde for siden. Dette aksepterer filbanen til bakgrunnsbildet du vil bruke. EN StretchMode av Fylle gjør bakgrunnen strekker seg selv for å fylle hele skjermen:
Du kan laste ned bakgrunnsbildet jeg har brukt fra opplæringen GitHub repo. Eller du kan finne lignende mønstre på Toptal-nettsiden.
Deretter viser navnet på appen. Nedenfor er det tidsforløpt tekstfelt. Denne teksten må oppdateres ofte, så vi må slå den til en variabel som kan oppdateres via JavaScript. For å utføre litt tekst initialisert i JavaScript-filen til denne siden, må du pakke inn variabelenavnet i krøllete bånd. Senere ser du hvordan verdien for denne variabelen leveres fra JavaScript-filen:
tid forløpt
Deretter bruker vi & # x som prefiks. Når denne knappen trykkes (kalles klikket), den addLap () funksjonen deklarert i JavaScript-filen, utføres:
I Font Awesome kan du finne unicode av ikonfonten på egen side.
Litt under knappen for å legge til et nytt runde er noen tekst som indikerer at knappen ovenfor er for å legge til nye runder:
Deretter viser knappen for å starte og stoppe timeren. Dette utfører også en funksjon som vi vil erklære senere:
Deretter må vi utgjøre omgangene som er lagt til av brukeren. Dette inkluderer runde nummer, avstand dekket og tid brukt. De
I koden ovenfor bruker vi Justering eiendom.
Nå er vi klare til å legge til JavaScript-koden. I sikring brukes JavaScript hovedsakelig for forretningslogikken og arbeider med enhetens innfødte funksjonalitet. Effekter, overganger og animasjoner for samhandling med brukergrensesnittet håndteres allerede av UX Markup.
Begynn med å importere alle APIene vi trenger. Dette inkluderer observer, som hovedsakelig brukes til å tilordne variabler i brukergrensesnittet. Disse variablene kan da oppdateres ved hjelp av JavaScript. Timer er ekvivalent av setTimeout og setInterval Fungerer i webversjonen av JavaScript. Geolocation tillater oss å få brukerens nåværende beliggenhet:
Accentsconagua
var Observerbar = krever ("FuseJS / Observable"); var Timer = krever ("FuseJS / Timer"); var GeoLocation = krever ("FuseJS / GeoLocation");Deretter initialiserer vi alle observable verdiene som vi skal bruke. Dette er variablene du har sett i UX-markeringen tidligere. Verdiene for disse variablene oppdateres gjennom hele levetiden til appen, så vi gjør dem til en observerbar variabel. Dette tillater oss effektivt å oppdatere innholdet i brukergrensesnittet når noen av disse verdiene endres:
var time_elapsed = Observerbar (); // timeren teksten var toggle_btn_text = Observerbar (); // teksten for knappen for å starte og stoppe timeren var is_running = Observerbar (); // om timeren kjører eller ikke var runder = Observerbar (); // runder lagt til av brukeren
Deretter kan vi nå angi startverdiene for veksleknappen og timerteksten:
toggle_btn_text.value = 'Start'; // veksle knapp standard tekst time_elapsed.value = "00:00:00"; // timer standard tekst
Slik endrer du verdien av en observerbar variabel. Siden disse ikke er inne i noen funksjon, bør dette oppdatere brukergrensesnittet umiddelbart når appen startes.
Angi innledende verdier for timeren, omgangstidspunktet og stedet for hvert runde:
var tid = 0; // timer var lap_time = 0; // tid for hvert runde var steder = []; // plassering av brukeren for hvert runde
De veksle() funksjonen brukes til å starte og stoppe timeren. Når timeren er stoppet og brukeren tapper på veksleknappen, er det den eneste gangen vi nullstiller verdiene for timeren og runder. Dette skyldes at vi vil at brukeren skal se disse verdiene selv etter at de stoppet timeren.
Deretter får du brukerens nåværende posisjon og skyver den på steder array. Dette tillater oss å sammenligne det med neste sted senere, når brukeren legger til et runde. Deretter oppretter du en timer som utfører hver 10 millisekunder. Vi øker både det generelle tid og lap_time for hver utførelse. Oppdater deretter brukergrensesnittet med formatert verdi ved hjelp av formatTimer () funksjon:
funksjon veksle () if (toggle_btn_text.value == 'Start') // timeren er for øyeblikket stoppet (alternativt bruk is_running) laps.clear (); // observerbare verdier har en klar () metode for å tilbakestille sin verdi time_elapsed.value = formatTimer (tid); is_running.value = true; locations.push (GeoLocation.location); // få opprinnelig plassering timer_id = Timer.create (funksjon () time + = 1; // økes hver 10 millisekunder lap_time + = 1; // nåværende omgangstid time_elapsed.value = formatTimer (tid); // oppdater brukergrensesnittet med formatert tidsforløpt streng, 10, sant); else // next: legg til kode for når brukeren stopper timeren toggle_btn_text.value = (toggle_btn_text.value == 'Start')? 'Stopp': 'Start';
Når brukeren stopper timeren, slettes den ved hjelp av delete () metode i timeren. Dette krever timer_id som ble returnert når timeren ble opprettet:
Timer.delete (timer_id); // slette tidtakeren // tilbakestill resten av verdiene time = 0; lap_time = 0; is_running.value = false;
Neste er funksjonen for formatering av timeren. Dette fungerer ved å konvertere millisekunder i sekunder og til minutter. Vi vet allerede at denne funksjonen utføres hver 10 millisekunder. Og tid økes med 1 hver gang den kjører ut. Så for å få millisekunder, formidler vi bare tid av 10. Derfra beregner vi bare sekunder og minutter basert på ekvivalentverdien for hver måleenhet:
funksjon formatTimer (tid) funksjonsboks (d) retur (d < 10) ? '0' + d.toString() : d.toString(); var millis = time * 10; var seconds = millis / 1000; mins = Math.floor(seconds / 60); secs = Math.floor(seconds) % 60, hundredths = Math.floor((millis % 1000) / 10); return pad(mins) + ":" + pad(secs) + ":" + pad(hundredths);
Hver gang brukeren tapper på oppdateringsknappen, vil addLap () funksjonen utføres. Dette legger til en ny oppføring på toppen av laps observer:
funksjon addLap () hvis (tid> 0) // bare utfør når timeren kjører lap_time_value = formatTimer (lap_time); // format gjeldende omgangstid lap_time = 0; // tilbakestille omgangstiden var start_loc = steder [laps.length]; // få forrige plassering var end_loc = GeoLocation.location; // få gjeldende plasseringssteder.push (end_loc); // legg til gjeldende plassering varavstand = getDistanceFromLatLonInMeters (start_loc.latitude, start_loc.longitude, end_loc.latitude, end_loc.longitude); // legg til det nye elementet på toppen laps.insertAt (0, title: ("Lap" + (laps.length + 1)), tid: lap_time_value, avstand: distance.toString () + "m."); Her er funksjonen for å få avstanden dekket i meter. Dette bruker Haversine formelen:
funksjon getDistanceFromLatLonInMeters (lat1, lon1, lat2, lon2) funksjon deg2rad (deg) return deg * (Math.PI / 180) var R = 6371; // radius av jorden i km var dLat = deg2rad (lat2 - lat1); var dLon = deg2rad (lon2 - lon1); var a = Math.sin (dLat / 2) * Math.sin (dLat / 2) + Math.cos (deg2rad (lat1)) * Math.cos (deg2rad (lat2)) * Math.sin (dLon / 2) * Math.sin (dLon / 2); var c = 2 * Math.atan2 (Math.sqrt (a), Math.sqrt (1 - a)); var d = (R * c) * 1000; // Avstand i m retur d;
Ikke glem å eksportere alle observerbare verdier:
module.exports = bytt: veksle, toggle_btn_text: toggle_btn_text, is_running: is_running, time_elapsed: time_elapsed, runder: runder, addLap: addLap
For å holde tingene lett, inkluderer ikke Fuse egentlig alle pakkene som den støtter som standard. For ting som geolocation og lokale varsler, må du fortelle Fuse å inkludere dem når du bygger appen. Åpen StopWatch.unoproj på roten av prosjektkatalogen og inkludere Fuse.GeoLocation under pakker matrise:
"Pakker": ["Fuse", "FuseJS", "Fuse.GeoLocation" // legg til dette],
Dette bør instruere Fuse for å inkludere Geolocation-pakken når du bygger appen for egendefinert forhåndsvisning eller for å generere et installasjonsprogram.
Før du kan kjøre appen på iOS-enheten din, må du først legge til en bunkeidentifikator til appen først. Åpne Stoppeklokke.unoproj fil og legg til følgende under iOS. Dette blir den unike identifikasjonen for appen når den sendes til appbutikken:
"Pakker": [// ...], "iOS": "BundleIdentifier": "com.yourname.stopwatch", "PreviewBundleIdentifier": "com.yourname.stopwatch.preview"
Deretter logger du på Xcode på Apple-utviklerkontoen din. Hvis du ikke allerede har en, kan du gå til Apple utviklerens nettsted og opprette en. Det er faktisk gratis å utvikle og teste apps på din iOS-enhet. Det er imidlertid noen begrensninger hvis du ikke er en del av utviklerprogrammet.
Når kontoen din er opprettet, gå til Xcode-innstillinger og legg til din Apple-konto. Klikk deretter på Administrer sertifikater og legg til et nytt sertifikat for iOS-utvikling. Dette sertifikatet brukes til å sikre at appen er fra en kjent kilde.
Når det er gjort, bør du nå kunne kjøre appen på enheten din. Klikk på Forhåndsvisning > Forhåndsvisning på iOS i Fuse Studio og vent på at den skal starte Xcode. Når Xcode er åpent, velg enheten og klikk på avspillingsknappen. Dette vil bygge appen og installere den på enheten. Hvis det er en byggefeil, er det mest sannsynlig at forhåndsvisningsbuntidentifikatoren ikke er unik:
Endre Bundle Identifier til noe unikt bør løse problemet. Når feilen under signeringsseksjonen forsvinner, klikker du på avspillingsknappen igjen for å gjenoppbygge appen. Dette bør installere appen på enheten din.
Du kan imidlertid ikke åpne appen før du godkjenner den. Du kan gjøre det på din iOS-enhet ved å gå til innstillinger > Generell > Enhetsadministrasjon og velg e-postadressen som er knyttet til Apple Developer-kontoen din. Godkjenn det, og det bør låse opp appen.
For Android bør du kunne forhåndsvise appen uten ytterligere trinn.
Det er det! I denne opplæringen har du lært grunnleggende om å lage en app ved hjelp av sikringsrammen. Spesifikt, du har opprettet en stoppeklokke-app. Ved å lage denne appen har du lært hvordan du arbeider med Fuse's UX Markup og noen få Fuse's JavaScript APIer. Du lærte også hvordan du bruker Fuse Studio til å forhåndsvise appen på datamaskinen og telefonen mens du utvikler den.
