ایک اپلی کیشن بنائیں جو سینسر کے اعداد و شمار کو جمع کرتی ہے

Sep 14, 2025

کيسے

آج، منسلک مصنوعات کی ترقی کے لئے سستی پلیٹ فارم وسیع پیمانے پر دستیابی سے لطف اندوز کر رہے ہیں، اور ہم نے IOT ٹیکنالوجیوں میں جاوا اسکرپٹ کی حمایت میں اضافہ کے لئے ایک دھکا دیکھا ہے، جیسے طاقتور کمپنیوں جیسے آئی بی ایم، گوگل، انٹیل، مائیکروسافٹ اور سسکو ان کی مصنوعات کے لئے اپلی کیشن کھولنے کے لئے. نتیجہ مائیکرو کنٹرولرز کے وسیع پیمانے پر ماحولیاتی نظام ہے، کلاؤڈ سروسز سے منسلک ڈیٹا لاگ ان، اور قابل اطلاق انٹرفیس جو حقیقی وقت میں ڈیٹا کو پار کرتی ہے، جن میں سے سبھی کلائنٹ سائڈ کی ویب کی مہارت کے ساتھ ڈیزائنرز کے لئے نئے مواقع موجود ہیں.

پرو ڈیزائنرز کے لئے 13 بہترین رکن اطلاقات

اس کے ساتھ ذہن میں، اس سبق کا مقصد اس چیز کو ڈیزائن اور تعمیر کرنا ہے جو صرف 'صاف' نہیں ہے، لیکن حقیقی دنیا میں مفید ہے: ایک منسلک مصنوعات (یا سروس) جو ایک سینسر سے ایک مقامی ویب سرور میں موسم کے اعداد و شمار کو اپ لوڈ کرتا ہے ، اور اصل وقت میں انکولی صارف انٹرفیس میں اس ڈیٹا کو ظاہر کرتا ہے. اس منصوبے کی وضاحت کرتا ہے کہ ہم UI ڈیزائن میں براہ راست ہراساں کرنے سے کیسے توڑ سکتے ہیں، اور کچھ طریقوں سے ظاہر ہوتا ہے کہ ڈیزائنرز ویب سرورز اور فلیٹ ڈیزائن سے باہر اپنے پروٹوٹائپ کی تکنیک لے سکتے ہیں.

ایک نظر ڈالیں ذریعہ فائلیں اس سبق کے لئے .

سینسر اور مائکرو کنیکٹر

اس سبق کے لئے ہم Arduino Microcontoller کا استعمال کریں گے. یہ ایک سستا قیمت، آسان ترقیاتی کٹ اور بہت سے آن لائن سپورٹ کے لئے ایک مقبول انتخاب ہے. اپنے کمپیوٹر پر اپنے مائکرو کنکولر کو قائم کرنے کے لئے، ترقیاتی ماحول (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 خاکہ شروع ہوتا ہے، اور یہ سیریل ونڈو کو ریکارڈ کرے گا. سیریل پورٹ Arduino بورڈ اور آپ کے لیپ ٹاپ کے درمیان مواصلات کے لئے استعمال کیا جاتا ہے.

اگلا، ہمیں بوڈ کی شرح قائم کرنے کی ضرورت ہے - جس کی شرح کو منتقل کیا جاتا ہے. ہم 9600 کی شرح چاہتے ہیں، جس کا مطلب یہ ہے کہ سیریل پورٹ سگنل سے زیادہ سے زیادہ 9600 بٹس فی سیکنڈ میں زیادہ سے زیادہ 9600 بٹس کو منتقل کرنے کے قابل ہے، جو LM35 درجہ حرارت سینسر میں پیدا ہوتا ہے، یوایسبی کیبل کے ذریعہ آپ کے لیپ ٹاپ میں سفر کرتے ہیں. قبضہ شدہ خام سینسر کے اعداد و شمار کو سب سے پہلے درجہ حرارت کی شکل میں تبدیل کریں، پھر انٹریجر سے JSON میں داخل ہونے اور میموری میں منعقد ہونے کے لئے متن میں.

آخر میں، اوپر کی تقریب لوپ تو سینسر مسلسل درجہ حرارت کے اعداد و شمار کو جمع کرتا ہے. Arduino Microcontoller آپ کے لیپ ٹاپ کے سیریل پورٹ میں درجہ حرارت کے اعداد و شمار کو جمع، پس منظر میں بغير چلائے گا.

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 ایک ساتھ رکھنا چاہتے ہیں. میں نے رد عمل اٹھایا ہے کیونکہ اس کی وضاحت کرنا آسان ہے کہ براؤزر کو براؤزر فراہم کرنا چاہئے، براؤزر میں ڈوم کی تعمیر کرتے وقت بہت شور کو ہٹا دیتا ہے، اور کسی بھی API سے کسی بھی API سے ڈیٹا باندھا جاتا ہے. اس کے علاوہ، پورے ڈوم کو دوبارہ انجام دینے کے بجائے، یہ صرف UI عناصر کو اپ ڈیٹ کرتا ہے جو تبدیل کر دیا ہے، جو پروٹوٹائپ کے لئے بہت اچھا ہے.

اپنے UI کے ساتھ شروع کرنے کے لئے، سب سے پہلے آن لائن دستیاب بہت سے سٹارٹر پیک میں سے ایک کا استعمال کرتے ہوئے سپا انسٹال کریں. ایک بہت آسان ایک ویب اپلی کیشن بوائلرپلپل ہے ریکیٹ کٹ . ایک بار جب آپ نے فائل کی ساخت کے ساتھ اپنے آپ کو واقف کیا ہے، تو آپ کو ایک نیا جزو قائم کرنے کی ضرورت ہوگی جو مقامی ویب سرور یا کلاؤڈ سروس میں JSON فیڈ تک رسائی حاصل کریں اور ڈسپلے کے لئے ڈیٹا پر عمل کریں.

ردعمل میں، سیٹسٹیٹ UI اپ ڈیٹس کو ٹرگر کرنے کے لئے استعمال کیا جاتا اہم طریقہ ہے. تبدیلیوں کو ایونٹ ہینڈلرز یا سرور کی درخواست کال بیک بیک کی طرف سے تبدیل کر دیا جاتا ہے، اور پھر JSON فائل کو پڑھنے کے لئے صحیح طریقے سے لاگو کرنے کی ضرورت ہے. آخر میں، ہم متعدد پڑھنے کے اعداد و شمار کو برقرار رکھنے کے لئے متعدد پڑھنے کی وضاحت کرتے ہیں، اور & lt؛ ریڈنگ لسٹ / & gt؛ UI اجزاء کی نمائندگی کرنے کے لئے رینڈر کرنے کے طریقہ کار میں ٹیگ بصیرت کی خدمت کرتا ہے:

 loadpathsdata () {
  یہ .sostate ({ڈیٹا: ڈیٹا})؛
}

Loadinitialstate () {
  {ڈیٹا: {ریڈنگ: []}}}}؛
}

اجزاء Willmount () {
  یہ.loadpathSdata ()؛
}

رینڈر () {
  واپسی (
    & lt؛ div & gt؛
      & lt؛ ریڈنگ لسٹ ڈیٹا = {its.state.data} / & gt؛
    & lt؛ / div & gt؛
  )؛
}

پہلے پیدا شدہ JSON فائل سے ریڈنگ کو پکڑنے کے لئے ریڈنگنگسٹ UI اجزاء کی وضاحت کریں. کلاس کی تعریف کے اوپر براہ راست ایک نئی کلاس (ریڈنگنگ کی فہرست) شامل کریں. ایک مقامی ڈوم اجزاء کی مجازی نمائندگی کو نافذ کرنے کے لئے رد عمل کا طریقہ استعمال کرتا ہے (جیسے جیسے & lt؛ div / & gt؛ ذیل میں) یا کسی دوسرے مقررہ اجزاء. اس کے نتیجے میں ہمارے پاس UI جزو ہے جو JSON ریڈنگ کو ظاہر کرتا ہے:

 var readinglist = reasct.createclass ({
  رینڈر: فنکشن () {
    واپسی (
      & lt؛ div & gt؛
      
      & lt؛ / div & gt؛
    )
  }
})؛

براؤزر میں پڑھنے کے لئے اعداد و شمار کے نقشے کے ساتھ متحرک سی ایس ایس اعلانات کو یکجا.

آپ مختصر وقفے پر جزو یا براؤزر کی سطح پر یا تو ریفریش کر سکتے ہیں. یہ زیادہ مضبوط ردعمل ForceUpdate فنکشن کا استعمال کرتے ہوئے کیا جا سکتا ہے (جو کہتا ہے کہ اس کو رد عمل کرنے کی ضرورت ہے () ForceUpdate کو کال کرنے کی ضرورت ہے)، یا بنیادی سیٹنٹورک تقریب کے ساتھ جیڈ ٹیمپلیٹ رینڈرنگ میں لاگو کیا جاتا ہے.

سپا سے رجوع کرتے وقت، تمام اجزاء نے حقیقی وقت میں درجہ حرارت کی ریڈنگ کو دوبارہ لوڈ کیا جب جے ایس اور سی ایس ایس کراس ڈیوائس کے نقطہ نظر میں متحرک طور پر مشترکہ طور پر مشترکہ ہیں. نتیجہ ذیل میں تصویر میں دکھایا گیا ہے.

The final interface shows the temperature readings from the sensor, and updates in real time — حتمی انٹرفیس سینسر سے درجہ حرارت کی پڑھنے سے ظاہر ہوتا ہے، اور حقیقی وقت میں اپ ڈیٹس

اس کے بعد کیا ہے؟

اس آرٹیکل میں بیان کردہ بنیادی IOT پروٹوٹائپ تصورات کو منسلک مصنوعات یا خدمات کو ڈیزائن کرنے کے لئے بنایا جا سکتا ہے جس میں متحرک اعداد و شمار کو تخلیقی اور قابل اطلاق UIS میں مفید اور قابل استعمال بناتا ہے، چاہے یہ ایک موبائل ڈیوائس، چھوٹے ڈسپلے یا یہاں تک کہ ایک انٹرایکٹو ٹی وی اسکرین میں کام کر رہے ہیں. بنیادی ویب ڈویلپمنٹ کی مہارت کو ویب سرورز اور فلیٹ اسکرین انٹرفیس سے باہر لے جایا جا سکتا ہے جو کھلے ویب ٹیکنالوجیز کے ذریعہ ہم پہلے ہی واقف ہیں.

ویب پیشہ ور افراد کو اعداد و شمار کے arrays کے ساتھ کام کرنے کے عملی طریقوں کو تلاش کرنے کے لئے شروع کر رہے ہیں جو سینسر میں پیدا ہوتے ہیں اور اس کے بعد ان کے ارد گرد ڈیزائن کردہ صارف انٹرفیس ہے. یہ تحقیقات منسلک مصنوعات میں اعداد و شمار اور ڈیزائن کے بارے میں سوچنے کے نئے طریقے پیش کرتے ہیں، جس میں سی ایس ایس صرف شیلیوں کے بارے میں نہیں بلکہ ایک گاڑی جس کے ذریعہ انسان اور اعداد و شمار کے درمیان معنی کنکشن پیدا کرنے کے لۓ ہے. نئے اور آئندہ سی ایس ایس کی بنیاد پر ٹیکنالوجیز کے ساتھ تجربہ کرنے کے لئے بہت کچھ بھی ہے جو ڈیجیٹل تجربات کو بڑھانے کے لئے ڈیجیٹل تجربات کو بڑھانے کے لئے ڈیجیٹل تجربات کو بڑھانے کے لئے سی ایس ایس کے اعلانات میں شامل ہیں.

اعداد و شمار ہمارے ارد گرد ہے، اور ہمارے پاس غیب کو دیکھنے کے لئے استعمال کرنے کا ایک منفرد موقع ہے، اور اس کے لئے جاوا اسکرپٹ کے ذریعے سی ایس ایس میں اس کے لئے ہکس لکھنا ہے ... ہم انسانوں اور کسی بھی ڈیجیٹل مصنوعات کے درمیان ہموار رابطہ نقطہ بنانے کے بارے میں بات کرتے ہیں. IOT پلیٹ فارم میں جاوا سکرپٹ کو اپنانے سے پتہ چلتا ہے کہ سی ایس ایس اب بھی کچھ عرصے تک جاوا اسکرپٹ پر مبنی گاہکوں یا ویب براؤزرز کے لئے انتخاب کا ایک بنیادی اسٹائل کا آلہ بن جائے گا.

یہ مضمون اصل میں شائع ہوا نیٹ میگزین مسئلہ 289؛ اسے خریدیں !

متعلقہ مضامین:

چیزوں کے انٹرنیٹ میں ڈیزائن کا کردار
آپ کو ڈیزائن سوچنے کے لئے کیوں کرنا چاہئے
5 لازمی بات چیت سیکھنے کے وسائل

ایک اپلی کیشن بنائیں جو سینسر کے اعداد و شمار کو جمع کرتی ہے

سینسر اور مائکرو کنیکٹر

ایک ویب پر مبنی API.

ایک انکولی انٹرفیس

اس کے بعد کیا ہے؟

کيسے - انتہائی مشہور مضامین

vue.js کے ساتھ ایک اپلی کیشن کیسے بنائیں

آپ کے ٹویٹر بائیو میں فونٹ کو کس طرح تبدیل کرنے کے لئے

پنسل ڈرائنگ میں ڈیجیٹل رنگ شامل کریں

صارف کے دوستانہ ویب فارم بنانے کے لئے 10 قواعد

اپنے حروف کو رنگ اور روشنی کے ساتھ پاپ بنائیں

سی ایس ایس کے سائز کے ساتھ حیرت انگیز اثرات کیسے بنائیں

گرافک ڈیزائنرز کے لئے 3D متن ٹیوٹوریل

مادہ ڈیزائنر میں ٹائلیں بنائیں

اقسام