Share
Acum că ați învățat conceptele de bază ale Fuse, este timpul să puneți lucrurile în practică și să construiți o aplicație. În acest tutorial, veți învăța cum să dezvoltați o aplicație utilizând cadrul Fuse. Mai exact, veți afla următoarele:
Dacă aveți nevoie de o reîmprospătare la Fuse, verificați postul meu anterior din această serie: Introducerea fusei pentru dezvoltarea aplicațiilor cross-platform.
Pentru a începe să lucrați cu Fuse, accesați pagina de descărcări și creați un cont. De asemenea, vă puteți conecta la un cont existent dacă aveți unul.
Siguranța este disponibilă atât pentru Windows cât și pentru MacOS. Descărcați și instalați programul de instalare corect pentru platforma dvs. Pe pagina de descărcări, aceștia arată, de asemenea, pluginurile Fuse disponibile pentru diferiți editori de text. Instalați unul pentru editorul de text. Pluginurile de siguranțe includ completarea codului, definirea și identificarea jurnalelor generate de aplicație, ceea ce face ca aplicațiile în curs de dezvoltare să fie mai convenabile.
Vom analiza și modul de previzualizare a aplicației utilizând previzualizarea personalizată. Acest lucru necesită instalarea pe computer a aplicațiilor Android Studio sau Xcode.
O înțelegere de bază a tehnologiilor web, cum ar fi HTML, CSS și JavaScript, este utilă, dar nu este necesară.
Veți crea o aplicație cronometrat care măsoară și distanța acoperită. Distanța este măsurată folosind geolocația. De asemenea, utilizatorul poate crea ture, iar distanța și timpul individual pentru fiecare tur vor fi afișate pe ecran.
Iată cum va arăta aplicația:
Puteți vedea codul sursă complet în replica GitHub tutorial.
Odată ce ați instalat Fuse Studio, acum ar trebui să puteți crea un nou proiect Fuse. Deschideți doar Fuse Studio și faceți clic pe Proiect nou de siguranță buton. Introduceți numele proiectului și dați clic pe Crea:
Astfel se va crea un folder nou în directorul selectat. Deschideți dosarul respectiv și deschideți MainView.ux fişier. Implicit, va avea doar
Salut Lume!
Previzualizarea ar trebui actualizată acum cu textul pe care l-ați specificat:
Acesta este principalul flux de lucru al dezvoltării în Fuse. Doar salvați modificările la oricare dintre fișierele din directorul de proiect și acestea se vor reflecta automat în previzualizarea desktopului.
De asemenea, puteți vedea jurnalele din panoul de jos. Puteți să vă declanșați propria folosire console.log (), ca în browser. Singura diferență este că trebuie JSON.stringify () obiecte pentru a vedea valoarea lor, deoarece console.log () implementarea în Fuse poate produce numai șiruri de caractere.
Acum suntem gata să construim aplicația. Deschide MainView.ux fișier și eliminați
La fel ca într-un document HTML, standardul trebuie să includă activele - lucruri precum fonturile, foile de stil și scripturile - înainte de marcarea efectivă a paginii. Deci, adăugați următoarele în interiorul
Aceasta importă fontul specificat în Fişier atribuie și îi dă numele Subţire. Rețineți că acest lucru nu face ca acesta să fie fontul implicit pentru întreaga pagină. Dacă doriți să utilizați acest font, trebuie să utilizați numele acestuia (Subţire) pe textul pe care doriți să-l aplicați.
Puteți descărca fontul din GitHub repo tutorial. După aceea, creați un active / fonturi / robotului folder în directorul de proiect rădăcină și puneți .ttf fișier în el.
Dacă doriți să utilizați un alt font, îl puteți descărca de la dafont.com. Aici am descărcat fontul pentru această aplicație.
Apoi, dorim să folosim icoane în interiorul aplicației. Siguranța nu are într-adevăr elemente încorporate și seturi de pictograme care vă permit să faceți acest lucru. Ceea ce oferă este o modalitate de a include fonturi existente în aplicația dvs. Deoarece fonturile cu pictograme sunt în esență fonturi, putem folosi aceeași metodă pentru includerea fonturilor:
Puteți descărca fontul pictogramei din repo GitHub sau îl puteți descărca direct de la fontawesome.com. Rețineți că nu toate pictogramele din fontawesome sunt gratuite, deci este mai bine să verificați pagina cu pictograme reale înainte de ao utiliza. Dacă vedeți o etichetă "pro" de lângă pictogramă, atunci nu o puteți folosi pur și simplu în proiect fără să plătiți.
Apoi, trebuie să includeți fișierul JavaScript pentru această pagină. Putem face acest lucru folosind
Nu uitați să creați script-uri /MainView.js fișier de la baza directorului de proiect.
Pentru a maximiza reutilizarea codului, siguranța ne permite să creăm componente personalizate din cele existente. În codul de mai jos, folosim a div care acționează ca un container pentru alte elemente. În acest caz, îl folosim ca o componentă reutilizabilă pentru crearea unui buton.
Siguranța vine cu multe elemente. Există elemente pentru a stabili conținut, cum ar fi
Pentru a crea o componentă reutilizabilă, adăugați o ux: Clasa proprietății unui element de prezentare pe care doriți să îl utilizați ca bază. În acest caz, folosim a margine adaugă spațiu în afara containerului. Aici am specificat doar o singură valoare, deci această marjă este aplicată pe toate laturile panoului. Culoare adaugă o culoare de fundal elementului:
În interiorul
În interiorul ux: Proprietate. Puteți apoi să afișați valoarea furnizată proprietății utilizând ReadProperty PropertyName, Unde Numele proprietatii este valoarea pe care ați furnizat-o ux: Proprietate. Acest lucru vă va permite să furnizați a Text proprietate ori de câte ori utilizați
Apoi, dorim să oferim utilizatorului un fel de feedback în timp ce butonul este apăsat. Putem face acest lucru prin declanșatoare și animatori. Declanșatoarele sunt în principiu ascultătorii evenimentului - în acest caz, 10% mai mare decât dimensiunea originală și schimbarea culorii. Durată și DurationBack vă permit să specificați cât timp este nevoie ca animația să ajungă la vârf și să ajungă la final.
Apoi, vom crea
Primul este ux: Nume proprietate. Acest lucru ne permite să oferim un nume unui anumit element, astfel încât să ne putem referi mai târziu la acesta. În acest caz, îl folosim pentru ao schimba Culoare în timp ce butonul este apăsat.
Am folosit de asemenea un element condiționat numit rulează este una falsă. Vom furniza valoarea pentru această variabilă odată ce ajungem la partea JavaScript. Pentru moment, știți că această variabilă indică dacă timerul rulează sau nu în prezent.
ReadProperty Text
Acum putem continua cu conținutul principal. În primul rând, înfășurăm totul într-un
În codul de mai sus, am folosit patru valori pentru margine. Spre deosebire de CSS, distribuția valorii este lăsată, sus, dreapta, partea de jos. Dacă sunt specificate doar două valori, este la stânga-dreapta, de sus în jos. Puteți utiliza instrumentul de selecție în Fuse Studio pentru a vizualiza marginile aplicate.
Apoi, adăugăm o imagine de fundal pentru pagină. Aceasta acceptă calea fișierului pentru imaginea de fundal pe care doriți să o utilizați. A StretchMode de Completati face ca fundalul să se întindă în sine pentru a umple întregul ecran:
Puteți descărca imaginea de fundal pe care am folosit-o din reparația GitHub tutorial. Sau puteți găsi modele similare pe site-ul Toptal.
Apoi, arătați numele aplicației. Mai jos este câmpul de text scurs din timp. Acest text trebuie actualizat frecvent, deci trebuie să îl transformăm într-o variabilă care poate fi actualizată prin intermediul JavaScript-ului. Pentru a scoate un text inițializat în fișierul JavaScript al acestei pagini, trebuie să înfășurați numele variabilei în bretele curbate. Mai târziu, veți vedea cum se furnizează valoarea pentru această variabilă din fișierul JavaScript:
timpul scurs
Apoi, folosim &#X ca prefix. Când este apăsat acest buton (numit a dat clic), addLap () funcția declarată în fișierul JavaScript este executată:
În Font Awesome, puteți găsi unicodul fontului pictogramei pe propria pagină.
Chiar sub butonul pentru adăugarea unui tur nou este un text care indică faptul că butonul de mai sus este pentru adăugarea de tururi noi:
Apoi, afișați butonul pentru pornirea și oprirea cronometrului. Aceasta execută și o funcție pe care o vom declara ulterior:
Apoi, trebuie să scoatem turele adăugate de utilizator. Acestea includ numărul de tur, distanța parcursă și timpul petrecut.
În codul de mai sus, folosim Aliniere proprietate.
Acum suntem gata să adăugăm codul JavaScript. În Fuse, JavaScript este folosit în principal pentru logica de afaceri și lucrează cu funcționalitatea nativă a dispozitivului. Efectele, tranzițiile și animațiile pentru interacțiunea cu interfața de utilizare sunt deja tratate de marcajul UX.
Începeți prin importul tuturor API-urilor de care avem nevoie. Aceasta include Observabil, care este folosită în principal pentru atribuirea variabilelor în interfața utilizator. Aceste variabile pot fi apoi actualizate folosind JavaScript. Cronometrul este echivalentul setTimeout și setInterval funcționează în versiunea web a JavaScript. localizare geografică a ne permite să obținem locația curentă a utilizatorului:
Accentsconagua
Var Obsbleble = necesită ("FuseJS / Observable"); var Timer = necesită ("FuseJS / Timer"); var GeoLocation = necesită ("FuseJS / GeoLocation");Apoi, inițializăm toate valorile observabile pe care le vom folosi. Acestea sunt variabilele pe care le-ați văzut anterior în marcajul UX. Valorile pentru aceste variabile sunt actualizate pe toată durata de viață a aplicației, deci le facem o variabilă observabilă. Acest lucru ne permite în mod eficient să actualizăm conținutul UI ori de câte ori se modifică oricare dintre aceste valori:
var time_elapsed = Observabil (); // textul temporizatorului var toggle_btn_text = Obsable (); // textul butonului pentru pornirea și oprirea temporizatorului var is_running = Obsble (); // dacă timerul rulează în prezent sau nu var laps = Obsible (); // turele adăugate de utilizator
După aceasta, putem seta acum valorile inițiale pentru butonul de comutare și pentru cronometrul:
toggle_btn_text.value = 'Start'; // comutați butonul implicit al butonului time_elapsed.value = "00:00:00"; // text implicit pentru temporizator
Astfel modificați valoarea unei variabile observabile. Deoarece acestea nu sunt în interiorul niciunei funcții, aceasta ar trebui să actualizeze interfața utilizator imediat după lansarea aplicației.
Setați valorile inițiale pentru cronometru, timpul tur și locația pentru fiecare tur:
var ora = 0; / / timer var lap_time = 0; // timpul pentru fiecare tură var locations = []; // locația utilizatorului pentru fiecare tur
comutare() funcția este utilizată pentru pornirea și oprirea cronometrului. Când temporizatorul este oprit în momentul de față și utilizatorul se apasă pe butonul de comutare, acesta este singurul moment în care resetăm valorile pentru cronometru și ture. Acest lucru se datorează faptului că vrem ca utilizatorul să vadă aceste valori chiar și după ce au oprit temporizatorul.
Apoi, obțineți locația curentă a utilizatorului și împingeți-o pe locații matrice. Acest lucru ne permite să îl comparăm cu următoarea locație mai târziu, odată ce utilizatorul adaugă un tur. Apoi, creați un cronometru care se execută la fiecare 10 milisecunde. Noi creștem atât ansamblul timp si lap_time pentru fiecare execuție. Apoi, actualizați interfața utilizator cu valoarea formatată folosind formatTimer () funcţie:
funcția comutare () if (toggle_btn_text.value == 'Start') // temporizatorul este oprit în prezent (alternativ, folosiți is_running) laps.clear (); // valorile observabile au o metodă clear () pentru resetarea valorii lor time_elapsed.value = formatTimer (time); is_running.value = true; locations.push (GeoLocation.location); // a lua locația inițială timer_id = Timer.create (funcția () time + = 1; // incrementată la fiecare 10 milisecunde lap_time + = 1; // ora curentă time_elapsed.value = formatTimer (time); cu șirul formatat de timp scurs, 10, true); altceva // următorul: adăugați codul pentru momentul în care utilizatorul oprește temporizatorul toggle_btn_text.value = (toggle_btn_text.value == 'Start')? 'Stop': 'Start';
Când utilizatorul oprește temporizatorul, îl ștergem folosind șterge() metoda în cronometru. Acest lucru necesită timer_id care a fost returnat atunci când cronometrul a fost creat:
Timer.delete (timer_id); // șterge cronometrul de funcționare // resetează restul valorilor time = 0; lap_time = 0; is_running.value = false;
Următoarea este funcția de formatare a cronometrului. Aceasta funcționează prin conversia milisecundelor în câteva secunde și în câteva minute. Știm deja că această funcție este executată la fiecare 10 milisecunde. Si timp este incrementată de 1 de fiecare dată când execută. Deci, pentru a obține milisecunde, noi înmulțim timp de 10. De acolo, vom calcula doar secundele și minutele pe baza valorii echivalente pentru fiecare unitate de măsură:
funcția formatTimer (timp) pad pad (d) întoarcere (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);
De fiecare dată când utilizatorul apasă pe butonul de reîmprospătare, addLap () funcția este executată. Aceasta adaugă o intrare nouă în partea de sus a paginii ture observabil:
funcția addLap () if (timp> 0) // se execută numai când cronometrul se execută lap_time_value = formatTimer (lap_time); // formarea timpului curent lap_time = 0; // a reseta timpul lap start_loc = locații [laps.length]; // obțineți locația anterioară var end_loc = GeoLocation.location; // obțineți locațiile curente locations.push (end_loc); // adăugați locația curentă var distance = getDistanceFromLatLonInMeters (start_loc.latitude, start_loc.longitude, end_loc.latitude, end_loc.longitude); // adăugați elementul nou în top laps.insertAt (0, title: ("Lap" + (laps.length + 1)), timpul: lap_time_value, distanța: distance.toString () + "m."); Iată funcția pentru obținerea distanței acoperite în metri. Aceasta folosește formula Haversine:
funcția getDistanceFromLatLonInMeters (lat1, lon1, lat2, lon2) funcția deg2rad (deg) return grad * (Math.PI / 180) var R = 6371; // raza pământului în 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); var c = 2 * Math.atan2 (Math.sqrt (a), Math.sqrt (1-a)); var d = (R * c) * 1000; // Distanta in m retur d;
Nu uitați să exportați toate valorile observabile:
module.exports = comutare: comutare, toggle_btn_text: toggle_btn_text, is_running: is_running, time_elapsed: time_elapsed, laps: laps, addLap: addLap
Pentru a păstra lucrurile ușor, siguranța nu include în realitate toate pachetele pe care le acceptă în mod implicit. Pentru lucruri precum localizarea geografică și notificările locale, trebuie să le spuneți Fuse să le includă atunci când construiți aplicația. Deschis StopWatch.unoproj la baza directorului de proiect și includeți Fuse.GeoLocation sub pachete matrice:
"Pachete": ["Siguranță", "FuseJS", "Fuse.GeoLocation" // adăugați aceasta],
Aceasta ar trebui să instruiască Fuse să includă pachetul Geolocation ori de câte ori creează aplicația pentru previzualizarea personalizată sau pentru generarea unui instalator.
Înainte de a putea rula aplicația pe dispozitivul dvs. iOS, trebuie să adăugați mai întâi un identificator de pachet în aplicație. Deschide Cronometru.unoproj fișier și adăugați următoarele sub iOS. Aceasta va fi identificarea unică a aplicației atunci când este trimisă la magazinul de aplicații:
"Pachete": [// ...], "iOS": "BundleIdentifier": "com.yourname.stopwatch", "PreviewBundleIdentifier": "com.yourname.stopwatch.preview"
Apoi, pe Xcode, conectați-vă cu contul dvs. de dezvoltator Apple. Dacă nu aveți deja unul, puteți merge pe site-ul web al dezvoltatorului Apple și creați unul. De fapt, este gratuit să dezvolți și să testezi aplicații pe dispozitivul tău iOS. Cu toate acestea, există unele limitări dacă nu sunteți parte a programului de dezvoltatori.
Odată ce contul dvs. este creat, mergeți la preferințele Xcode și adăugați-vă contul Apple. Apoi faceți clic pe Gestionați certificatele și adăugați un certificat nou pentru dezvoltarea iOS. Acest certificat este utilizat pentru a vă asigura că aplicația este dintr-o sursă cunoscută.
După ce sa terminat, ar trebui să puteți rula acum aplicația de pe dispozitiv. Click pe previzualizare > Previzualizați pe iOS în Fuse Studio și așteptați să lanseze Xcode. Odată ce Xcode este deschis, selectați dispozitivul și faceți clic pe butonul de redare. Aceasta va construi aplicația și o va instala pe dispozitiv. Dacă există o eroare de construire, este foarte probabil ca identificatorul pachetului de previzualizare să nu fie unic:
Schimbarea Identificatorul pachetului la ceva unic ar trebui să rezolve problema. Odată ce eroarea din secțiunea de semnare dispare, faceți clic din nou pe butonul de redare pentru a reconstrui aplicația. Acest lucru ar trebui să instalați aplicația pe dispozitiv.
Cu toate acestea, nu veți putea să deschideți aplicația până nu o aprobați. Puteți face acest lucru pe dispozitivul dvs. iOS accesând Setări > General > Gestionarea dispozitivelor și selectând e-mailul asociat contului tău Apple Developer. Aprobați-l, iar acest lucru ar trebui să deblocheze aplicația.
Pentru Android, ar trebui să puteți previzualiza aplicația fără pași suplimentari.
Asta e! În acest tutorial, ați învățat elementele de bază ale creării unei aplicații utilizând cadrul Fuse. Mai exact, ați creat o aplicație pentru cronometru. Prin crearea acestei aplicații, ați învățat cum să lucrați cu marcajul UX al Fuse și câteva dintre API-urile JavaScript ale Fuse. De asemenea, ați învățat cum să utilizați Fuse Studio pentru a previzualiza aplicația de pe computer și de telefonul dvs. în timp ce o dezvoltați.
