สร้างแอปที่รวบรวมข้อมูลเซ็นเซอร์

Feb 6, 2026

วิธีการ

วันนี้แพลตฟอร์มราคาไม่แพงสำหรับการพัฒนาผลิตภัณฑ์ที่เชื่อมต่อระหว่างกันกำลังเพลิดเพลินกับความพร้อมใช้งานอย่างกว้างขวางและเราได้เห็นการผลักดันสำหรับการสนับสนุน JavaScript ที่เพิ่มขึ้นใน IOT Technologies โดยมี บริษัท ที่มีประสิทธิภาพเช่น IBM, Google, Intel, Microsoft และ Cisco เปิด APIs สำหรับผลิตภัณฑ์ของพวกเขา ผลที่ได้คือระบบนิเวศที่ขยายตัวของตัวควบคุมขนาดเล็กตัวบันทึกข้อมูลที่เชื่อมต่อกับบริการคลาวด์และอินเทอร์เฟซที่ปรับตัวได้ที่แยกวิเคราะห์ข้อมูลแบบเรียลไทม์ซึ่งทั้งหมดนี้นำเสนอโอกาสใหม่ ๆ สำหรับนักออกแบบที่มีทักษะการใช้งานเว็บฝั่งไคลเอ็นต์

แอพ iPad ที่ดีที่สุด 13 รายการสำหรับนักออกแบบมืออาชีพ

ในใจเป้าหมายของการกวดวิชานี้คือการออกแบบและสร้างสิ่งที่ไม่เพียง แต่ 'เรียบร้อย' แต่มีประโยชน์ในโลกแห่งความจริง: ผลิตภัณฑ์ที่เชื่อมต่อกัน (หรือบริการ) ที่อัปโหลดข้อมูลสภาพอากาศจากเซ็นเซอร์ลงในเว็บเซิร์ฟเวอร์ท้องถิ่น และแสดงข้อมูลนี้ในส่วนต่อประสานผู้ใช้แบบปรับได้แบบเรียลไทม์ โครงการนี้แสดงให้เห็นถึงวิธีที่เราสามารถแยกออกจากการจัดการโดยตรงในการออกแบบ UI และแสดงให้เห็นถึงบางวิธีนักออกแบบสามารถใช้เทคนิคการสร้างต้นแบบนอกเหนือจากเว็บเซิร์ฟเวอร์และการออกแบบแบบแบน

ดู ไฟล์ต้นฉบับ สำหรับการกวดวิชานี้ .

เซ็นเซอร์และไมโครคอนโทรลเลอร์

สำหรับบทช่วยสอนนี้เราจะใช้ไมโครคอนโทรลเลอร์ Arduino นี่เป็นตัวเลือกยอดนิยมด้วยราคาถูกชุดพัฒนาง่ายและการสนับสนุนออนไลน์จำนวนมาก ในการตั้งค่าไมโครคอนโทรลเลอร์ของคุณบนคอมพิวเตอร์ของคุณดาวน์โหลดสภาพแวดล้อมการพัฒนา (ตัวเลือก IDE) ที่นี่ . ไมโครคอนโทรลเลอร์ปลั๊กเข้ากับคอมพิวเตอร์ของคุณด้วยสายเคเบิล USB ที่ยังมีอำนาจ รหัส ARDUINO เป็นที่รู้จักกันในชื่อสเก็ตช์ซึ่งเขียนในรหัส C ++ - ตามการแยกวิเคราะห์ข้อมูลเข้ามาจากเซ็นเซอร์

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — แอปพลิเคชันตัวอย่างของเราประกอบด้วยเซ็นเซอร์ (1), ไมโครคอนโทรลเลอร์ (2), เว็บ API (3) และ UI แบบปรับตัว (4)

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

ไมโครคอนโทรลเลอร์ทำงานร่วมกับไฟล์ร่างที่สร้างฟีดข้อมูลจากเซ็นเซอร์อุณหภูมิ LM35 ลงในระบบไฟล์โลคัลของคุณโดยตรง ในการตั้งค่านี้ก่อนอื่นคุณต้องประกาศตัวแปรเพื่อเก็บข้อมูลอะนาล็อกจากเซ็นเซอร์ (ตัวแปรเป็นวิธีการตั้งชื่อและการจัดเก็บค่าสำหรับการใช้งานในภายหลังโดยโปรแกรม - ในกรณีนี้ข้อมูลจากเซ็นเซอร์)

ประกาศฟังก์ชั่นการตั้งค่า () ที่สื่อสารกับพอร์ตอนุกรมในแล็ปท็อปของคุณ สิ่งนี้เรียกว่าเมื่อร่าง Arduino Sketch เริ่มต้นขึ้นและจะบันทึกไปยังหน้าต่างอนุกรม พอร์ตอนุกรมใช้สำหรับการสื่อสารระหว่างบอร์ด Arduino และแล็ปท็อปของคุณ

ต่อไปเราต้องตั้งค่าอัตรารับส่งข้อมูล - อัตราที่ข้อมูลถูกถ่ายโอน เราต้องการอัตรา 9600 ซึ่งหมายความว่าพอร์ตอนุกรมสามารถถ่ายโอนได้สูงสุด 9600 บิตต่อวินาทีจากสัญญาณต้นกำเนิดในเซ็นเซอร์อุณหภูมิ LM35 การเดินทางผ่านสาย USB ลงในแล็ปท็อปของคุณ แปลงข้อมูลเซ็นเซอร์ดิบที่บันทึกไว้ก่อนเป็นรูปแบบอุณหภูมิจากนั้นจากจำนวนเต็มไปยังข้อความที่จะแทรกลงใน JSON และเก็บไว้ในหน่วยความจำ

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

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — การตั้งค่า Arduino ทั่วไปซึ่งประกอบด้วยสายเคเบิล, สาย, หมุด, เซ็นเซอร์และการเชื่อมต่อแล็ปท็อป USB

API บนเว็บ

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

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

การประมวลผลใช้ไฟล์ร่างเพื่อรับข้อมูลที่ส่งโดย Arduino โดยฟังข้อมูลในพอร์ตอนุกรมและส่งคืนสตริงเพื่อเก็บการอ่าน นอกจากนี้ยังใช้ฟังก์ชั่นการวาด () ซึ่งเรียกใช้งานบรรทัดของโค้ดอย่างต่อเนื่องภายในบล็อก - ในกรณีนี้การใช้ค่าจากพอร์ตอนุกรมเพิ่มการประทับเวลาและการพิมพ์ในไฟล์ข้อความที่ลงท้ายด้วยโครงสร้าง JSON ที่คล้ายกัน ถึง [18:05:53 ", 43.00]

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

อินเตอร์เฟสแบบปรับตัว

ณ จุดนี้เราต้องการรวบรวม UI ที่เรียบง่ายด้วยแอปพลิเคชันหน้าเดียว (สปา) ชุดสตาร์ทเตอร์และเครื่องมือที่ใช้ JS เช่นตอบสนองหรือเชิงมุม ฉันได้รับการตอบสนองเพราะมันทำให้ง่ายต่อการอธิบายสิ่งที่เบราว์เซอร์ควรแสดงผลลบเสียงรบกวนจำนวนมากเมื่อสร้าง DOM ในเบราว์เซอร์และเชื่อมข้อมูลจาก API ใด ๆ ที่รวดเร็วมาก นอกจากนี้แทนที่จะแสดงซ้ำทั้ง DOM ใหม่มันจะอัปเดตองค์ประกอบ UI ที่มีการเปลี่ยนแปลงเท่านั้นซึ่งยอดเยี่ยมสำหรับการสร้างต้นแบบ

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

ในการตอบสนอง SetState เป็นวิธีหลักที่ใช้ในการกระตุ้นการอัปเดต UI การเปลี่ยนแปลงจะถูกเรียกโดยตัวจัดการกิจกรรมหรือการร้องขอการเรียกกลับของเซิร์ฟเวอร์แล้วจำเป็นต้องใช้งานอย่างถูกต้องเพื่ออ่านไฟล์ JSON ในที่สุดเรากำหนดการอ่านตัวแปรเพื่อเก็บข้อมูลที่แยกวิเคราะห์และ & lt; ReadingsList / & GT; แท็กในวิธีการแสดงผลเพื่อแสดงองค์ประกอบ UI ที่ให้บริการการสร้างภาพ:

 loadpathsdata () {
  สิ่งนี้เซ็ตสเตต ({ข้อมูล: ข้อมูล});
}

loadinitialstate () {
  ส่งคืน {ข้อมูล: {การอ่าน: []}};
}

componentwillmount () {
  สิ่งนี้ lucatpatsdata ();
}

แสดงผล () {
  กลับมา (
    & lt; div & gt;
      & lt; ข้อมูล radingingslist = {this.state.data} / & gt;
    & lt; / div & gt;
  );
}

กำหนดคอมโพเนนต์ ReadingsList UI เพื่อเก็บการอ่านจากไฟล์ JSON ที่สร้างขึ้นก่อนหน้านี้ เพิ่มคลาสใหม่ (รายการอ่าน) เหนือความหมายของคลาสโดยตรง ตอบสนองใช้วิธีการเรนเดอร์เพื่อใช้การแสดงเสมือนขององค์ประกอบ DOM ดั้งเดิม (เช่น & lt; div / & gt; ด้านล่าง) หรือองค์ประกอบอื่น ๆ ที่กำหนดไว้ เป็นผลให้เรามีองค์ประกอบ UI ที่แสดงการอ่าน JSON:

 var readingslist = react.createclass ({
  แสดงผล: ฟังก์ชั่น () {
    กลับมา (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

รวมการประกาศแบบไดนามิก CSS กับการแมปข้อมูลเพื่อจัดรูปแบบการอ่านในเบราว์เซอร์

คุณสามารถบังคับรีเฟรชที่ส่วนประกอบหรือระดับเบราว์เซอร์ในระยะสั้น สิ่งนี้สามารถทำได้โดยใช้ฟังก์ชั่น Forceupdate ที่มีประสิทธิภาพมากขึ้น (ซึ่งบอกตอบว่ามีการเรียกใช้การเรนเดอร์ () ด้านบนโดยการโทร ForceUpdate) หรือนำไปใช้ในการแสดงผลเทมเพลต JADE ด้วยฟังก์ชั่น Setinterval พื้นฐาน

เมื่อเปิดตัวสปาส่วนประกอบทั้งหมดจะโหลดการอ่านอุณหภูมิแบบเรียลไทม์เนื่องจาก JS และ CSS ถูกรวมเข้าด้วยกันแบบไดนามิกในการสร้างภาพข้ามอุปกรณ์ ผลลัพธ์จะแสดงในภาพด้านล่าง

The final interface shows the temperature readings from the sensor, and updates in real time — อินเทอร์เฟซสุดท้ายแสดงการอ่านอุณหภูมิจากเซ็นเซอร์และอัปเดตแบบเรียลไทม์

อะไรต่อไป?

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

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

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

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 289; ซื้อที่นี่ !

บทความที่เกี่ยวข้อง:

บทบาทของการออกแบบในอินเทอร์เน็ตของสิ่งต่าง ๆ
ทำไมคุณควรโอบกอดการออกแบบการออกแบบ
5 ทรัพยากรการเรียนรู้ Chatbot ที่จำเป็น

สร้างแอปที่รวบรวมข้อมูลเซ็นเซอร์

เซ็นเซอร์และไมโครคอนโทรลเลอร์

API บนเว็บ

อินเตอร์เฟสแบบปรับตัว

อะไรต่อไป?

วิธีการ - บทความยอดนิยม

วิธีดาวน์โหลดภาพถ่าย Instagram: ทุกสิ่งที่คุณต้องรู้

เริ่มต้นใช้งานสินทรัพย์ในผู้ออกแบบที่เกี่ยวข้อง

นักออกแบบ Affinity: วิธีใช้กริด

วิธีการสร้าง Glazes ด้วยสีน้ำ

เรียนรู้การปลูกใบไม้ด้วย X-Particles

วิธีการทำระเบิดขนาดใหญ่ด้วย v-ray

ไปจับด้วยเทคนิคการวาดภาพเปียกแบบเปียก

สร้างตัวละคร 3 มิติที่มีขนยาวจากรอยขีดข่วน

หมวดหมู่