Ndërtoni një regjistrues të aktiviteteve personale: 6 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:10

Miku im nga Londra, Paul, donte të gjente një mënyrë për të gjetur ushqimin, aktivitetin dhe vendndodhjen e tij në një pult të vetëm. Atëherë ai erdhi me idenë për të krijuar një formë të thjeshtë në internet që do të dërgonte të dhëna në një pult. Ai do të vendoste formën e uebit dhe panelin e kontrollit në një faqe në internet dhe do të regjistronte aktivitetet e tij në lëvizje. Prej aty u krijua regjistruesi i aktivitetit! Kodi në këtë tutorial është i gjithë Paul, përveç disa ndryshimeve të vogla në ngjyrë, personalizimin e pultit dhe zhargon (përkthimi britanik në amerikan i bërë nga unë).

Për këtë projekt ne do të përdorim:

• CodePen
• Gjendja fillestare
• Netlify

Ne krijojmë një gjurmues aktiviteti personal, por duke ndjekur këtë udhëzues dhe kod, mund ta bëni këtë në një formë uebi dhe gjurmuesi për gjithçka që dëshironi! Le të fillojmë!

Hapi 1: CodePen

CodePen është një mjedis zhvillimi. Kjo ju lejon të shkruani kodin tuaj në shfletues dhe të shihni rezultatet e tij ndërsa ecni. Ne kemi kod në HTML, CSS dhe JavaScript për të krijuar një formë në internet me zbritje, kuti teksti dhe gjeolokacion. Ju mund të regjistroheni falas me kushtin e vetëm që nuk mund ta bëni kodin tuaj privat, të cilin do ta trajtojmë më vonë.

Së pari, regjistrohuni në CodePen. Pasi ta bëni këtë ju mund të Forkoni projektin tim me të gjithë kodin e krijuar tashmë. Kjo do të krijojë një kopje të kodit në pultin tuaj. Ju do të shihni HTML në të majtë, CSS në qendër dhe JavaScript në të djathtë. Nëse jeni ekspert në të gjitha këto, harroni të lexoni pjesën tjetër dhe bëni ndryshime sipas dëshirës tuaj! Nëse jeni më i ri në këto gjuhë, kam disa sugjerime më poshtë për ndryshimet që lehtë mund të bëni.

HTML

Kjo pjesë e kodit është formati për të gjitha listat zbritëse dhe kutitë. Hereshtë këtu që ju mund të ndryshoni llojin e gjërave që gjurmoni dhe listoni në zbritëset. Në zbritjen e Ushtrimit, mund të ndryshoni llojet e aktivitetit (aktualisht Peshat, Vrapimi, Yoga dhe Kardio). Mund të shtoni diçka në listë duke ndjekur formatin ose të shtoni më shumë opsione. Të njëjtat gjëra vlen për llojin e mishit, madhësinë dhe llojin e kafesë dhe madhësinë e birrës. Në kutinë e tekstit Junk ju mund të ndryshoni fjalët e vendvendosjes (aktualisht patate të skuqura, çokollatë, etj.). E njëjta gjë mund të bëhet për Pesha (lbs), Ushtrimi (minuta) dhe Birra (abv %).

Ju gjithashtu mund të përdorni këtë skicë dhe të ndryshoni plotësisht titujt, opsionet e lëshuara dhe vendndodhjet për ta bërë këtë faqe në internet çdo lloj gjurmuesi që dëshironi.

CSS

Kjo pjesë e kodit përcakton ngjyrën e sfondit, rreshtimin e tekstit dhe shtrirjen e kolonave. Nëse dëshironi të ndryshoni sfondin nga trëndafili i përzier në diçka më të këndshme, thjesht përdorni një zgjedhës të ngjyrave në internet për të gjetur vlerën e duhur të ngjyrave. Ju mund të rreshtoni tekstin ose kolonat djathtas, majtas ose në qendër.

JavaScript

Kjo pjesë e kodit punon butonin e gjeolokimit dhe butonin e paraqitjes. Nuk ka shumë këtu unë do të rekomandoja të ndryshoja.

Eksporto

Pasi të keni vendosur gjithçka sipas dëshirës tuaj, klikoni butonin e eksportit në të djathtën e poshtme dhe zgjidhni eksportin si.zip. Kjo do të shkarkojë kodin në një skedar zip dhe do ta shihni në dosjen tuaj të shkarkimeve.

Hapi 2: Gjendja fillestare

Gjendja fillestare do të na lejojë të krijojmë një pult të personalizuar të aktivitetit që ndjekim. Mund të regjistroheni për një provë 14 -ditore falas. Pas kësaj është falas për Studentët me një adresë emaili edu ose 9.99 dollarë në muaj për planin individual.

Pasi të jeni regjistruar ose regjistruar, shkoni në raftin tuaj të kovës dhe krijoni një kovë të re të të dhënave duke klikuar butonin e krijimit të kovës së rrjedhës (+re). Ju mund ta ndryshoni emrin në çfarëdo që ju pëlqen ose ta ndryshoni atë më vonë, unë zgjodha Personal Activity Tracker. Nëse kontrolloni kutinë Theme Light, do t'i jepni panelit të kontrollit një sfond të bardhë. Klikoni përfunduar dhe kova juaj e transmetimit do të krijohet.

Neve do të na duhen informacione nga cilësimet e kovës për t'u futur në kodin HTML (API Endpoint & iframe embed).

Hapi 3: Kodi i Visual Studio

Meqenëse po përdor versionin falas të CodePen, i gjithë kodi im është publik. Për këtë arsye, unë nuk dua të vendos pikat e fundit të API -së dhe iframe -in tim të futur në kod pasi duhet të mbani çelësat tuaj të hyrjes në gjendjen fillestare private. Kodi Visual Studio do të më lejojë të redaktoj kodin tim në vend nga skedari zip që kam shkarkuar nga CodePen. Ju mund ta shkarkoni falas versionin e fundit nga faqja e tyre e internetit.

Zbërtheni skedarët tuaj të kodit dhe hapeni atë dosje në Visual Studio Code. Nga këtu ju mund të redaktoni kodin HTML. Në krye të skedarit do të shihni "ENTER API ENDPOINTS KETU". Mund ta gjeni API Endpoint duke shkuar te kova e krijuar në Gjendjen Fillestare, klikoni cilësimet dhe nën skedën Data do të shihni API Endpoint. Kopjoni dhe ngjisni këtë në kodin HTML. Në pjesën e poshtme të kodit HTML do të shihni "HYRJE NDARRMARRJEN E NDRYSHIMIT K HTU". Përsëri shkoni te kova juaj në gjendjen fillestare, shkoni te cilësimet dhe skedën Sharing. Klikoni në kutinë Share Publik dhe do të shihni Share by Embed. Kopjoni vetëm URL -në në kutinë e ndarjes së integrimit (do të duket diçka si "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Ngjiteni atë në thonjëza. Ruani skedarin dhe ne jemi gati për të krijuar faqen tonë në internet.

Hapi 4: Netlify

Netlify është një platformë gjithëpërfshirëse që ju lejon të ndërtoni, vendosni dhe menaxhoni një projekt në internet. Ju mund të regjistroheni falas, kështu që bëni atë. Pasi të regjistroheni, në faqen tuaj kryesore do të shihni një kuti që thotë, "Dëshironi të vendosni një sit të ri pa u lidhur me Git? Zvarritni dhe lëshoni faqen e dosjes tuaj këtu." Pra, tërhiqni dosjen tuaj të azhurnuar të skedarit CodePen dhe hidhni atë. Nga atje do të vendosë kodin tuaj dhe do të krijojë një lidhje me faqen tuaj të re në internet. Klikoni lidhjen dhe do të shihni formularin tuaj të uebit dhe pultin.

Ju duhet të paraqisni disa të dhëna për të shfaqur pllakat tuaja. Pra, plotësoni formularin tuaj në internet dhe goditni submit. Pasi ta bëni këtë, futuni në pultin tuaj të gjendjes fillestare. Nga këtu ne mund të ndryshojmë llojet e pllakave, të ndryshojmë madhësinë e pllakave, të lëvizim paraqitjen përreth, të rregullojmë ngjyrat e të dhënave që të jenë më të këndshme për sytë dhe të shtojmë disa shprehje në kohë reale në hartë te emojis. Ju keni dy mundësi për ta bërë panelin tuaj të përshtatet me madhësinë e integrimit: rregulloni pllakat tuaja që të përshtaten ose rregulloni madhësinë e integrimit në kod.

Hapi 5: Personalizoni Panelin tuaj të Kontrollit

Grafikët matës

Kam përdorur dy lloje të matësve në pultin tim: hark dhe lëng. Për të ndryshuar llojin e Tiles klikoni me të djathtën mbi Tile dhe zgjidhni Edit Tile. Kjo do të hapë konfiguruesin e Tiles. Për Madhësinë e Birrës, unë zgjodha Grafikun e Matësit si lloj Tile dhe Liquid si Stilin e Matësit. Ndryshova titullin, ngjyrën e çelësit të sinjalit dhe vlerat minimale/maksimale gjithashtu. Për peshën & birrën ABV kam përdorur stilin e matësit të harkut.

Hartë për Emojis

Hartova llojin e ushtrimit dhe llojin e mishit në emoji duke përdorur shprehje në kohë reale, kështu që në varësi të artikullit që zgjodha nga lista zbritëse, do të shfaqet një emoji specifik. Ju mund të shihni kodin që kam përdorur në foto. Mund të shtoni emoji në një Mac duke shtypur tastin+komandën+spacebar ose në Windows nga kjo faqe në internet.

Dërgoni Emoji në Formën e Uebit

Për gjëra të tilla si Junk më pëlqen të dërgoj emoji direkt në pultin tim. Unë kopjoj dhe ngjis emoji në kutinë e tekstit të formularit të uebit dhe klikoj paraqit atëherë emoji shfaqet në pultin tim!

Duhet shumë lojë për të personalizuar pultin e përsosur dhe opsionet janë të pafundme.

Imazhi i Sfondit

Ju mund të shtoni një imazh të sfondit në pultin tuaj për t'ju dhënë të dhënave më shumë personalitet ose kontekst.

Hapi 6: Përfundimi

Ndërsa Pali e ndërtoi këtë si një gjurmues aktiviteti, ai ofroi ide të tjera se si kjo mund të përdoret me disa ndryshime të vogla:

• Kafe/Birrë/Restorant më i mirë në Gjurmuesin e Qytetit
• Ku janë miqtë dhe fëmijët e mi tani dhe çfarë po bëjnë ata? Gjurmues
• Kartë Interesive e Rezultateve të Golfit - Gjurmues i Rezultateve dhe Kurseve
• Paragliding Flight Logger - (Pali ka hobi më të ftohtë se unë)

Tani mund të gjurmoni gjithçka dhe gjithçka. Ky kod siguron guaskën për çdo lloj forme uebi që dëshironi të krijoni. Pra, luani dhe bëhuni krijues dhe më tregoni se çfarë keni! Dhe padyshim, brohoritje për Palin që ndihmoi në krijimin e kësaj!