Bumuo ng isang Personal na Logger ng Aktibidad: 6 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:10

Ang aking kaibigan mula sa London, si Paul, ay nais maghanap ng isang paraan upang subaybayan ang kanyang pagkain, aktibidad, at lokasyon sa isang solong dashboard. Iyon ay kapag siya ay may ideya na lumikha ng isang simpleng form sa web na magpapadala ng data sa isang dashboard. Ilalagay niya ang parehong form sa web at dashboard sa isang webpage at i-log ang kanyang mga aktibidad on the go. Mula doon nilikha ang aktibidad ng logger! Ang code sa tutorial na ito ay lahat kay Paul, maliban sa ilang bahagyang pagbabago sa kulay, pagpapasadya ng dashboard, at slang (British hanggang American translation na ginawa ko).

Para sa proyektong ito ay gagamitin namin:

• CodePen
• Paunang Estado
• Netlify

Lumilikha kami ng isang personal na tracker ng aktibidad ngunit ang pagsunod sa tutorial at code na ito ay maaari mo itong gawing isang form sa web at tracker para sa anumang nais mo! Magsimula na tayo!

Hakbang 1: CodePen

Ang CodePen ay kapaligiran sa pag-unlad. Pinapayagan kang isulat ang iyong code sa browser at makita ang mga resulta nito sa iyong pagpunta. Mayroon kaming code sa HTML, CSS, at JavaScript upang lumikha ng isang form sa web na may mga drop-down, text box, at geolocation. Maaari kang mag-sign up nang libre gamit ang tanging itinadhana na hindi mo maaaring gawing pribado ang iyong code, na tatalakayin namin sa paglaon.

Una, mag-sign up para sa CodePen. Kapag nagawa mo na iyon maaari mong Fork ang aking proyekto sa lahat ng code na nalikha. Lilikha ito ng isang kopya ng code sa iyong sariling dashboard. Makakakita ka ng HTML sa kaliwa, CSS sa gitna, at JavaScript sa kanan. Kung ikaw ay dalubhasa sa lahat ng ito, kalimutan na basahin ang natitira at gumawa ng mga pagbabago ayon sa gusto mo! Kung mas bago ka sa mga wikang ito, mayroon akong ilang mga mungkahi sa ibaba tungkol sa mga pagbabagong madali mong magagawa.

HTML

Ang piraso ng code na ito ay ang format para sa lahat ng mga drop-down at kahon. Dito mo mababago ang uri ng mga bagay na sinusubaybayan mo at nakalista sa mga drop-down. Sa drop-down na Ehersisyo, maaari mong baguhin ang mga uri ng aktibidad (kasalukuyang Mga Timbang, Tumatakbo, Yoga, at Cardio). Maaari kang magdagdag ng isang bagay sa listahan ng pagsunod sa format o magdagdag ng higit pang mga pagpipilian. Ang magkatulad na mga bagay ay napupunta para sa Meat type, Laki at uri ng kape, at laki ng Beer. Sa Junk text box maaari mong baguhin ang mga salita ng placeholder (kasalukuyang chips, tsokolate, atbp.). Parehong maaaring magawa para sa Timbang (lbs), Ehersisyo (minuto), at Beer (abv%).

Maaari mo ring gamitin ang balangkas na ito at ganap na baguhin ang mga pamagat, drop-down na pagpipilian, at mga placeholder upang gawin ang web na ito na bumubuo ng anumang uri ng tracker na gusto mo.

CSS

Itinatakda ng piraso ng code na ito ang kulay sa background, pagkakahanay ng teksto, at pagkakahanay ng haligi. Kung nais mong baguhin ang background mula sa nakakasuka na rosas sa isang bagay na mas kaaya-aya lamang gumamit ng isang tagapili ng kulay sa online upang mahanap ang tamang halaga ng kulay. Maaari mong ihanay ang teksto o mga haligi sa kanan, kaliwa, o gitna.

JavaScript

Gumagana ang piraso ng code na ito ang pindutan ng geolocation at isumite ang pindutan. Walang gaanong bagay na inirerekumenda kong palitan.

I-export

Kapag natakda mo na ang lahat ayon sa gusto mo, i-click ang pindutan ng pag-export sa kanang bahagi sa ibaba at piliin ang i-export bilang.zip. I-download nito ang code sa isang zip file at makikita mo ito sa iyong folder ng mga pag-download.

Hakbang 2: Paunang Estado

Papayagan kami ng Paunang Estado na lumikha ng isang pasadyang dashboard ng aktibidad na sinusubaybayan namin. Maaari kang mag-sign up para sa isang 14 na araw na libreng pagsubok. Pagkatapos nito libre ito para sa Mga Mag-aaral na may edu email address o $ 9.99 bawat buwan para sa Indibidwal na plano.

Kapag nag-sign in ka o nag-sign up pumunta sa iyong bucket shelf at lumikha ng isang bagong bucket ng stream ng data sa pamamagitan ng pag-click sa lumikha ng button ng stream bucket (+ cloud). Maaari mong i-edit ang pangalan sa anumang gusto mo o baguhin ito sa paglaon, pinili ko ang Personal na Tracker ng Aktibidad. Kung susuriin mo ang kahon ng Light Theme bibigyan mo ang dashboard ng isang puting background. Tapos na ang pag-click at malilikha ang iyong stream bucket.

Kakailanganin namin ng impormasyon mula sa mga setting ng balde sa paglaon upang ilagay sa HTML code (API Endpoint & iframe embed).

Hakbang 3: Visual Studio Code

Dahil ginagamit ko ang libreng bersyon ng CodePen lahat ng aking code ay pampubliko. Para sa kadahilanang ito, hindi ko nais na ilagay ang aking mga endpoint ng API at iframe na naka-embed sa code dahil kailangan mong panatilihing pribado ang iyong mga pindutan sa pag-access ng Paunang Estado. Papayagan ako ng Visual Studio Code na i-edit ang aking code nang lokal mula sa zip file na na-download ko mula sa CodePen. Maaari mong i-download ang pinakabagong bersyon nang libre mula sa kanilang website.

I-zip ang iyong mga file ng code at buksan ang folder na iyon sa Visual Studio Code. Mula dito maaari mo nang mai-edit ang HTML code. Patungo sa tuktok ng file makikita mo ang "ENTER API ENDPOINTS DITO". Mahahanap mo ang API Endpoint sa pamamagitan ng pagpunta sa bucket na iyong nilikha sa Paunang Estado, i-click ang mga setting at sa ilalim ng tab na Data makikita mo ang API Endpoint. Kopyahin at i-paste ito sa HTML code. Sa ilalim ng HTML code makikita mo ang "ENTER EMBED SHARE DITO". Muli pumunta sa iyong timba sa Paunang Estado, pumunta sa mga setting at sa tab na Pagbabahagi. I-click ang kahon na Ibahagi ang Publiko at makikita mo ang Ibahagi ayon sa I-embed. Kopyahin lamang ang URL sa naka-embed na kahon ng pagbabahagi (magkakaroon ito ng hitsura tulad ng "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). I-paste iyon sa mga marka ng panipi. I-save ang file at handa na kaming lumikha ng aming webpage.

Hakbang 4: Netlify

Ang Netlify ay isang all-in-one platform na nagbibigay-daan sa iyo upang bumuo, mag-deploy, at pamahalaan ang isang proyekto sa web. Maaari kang mag-sign up nang libre kaya gawin iyon. Kapag naka-sign up ka, sa iyong pangunahing pahina ay makakakita ka ng isang kahon na nagsasabing, "Nais mong mag-deploy ng isang bagong site nang hindi kumokonekta sa Git? I-drag at i-drop ang iyong folder site dito." Kaya i-drag ang iyong na-update na folder ng CodePen file doon at i-drop ito. Mula doon mai-deploy nito ang iyong code at lilikha ng isang link sa iyong bagong webpage. I-click ang link at makikita mo ang iyong form sa web at dashboard.

Kailangan mong magsumite ng ilang data upang maipakita ang iyong mga tile. Kaya punan ang iyong form sa web at pindutin ang isumite. Kapag nagawa mo na iyon, pumunta sa iyong dashboard ng Paunang Estado. Mula dito maaari nating baguhin ang mga uri ng tile, baguhin ang laki ng mga tile, ilipat ang layout sa paligid, ayusin ang mga kulay ng data upang maging mas kaaya-aya sa mga mata, at magdagdag ng ilang mga real-time na expression upang mapa sa mga emojis. Mayroon kang dalawang mga pagpipilian upang gawin ang iyong dashboard na magkasya sa laki ng pag-embed: ayusin ang iyong mga Tile upang magkasya o ayusin ang pag-ukuran ng pag-embed sa code.

Hakbang 5: Ipasadya ang Iyong Dashboard

Mga Gauge Graph

Gumamit ako ng dalawang uri ng mga gauge sa aking dashboard: arko at likido. Upang baguhin ang uri ng Tile tamang pag-click sa Tile at piliin ang I-edit ang Tile. Bubuksan nito ang configurator ng Tile. Para sa Laki ng Beer napili ko ang Gauge Chart bilang uri ng Tile at Liquid bilang Estilo ng Gauge. Binago ko ang Pamagat, kulay ng signal key, at minimum / maximum na mga halaga din. Para sa Timbang at Beer ABV Ginamit ko ang istilo ng pagsukat ng arko.

Mapa sa Emojis

Na-mapa ko ang uri ng Exercise at Meat type sa mga emojis gamit ang Real-Time Expressions kaya depende kung aling item ang pinili ko mula sa drop-down list, isang lalabas na tukoy na emoji ang lalabas. Maaari mong makita ang ginamit kong code sa mga larawan. Maaari kang magdagdag ng mga emojis sa isang Mac sa pamamagitan ng keying control + command + spacebar o sa Windows mula sa website na ito.

Ipadala ang Emojis sa Web Form

Para sa mga bagay tulad ng Junk gusto kong magpadala ng mga emojis diretso sa aking dashboard. Kopyahin at idikit ko ang emoji sa web form text box at i-click ang isumite pagkatapos ay lalabas ang emoji sa aking dashboard!

Kailangan ng maraming paglalaro sa paligid upang ipasadya ang perpektong dashboard at ang mga pagpipilian ay walang katapusan.

Larawan sa Background

Maaari kang magdagdag ng isang imahe sa background sa iyong dashboard upang mabigyan ka ng mas maraming personalidad o konteksto ng data.

Hakbang 6: Konklusyon

Habang itinayo ito ni Paul bilang isang tracker ng aktibidad ay nag-aalok siya ng iba pang mga ideya kung paano ito magagamit sa ilang mga menor de edad na pagbabago:

• Pinakamahusay na Kape / Beer / restawran sa Town Tracker
• Nasaan na ang Aking Mga Kaibigan o Bata Ngayon at Ano ba ang Ginagawa Nila? Tagasubaybay
• Interactive Golf Scorecard - Mga Marka ng Pagsubaybay sa Kalidad at Kurso
• Paragliding Flight Logger - (Si Paul ay may mas cool na libangan kaysa sa ginagawa ko)

Ngayon ay maaari mong subaybayan ang anupaman at lahat. Ang code na ito ay nagbibigay ng shell para sa anumang uri ng web form na nais mong likhain. Kaya't maglaro at maging malikhain at ipakita sa akin kung ano ang nakuha mo! At malinaw naman, tagay kay Paul sa pagtulong na likhain ito!