Хувийн үйл ажиллагааны бүртгэл хөтлөгч бий болгох: 6 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:00

Миний Лондоноос ирсэн найз Пол хоол хүнс, үйл ажиллагаа, байршлаа нэг хяналтын самбарт хянах аргыг хайж олохыг хүсчээ. Тэр үед л мэдээллийн самбар руу өгөгдөл илгээх энгийн вэб маягт бүтээх санаа төрсөн юм. Тэр вэб хуудас болон хяналтын самбарыг хоёуланг нь вэб хуудсан дээр байрлуулж, үйл ажиллагаагаа явж байхдаа бүртгэдэг байв. Тэндээс үйл ажиллагааны бүртгэлийг үүсгэсэн! Энэхүү гарын авлагад оруулсан код бол өнгө, самбарын тохиргоо, хэл ярианы бага зэрэг өөрчлөлтийг эс тооцвол Паул юм.

Энэ төслийн хувьд бид дараахь зүйлийг ашиглах болно.

• CodePen
• Анхны төлөв
• Цэвэрлэх

Бид хувийн үйл ажиллагааны мөрдөгчийг бий болгодог боловч энэхүү заавар, кодыг дагаж мөрдвөл та үүнийг хүссэн хэлбэрээр вэб маягт, хянагч болгож болно! Эхэлцгээе!

Алхам 1: CodePen

CodePen бол хөгжлийн орчин юм. Энэ нь кодоо хөтөч дээр бичиж, үр дүнг нь үзэх боломжийг танд олгоно. Бид HTML, CSS, JavaScript дээр кодтой бөгөөд доош унах, текст хайрцаг, газарзүйн байршлыг ашиглан вэб маягт үүсгэх боломжтой. Та кодоо хувийн болгох боломжгүй гэсэн ганц болзолтойгоор үнэгүй бүртгүүлж болно, бид дараа нь үүнийг хэлэх болно.

Эхлээд CodePen -д бүртгүүлнэ үү. Үүнийг хийсний дараа та миний төслийг аль хэдийн үүсгэсэн бүх кодоор салгаж болно. Энэ нь кодын хуулбарыг өөрийн хяналтын самбар дээр үүсгэх болно. Та зүүн талд HTML, төвд CSS, баруун талд JavaScript харах болно. Хэрэв та энэ бүхний талаар мэргэшсэн хүн бол бусад хэсгийг уншихаа мартаж, хүссэнээрээ өөрчлөлт оруулаарай! Хэрэв та эдгээр хэлийг шинээр сурч байгаа бол хялбархан хийж болох өөрчлөлтүүдийн талаар доорх хэдэн санал байна.

HTML

Энэ код нь бүх уналт болон хайрцгийн формат юм. Эндээс та дагадаг зүйлсийнхээ төрлийг өөрчилж болно. Дасгал жагсаалтаас та үйл ажиллагааны төрлийг өөрчлөх боломжтой (одоо жин, гүйлт, йог, кардио). Та форматын дагуу жагсаалтад ямар нэгэн зүйл нэмж оруулах эсвэл бусад сонголтыг нэмж болно. Махны төрөл, кофены хэмжээ, төрөл, шар айрагны хэмжээтэй ижил зүйл хамаарна. Хог хаягдлын текст хайрцагт та орлуулагчийн үгсийг өөрчилж болно (одоогоор чипс, шоколад гэх мэт). Жин (фунт), дасгал (минут), шар айраг (ойролцоогоор %) -тай ижил зүйлийг хийж болно.

Та мөн энэ тоймыг ашиглаж, гарчиг, унах сонголтууд, орлуулагчдыг бүрэн өөрчилж, энэ вэбийг хүссэн хэлбэрийн трекер болгох боломжтой.

CSS

Энэхүү кодын хэсэг нь дэвсгэр өнгө, текстийн тохируулга, баганын зэрэгцүүлэлтийг тохируулдаг. Хэрэв та ягаан дотор муухайрахаас илүү тааламжтай зүйлийг өөрчлөхийг хүсч байвал өнгөний оновчтой утгыг олохын тулд онлайн өнгө сонгогчийг ашиглаарай. Та текст эсвэл баганыг баруун, зүүн эсвэл төвд зэрэгцүүлж болно.

JavaScript

Энэ код нь газарзүйн байршлын товчлуур болон илгээх товчлуур дээр ажилладаг. Энд тийм ч их зүйл байхгүй, би өөрчлөхийг зөвлөж байна.

Экспортлох

Та хүссэн бүх зүйлээ тохируулсны дараа баруун доод буланд байгаа экспортын товчлуурыг дарж экспортлохыг.zip хэлбэрээр сонгоно уу. Энэ нь кодыг зип файл руу татаж авах бөгөөд та үүнийг татаж авах хавтаснаас харах болно.

Алхам 2: Анхны төлөв

Анхны төлөв нь бидний дагаж мөрдөж буй үйл ажиллагааны тохируулсан хяналтын самбарыг бий болгох боломжийг бидэнд олгоно. Та 14 хоногийн үнэгүй туршилтанд бүртгүүлж болно. Үүний дараа eu имэйл хаягтай оюутнуудад үнэ төлбөргүй байдаг эсвэл хувь хүний төлөвлөгөөний хувьд сард 9.99 доллар.

Та нэвтэрсэн эсвэл бүртгүүлснийхээ дараа хувингийн тавиур дээрээ очиж, урсгал хувин үүсгэх товчийг (+үүл) дарж шинэ өгөгдлийн урсгал хувин үүсгэнэ үү. Та нэрээ дуртай зүйлээ засах эсвэл дараа нь өөрчлөх боломжтой, би хувийн үйл ажиллагааны мөрдөгчийг сонгосон. Хэрэв та Light Theme хайрцгийг сонговол хяналтын самбарт цагаан дэвсгэр өгөх болно. "Дууссан" дээр дарахад таны дамжуулах сав үүснэ.

HTML кодыг оруулахын тулд бидэнд хувингийн тохиргооноос мэдээлэл хэрэгтэй болно (API Endpoint & iframe embed).

Алхам 3: Visual Studio код

Би CodePen -ийн үнэгүй хувилбарыг ашиглаж байгаа тул миний бүх код нийтэд нээлттэй байна. Энэ шалтгааны улмаас би API -ийн төгсгөлийн цэгүүд болон iframe -ийг кодонд оруулахыг хүсэхгүй байна, учир нь та анхны төлөвт нэвтрэх түлхүүрээ нууцлах хэрэгтэй. Visual Studio Code нь CodePen -ээс татаж авсан зип файлаас кодоо дотооддоо засах боломжийг надад олгоно. Та хамгийн сүүлийн хувилбарыг вэбсайтаас үнэгүй татаж авах боломжтой.

Кодын файлуудаа задалж, энэ фолдерыг Visual Studio Code дээр нээнэ үү. Эндээс та HTML кодыг засах боломжтой. Файлын дээд хэсэгт "API ТӨГСГӨЛИЙГ ЭНД ДАРЖ оруулах" -ыг харах болно. Та Анхны төлөв дээр үүсгэсэн хувин руу очиж API төгсгөлийн цэгийг олох боломжтой бөгөөд тохиргоог дарж өгөгдлийн табын доор API төгсгөлийн цэгийг харах болно. Үүнийг HTML код руу хуулж оруулна уу. HTML кодын доод талд "ЭНД ДАРЖ ХУВААЛЦААГАА ШАЛГАХ" -ыг харах болно. Анхны төлөвт байгаа хувин руугаа дахин ороод тохиргоо болон Хуваалцах таб руу очно уу. Нийтэд хуваалцах хайрцгийг дарж, та хуваалцах замаар оруулахыг харах болно. Оруулсан хуваалцах хайрцагт байгаа URL -г хуулж ав (энэ нь "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx" шиг харагдах болно). Үүнийг ишлэлд оруулна уу. Файлыг хадгалаад бид вэб хуудсаа үүсгэхэд бэлэн байна.

Алхам 4: Netlify хийх

Netlify бол вэб төслийг бүтээх, байршуулах, удирдах боломжийг олгодог цорын ганц платформ юм. Та үнэгүй бүртгүүлж болох тул үүнийг хийгээрэй. Бүртгүүлсний дараа үндсэн хуудсан дээр "Git -тэй холбогдоогүйгээр шинэ сайт байршуулахыг хүсч байна уу? Фолдерын сайтаа энд чирж тавиарай" гэсэн хайрцгийг харах болно. Шинэчилсэн CodePen файлын фолдероо тэнд чирээд хаяна уу. Тэндээс энэ нь таны кодыг байршуулж, таны шинэ вэб хуудасны холбоосыг үүсгэх болно. Холбоос дээр дарахад таны вэб маягт болон хяналтын самбар харагдах болно.

Хавтангаа харуулахын тулд та зарим өгөгдлийг оруулах ёстой. Тиймээс вэб маягтаа бөглөж, илгээх товчийг дарна уу. Үүнийг хийсний дараа анхны төлөвийнхөө хяналтын самбар руу орно уу. Эндээс бид хавтангийн төрлийг өөрчилж, хавтангийн хэмжээг өөрчилж, байршлыг нь өөрчилж, өгөгдлийн өнгийг нүдэнд илүү тааламжтай болгож тохируулж, бодит цагийн илэрхийлэлийг эможи руу нэмж болно. Хяналтын самбарыг оруулах хэмжээтэй тохируулахын тулд танд хоёр сонголт байна: Хавтангаа тохируулах эсвэл кодонд оруулах хэмжээг тохируулах.

Алхам 5: Хяналтын самбараа тохируулна уу

Хэмжигч график

Би хяналтын самбартаа нуман ба шингэн гэсэн хоёр төрлийн хэмжигчийг ашигласан. Хавтангийн төрлийг өөрчлөхийн тулд Хавтан дээр хулганы баруун товчийг дараад Засварлах хавтанг сонгоно уу. Энэ нь Tile тохируулагчийг нээх болно. Шар айрагны хэмжээгээр би хэмжээсийн диаграмыг хавтангийн төрөл, шингэнийг хэмжигчийн хэв маягаар сонгосон. Би Гарчиг, дохионы түлхүүрийн өнгө, хамгийн бага/хамгийн их утгыг өөрчилсөн. Weight & Beer ABV -ийн хувьд би нуман хэмжигч загварыг ашигласан.

Emojis -ийн газрын зураг

Би Дасгалын төрөл ба Махны төрлийг бодит цагийн илэрхийлэл ашиглан эможи болгож зурсан тул унах жагсаалтаас аль зүйлийг сонгохоос хамааран тодорхой эможи гарч ирэх болно. Та миний ашигласан кодыг зургуудаас харж болно. Та энэ вэбсайтаас Control+command+spacebar эсвэл Windows дээр дарж Mac дээр эможи нэмж болно.

Вэб хэлбэрээр эможи илгээх

Хог гэх мэт зүйлсийн хувьд би эможи -ийг шууд самбар дээрээ илгээх дуртай. Би эможиг вэб маягтын текст хайрцагт хуулж оруулаад илгээх товчийг дарахад эможи миний самбарт гарч ирнэ!

Төгс хяналтын самбарыг өөрчлөхийн тулд маш их тоглох шаардлагатай бөгөөд сонголтууд нь хязгааргүй юм.

Арын зураг

Та өгөгдлийг илүү хувийн шинж чанар эсвэл контекстээр хангахын тулд самбар дээрээ арын зургийг нэмж болно.

Алхам 6: Дүгнэлт

Паул үүнийг үйл ажиллагааны мөрдөгч болгон бүтээсэн боловч үүнийг бага зэргийн өөрчлөлтөөр хэрхэн ашиглах талаар өөр санаануудыг санал болгов.

• Town Tracker -ийн шилдэг кофе/шар айраг/ресторан
• Миний найзууд эсвэл хүүхдүүд яг одоо хаана байна, тэд юу хийж байна вэ? Tracker
• Гольфын интерактив онооны карт - Оноо ба курс дагагч
• Нисэх онгоцны нисгэгч - (Паул надаас илүү дажгүй хоббитой)

Одоо та юу ч, бүх зүйлийг хянах боломжтой. Энэ код нь үүсгэхийг хүсч буй бүх төрлийн вэб маягтын бүрхүүлийг өгдөг. Тиймээс эргэн тойронд тоглож, бүтээлч байж, юу олж авснаа надад харуулаарай! Үүнийг бий болгоход тусалсан Паулд баяр хүргэе.