Személyes tevékenységnapló készítése: 6 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:39

A londoni barátom, Paul, szeretett volna módot találni arra, hogy egyetlen műszerfalon nyomon lehessen követni étkezését, tevékenységét és helyét. Ekkor jött az ötlet, hogy hozzon létre egy egyszerű webes űrlapot, amely adatokat küld a műszerfalnak. Mind a webes űrlapot, mind az irányítópultot egy weboldalba helyezte, és útközben naplózta tevékenységét. Innen jött létre a tevékenységnapló! Ebben az oktatóanyagban minden kód Paul, kivéve néhány apró színváltozást, a műszerfal testreszabását és a szlenget (brit -amerikai fordítást én készítettem).

Ehhez a projekthez a következőket fogjuk használni:

• CodePen
• Kezdeti állapot
• Netlify

Létrehozunk egy személyes tevékenységkövetőt, de ezt az oktatóanyagot és kódot követve webes űrlappá és nyomkövetővé teheti bármit, amit szeretne! Lássunk neki!

1. lépés: CodePen

A CodePen fejlesztői környezet. Lehetővé teszi, hogy írja be a kódot a böngészőbe, és menet közben megtekinthesse annak eredményét. HTML, CSS és JavaScript kódunk van egy webes űrlap létrehozásához legördülő listákkal, szövegdobozokkal és földrajzi helymeghatározással. Ingyenesen regisztrálhat azzal az egyetlen feltétellel, hogy nem teheti priváttá kódját, amellyel később foglalkozunk.

Először regisztráljon a CodePen -re. Ha ezt megteszi, elágazhatja a projektemet az összes már létrehozott kóddal. Ezzel létrehozza a kód másolatát a saját irányítópultján. A bal oldalon a HTML, a középen a CSS, a jobb oldalon a JavaScript látható. Ha szakértő vagy ezekben, felejtsd el elolvasni a többit, és változtass kedved szerint! Ha még nem ismeri ezeket a nyelveket, az alábbiakban javaslatokat teszek a könnyen elvégezhető változtatásokra.

HTML

Ez a kódrészlet az összes legördülő menü és mező formátuma. Itt módosíthatja a nyomon követett dolgok és listák típusát a legördülő listákban. A Gyakorlat legördülő menüben módosíthatja a tevékenység típusait (jelenleg súlyok, futás, jóga és kardió). Hozzáadhat valamit a listához a formátumot követve, vagy további beállításokat adhat hozzá. Ugyanez vonatkozik a hús típusára, a kávé méretére és típusára, valamint a sör méretére. A Szemét szövegmezőben megváltoztathatja a helyőrző szavakat (jelenleg chips, csokoládé stb.). Ugyanez tehető a súly (lbs), a gyakorlat (perc) és a sör (abv %) esetében is.

Ezt a vázlatot is használhatja, és teljesen megváltoztathatja a címeket, a legördülő lehetőségeket és a helyőrzőket, hogy ez a webes űrlap bármilyen kívánt nyomkövetővé váljon.

CSS

Ez a kódrészlet állítja be a háttérszínt, a szöveg igazítását és az oszlop igazítását. Ha a hátteret émelyítő rózsaszínről valami kellemesebbre szeretné változtatni, használja az online színválasztót, hogy megtalálja a megfelelő színértéket. A szöveget vagy az oszlopokat jobbra, balra vagy középre igazíthatja.

JavaScript

Ez a kódrészlet a földrajzi helymeghatározás és a beküldés gombot használja. Itt nincs sok, javaslom a cserét.

Export

Ha mindent a saját ízlése szerint állított be, kattintson az exportálás gombra a jobb alsó sarokban, és válassza az exportálás.zip formátumban lehetőséget. Ez letölti a kódot egy zip fájlba, és látni fogja a letöltések mappában.

2. lépés: Kezdeti állapot

A kezdeti állapot lehetővé teszi számunkra, hogy személyre szabott irányítópultot hozzunk létre a nyomon követett tevékenységről. Regisztrálhat egy 14 napos ingyenes próbaidőszakra. Ezt követően ingyenes az e -mail címmel rendelkező diákok számára, vagy havi 9,99 USD az egyéni csomagért.

Miután bejelentkezett vagy regisztrált, menjen a vödrös polcára, és hozzon létre egy új adatfolyam -csoportot a patak vödör létrehozása gombra kattintva (+felhő). A nevet tetszés szerint szerkesztheti, vagy később megváltoztathatja, én a Personal Activity Tracker -t választottam. Ha bejelöli a Világos téma négyzetet, a műszerfal fehér hátteret kap. Kattintson a Kész gombra, és létrejön a stream csoportja.

Később szükségünk lesz a vödörbeállítások információira, hogy a HTML -kódba (API -végpont és iframe -beágyazás) bevigyük őket.

3. lépés: Visual Studio kód

Mivel a CodePen ingyenes verzióját használom, minden kódom nyilvános. Emiatt nem szeretném az API végpontjaimat és az iframe keretet beilleszteni a kódba, mivel a kezdeti állapot hozzáférési kulcsait privátban kell tartani. A Visual Studio Code lehetővé teszi számomra, hogy a kódomat helyben módosítsam a CodePen -ből letöltött zip fájlból. A legújabb verziót ingyenesen letöltheti a webhelyükről.

Csomagolja ki a kódfájlokat, és nyissa meg a mappát a Visual Studio Code -ban. Innen szerkesztheti a HTML kódot. A fájl tetején megjelenik az „ENTER API ENDPOINTS ITTER” felirat. Az API -végpontot megtalálja, ha a kezdeti állapotban létrehozott vödörbe lép, kattintson a beállításokra, és az Adatok lapon megjelenik az API -végpont. Másolja ki és illessze be a HTML kódba. A HTML kód alján az "ENTER EMBED SHARE ITTER" felirat jelenik meg. Ismét menjen a vödörbe kezdeti állapotban, menjen a beállításokhoz és a Megosztás fülre. Kattintson a Megosztás nyilvánosan mezőre, és megjelenik a Megosztás beágyazással. Másolja csak az URL -t a beágyazási megosztási mezőbe (így fog kinézni: „https://iot.app.initialstate.com/embed/#/tiles/xxxxxx”). Illessze be az idézőjelek közé. Mentse el a fájlt, és készen állunk weboldalunk létrehozására.

4. lépés: Netlify

A Netlify egy all-in-one platform, amely lehetővé teszi egy webes projekt felépítését, telepítését és kezelését. Ingyenesen regisztrálhat, ezért tegye meg. Miután regisztrált, a főoldalon megjelenik egy mező, amely azt mondja: "Szeretne új webhelyet telepíteni anélkül, hogy csatlakozna a Git -hez? Húzza ide a mappáját." Tehát húzza oda a frissített CodePen fájlmappát, és dobja el. Innen telepíti a kódot, és létrehoz egy linket az új weboldalához. Kattintson a linkre, és megjelenik a webes űrlap és az irányítópult.

A lapkák megjelenítéséhez bizonyos adatokat be kell adnia. Tehát töltse ki a webes űrlapot, és nyomja meg a Küldés gombot. Miután ezt megtette, lépjen a Kezdeti állapot irányítópultjára. Innen módosíthatjuk a csempe típusát, átméretezhetjük a lapokat, mozgathatjuk az elrendezést, beállíthatjuk az adatszíneket, hogy azok jobban tetszjenek a szemnek, és hozzáadhatunk néhány valós idejű kifejezést a hangulatjelekhez. Két lehetőség közül választhat, hogy a műszerfal illeszkedjen a beágyazási mérethez: állítsa be a csempéket, vagy illessze be a beágyazás méretét a kódba.

5. lépés: Testreszabhatja az irányítópultot

Mérőgráfok

A műszerfalban kétféle mérőt használtam: boltívet és folyadékot. A csempe típusának megváltoztatásához kattintson jobb gombbal a csempére, és válassza a Csempe szerkesztése lehetőséget. Ezzel megnyílik a Mozaik konfigurátor. A sörmérethez a Gauge Chart csempe típusát és a folyadékot a Gauge Style -t választottam. Megváltoztattam a címet, a jelkulcs színét és a minimális/maximális értékeket is. A Weight & Beer ABV esetében az ívmérő stílust használtam.

Térkép hangulatjelekhez

A gyakorlatot és a hústípust hangulatjelekhez rendeltem valós idejű kifejezések használatával, így attól függően, hogy melyik elemet választottam a legördülő listából, egy adott hangulatjel jelenik meg. A képeken láthatod az általam használt kódot. Hangulatokat adhat hozzá Mac számítógépen a Control+Command+szóköz billentyűk lenyomásával vagy a Windows rendszeren ezen a webhelyen.

Hangulatjelek küldése webes formában

Az olyan dolgokhoz, mint a Junk, szeretek hangulatjeleket közvetlenül a műszerfalra küldeni. Másolom és illesszem be a hangulatjelet a webes űrlap szövegmezőjébe, majd kattints a Küldés gombra, majd a hangulatjel megjelenik az irányítópulton!

Sok játékot igényel a tökéletes műszerfal testreszabása, és a lehetőségek végtelenek.

Háttérkép

Hozzáadhat egy háttérképet az irányítópulthoz, hogy személyesebbé tegye vagy kontextusba helyezze az adatokat.

6. lépés: Következtetés

Míg Pál ezt tevékenységkövetőként építette fel, más ötleteket is kínált arra vonatkozóan, hogyan lehetne ezt használni néhány apró változtatással:

• A legjobb kávé/sör/étterem a Town Trackerben
• Hol vannak most a barátaim vagy a gyerekeim és mit csinálnak? Nyomozó
• Interaktív Golf Scorecard - Pontszámok és pályák Tracker
• Siklóernyős repülésnapló - (Paulnak sokkal menőbb hobbija van, mint nekem)

Most bármit és mindent nyomon követhet. Ez a kód biztosítja a héjat bármilyen létrehozni kívánt webes űrlaphoz. Szóval játssz és legyél kreatív, és mutasd meg, mit kaptál! És nyilván, üdv Paulnak, hogy segített ennek létrehozásában!