Kreiranje vaše prve aplikacije koristeći Fuse

Sada kada ste naučili osnovne pojmove Fusea, vrijeme je za praksu i izgradnju aplikacije. U ovom tutorijalu naučit ćete kako napraviti aplikaciju koristeći Fuse okvir. Točnije, naučit ćete slijedeće:

• Kako kodirati koristeći UX Markup.
• Kako koristiti  sučelja opservabilnih varijabli, sučelja brojača vremena i geolokacijska sučelja za programiranje aplikacija (APIs)
• Kako pregledati aplikaciju koristeći pregled na desktopu i prilagođeni pregled

Ako trebate osvježiti svoje znanje o Fuseu, pogledajte moj prijašnji post u ovoj seriji: Predstavljanje Fusea za razvoj aplikacija na više platformi.

Preduvjeti

Kako bi započeli raditi sa Fuseom, otiđite na stranicu za preuzimanje i napravite korisnički račun. Također, ako imate korisnički račun, možete se prijaviti.

Fuse je dostupan i za Windowse i za macOS. Preuzmite i instalirajte odgovarajući instaler za vašu platformu. Na stranici za preuzimanje su također navedeni dostuptni dodaci za Fuse za različite uređivače teksta. Instalirajte onaj koji je naveden za vaš uređivač teksta. Fuseovi dodaci uključuju završavanje koda, goto definicije i pregled bilježaka koje stvara aplikacija, što sve čini razvoj aplikacija pogodnijim.

Također ćemo naučiti kako pregledati aplikaciju koristeći prilagođeni pregled. To zahtijeva da na vaše računalu budu instalirani Android Studio ili Xcode.

Osnovno razumijevanje web tehnoligija kao što su HTML, CSS, i JavaScripta bit će od pomoći ali nije obavezno.

Što ćete napraviti

Napravit ćete aplikaciju štoperice koja uz to mjeri pređenu razdaljinu. Razdaljina se mjeri koristeći geolokaciju. Korisnik može kreirati i krugove, a individualna razdaljina i vrijeme svakog kruga će se prikazati na ekranu.

Evo kako će aplikacija izgledati:

Cijeli izvorni kod možete vidjeti na GitHubu.

Kreiranje novog Fuse projekta

Kada ste instalirali Fuse Studio, trebali bi moći kreirati novi Fuse projekt. Samo otvorite Fuse Studio i kliknite na gumb New Fuse Project. Upišite ime projekta i kliknite Create:

To će kreirati novu mapu u odabranom direktoriju. Otvorite tu mapu i otvorite MainView.ux datoteku. Prema zadanim postavkama imat će samo <App> oznaku. Ažurirajte je tako uključuje i <Text> i zatim spremite datoteku:

<App>
    <Text FontSize="25">Hello World!</Text>
</App>

Pregled bi sada trebao biti ažuriran tekstom koji ste odredili:

To je glavni razvojni tijek rada u Fuseu. Samo spremite promjene bilo koje datoteke u direktoriju projekta i one će se automatski odraziti na pregledu na desktopu.

Također možete vidjeti bilješke u donjem panelu. Možete pokrenuti vlastite bilješke koristeći console.log(), kao u pretraživaču. Jedina razlika je što morate JS0N.stringify() objekte kako biste vidjeli njihovu vrijednost, jer implementacija console.log() u Fuseu ima izlaz samo u obliku stringova.

UX Markup

Sada smo spremni izgraditi aplikaciju. Otvorite MainView.ux datoteku i uklonite <Text> element koji ste dodali ranije. Na taj način, započet ćemo sa praznim ekranom:

<App>

</App>

Dodavanje fontova

Kao i u HTML dokumentu, standard je da se resursi - kao što su fontovi, stylesheets i skripte - dodaju prije određivanja izgleda. Unutar <App> elementa dodajte slijedeće:

<Font File="assets/fonts/roboto/Roboto-Thin.ttf" ux:Global="Thin" />

To će uvesti font određen u atributu File i dati mu ime Thin. Primjetite da ova naredba ne čini taj font zadanim za cijelu stranicu. Ako želite koristiti ovaj font, morate upotrijebiti njegovo ime (Thin) na određeni tekst na kojem ga želite upotrijebiti.

Font možete preuzeti sa tutorijala GitHub repo. Nakon toga, kreirajte mapu assets/fonts/robot unutar root direktorija projekta i u nju stavite .ttf datoteku.

Ako želite koristiti neki drugi font, možete ga preuzeti sa dafont.com. Od tamo sam ja preuzeo font za ovu aplikaciju.

Nadalje, u ovoj aplikaciji želimo koristiti ikone. Fuse zapravo nema ugrađene elemente i grupe ikona koje bi vam omogućile da to učinite. Ono što nudi je način da uključite ikonske fontove u vašu aplikaciju. S obzirom na to da su ikonski fontovi u biti fontovi, možemo koristiti istu metodu kao i za dodavanje fontova:

<Font File="assets/fonts/icons/fa-solid-900.ttf" ux:Global="FontAwesome" />

Ikonski font možete preuzeti sa GitHub repo ili direktno sa fontawsome.com. Obratite pažnju na to da sve ikone sa fontawsoma nisu besplatne, pa bi bilo najbolje provjeriti samu stranicu za ikone prije njihove upotrebe. Ako se u blizini ikone nalazi oznaka "pro", onda je ne možete koristiti bez plaćanja.

Dodavanje JavaScripta

Sada moramo dodati JavaScript datoteku za ovu stranicu. To možemo učiniti korištenjem <JavaScript> elementa:

<JavaScript File="scripts/MainView.js"/>

Nemojte zaboraviti kreirati datoteku scripts/MainView.js u root direktoriju projekta.

Kreiranje novih komponenti

Radi maksimiziranja ponovne upotrebe koda, Fuse dopušta kreiranje prilagođenih komponenti iz već postojećih komponenti. U donjem kodu, koristimo <Panel> za kreiranje prilagođenog gumba. Razmišljajte o njemu kao o <div> koji se ponaša kao spremnik za ostale elemente. U ovom slučaju, koristimo ga kao višekratno upotrebljivu komponentu za izradu gumba.

Fuse dolazi sa mnogo elemenata. Tu su elementi za raspored sadržaja kao što je <Panel>, elementi za prikaz korisničkih kontrola, stranica i navigacije, skriptiranja i podataka, te elemenata za izgradnju korisničkog sučelja. Svaki od tih elemenat ima svoju zbirku svojstava, što vam omogućava izmjenu podataka, izgleda i ponašanja.

Za kreiranje višekratne komponente, dodajte ux:Class svojstvo prezentacijskom elementu koji želite koristiti kao osnovu. U ovom slučaju, koristimo <Panel> kao bazu. Tada možete dodati zadani stil. To je slično onome kako se stilovi dodaju u CSSu. Margin dodaje prostor izvan spremnika. Ovdje smo odredili samo jednu vrijednost, pa se ova margina primjenjuje na sve strane panela. Color elementu dodaje pozadinsku boju:

<Panel ux:Class="ToggleBtn" Margin="4" Color="#007bff">
    
</Panel>

Unutar <Panel> želimo prikazati tekst gumba. Želimo da ova komponenta bude višekratna, pa nam je potreban način proslijeđivanja svojstava kasnije kada ovu komponentu budemo koristili. To nam omogućava da postignemo različite rezultate samo promjenom svojstava.

Unutar <Panel> koristite tip podataka one vrijednosti koju želite proslijediti kao ime elementa i onda dodajte ime svojstva koristeći ux:Property. Tada možete prikazati vrijednost dodjeljenog svojstva koristeći {ReadProperty PropertyName}, gdje je PropertyName vrijednost dodjeljena u ux:Property. To će vam omogućiti da dodjelite Text svojstvo kada god koristite komponentu <ToggleBtn>.

<string ux:Property="Text" />
<Text Value="{ReadProperty Text}" Color="#fff" FontSize="18" Alignment="Center" Margin="20,15" />

Zatim želimo korisniku ponuditi neku vrstu povratne informacije dok je gumb pritisnut. To možemo učiniti putem okidača i animatora. Okidači su u osnovi osluškivači događaja - u ovom slučaju <WhilePressed>. Animatori su animacije ili efekti koji želite da se dogode dok su okidači aktivni. Donji kod će gumb učiniti 10% većim od prvotne veličine i promijeniti mu boju. Duration i DurationBack vam omogućavaju da odredite koliko će trebati da naimacija postigne svoj vrhunac i dođe do kraja.

<WhilePressed>
    <Scale Factor="1.1" />
    <Change this.Color="#636363" Duration="0.03" DurationBack=".03" />
</WhilePressed>

Zatim ćemo kreirati komponentu <IconBtn>. Kao što samo ime kaže, ovo je gumb koji prikazuje samo ikonu kao svoj sadržaj. Ova komonenta funkcionira kao i prijašnja, iako smo ovdje napravili nekoliko novih stvari.

Prva je ux:Name svojstvo. Ono nam omogućava da dodjelimo ime određenom elementu kako bi se kasnije mogli referirati na njega. U ovom slučaju, koristimo ga za promjenu svojstva Color dok je gumb pritisnut.

Također smo koristili uvjetni element zvan <WhileTrue>. On omogućava isključivanje okidača <WhilePressed> kada je vrijednost is_running netočna. Ovoj varijabli ćemo dodjeliti vrijednost kada dođemo do dijela sa JavaScriptom. Za sada, znajte da ova varijabla pokazuje da li vremenski brojač trenutno teče ili ne.

<Panel ux:Class="IconBtn">
    <string ux:Property="Text" />
    <Text Font="FontAwesome" Color="#333" ux:Name="LapText" FontSize="40" Alignment="Center">{ReadProperty Text}</Text>
    <WhileTrue Value="{is_running}"> 
        <WhilePressed>
            <Change LapText.Color="#ccc" Duration="0.09" /> <!-- change text color -->
            <Rotate Degrees="90" Duration="0.02"/> <!-- rotate the button by 90 degrees -->
        </WhilePressed>
    </WhileTrue>
</Panel>

Glavni sadržaj

Sada možemo krenuti dalje sa glavnim sadržajem. Prvo ćemo sve omotati u <StackPanel>. Kao što mu ime govori, on nam omogućava da njegovu djecu "složimo" bilo okomito, bilo vodoravno. Po zadanim postavkama koristi okomitu orjentaciju, pa je ne treba specificirati:

<StackPanel  Margin="0,25,0,0" Padding="20">    
    
</StackPanel>

U gornjem kodu koristili smo četiri vrijednosti za Margin. Za razliku od CSSa, distribucija vrijednosti je lijevo, gore, desno, dolje. Ako su navedene samo dvije vrijednosti, one se odnose na lijevo-desno, gore-dolje. U Fuse Studiu možete koristiti alat za odabir kako biste vizualizirali primjenjene margine.

Zatim dodajemo pozadinsku sliku za stranicu. Element prihvaća putanju datoteke do pozadinske slike koju želite koristiti. StretchMode iz Fill će učiniti da se pozadina razvuče kako bi ispunila cijeli ekran:

<ImageFill File="assets/images/seigaiha.png" StretchMode="Fill" />

Možete preuzeti pozadinsku sliku koju sam koristio iz tutorijala GitHub repo. Ili možete pronaći slične uzorke na Toptal stranici.

Zatim prikažite ime aplikacije. Ispod njega nalazi se tekstualno polje proteklog vremena. Taj tekst se mora često ažurirati, pa ga moramo pretvoriti u varijablu koju možemo ažurirati putem JavaScripta. Za ispisivanje teksta inicijaliziranog JavaScript datotekom, ime varijable morate zatvoriti vitičastim zagradama. Kasnije ćete vidjeti kako JavaScript dodjeljuje vrijednost ovoj varijabli:

<Text Value="HIIT Stopwatch" Color="#333" FontSize="18" Alignment="Center" Margin="0,0,0,10" />
<Text FontSize="65" Font="Thin" TextAlignment="Center" Margin="0,0,0,20">{time_elapsed}</Text>

Zatim ćemo upotrijebiti komponentu <IconBtn> koju smo kreirali ranije - slično kao u web okolišu gdje koristimo identifikaciju fonta. U Fuseu morate koristiti Unicode koji je dodjeljen ikonskom fontu koji želite koristiti. Također morate koristiti &#x kao prefiks. Kada je ovaj gumb pritisnut (nazvano Clicked), tada se izvodi funkcija addLap() koja je deklarirana u JavaScript datoteci:

<IconBtn Text="&#xf2f1;" Clicked="{addLap}" />

U Font Awsome možete pronaći unicode za ikonske fontove na njihovoj stranici.

Odmah ispod gumba za dodavanje novih krugova (etapa?) nalazi se tekst koji naznačava da gornji gumb služi za dodavanje krugova:

<Text Value="Lap" Color="#333" FontSize="15" Alignment="Center" Margin="0,5,0,20" />

Zatim prikažite gumb za pokretanje i zaustavljanje brojača vremena. On će također izvršavati funkciju koju ćemo deklarirati kasnije:

<ToggleBtn Text="{toggle_btn_text}"  Clicked="{toggle}" />

Zatim moramo prikazati izlaz za krugove koje je dodao korisnik. To uključuje broj kruga, prijeđenu udaljenost i proteklo vrijeme. Element <Each> omogućava nam iteraciju kroz zbirku objekata i prikažemo pojedinačna svojstva svakog objekta:

<StackPanel Margin="20,40">
    <Each Items="{laps}">
        <DockPanel Margin="0,0,0,15">
            <Text Alignment="Left" FontSize="18" Color="#333" Value="{title}" />
            <Text Alignment="Center" FontSize="18" Color="#333" Value="{distance}" />
            <Text Alignment="Right" FontSize="18" Color="#333" Value="{time}" />
        </DockPanel>
    </Each>
</StackPanel>

U gornjem kodu koristimo <DockPanel> za omotavanje sadržaja svake stavke. Ova vrsta panela omogućava nam da "vežemo" njegovu djecu za različite strane (vrh, lijevo, desno i dno) dostupnog prostora. Korištenjem zadane vrijednosti, njegova djeca se smještaju odmah jedno iznad drugoga. Kako bi ih ravnomjerno rasporedili, morate dodati svojstvo Alignment.

JavaScript kod

Sad smo spremni dodati JavaScript kod. Kod Fusea, JavaScript se uglavnom koristi za poslovnu logiku i rad s izvornom funkcionalnošću uređaja. Efekte, prijelaze i animacije za interakciju sa korisničkim sučeljem već je obradio UX Markup.

Započnite s uvozom svih API-ja koje ćemo trebati. To uključuje i Observable, koji se uglavnom koristi za dodjelu varijabli unutar korisničkog sučelja. Te varijable se zatim mogu ažurirati koristeći JavaScript. Timer je ekvivalent funkcija setTimeout i setInterval u web verziji JavaScripta. Geolocation nam omogućava dobivanje trenutne lokacije korisnika:

var Observable = require("FuseJS/Observable");
var Timer = require("FuseJS/Timer");
var GeoLocation = require("FuseJS/GeoLocation");

Zatim inicijaliziramo sve opservabilne vrijednosti koje ćemo koristiti. To su varijable koje ste ranije vidjeli u UX Markup. Vrijednosti ovih varijabli se ažuriraju tijekom cijelog životnog vijeka aplikacije, pa ih zato deklariramo opservabilnim varijablama. To nam omogućava da ažuriramo sadržaj korisničkog sučelja kada god se neke od tih vrijednosti promjene:

var time_elapsed = Observable(); // the timer text
var toggle_btn_text = Observable(); // the text for the button for starting and stopping the timer
var is_running = Observable(); // whether the timer is currently running or not
var laps = Observable(); // the laps added by the user

Nakon toga, možemo postaviti početne vrijednosti za gumb i tekst brojača vremena:

toggle_btn_text.value = 'Start'; // toggle button default text
time_elapsed.value = "00:00:00"; // timer default text

Tako se vrši izmjena vrijednosti opservabilne varijable. S obzirom da se varijable ne nalaze unutar neke funkcije, korisničko sučelje bi se trebalo ažurirati odmah nakon pokretanja aplikacije.

Postavite inicijalne vrijednosti za brojač vremena, vrijeme etapa i lokaciju za svaku etapu:

var time = 0; // timer
var lap_time = 0; // time for each lap
var locations = []; // location of the user for each lap

Funkcija toggle() koristi se za pokretanje i zaustavljanje brojača vremena. Vrijednosti brojača vremena i etapa resetirat će se samo  kada je brojač vremena zaustavljen i korisnik pritisne gumb. To je zato jer želimo da korisnik vidi ove vrijednosti čak i nakon što zaustavi brojač vremena.

Nakon toga treba preuzeti trenutnu lokaciju korisnika i staviti je u niz locations. To nam omogućava da je kasnije usporedimo sa idućom lokacijom, kada korisnik doda etapu. Zatim kreirajte štopericu koja se izvršava svakih 10 milisekundi. Povećavamo i cjelokupni time i lap_time za svako izvršenje. Zatim ažurirajte korisničko sučelje formatiranom vrijednošću koristeći funkciju formatTimer():

function toggle(){

    if(toggle_btn_text.value == 'Start'){ // the timer is currently stopped (alternatively, use is_running)
        laps.clear(); // observable values has a clear() method for resetting its value
        time_elapsed.value = formatTimer(time);
        is_running.value = true;

        locations.push(GeoLocation.location); // get initial location

        timer_id = Timer.create(function() {
            time += 1; // incremented every 10 milliseconds
            lap_time += 1; // current lap time
            
            time_elapsed.value = formatTimer(time); // update the UI with the formatted time elapsed string
        }, 10, true);
    }else{
        // next: add code for when the user stops the timer
    }

    toggle_btn_text.value = (toggle_btn_text.value == 'Start') ? 'Stop' : 'Start';
}

Kada korisnik zaustavi brojač vremena, izbrišemo je koristeći delete() metodu unutar brojača vremena. To zahtjeva timer_id koji je kreiran kada je brojač vremena kreiran:

Timer.delete(timer_id); // delete the running timer
// reset the rest of the values
time = 0;
lap_time = 0;
is_running.value = false; 

Zatim slijedi funkcija za formatiranje brojača vremena. Ona radi tako što milisekunde pretvara u sekunde i minute. Već znamo da se ova funkcija izvodi svakih 10 milisekundi. Itime se povećava za 1 svaki put kada se izvede. Kako bi dobili milisekunde, jednostavno pomnožimo time sa 10. Iz toga izračunavamo sekunde i minute na temelju ekvivalentne vrijednosti za svaku jedinicu mjerenja:

function formatTimer(time) {
    function pad(d) {
        return (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);
}

Svaki put kada korisnik dodirne gumb za osvježavanje, izvršava se funkcija addLap(). To dodaje novu stavku na vrhu opservabilne varijable laps:

function addLap() {
    if(time > 0){ // only execute when the timer is running

        lap_time_value = formatTimer(lap_time); // format the current lap time
        lap_time = 0; // reset the lap time

        var start_loc = locations[laps.length]; // get the previous location
        var end_loc = GeoLocation.location; // get the current location
        locations.push(end_loc); // add the current location

        var distance = getDistanceFromLatLonInMeters(start_loc.latitude, start_loc.longitude, end_loc.latitude, end_loc.longitude); 
        
        // add the new item on top
        laps.insertAt(0, {
            title: ("Lap " + (laps.length + 1)),
            time: lap_time_value,
            distance: distance.toString() + " m."
        });
        
    }
}

Evo funkcije za dobivanje pređene udaljenosti u metrima. Ona koristi haversin formulu:

function getDistanceFromLatLonInMeters(lat1, lon1, lat2, lon2) {
    function deg2rad(deg) {
      return deg * (Math.PI/180)
    }

    var R = 6371; // radius of the earth in 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; // Distance in m
    return d;
}

Ne zaboravite izvesti sve opservabilne vrijednosti:

module.exports = {
    toggle: toggle,
    toggle_btn_text: toggle_btn_text,
    is_running: is_running,
    time_elapsed: time_elapsed,
    laps: laps,
    addLap: addLap
}

Geolokacijski paket

Kako bi ostao lagan, Fuse ne sadrži sve pakete koje podržava. Za stvari kao što su geolokacija i lokalne notifikacije, trebate reći Fuseu da ih uključi prilikom izgradnje aplikacije. Otvorite StopWatch.unproj u rootu vašeg projektnog direktorija i dodajte Fuse.Geolocation pod niz Packages:

"Packages": [
    "Fuse",
    "FuseJS",
    "Fuse.GeoLocation" // add this
],

Ovo bi trebalo uputiti Fuse da uključi Geolokacijski paket kadgod se aplikacija izvodi za prilagođeni pregled ili pri generiranju instalacijskog programa.

Postavljanje prilagođenog pregleda

Prije nego budete mogli pokrenuti aplikaciju na vašem iOS uređaju, aplikaciji trebate prvo dodati identifikator paketa. Otvorite datoteku StopWatch.unproj i dodajte slijedeće pod iOS. To će biti jedinstvena identifikacija aplikacije kada aplikacija bude predana trgovini aplikacijama.

"Packages": [
    // ...
],
"iOS": {
    "BundleIdentifier": "com.yourname.stopwatch",
    "PreviewBundleIdentifier": "com.yourname.stopwatch.preview"
}

Zatim se prijavite na Xcode sa vašim Apple developerskim računom. Ako ga još nemate, možete otići na Apple developesku web stranicu i napraviti račun. Besplatno možete razvijati i testirati aplikacije na vašem iOS uređaju. Ipak postoje neka ograničenja ako niste uključeni u developerski program.

Jednom kada ste napravili račun, otiđite na Xcode preference i dodajte vaš Apple račun. Tada kliknite na Manage Certificates i dodajte novi certifikat za iOS razvoj. Taj certifikat se koristi kako bi se osiguralo da aplikacija dolazi iz poznatog izvora.

Jednom kada je to napravljeno trebali biste moći pokrenuti aplikaciju na vašem uređaju. Kliknite na Preview > Preview on iOS u Fuse Studiju i pričekajte da pokrene Xcode. Jednom kada se Xcode otvori, odaberite vaš uređaj i kliknite na gumb za reprodukciju. To će izgraditi aplikaciju i instalirati ju na vaš uređaj. Ako se pojavi greška, vjerojatno se radi o tome da identifikator paketa pregleda nije jedinstven:

Promjena identifikatora paketa u nešto jedinstveno trebala bi riješitei problem. Jednom kad greške ispod djela za prijavu nestanu, ponovno kliknite na gumb za reprodukciju kako biste ponovno izgradili aplikaciju. To bi trebalo instalirati aplikaciju na vaš uređaj.

No aplikaciju nećete moći otvoriti dok je ne potvrdite. To možete učiniti tako da otiđete na Settings > General > Device Management i odaberete email koji je povezan sa vašim Apple Developer računom. Odobrite je i to bi trebalo otključati aplikaciju.

Za Android, aplikaciju biste trebali moći pregledati bez dodatnih koraka.

Zaključak

To je to! U ovom tutorijalu naučili ste osnove kreiranja aplikacije korištenjem Fuse okvira. Točnije, kreirali ste aplikaciju štoperice. Kreiranjem ove aplikacije, naučili ste kako raditi sa Fuseovim UX Markupom i nekoliko Fuseovih JavaScript sučelja za programiranje aplikacija (API). Također ste naučili kako koristiti Fuse Studio za pregled aplikacije na vašem računalu i mobitelu dok je još u razvoju.