Jenga Logger ya Shughuli za Kibinafsi: Hatua 6

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:48

Rafiki yangu kutoka London, Paul, alitaka kutafuta njia ya kufuatilia chakula, shughuli, na eneo lake kwenye dashibodi moja. Hapo ndipo alipopata wazo la kuunda fomu rahisi ya wavuti ambayo itatuma data kwenye dashibodi. Angeweka fomu zote za wavuti na dashibodi kwenye ukurasa wa wavuti na kuandika shughuli zake akienda. Kutoka hapo logger ya shughuli iliundwa! Nambari katika mafunzo haya ni ya Paul, isipokuwa mabadiliko kidogo ya rangi, ubadilishaji wa dashibodi, na misimu (tafsiri ya Briteni hadi Amerika iliyofanywa na mimi).

Kwa mradi huu tutatumia:

• CodePen
• Jimbo la Awali
• Tambulisha

Tunaunda tracker ya shughuli za kibinafsi lakini kufuata mafunzo na nambari hii unaweza kuifanya kuwa fomu ya wavuti na tracker kwa chochote unachotaka! Tuanze!

Hatua ya 1: CodePen

CodePen ni mazingira ya maendeleo. Inakuruhusu kuandika nambari yako kwenye kivinjari na uone matokeo yake unapoenda. Tunayo nambari katika HTML, CSS, na JavaScript kuunda fomu ya wavuti na kushuka, masanduku ya maandishi, na geolocation. Unaweza kujisajili bila malipo ukiwa na masharti tu kuwa huwezi kufanya nambari yako iwe ya faragha, ambayo tutashughulikia baadaye.

Kwanza, jiandikishe kwa CodePen. Mara tu unapofanya hivyo unaweza uma mradi wangu na nambari zote zilizoundwa tayari. Hii itaunda nakala ya nambari kwenye dashibodi yako mwenyewe. Utaona HTML kushoto, CSS katikati, na JavaScript upande wa kulia. Ikiwa wewe ni mtaalam katika haya yote, sahau kusoma zingine na ufanye mabadiliko upendavyo! Ikiwa wewe ni mpya kwa lugha hizi, nina maoni kadhaa hapa chini juu ya mabadiliko unayoweza kufanya kwa urahisi.

HTML

Kipande hiki cha nambari ni muundo wa vitu vyote vya kushuka na masanduku. Ni hapa kwamba unaweza kubadilisha aina ya vitu unavyofuatilia na kuorodhesha kwenye vitone. Katika kushuka kwa Zoezi, unaweza kubadilisha aina za shughuli (Uzito wa sasa, Mbio, Yoga, na Cardio). Unaweza kuongeza kitu kwenye orodha kufuatia fomati au ongeza chaguzi zaidi. Vitu vile vile huenda kwa aina ya Nyama, saizi ya kahawa na aina, na saizi ya Bia. Katika kisanduku cha maandishi ya Junk unaweza kubadilisha maneno ya kishika nafasi (kwa sasa chips, chokoleti, nk). Sawa inaweza kufanywa kwa Uzito (lbs), Zoezi (dakika), na Bia (abv%).

Unaweza pia kutumia muhtasari huu na kubadilisha kabisa vichwa, chaguzi za kushuka chini, na vishika nafasi ili kufanya aina hii ya wavuti iwe aina yoyote ya tracker unayotaka.

CSS

Kipande hiki cha nambari huweka rangi ya mandharinyuma, mpangilio wa maandishi, na mpangilio wa safu. Ikiwa unataka kubadilisha mandharinyuma kutoka kwa kichefuchefu cha rangi ya waridi na kuwa kitu cha kupendeza zaidi tumia kiteua rangi mkondoni ili kupata thamani ya rangi inayofaa. Unaweza kulinganisha maandishi au nguzo kulia, kushoto, au katikati.

JavaScript

Kipande hiki cha nambari hufanya kazi kitufe cha geolocation na kitufe cha kuwasilisha. Hakuna mengi hapa ninayopendekeza ubadilishwe.

Hamisha

Mara baada ya kuweka kila kitu kwa kupenda kwako, bonyeza kitufe cha kuuza nje kulia chini na uchague usafirishaji kama.zip. Hii itapakua nambari hiyo kwenye faili ya zip na utaiona kwenye folda yako ya upakuaji.

Hatua ya 2: Jimbo la Awali

Hali ya awali itaturuhusu kuunda dashibodi iliyoboreshwa ya shughuli tunayofuatilia. Unaweza kujisajili kwa jaribio la siku 14 bila malipo. Baada ya hapo ni bure kwa Wanafunzi walio na anwani ya barua pepe ya edu au $ 9.99 kwa mwezi kwa mpango wa Mtu binafsi.

Mara baada ya kuingia au kujiandikisha nenda kwenye rafu yako ya ndoo na uunda ndoo mpya ya mkondo wa data kwa kubofya kitufe cha kuunda ndoo ya mkondo (+ wingu). Unaweza kubadilisha jina kuwa chochote unachopenda au ubadilishe baadaye, nilichagua Tracker ya Shughuli za Kibinafsi. Ukiangalia kisanduku cha Mandhari ya Nuru utawapa dashibodi mandhari nyeupe. Bonyeza umefanya na ndoo yako ya mkondo itaundwa.

Tutahitaji habari kutoka kwa mipangilio ya ndoo baadaye ili kuweka kwenye nambari ya HTML (API Endpoint & iframe embed).

Hatua ya 3: Msimbo wa Studio ya Visual

Kwa kuwa ninatumia toleo la bure la CodePen nambari yangu yote ni ya umma. Kwa sababu hii, sitaki kuweka alama zangu za mwisho za API na iframe kupachika kwenye nambari kwani unahitaji kuweka funguo zako za ufikiaji wa Jimbo la Awali kwa faragha. Msimbo wa Studio ya Visual utaniruhusu kuhariri nambari yangu ndani kutoka kwa faili ya zip niliyopakua kutoka kwa CodePen. Unaweza kupakua toleo la hivi karibuni bure kutoka kwa wavuti yao.

Fungua faili zako za nambari na ufungue folda hiyo kwenye Msimbo wa Studio ya Visual. Kutoka hapa unaweza kuhariri nambari ya HTML. Kuelekea juu ya faili utaona "ENTER API ENDPOINTS HAPA". Unaweza kupata Endpoint ya API kwa kwenda kwenye ndoo uliyoundwa kwenye Jimbo la Awali, bonyeza mipangilio na chini ya kichupo cha Takwimu utaona API ya Mwisho wa API. Nakili na ubandike hii kwenye nambari ya HTML. Kwa chini nambari ya HTML utaona "INGIA SHARE ILIYOBANDIKWA HAPA". Tena nenda kwenye ndoo yako katika Jimbo la Awali, nenda kwenye mipangilio na kichupo cha Kushiriki. Bonyeza sanduku la Shiriki hadharani na utaona Shiriki kwa Kupachika. Nakili tu URL kwenye kisanduku cha kushiriki (itaonekana kama "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Bandika hiyo kwenye alama za nukuu. Hifadhi faili na tuko tayari kuunda ukurasa wetu wa wavuti.

Hatua ya 4: Tambulisha

Netlify ni jukwaa la moja kwa moja linalokuruhusu kujenga, kupeleka, na kusimamia mradi wa wavuti. Unaweza kujiandikisha bure kwa hivyo fanya hivyo. Mara tu unapojiandikisha, kwenye ukurasa wako kuu utaona sanduku linalosema, "Unataka kupeleka wavuti mpya bila kuungana na Git? Buruta na utupe tovuti yako ya folda hapa." Kwa hivyo buruta folda yako ya faili ya CodePen iliyosasishwa hapo na uiachie. Kutoka hapo itapeleka nambari yako na kuunda kiunga cha ukurasa wako mpya wa wavuti. Bofya kiunga na utaona fomu yako ya wavuti na dashibodi.

Unahitaji kuwasilisha data ili tiles zako zionekane. Kwa hivyo jaza fomu yako ya wavuti na ubonyeze kuwasilisha. Mara tu unapofanya hivyo nenda kwenye dashibodi yako ya Jimbo la Awali. Kutoka hapa tunaweza kubadilisha aina za tile, kubadilisha ukubwa wa tiles, kuzunguka mpangilio, kurekebisha rangi za data ili kupendeza macho, na kuongeza maneno ya wakati halisi kwenye ramani ya emoji. Una chaguzi mbili za kufanya dashibodi yako kutoshea saizi ya kupachika: rekebisha Tiles zako kutoshea au kurekebisha ukubwa wa kupachika kwenye nambari.

Hatua ya 5: Customize Dashibodi yako

Grafu za kupima

Nilitumia aina mbili za vipimo kwenye dashibodi yangu: upinde na kioevu. Kubadilisha aina ya Tile bonyeza kulia kwenye Tile na uchague Hariri Tile. Hii itafungua kisanidi cha Tile. Kwa Ukubwa wa Bia nilichagua Chati ya Kupima kama aina ya Tile na Liquid kama Mtindo wa Kupima. Nilibadilisha Kichwa, rangi ya ufunguo wa ishara, na viwango vya chini / kiwango cha juu pia. Kwa Uzito na Bia ABV nilitumia mtindo wa upimaji wa upinde.

Ramani ya Emoji

Nilichora aina ya Zoezi na aina ya Nyama kwenye emoji kwa kutumia Matamshi ya Saa za Wakati kwa hivyo kulingana na kipengee nilichochagua kutoka kwenye orodha ya kushuka, emoji maalum itajitokeza. Unaweza kuona nambari niliyotumia kwenye picha. Unaweza kuongeza emojis kwenye Mac kwa kuweka keying control + command + spacebar au kwenye Windows kutoka kwa wavuti hii.

Tuma Emoji katika Fomu ya Wavuti

Kwa vitu kama Junk napenda kutuma emoji moja kwa moja kwenye dashibodi yangu. Nakili na kubandika emoji kwenye kisanduku cha maandishi ya fomu ya wavuti na bonyeza bonyeza kisha wasilisha emoji kwenye dashibodi yangu!

Inachukua kucheza sana kuzunguka ili kubadilisha dashibodi kamili na chaguzi hazina mwisho.

Picha ya Asili

Unaweza kuongeza picha ya mandharinyuma kwenye dashibodi yako kukupa data zaidi utu au muktadha.

Hatua ya 6: Hitimisho

Wakati Paul aliunda hii kama tracker ya shughuli alitoa maoni mengine ya jinsi hii inaweza kutumika na mabadiliko kadhaa madogo:

• Kahawa / Bia bora / Mkahawa bora katika Town Tracker
• Marafiki Wangu au Watoto Wako Wapi Hivi Sasa & Je! Wanafanya Nini? Kufuatilia
• Interactive Golf Scorecard - Alama na Kozi Tracker
• Paragliding Flight Logger - (Paul ana shughuli nyingi za kupendeza kuliko mimi)

Sasa unaweza kufuatilia chochote na kila kitu. Nambari hii hutoa ganda kwa aina yoyote ya fomu ya wavuti unayotaka kuunda. Kwa hivyo cheza karibu na upate ubunifu na nionyeshe ulichonacho! Na ni wazi, tunamshangilia Paul kwa kusaidia kuunda hii!