Bou 'n persoonlike aktiwiteitsregistreerder: 6 stappe

2025 Outeur: John Day | [email protected]. Laas verander: 2025-01-13 06:56

My vriend van Londen, Paul, wou 'n manier vind om sy kos, aktiwiteite en ligging in 'n enkele paneelbord op te spoor. Toe kom hy op die idee om 'n eenvoudige webvorm te skep wat data na 'n paneelbord stuur. Hy plaas beide die webvorm en paneelbord in 'n webblad en teken sy aktiwiteite onderweg aan. Van daar af is die aktiwiteitsregistreerder geskep! Die kode in hierdie tutoriaal is alles Paul, behalwe vir 'n paar klein veranderinge in kleur, aanpassing van die dashboard en slang (ek het die Britse na Amerikaanse vertaling gedoen).

Vir hierdie projek gaan ons die volgende gebruik:

• Kodepen
• Aanvanklike staat
• Netlify

Ons skep 'n persoonlike aktiwiteitstracker, maar na aanleiding van hierdie tutoriaal en kode, kan u dit in 'n webvorm en 'n spoorsnyer maak vir alles wat u wil! Laat ons begin!

Stap 1: CodePen

CodePen is 'n ontwikkelingsomgewing. Hiermee kan u u kode in die blaaier skryf en die resultate daarvan sien terwyl u gaan. Ons het kode in HTML, CSS en JavaScript om 'n webvorm te skep met aftrekkies, teksblokkies en geografiese ligging. U kan gratis aanmeld, met die enigste voorwaarde dat u nie u kode privaat kan maak nie, wat ons later sal aanspreek.

Meld u eers aan by CodePen. Sodra u dit gedoen het, kan u my projek vurk met al die kode wat reeds geskep is. Dit sal 'n afskrif van die kode in u eie paneelbord skep. U sien HTML aan die linkerkant, CSS in die middel en JavaScript aan die regterkant. As u 'n kenner is in al hierdie dinge, vergeet dan om die res te lees en verander soos u wil! As u hierdie tale nuwer het, het ek 'n paar voorstelle hieronder oor veranderinge wat u maklik kan aanbring.

HTML

Hierdie stuk kode is die formaat vir al die aftrekkies en bokse. Hier kan u die tipe dinge wat u opspoor en lys in die keuselyste, verander. In die keuselys Oefening kan u die tipe aktiwiteit verander (tans gewigte, hardloop, joga en kardio). U kan iets by die lys voeg volgens die formaat of meer opsies byvoeg. Dieselfde geld vir vleissoort, koffiegrootte en -tipe en biergrootte. In die rommel -teksblokkie kan u die plekhouerwoorde verander (tans skyfies, sjokolade, ens.). Dieselfde kan gedoen word vir gewig (lbs), oefening (minute) en bier (abv %).

U kan hierdie uiteensetting ook gebruik en die titels, aftrekopsies en plekhouers heeltemal verander om hierdie webvorm te maak van enige soort spoorsnyer wat u wil.

CSS

Hierdie stuk kode stel die agtergrondkleur, teksbelyning en kolombelyning in. As u die agtergrond van pienk naar iets aangenamer wil verander, gebruik dan 'n aanlyn kleurplukker om die regte kleurwaarde te vind. U kan die teks of kolomme regs, links of middel in lyn bring.

JavaScript

Hierdie stukkie kode werk met die geolokasie -knoppie en die knoppie stuur. Hier is nie veel wat ek aanbeveel om te verander nie.

Uitvoer

Sodra u alles na u smaak ingestel het, klik op die uitvoerknoppie regs onder en kies uitvoer as.zip. Dit sal die kode in 'n zip -lêer aflaai en u sal dit in u aflaai -lêergids sien.

Stap 2: Aanvanklike toestand

Met Initial State kan ons 'n pasgemaakte paneelbord maak van die aktiwiteit wat ons volg. U kan inteken op 'n gratis proeftydperk van 14 dae. Daarna is dit gratis vir studente met 'n edu -e -posadres of $ 9,99 per maand vir die individuele plan.

Sodra u aangemeld het of aangemeld het, gaan na u emmerrak en skep 'n nuwe datastroomemmer deur op die knoppie skep stroomemmer (+wolk) te klik. U kan die naam verander na wat u wil of dit later verander, ek het Personal Tracker gekies. As u die boks Light Theme merk, gee die paneelbord 'n wit agtergrond. Klik klaar en u stroomemmer word geskep.

Ons benodig later inligting uit die emmerinstellings om die HTML -kode (API -eindpunt en iframe -insluiting) in te voer.

Stap 3: Visual Studio -kode

Aangesien ek die gratis weergawe van CodePen gebruik, is al my kode openbaar. Om hierdie rede wil ek nie my API -eindpunte en iframe in die kode plaas nie, aangesien u u toegangsleutels vir die oorspronklike staat privaat moet hou. Met Visual Studio Code kan ek my kode plaaslik wysig vanuit die zip -lêer wat ek van CodePen afgelaai het. U kan die nuutste weergawe gratis van hul webwerf aflaai.

Pak die kodelêers uit en maak die gids oop in Visual Studio Code. Hiervandaan kan u die HTML -kode wysig. Bo -aan die lêer sien u 'ENTER API ENDPOINTS HERE'. U kan die API -eindpunt vind deur na die emmer te gaan wat u in die oorspronklike toestand geskep het, op die instellings te klik en onder die blad Data sien u API -eindpunt. Kopieer en plak dit in die HTML -kode. Aan die onderkant van die HTML -kode sien u "TIK INBEDELDE DEEL HIER". Gaan weer na u emmer in die oorspronklike toestand, gaan na die instellings en die oortjie Deel. Klik op die boks Deel openbaar, en u sal sien Deel deur in te sluit. Kopieer slegs die URL in die embed -deelblok (dit sal ongeveer soos "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx" lyk). Plak dit in die aanhalingstekens. Stoor die lêer en ons is gereed om ons webwerf te skep.

Stap 4: Netlify

Netlify is 'n alles-in-een platform waarmee u 'n webprojek kan bou, implementeer en bestuur. U kan gratis aanmeld, so doen dit. Sodra u aangemeld is, sien u 'n venster op u hoofblad wat lui: "Wil u 'n nuwe webwerf implementeer sonder om met Git aan te sluit? Sleep en laat u lêergids hier val." Sleep dus u opgedateerde gids van die CodePen -lêer daarheen en laat dit val. Van daar af sal dit u kode implementeer en 'n skakel na u nuwe webblad skep. Klik op die skakel en u sal u webvorm en paneelbord sien.

U moet 'n paar data indien om u teëls te laat verskyn. Vul dus u webvorm in en klik op indien. Sodra u dit gedoen het, gaan na u oorspronklike staatskerm. Van hier af kan ons teëlsoorte verander, die grootte van die teëls verander, die uitleg beweeg, die datakleure meer aangenaam maak vir die oë en 'n paar intydse uitdrukkings by die kaart aan emoji's voeg. U het twee opsies om u paneelbord by die ingeboude grootte te laat pas: pas u teëls aan of pas die grootte van die inbed in die kode aan.

Stap 5: Pas u kontroleskerm aan

Meetgrafieke

Ek het twee soorte meters in my paneelbord gebruik: boog en vloeistof. Om die tipe teël te verander, klik met die rechtermuisknop op die teël en kies Tile wysig. Dit sal die Tile -konfigurator oopmaak. Vir die biergrootte het ek die metertabel as die teëltipe gekies en die vloeistof as die maatstyl. Ek het ook die titel, kleur van die seinsleutel en die minimum/maksimum waardes verander. Vir die Weight & Beer ABV het ek die boogmeter -styl gebruik.

Kaart na Emojis

Ek het die tipe oefening en vleissoort aan emoji's gekarteer met behulp van real-time uitdrukkings, so afhangende van watter item ek uit die keuselys gekies het, sou 'n spesifieke emoji verskyn. U kan die kode sien wat ek op die foto's gebruik het. U kan emoji's op 'n Mac byvoeg deur op die webwerf beheer+command+spasiebalk in te voer.

Stuur emoji's in webvorm

Vir dinge soos rommel stuur ek graag emoji's direk na my paneelbord. Ek kopieer en plak die emoji in die tekskassie van die webvorm en klik op submit, dan verskyn die emoji in my dashboard!

Dit verg baie rondspeel om die perfekte dashboard aan te pas en die opsies is eindeloos.

Agtergrondprent

U kan 'n agtergrondprent by u dashboard voeg om data meer persoonlikheid of konteks te gee.

Stap 6: Gevolgtrekking

Terwyl Paulus dit as 'n aktiwiteitstracker gebou het, het hy wel ander idees gegee oor hoe dit met 'n paar klein veranderinge gebruik kan word:

• Beste koffie/bier/restaurant in Town Tracker
• Waar is my vriende of kinders nou en wat doen hulle? Spoorsnyer
• Interaktiewe gholfkaart - tellingopsporings vir tellings en kursusse
• Paragliding Flight Logger - (Paul het baie koeler stokperdjies as ek)

Nou kan u alles en alles opspoor. Hierdie kode bied die dop vir enige vorm van webvorm wat u wil skep. So speel rond en raak kreatief en wys my wat jy het! En natuurlik, 'n groet aan Paul vir die hulp om dit te skep!