Sukurkite asmeninės veiklos registratorių: 6 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:44

Mano draugas iš Londono Paulius norėjo rasti būdą, kaip viename prietaisų skydelyje stebėti savo maistą, veiklą ir vietą. Būtent tada jis sugalvojo sukurti paprastą žiniatinklio formą, kuri nusiųstų duomenis į prietaisų skydelį. Jis įdėjo žiniatinklio formą ir prietaisų skydelį į tinklalapį ir registruoja savo veiklą kelyje. Iš ten buvo sukurtas veiklos registratorius! Šioje pamokoje esantis kodas yra visas Paulius, išskyrus nedidelius spalvos, prietaisų skydelio pritaikymo ir žargono pakeitimus (mano atliktas vertimas iš anglų į amerikiečių kalbą).

Šiam projektui naudosime:

• „CodePen“
• Pradinė būsena
• „Netlify“

Mes kuriame asmeninės veiklos stebėjimo priemonę, tačiau vadovaudamiesi šia pamoka ir kodu galite tai padaryti žiniatinklio forma ir sekti viską, ko norite! Pradėkime!

1 žingsnis: „CodePen“

„CodePen“yra kūrimo aplinka. Tai leidžia jums parašyti savo kodą naršyklėje ir pamatyti jo rezultatus. Turime kodą HTML, CSS ir „JavaScript“, kad sukurtume žiniatinklio formą su išskleidžiamaisiais meniu, teksto laukeliais ir geografine padėtimi. Galite užsiregistruoti nemokamai, tik su sąlyga, kad negalite padaryti savo kodo privataus, kurį aptarsime vėliau.

Pirmiausia prisiregistruokite prie „CodePen“. Kai tai padarysite, galite atskirti mano projektą su visu jau sukurtu kodu. Tai sukurs kodo kopiją jūsų prietaisų skydelyje. Kairėje matysite HTML, centre - CSS, o dešinėje - „JavaScript“. Jei esate visų šių sričių ekspertas, nepamirškite perskaityti likusių dalykų ir atlikite pakeitimus, kaip jums patinka! Jei esate naujokas šiomis kalbomis, toliau pateikiame keletą pasiūlymų dėl pakeitimų, kuriuos galite lengvai atlikti.

HTML

Šis kodo gabalas yra visų išskleidžiamųjų meniu ir laukelių formatas. Būtent čia galite pakeisti stebimų dalykų tipus ir sąrašus išskleidžiamuosiuose meniu. Išskleidžiamajame meniu Pratimai galite pakeisti veiklos rūšis (šiuo metu svoriai, bėgimas, joga ir kardio). Galite pridėti ką nors prie sąrašo pagal formatą arba pridėti daugiau parinkčių. Tas pats pasakytina apie mėsos tipą, kavos dydį ir tipą bei alaus dydį. Šlamšto teksto laukelyje galite pakeisti vietos žodžius (šiuo metu traškučiai, šokoladas ir pan.). Tą patį galima padaryti svorio (svarų), mankštos (minutės) ir alaus (abv %) atveju.

Taip pat galite naudoti šią schemą ir visiškai pakeisti pavadinimus, išskleidžiamojo meniu parinktis ir vietos rezervavimo ženklus, kad ši žiniatinklio forma taptų bet kokia jūsų norima sekimo priemonė.

CSS

Šis kodo elementas nustato fono spalvą, teksto lygiavimą ir stulpelių lygiavimą. Jei norite pakeisti foną iš pykinančios rožinės į kažką malonesnio, tiesiog naudokite internetinį spalvų parinkiklį, kad surastumėte tinkamą spalvų vertę. Galite lygiuoti tekstą ar stulpelius į dešinę, į kairę arba į centrą.

„JavaScript“

Šis kodo elementas veikia geografinės padėties ir pateikimo mygtuku. Čia nėra daug, aš rekomenduočiau keisti.

Eksportuoti

Kai viską nustatysite pagal savo skonį, spustelėkite eksportavimo mygtuką apačioje dešinėje ir pasirinkite eksportuoti kaip.zip. Tai atsisiųs kodą į ZIP failą ir pamatysite jį atsisiuntimų aplanke.

2 žingsnis: pradinė būsena

Pradinė būsena leis mums sukurti pritaikytą stebimos veiklos informacijos suvestinę. Galite užsiregistruoti 14 dienų nemokamam bandymui. Po to studentai, turintys edu el. Pašto adresą, yra nemokami arba 9,99 USD per mėnesį už individualų planą.

Prisijungę ar prisiregistravę eikite į savo segmentų lentyną ir sukurkite naują duomenų srauto grupę spustelėdami mygtuką Sukurti srauto grupę (+debesis). Vardą galite redaguoti bet kokiu, kas jums patinka, arba vėliau jį pakeisti, aš pasirinkau „Personal Activity Tracker“. Jei pažymėsite langelį „Šviesos tema“, prietaisų skydelyje pasirodys baltas fonas. Spustelėkite „Atlikta“ir bus sukurtas srauto segmentas.

Informacijos iš segmento nustatymų mums reikės vėliau, kad galėtume įdėti į HTML kodą (API galinis taškas ir „iframe“įdėjimas).

3 veiksmas: „Visual Studio“kodas

Kadangi naudoju nemokamą „CodePen“versiją, visas mano kodas yra viešas. Dėl šios priežasties nenoriu įterpti savo API galinių taškų ir „iframe“į kodą, nes jums reikia, kad jūsų pradinės būsenos prieigos raktai būtų privatūs. „Visual Studio Code“leis man redaguoti savo kodą vietoje iš ZIP kodo, kurį atsisiunčiau iš „CodePen“. Naujausią versiją galite nemokamai atsisiųsti iš jų svetainės.

Išpakuokite kodo failus ir atidarykite tą aplanką „Visual Studio Code“. Čia galite redaguoti HTML kodą. Failo viršuje pamatysite „Įveskite API ENDPOINTS ČIA“. API galinį tašką galite rasti apsilankę pradinėje būsenoje sukurtame segmente, spustelėkite nustatymus ir skirtuke Duomenys matysite API galinį tašką. Nukopijuokite ir įklijuokite jį į HTML kodą. HTML kodo apačioje pamatysite „Įveskite dalijimąsi ČIA“. Vėl eikite į savo kibirą pradinėje būsenoje, eikite į nustatymus ir skirtuką Bendrinimas. Spustelėkite langelį Bendrinti viešai ir pamatysite Bendrinti pagal įterpimą. Nukopijuokite tik URL įterpimo bendrinimo laukelyje (jis atrodys kaip „https://iot.app.initialstate.com/embed/#/tiles/xxxxxx“). Įklijuokite tai į kabutes. Išsaugokite failą ir mes pasiruošę sukurti savo tinklalapį.

4 žingsnis: „Netlify“

„Netlify“yra „viskas viename“platforma, leidžianti kurti, diegti ir valdyti žiniatinklio projektą. Galite užsiregistruoti nemokamai, tai darykite. Kai būsite užsiregistravę, pagrindiniame puslapyje pamatysite langelį: „Norite įdiegti naują svetainę neprisijungę prie„ Git “? Vilkite ir numeskite savo aplanko svetainę čia“. Taigi vilkite ten atnaujintą „CodePen“failų aplanką ir numeskite. Iš ten jis įdiegs jūsų kodą ir sukurs nuorodą į naują tinklalapį. Spustelėkite nuorodą ir pamatysite savo žiniatinklio formą ir prietaisų skydelį.

Kad plytelės būtų rodomos, turite pateikti tam tikrus duomenis. Taigi užpildykite žiniatinklio formą ir paspauskite „Pateikti“. Kai tai padarysite, eikite į pradinės būsenos prietaisų skydelį. Čia galime pakeisti plytelių tipus, keisti plytelių dydį, perkelti išdėstymą, pakoreguoti duomenų spalvas, kad jos būtų malonesnės akims, ir pridėti keletą emocijų realaus laiko išraiškų. Turite dvi parinktis, kad prietaisų skydelis atitiktų įterpimo dydį: sureguliuokite plyteles, kad jos atitiktų, arba koreguokite įterpimo dydį į kodą.

5 veiksmas: tinkinkite prietaisų skydelį

Matuoklio grafikai

Prietaisų skydelyje naudoju dviejų tipų matuoklius: arką ir skystį. Norėdami pakeisti plytelių tipą, dešiniuoju pelės mygtuku spustelėkite plytelę ir pasirinkite Redaguoti plytelę. Tai atvers plytelių konfigūraciją. Alaus dydžiui kaip plytelių tipą pasirinkau matuoklių lentelę, o matuoklio stiliui - skystį. Aš taip pat pakeičiau pavadinimą, signalo klavišo spalvą ir minimalias/maksimalias vertes. „Weight & Beer ABV“naudoju arkos matuoklio stilių.

Jaustukų žemėlapis

Pratimų tipą ir mėsos tipą susiejau su jaustukais, naudodamas realaus laiko išraiškas, todėl priklausomai nuo to, kurį elementą pasirinkau iš išskleidžiamojo sąrašo, bus rodoma konkreti jaustukas. Nuotraukose galite pamatyti kodą, kurį naudoju. Galite pridėti jaustukų „Mac“sistemoje paspausdami „Control“+„Command“+tarpo klavišas arba „Windows“iš šios svetainės.

Siųskite jaustukus žiniatinklio forma

Tokiems dalykams kaip šiukšlės man patinka siųsti jaustukus tiesiai į savo prietaisų skydelį. Nukopijuosiu ir įklijuosiu jaustuką į žiniatinklio formos teksto laukelį ir spustelėsiu „Pateikti“, tada jaustukas bus rodomas mano prietaisų skydelyje!

Norint pritaikyti tobulą prietaisų skydelį, reikia daug žaisti, o galimybių yra begalė.

Fono vaizdas

Prie prietaisų skydelio galite pridėti fono paveikslėlį, kad suteiktumėte daugiau asmenybės ar konteksto.

6 žingsnis: Išvada

Nors Paulius sukūrė tai kaip veiklos stebėjimo priemonę, jis pasiūlė kitų idėjų, kaip tai būtų galima panaudoti atlikus nedidelius pakeitimus:

• Geriausia kava/alus/restoranas mieste „Town Tracker“
• Kur dabar yra mano draugai ar vaikai ir ką jie veikia? Sekėjas
• Interaktyvi golfo rezultatų kortelė - rezultatų ir kursų stebėjimo priemonė
• Skrydžiai parasparniais - (Paulius turi daug įdomesnių pomėgių nei aš)

Dabar galite sekti viską ir viską. Šis kodas suteikia apvalkalą bet kokiai norimai sukurti žiniatinklio formai. Taigi žaisk ir būk kūrybingas bei parodyk, ką turi! Ir akivaizdu, sveikinu Paulių, kad padėjo tai sukurti!