Een persoonlijke activiteitenlogger bouwen: 6 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:14

Mijn vriend uit Londen, Paul, wilde een manier vinden om zijn eten, activiteit en locatie in één dashboard te volgen. Toen kwam hij op het idee om een eenvoudig webformulier te maken dat gegevens naar een dashboard zou sturen. Hij zou zowel het webformulier als het dashboard op een webpagina plaatsen en onderweg zijn activiteiten loggen. Van daaruit is de activiteitenlogger gemaakt! De code in deze tutorial is helemaal Paul, met uitzondering van enkele kleine veranderingen in kleur, dashboardaanpassing en jargon (Brits naar Amerikaans vertaling door mij gedaan).

Voor dit project gaan we gebruiken:

• CodePen
• Oorspronkelijke toestand
• Netlify

We maken een persoonlijke activity tracker, maar door deze tutorial en code te volgen, kun je er een webformulier en tracker van maken voor alles wat je maar wilt! Laten we beginnen!

Stap 1: CodePen

CodePen is een ontwikkelomgeving. Hiermee kunt u uw code in de browser schrijven en de resultaten ervan bekijken terwijl u bezig bent. We hebben code in HTML, CSS en JavaScript om een webformulier te maken met vervolgkeuzelijsten, tekstvakken en geolocatie. U kunt zich gratis aanmelden met als enige voorwaarde dat u uw code niet privé kunt maken, wat we later zullen bespreken.

Meld u eerst aan voor CodePen. Als je dat eenmaal hebt gedaan, kun je mijn project Fork met alle code die al is gemaakt. Hiermee maakt u een kopie van de code in uw eigen dashboard. U ziet HTML aan de linkerkant, CSS in het midden en JavaScript aan de rechterkant. Als je een expert bent in al deze, vergeet dan de rest te lezen en breng wijzigingen aan zoals je wilt! Als je nieuwer bent in deze talen, heb ik hieronder enkele suggesties voor wijzigingen die je gemakkelijk kunt aanbrengen.

HTML

Dit stukje code is het formaat voor alle vervolgkeuzelijsten en vakken. Hier kunt u het soort dingen dat u bijhoudt en lijsten in de vervolgkeuzelijsten wijzigen. In de vervolgkeuzelijst Oefening kunt u de soorten activiteiten wijzigen (momenteel Gewichten, Hardlopen, Yoga en Cardio). U kunt iets aan de lijst toevoegen volgens het formaat of meer opties toevoegen. Hetzelfde geldt voor vleestype, koffiegrootte en -type en biergrootte. In het tekstvak Ongewenst kunt u de plaatsaanduidingswoorden wijzigen (momenteel chips, chocolade, enz.). Hetzelfde kan worden gedaan voor Gewicht (lbs), Oefening (minuten) en Bier (abv %).

U kunt dit overzicht ook gebruiken en de titels, vervolgkeuzemenu's en tijdelijke aanduidingen volledig wijzigen om van dit webformulier elke gewenste tracker te maken.

CSS

Dit stukje code stelt de achtergrondkleur, tekstuitlijning en kolomuitlijning in. Als je de achtergrond wilt veranderen van misselijkmakend roze in iets aangenamer, gebruik dan gewoon een online kleurenkiezer om de juiste kleurwaarde te vinden. U kunt de tekst of kolommen rechts, links of gecentreerd uitlijnen.

JavaScript

Dit stukje code werkt met de geolocatieknop en de verzendknop. Er is hier niet veel dat ik zou aanraden om te veranderen.

Exporteren

Als je alles naar wens hebt ingesteld, klik je rechtsonder op de exportknop en selecteer je exporteren als.zip. Hierdoor wordt de code naar een zipbestand gedownload en ziet u deze in uw downloadmap.

Stap 2: Oorspronkelijke staat

Met Initial State kunnen we een aangepast dashboard maken van de activiteit die we volgen. U kunt zich aanmelden voor een gratis proefperiode van 14 dagen. Daarna is het gratis voor studenten met een edu-e-mailadres of $ 9,99 per maand voor het individuele abonnement.

Nadat u zich heeft aangemeld of aangemeld, gaat u naar uw bucket-plank en maakt u een nieuwe datastream-bucket aan door op de knop stream-bucket maken (+cloud) te klikken. Je kunt de naam bewerken naar wat je maar wilt of deze later wijzigen, ik koos voor Personal Activity Tracker. Als u het vakje Lichtthema aanvinkt, krijgt het dashboard een witte achtergrond. Klik op klaar en je stream-bucket wordt gemaakt.

We hebben later informatie uit de bucket-instellingen nodig om in de HTML-code te plaatsen (API Endpoint & iframe embed).

Stap 3: Visual Studio-code

Aangezien ik de gratis versie van CodePen gebruik, is al mijn code openbaar. Om deze reden wil ik mijn API-eindpunten en iframe niet in de code insluiten, omdat je je Initial State-toegangssleutels privé moet houden. Met Visual Studio Code kan ik mijn code lokaal bewerken vanuit het zipbestand dat ik van CodePen heb gedownload. U kunt de nieuwste versie gratis downloaden van hun website.

Pak uw codebestanden uit en open die map in Visual Studio Code. Vanaf hier kunt u vervolgens de HTML-code bewerken. Naar de bovenkant van het bestand ziet u "VOER HIER API-ENDPOINTS IN". U kunt het API-eindpunt vinden door naar de bucket te gaan die u in de beginstatus hebt gemaakt, op instellingen te klikken en onder het tabblad Gegevens ziet u het API-eindpunt. Kopieer en plak deze in de HTML-code. Onderaan de HTML-code ziet u "VOER HIER EMBED SHARE IN". Ga weer naar je bucket in Initial State, ga naar de instellingen en het tabblad Delen. Klik op het vak Openbaar delen en u ziet Delen door insluiten. Kopieer alleen de URL in het ingesloten deelvenster (het ziet er ongeveer uit als "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Plak dat tussen de aanhalingstekens. Sla het bestand op en we zijn klaar om onze webpagina te maken.

Stap 4: Netlify

Netlify is een alles-in-één platform waarmee u een webproject kunt bouwen, implementeren en beheren. Je kunt je gratis aanmelden, dus doe dat. Als je eenmaal bent aangemeld, zie je op je hoofdpagina een vak met de tekst: "Wil je een nieuwe site implementeren zonder verbinding te maken met Git? Sleep je mapsite hierheen." Dus sleep uw bijgewerkte CodePen-bestandsmap daarheen en zet het neer. Van daaruit zal het uw code implementeren en een link naar uw nieuwe webpagina maken. Klik op de link en u ziet uw webformulier en dashboard.

U moet enkele gegevens indienen om uw tegels te laten verschijnen. Dus vul uw webformulier in en klik op verzenden. Zodra u dat doet, gaat u naar uw Initial State-dashboard. Vanaf hier kunnen we tegeltypes wijzigen, het formaat van tegels wijzigen, de lay-out verplaatsen, de gegevenskleuren aanpassen om aantrekkelijker te zijn voor de ogen en enkele realtime uitdrukkingen toevoegen om aan emoji's toe te wijzen. Je hebt twee opties om je dashboard in de insluitgrootte te laten passen: pas je tegels aan zodat ze passen of pas de insluitgrootte in de code aan.

Stap 5: Pas uw dashboard aan

Meter grafieken

Ik gebruikte twee soorten meters in mijn dashboard: boog en vloeistof. Om het type tegel te wijzigen, klikt u met de rechtermuisknop op de tegel en selecteert u Tegel bewerken. Hiermee wordt de tegelconfigurator geopend. Voor de biergrootte selecteerde ik Gauge Chart als het tegeltype en Vloeistof als de Gauge Style. Ik heb ook de titel, de kleur van de signaaltoets en de minimum-/maximumwaarden gewijzigd. Voor de Weight & Beer ABV heb ik de boogmeterstijl gebruikt.

Toewijzen aan Emoji's

Ik heb het type Oefening en Vleestype toegewezen aan emoji's met behulp van Real-Time Expressions, dus afhankelijk van het item dat ik in de vervolgkeuzelijst selecteerde, zou een specifieke emoji verschijnen. Op de foto's zie je de code die ik heb gebruikt. Je kunt emoji's toevoegen op een Mac door op control+command+spatiebalk te drukken of op Windows vanaf deze website.

Emoji's in webvorm verzenden

Voor dingen als Junk stuur ik emoji's graag rechtstreeks naar mijn dashboard. Ik kopieer en plak de emoji in het tekstvak van het webformulier en klik op verzenden, waarna de emoji in mijn dashboard verschijnt!

Het vergt veel spelen om het perfecte dashboard aan te passen en de opties zijn eindeloos.

Achtergrond afbeelding

U kunt een achtergrondafbeelding aan uw dashboard toevoegen om uw gegevens meer persoonlijkheid of context te geven.

Stap 6: Conclusie

Terwijl Paul dit als een activity tracker bouwde, kwam hij met andere ideeën over hoe dit met enkele kleine wijzigingen zou kunnen worden gebruikt:

• Beste koffie/bier/restaurant in Town Tracker
• Waar zijn mijn vrienden of kinderen nu en wat doen ze? Volger
• Interactieve Golf Scorecard - Scores & Cursussen Tracker
• Paragliding Flight Logger - (Paul heeft veel coolere hobby's dan ik)

Nu kun je alles en nog wat volgen. Deze code biedt de shell voor elk soort webformulier dat u wilt maken. Dus speel wat rond en wees creatief en laat me zien wat je hebt! En natuurlijk, complimenten voor Paul voor het helpen creëren hiervan!