Zgradite zapisovalnik osebnih dejavnosti: 6 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:02

Moj prijatelj iz Londona Paul je želel najti način za sledenje svoji hrani, dejavnosti in lokaciji na eni sami nadzorni plošči. Takrat je prišel na idejo, da bi ustvaril preprost spletni obrazec, ki bi podatke pošiljal na nadzorno ploščo. Spletni obrazec in nadzorno ploščo bi postavil na spletno stran, svoje dejavnosti pa zapisal na poti. Od tam je bil ustvarjen beležnik dejavnosti! Koda v tej vadnici je vsa Paul, razen nekaj rahlih sprememb v barvi, prilagajanju armaturne plošče in slengu (jaz sem prevedel iz britanskega v ameriško).

Za ta projekt bomo uporabili:

• CodePen
• Začetno stanje
• Netlify

Ustvarjamo osebni sledilnik dejavnosti, vendar lahko po tej vadnici in kodi to naredite v spletnem obrazcu in sledilniku za vse, kar želite! Začnimo!

1. korak: CodePen

CodePen je razvojno okolje. Omogoča vam, da kodo vpišete v brskalnik in si ogledate njene rezultate. V HTML, CSS in JavaScript imamo kodo za ustvarjanje spletnega obrazca s spustnimi seznami, besedilnimi polji in geolokacijo. Lahko se brezplačno prijavite z edinim pogojem, da svoje kode ne morete narediti zasebno, kar bomo obravnavali kasneje.

Najprej se prijavite za CodePen. Ko to storite, lahko forknete moj projekt z vso ustvarjeno kodo. Tako boste ustvarili kopijo kode na svoji nadzorni plošči. Na levi boste videli HTML, CSS v sredini in JavaScript na desni. Če ste strokovnjak za vse to, pozabite prebrati preostanek in spremeniti, kot želite! Če ste novi v teh jezikih, imam spodaj nekaj predlogov o spremembah, ki jih lahko preprosto naredite.

HTML

Ta del kode je oblika za vse spustne sezname in polja. Tu lahko v spustnih menijih spremenite vrsto stvari, ki jim sledite, in sezname. V spustnem meniju Vaja lahko spremenite vrste dejavnosti (trenutno Uteži, Tek, Joga in Kardio). Po obliki lahko dodate nekaj na seznam ali dodate več možnosti. Enako velja za vrsto mesa, velikost in vrsto kave ter velikost piva. V besedilnem polju Neželeno lahko spremenite nadomestne besede (trenutno čips, čokolada itd.). Enako je mogoče storiti za težo (lbs), vajo (minute) in pivo (abv %).

Uporabite lahko tudi ta oris in popolnoma spremenite naslove, spustne možnosti in nadomestne značke, da naredite ta spletni obrazec kakršen koli sledilnik, ki ga želite.

CSS

Ta del kode določa barvo ozadja, poravnavo besedila in poravnavo stolpcev. Če želite ozadje iz zoprno rožnate spremeniti v nekaj prijetnejšega, uporabite spletni izbirnik barv, da poiščete pravo barvno vrednost. Besedilo ali stolpce lahko poravnate desno, levo ali na sredino.

JavaScript

Ta del kode deluje z gumbom za geolokacijo in gumbom za predložitev. Tu ni veliko, priporočam spremembo.

Izvozi

Ko nastavite vse po svojem okusu, kliknite gumb za izvoz v spodnjem desnem kotu in izberite izvoz kot.zip. S tem boste kodo prenesli v datoteko zip in videli jo boste v mapi za prenos.

2. korak: Začetno stanje

Začetno stanje nam bo omogočilo ustvarjanje prilagojene nadzorne plošče dejavnosti, ki ji sledimo. Lahko se prijavite za 14 -dnevno brezplačno preskusno različico. Po tem je brezplačno za študente z e -poštnim naslovom edu ali 9,99 USD na mesec za individualni paket.

Ko se prijavite ali se prijavite, pojdite na polico vedra in ustvarite novo vedro podatkovnega toka, tako da kliknete gumb za ustvarjanje vedra toka (+oblak). Ime lahko uredite po želji ali pa ga spremenite pozneje, jaz sem izbral osebni sledilnik dejavnosti. Če potrdite polje Light Theme, boste armaturni plošči dali belo ozadje. Kliknite končano in ustvari se vaše vedro toka.

Kasneje bomo potrebovali podatke iz nastavitev segmenta, ki jih bomo vnesli v kodo HTML (API Endpoint & iframe embed).

3. korak: Koda Visual Studio

Ker uporabljam brezplačno različico CodePen, je vsa moja koda javna. Iz tega razloga ne želim vstaviti svojih končnih točk API -ja in iframea v kodo, saj morate ključe za dostop do začetnega stanja ohraniti zasebne. Koda Visual Studio mi bo omogočila lokalno urejanje kode iz datoteke zip, ki sem jo prenesla iz programa CodePen. Najnovejšo različico lahko brezplačno prenesete z njihovega spletnega mesta.

Razpakirajte datoteke s kodo in odprite to mapo v kodi Visual Studio. Od tu lahko nato uredite kodo HTML. Na vrhu datoteke boste videli "VSTOPI KONČNE TOČKE API -ja TUKAJ". Končno točko API -ja najdete tako, da odprete vedro, ki ste ga ustvarili v začetnem stanju, kliknite nastavitve in na zavihku Podatki boste videli končno točko API -ja. To kopirajte in prilepite v kodo HTML. Na dnu kode HTML boste videli "VNESI VKLJUČENO DELENO TUKAJ". Ponovno pojdite v vedro v začetnem stanju, pojdite na nastavitve in zavihek Skupna raba. Kliknite polje Skupna raba javno in videli boste Skupna raba z vdelavo. Kopirajte samo URL v polje za vdelano skupno rabo (videti bo nekako kot »https://iot.app.initialstate.com/embed/#/tiles/xxxxxx«). To prilepite v narekovaje. Shranite datoteko in pripravljeni smo na izdelavo naše spletne strani.

4. korak: Netlify

Netlify je vse-v-enem platforma, ki vam omogoča izdelavo, uvajanje in upravljanje spletnega projekta. Lahko se brezplačno prijavite, zato to storite. Ko ste prijavljeni, boste na svoji glavni strani videli polje z napisom "Želite uvesti novo spletno mesto, ne da bi se povezali z Gitom? Povlecite in spustite mesto mape sem." Zato povlecite posodobljeno mapo datotek CodePen tja in jo spustite. Od tam bo razmestila vašo kodo in ustvarila povezavo do vaše nove spletne strani. Kliknite povezavo in videli boste svoj spletni obrazec in nadzorno ploščo.

Če želite, da se ploščice prikažejo, morate predložiti nekaj podatkov. Zato izpolnite spletni obrazec in pritisnite gumb za pošiljanje. Ko to storite, pojdite na nadzorno ploščo začetnega stanja. Od tu lahko spreminjamo vrste ploščic, spreminjamo velikost ploščic, premikamo postavitev, prilagajamo barve podatkov, ki so bolj prijetne za oči, in dodajamo nekaj izrazov v realnem času za preslikavo v emojije. Na voljo imate dve možnosti za prilagoditev velikosti armaturne plošče: prilagodite ploščice, da se prilegajo, ali prilagodite velikost vdelave v kodo.

5. korak: prilagodite svojo nadzorno ploščo

Merilni grafikoni

Na armaturni plošči sem uporabil dve vrsti merilnikov: lok in tekočino. Če želite spremeniti vrsto ploščice, z desno miškino tipko kliknite ploščico in izberite Uredi ploščico. S tem se odpre konfigurator ploščic. Za velikost piva sem kot vrsto ploščice izbral merilno tabelo in kot merilni slog tekočino. Spremenil sem tudi naslov, barvo signalnega ključa in minimalne/največje vrednosti. Za Weight & Beer ABV sem uporabil slog merilnika loka.

Zemljevid za Emojis

Vrsto vadbe in vrsto mesa sem s pomočjo izrazov v realnem času preslikal v emojise, tako da se bo glede na to, kateri predmet sem izbral s spustnega seznama, prikazal določen emoji. Kodo, ki sem jo uporabil, lahko vidite na fotografijah. Na računalniku Mac lahko dodate emojije tako, da na tem spletnem mestu pritisnete control+command+preslednica ali v sistemu Windows.

Pošljite emoji v spletnem obrazcu

Za stvari, kot je Neželena, rad pošiljam emojije neposredno na nadzorno ploščo. Emoji kopiram in prilepim v besedilno polje spletnega obrazca in kliknem na pošlji, nato pa se emoji prikaže na moji nadzorni plošči!

Za prilagajanje popolne armaturne plošče je potrebno veliko igranja, možnosti pa so neskončne.

Slika ozadja

Na nadzorno ploščo lahko dodate sliko ozadja, ki vam daje podatke več osebnosti ali konteksta.

6. korak: Zaključek

Čeprav je Paul to ustvaril kot sledilnik dejavnosti, je ponudil druge ideje, kako bi to lahko uporabili z nekaj manjšimi spremembami:

• Najboljša kava/pivo/restavracija v mestu Town Tracker
• Kje so zdaj moji prijatelji ali otroci in kaj počnejo? Sledilnik
• Interaktivna kazalka golfa - sledilnik rezultatov in tečajev
• Sekalnik letenja z jadralnim padalom - (Paul ima veliko bolj kul hobije kot jaz)

Zdaj lahko spremljate karkoli in vse. Ta koda ponuja lupino za vse vrste spletnih obrazcev, ki jih želite ustvariti. Zato se igrajte in bodite ustvarjalni ter mi pokažite, kaj imate! In očitno, Pavla pozdravljam, ker je pomagal ustvariti to!