Byg en personlig aktivitetslogger: 6 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:25

Min ven fra London, Paul, ønskede at finde en måde at spore sin mad, aktivitet og placering på et enkelt instrumentbræt. Det var da han kom på ideen om at oprette en simpel webformular, der ville sende data til et dashboard. Han lagde både webformularen og instrumentbrættet på en webside og loggede sine aktiviteter på farten. Derfra blev aktivitetsloggeren oprettet! Koden i denne vejledning er alt Paul, bortset fra nogle små ændringer i farve, instrumentbrættet tilpasning og slang (britisk til amerikansk oversættelse udført af mig).

Til dette projekt vil vi bruge:

• CodePen
• Oprindelig tilstand
• Netlify

Vi opretter en personlig aktivitetsmåler, men ved at følge denne vejledning og kode kan du gøre dette til en webformular og tracker til alt, hvad du vil! Lad os komme igang!

Trin 1: CodePen

CodePen er udviklingsmiljø. Det giver dig mulighed for at skrive din kode i browseren og se resultaterne af den, mens du går. Vi har kode i HTML, CSS og JavaScript til at oprette en webformular med rullelister, tekstbokse og geolokalisering. Du kan tilmelde dig gratis med den eneste betingelse, at du ikke kan gøre din kode privat, som vi vil behandle senere.

Først skal du tilmelde dig CodePen. Når du har gjort det, kan du gafle mit projekt med al den kode, der allerede er oprettet. Dette vil oprette en kopi af koden i dit eget dashboard. Du vil se HTML til venstre, CSS i midten og JavaScript til højre. Hvis du er ekspert i alt dette, glem at læse resten og foretag ændringer, som du vil! Hvis du er nyere til disse sprog, har jeg nogle forslag nedenfor om ændringer, du nemt kan foretage.

HTML

Dette stykke kode er formatet til alle rullelister og kasser. Det er her, du kan ændre typen af ting, du sporer og viser i rullemenuerne. I rullemenuen Træning kan du ændre aktivitetstyper (aktuelt Vægte, Løb, Yoga og kardio). Du kan tilføje noget til listen efter formatet eller tilføje flere muligheder. De samme ting gælder for kødtype, kaffestørrelse og -type og ølstørrelse. I tekstboksen Skram kan du ændre pladsholderordene (i øjeblikket chips, chokolade osv.). Det samme kan gøres for vægt (lbs), motion (minutter) og øl (abv %).

Du kan også bruge denne oversigt og helt ændre titlerne, rullemenuerne og pladsholderne til at gøre denne webform til enhver form for tracker, du ønsker.

CSS

Dette stykke kode angiver baggrundsfarve, tekstjustering og kolonnejustering. Hvis du vil ændre baggrunden fra kvalmende pink til noget mere behageligt, skal du bare bruge en online farvevælger til at finde den rigtige farveværdi. Du kan justere teksten eller kolonnerne til højre, venstre eller midt.

JavaScript

Dette stykke kode virker knappen til geolokalisering og indsendelse. Der er ikke meget her, jeg vil anbefale at ændre.

Eksport

Når alt er indstillet til din smag, skal du klikke på eksportknappen nederst til højre og vælge eksport som.zip. Dette vil downloade koden til en zip -fil, og du vil se den i din downloads -mappe.

Trin 2: Oprindelig tilstand

Initial State giver os mulighed for at oprette et tilpasset dashboard over den aktivitet, vi sporer. Du kan tilmelde dig en 14 dages gratis prøveperiode. Derefter er det gratis for studerende med en edu -e -mail -adresse eller $ 9,99 pr. Måned for den individuelle plan.

Når du har logget ind eller tilmeldt dig, skal du gå til din bucket -hylde og oprette en ny datastream -bucket ved at klikke på knappen Create stream bucket (+cloud). Du kan redigere navnet til hvad du vil eller ændre det senere, jeg valgte Personal Activity Tracker. Hvis du markerer boksen Light Theme, giver instrumentbrættet en hvid baggrund. Klik udført, og din streamspand oprettes.

Vi har brug for oplysninger fra indstillingerne til skovlen senere for at kunne indsættes i HTML -koden (API -endepunkt og iframe -indlejring).

Trin 3: Visual Studio -kode

Da jeg bruger den gratis version af CodePen, er al min kode offentlig. Af denne grund vil jeg ikke indsætte mine API -slutpunkter og iframe i koden, da du skal holde dine adgangsnøgler til den oprindelige tilstand private. Visual Studio Code tillader mig at redigere min kode lokalt fra den zip -fil, jeg downloadede fra CodePen. Du kan downloade den nyeste version gratis fra deres websted.

Pak dine kodefiler ud, og åbn den mappe i Visual Studio Code. Herfra kan du derefter redigere HTML -koden. Mod toppen af filen vil du se "ENTER API ENDPOINTS HERE". Du kan finde API -slutpunktet ved at gå til den spand, du oprettede i den oprindelige tilstand, klikke på indstillinger og under fanen Data vil du se API -slutpunkt. Kopier og indsæt dette i HTML -koden. Nederst i HTML -koden ser du "ENTER EMBED SHARE HERE". Gå igen til din spand i oprindelig tilstand, gå til indstillingerne og fanen Deling. Klik på feltet Del offentligt, og du vil se Del efter integrering. Kopier kun webadressen i embed -delingsfeltet (det ser sådan ud som "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Indsæt det i anførselstegnene. Gem filen, og vi er klar til at oprette vores webside.

Trin 4: Netlify

Netlify er en alt-i-en-platform, der giver dig mulighed for at opbygge, implementere og administrere et webprojekt. Du kan tilmelde dig gratis, så gør det. Når du er tilmeldt, vil du på din hovedside se en boks, der siger: "Vil du implementere et nyt websted uden at oprette forbindelse til Git? Træk og slip dit mappesite her." Så træk din opdaterede CodePen -filmappe derhen og slip den. Derfra vil den implementere din kode og oprette et link til din nye webside. Klik på linket, og du vil se din webformular og dashboard.

Du skal indsende nogle data for at få dine fliser til at dukke op. Så udfyld din webformular og tryk på send. Når du har gjort det, skal du gå ind på dit Initial State -dashboard. Herfra kan vi ændre flisetyper, ændre størrelsen på fliser, flytte layoutet rundt, justere datafarverne for at være mere behagelige for øjnene og tilføje nogle udtryk i realtid til at kortlægge emojis. Du har to muligheder for at få dit dashboard til at passe til indlejringsstørrelsen: juster dine fliser, så de passer, eller juster indlejringsstørrelsen i koden.

Trin 5: Tilpas dit instrumentbræt

Måler grafer

Jeg brugte to typer målere i mit instrumentbræt: bue og væske. Hvis du vil ændre flisetypen, skal du højreklikke på flisen og vælge Rediger flise. Dette åbner flisekonfiguratoren. Til ølstørrelsen valgte jeg målerdiagram som flisetype og væske som målerstil. Jeg ændrede også titlen, farven på signalnøglen og minimums-/maksimumværdierne. Til Weight & Beer ABV brugte jeg bueformet stil.

Kort til Emojis

Jeg kortlagde træningstypen og kødtypen til emojis ved hjælp af realtidsudtryk, så afhængigt af hvilket element jeg valgte fra rullelisten, ville en specifik emoji dukke op. Du kan se koden, jeg brugte på billederne. Du kan tilføje emojis på en Mac ved at trykke på kontrol+kommando+mellemrumstast eller på Windows fra dette websted.

Send emojis i webformular

For ting som uønsket sender jeg gerne emojis direkte til mit dashboard. Jeg kopierer og indsætter emojien i tekstfeltet til webformularen og klikker på send, så vises emojien i mit dashboard!

Det kræver meget at lege med at tilpasse det perfekte instrumentbræt, og mulighederne er uendelige.

Baggrundsbillede

Du kan tilføje et baggrundsbillede til dit dashboard for at give dig data mere personlighed eller kontekst.

Trin 6: Konklusion

Mens Paul byggede dette som en aktivitetstracker, tilbød han andre ideer om, hvordan dette kunne bruges med nogle mindre ændringer:

• Bedste kaffe/øl/restaurant i Town Tracker
• Hvor er mine venner eller børn lige nu, og hvad laver de? Tracker
• Interaktivt Golf Scorecard - Scorer og baner Tracker
• Paragliding Flight Logger - (Paul har meget køligere hobbyer end jeg)

Nu kan du spore alt og alt. Denne kode giver skallen til enhver form for webformular, du vil oprette. Så leg og vær kreativ og vis mig, hvad du har! Og selvfølgelig skal du heppe på Paul for at hjælpe med at skabe dette!