Bygg en personlig aktivitetslogger: 6 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:20

Vennen min fra London, Paul, ønsket å finne en måte å spore maten, aktiviteten og beliggenheten på et enkelt dashbord. Det var da han kom på ideen om å lage et enkelt webskjema som ville sende data til et dashbord. Han ville legge både nettskjemaet og dashbordet på en nettside og logge aktivitetene hans mens du er på farten. Derfra ble aktivitetsloggeren opprettet! Koden i denne opplæringen er alt Paul, bortsett fra noen små endringer i farge, dashbordtilpasning og slang (britisk til amerikansk oversettelse gjort av meg).

Til dette prosjektet skal vi bruke:

• CodePen
• Opprinnelige tilstand
• Netlify

Vi oppretter en personlig aktivitetssporing, men etter denne opplæringen og koden kan du gjøre dette til et webskjema og sporing for alt du ønsker! La oss komme i gang!

Trinn 1: CodePen

CodePen er utviklingsmiljø. Den lar deg skrive koden din i nettleseren og se resultatene av den mens du går. Vi har kode i HTML, CSS og JavaScript for å lage et webskjema med rullegardinmenyer, tekstbokser og geografisk plassering. Du kan registrere deg gratis med den eneste betingelsen at du ikke kan gjøre koden din privat, som vi vil ta opp senere.

Registrer deg først for CodePen. Når du har gjort det, kan du gaffel prosjektet mitt med all koden som allerede er opprettet. Dette vil opprette en kopi av koden i ditt eget dashbord. Du vil se HTML til venstre, CSS i midten og JavaScript til høyre. Hvis du er ekspert på alt dette, glem å lese resten og gjør endringer som du vil! Hvis du er nyere på disse språkene, har jeg noen forslag nedenfor om endringer du enkelt kan gjøre.

HTML

Denne koden er formatet for alle rullegardinene og boksene. Det er her du kan endre typen ting du sporer og viser i nedtrekkslistene. I rullegardinmenyen Trening kan du endre aktivitetstypene (for øyeblikket Vekter, Løp, Yoga og Kardio). Du kan legge til noe i listen etter formatet eller legge til flere alternativer. De samme tingene gjelder kjøtttype, kaffestørrelse og -type og ølstørrelse. I søppelboksen kan du endre plassholderordene (for tiden chips, sjokolade, etc.). Det samme kan gjøres for vekt (lbs), trening (minutter) og øl (abv %).

Du kan også bruke denne disposisjonen og fullstendig endre titler, rullegardinalternativer og plassholdere for å lage denne webformen til en hvilken som helst type tracker du ønsker.

CSS

Denne koden angir bakgrunnsfarge, tekstjustering og kolonnejustering. Hvis du vil endre bakgrunnen fra kvalmende rosa til noe mer behagelig, kan du bare bruke en online fargevelger for å finne riktig fargeverdi. Du kan justere teksten eller kolonnene til høyre, venstre eller midt.

JavaScript

Denne koden fungerer med geolokaliseringsknappen og send -knappen. Det er ikke mye her jeg vil anbefale å bytte.

Eksport

Når du har alt du liker, klikker du på eksportknappen nederst til høyre og velger eksport som.zip. Dette vil laste ned koden til en zip -fil, og du vil se den i nedlastingsmappen.

Trinn 2: Opprinnelig tilstand

Initial State lar oss lage et tilpasset oversikt over aktiviteten vi sporer. Du kan registrere deg for en 14 dagers gratis prøveperiode. Etter det er det gratis for studenter med en edu -e -postadresse eller $ 9,99 per måned for den individuelle planen.

Når du har logget deg på eller registrert deg, går du til bøttehyllen din og oppretter en ny datastrømbøtte ved å klikke på knappen Lag stream -bøtte (+sky). Du kan redigere navnet til det du liker eller endre det senere, jeg valgte Personal Activity Tracker. Hvis du merker av for Light Theme -boksen, vil du gi dashbordet en hvit bakgrunn. Klikk ferdig, og strømbøtten din blir opprettet.

Vi trenger informasjon fra bøtteinnstillingene senere for å sette inn HTML -koden (API -endepunkt og iframe -innebygging).

Trinn 3: Visual Studio Code

Siden jeg bruker gratisversjonen av CodePen, er all koden min offentlig. Av denne grunn ønsker jeg ikke å sette API -endepunktene mine og iframe inn i koden siden du må holde tilgangsnøklene til den opprinnelige staten private. Visual Studio Code lar meg redigere koden min lokalt fra zip -filen jeg lastet ned fra CodePen. Du kan laste ned den nyeste versjonen gratis fra deres nettsted.

Pakk ut kodefilene og åpne den mappen i Visual Studio Code. Herfra kan du deretter redigere HTML -koden. Mot toppen av filen vil du se "ENTER API ENDPOINTS HERE". Du kan finne API -endepunktet ved å gå til bøtte du opprettet i Initial State, klikke på innstillinger og under fanen Data vil du se API -endepunkt. Kopier og lim dette inn i HTML -koden. Nederst i HTML -koden ser du "ENTER EMBED SHARE HERE". Gå igjen til bøtta i opprinnelig tilstand, gå til innstillingene og kategorien Deling. Klikk på Del offentlig -boksen, og du vil se Del etter innebygging. Kopier bare nettadressen i embed -delingsboksen (den ser omtrent ut som "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Lim det inn i anførselstegnene. Lagre filen, så er vi klare til å lage vår webside.

Trinn 4: Netlify

Netlify er en alt-i-ett-plattform som lar deg bygge, distribuere og administrere et webprosjekt. Du kan registrere deg gratis, så gjør det. Når du har registrert deg, vil du på hovedsiden din se en boks som sier "Vil du distribuere et nytt nettsted uten å koble deg til Git? Dra og slipp mappesiden din her." Så dra den oppdaterte CodePen -filmappen dit og slipp den. Derfra distribuerer den koden og oppretter en kobling til den nye websiden din. Klikk på lenken, så ser du nettskjemaet og oversikten.

Du må sende inn noen data for å få flisene dine til å vises. Så fyll ut nettskjemaet ditt og trykk send. Når du har gjort det, går du til dashbordet i initialstatusen. Herfra kan vi endre flisetyper, endre størrelse på fliser, flytte oppsettet rundt, justere datafarger for å være mer behagelig for øynene og legge til noen sanntidsuttrykk for å kartlegge emojier. Du har to alternativer for å få dashbordet til å passe til innebygningsstørrelsen: juster flisene slik at de passer eller juster størrelsen på innebyggingen i koden.

Trinn 5: Tilpass dashbordet

Måler grafer

Jeg brukte to typer målere i dashbordet mitt: bue og væske. Hvis du vil endre flisetypen, høyreklikker du på flisen og velger Rediger flis. Dette åpner Tile -konfiguratoren. For ølstørrelsen valgte jeg Gauge Chart som Tile type og Liquid som Gauge Style. Jeg endret også tittelen, fargen på signalnøkkelen og minimums-/maksimumsverdiene. For Weight & Beer ABV brukte jeg buemålerstilen.

Kart til Emojis

Jeg kartla treningstypen og kjøtttypen til emojis ved hjelp av sanntidsuttrykk, så avhengig av hvilket element jeg valgte fra rullegardinlisten, ville en bestemt emoji dukke opp. Du kan se koden jeg brukte på bildene. Du kan legge til emojis på en Mac ved å trykke kontroll+kommando+mellomrom eller på Windows fra dette nettstedet.

Send emojier i webskjema

For ting som søppel liker jeg å sende inn emojis rett til dashbordet mitt. Jeg kopierer og limer inn emojien i tekstboksen for nettskjemaet og klikker send, så vises emojien i dashbordet mitt!

Det krever mye lek for å tilpasse det perfekte dashbordet, og alternativene er uendelige.

Bakgrunnsbilde

Du kan legge til et bakgrunnsbilde på dashbordet for å gi deg data mer personlighet eller kontekst.

Trinn 6: Konklusjon

Mens Paul bygde dette som en aktivitetssporing, tilbød han andre ideer om hvordan dette kan brukes med noen mindre endringer:

• Beste kaffe/øl/restaurant i Town Tracker
• Hvor er vennene mine eller barna mine akkurat nå, og hva gjør de? Tracker
• Interaktivt Golf Scorecard - Tracker for poeng og baner
• Paragliding Flight Logger - (Paul har mye kulere hobbyer enn meg)

Nå kan du spore alt og alt. Denne koden gir skallet for enhver form for nettskjema du vil opprette. Så leke og bli kreativ og vis meg hva du har! Og tydeligvis, heiar Paul for å ha bidratt til å lage dette!