Zostavte si zapisovač osobných aktivít: 6 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:55

Môj priateľ z Londýna Paul chcel nájsť spôsob, ako sledovať svoje jedlo, aktivitu a polohu na jedinom palubnom paneli. Vtedy prišiel s nápadom vytvoriť jednoduchý webový formulár, ktorý by odosielal údaje na palubnú dosku. Na webovú stránku by vložil webový formulár aj informačný panel a na cestách by zaznamenával svoje aktivity. Odtiaľ bol vytvorený záznamník aktivít! Kód v tomto návode je celý Paul, s výnimkou niektorých malých zmien farby, prispôsobenia palubnej dosky a slangu (preklad z angličtiny do angličtiny som urobil ja).

Na tento projekt použijeme:

• CodePen
• Počiatočný stav
• Netlify

Vytvárame nástroj na sledovanie osobných aktivít, ale podľa tohto tutoriálu a kódu z neho môžete vytvoriť webový formulár a nástroj na sledovanie čohokoľvek! Začnime!

Krok 1: CodePen

CodePen je vývojové prostredie. Umožňuje vám napísať kód do prehliadača a priebežne zobrazovať jeho výsledky. Máme kód v HTML, CSS a JavaScript na vytvorenie webového formulára s rozbaľovacími ponukami, textovými poľami a geolokáciou. Môžete sa bezplatne zaregistrovať s jedinou podmienkou, že nemôžete svoj kód nastaviť ako súkromný, čomu sa budeme venovať neskôr.

Najprv sa zaregistrujte do CodePen. Akonáhle to urobíte, môžete môj projekt Fork so všetkým už vytvoreným kódom. Tým sa vytvorí kópia kódu na vašom vlastnom paneli. Vľavo uvidíte HTML, v strede CSS a napravo JavaScript. Ak ste odborníkom na všetky tieto záležitosti, zabudnite si prečítať zvyšok a vykonajte zmeny, ako chcete! Ak ste v týchto jazykoch nováčik, mám nižšie niekoľko návrhov na zmeny, ktoré môžete ľahko vykonať.

HTML

Tento kus kódu je formátom pre všetky rozbaľovacie ponuky a políčka. Na tomto mieste môžete zmeniť typ vecí, ktoré sledujete, a zoznamy v rozbaľovacích ponukách. V rozbaľovacej ponuke Cvičenie môžete zmeniť typy aktivít (v súčasnosti váhy, beh, joga a kardio). Do zoznamu môžete pridať niečo podľa formátu alebo pridať ďalšie možnosti. To isté platí pre typ mäsa, veľkosť a typ kávy a veľkosť piva. V textovom poli Nevyžiadaná pošta môžete zmeniť zástupné slová (aktuálne čipy, čokoláda atď.). To isté môžete urobiť pre hmotnosť (libry), cvičenie (minúty) a pivo (abv %).

Môžete tiež použiť tento prehľad a úplne zmeniť názvy, rozbaľovacie možnosti a zástupné symboly, aby sa z tohto webového formulára stal ľubovoľný typ sledovača, ktorý chcete.

CSS

Tento kúsok kódu nastavuje farbu pozadia, zarovnanie textu a zarovnanie stĺpcov. Ak chcete zmeniť pozadie z nepríjemnej ružovej na niečo príjemnejšie, použite online výber farieb a nájdite správnu hodnotu farby. Text alebo stĺpce môžete zarovnať doprava, doľava alebo do stredu.

JavaScript

Tento kúsok kódu funguje ako tlačidlo geolokácie a tlačidlo na odoslanie. Nie je tu toho veľa, čo by som odporučil zmeniť.

Export

Keď máte všetko nastavené podľa svojich predstáv, kliknite na tlačidlo exportu vpravo dole a vyberte export ako.zip. Tým sa kód stiahne do súboru zip a uvidíte ho v priečinku na stiahnutie.

Krok 2: Počiatočný stav

Počiatočný stav nám umožní vytvoriť prispôsobený informačný panel pre aktivitu, ktorú sledujeme. Môžete sa zaregistrovať na 14 -dňovú bezplatnú skúšobnú verziu. Potom je to zadarmo pre študentov s e -mailovou adresou edu alebo 9,99 dolárov mesačne pre individuálny plán.

Po prihlásení alebo registrácii prejdite na poličku vedierka a vytvorte nové vedro dátových tokov kliknutím na tlačidlo Vytvoriť vedro streamu (+cloud). Meno môžete upraviť na čokoľvek, čo sa vám páči, alebo ho neskôr zmeniť, vybral som si nástroj na sledovanie osobnej aktivity. Ak začiarknete políčko Svetlý motív, panel bude mať biele pozadie. Kliknite na hotovo a vytvorí sa váš segment streamu.

Informácie z nastavení segmentu budeme potrebovať neskôr na vloženie do kódu HTML (API Endpoint & iframe embed).

Krok 3: Kód Visual Studio

Keďže používam bezplatnú verziu CodePen, všetok môj kód je verejný. Z tohto dôvodu nechcem vkladať svoje koncové body API a rámce iframe do kódu, pretože prístupové kľúče počiatočného stavu musíte ponechať v tajnosti. Visual Studio Code mi umožní lokálne upravovať môj kód zo súboru zip, ktorý som si stiahol z CodePen. Najnovšiu verziu si môžete zadarmo stiahnuť z ich webových stránok.

Rozbaľte súbory s kódom a otvorte tento priečinok v programe Visual Studio Code. Odtiaľto potom môžete upravovať HTML kód. V hornej časti súboru uvidíte „TU ZADAJTE ENDPOINTS API“. Koncový bod API nájdete tak, že prejdete na vedierko, ktoré ste vytvorili v počiatočnom stave, kliknete na nastavenia a na karte Údaje sa zobrazí koncový bod rozhrania API. Skopírujte to a prilepte to do kódu HTML. V spodnej časti kódu HTML sa zobrazí „ZADAJTE VKLADNÉ ZDIEĽANIE TU“. V pôvodnom stave znova prejdite do svojej sekcie, prejdite na nastavenia a kartu Zdieľanie. Kliknite na pole Zdieľať verejne a uvidíte položku Zdieľať vložením. Skopírujte iba adresu URL do poľa na zdieľanie vloženia (bude vyzerať napríklad ako „https://iot.app.initialstate.com/embed/#/tiles/xxxxxx“). Vložte to do úvodzoviek. Uložte súbor a sme pripravení vytvoriť našu webovú stránku.

Krok 4: Netlify

Netlify je platforma typu všetko v jednom, ktorá vám umožní vytvoriť, nasadiť a spravovať webový projekt. Môžete sa zaregistrovať zadarmo, urobte to. Po registrácii sa na vašej hlavnej stránke zobrazí pole s textom „Chcete nasadiť nový web bez pripojenia k Gitu? Sem presuňte web so svojimi priečinkami.“Presuňte tam aktualizovaný priečinok so súborom CodePen a pusťte ho. Odtiaľ nasadí váš kód a vytvorí odkaz na vašu novú webovú stránku. Kliknite na odkaz a zobrazí sa váš webový formulár a informačný panel.

Ak chcete, aby sa vaše dlaždice zobrazili, musíte odoslať niektoré údaje. Vyplňte teda svoj webový formulár a kliknite na tlačidlo odoslať. Akonáhle to urobíte, prejdite na hlavný panel počiatočného stavu. Odtiaľto môžeme meniť typy dlaždíc, meniť veľkosť dlaždíc, presúvať rozloženie, upravovať farby údajov tak, aby boli príjemnejšie pre oči, a pridávať výrazy v reálnom čase na mapovanie na emodži. Máte dve možnosti, ako prispôsobiť hlavný panel veľkosti vloženia: upravte svoje dlaždice tak, aby vyhovovali alebo upravte veľkosť vloženia v kóde.

Krok 5: Prispôsobte si informačný panel

Rozchodové grafy

Na prístrojovej doske som použil dva typy meradiel: oblúkový a tekutý. Ak chcete zmeniť typ dlaždice, kliknite pravým tlačidlom na dlaždicu a vyberte položku Upraviť dlaždicu. Otvorí sa konfigurátor dlaždíc. Pre veľkosť piva som ako typ dlaždice vybral Gauge Chart a ako štýl Gauge Liquid. Tiež som zmenil nadpis, farbu signálneho kľúča a minimálne/maximálne hodnoty. Pre Weight & Beer ABV som použil štýl oblúka.

Mapa na emodži

Mapoval som typ cvičenia a typ mäsa na emodži pomocou výrazov v reálnom čase, takže podľa toho, ktorú položku som vybral z rozbaľovacieho zoznamu, sa zobrazia konkrétne emoji. Kód, ktorý som použil, môžete vidieť na fotografiách. Emodži môžete na počítač Mac pridať stlačením klávesov Ctrl+Command+medzerník alebo do systému Windows z tejto webovej stránky.

Pošlite emodži vo webovom formulári

Pokiaľ ide o veci ako nevyžiadaná pošta, rád pošlem emodži priamo na môj informačný panel. Skopírujem a prilepím emodži do textového poľa webového formulára a kliknem na tlačidlo Odoslať, potom sa emodži zobrazí na mojom informačnom paneli!

Prispôsobenie perfektnej palubnej dosky si vyžaduje veľa hier a možnosti sú nekonečné.

Obrázok na pozadí

Na svoj informačný panel môžete pridať obrázok na pozadí, aby ste získali väčšiu osobnosť alebo kontext.

Krok 6: Záver

Zatiaľ čo to Paul vybudoval ako nástroj na sledovanie aktivity, ponúkol ďalšie nápady, ako by sa to dalo použiť s menšími zmenami:

• Najlepšia káva/pivo/reštaurácia v meste Tracker
• Kde sú práve moji priatelia alebo deti a čo robia? Sledovač
• Interaktívna tabuľka golfových výsledkov - sledovanie skóre a kurzov
• Záznamník paraglidingu - (Paul má oveľa chladnejšie koníčky ako ja)

Teraz môžete sledovať čokoľvek a všetko. Tento kód poskytuje shell pre akýkoľvek druh webového formulára, ktorý chcete vytvoriť. Hrajte sa, buďte kreatívni a ukážte, čo máte! A samozrejme pozdravujeme Paula za pomoc pri jeho vytváraní!