Shaxsiy faoliyat jurnalini yaratish: 6 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:22

Mening londonlik do'stim Pol ovqatlanishni, faolligini va joylashuvini bitta asboblar panelida kuzatib borishni xohladi. Aynan o'sha paytda u boshqaruv paneliga ma'lumotlarni yuboradigan oddiy veb -shakl yaratish g'oyasini ilgari surdi. U veb -sahifaga ham veb -shaklini, ham boshqaruv panelini qo'yib, harakatlarini yozib qo'yardi. U erdan faollikni qayd etuvchi yaratildi! Bu darslikdagi kod - bu Pol, faqat rangdagi ozgina o'zgarishlar, asboblar panelini sozlash va jargondan tashqari (inglizchadan amerikacha tarjimasini men qilganman).

Ushbu loyiha uchun biz quyidagilarni ishlatamiz:

• CodePen
• Boshlang'ich davlat
• Netlify

Biz shaxsiy faoliyatni kuzatuvchini yaratamiz, lekin ushbu qo'llanma va kodga amal qilib, siz xohlagan narsani veb -shakl va kuzatuvchiga aylantira olasiz! Qani boshladik!

1 -qadam: CodePen

CodePen - bu rivojlanish muhiti. Bu sizning kodingizni brauzerga yozish va uning natijalarini ketayotganingizda ko'rish imkonini beradi. HTML, CSS va JavaScript-da bizda ochiladigan oynalar, matn qutilari va geolokatsiya bilan veb-shakl yaratish uchun kod mavjud. Siz kodingizni maxfiy qila olmasligingiz sharti bilan tekin ro'yxatdan o'tishingiz mumkin, bu haqda keyinroq gaplashamiz.

Birinchidan, CodePen -ga ro'yxatdan o'ting. Buni qilganingizdan so'ng, siz allaqachon yaratilgan kod bilan mening loyihamni ajratishingiz mumkin. Bu sizning shaxsiy boshqaruv panelida kodning nusxasini yaratadi. Siz chapda HTML, markazda CSS va o'ngda JavaScript -ni ko'rasiz. Agar siz bularning barchasida mutaxassis bo'lsangiz, qolganini o'qishni unutmang va xohlaganingizcha o'zgartiring! Agar siz bu tillarni yangi bilsangiz, menda osonlik bilan o'zgartirishlar kiritish bo'yicha ba'zi takliflarim bor.

HTML

Ushbu kod parchasi barcha ochiladigan oynalar va qutilar uchun formatdir. Bu erda siz ochiladigan ro'yxatlarda kuzatiladigan va ro'yxatdagi narsalarni o'zgartirishingiz mumkin. Jismoniy mashqlar ochiladigan ro'yxatida siz mashg'ulot turlarini o'zgartirishingiz mumkin (hozirda og'irliklar, yugurish, yoga va kardio). Format bo'yicha ro'yxatga biror narsa qo'shishingiz yoki boshqa variantlarni qo'shishingiz mumkin. Xuddi shu narsa go'sht turiga, qahva hajmi va turiga va pivo hajmiga ham tegishli. "Keraksiz" matn maydonida siz joyni to'ldiruvchi so'zlarni o'zgartirishingiz mumkin (hozirda chiplar, shokolad va boshqalar). Og'irlik (lbs), mashqlar (daqiqa) va pivo (abv %) uchun ham xuddi shunday qilish mumkin.

Siz ushbu konturni ishlatishingiz va sarlavhalarni, ochiladigan variantlarni va joy tutqichlarni o'zgartirishingiz mumkin, bu veb-saytni xohlagan trekerni yaratadi.

CSS

Bu kod qismi fon rangini, matnni hizalanishini va ustunlar hizalanishini o'rnatadi. Agar siz fonni pushti pushti rangdan yoqimli narsaga o'zgartirmoqchi bo'lsangiz, to'g'ri rang qiymatini topish uchun onlayn rang tanlash vositasidan foydalaning. Siz matnni yoki ustunlarni o'ngga, chapga yoki o'rtaga tekislashingiz mumkin.

JavaScript

Ushbu kod qismi geolokatsiya va yuborish tugmachasida ishlaydi. Bu erda ko'p narsa yo'q, men o'zgartirishni maslahat beraman.

Eksport qilish

Hamma narsa sizning xohishingizga ko'ra o'rnatilgandan so'ng, pastki o'ngdagi eksport tugmasini bosing va.zip sifatida eksport qilishni tanlang. Bu kodni zip faylga yuklaydi va siz uni yuklamalar papkasida ko'rasiz.

2 -qadam: dastlabki holat

Boshlang'ich holat biz kuzatadigan faoliyatning moslashtirilgan boshqaruv panelini yaratishga imkon beradi. Siz 14 kunlik bepul sinov muddatiga yozilishingiz mumkin. Shundan so'ng, elektron pochta manzili bo'lgan talabalar uchun bepul yoki individual reja uchun oyiga $ 9.99.

Kirish yoki ro'yxatdan o'tgandan so'ng, chelak tokchasiga o'ting va oqim paqirini yaratish tugmachasini (+bulut) bosib, yangi ma'lumotlar oqimi paqirini yarating. Siz ismni xohlaganingizga o'zgartirishingiz yoki keyin o'zgartirishingiz mumkin, men Shaxsiy Faoliyatni Kuzatuvchini tanladim. Agar siz "Yorug'lik mavzusi" katagiga belgi qo'ysangiz, boshqaruv paneliga oq fon beriladi. Bajarildi tugmachasini bosing va oqim paqiringiz yaratiladi.

HTML kodini kiritish uchun bizga keyinchalik paqir sozlamalari ma'lumotlari kerak bo'ladi (API Endpoint va iframe embed).

3 -qadam: Visual Studio kodi

CodePen -ning bepul versiyasidan foydalanayotganim uchun mening barcha kodim ochiq. Shu sababli, men API -ning so'nggi nuqtalarini va iframe -ni kodga kiritishni xohlamayman, chunki siz boshlang'ich holatga kirish kalitlarini maxfiy saqlashingiz kerak. Visual Studio Code menga kodimni CodePen -dan yuklagan zip -fayldan mahalliy tahrir qilishimga imkon beradi. Siz o'z veb -saytidan so'nggi versiyasini bepul yuklab olishingiz mumkin.

Kod fayllarini oching va papkani Visual Studio Code -da oching. Bu erdan siz HTML kodini o'zgartirishingiz mumkin. Faylning yuqori tomonida siz "ENTER API ENDPOINTS BU YERGA" ni ko'rasiz. Siz API -ning so'nggi nuqtasini boshlang'ich holatda yaratgan chelakka o'tish orqali topishingiz mumkin, sozlamalarni bosing va ma'lumotlar ko'rinishida siz API -ning so'nggi nuqtasini ko'rasiz. Buni HTML kodiga nusxalash va joylashtirish. HTML -kodning pastki qismida "ULASHISH ULASHISHNI BU YERGA KERISH" yozuvi paydo bo'ladi. Yana boshlang'ich holatda chelakka o'ting, sozlamalar va almashish yorlig'iga o'ting. Hammaga ulashish oynasini bosing va siz ulashish orqali joylashtirishni ko'rasiz. Faqat ulanish maydoniga URL manzilini nusxalash ("https://iot.app.initialstate.com/embed/#/tiles/xxxxxx" kabi ko'rinadi). Buni tirnoqlarga joylashtiring. Faylni saqlang va biz veb -sahifamizni yaratishga tayyormiz.

4 -qadam: Netlify

Netlify-bu veb-loyihani yaratish, tarqatish va boshqarishga imkon beradigan yagona platforma. Siz bepul ro'yxatdan o'tishingiz mumkin, shuning uchun buni qiling. Ro'yxatdan o'tgandan so'ng, sizning asosiy sahifangizda "Git -ga ulanmasdan yangi saytni joylashtirmoqchimisiz? O'z papkangiz saytini bu erga sudrab tashlab qo'ying" degan qutini ko'rasiz. Yangilangan CodePen fayl papkasini u erga sudrab olib tashlang. U erdan u sizning kodingizni joylashtiradi va yangi veb -sahifangizga havola yaratadi. Havolani bosing va siz veb -shaklingiz va boshqaruv panelini ko'rasiz.

Plitkalar paydo bo'lishi uchun siz ba'zi ma'lumotlarni kiritishingiz kerak. Shunday qilib, veb -shaklingizni to'ldiring va "Yuborish" ni bosing. Buni qilganingizdan so'ng, boshlang'ich shtat asboblar paneliga o'ting. Bu erdan biz plitka turlarini o'zgartirishimiz, plitkalarning hajmini o'zgartirishimiz, tartibni boshqa joyga ko'chirishimiz, ma'lumotlarning ranglarini ko'zlarga yoqadigan qilib sozlashimiz va emojilarga xaritaga real vaqtda ba'zi ifodalarni qo'shishimiz mumkin. Boshqaruv panelini joylashtirish hajmiga moslashtirish uchun sizda ikkita variant bor: plitkalarni kodga joylashtirish yoki joylashtirish hajmini moslashtirish.

5 -qadam: boshqaruv panelini sozlash

O'lchov grafiklari

Men asboblar panelida ikki xil o'lchagichni ishlatardim: arch va suyuq. Plitka turini o'zgartirish uchun, sichqonchaning o'ng tugmachasini bosing va Plitkani tahrirlash -ni tanlang. Bu Tile konfiguratorini ochadi. Pivo o'lchami uchun men plitka turi bo'yicha o'lchov jadvalini va o'lchash uslubi sifatida suyuqlikni tanladim. Men sarlavha, signal tugmachasi rangini va minimal/maksimal qiymatlarni o'zgartirdim. Weight & Beer ABV uchun men arch gauge uslubidan foydalandim.

Emojis xaritasi

Men mashq turini va go'sht turini real vaqt ifodalari yordamida emojilarga joylashtirdim, shuning uchun ochilgan ro'yxatda qaysi elementni tanlaganimga qarab, ma'lum bir emoji paydo bo'ladi. Siz ishlatgan kodni rasmlarda ko'rishingiz mumkin. Siz ushbu veb -saytdan boshqarish+buyruq+bo'sh joy yoki Windows -da klaviaturani bosib Mac -ga emojilar qo'shishingiz mumkin.

Emojislarni veb -shaklga yuboring

"Junk" kabi narsalar uchun men boshqaruv paneliga emojilar yuborishni yaxshi ko'raman. Men emojini nusxa ko'chiraman va veb -formadagi matn maydoniga joylashtiraman va "Yuborish" tugmachasini bosaman, keyin emoji mening boshqaruv panelida ko'rinadi!

Muvaffaqiyatli boshqaruv panelini sozlash uchun ko'p o'ynash kerak va variantlar cheksizdir.

Fon rasmi

Ma'lumotlarga ko'proq shaxsiyat yoki kontekst berish uchun siz boshqaruv paneliga fon tasvirini qo'shishingiz mumkin.

6 -qadam: Xulosa

Pol buni faoliyatni kuzatuvchi sifatida qurganida, uni qandaydir kichik o'zgarishlar bilan qanday ishlatish mumkinligi haqida boshqa g'oyalarni taklif qilgan:

• Town Tracker -dagi eng yaxshi qahva/pivo/restoran
• Mening do'stlarim yoki bolalarim hozir qayerda va ular nima qilyapti? Kuzatuvchi
• Golfning interaktiv kartalari - ballar va kurslarni kuzatuvchi
• Paragliding Flight Logger - (Polning sevimli mashg'ulotlari mendan ko'ra yaxshi)

Endi siz hamma narsani va hamma narsani kuzatishingiz mumkin. Ushbu kod siz yaratmoqchi bo'lgan har qanday veb -shakl uchun qobiqni beradi. Shunday qilib, o'ynang va ijod qiling va menga nima borligini ko'rsating! Shubhasiz, Polni buni yaratishga yordam bergani uchun tabriklayman!