This is an old revision of the document!
Până acum target-ul nostru a fost RaspberryPi, dar în acest laborator și următorul noul target va fi un produs Fitbit, și anume Fitbit Versa 3 sau Fitbit Sense (produse lansate anul acesta). Vom utiliza Fitbit Software Development Kit (SDK) pentru a dezvolta o față de ceas (clock face) în cadrul acestui laborator, și o aplicație (app) în laboratorul următor, folosind mediul de dezvoltare pus la dispoziție de către Fitbit (Fitbit Studio) și simulatorul (Fitbit OS Simulator). Documentația pentru dezvoltatorii de aplicații Fitbit se poate găsi pe https://dev.fitbit.com/.
Setup-ul oficial poate fi găsit aici la secțiunea What You’ll Need.
Pentru a putea folosi infrastructura pusă la dispoziție de către Fitbit va trebui să urmați pașii:
O aplicație tipică are următoarea structură de directoare:
/app/
- directorul conține logica aplicației care urmează a fi executată pe device. Un fișier index.js
trebuie să existe în acest director, altfel operația de build va eșua./companion/
- director opțional, conține logica companion-ului care este executată pe device-ul mobil (capabil să facă request-uri către Internet și să comunice cu aplicația). Dacă existe un fișier index.js
atunci componenta companion se va builda./common/
- director opțional, conține fișiere care pot fi folosite atât de aplicație, cât și de companion./settings/
- director opțional, conține informații despre setările aplicației./resources/
- directorul conține toate resursele care sunt folosite de aplicație.package.json
- fișierul de configurare pentru aplicație.
/resources/
sunt:
/resources/index.view
- fișier obligatoriu, aici este definită interfața cu utilizatorul (fișier SVG). /resources/widget.defs
- fișier obligatoriu, acesta controlează ce widget-uri de sistem sunt disponibile pentru a fi folosite în index.view
./resources/*.css
- fișiere CSS care pot schimba aspectul elementelor din index.view
./resources/*.png
și /resources/*.jpg
- imagini ce pot fi folosite în index.view
folosind tag-ul <image>
.
0. Urmați primii 3 pași de la secțiunea Create Your First Project (Setup, Create a New Project, Installing) de pe https://dev.fitbit.com/getting-started/. În urma acestui exercițiu ar trebui să apară aceeași față de ceas (clock face) în simulator ca cea din ghid.
1. Ne propunem să creăm o nouă față de ceas (cea din GIF-ul de mai jos). Pentru aceasta o puteți edita pe cea de la exercițiul anterior sau să creați un nou proiect și să alegeți ca template tot Digital Clock. Descărcați template-ul pentru laborator de aici și aplicați-l în cadrul proiectului. Rulați aplicația în simulator.
app/index.js
. Template-ul conține comentarii de tip TODO pentru fiecare subpunct al exercițiilor. Vom utiliza doar Device APIs, documentația lor se află aici. Limbajul de programare utilizat este Javascript, dar ne vom limita la funcționalitățile de bază.
2. Deocamdată fața de ceas indică doar ora, dar nu și statisticile afișate in cele 4 cadrane. Pentru acest exercițiu ne propunem să selectăm prima opțiune (pașii).
statLabel
). Inițializați variabila currStat
care va stoca opțiunea curentă.
const my_const = 0
.let my_var = 0
.const cars = [“Volvo”, “BMW”, “Dacia”, “Skoda”]
.document.getElementById(<id>)
din Document API, <id>
fiind id-ul definit deja în /resources/index.view
.“darkturquoise”, “fb-red”, “orange”, “limegreen”
.x
se poate folosi x.style.fill = “red”
.x
se poate folosi x.text = “Steps”
.
3. Ne dorim ca fața de ceas să itereze prin cele 4 cadrane la apăsarea ecranului (click pe ecran în simulator). Funcția care a fost setată să se apeleze la un eveniment de click/tap este funcția changeStat()
. Completați-o astfel încât la fiecare apel să se selecteze următoarea opțiune (setând culoarea, textul îl vom seta la următorul exercițiu). Înainte de a seta noua opțiune asigurați-vă că ați deselectat-o pe cea anterioară (setați-i culoarea alb).
4. Pentru ca fața de ceas să fie completă, trebuie să îi adăugăm și datele pentru fiecare opțiune selectată. Completați funcția fillInStatLabel()
astfel încât la fiecare apel să se seteze text-ul afișat din variabila statLabel
în funcție de opțiunea curentă. Va trebui să includeți și să apelați API-urile pentru user-activity (pași, floors), heart-rate (hr) și power (baterie) pentru a obține datele.
currStat
.my_string = `${var_string}: ${var_number}`
.hrm
pentru a nu inițializa de fiecare dată un nou obiect.