Tsim Tus Kheej Tus Kheej Cov Logger: 6 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:24

Kuv tus phooj ywg los ntawm London, Paul, xav nrhiav txoj hauv kev los taug nws cov zaub mov, kev ua ub no, thiab qhov chaw nyob hauv ib lub dashboard. Nws yog thaum nws los nrog lub tswv yim los tsim lub vev xaib yooj yim uas yuav xa cov ntaub ntawv mus rau lub dashboard. Nws yuav tso ob daim ntawv web thiab dashboard hauv lub vev xaib thiab teev nws cov haujlwm thaum mus. Los ntawm qhov ntawd cov haujlwm logger tau tsim! Cov cai hauv qhov kev qhia no yog Paul tag nrho, tshwj tsis yog qee qhov hloov pauv me me hauv cov xim, kev hloov kho tus kheej, thiab cov lus slang (Askiv rau Asmeskas txhais lus ua los ntawm kuv).

Rau qhov haujlwm no peb yuav siv:

• CodePen
• Lub Xeev Thawj
• Netlify

Peb tsim tus kheej cov haujlwm taug qab tab sis ua raws cov lus qhia no thiab tus lej koj tuaj yeem ua qhov no rau hauv daim ntawv web thiab tus tracker rau txhua yam koj xav tau! Cia peb pib!

Kauj ruam 1: CodePen

CodePen yog kev txhim kho ib puag ncig. Nws tso cai rau koj sau koj cov cai hauv qhov browser thiab pom cov txiaj ntsig ntawm nws thaum koj mus. Peb muaj cov cai hauv HTML, CSS, thiab JavaScript los tsim lub vev xaib nrog cov ntawv qis, kab ntawv, thiab thaj chaw nyob. Koj tuaj yeem tso npe dawb nrog qhov kev txwv nkaus xwb uas koj tsis tuaj yeem ua rau koj tus lej ntiag tug, uas peb yuav hais tom qab.

Ua ntej, sau npe rau CodePen. Thaum koj ua qhov ntawd koj tuaj yeem Fork kuv qhov project nrog txhua qhov chaws tau tsim lawm. Qhov no yuav tsim daim ntawv theej ntawm koj tus kheej lub dashboard. Koj yuav pom HTML ntawm sab laug, CSS hauv nruab nrab, thiab JavaScript ntawm sab xis. Yog tias koj yog tus kws tshaj lij hauv txhua qhov no, tsis txhob hnov qab nyeem tas thiab hloov pauv raws li koj nyiam! Yog tias koj tshiab rau cov lus no, Kuv muaj qee cov lus qhia hauv qab no ntawm kev hloov pauv uas koj tuaj yeem ua tau yooj yim.

HTML

Daim ntawv no yog tus qauv rau txhua qhov kev poob qis thiab cov thawv. Nws nyob ntawm no uas koj tuaj yeem hloov pauv yam ntawm yam uas koj taug qab thiab teev nyob rau hauv qhov nco-downs. Hauv qhov Kev Tawm Tsam Tawm, koj tuaj yeem hloov hom kev ua ub no (Tam sim no hnyav, Khiav, Yoga, & Cardio). Koj tuaj yeem ntxiv qee yam rau cov npe hauv qab cov hom ntawv lossis ntxiv ntau txoj hauv kev. Tib yam mus rau Hom Nqaij, Kas fes loj & hom, thiab Npias loj. Hauv Junk text box koj tuaj yeem hloov cov lus tso rau qhov chaw (tam sim no cov chips, qhob noom xim kasfes, thiab lwm yam). Ib yam tuaj yeem ua tiav rau Qhov hnyav (lbs), Kev tawm dag zog (feeb), thiab Npias (abv %).

Koj kuj tseem tuaj yeem siv tus qauv no thiab hloov pauv lub npe tag nrho, cov kev xaiv qis dua, thiab cov chaw tso ua kom lub vev xaib no ua txhua yam ntawm tus neeg taug qab koj xav tau.

CSS

Daim ntawv no teev cov xim keeb kwm yav dhau, kab ntawv sib luag, thiab kab sib luag. Yog tias koj xav hloov keeb kwm yav dhau los los ntawm nchuav paj yeeb rau qee yam zoo siab dua tsuas yog siv tus neeg xaiv xim online kom pom tus nqi xim raug. Koj tuaj yeem kho cov ntawv lossis kab sab xis, sab laug, lossis nruab nrab.

JavaScript

Daim ntawv no ua haujlwm khawm geolocation thiab xa khawm. Tsis muaj ntau ntawm no kuv xav kom hloov pauv.

Export

Thaum koj muaj txhua yam teeb tsa raws li qhov koj nyiam, nyem lub pob export nyob hauv qab txoj cai thiab xaiv export li.zip Qhov no yuav rub cov cai rau hauv zip file thiab koj yuav pom nws hauv koj daim ntawv rub tawm.

Kauj Ruam 2: Thawj Xeev

Lub Xeev Thawj zaug yuav tso cai rau peb los tsim lub dashboard tshwj xeeb ntawm cov haujlwm peb taug qab. Koj tuaj yeem tso npe rau 14 hnub sim pub dawb. Tom qab ntawd nws yog pub dawb rau Cov Tub Ntxhais Kawm nrog edu email chaw nyob lossis $ 9.99 toj ib hlis rau Tus Kheej txoj kev npaj.

Thaum koj tau kos npe rau hauv lossis kos npe nkag mus rau koj lub thoob ntim khoom thiab tsim cov ntaub ntawv tshiab kwj thoob los ntawm txhaj rau tsim cov kwj thoob khawm (+huab). Koj tuaj yeem hloov lub npe rau yam koj nyiam lossis hloov nws tom qab, Kuv tau xaiv Tus Kheej Tus Kheej Ua Haujlwm. Yog tias koj khij lub Teeb Lub thawv lub thawv koj yuav muab lub dashboard rau tom qab dawb. Nyem ua tiav thiab koj lub thoob dej yuav raug tsim.

Peb yuav xav tau cov ntaub ntawv los ntawm cov chaw teeb tsa tom qab tso rau hauv HTML code (API Endpoint & iframe embed).

Kauj ruam 3: Visual Studio Code

Txij li thaum kuv siv cov dawb version ntawm CodePen tag nrho kuv cov cai yog pej xeem. Vim li no, Kuv tsis xav tso kuv qhov API kawg thiab iframe kos rau hauv txoj cai txij li koj xav tau khaws koj li Kev Xiam Oob Khab Nkag Nkag mus rau tus kheej. Visual Studio Code yuav tso cai rau kuv kho kuv tus lej hauv zos los ntawm cov ntawv zip kuv rub tawm los ntawm CodePen. Koj tuaj yeem rub tawm qhov hloov tshiab kawg dawb los ntawm lawv lub vev xaib.

Unzip koj cov ntaub ntawv code thiab qhib cov ntawv ntawd hauv Visual Studio Code. Txij ntawm no koj tuaj yeem hloov kho tus lej HTML. Mus rau sab saud ntawm daim ntawv koj yuav pom "ENTER API ENDPOINTS HERE". Koj tuaj yeem pom qhov API Qhov kawg los ntawm kev mus rau lub thoob uas koj tau tsim ntawm Lub Xeev Pib, nyem qhov chaw thiab hauv qab Cov Ntaub Ntawv tab koj yuav pom API Endpoint. Luam thiab muab qhov no tso rau hauv HTML code. Hauv qab tus lej HTML koj yuav pom "ENTER EMBED SHARE HERE". Ib zaug ntxiv mus rau koj lub thoob hauv Thawj Lub Xeev, mus rau qhov chaw thiab Sib Koom tab. Nyem rau lub thawv Tshaj tawm rau pej xeem thiab koj yuav pom Share los ntawm Embed. Luam tsuas yog URL hauv lub npov sib koom ua ke (nws yuav zoo ib yam li "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Muab qhov ntawd tso rau hauv cov lus hais. Txuag cov ntawv thiab peb tau npaj los tsim peb lub vev xaib.

Kauj ruam 4: Netlify

Netlify yog txhua qhov-hauv-ib lub platform uas tso cai rau koj tsim, xa tawm, thiab tswj hwm lub vev xaib project. Koj tuaj yeem tso npe dawb yog li ua li ntawd. Thaum koj tau kos npe, ntawm koj nplooj ntawv tseem ceeb koj yuav pom lub npov uas hais tias, "Xav xa lub xaib tshiab yam tsis txuas rau Git? Luag thiab tso koj lub vev xaib chaw nyob ntawm no." Yog li rub koj cov ntaub ntawv kho tshiab CodePen nyob ntawd thiab tso nws. Los ntawm qhov ntawd nws yuav xa koj cov cai thiab tsim qhov txuas rau koj lub vev xaib tshiab. Nyem qhov txuas thiab koj yuav pom koj lub vev xaib thiab dashboard.

Koj yuav tsum xa qee cov ntaub ntawv kom tau koj cov vuas kom pom. Yog li sau koj lub vev xaib thiab nyem xa. Thaum koj ua qhov ntawd nkag mus rau hauv Koj Lub Xeev Thawj lub dashboard. Los ntawm no peb tuaj yeem hloov pauv cov pobzeb, hloov pauv cov vuas, txav cov txheej txheem ib puag ncig, kho cov ntaub ntawv xim kom txaus siab rau lub qhov muag, thiab ntxiv qee qhov ua piv txwv ntawm lub sijhawm tiag tiag rau daim ntawv qhia rau emojis. Koj muaj ob txoj hauv kev los ua kom koj lub dashboard haum rau qhov loj me: kho koj cov Vuas kom haum lossis hloov kho qhov loj me hauv cov cai.

Kauj ruam 5: Customize Koj Dashboard

Ntsuas Kab

Kuv siv ob hom ntsuas hauv kuv lub dashboard: koov thiab kua. Txhawm rau hloov Hom Pobzeb txoj cai nyem rau ntawm Pobzeb thiab xaiv Kho Pobzeb. Qhov no yuav qhib Tile configurator. Rau Npias Qhov Loj Kuv tau xaiv Cov Kab Ntsuas raws li Hom Pobzeb thiab Ua Kua Li Cov Qauv Ntsuas. Kuv hloov Title, teeb liab qhov tseem ceeb xim, thiab yam tsawg kawg/qhov siab tshaj plaws ib yam. Txog qhov hnyav & Npias ABV Kuv siv cov qauv ntsuas ntsuas.

Daim ntawv qhia rau Emojis

Kuv tau piav qhia hom Qoj thiab Hom Nqaij rau emojis siv Cov Lus Qhia Sijhawm tiag yog li nyob ntawm yam khoom twg kuv tau xaiv los ntawm cov npe poob, cov cim tshwj xeeb yuav tshwm sim. Koj tuaj yeem pom cov cai kuv siv hauv cov duab. Koj tuaj yeem ntxiv emojis ntawm Mac los ntawm kev tuav tswj+hais kom ua+spacebar lossis ntawm Windows los ntawm lub vev xaib no.

Xa Emojis hauv Web Form

Txog yam zoo li Junk Kuv nyiam xa emojis ncaj qha rau kuv lub dashboard. Kuv theej thiab muab cov emoji tso rau hauv lub vev xaib daim ntawv lub thawv thiab nyem xa tom qab ntawd cov emoji tshwm nyob rau hauv kuv lub dashboard!

Nws siv sijhawm ntau ntawm kev ua si ib puag ncig los kho lub dashboard zoo tshaj plaws thiab cov kev xaiv tsis muaj qhov kawg.

Duab Duab

Koj tuaj yeem ntxiv cov duab keeb kwm yav dhau los rau koj lub dashboard kom muab cov ntaub ntawv ntau rau koj tus kheej lossis cov ntsiab lus.

Kauj Ruam 6: Xaus

Thaum Povlauj tsim qhov no los ua tus saib xyuas kev ua haujlwm nws tau muab lwm lub tswv yim ntawm qhov no yuav siv li cas nrog qee qhov kev hloov pauv me me:

• Kas fes/Npias/Tsev noj mov zoo tshaj hauv Lub Nroog Tracker
• Kuv Cov Phooj Ywg lossis Cov Menyuam Nyob Qhov Twg Thiab Lawv Ua Dab Tsi? Taug qab
• Sib tham sib Scorecard - Cov qhab nia & Cov Hoob Kawm Tracker
• Paragliding Dav Hlau Logger - (Paul muaj ntau yam ua haujlwm txias dua li kuv ua)

Tam sim no koj tuaj yeem taug qab txhua yam & txhua yam. Txoj cai no muab lub plhaub rau txhua hom web uas koj xav tsim. Yog li ua si ib puag ncig thiab muaj tswv yim thiab qhia kuv qhov koj tau txais! Thiab pom tseeb, zoo siab rau Paul rau kev pab tsim qhov no!