შექმენით პირადი აქტივობის ჟურნალი: 6 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:15

ჩემს მეგობარს ლონდონიდან, პოლს, სურდა ეპოვა თავისი საკვების, საქმიანობის და ადგილმდებარეობის თვალყურის დევნება ერთ დაფაზე. სწორედ მაშინ გაჩნდა იდეა შექმნას მარტივი ვებ ფორმა, რომელიც მონაცემებს აგზავნიდა საინფორმაციო დაფაზე. ის განათავსებდა როგორც ვებ ფორმას, ასევე საინფორმაციო დაფას ვებ გვერდზე და აფიქსირებდა თავის საქმიანობას მგზავრობისას. იქიდან შეიქმნა აქტივობის ჟურნალი! კოდი ამ სახელმძღვანელოში არის პავლე, გარდა მცირედი ცვლილებებისა ფერის, დაფის მორგებისა და ჟარგონისა (ჩემ მიერ შესრულებული ბრიტანულიდან ამერიკულ თარგმანზე).

ამ პროექტისთვის ჩვენ გამოვიყენებთ:

• CodePen
• საწყისი მდგომარეობა
• Netlify

ჩვენ ვქმნით აქტივობის პირად ტრეკერს, მაგრამ ამ სახელმძღვანელოს და კოდის შემდეგ თქვენ შეგიძლიათ გახადოთ ის ვებ ფორმად და ტრეკერი ყველაფრისთვის, რაც გსურთ! Დავიწყოთ!

ნაბიჯი 1: CodePen

CodePen არის განვითარების გარემო. ეს საშუალებას გაძლევთ ჩაწეროთ თქვენი კოდი ბრაუზერში და ნახოთ მისი შედეგები. ჩვენ გვაქვს კოდი HTML, CSS და JavaScript ვებ-გვერდის შესაქმნელად ჩამოსაშლელი ჩანაწერებით, ტექსტური ყუთებით და გეოლოკაციით. თქვენ შეგიძლიათ უფასოდ დარეგისტრირდეთ მხოლოდ იმ პირობით, რომ თქვენ არ შეგიძლიათ თქვენი კოდი გახადოთ პირადი, რასაც ჩვენ მოგვიანებით განვიხილავთ.

პირველი, დარეგისტრირდით CodePen– ზე. ამის გაკეთებისთანავე შეგიძლიათ ჩემი პროექტის ჩანგალი უკვე შექმნილი ყველა კოდით. ეს შექმნის კოდის ასლს თქვენს საკუთარ დაფაზე. თქვენ დაინახავთ HTML მარცხნივ, CSS ცენტრში და JavaScript მარჯვნივ. თუ თქვენ ხართ ექსპერტი ამ ყველაფერში, დაივიწყეთ დანარჩენის წაკითხვა და შეცვალეთ როგორც მოგწონთ! თუ თქვენ უფრო ახალი ხართ ამ ენებზე, ქვემოთ მაქვს რამდენიმე წინადადება ცვლილებების შესახებ, რომელთა გაკეთებაც მარტივად შეგიძლიათ.

HTML

კოდის ეს ნაჭერი არის ფორმატი ყველა ჩამოსაშლელისა და ყუთისთვის. აქ შეგიძლიათ შეცვალოთ ჩამოთვლილ სიაში საგნების ტიპი, რომელსაც თვალყურს ადევნებთ და ჩამოთვლით. სავარჯიშოების ჩამოსაშლელ სიაში შეგიძლიათ შეცვალოთ აქტივობის სახეები (ამჟამად წონა, სირბილი, იოგა და კარდიო). თქვენ შეგიძლიათ დაამატოთ რაიმე სიას ფორმატის შემდეგ ან დაამატოთ მეტი ვარიანტი. იგივე ეხება ხორცის ტიპს, ყავის ზომას და ტიპს და ლუდის ზომას. უსარგებლო ტექსტურ ყუთში შეგიძლიათ შეცვალოთ ადგილის შემცველი სიტყვები (ამჟამად ჩიფსები, შოკოლადი და ა.შ.). იგივე შეიძლება გაკეთდეს წონისთვის (lbs), ვარჯიშისთვის (წუთი) და ლუდისთვის (abv %).

თქვენ ასევე შეგიძლიათ გამოიყენოთ ეს მონახაზი და მთლიანად შეცვალოთ სათაურები, ჩამოსაშლელი პარამეტრები და ადგილის ადგილები, რათა ეს ვებ ფორმა შექმნას თქვენთვის სასურველი ნებისმიერი სახის ტრეკერი.

CSS

კოდის ეს ნაწილი ადგენს ფონის ფერს, ტექსტის გასწორებას და სვეტების გასწორებას. თუ გსურთ შეცვალოთ ფონი ვარდისფერი ვარდისფერიდან უფრო სასიამოვნოზე, გამოიყენეთ ონლაინ ფერის ამომრჩევი, რომ იპოვოთ სწორი ფერის მნიშვნელობა. შეგიძლიათ ტექსტის ან სვეტების გასწორება მარჯვნივ, მარცხნივ ან ცენტრში.

JavaScript

კოდის ეს ნაწილი მუშაობს გეოლოკაციის ღილაკზე და წარდგენის ღილაკზე. აქ ბევრი არაფერია გირჩევთ შეცვალოთ.

ექსპორტი

მას შემდეგ რაც ყველაფერი თქვენთვის სასურველი იქნება, დააწკაპუნეთ ექსპორტის ღილაკზე ქვედა მარჯვნივ და აირჩიეთ ექსპორტი როგორც.zip. ეს გადმოწერს კოდს zip ფაილში და ნახავთ მას თქვენი გადმოტვირთვის საქაღალდეში.

ნაბიჯი 2: საწყისი მდგომარეობა

საწყისი მდგომარეობა საშუალებას მოგვცემს შევქმნათ იმ საქმიანობის პერსონალური დაფა, რომელსაც ჩვენ თვალყურს ვადევნებთ. შეგიძლიათ დარეგისტრირდეთ 14 დღიანი უფასო საცდელი პერიოდისთვის. ამის შემდეგ ეს უფასოა სტუდენტებისთვის edu ელ.ფოსტის მისამართით ან $ 9.99 თვეში ინდივიდუალური გეგმისთვის.

მას შემდეგ რაც დარეგისტრირდით ან დარეგისტრირდით, გადადით თქვენს თაიგულზე და შექმენით ახალი მონაცემთა ნაკადის ჩამკეტი ნაკადის bucket ღილაკზე (+ღრუბელი) დაწკაპუნებით. თქვენ შეგიძლიათ შეცვალოთ სახელი, როგორც მოგწონთ ან შეცვალოთ იგი მოგვიანებით, მე ავირჩიე პირადი აქტივობის მიმდევარი. თუ თქვენ შეამოწმებთ სინათლის თემის ყუთს, თქვენ მისცემთ დაფის თეთრ ფონს. დააწკაპუნეთ დასრულებულია და შეიქმნება თქვენი ნაკადის ნაკრები.

ჩვენ დაგვჭირდება ინფორმაცია bucket– ის პარამეტრებიდან მოგვიანებით HTML კოდში ჩასასმელად (API Endpoint & iframe embed).

ნაბიჯი 3: ვიზუალური სტუდიის კოდი

ვინაიდან მე ვიყენებ CodePen– ის უფასო ვერსიას, ჩემი ყველა კოდი საჯაროა. ამ მიზეზით, მე არ მინდა ჩემი API საბოლოო წერტილები და iframe ჩავრთო კოდში, რადგან თქვენ უნდა შეინახოთ თქვენი საწყისი მდგომარეობის წვდომის გასაღებები პირადი. Visual Studio Code საშუალებას მომცემს შეცვალონ ჩემი კოდი ადგილობრივად zip ფაილიდან, რომელიც მე გადმოვწერე CodePen– დან. თქვენ შეგიძლიათ ჩამოტვირთოთ უახლესი ვერსია უფასოდ მათი ვებ - გვერდიდან.

გახსენით თქვენი კოდის ფაილები და გახსენით ეს საქაღალდე Visual Studio Code- ში. აქედან შეგიძლიათ შეცვალოთ HTML კოდი. ფაილის ზედა ნაწილში ნახავთ "ENTER API ENDPOINTS HERE". თქვენ შეგიძლიათ იპოვოთ API Endpoint საწყის მდგომარეობაში შექმნილ bucket– ზე გადასვლით, დააწკაპუნეთ პარამეტრებზე და Data tab– ში ნახავთ API Endpoint– ს. დააკოპირეთ და ჩასვით ეს HTML კოდში. ბოლოში HTML კოდი ნახავთ "ENTER EMBED SHARE HERE". კვლავ გადადით თქვენს საწყობში საწყის მდგომარეობაში, გადადით პარამეტრებზე და გაზიარების ჩანართზე. დააწკაპუნეთ ყუთის გაზიარება საჯაროდ და ნახავთ გაზიარებას ჩაშენების საშუალებით. დააკოპირეთ მხოლოდ URL ჩაშენების გაზიარების ყუთში (ის გამოიყურება "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). ჩასვით ბრჭყალებში. შეინახეთ ფაილი და ჩვენ მზად ვართ შევქმნათ ჩვენი ვებ გვერდი.

ნაბიჯი 4: Netlify

Netlify არის ყოვლისმომცველი პლატფორმა, რომელიც საშუალებას გაძლევთ შექმნათ, განათავსოთ და მართოთ ვებ პროექტი. თქვენ შეგიძლიათ დარეგისტრირდეთ უფასოდ, ასე რომ გააკეთეთ. მას შემდეგ რაც დარეგისტრირდებით, თქვენს მთავარ გვერდზე ნახავთ ყუთს, რომელშიც ნათქვამია: "გსურთ განათავსოთ ახალი საიტი Git– თან დაკავშირების გარეშე? გადაიტანეთ და ჩამოაგდეთ თქვენი საქაღალდის საიტი აქ." ასე რომ გადაიტანეთ თქვენი განახლებული CodePen ფაილის საქაღალდე იქ და ჩამოაგდეთ. იქიდან განათავსებს თქვენს კოდს და შექმნის ბმულს თქვენს ახალ ვებ გვერდზე. დააწკაპუნეთ ბმულზე და ნახავთ თქვენს ვებ ფორმას და დაფას.

თქვენ უნდა წარმოადგინოთ გარკვეული მონაცემები, რათა თქვენი ფილები გამოჩნდეს. ასე რომ, შეავსეთ თქვენი ვებ ფორმა და დააჭირეთ გაგზავნას. ამის გაკეთებისთანავე შედით თქვენს საწყის შტატში. აქედან ჩვენ შეგვიძლია შევცვალოთ კრამიტის ტიპები, შეცვალოთ კრამიტის ზომა, გადავაადგილოთ განლაგება, შეცვალოთ მონაცემთა ფერები თვალისთვის უფრო სასიამოვნო და დავამატოთ რეალურ დროში გამოთქმები რუქაზე ემოციებზე. თქვენ გაქვთ ორი ვარიანტი, რომ თქვენი დაფა მოერგოს ჩაშენებულ ზომას: შეასწორეთ თქვენი ფილები მორგებული ან შეცვალეთ ჩაშენებული ზომის კოდი.

ნაბიჯი 5: შეცვალეთ თქვენი დაფა

გაზომვის გრაფიკები

ჩემს დაფაზე გამოვიყენე ორი სახის გამზომი: თაღოვანი და თხევადი. კრამიტის ტიპის შესაცვლელად დააწკაპუნეთ მარჯვენა ღილაკზე და აირჩიეთ კრამიტის რედაქტირება. ეს გახსნის კრამიტის კონფიგურატორს. ლუდის ზომისთვის შევარჩიე Gauge Chart როგორც კრამიტის ტიპი და Liquid როგორც Gauge Style. შევცვალე სათაური, სიგნალის გასაღების ფერი და მინიმალური/მაქსიმალური მნიშვნელობებიც. Weight & Beer ABV– სთვის მე გამოვიყენე თაღოვანი ლიანდაგის სტილი.

რუკა ემოციებზე

ემოციისთვის ვთვლი სავარჯიშოების ტიპსა და ხორცის ტიპს რეალურ დროში გამოთქმების გამოყენებით, ასე რომ, იმისდა მიხედვით, თუ რომელი ელემენტი შევარჩიე ჩამოსაშლელი სიიდან, კონკრეტული emoji გამოჩნდება. თქვენ შეგიძლიათ ნახოთ კოდი, რომელიც მე გამოვიყენე ფოტოებში. თქვენ შეგიძლიათ დაამატოთ emoji Mac– ზე, კლავიშთა კონტროლი+ბრძანება+spacebar ან Windows ამ ვებგვერდიდან.

ემოციის გაგზავნა ვებ ფორმაში

უსარგებლო ნივთებისთვის მიყვარს ემოციების გაგზავნა პირდაპირ ჩემს დაფაზე. მე ვაკოპირებ და ჩავსვამ ემოციას ვებ ფორმის ტექსტურ ყუთში და ვაწკაპუნებ წარდგენას, შემდეგ კი ემოჯი გამოჩნდება ჩემს საინფორმაციო დაფაზე!

ბევრი თამაში სჭირდება სრულყოფილი დაფის პერსონალურად მოსაწყობად და პარამეტრები უსასრულოა.

ფონის სურათი

თქვენ შეგიძლიათ დაამატოთ ფონის სურათი თქვენს დაფაზე, რომ მოგაწოდოთ მონაცემები მეტი პიროვნება ან კონტექსტი.

ნაბიჯი 6: დასკვნა

მიუხედავად იმისა, რომ პავლემ შექმნა ეს, როგორც საქმიანობის მაძიებელი, მან შესთავაზა სხვა იდეები, თუ როგორ შეიძლება მისი გამოყენება მცირედი ცვლილებებით:

• საუკეთესო ყავა/ლუდი/რესტორანი Town Tracker– ში
• სად არიან ახლა ჩემი მეგობრები და ბავშვები და რას აკეთებენ ისინი? ტრეკერი
• გოლფის ინტერაქტიული ბარათი - ქულების და კურსების მაძიებელი
• Paragliding Flight Logger - (პოლს ჩემზე გაცილებით მაგარი ჰობი აქვს)

ახლა თქვენ შეგიძლიათ თვალყური ადევნოთ ყველაფერს და ყველაფერს. ეს კოდი უზრუნველყოფს გარსს ნებისმიერი სახის ვებ ფორმაში, რომლის შექმნა გსურთ. ასე რომ ითამაშეთ და იყავით შემოქმედებითი და მაჩვენეთ რა მიიღეთ! და ცხადია, გილოცავთ პავლეს, რომ დაეხმარა ამის შექმნაში!