Skapa en personlig aktivitetsloggare: 6 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:36

Min vän från London, Paul, ville hitta ett sätt att spåra hans mat, aktivitet och plats i en enda instrumentpanel. Det var då han kom på idén att skapa ett enkelt webbformulär som skulle skicka data till en instrumentpanel. Han skulle lägga både webbformuläret och instrumentpanelen på en webbsida och logga sina aktiviteter på språng. Därifrån skapades aktivitetsloggen! Koden i denna handledning är all Paul, förutom några små förändringar i färg, anpassning av instrumentpanelen och slang (brittisk till amerikansk översättning gjord av mig).

För det här projektet kommer vi att använda:

• CodePen
• Initialtillstånd
• Netlify

Vi skapar en personlig aktivitetsspårare men efter denna handledning och kod kan du göra detta till en webbformulär och spårare för allt du vill! Låt oss börja!

Steg 1: CodePen

CodePen är utvecklingsmiljö. Det låter dig skriva din kod i webbläsaren och se resultatet av den när du går. Vi har kod i HTML, CSS och JavaScript för att skapa ett webbformulär med listrutor, textrutor och geolokalisering. Du kan registrera dig gratis med den enda villkoren att du inte kan göra din kod privat, som vi kommer att ta upp senare.

Registrera dig först för CodePen. När du har gjort det kan du gaffla mitt projekt med all kod som redan är skapad. Detta skapar en kopia av koden i din egen instrumentpanel. Du kommer att se HTML till vänster, CSS i mitten och JavaScript till höger. Om du är expert på allt detta, glöm att läsa resten och gör ändringar som du vill! Om du är nyare på dessa språk har jag några förslag nedan om ändringar som du enkelt kan göra.

HTML

Denna kod är formatet för alla listrutor och lådor. Det är här som du kan ändra typen av saker du spårar och listar i listrutorna. I listrutan Träning kan du ändra typer av aktivitet (för närvarande vikter, löpning, yoga och konditionsträning). Du kan lägga till något i listan enligt formatet eller lägga till fler alternativ. Samma saker gäller för kötttyp, kaffestorlek och -typ och ölstorlek. I textrutan Skräp kan du ändra platshållarens ord (för närvarande chips, choklad, etc.). Detsamma kan göras för vikt (lbs), träning (minuter) och öl (abv %).

Du kan också använda den här konturen och helt ändra titlarna, listrutorna och platshållarna för att göra denna webbform till vilken typ av spårare du vill.

CSS

Denna kod anger bakgrundsfärgen, textjusteringen och kolumnjusteringen. Om du vill ändra bakgrunden från illamående rosa till något trevligare använder du bara en online -färgväljare för att hitta rätt färgvärde. Du kan justera texten eller kolumnerna åt höger, vänster eller i mitten.

JavaScript

Denna kod fungerar med geolokaliseringsknappen och skicka -knappen. Det finns inte mycket här jag skulle rekommendera att byta.

Exportera

När du har allt som du vill klickar du på exportknappen längst ned till höger och väljer exportera som.zip. Detta hämtar koden till en zip -fil och du ser den i din nedladdningsmapp.

Steg 2: Ursprunglig status

Initial State gör det möjligt för oss att skapa en anpassad instrumentpanel för den aktivitet vi spårar. Du kan registrera dig för en 14 dagars gratis provperiod. Därefter är det gratis för studenter med en edu -e -postadress eller $ 9,99 per månad för den individuella planen.

När du har loggat in eller registrerat dig går du till din bucket -hylla och skapar en ny dataströmhink genom att klicka på knappen skapa stream bucket (+moln). Du kan redigera namnet till vad du vill eller ändra det senare, jag valde Personal Activity Tracker. Om du markerar rutan Light Theme ger du instrumentpanelen en vit bakgrund. Om du klickar klart kommer din stream -hink att skapas.

Vi kommer att behöva information från hinkinställningarna senare för att kunna sätta in HTML -koden (API Endpoint & iframe embed).

Steg 3: Visual Studio -kod

Eftersom jag använder den kostnadsfria versionen av CodePen är all min kod offentlig. Av den anledningen vill jag inte lägga in mina API -slutpunkter och iframe i koden eftersom du måste behålla dina initiala tillståndsnycklar privata. Visual Studio Code låter mig redigera min kod lokalt från zip -filen jag laddade ner från CodePen. Du kan ladda ner den senaste versionen gratis från deras webbplats.

Packa upp dina kodfiler och öppna den mappen i Visual Studio Code. Härifrån kan du sedan redigera HTML -koden. Överst i filen ser du "ENTER API ENDPOINTS HERE". Du kan hitta API -slutpunkten genom att gå till hinken du skapade i Initial State, klicka på inställningar och under fliken Data ser du API Endpoint. Kopiera och klistra in detta i HTML -koden. Längst ner i HTML -koden ser du "ENTER EMBED SHARE HERE". Återigen går du till din hink i ursprungsläget, går till inställningarna och fliken Delning. Klicka på rutan Dela offentligt så ser du Dela efter inbädda. Kopiera bara URL: en i inbäddningsfältet för inbäddning (det kommer att se ut ungefär som "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Klistra in det i citattecken. Spara filen så är vi redo att skapa vår webbsida.

Steg 4: Netlify

Netlify är en allt-i-ett-plattform som låter dig bygga, distribuera och hantera ett webbprojekt. Du kan registrera dig gratis så gör det. När du har registrerat dig kommer du på din huvudsida att se en ruta som säger "Vill du distribuera en ny webbplats utan att ansluta till Git? Dra och släpp din mappsajt här." Så dra din uppdaterade CodePen -filmapp dit och släpp den. Därifrån distribuerar den din kod och skapar en länk till din nya webbsida. Klicka på länken så ser du ditt webbformulär och instrumentpanel.

Du måste skicka in lite data för att få dina brickor att dyka upp. Så fyll i ditt webbformulär och tryck på skicka. När du har gjort det går du in på din initiala statuspanel. Härifrån kan vi ändra kakeltyper, ändra storlek på kakel, flytta layouten, justera datafärgerna för att vara mer tilltalande för ögonen och lägga till några realtidsuttryck för att kartlägga emojis. Du har två alternativ för att få din instrumentpanel att passa inbäddningsstorleken: justera dina plattor så att de passar eller justera inbäddningsstorleken i koden.

Steg 5: Anpassa din instrumentpanel

Mätare grafer

Jag använde två typer av mätare i min instrumentbräda: båge och vätska. För att ändra typ av kakel högerklickar du på kakel och väljer Redigera kakel. Detta öppnar Tile -konfiguratorn. För ölstorleken valde jag mätartabell som kakeltyp och vätska som mätartyp. Jag ändrade också titeln, signalnyckelfärgen och lägsta/högsta värden. För Weight & Beer ABV använde jag arch arch -stilen.

Karta till Emojis

Jag kartlade övningstyp och kötttyp till emojis med hjälp av realtidsuttryck, så beroende på vilket objekt jag valde från rullgardinsmenyn skulle en specifik emoji dyka upp. Du kan se koden jag använde på bilderna. Du kan lägga till emojis på en Mac genom att trycka på kontroll+kommando+blanksteg eller på Windows från den här webbplatsen.

Skicka emojis i webbformulär

För saker som skräp skickar jag gärna emojis direkt till min instrumentpanel. Jag kopierar och klistrar in emojin i textrutan för webbformulär och klickar på skicka sedan visas emojin i min instrumentpanel!

Det krävs mycket spel för att anpassa den perfekta instrumentpanelen och alternativen är oändliga.

Bakgrundsbild

Du kan lägga till en bakgrundsbild på instrumentpanelen för att ge dig mer personlighet eller sammanhang.

Steg 6: Slutsats

Medan Paul byggde detta som en aktivitetsspårare erbjöd han andra idéer om hur detta skulle kunna användas med några mindre förändringar:

• Bästa kaffe/öl/restaurang i Town Tracker
• Var är mina vänner eller barn just nu och vad gör de? Spårare
• Interactive Golf Scorecard - Tracker för poäng och banor
• Paragliding Flight Logger - (Paul har mycket coolare hobbyer än jag)

Nu kan du spåra allt och allt. Denna kod tillhandahåller skalet för alla typer av webbformulär du vill skapa. Så lek och bli kreativ och visa mig vad du har! Och uppenbarligen, hurra för Paul för att han hjälpte till att skapa detta!