{"id":1952,"date":"2024-02-29T21:37:07","date_gmt":"2024-02-29T16:37:07","guid":{"rendered":"https:\/\/yarat.uz\/?p=1952"},"modified":"2025-03-19T15:27:04","modified_gmt":"2025-03-19T10:27:04","slug":"mit-app-inventor","status":"publish","type":"post","link":"https:\/\/yarat.uz\/?p=1952","title":{"rendered":"Mobil ilova yordamida boshqaruv [18+]"},"content":{"rendered":"

Navbatdagi bo’limda MIT App Inventor onlayn blokli dasturlash vositasi va u bilan ishlashning asoslari haqida qisqacha ma’lumotlar keltiriladi.<\/p>\n

MIT App Inventor blokli dasturlash vositasi<\/strong><\/p>\n

Ushbu dasturlash vositasi faqat onlayn rejimda visual dasturlashga mo’ljallangan bo’lib, Android uchun dasturlarni dasturlash ushun alohida dasturlash tilini o’rganishni talab etmaydi va faqat bloklar yordamida dasturlashga yo’naltirilgan (Qulaylik uchun, darslar davomida MIT AI<\/strong> deb ham yuritamiz). Ushbu vosita bilan ishlash uchun foydalanuvchidan Google akkauntiga ega bo’lishi talab etiladi (smartfonda ishlatilayotgan akkauntdan foydalanish mumkin).<\/p>\n

MIT AI ni ochish uchun ixtiyoriy brauzerda quyidagi havolaga o’tiladi: havola<\/a>. Brauzer asosiy oynasida quyidagi sahifa ochiladi:<\/p>\n

\"\"<\/p>\n

Akkauntga tez o’tish uchun “Create Apps!” tugmasi bosiladi va keyingi sahifada Google akkaunti ma’lumotlari (login, parol) kiritiladi. Ber nechta yordamchi dialog oynalari o’tkazib yuborilganidan so’ng, oynada quyidagi asosiy sahifa paydo bo’ladi. MIT AI ga birinchi marta kirilganda, tabiiyki, ro’yxat bo’sh bo’ladi. Bundan tashqari, akkauntga birinchi marta kirilganda, dastur ma’lumotlari ingliz tilida ko’rsatiladi, foydalanuvchi o’ziga kerakli tilni sahifaning yuqori o’ng tomonidagi menyudan tanlab olishi tavsiya etiladi. Biz dasturning rus tilidagi variantidan foydalanamiz.<\/p>\n

\"\"<\/p>\n

Agar foydalanuvchi ilgari loyihalar yaratgan bo’lsa, ro’yxatda akkauntda saqlangan barcha loyihalarning ro’yxati ko’rinadi. Bu yerdan yangi loyihani yaratish, kerakli loyihaga o’tish va keraksizlarini o’chirib yuborish kabi asosiy vazifalarni bajarish mumkin. Keyinchalik ushbu ro’yxatga “\u041f\u0440\u043e\u0435\u043a\u0442\u044b” menyusi orqali o’tish mumkin (axborot havfsizligi nuqtai nazaridan, brauzer uzoq vaqt harakatsizlikdan so’ng, akkauntdan avtomatik chiqib ketishi va unga qaytadan kirishni so’rashi mumkin).<\/p>\n

Kerakli loyiha tanlansa, loyihaning quyidagi asosiy oynasi – “\u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440<\/strong>” oynasi ochiladi.<\/p>\n

Ushbu oynaning o’rta qismida loyihaning smartfondagi taxminiy ko’rinishi va unga joylashtirilgan visual dasturlash elementlari (matnlar, tugmalar, kalitlar, ro’yxatlar, rasmlar va hokazolar) ko’rsatiladi. Oynaning chap tomonida loyihada foydalanish mumkin bo’lgan barcha elementlar ro’yxati, o’ng tomonida esa, joriy loyihada foydalanilayotgan elementlar ro’yxati va ularning xususiyatlarini ko’rsatuvchi bo’limlar ko’rinadi.<\/p>\n

Yangi elementni loyihaga qo’shish uchun, uni chap tomondagi ro’yxatdan izlab topiladi va sichqoncha yordamida smartfon oynasining tegishli joyiga olib o’tiladi. Loyihadagi biron elementning xususiyatlarini ko’rish yoki o’zgartirish uchun, uning nomi smartfon oynasining o’ng tomonidagi elementlar ro’yxatidan tanlanadi.<\/p>\n

Foydalaniladigan elementlar ko’rinadigan va ko’rinmaydigan element turlariga bo’linadi. Masalan, yuqorida sanalgan barcha elementlar ko’rinadigan element turi hisoblanadi. Ko’rinmaydigan element turiga esa, turli xil aloqa vositalariga tegishli elementlar (Bluetooth, Internet, Ketma-ket port), xotira bilan ishlash vositalari (masalan, loyihada qo’llaniladigan fayllar ro’yxati, mobil ilova parametrlarini saqlovchi vositalar) va shunga o’xshash, visual ko’rish mumkin bo’lmagan vositalar kiradi.<\/p>\n

\"\"<\/p>\n

Chap tomondagi elementlar ro’yxatiga foydalanuvchi ham boshqa tashqi tayyor elementlarni Internetdan (masalan, puravidaapps.com<\/a> saytidan) yuklab olishi va uning “aix” formatdagi faylini ro’yxat oxiridagi “Extension” bo’limiga “Import extension”<\/em> havolasi orqali qo’shib olishi mumkin.
\nLoyihaning har bir elementi bajaradigan vazifalarni boshqaruvchi bloklar bilan ishlash uchun loyiha oynasining yuqori o’ng tomonidan “\u0411\u043b\u043e\u043a\u0438” bo’limiga o’tiladi. Ushbu oynada har bir ko’rinadigan yoki ko’rinmaydigan element faollashganda bajariladigan vazifalarga mos bloklarni oynaning asosiy qismiga sichqoncha yordamida olib o’tiladi va dasturiy algoritm asosida joylashtiriladi.<\/p>\n

Agar ko’p ekranli loyiha yaratilishi ko’zda tulgan bo’lsa, oyna yuqorisadagi “\u0414\u043e\u0431\u0430\u0432\u0430\u0442\u044c \u044d\u043a\u0440\u0430\u043d” tugmasi yordamida yangi ekran hosil qilish va uning xususiyatlarini o’zgartirish mumkin. Barcha ekranlar nomlarini ushbu tugmaning chap tomonidagi ro’yxatdan ko’rish va tanlash mumkin. Bundan tashqari, “\u0423\u0434\u0430\u043b\u0438\u0442\u044c \u044d\u043a\u0440\u0430\u043d” tugmasi yordamida keraksiz (Screen1 dan tashqari) ekranni o’chirish, “Project properties” tugmasi yordamida esa, loyihaning boshqa muhim xususiyatlarini (masalan, ilova nomi, uning ikonkasi fayli, versiyasi kabilarni) ko’rish yoki o’zgartirish mumkin.<\/p>\n

\"\"<\/p>\n

Dastlabki misol tariqasida, biz yangi “misol” loyihasini va uning asosida tegishli “Mening ilovam” mobil ilovasini yaratish, oxirida uni smartfonga olib o’tish, unga o’rnatish jarayonlarini ko’rib chiqamiz. Buning uchun tegishli akkauntga kirgandan so’ng, asosiy oynada (loyihalar ro’yxatida) “New project” tugmasini bosamiz.<\/p>\n

\"\"<\/p>\n

Loyiha nomini ko’rsatib, “OK” ni bosamiz. Yangi loyiha oynasi paydo bo’lgach, o’ng tomondagi komponentlar ro’yxatida Screen1 komponenti paydo bo’ladi. O’ng tomondagi “\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430” bo’limida uning ayrim xususiyatlarini o’zgartiramiz. Bunimg uchun kerakli maydonlar qiymatini o’zgartiramiz. Masalan, “\u0424\u043e\u043d\u043e\u0432\u044b\u0439\u0420\u0438\u0441\u0443\u043d\u043e\u043a” maydoniga kompyuterdan ixtiyoriy rasm faylini tanlaymiz, “\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a” maydoniga misol tariqasida ilova sarlavhasini (masalan, “Mening birinchi ilovam!” matnini) kiritamiz. Boshqa maydonlarni o’zgartirmaymiz. Tanlangan rasm fayli nomi komponentlar ro’yxati quyirog’idagi “\u041c\u0435\u0434\u0438\u0430” ro’yxatida ham ko’rinadi.<\/p>\n

Chap tomondagi komponentlar ro’yxatidan “\u041d\u0430\u0434\u043f\u0438\u0441\u044c”, “\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f”, “\u041a\u043d\u043e\u043f\u043a\u0430” va “\u0423\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u0435\u043b\u044c” komponentlarini ketma-ket ekrandagi smartfon oynasiga joylashtiramiz. O’ng tomondagi loyiha komponentlari ro’yxatida “\u041d\u0430\u0434\u043f\u0438\u0441\u044c1”, “\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u041e\u0436\u0438\u0434\u0430\u043d\u0438\u044f1”, “\u041a\u043d\u043e\u043f\u043a\u04301”, “\u0423\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u0435\u043b\u044c1” komponentlari paydo bo’ladi. “\u0423\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u0435\u043b\u044c1” komponenti smartfondan quyiroqdagi “\u041d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b” sohasida ham paydo po’ladi.<\/p>\n

Dastlab komponentlar ro’yxatidan sichqoncha yordamida “\u041d\u0430\u0434\u043f\u0438\u0441\u044c1” komponentini tanlaymiz va o’ng tomondagi “\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430” bo’limida “\u0428\u0438\u0440\u0438\u043d\u0430” maydonidan “\u041d\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439” variantini tanlaymiz, “\u0422\u0435\u043a\u0441\u0442” maydoniga “Kerakli yozuvni tanlang!” matnini kiratiz, “\u0426\u0432\u0435\u0442\u0422\u0435\u043a\u0441\u0442\u0430” maydonidan ixtiyoriy rangni tanlaymiz.<\/p>\n

Komponentlar ro’yxatidan “\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u041e\u0436\u0438\u0434\u0430\u043d\u0438\u044f1″ni tanlaymiz va uning quyidagi xususiyatlarini o’zgartiramiz: “\u0428\u0438\u0440\u0438\u043d\u0430” maydonidan “\u041d\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439” variantini tanlaymiz, “\u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430” maydoniga “Yozuvni tanlang” matnini, “\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\u0418\u0437\u0426\u0435\u043f\u043e\u0447\u043a\u0438” maydoniga “1-yozuv,2-yozuv,3-yozuv” matnini (vergul bilan ajratilgan matnlar ro’yxati), “\u0412\u044b\u0431\u043e\u0440” maydoniga “2-yozuv” (ro’yxatdagi elementlardan biri bo’lishi shart) matnini kiritamiz.<\/p>\n

“\u041a\u043d\u043e\u043f\u043a\u04301” xususiyatlarini o’zgartiramiz: “\u0416\u0438\u0440\u043d\u044b\u0439\u0428\u0440\u0438\u0444\u0442” kalitini ulaymiz, “\u0420\u0430\u0437\u043c\u0435\u0440\u0428\u0440\u0438\u0444\u0442\u0430” maydoniga “20” qiymatini kiritamiz, “\u0428\u0438\u0440\u0438\u043d\u0430” maydonida “100” pixels” variantini, “\u0424\u043e\u0440\u043c\u0430” bo’limidan “\u041e\u0432\u0430\u043b” variantini tanlaymiz, “\u0422\u0435\u043a\u0441\u0442” maydoniga “OK” matnini kiritamiz, “\u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430” bo’limidan ixtiyoriy rangni tanlaymiz.<\/p>\n

“\u0423\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u0435\u043b\u044c1” xususiyatlarini o’zgartirish shart emas.<\/p>\n

Natijada, asosiy oynada taxminan quyidagi holat yuzaga kelishi kerak:<\/p>\n

\"\"<\/p>\n

Endi “\u0411\u043b\u043e\u043a\u0438” oynasiga o’tib, “\u041a\u043d\u043e\u043f\u043a\u04301” tugmasi bosilganda bajariladigan jarayonni bloklar yordamida dasturlaymiz.<\/p>\n

Buning uchun dastlab, chap tomondagi komponentlar ro’yxatidan “\u041a\u043d\u043e\u043f\u043a\u04301” komponentini sichqoncha yordamida tanlaymiz (uning nomi ustiga bir marta bosamiz xolos). Komponentlar ro’yxatining o’ng tomonida “\u041a\u043d\u043e\u043f\u043a\u04301” komponenti bilan qo’llash mumkin bo’lgan bloklar ro’yxati ko’rinadi. Ro’yxatdan “\u043a\u043e\u0433\u0434\u0430 “\u041a\u043d\u043e\u043f\u043a\u04301.\u0429\u0435\u043b\u0447\u043e\u043a” yozuvlarini (sarlavhasini) o’z ichiga olgan sariq rangli (1-tartibdagi) blokni sichqoncha yordamida asosiy oynaga olib o’tamiz.<\/p>\n

Shundan keyin “\u0423\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u0435\u043b\u044c1” komponentini tanlaymiz va paydo bo’lgan ro’yxatdan “\u0412\u044b\u0437\u043e\u0432 “\u0423\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u0435\u043b\u044c1.\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0414\u0438\u0430\u043b\u043e\u0433\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f” sarlavhali blokni asosiy oynadagi blokning “\u0434\u0435\u043b\u0430\u0442\u044c” sohasiga joylashtiramiz. Ushbu blokning o’ng tomonidagi bo’sh “\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435”, “\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a”, “\u0442\u0435\u043a\u0441\u0442\u041a\u043d\u043e\u043f\u043a\u0438” maydonlariga mos ravishda quyidagi 3 ta komponentni ketma-ket joylashtiramiz: “\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435” maydoniga “\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u041e\u0436\u0438\u0434\u0430\u043d\u0438\u044f1” komponentining “\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u041e\u0436\u0438\u0434\u0430\u043d\u0438\u044f1.\u0412\u044b\u0431\u043e\u0440” bloki, “\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a” va “\u0442\u0435\u043a\u0441\u0442\u041a\u043d\u043e\u043f\u043a\u0438” maydonlariga (qizil fondagi) “\u0422\u0435\u043a\u0441\u0442” komponentining dastlabki (argumentsiz) blokini. “\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a” maydonidagi blok argumentiga “Siz tanlagan yozuv:” matnini, “\u0442\u0435\u043a\u0441\u0442\u041a\u043d\u043e\u043f\u043a\u0438” maydonidagi blok argumentiga esa, “Chiqish” matnini kiritamiz. Natijada quyidagi holat yuzaga kelishi kerak:<\/p>\n

\"\"<\/p>\n

Agar hammasi to’g’ri bajarilgan bo’lsa, blokli dasturimizni kompilyatsiya qilish va uni apk formatli faylga sqalsh qoldi xolos. Buning uchun MIT AI ning “\u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c” menyusidan “Android app (.apk)” elementini tanlaymiz. Taxminan 20-30 sekund ichida apk formatli fayl tayyor ekanligi bildiruvchi quyidagi kabi oyna paydo bo’ladi:<\/p>\n

\"\"<\/p>\n

Faylni kompyuterga yuklab olish uchun chap tomondagi “Download .apk now” tugmasini bosishimiz mumkin. Bundan tashqari, ushbu oynaning o’ng tomonida ko’rsatilgan QR-kod yordamida misol ilovani to’g’ridan-to’g’ri smartfonimizga yuklab olishimiz mumkin. Buning uchun smartfondagi ixtiyoriy QR-kodni skanerlash dasturi yordamida uni skanerlash va ko’rsatilgan havolani ochish mumkin bo’ladi. Fayl PlayMarket internet-do’konidan yuklanmaganligi sababli, aksariyat smartfonlar fayl xavfli bo’lishi mumkinligidan ogohlantiradi. Bundan tashqari, uni o’rnatish davomida ham shunga o’xshash ogohlantirish ko’rsatilishi mumkin. Biroq biz yaratgan ilova xavfsiz bo’lganligi uchun, uni bemalol yuklab olishimiz va o’rnatihimiz mumkin.<\/p>\n

Ilova dasturi tog’ri yaratilgan bo’lsa, uni smartfonda ishga tushirilganidan so’ng tegishli ro’yxatdan biron yozuvni tanlab, “OK” tugmasi bosilganda tanlangan yozuvimiz matni eslatma ko’rinishida yana bir bor tasdiqlanishi, “Chiqish” tugmasi bosilganda esa, eslatma g’oyib bo’lishi kerak.<\/p>\n

Yaratilgan dastlabki ilovamiz Arduino qurilmasini boshqarishga hech qanday daxli bo’lmasa-da, keltirilgan dastlabki ma’lumotlar ayrim arduinochilarning MIT AI ni o’zlashtira boshlashlari uchun turtki bo’lishi mumkin.<\/p>\n

Navbatdagi misol esa, WiFi orqali boshqaruv bo’yicha naminaviy loyihalarning<\/a> davomi hisoblanadi. Ma’lumki, mazkur misollarda mikrokontrollerni WiFi tarmoqdagi kompyuter, smartfon, planshet, smart-televizor va veb-brauzerga ega bo’lgan boshqa qurilmalardan boshqarishgacha bo’lgan bosqichlar ko’rib chiqilgan. Mikrokontrollerni mobil ilova yordamida boshqarish maksimal darajada tushunarli va oson bo’lishi uchun, biz oldingi misollarda yaratilgan, WiFi orqali veb-brauzer yordamida boshqarish qurilmasini saqlab qolamiz va yaratadigan mobil ilovamizni ham aynan shu qurilmani boshqarishga moslashtiramiz. Demak, yaratadigan ilovamiz ham mavjud qurilma (http-server) uchun http-mijoz rolini bajaradi.<\/p>\n

1-variant. Qurilmani ilovadagi ichki veb-brauzer yordamida boshqarish.<\/strong><\/p>\n

Ushbu variantda biz ilgari yaratilgan qurilmamizni mobil ilovaning “Web\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0449\u0438\u043a”<\/strong> komponentidan foydalanib yaratamiz. Chunki, “Web\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0449\u0438\u043a” elementi har qanday veb-brauzerni yaratish uchun zarur bo’lgan imkoniyatlarga ega va mobil ilova ichida oddiy ichki veb-brauzerni hosil qilishga yordam beradi. Demak, ushbu usulda qurilmani boshqarishda foydalanilgan va mikrokontrollerda ilgari yaratilgan veb-sahifamizni o’zimiz hosil qilgan ichki brauzer yordamida boshqaramiz. Shuning uchun ham sketchda http-server bilan bog’liq qanday o’zgarish bo’lishidan qat’iy nazar, ilovaning boshqa qismlarini o’zgartirishga to’g’ri kelmaydi. http-so’rovlar ham mikrokontrollerda yaratilgan veb-sahifadan yuboriladi. Yana bir qulayligi, smartfon bilan qurilma orasida teskari aloqa ham o’rnatiladi (masalan, ichki svetodiod real holatini ilovada ham nazorat qilish mumkin). Qo’pol qilib aytganda, biz shunchaki mikrokontrollerni boshqarish uchun ilgari yaratgan veb-sahifamizni mobil ilovaning ichiga ko’chirib olib o’tamiz xolos!<\/p>\n

Buning uchun MIT AI da yangi “browser_control” nomli loyiha yaratamiz. “Project properties” tugmasi yordamida, yaratiladigan ilovamizga “WiFi rele” kabi tushunarli nom qo’yamiz. Loyiha oynasi ochilgach, smartfon sohasiga quyidagi 3 ta (“\u041d\u0430\u0434\u043f\u0438\u0441\u044c”, “\u0422\u0435\u043a\u0441\u0442”, “Web\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0449\u0438\u043a” turidagi) komponentlarni ko’rsatilgan tartibda joylashtiramiz (qulaylik uchun komponentlar soni imkon qadar minimallashtirilgan):<\/p>\n

“\u0412\u044b\u0441\u043e\u0442\u0430” va “\u0428\u0438\u0440\u0438\u043d\u0430” maydonlarida “\u041d\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439” variantini tanlaymiz. “\u0414\u043e\u043c\u0430\u0448\u043d\u044f\u044f\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430” maydonini bo’sh qoldirishimiz yoki ungf bironta IP-manzilni oldindan kiritib qo’yishimiz mumkin. Ilova ishga tushganan dastlab ko’rsatilgan IP-manzil ilovaning ekranidagi veb-brauzerda ochiladi.<\/p>\n

\"\"<\/p>\n

“\u0411\u043b\u043e\u043a\u0438” bo’limiga o’tamiz va ekranning chap tomonidagi komponentlarni tanlash orqali ularga tegishli bloklarni asosiy oynaga olib o’tamiz va quyidagi rasmda ko’rsatilgan algoritm bo’yicha va tartibda joylashtiramiz:<\/p>\n

\"\"<\/p>\n

Mobil ilova ishga tushirilib, “\u0422\u0435\u043a\u0441\u0442” maydoniga mikrokontroller IP-manzili kiritilsa, ichki brauzerda mikrokontrollerda yaratilgan veb-sahifa ko’rinadi va undagi giperhavolalar yordamida qurilmani boshqarish mumkin bo’ladi.<\/p>\n

2-variant. Qurilmani veb-brauzersiz (ilovaning boshqa komponentlari yordamida) boshqarish.<\/strong><\/p>\n

Ushbu variantda qurilmani boshqarish uchun http-so’rovlar bevosita ilovaning o’zi tomonidan shakllantiriladi. Bunda, boshqaruv “Web\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0449\u0438\u043a” komponenti yordamida emas, “\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442”<\/strong> komponenti yordamida yuboriladigan http-so’rov orqali bajariladi. To’g’ridan-to’g’ri mikrokontrollerda yaratilgan veb-sahifa bilan ishlashga to’g’ri kelmaydi. Lekin, mikrokontroller bilan smartfon orasida teskari aloqa bo’lmaydi (smartfonda svetodiodning real holati ko’rinmaydi).<\/p>\n

MIT AI da yangi “WiFi_relay” nomli loyiha yaratamiz. “Project properties” tugmasi yordamida, yaratiladigan ilovamizga “WiFi rele” kabi tushunarli nom qo’yamiz. Loyiha oynasi ochilgach, smartfon sohasiga quyidagi 6 ta (“Switch”, “\u041a\u043d\u043e\u043f\u043a\u0430”, “\u041d\u0430\u0434\u043f\u0438\u0441\u044c”, “\u0422\u0435\u043a\u0441\u0442”, “\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442” turidagi) komponentlarni ko’rsatilgan tartibda joylashtiramiz (qulaylik uchun komponentlar soni imkon qadar minimallashtirilgan):<\/p>\n

1. “Switch1” nomli komponent – relening kontakti holatini ko’rsatib turish uchun.
\n2. “\u041a\u043d\u043e\u043f\u043a\u04301” va “\u041a\u043d\u043e\u043f\u043a\u04302” nomli komponentlar – releni ulash yoki uzish buyruqlarini veb-serverga yuborish uchun.
\n3. “\u041d\u0430\u0434\u043f\u0438\u0441\u044c1” nomli komponent – IP-manzil maydonini izohlash uchun.
\n4. “\u0422\u0435\u043a\u0441\u04421” nomli komponent – mikrokontroller IP-manzilini kiritish uchun.
\n5. “\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u04421” nomli komponent – http-so’rovni http-serverga yuborish uchun.<\/p>\n

“Screen” majburiy komponenti xususiyatlarida “\u0412\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c\u041f\u043e\u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438” ro’yxatidan “\u0426\u0435\u043d\u0442\u0440: 3” variantini tanlaymiz, “\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a” maydoniga dasturimiz sarlavhasini (masalan, “WiFi orqali releni boshqarish dasturi” matnini) kiritamiz.<\/p>\n

Yuqoridagi komponentlardan “\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442” turidagi komponent “\u041a\u0430\u043d\u0430\u043b\u044b” bo’limida, qolgan barcha turdagi komponentlar esa, “\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f” bo’limida joylashgan. Komponentlar xususiyatlarini quyidagicha o’zgartiramiz:<\/p>\n

“Switch1” nomli komponent: uning “\u0422\u0435\u043a\u0441\u0442” maydoniga “Rele holati:” matnini kiritamiz, “\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u043e” kalitini qo’lda boshqarilmaydigan holatga keltiramiz (kalit faqat holatni ko’rsatish uchun kerak va uni boshqarish knopkalar yordamida bajariladi).<\/p>\n

“\u041a\u043d\u043e\u043f\u043a\u04301”, “\u041a\u043d\u043e\u043f\u043a\u04302” nomli komponentlar: “\u0426\u0432\u0435\u0442\u0424\u043e\u043d\u0430” maydonida mos ravishda yashil, qizil ranglarni kiritamiz, har ikkisi uchun ham “\u0416\u0438\u0440\u043d\u044b\u0439\u0428\u0440\u0438\u0444\u0442” kalitinitini ulaymiz, “\u0424\u043e\u0440\u043c\u0430” ro’yxatidan har ikkisi uchun ham “\u043e\u0432\u0430\u043b” variantini tanlaymiz, “\u0422\u0435\u043a\u0441\u0442” maydoniga mos ravishda “Ulash” va “Uzish” kalitini qo’lda boshqarilmaydigan holatga keltiramiz (kalit faqat holatni ko’rsatish uchun kerak va uni boshqarish knopkalar yordamida bajariladi).<\/p>\n

“\u041d\u0430\u0434\u043f\u0438\u0441\u044c1” nomli komponent: “\u0422\u0435\u043a\u0441\u0442” maydoniga “Mikrokontroller IP-manzili:” matnini kiritamiz.<\/p>\n

“\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u04421” nomli komponent (smartfon sohasida ko’rinmaydigan komponent) xususiyatlarini o’zgartirishsiz qoldiramiz.<\/p>\n

Barcha o’zgarishlar kiritilgach komponentlar joylashuvi quyidagicha bo’lishi kerak:<\/p>\n

\"\"<\/p>\n

“\u0411\u043b\u043e\u043a\u0438” bo’limiga o’tamiz va ekranning chap tomonidagi komponentlarni tanlash orqali ularga tegishli bloklarni asosiy oynaga olib o’tamiz va quyidagi rasmda ko’rsatilgan algoritm bo’yicha va tartibda joylashtiramiz:<\/p>\n

\"\"<\/p>\n

Bloklarni tanlash va asosiy oynaga olib o’tish yuqoridagi 1-misolda ko’rsatilgan usulda bajariladi. Bunda kerakli blokni oson izlab topish uchun ularning quyidagi bo’limlarda joylashganiga e’tibor qaratish zarur:
\n“\u043a\u043e\u0433\u0434\u0430 \u041a\u043d\u043e\u043f\u043a\u04301.\u0429\u0435\u043b\u0447\u043e\u043a<\/strong>” bloki “Screen1\/\u041a\u043d\u043e\u043f\u043a\u04301<\/strong>” bo’limida joylashgan;
\n“\u043a\u043e\u0433\u0434\u0430 \u041a\u043d\u043e\u043f\u043a\u04302.\u0429\u0435\u043b\u0447\u043e\u043a<\/strong>” bloki “Screen1\/\u041a\u043d\u043e\u043f\u043a\u04302<\/strong>” bo’limida;
\n“\u043a\u043e\u0433\u0434\u0430 Switch1.\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043e<\/strong>” bloki “Screen1\/Switch1<\/strong>” bo’limida;
\n“\u0435\u0441\u043b\u0438 … \u0442\u043e … <\/strong>” bloki “\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439\/\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/strong>” bo’limida;
\n“\u043d\u0435 …<\/strong>” bloki “\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439\/\u041b\u043e\u0433\u0438\u043a\u0430<\/strong>” bo’limida;
\n“Switch1.On<\/strong>” bloki “Screen1\/Switch1<\/strong>” bo’limida (2 marta qo’llanilgan);
\n“\u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u04421.\u0410\u0434\u0440\u0435\u0441 URL \u0432 <\/strong>” bloki “Screen1\/<\/strong>\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u04421<\/strong>” bo’limida (2 marta qo’llanilgan);
\n“\u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c <\/strong>Switch1.On \u0432 <\/strong>” bloki “Screen1\/Switch1<\/strong>” bo’limida (2 marta qo’llanilgan);
\n“\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c <\/strong>” bloki “\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439\/\u0422\u0435\u043a\u0441\u0442<\/strong>” bo’limida (2 marta qo’llaniladi). Asosiy oynaga olib o’tilgach, dastlab ushbu blokning chap yuqori burchagidagi sozlash tugmasi yordamida uning ichidagi “\u0441\u0442\u0440\u043e\u043a\u0430” elementlari sonini 3 taga yetkazib olamiz. Shundan keyin uning o’ng tomonidagi 3 ta uyalarning 1- va 3-uyalariga yana “\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439\/\u0422\u0435\u043a\u0441\u0442<\/strong>” bo’limidagi dastlabki “”<\/strong> (bo’sh maydon) elementini olib o’tiladi va ularga tegishli matnlar kiritiladi. 2-uyaga esa, “Screen1\/\u0422\u0435\u043a\u0441\u04421<\/strong>” bo’limidagi “\u0422\u0435\u043a\u0441\u04421.\u0422\u0435\u043a\u0441\u0442 <\/strong>” bloki joylashtiriladi;
\n“\u0422\u0435\u043a\u0441\u04421.\u0422\u0435\u043a\u0441\u0442 <\/strong>” bloki “Screen1\/\u0422\u0435\u043a\u0441\u04421<\/strong>” bo’limida (yuqoridagi “\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c <\/strong>” blokining 2-uyasiga joylashtiriladi, ushbu blok 2 marta qo’llanilgan);
\n“\u0438\u0441\u0442\u0438\u043d\u0430 <\/strong>” va “\u043b\u043e\u0436\u044c<\/strong>” bloklari “\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439\/\u041b\u043e\u0433\u0438\u043a\u0430<\/strong>” bo’limida;
\n“\u0432\u044b\u0437\u043e\u0432 “\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u04421.\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c<\/strong>” bloki “Screen1\/<\/strong>\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u04421<\/strong>” bo’limida joylashgan.<\/p>\n

Ushbu bloklarning joylashuv algoritmi mazmuni va qisqacha vazifalariga to’xtalib o’tamiz.<\/p>\n

“\u043a\u043e\u0433\u0434\u0430 \u041a\u043d\u043e\u043f\u043a\u04301.\u0429\u0435\u043b\u0447\u043e\u043a<\/strong>” bloki “\u041a\u043d\u043e\u043f\u043a\u04301” (“Ulash”) tugmasi bosilganda qanday amallar bajarilishi zarurligini anglatadi. Uning ichidagi “\u0435\u0441\u043b\u0438 … \u0442\u043e … <\/strong>” bloki yordamida “Switch1” kalitining uzilgan holatidan kelib chiqib, http-so’rov shakllantiriladi. Ya’ni, agar “\u041a\u043d\u043e\u043f\u043a\u04301” tugmasi bosilgan paytda “Switch1” kaliti uzilgan holda bo’lsa, http-server uchun “http:\/\/IP-manzil\/gpio\/1” so’rovi shakllantiriladi. Bu yerda IP-manzil sifatida, “\u0422\u0435\u043a\u0441\u04421” matn maydonidagi yozuv qabul qilinadi. Shu bilan birga “Switch1” kalitining holati ulangan holga o’tkaziladi. Aksincha, ya’ni agar “\u041a\u043d\u043e\u043f\u043a\u04301” tugmasi bosilgan paytda “Switch1” kaliti ulangan holda bo’lsa, hech qanday amal bajarilmaydi.
\nXuddi shuningdek, “\u043a\u043e\u0433\u0434\u0430 \u041a\u043d\u043e\u043f\u043a\u04302.\u0429\u0435\u043b\u0447\u043e\u043a<\/strong>” bloki “\u041a\u043d\u043e\u043f\u043a\u04302” (“Uzish”) tugmasi bosilganda qanday amallar bajarilishi zarurligini anglatadi. Uning ichidagi “\u0435\u0441\u043b\u0438 … \u0442\u043e … <\/strong>” bloki yordamida “Switch1” kalitining ulangan holatidan kelib chiqib, http-so’rov shakllantiriladi. Ya’ni, agar “\u041a\u043d\u043e\u043f\u043a\u04302” tugmasi bosilgan paytda “Switch1” kaliti ulangan holda bo’lsa, http-server uchun “http:\/\/IP-manzil\/gpio\/0” so’rovi shakllantiriladi. Shu bilan birga “Switch1” kalitining holati uzilgan holga o’tkaziladi. Aksincha, ya’ni agar “\u041a\u043d\u043e\u043f\u043a\u04302” tugmasi bosilgan paytda “Switch1” kaliti uzilgan holda bo’lsa, hech qanday amal bajarilmaydi.<\/p>\n

“Switch1<\/strong>” kaliti holati har safar o’zgarganda, “\u0432\u044b\u0437\u043e\u0432 “\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u04421.\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c<\/strong>” bloki yordamida yuqoridagi bloklar yordamida shakllantirilgan tegishli http-so’rov http-serverga yuboriladi.<\/p>\n

Ma’lumki, raqamli pinga “1” (HIGH) qiymati yuborilsa, unga bog’langan svetodiod yoqilishi, aksincha “0” (LOW) qiymati yuborilsa, o’chishi kerak. Biroq, Wemos D1 mini platalaridagi raqamli 4-pinga ichki svetodiod inversiya holatida ulangani sababli, “1” signali uni o’chiradi, “0” signali esa yoqadi. Ushbu pinga tashqi svetodiod bog’lansa, hammasi tog’ri bajariladi.<\/p>\n

Mobil ilovada boshqarishni boshlash uchun, dastlab undagi tegishli matn maydoniga Arduino IDE port monitoriga chiqarilgan mikrokontroller IP-manzilni to’g’ri kiritish kerak bo’ladi. Aks holda, ilovada xatolik yuz bergani haqidagi inglizcha xabarlar ko’rsatiladi.<\/p>\n

AI Companion yordamchi vositasi<\/strong><\/p>\n

Har qanday dasturlash tilida bo’lganidek, MIT AI da dasturlash jarayonida ham oraliq natijalarni kuzatish (otladka qilish)ga ehtiyoj tug’iladi. Har bir o’zgarishdan keyin oraliq natijani ko’rish uchun apk fayl hosil qilish, uni smartfonga o’rnatib, ishga tushirish bosqichlarini bajarish tabiiyki, dasturlash jarayonini ham uzaytirib yuboradi. Sunday holatlarni hisobga olgan holda, MIT AI oraliq natijalarini smartfonda (hatto har bir element xusisiyatidagi o’zgarishlarni ham) kuzatib borish uchun alohida “MIT AI2 Companion<\/strong>” (AI yordamchisi) nomli mobil ilova<\/strong> yaratilgan bo’lib, uni har doim “Play Market”dan yuklab olish mumkin. Uni smartfonda ishga tushirilgach dasturning quyidagi ko’rinishdagi oynasi hosil bo’ladi.<\/p>\n

\"\"<\/p>\n

Shundan keyin MIT AI ning “\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f” menyusidagi “\u041f\u043e\u043c\u043e\u0449\u043d\u0438\u043a AI” elementi tanlansa, sahifada vaqtinchalik QR-kod va unga mos matnli kodni o’z ichiga olgan kichik oyna hosil bo’ladi. “MIT AI2 Companion<\/strong>” ilovasidagi matn maydoniga ushbu matnli kod kiritilib “connect with code<\/strong>” tugmasi bosilsa yoki ilova oynasidagi “scan QR code<\/strong>” tugmasini bosib, MIT AI oynasidagi QR-kod skanerlansa, Internet orqali ikki tomonlama aloqa o’rnatiladi. Aloqa faol bo’lgan paytda MIT AI akkauntidagi dasturga kiritilgan har qanday o’zgarishni smartfonda onlayn ravishda kuzatib borish mumkin bo’ladi!<\/p>\n

MIT AI akkauntidagi oraliq natijalarni kuzatib borishning boshqa variantlari ham bor. Masalan, MIT AI akkaunti faol bo’lgan kompyuter bilan smartfon o’rtasida USB-port orqali ham aloqa o’rnatish mumkin. Shuningdek, kompyuterda mobil qurilma emulyatori dasturini o’rnatib ham natijalarni u orqali kuzatish mumkin. Biz ushbu usullarga to’xtalmaymiz. Zarurat bo’lsa, bu usullardan foydalanish bilan bog’liq ma’lumotlarni dasturning yordam tizimidan va Internet tarmog’ining boshqa saytlaridan izlab topish mumkin.<\/p>\n

Takomillashtirilgan mobil ilova<\/strong><\/p>\n

Yuqoridagi sketch orqali Wemos D1 mini platasi ichki svetodiodi va unga parallel bo’lgan raqamli D4 piniga bog’langan releni (yoki rele modulini) boshqaruvchi, muallif tomonidan yaratilgan tayyor mobil ilova<\/strong>ni (yuqoridagi ilovaning takomillashtirilgan variantini) ushbu havola<\/a><\/strong> orqali yuklab olish mumkin.<\/p>\n

Mobil ilovaning ushbu varianti orqali nafaqat releni ulab-uzish, balki, releni boshqarishning “Trigger” hamda “Impuls”rejimlarini tanlash, shuningdek zarurat tug’ilsa, relega yuboriladigan raqamli signalni inversiyalash ham ko’zda tutilgan. Bunda ba’zi rele modullarining inversiya rejimida ishlashga mo’ljallab ishlab chiqarilishi hisobga olingan. Dasturning keyingi seanslari uchun qo’llanilayotgan IP-manzil smartfon xotirasida saqlab qolinishi ham ko’zda turilgan va uni har safar qayta kiritishga zarurat qolmaydi.<\/p>\n

(materialning ushbu qismi to’ldirish jarayonida)<\/strong><\/em><\/p>\n

Ilovaning imkoniyatlarini yanada oshirish, shuningdek yuqoridagi sketchda keltirilgan veb-sahifani hosil qilivchi HTML-kodga bir qator o’zgartirishlar kiritish orqali, xususan, uning dizaynini o’zgartirish (bezak berish) orqali sahifaning, undagi matn hamda tugmalarning tashqi ko’rinishini tushunarli va tartibli ko’rinishga keltirish mumkin. Biroq bu vazifalar ushbu darsning maqsadidan chetga chiqib ketadi, shuning uchun ularni o’quvchining ixtiyoriga qoldiramiz.<\/p>\n

Mustahkamlash uchun topshiriqlar<\/em><\/p>\n

1. Oxirgi yaratilgan mobil ilovani (1-variant) va sketchni (2-variant) shunday o’zgartiringki, mikrokontrollerga yuborilgan signal (1-variantda) yoki relega kiruvchi signal (2-variantda) inversiya (qarama-qarshi) rejimida bo’lsin. Ya’ni “ulash” tugmasi yordamida “LOW”, “uzish” tugmasi yordamida “HIGH” signali yuborilsin.
\n2. MIT App Inventor blokli dasturlash vositasi yordamida 2 ta va undan ortiq sondagi yuklamalarni boshqaruvchi mobil ilovani yarating.
\n3. Sketchni o’zgartirmagan holda oxirgi yaratilgan mobil ilovaga ixtiyoriy qo’shimcha funksiya qo’shing.<\/em><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Navbatdagi bo’limda MIT App Inventor onlayn blokli dasturlash vositasi va u bilan ishlashning asoslari haqida qisqacha ma’lumotlar keltiriladi. MIT App Inventor blokli dasturlash vositasi Ushbu dasturlash vositasi faqat onlayn rejimda visual dasturlashga mo’ljallangan bo’lib, Android uchun dasturlarni dasturlash ushun alohida dasturlash tilini o’rganishni talab etmaydi va faqat bloklar yordamida dasturlashga yo’naltirilgan (Qulaylik uchun, darslar davomida […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-1952","post","type-post","status-publish","format-standard","hentry","category-namunaviy-sketchlar"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/yarat.uz\/index.php?rest_route=\/wp\/v2\/posts\/1952","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yarat.uz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yarat.uz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yarat.uz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yarat.uz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1952"}],"version-history":[{"count":33,"href":"https:\/\/yarat.uz\/index.php?rest_route=\/wp\/v2\/posts\/1952\/revisions"}],"predecessor-version":[{"id":5007,"href":"https:\/\/yarat.uz\/index.php?rest_route=\/wp\/v2\/posts\/1952\/revisions\/5007"}],"wp:attachment":[{"href":"https:\/\/yarat.uz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yarat.uz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yarat.uz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}