Şəxsi Fəaliyyət Qeydiyyatı yaradın: 6 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:43

Londondan olan dostum Paul yeməklərini, fəaliyyətini və yerini tək bir tablosunda izləmək üçün bir yol tapmaq istədi. Məhz bu zaman məlumatları tablosuna göndərəcək sadə bir web forması yaratmaq fikri ortaya çıxdı. Həm veb formasını, həm də tablosunu bir veb səhifəsinə yerləşdirər və fəaliyyətini yolda qeyd edərdi. Oradan fəaliyyət qeydiyyatçısı yaradıldı! Bu dərslikdəki kod, rəngdə, idarəetmə panelinin fərdiləşdirilməsində və jarqonda bəzi kiçik dəyişikliklər istisna olmaqla, hamısı Puldur (İngilis dilindən Amerika dilinə tərcüməsi mənim tərəfimdən hazırlanmışdır).

Bu layihə üçün istifadə edəcəyik:

• CodePen
• İlkin vəziyyət
• Netlif

Şəxsi bir fəaliyyət izləyicisi yaradırıq, ancaq bu təlimatı və kodu izlədikdən sonra istədiyiniz hər şeyi veb formasına və izləyicisinə çevirə bilərsiniz! Gəlin başlayaq!

Addım 1: CodePen

CodePen inkişaf mühitidir. Kodunuzu brauzerinizə yazmağa və gedərkən nəticələrini görməyə imkan verir. HTML, CSS və JavaScript-də açılanlar, mətn qutuları və coğrafi yerləşmə ilə bir web forması yaratmaq üçün kodumuz var. Kodunuzu özəlləşdirə bilməyəcəyiniz şərtlə pulsuz olaraq qeydiyyatdan keçə bilərsiniz, daha sonra müraciət edəcəyik.

Əvvəlcə CodePen -ə daxil olun. Bunu etdikdən sonra artıq yaradılmış bütün kodlarla layihəmi çəngəl edə bilərsiniz. Bu, öz panelinizdə kodun bir nüsxəsini yaradacaqdır. Solda HTML, mərkəzdə CSS və sağda JavaScript görəcəksiniz. Bütün bunların mütəxəssisinizsə, qalanını oxumağı unutmayın və istədiyiniz kimi dəyişikliklər edin! Bu dillərlə daha yenisinizsə, aşağıda edə biləcəyiniz dəyişikliklərlə bağlı bəzi təkliflərim var.

HTML

Bu kod parçası bütün açılanlar və qutular üçün formatdır. İzlədiyiniz və açılan siyahılarda siyahıya aldığınız şeylərin növünü burada dəyişə bilərsiniz. Məşq açılan menyusunda fəaliyyət növlərini (hal-hazırda Ağırlıq, Qaçış, Yoga və Kardio) dəyişə bilərsiniz. Formata uyğun olaraq siyahıya bir şey əlavə edə və ya daha çox seçim əlavə edə bilərsiniz. Eyni şey ət növü, qəhvə ölçüsü və növü və pivə ölçüsünə aiddir. Zibil mətn qutusunda yer tutan sözləri dəyişə bilərsiniz (hazırda cips, şokolad və s.). Eyni şey çəki (lbs), məşq (dəqiqə) və pivə (abv %) üçün də edilə bilər.

Bu konturdan istifadə edə və başlıqları, açılan variantları və yer tutucuları tamamilə dəyişərək bu vebi istədiyiniz növ izləyiciyə çevirə bilərsiniz.

CSS

Bu kod parçası fon rəngini, mətn hizalanmasını və sütun hizalamasını təyin edir. Arxa planı çəhrayı bulantıdan daha xoş bir şeyə dəyişdirmək istəyirsinizsə, doğru rəng dəyərini tapmaq üçün onlayn rəng seçicidən istifadə edin. Mətni və ya sütunları sağa, sola və ya ortaya düzəldə bilərsiniz.

JavaScript

Bu kod parçası coğrafi mövqe düyməsini və göndərmə düyməsini işləyir. Burada çox şey dəyişməyi məsləhət görmürəm.

İxrac edin

İstədiyiniz hər şeyi hazırladıqdan sonra, sağ altdakı ixrac düyməsini basın və.zip olaraq ixrac et seçin. Bu kodu zip faylına endirəcək və yükləmə qovluğunda görəcəksiniz.

Addım 2: İlkin vəziyyət

İlkin vəziyyət, izlədiyimiz fəaliyyətin xüsusi bir tablosunu yaratmağımıza imkan verəcəkdir. 14 günlük pulsuz sınaq üçün qeydiyyatdan keçə bilərsiniz. Bundan sonra bir eu e -poçt ünvanı olan və ya Fərdi plan üçün ayda $ 9.99 olan tələbələr üçün pulsuzdur.

Daxil olduqdan və ya qeydiyyatdan keçdikdən sonra çömçə rəfinizə gedin və axın kovası yaratmaq düyməsini (+bulud) tıklayaraq yeni bir məlumat axını kovası yaradın. Adı istədiyiniz kimi düzəldə bilərsiniz və ya sonra dəyişdirə bilərsiniz, Şəxsi Fəaliyyət İzləyicisini seçdim. İşıq Mövzu qutusunu yoxlasanız, tablosuna ağ bir fon verərsiniz. Tamamlandı düyməsini basın və axın paketiniz yaradılacaq.

HTML koduna (API Endpoint & iframe embed) daxil etmək üçün daha sonra paket parametrlərindən məlumatlara ehtiyacımız olacaq.

Addım 3: Visual Studio Kodu

CodePen -in pulsuz versiyasını istifadə etdiyim üçün bütün kodlarım açıqdır. Bu səbəbdən, API -nin son nöqtələrini və iframe kodumu koda daxil etmək istəmirəm, çünki İlkin vəziyyətə giriş açarlarınızı gizli saxlamalısınız. Visual Studio Kodu, kodumu CodePen -dən yüklədiyim zip faylından yerli olaraq redaktə etməyimə icazə verəcək. Veb saytından ən son versiyanı pulsuz yükləyə bilərsiniz.

Kod sənədlərinizi açın və qovluğu Visual Studio Kodunda açın. Buradan HTML kodunu düzəldə bilərsiniz. Faylın yuxarı hissəsində "BURADA API SON NÖVLƏRİNƏ GİR" yazısını görəcəksiniz. Başlanğıc Vəziyyətində yaratdığınız paketə gedərək API Son nöqtəsini tapa bilərsiniz, parametrləri vurun və Məlumatlar sekmesinin altında API Son Nöqtəsini görəcəksiniz. Bunu kopyalayın və HTML koduna yapışdırın. HTML kodunun alt hissəsində "BURADA EMBED PAYLAŞIN" yazısını görəcəksiniz. Yenidən Başlanğıc Vəziyyətinizdəki çömçə gedin, parametrlərə və Paylaşım sekmesine keçin. Hamıya Paylaş bölməsini vurun və Gömrüklə Paylaş bölməsini görəcəksiniz. Yalnız yerləşdirmə paylaşma qutusundakı URL -ni kopyalayın ("https://iot.app.initialstate.com/embed/#/tiles/xxxxxx" kimi bir şey görünəcək). Bunu dırnaq işarələrinə yapışdırın. Faylı qeyd edin və veb səhifəmizi yaratmağa hazırıq.

Addım 4: Netlif edin

Netlify, bir veb layihəsi qurmağa, yerləşdirməyə və idarə etməyə imkan verən hamısı bir arada bir platformadır. Pulsuz qeydiyyatdan keçə bilərsiniz, bunu edin. Qeydiyyatdan keçdikdən sonra, ana səhifənizdə "Git -ə qoşulmadan yeni bir sayt yerləşdirmək istəyirsiniz? Qovluq saytınızı bura sürükləyin" yazan bir qutu görəcəksiniz. Yenilənmiş CodePen fayl qovluğunuzu ora sürükləyin və oradan atın. Oradan kodunuzu yerləşdirəcək və yeni veb səhifənizə bir keçid yaradacaq. Linki vurun və veb formunuzu və tablosunu görəcəksiniz.

Plitələrinizin görünməsi üçün bəzi məlumatlar təqdim etməlisiniz. Buna görə veb formunuzu doldurun və "Göndər" düyməsini basın. Bunu etdikdən sonra İlkin Dövlət tablosuna daxil olun. Buradan kafel növlərini dəyişə, plitələrin ölçüsünü dəyişə, düzeni hərəkət etdirə, məlumatların rənglərini gözlər üçün daha xoş olacaq şəkildə tənzimləyə və emojilərə xəritəyə bəzi real vaxt ifadələrini əlavə edə bilərik. Tablosunuzu yerləşdirmə ölçüsünə uyğunlaşdırmaq üçün iki seçiminiz var: Fayanslarınızı koddakı yerləşdirmə ölçüsünü uyğunlaşdırmaq və ya tənzimləmək üçün tənzimləyin.

Addım 5: Tablosunu fərdiləşdirin

Ölçmə Qrafikləri

Tablosuna iki növ ölçü cihazı istifadə etdim: arx və maye. Çini növünü dəyişdirmək üçün Çini üzərinə sağ vurun və Çini Düzəlt seçin. Bu, Çini konfiquratorunu açacaq. Pivə Ölçüsü üçün Çini növü olaraq Ölçü Şemasını və Ölçü Stili olaraq Sıvıyı seçdim. Başlığı, siqnal düyməsinin rəngini və minimum/maksimum dəyərlərini də dəyişdim. Weight & Beer ABV üçün arch gauge üslubundan istifadə etdim.

Emojilər üçün xəritə

Məşq növünü və Ət növünü Real Zamanlı İfadələrdən istifadə edərək emojilərlə xəritələdim, beləliklə açılan siyahıdan hansı elementi seçdiyimə görə xüsusi bir emoji görünəcək. Şəkillərdə istifadə etdiyim kodu görə bilərsiniz. Bu veb saytından nəzarət+əmr+boşluq və ya Windows düymələrini basaraq Mac -da emojilər əlavə edə bilərsiniz.

Veb Formasında Emojilər göndərin

Junk kimi şeylər üçün birbaşa tablosuna emojilər göndərməyi sevirəm. Emojini veb forması mətn qutusuna kopyalayıb yapışdırıram və "Göndər" düyməsini basın, sonra emoji tablosumda görünür!

Mükəmməl tablosunu fərdiləşdirmək üçün çox oynamaq lazımdır və seçimlər sonsuzdur.

Arxa fon şəkli

Sizə daha çox şəxsiyyət və ya kontekst vermək üçün tablosuna bir fon şəkli əlavə edə bilərsiniz.

Addım 6: Nəticə

Paul bunu bir fəaliyyət izləyicisi olaraq qurarkən, bunun bəzi kiçik dəyişikliklərlə necə istifadə edilə biləcəyinə dair başqa fikirlər də təklif etdi:

• Town Tracker -də ən yaxşı qəhvə/pivə/restoran
• Dostlarım və ya uşaqlarım hazırda haradadır və nə edirlər? İzləyici
• İnteraktiv Golf Hesab Kartı - Scores & Courses Tracker
• Yamaç paraşütü ilə uçan uçotçu - (Paulun məndən daha sərin hobbiləri var)

İndi hər şeyi və hər şeyi izləyə bilərsiniz. Bu kod, yaratmaq istədiyiniz hər hansı bir veb forması üçün qabığı təmin edir. Ətrafınızda oynayın və yaradıcılıqla məşğul olun və mənə nə olduğunu göstərin! Və aydındır ki, bunu yaratmağa kömək etdiyi üçün Paula şükürlər olsun!