สร้างเครื่องมือบันทึกกิจกรรมส่วนบุคคล: 6 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:02

Paul เพื่อนของฉันจากลอนดอน ต้องการหาวิธีติดตามอาหาร กิจกรรม และตำแหน่งของเขาในแดชบอร์ดเดียว นั่นคือตอนที่เขาเกิดแนวคิดในการสร้างเว็บฟอร์มอย่างง่ายที่จะส่งข้อมูลไปยังแดชบอร์ด เขาจะใส่ทั้งเว็บฟอร์มและแดชบอร์ดในหน้าเว็บและบันทึกกิจกรรมของเขาในระหว่างการเดินทาง จากนั้นจึงสร้างตัวบันทึกกิจกรรม! โค้ดในบทช่วยสอนนี้คือ Paul ทั้งหมด ยกเว้นการเปลี่ยนสีเล็กน้อย การปรับแต่งแดชบอร์ด และคำสแลง (ฉันเป็นคนแปลภาษาอังกฤษเป็นอเมริกัน)

สำหรับโครงการนี้เราจะใช้:

• CodePen
• สถานะเริ่มต้น
• Netlify

เราสร้างตัวติดตามกิจกรรมส่วนบุคคล แต่ตามบทช่วยสอนและรหัสนี้ คุณสามารถสร้างสิ่งนี้ให้เป็นแบบฟอร์มเว็บและตัวติดตามสำหรับทุกสิ่งที่คุณต้องการ! มาเริ่มกันเลย!

ขั้นตอนที่ 1: CodePen

CodePen คือสภาพแวดล้อมการพัฒนา ช่วยให้คุณเขียนโค้ดในเบราว์เซอร์และดูผลลัพธ์ได้ทันที เรามีโค้ดใน HTML, CSS และ JavaScript เพื่อสร้างเว็บฟอร์มพร้อมดรอปดาวน์ กล่องข้อความ และตำแหน่งทางภูมิศาสตร์ คุณสามารถลงทะเบียนได้ฟรีโดยมีเงื่อนไขว่าคุณไม่สามารถทำให้รหัสของคุณเป็นแบบส่วนตัวได้ ซึ่งเราจะกล่าวถึงในภายหลัง

ขั้นแรก ลงชื่อสมัครใช้ CodePen เมื่อคุณทำเช่นนั้น คุณสามารถแยกโครงการของฉันด้วยรหัสทั้งหมดที่สร้างไว้แล้ว สิ่งนี้จะสร้างสำเนาของรหัสในแดชบอร์ดของคุณเอง คุณจะเห็น HTML ทางด้านซ้าย CSS ตรงกลาง และ JavaScript ทางด้านขวา หากคุณเป็นผู้เชี่ยวชาญในเรื่องเหล่านี้ อย่าลืมอ่านส่วนที่เหลือและทำการเปลี่ยนแปลงตามที่คุณต้องการ! หากคุณยังใหม่กับภาษาเหล่านี้ ฉันมีคำแนะนำด้านล่างเกี่ยวกับการเปลี่ยนแปลงที่คุณทำได้อย่างง่ายดาย

HTML

โค้ดนี้เป็นรูปแบบสำหรับดรอปดาวน์และกล่องทั้งหมด ที่นี่คุณสามารถเปลี่ยนประเภทของสิ่งที่คุณติดตามและแสดงรายการในเมนูแบบเลื่อนลง ในเมนูแบบเลื่อนลงการออกกำลังกาย คุณสามารถเปลี่ยนประเภทของกิจกรรมได้ (ปัจจุบันคือ Weights, Running, Yoga, & Cardio) คุณสามารถเพิ่มบางอย่างลงในรายการตามรูปแบบหรือเพิ่มตัวเลือกอื่นๆ ได้ ประเภทเนื้อสัตว์ ขนาดและประเภทกาแฟ และขนาดเบียร์ก็เช่นเดียวกัน ในกล่องข้อความขยะ คุณสามารถเปลี่ยนคำในที่พักได้ (ปัจจุบันคือชิป ช็อคโกแลต ฯลฯ) สามารถทำได้เช่นเดียวกันสำหรับน้ำหนัก (ปอนด์) การออกกำลังกาย (นาที) และเบียร์ (abv %)

คุณยังสามารถใช้โครงร่างนี้และเปลี่ยนชื่อ ตัวเลือกดรอปดาวน์ และตัวยึดตำแหน่งทั้งหมดเพื่อทำให้เว็บนี้เป็นตัวติดตามประเภทใดก็ได้ที่คุณต้องการ

CSS

โค้ดชิ้นนี้กำหนดสีพื้นหลัง การจัดตำแหน่งข้อความ และการจัดตำแหน่งคอลัมน์ หากคุณต้องการเปลี่ยนพื้นหลังจากสีชมพูน่าสะอิดสะเอียนเป็นสีที่น่าพึงพอใจยิ่งขึ้น เพียงใช้เครื่องมือเลือกสีออนไลน์เพื่อค้นหาค่าสีที่เหมาะสม คุณสามารถจัดแนวข้อความหรือคอลัมน์ทางขวา ซ้าย หรือกึ่งกลาง

JavaScript

โค้ดชิ้นนี้ใช้ปุ่มตำแหน่งทางภูมิศาสตร์และปุ่มส่ง ไม่มีอะไรมากที่นี่ฉันแนะนำให้เปลี่ยน

ส่งออก

เมื่อคุณได้ทุกอย่างตามที่ต้องการแล้ว ให้คลิกปุ่มส่งออกที่ด้านล่างขวาและเลือกส่งออกเป็น.zip การดำเนินการนี้จะดาวน์โหลดโค้ดลงในไฟล์ zip และคุณจะเห็นโค้ดดังกล่าวในโฟลเดอร์ดาวน์โหลด

ขั้นตอนที่ 2: สถานะเริ่มต้น

สถานะเริ่มต้นจะช่วยให้เราสร้างแดชบอร์ดที่กำหนดเองของกิจกรรมที่เราติดตามได้ คุณสามารถลงทะเบียนเพื่อทดลองใช้งานฟรี 14 วัน หลังจากนั้น ฟรีสำหรับนักเรียนที่มีที่อยู่อีเมลสำหรับการศึกษา หรือ $9.99 ต่อเดือนสำหรับแผนรายบุคคล

เมื่อคุณลงชื่อเข้าใช้หรือลงชื่อสมัครใช้แล้ว ให้ไปที่ชั้นวางถังของคุณและสร้างที่เก็บข้อมูลสตรีมข้อมูลใหม่โดยคลิกปุ่มสร้างที่เก็บข้อมูลสตรีม (+cloud) คุณสามารถแก้ไขชื่อเป็นอะไรก็ได้ที่คุณชอบหรือเปลี่ยนแปลงในภายหลัง ฉันเลือกตัวติดตามกิจกรรมส่วนบุคคล หากคุณเลือกช่อง Light Theme คุณจะให้พื้นหลังสีขาวแก่แดชบอร์ด คลิกเสร็จสิ้นและฝากข้อมูลสตรีมของคุณจะถูกสร้างขึ้น

เราต้องการข้อมูลจากการตั้งค่าที่ฝากข้อมูลในภายหลังเพื่อใส่ลงในโค้ด HTML (API Endpoint & iframe embed)

ขั้นตอนที่ 3: รหัส Visual Studio

เนื่องจากฉันใช้ CodePen เวอร์ชันฟรี รหัสทั้งหมดของฉันจึงเป็นแบบสาธารณะ ด้วยเหตุผลนี้ ฉันไม่ต้องการวางปลายทาง API และ iframe ที่ฝังลงในโค้ด เนื่องจากคุณต้องเก็บคีย์การเข้าถึงสถานะเริ่มต้นของคุณไว้เป็นส่วนตัว Visual Studio Code จะอนุญาตให้ฉันแก้ไขรหัสของฉันในเครื่องจากไฟล์ zip ที่ฉันดาวน์โหลดจาก CodePen คุณสามารถดาวน์โหลดเวอร์ชันล่าสุดได้ฟรีจากเว็บไซต์ของพวกเขา

เปิดเครื่องรูดไฟล์รหัสของคุณและเปิดโฟลเดอร์นั้นใน Visual Studio Code จากที่นี่ คุณสามารถแก้ไขโค้ด HTML ได้ ที่ด้านบนของไฟล์ คุณจะเห็น “ENTER API ENDPOINTS HERE” คุณสามารถค้นหา API Endpoint ได้โดยไปที่บัคเก็ตที่คุณสร้างขึ้นใน Initial State คลิกการตั้งค่า และใต้แท็บข้อมูล คุณจะเห็น API Endpoint คัดลอกและวางสิ่งนี้ลงในโค้ด HTML ที่ด้านล่างโค้ด HTML คุณจะเห็น "ENTER EMBED SHARE HERE" ไปที่ถังของคุณอีกครั้งในสถานะเริ่มต้น ไปที่การตั้งค่าและแท็บการแชร์ คลิกช่อง Share Publicly แล้วคุณจะเห็น Share by Embed คัดลอกเฉพาะ URL ในช่องแชร์แบบฝัง (จะมีลักษณะดังนี้ "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx") วางลงในเครื่องหมายคำพูด บันทึกไฟล์และเราพร้อมที่จะสร้างหน้าเว็บของเรา

ขั้นตอนที่ 4: Netlify

Netlify เป็นแพลตฟอร์มแบบครบวงจรที่ให้คุณสร้าง ปรับใช้ และจัดการโครงการเว็บได้ คุณสามารถลงทะเบียนได้ฟรีเพื่อทำเช่นนั้น เมื่อคุณลงชื่อสมัครใช้แล้ว ในหน้าหลักของคุณ คุณจะเห็นกล่องที่ระบุว่า "ต้องการปรับใช้ไซต์ใหม่โดยไม่ต้องเชื่อมต่อกับ Git หรือไม่ ลากและวางไซต์โฟลเดอร์ของคุณที่นี่" ดังนั้นให้ลากโฟลเดอร์ไฟล์ CodePen ที่อัปเดตแล้ววาง จากนั้นจะปรับใช้โค้ดของคุณและสร้างลิงก์ไปยังหน้าเว็บใหม่ของคุณ คลิกที่ลิงก์ แล้วคุณจะเห็นเว็บฟอร์มและแดชบอร์ดของคุณ

คุณต้องส่งข้อมูลบางส่วนเพื่อให้ไทล์ของคุณแสดง กรอกแบบฟอร์มเว็บของคุณและกดส่ง เมื่อคุณทำเช่นนั้นแล้ว ให้ไปที่หน้าแดชบอร์ดสถานะเริ่มต้นของคุณ จากที่นี่ เราสามารถเปลี่ยนประเภทไทล์ ปรับขนาดไทล์ ย้ายเลย์เอาต์ไปรอบๆ ปรับสีข้อมูลให้น่ามองยิ่งขึ้น และเพิ่มนิพจน์แบบเรียลไทม์เพื่อจับคู่กับอิโมจิ คุณมีสองตัวเลือกในการทำให้แดชบอร์ดของคุณพอดีกับขนาดที่ฝัง: ปรับไทล์ของคุณให้พอดีหรือปรับขนาดการฝังในโค้ด

ขั้นตอนที่ 5: ปรับแต่งแดชบอร์ดของคุณ

กราฟเกจ

ฉันใช้เกจสองประเภทในแดชบอร์ดของฉัน: โค้งและของเหลว หากต้องการเปลี่ยนประเภทไทล์ให้คลิกขวาที่ไทล์และเลือกแก้ไขไทล์ ซึ่งจะเป็นการเปิดตัวกำหนดค่าไทล์ สำหรับขนาดเบียร์ ฉันเลือกแผนภูมิเกจเป็นประเภทไทล์และของเหลวเป็นสไตล์เกจ ฉันเปลี่ยนชื่อ สีของปุ่มสัญญาณ และค่าต่ำสุด/สูงสุดด้วย สำหรับ Weight & Beer ABV ฉันใช้รูปแบบเกจโค้ง

แผนที่ไปยัง Emojis

ฉันจับคู่ประเภทการออกกำลังกายและประเภทเนื้อสัตว์กับอิโมจิโดยใช้นิพจน์แบบเรียลไทม์ ดังนั้นขึ้นอยู่กับว่าฉันเลือกรายการใดจากรายการดรอปดาวน์ อีโมจิเฉพาะจะปรากฏขึ้น คุณสามารถดูรหัสที่ฉันใช้ในรูปภาพ คุณสามารถเพิ่มอิโมจิบน Mac ได้โดยกดแป้น control+command+spacebar หรือบน Windows จากเว็บไซต์นี้

ส่งอิโมจิในเว็บฟอร์ม

สำหรับสิ่งต่างๆ เช่น ขยะ ฉันชอบส่งอิโมจิไปที่แดชบอร์ดของฉันโดยตรง ฉันคัดลอกและวางอิโมจิลงในกล่องข้อความของแบบฟอร์มบนเว็บ แล้วคลิกส่ง จากนั้นอิโมจิจะปรากฏในแดชบอร์ดของฉัน!

ต้องใช้เวลามากในการปรับแต่งแดชบอร์ดที่สมบูรณ์แบบและตัวเลือกต่างๆ ก็ไม่มีที่สิ้นสุด

ภาพพื้นหลัง

คุณสามารถเพิ่มภาพพื้นหลังลงในแดชบอร์ดเพื่อให้ข้อมูลมีบุคลิกหรือบริบทมากขึ้น

ขั้นตอนที่ 6: บทสรุป

ในขณะที่ Paul สร้างสิ่งนี้เป็นเครื่องมือติดตามกิจกรรม เขาได้เสนอแนวคิดอื่นๆ ว่าสิ่งนี้จะนำไปใช้กับการเปลี่ยนแปลงเล็กน้อยได้อย่างไร:

• สุดยอดกาแฟ / เบียร์ / ร้านอาหารในเมือง Tracker
• เพื่อนหรือลูก ๆ ของฉันอยู่ที่ไหนและพวกเขากำลังทำอะไรอยู่? ตัวติดตาม
• บัตรคะแนนกอล์ฟแบบโต้ตอบ - ตัวติดตามคะแนน & หลักสูตร
• Paragliding Flight Logger - (พอลมีงานอดิเรกที่เจ๋งกว่าฉันมาก)

ตอนนี้คุณสามารถติดตามทุกอย่างและทุกอย่าง รหัสนี้มีเชลล์สำหรับเว็บฟอร์มทุกประเภทที่คุณต้องการสร้าง ลองเล่นและสร้างสรรค์และแสดงให้ฉันเห็นสิ่งที่คุณได้รับ! และแน่นอนว่าต้องเชียร์ Paul ที่ช่วยสร้างสรรค์สิ่งนี้!