آموزش رزبری پای اینترنت اشیا IOT اینترنت اشیاء عملی

آموزش نرم افزار اینترنت اشیاء Node RED -بخش هفتم- ساخت لینک HTTP در محیط گرافیکی UI

Node-red-IOT-HTTP-part-7--digispark
نوشته شده توسط پریسا پوربلورچیان

نرم افزار نودرد Node Red یک پلتفرم اپن سورس برای راه اندازی پروژه‌های اینترنت اشیاء است. این نرم افزار توسط IBM طرح ریزی و تولید شده است. نگرش طراحی این نرم افزار، ایجاد یک پلتفرم برای کاربران بدون نیاز به دانش فنی بوده است. از این رو کاربران بدون نیاز به دانستن دانش کدنویسی می‌توانند پروژه‌های ساده تا حرفه‌ای را طراحی و پیاده سازی کنند. در این پلت فرم همه چیز به صورت پازل به هم مرتبط می‌شوند. وب سایت دیجی اسپارک به عنوان مرجع تخصصی اینترنت اشیاء IOT به زبان فارسی اولین مرجع نرم افزار اینترنت اشیاء Node Red به زبان فارسی است. در مجموعه آموزش‌های نود رد Node Red به صورت بخش بندی شده کار با این نرم افزار را به صورت پروژه محور آموزش می‌دهیم. در ادامه بخش اول آموزش کار با نرم افزار اینترنت اشیاء Node Red با مرجع تخصصی اینترنت اشیاء دیجی اسپارک همراه باشید.

 

هدف ساخت لینک HTTP:

محیط گرافیکی UI، در تمامی پروژه های نود رد Node-RED از اهمیت ویژه ای برخوردار است. در واقع Result پروژه شما در محیط گرافیکی UI نمایش داده خواهد شد و به راحتی می‌توانید کنترل پروژه را در دست بگیرید. به عنوان مثال وضعیت پروژه را در هر لحظه از طریق نودهای Guage و یا Chart می‌توانید بررسی کنید. از کلید Button و سوییچ برای تغییر حالت و وضعیت پروژه در قالب یک رابط کاربری ساده و جذاب می‌توانید استفاده کنید. حال در بسیاری از پروژه ها نیاز به ساخت لینک خواهیم داشت تا با کلیک بر روی آن وب سایت مورد نظر ما باز گردد. به عنوان مثال در پروژه کنترل دما و یا ترافیک پس از بررسی وضعیت هر یک از پارامترهای تعریف شده در پروژه، نیار به سایت مبدا برای پیگیری آخرین وضعیت دما مانند Accuweather  و یا کنترل ترافیک  Google map خواهیم داشت. در این آموزش ساخت لینک از طریق کد HTML را آموزش خواهم داد. در ادامه به بررسی آن خواهیم پرداخت.

آموزش نرم افزار اینترنت اشیاء Node RED -بخش هفتم- ساخت لینک HTTP در محیط گرافیکی UI دیجی اسپارک

تنظیمات HTML در ساخت لینک HTTP:

HTML مخفف Hyper Test Markup language می‌باشد. در HTML بر خلاف دیگر زبان ها که از اسکریپت برای اجرای عملکردها استفاده می‌کنند، HTML با استفاده از تگ و برچسب ها برای شناسایی محتوا استفاده می‌کند. در واقع شما با یادگیری HTML می‌توانید وب سایت خود را راه اندازی کنید. دنیای HTML بسیار پیچیده و مفصل است و از آموزش کامل آن معذوریم.در این آموزش تنها به تحلیل بخشی از کدهای HTML خواهیم پرداخت و Result آن را بررسی خواهیم کرد. در ادامه برای تحلیل کدها، به چند نکته اساسی در ساختار کد HTML می‌پردازیم:

  • <!DOCTYPE html> : این دستور در واقع در شروع هر کد برای اعلان و تعریف نوع ducument است و تنها یک بار در بالای صفحه قبل از هر تگ ظاهر می‌شود.
  • <html> : این دستور برای معرفی اساس ساختار HTML می‌باشد.
  • <head> : تگ Head در واقع برای نمایش محتوای وب سایت استفاده خواهد شد و به صورت کلی شامل اطلاعات متا تگ ها در هر Document است.
  •  <body> : تگ Body همانند head شامل محتوای وب سایت است که در این قسمت تعریف می‌شود.
  • <h1> : از تگ h برای نمایش تیتر و سربرگ استفاده می‌کنیم که میتواند مقادیر بین h1 تا h 6 را در برگیرد.
  • <p> : تگ p برای معرفی پاراگراف استفاده می‌شود.

در این آموزش، در محیط UI یک تیتر با عنوان ورود به وبسایت – enter to website همراه با لینک- Link مورد نظر خود را شبیه سازی می‌کنیم. برای شروع وارد محیط Node-RED شوید:

 

راه‌اندازی نرم افزار اینترنت اشیاء Node RED

وارد محیط رزبین شده سپس از منو Programming ، نودرد Node-RED را انتخاب نمایید. آی پی آدرس IP Address برای اجرای نرم افزار در اختیار شما قرار داده می‌شود. حال در مرورگرIP Addrees:1880 را وارد کرده و سپس وارد محیط نود رد Node Red شوید. در نوار سمت چپ، از شاخه UI ، نود Template را انتخاب و وارد صفحه کنید.

 

نود Template:

نود template برای نمایش محتوا و ساخت تگ HTML کاربرد دارد. از نود Template برای ساخت یک رابط کاربری پویا با اعمال ویژگی های منحصر به فردی مانند رنگ، جدول، تیتر با فرمت های متفاوت و بسیاری از تغییرات دیگر، می‌توانید استفاده کنید. اطلاعات ذخیره شده در نود Template به عنوان ورودی در نظر گرفته شده و پس از Deploy به محیط نود رد Node-RED ارسال می‌شود. حال برای ساخت رابط کاربری همراه با تیتر و لینک از این نود استفاده می‌کنیم. در ادامه به بررسی تگ های HTML خواهیم پرداخت:

 

تنظیم نود Template:

تنظیم نود template بسیار ساده می باشد. نود را انتخاب کرده و روی آن کلیک کنید:

  • در قسمت TAB، میتوانید یک تب جدید برای نمایش در محیط UI بسازید و یا از تب پیشفرض Home استفاده کنید.
  • در قسمت Name، نامی دلخواه برای نود Template میتوانید در نظر بگیرید. ( اختیاری است)
  • در قسمت Group، گروهی با عنوان دلخواه برای نمایش در UI انتخاب کنید.
  • در نهایت کد و یا محتوای مربوطه را در قسمت text وارد کنید.

تولید محتوا در محیط UI

برای نمایش محتوا مورد نظر در محیط گرافیکی UI، از کد HTML زیر استفاده می‌کنیم. در این کد توسط تگ h1، تیتر مورد نظر را تعریف می‌کنیم. در اینجا تیتر انتخابی من Enter to website می‌باشد،که من از فرمت رنگی ( رنگ آبی – Slate Blue ) برای نمایش تیتر استفاده می‌کنم. حال برای نمایش محتوا مورد نظر از تگ Body و تگ P استفاده می‌کنیم. تگ body برای نمایش محتوای وب سایت و تگ p برای نمایش پاراگراف استفاده می‌شود. محتوای انتخابی برای نمایش  (با کلیک بر روی لینک زیر وارد وب سایت دیجی اسپارک شوید. ) به این صورت می باشد که من از فرمت رنگی ( رنگ قرمز – tomato) برای نمایش آن استفاده می‌کنم.

 

کد اول ( تولید محتوا در UI )

حال کد بالا را در نود Template کپی کرده و سپس Deploy کنید. در صورت نیاز می‌توانید از نود Debug به عنوان خروجی – output استفاده کنید.برای مشاهده Result پروژه وارد محیط UI شوید. برای ورود به محیط UI، همانند زیر عمل کنید:

با وارد شدن به محیط UI ، محتوای ساخته شده، در صفحه نمایش داده می‌شود.

 

ساخت لینک – Link :

برای ساخت لینک – Link در محیط UI، از کد HTML زیر استفاده می‌کنیم. در این کد از تگ Body برای نمایش محتوا لینک – Link در صفحه استفاده خواهیم کرد. برای قرار دادن لینک در محتوای خود از تگ <a> استفاده می‌کنیم. آدرس URL مورد نظر را همانند فرمت زیر در تگ <a> قرار می‌دهیم:

حال با توجه به توضیحات گفته شده، توسط کد زیر آدرس سایت را به همراه متن لینک در تگ <a> قرار می‌دهیم:

کد دوم ( ساخت لینک )

کد بالا را در ادامه کد قبل همانند زیر، در نود Template قرار دهید. دقت کنید که کدها ترکیب نشوند.

 

اتصال نودها در نود رد Node red:

همانند تصویر زیر نودها را اتصال دهید.

حال کد های ما آماده است. مجددا Deploy کنید. وارد محیط UI شوید. همانطور که مشاهده می‌کنید محتوای ما به همراه لینک دیجی اسپارک ساخته شده است. بر روی آن کلیک کرده و وارد وب سایت دیجی اسپارک شوید.

 

ساخت لینک به صورت پیشفرش در  محیط ui:

برای ساخت لینک  – Link در نوار سمت چپ محیط UI از نود Link استفاده کنید. برای اینکار از شاخه UI نود Link را انتخاب کرده و وارد صفحه کنید:

 

تنظیمات نود Link:

تنظیم نود Link بسیار ساده می باشد. نود را انتخاب کرده و روی آن کلیک کنید:

  • در قسمت Name، نامی دلخواه برای نود در نظر بگیرید.
  • در قسمت Link، آدرس وب سایت مورد نظر خود را به صورت کامل وارد نمایید.
  • دو قسمت نهایی Icon و  Order به صورت پیشفرض تنظیم شده اند.

حال Done را بزنید. سپس Deploy کنید. مجددا وارد محیط UI شوید. با کلیک بر نوار منو سمت چپ UI، لینک دیجی اسپارک با آیکون شبیه به لینک ساخته شده است. با کلیک بر روی آن وارد وب سایت دیحی اسپارک خواهید شد.

 

چنانچه در مراحل راه اندازی و انجام این پروژه با مشکل مواجه شدید، بدون هیچ نگرانی در انتهای همین پست، به صورت ثبت نظر سوالتان را مطرح کنید. من در سریع‌ترین زمان ممکن پاسخ رفع مشکل شما را خواهم داد.

 

در پایان نظرات و پیشنهادات خود را با ما درمیان بگذارید و با اشتراک گذاری این آموزش در شبکه های اجتماعی , از وبسایت دیجی اسپارک حمایت کنید.

 

درباره نویسنده

پریسا پوربلورچیان

تولید کننده محتوا / کارشناس IOT

زندگی یعنی پژوهش و فهمیدن چیزی جدید

تلاشم بر این است تجربیاتم در زمینه IOT‌ را به بهترین شکل با شما در میان بگذارم.

تبادل نظر و رفع عیب با ثبت دیدگاه

۳ دیدگاه