एक ऐप बनाएं जो सेंसर डेटा एकत्र करता है

Sep 16, 2025

कैसे करना है

आज, इंटरकनेक्टेड उत्पादों के विकास के लिए किफायती प्लेटफॉर्म व्यापक उपलब्धता का आनंद ले रहे हैं, और हमने आईओटी प्रौद्योगिकियों में बढ़ी हुई जावास्क्रिप्ट समर्थन के लिए एक धक्का देखा है, जिसमें आईबीएम, Google, इंटेल, माइक्रोसॉफ्ट और सिस्को जैसी शक्तिशाली कंपनियां अपने उत्पादों के लिए एपीआई खोलती हैं। नतीजा माइक्रो-नियंत्रकों का एक विस्तारित पारिस्थितिक तंत्र है, क्लाउड सेवाओं से जुड़े डेटा लॉगर्स, और अनुकूलनीय इंटरफेस जो वास्तविक समय में डेटा पार्स करते हैं, जिनमें से सभी क्लाइंट-साइड वेब कौशल वाले डिजाइनरों के लिए नए अवसर प्रस्तुत करते हैं।

प्रो डिजाइनरों के लिए 13 सर्वश्रेष्ठ आईपैड ऐप्स

इस बात को ध्यान में रखते हुए, इस ट्यूटोरियल का उद्देश्य कुछ ऐसा नहीं है जो सिर्फ 'साफ' नहीं है, बल्कि वास्तविक दुनिया में उपयोगी है: एक इंटरकनेक्टेड उत्पाद (या सेवा) जो एक सेंसर से एक स्थानीय वेब सर्वर में मौसम डेटा अपलोड करता है , और इस डेटा को वास्तविक समय में अनुकूली उपयोगकर्ता इंटरफ़ेस में प्रदर्शित करता है। यह प्रोजेक्ट बताता है कि हम यूआई डिज़ाइन में प्रत्यक्ष हेरफेर से कैसे तोड़ सकते हैं, और कुछ तरीकों से डिजाइनर वेब सर्वर और फ्लैट डिज़ाइन से परे अपनी प्रोटोटाइप तकनीकों को ले सकते हैं।

पर एक नज़र डालें स्रोत फ़ाइलें इस ट्यूटोरियल के लिए ।

सेंसर और माइक्रोकंट्रोलर

इस ट्यूटोरियल के लिए हम Arduino Microcontroller का उपयोग करेंगे। यह एक सस्ती कीमत, आसान विकास किट और बहुत सारे ऑनलाइन समर्थन के लिए एक लोकप्रिय विकल्प है। अपने कंप्यूटर पर अपना माइक्रोकंट्रोलर सेट अप करने के लिए, विकास पर्यावरण डाउनलोड करें (आईडीई विकल्प) यहां । माइक्रोकंट्रोलर आपके कंप्यूटर में एक यूएसबी केबल के साथ प्लग करता है जो इसे भी शक्ति देता है। Arduino कोड स्केच के रूप में जाना जाता है, जो सेंसर से आने वाले डेटा पार्स करने के लिए सी ++ आधारित कोड में लिखे गए हैं।

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — हमारे नमूना आवेदन में एक सेंसर (1), माइक्रोकंट्रोलर (2), वेब एपीआई (3), और एक अनुकूली यूआई (4) शामिल हैं

चूंकि हम एक ऐप डिज़ाइन कर रहे हैं जो मौसम डेटा पढ़ता है, मैंने एलएम 35 तापमान सेंसर का उपयोग किया है। यह एक अच्छा, किफायती विकल्प है, लेकिन माइक्रोकंट्रोलर के साथ ही पसंद करने के लिए बहुत सारे हैं। के रूप में जम्पर तारों और ब्रेडबोर्ड के साथ, एलएम 35 सेंसर सेट करें ये निर्देश ।

माइक्रोकंट्रोलर एक स्केच फ़ाइल के साथ काम करता है जो एलएम 35 तापमान सेंसर से सीधे आपके स्थानीय फ़ाइल सिस्टम में डेटा फ़ीड बनाता है। इसे सेट करने के लिए, सबसे पहले आपको सेंसर से एनालॉग डेटा रखने के लिए एक चर घोषित करने की आवश्यकता है (एक चर प्रोग्राम द्वारा बाद में उपयोग के लिए नामकरण और एक मूल्य संग्रहीत करने का एक तरीका है - इस मामले में एक सेंसर से डेटा)।

एक सेटअप () फ़ंक्शन घोषित करें जो आपके लैपटॉप में सीरियल पोर्ट के साथ संचार करता है। इसे तब कहा जाता है जब एक Arduino स्केच शुरू होता है, और यह सीरियल विंडो को रिकॉर्ड करेगा। धारावाहिक बंदरगाह का उपयोग Arduino बोर्ड और आपके लैपटॉप के बीच संचार के लिए किया जाता है।

इसके बाद, हमें बॉड दर सेट करने की आवश्यकता है - जिस दर पर जानकारी स्थानांतरित की जाती है। हम 9600 की दर चाहते हैं, जिसका अर्थ है कि सीरियल पोर्ट सिग्नल से अधिकतम 9 600 बिट्स को सिग्नल से स्थानांतरित करने में सक्षम है, जो एलएम 35 तापमान सेंसर में उत्पन्न होता है, जो आपके लैपटॉप में यूएसबी केबल के माध्यम से यात्रा करता है। कैप्चर किए गए कच्चे सेंसर डेटा को पहले तापमान प्रारूप में कनवर्ट करें, फिर पूर्णांक से टेक्स्ट को जेएसओएन में डाला जा सके और स्मृति में आयोजित किया जाए।

अंत में, उपरोक्त फ़ंक्शन को लूप करें ताकि सेंसर लगातार तापमान डेटा एकत्र करता है। Arduino Microcontroller पृष्ठभूमि में निर्बाध चलाएगा, आपके लैपटॉप के सीरियल पोर्ट में तापमान डेटा एकत्रित करेगा।

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — एक ठेठ Arduino सेट अप, केबल्स, तार, पिन, सेंसर और एक यूएसबी लैपटॉप कनेक्शन शामिल हैं

एक वेब आधारित API

एक बार तापमान पढ़ने में स्मृति में दर्ज होने के बाद, इसे JSON प्रारूप में डालने से पहले एक टाइमस्टैम्प को इसमें जोड़ा जाना चाहिए। शुरू करने के लिए, हमें उस स्थान को स्थापित करने की आवश्यकता है जहां JSON फ़ाइल निवास करेगी, और उस फ़ाइल को रीडिंग को जोड़ने के लिए छोटे अंतराल पर खोलें।

उन्नत वेब सर्वर प्रौद्योगिकी का उपयोग करके इसे प्राप्त करना संभव है, लेकिन यह इस आलेख के दायरे से बाहर है और हमें विभिन्न स्पर्शरों में ले जाएगा। सादगी के लिए हम सेंसर डेटा को पार्स करने के लिए प्रसंस्करण का उपयोग करेंगे, लेकिन बहुत सारे और आने वाले, मजबूत जेएस-आधारित वेब सर्वर प्रोग्रामिंग प्रौद्योगिकियां हैं जिनका उपयोग सीरियल पोर्ट मेमोरी से सेंसर डेटा प्राप्त करने के लिए किया जा सकता है कोई भी वेब सर्वर या क्लाउड ( यहाँ देखें )।

प्रॉ्रिंग सीरियल पोर्ट में डेटा सुनकर और रीडिंग को पकड़ने के लिए एक स्ट्रिंग को वापस करके एक स्ट्रिंग को लौटाने के लिए एक स्केच फ़ाइल का उपयोग करता है। यह एक ड्रा () फ़ंक्शन का भी उपयोग करता है, जो लगातार अपने ब्लॉक के अंदर निहित कोड की रेखाओं को निष्पादित करता है - इस मामले में सीरियल पोर्ट से मूल्यों को लेकर, टाइमस्टैम्प जोड़ना और उन्हें एक टेक्स्ट फ़ाइल में प्रिंट करना एक json संरचना में समाप्त होता है ["18:05:53", 43.00]।

आखिरकार हम एक ऐसी प्रणाली के साथ समाप्त होते हैं जिसमें केवल एक तापमान सेंसर, माइक्रोकंट्रोलर और वेब सर्वर शामिल होता है। यह सेंसर नेटवर्क और क्लाउड से बना एक बड़े डेटा अधिग्रहण प्रणाली के लिए एक प्रोटोटाइप है, जो वास्तविक विश्व उत्पाद या सेवा का प्रतिनिधित्व करता है।

एक अनुकूली इंटरफ़ेस

इस बिंदु पर हम एक ही पेज एप्लिकेशन (एसपीए) स्टार्टर पैक और प्रतिक्रिया या कोणीय जैसे जेएस-आधारित टूल के साथ एक साधारण यूआई को एक साथ रखना चाहते हैं। मैंने प्रतिक्रिया दी है क्योंकि यह वर्णन करना आसान बनाता है कि ब्राउज़र को क्या प्रस्तुत करना चाहिए, ब्राउज़र में डोम बनाने के दौरान बहुत शोर हटा देता है, और किसी भी एपीआई से डेटा को बहुत तेज़ करता है। साथ ही, पूरे डोम को फिर से प्रस्तुत करने के बजाय, यह केवल यूआई तत्वों को अपडेट करता है जो बदल गए हैं, जो प्रोटोटाइप के लिए बहुत अच्छा है।

अपने यूआई के साथ शुरू करने के लिए, पहले ऑनलाइन उपलब्ध कई स्टार्टर पैक में से एक का उपयोग करके स्पा स्थापित करें। एक बहुत सुविधाजनक एक वेब ऐप बॉयलरप्लेट है प्रतिक्रिया किट । एक बार जब आप फ़ाइल संरचना के साथ खुद को परिचित कर लेंगे, तो आपको एक नया घटक स्थापित करना होगा जो स्थानीय वेब सर्वर या क्लाउड सेवा में JSON फ़ीड को एक्सेस करता है और डिस्प्ले के लिए डेटा को संसाधित करता है।

प्रतिक्रिया में, सेटस्टेट यूआई अपडेट को ट्रिगर करने के लिए उपयोग की जाने वाली मुख्य विधि है। परिवर्तन ईवेंट हैंडलर या सर्वर अनुरोध कॉलबैक द्वारा ट्रिगर किए जाते हैं, और फिर JSON फ़ाइल को पढ़ने के लिए सही ढंग से कार्यान्वित करने की आवश्यकता होती है। अंत में, हम पार्स किए गए डेटा को पकड़ने के लिए परिवर्तनीय रीडिंग को परिभाषित करते हैं, और & lt; रीडिंगलिस्ट / & gt; यूआई घटक का प्रतिनिधित्व करने के लिए रेंडर विधि में टैग जो विज़ुअलाइज़ेशन परोसता है:

 loadpathsdata () {
  इस .SetState ({डेटा: डेटा});
}

LOADINITIALSTATE () {
  वापसी {डेटा: {रीडिंग्स: []}};
}

componentwillmount () {
  इस प्रकार। LoadPathsData ();
}

प्रस्तुत करना() {
  वापसी (
    & lt; div & gt;
      & lt; रीडिंगलिस्ट डेटा = {this.state.data} / & gt;
    & lt; / div & gt;
  );
}

पहले से बनाई गई JSON फ़ाइल से रीडिंग रखने के लिए रीडिंगलिस्ट यूआई घटक को परिभाषित करें। कक्षा परिभाषा के ऊपर सीधे एक नई कक्षा (रीडिंग सूची) जोड़ें। प्रतिक्रिया देशी डोम घटक (जैसे & lt; div / & gt; नीचे) या किसी अन्य परिभाषित घटक के आभासी प्रतिनिधित्व को लागू करने के लिए रेंडर विधि का उपयोग करती है। नतीजतन हमारे पास एक यूआई घटक है जो JSON रीडिंग प्रदर्शित करता है:

 var readingslist = ract.createclass ({
  प्रस्तुत: समारोह () {
    वापसी (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

ब्राउज़र में रीडिंग को स्टाइल करने के लिए डेटा मैपिंग के साथ गतिशील सीएसएस घोषणाओं को संयोजित करें।

आप छोटे अंतराल पर या तो घटक या ब्राउज़र स्तर पर रिफ्रेश कर सकते हैं। यह अधिक मजबूत प्रतिक्रिया फोर्स अपडेट फ़ंक्शन का उपयोग करके किया जा सकता है (जो प्रतिक्रिया को बताता है कि इसे बलपूर्वक कॉल करके रेंडर () को फिर से चलाने की आवश्यकता है), या मूल setintererval फ़ंक्शन के साथ जेड टेम्पलेट प्रतिपादन में लागू किया गया है।

स्पा को फिर से लॉन्च करते समय, सभी घटक वास्तविक समय में तापमान रीडिंग को फिर से लोड करते हैं क्योंकि जेएस और सीएसएस को क्रॉस-डिवाइस विज़ुअलाइजेशन में गतिशील रूप से जोड़ा जाता है। परिणाम नीचे दी गई छवि में दिखाया गया है।

The final interface shows the temperature readings from the sensor, and updates in real time — अंतिम इंटरफ़ेस सेंसर से तापमान रीडिंग दिखाता है, और वास्तविक समय में अपडेट करता है

आगे क्या होगा?

इस आलेख में दिखाए गए मूल आईओटी प्रोटोटाइप अवधारणाओं को इस अनुच्छेद उत्पादों या सेवाओं को डिजाइन करने के लिए बनाया जा सकता है जो अनुकूली यूआईएस में उपयोगी और उपयोग योग्य गतिशील डेटा बनाते हैं, चाहे इन्हें मोबाइल डिवाइस, छोटे डिस्प्ले या यहां तक कि एक इंटरैक्टिव टीवी स्क्रीन में भी परोसा जाता हो। बेसिक वेब विकास कौशल को खुली वेब प्रौद्योगिकियों के माध्यम से वेब सर्वर और फ्लैट स्क्रीन इंटरफेस से परे लिया जा सकता है हम पहले से ही परिचित हैं।

वेब पेशेवर सेंसर में उत्पन्न डेटा सरणी के साथ काम करने के व्यावहारिक तरीकों का पता लगाना शुरू कर रहे हैं और फिर उनके चारों ओर डिज़ाइन किए गए उपयोगकर्ता इंटरफ़ेस हैं। ये अन्वेषण इंटरकनेक्टेड उत्पादों में डेटा और डिज़ाइन के बारे में सोचने के नए तरीके प्रदान करते हैं, जिसमें सीएसएस सिर्फ शैलियों के बारे में नहीं बल्कि एक वाहन है जिसके माध्यम से मनुष्यों और डेटा के बीच सार्थक संबंध बनाने के लिए। नई और आगामी सीएसएस-आधारित प्रौद्योगिकियों में प्रयोग करने के लिए भी बहुत कुछ है जो जोड़े को डिजिटल अनुभवों को बढ़ाने के लिए डेटा तत्वों के साथ घोषित करता है, जिसमें ब्राउज़र प्रतिपादन तकनीक शामिल हैं।

डेटा हमारे चारों ओर है, और हमारे पास अदृश्य देखने के लिए इसका उपयोग करने का एक अनूठा अवसर है, और जावास्क्रिप्ट के माध्यम से सीएसएस में इसके लिए हुक लिखने का एक अनूठा अवसर है ... हम घर्षण को कम करने और मनुष्यों और किसी भी डिजिटल उत्पाद के बीच एक निर्बाध संपर्क बिंदु बनाने के बारे में बात कर रहे हैं। आईओटी प्लेटफार्मों में जावास्क्रिप्ट को अपनाने से पता चलता है कि सीएसएस अभी भी जावास्क्रिप्ट-आधारित ग्राहकों या कुछ समय के लिए सभी आकारों के वेब ब्राउज़र के लिए पसंद का प्राथमिक स्टाइलिंग उपकरण होगा।

यह लेख मूल रूप से दिखाई दिया नेट पत्रिका अंक 289; यहां खरीदें !

संबंधित आलेख:

चीजों के इंटरनेट में डिजाइन की भूमिका
आपको डिजाइन को समझना क्यों चाहिए
5 आवश्यक चैटबॉट सीखने के संसाधन

[1 9 8]

एक ऐप बनाएं जो सेंसर डेटा एकत्र करता है

सेंसर और माइक्रोकंट्रोलर

एक वेब आधारित API

एक अनुकूली इंटरफ़ेस

आगे क्या होगा?

कैसे करना है - सर्वाधिक लोकप्रिय लेख

फोटोग्राफी को चित्रण में कैसे चालू करें

एक सिर कैसे आकर्षित करें: एक पूर्ण गाइड

Use Adobe XD to create micro interactions

How to paint colourful animation art in Photoshop

एफ़िनिटी डिजाइनर: पेन टूल का उपयोग कैसे करें

How to get started with Sass

Convert a photo into a VR set

How to create 3D hair and fur

श्रेणियाँ