MIT встречает Express Socket-io и J5

Дебют Bleeding Edge Technology #kidSeries 07

Привет любителям! Добро пожаловать в еще один учебник по MIT App Inventor 2.
На этот раз у нас есть мощный арсенал.

Мы приносим Express framework вместе с Node js и Johnny-Five, платформой JavaScript Robotics & IoT, Socket.io, MIT App Inventor и Arduino. Давайте сразу перейдем к коду №07: РЕПО на GitHub.

Но перед проверкой кода сначала убедитесь, что все работает:

Среди инструментов — MIT App Inventor, Express, представляющий собой минималистичный фреймворк для веб-страниц, новинки — Socket-io и Node.js. Следует за макетом для теста:

Мы используем библиотеку Johnny-five, и меня вдохновила эта страница Рикардо Фелипе. Проверьте ссылки, которые я оставляю для вас:

Установите все на свою машину. Это последовательность:

Node.js (Install nodeJS w/ Windows Installer Package)

Хорошо, теперь с установленным NodeJS откройте терминал в Windows 10 и введите:

Экспресс ( $ npm install express - — save)

Джонни-Пять ( $ npm install johnny-five)

Теперь для Socket.io нам просто нужно выполнить package.json (этот скрипт принесет все библиотеки зависимостей). Внутри нашего приложения мы будем вызывать socket.io lib, например:

Socket-io (nvar io = require('socket.io')(80);))

И, наконец, запустите в каталоге приложения:

npm install package.json

Откройте Arduino IDE, перейдите в меню Примеры› Firmata› и загрузите StardardFirmata.ino на свою доску:). Это важная процедура! 👈

Теперь в терминале запустите приложение как таковое:

node rgb.js

Теперь происходит волшебство!

node rgb.js
Server listening on http://localhost:3000
1579303843556 Available COM9
1579303843575 Connected COM9
1579303847466 Repl Initialized
>> Arduino is ready.

Запустите приложениедля Android _07_kidSerie_Hello_Socket_IO.apk (скачайте его по ссылке ниже 👇) на своем телефоне; Принимаем все условия 😅 нажимаем кнопку на экране и приложение внедряет страницу index.html на экран мобильного телефона со всеми необходимыми библиотеками, socket io и т.д.

Аааа! это волшебно! 🎩 Светодиод RGB в вашем распоряжении… теперь вы можете подключить свой тостер! 😋

У меня есть видео в моей серии Arduino, в котором очень хорошо объясняется J5. Также проверьте официальную ссылку J5.

Это просто весело!

Теперь переходим к настройкам MIT App Inventor.

Перетащите текстовое поле, кнопку и объекты веб-просмотра.

Организуйте макет следующим образом:

Сохраните изображение узла и кнопки Экспресс-технологий, просто так 😄

Код очень простой. У меня есть серия про это:

#HelloWorldMITApp — Hello World для MIT App Inventor 2–00 #kidSeries

Что происходит, так это то, что когда я нажимаю кнопку, он просто загружает ссылку с моего компьютера, на котором запущено приложение NodeJS, через порт 3000, где обслуживается приложение:

Server listening on http://localhost:3000

Ничего сложного, правда?

Посетите страницы этих передовых технологий, NodeJS, Express, Socket.io и Johnny-five, MIT App Inventor, и не торопитесь, чтобы чувствовать себя комфортно во всем этом. Это потрясающие технологии для вашей карьеры программиста, которые сделают вас ученым будущего!

Перейдем к коду. Создайте структуру каталогов (например, c:/…/myApp/public). У нас есть в публичном каталоге статические файлы, клиент и стиль. В домашнем каталоге наш HTML-индекс и, конечно же, rgb.js (основное приложение).

Проверьте пакет с точкой JSON. Он отвечает за управление приложением, загрузку зависимостей модулей и т. д., и прочитайте dot me, этот файл покажет вам, как все установлено.

Давайте посмотрим на код rgb.js. Сначала мы объявляем нужные переменные с соответствующими модулями.

В индексном HTML-файле мы собираем данные для цветов, красного, зеленого и синего. Сервер сделан файлом RGB js. Открываю Ардуино.

вы можете использовать эту часть кода, если знаете, что порт Arduino подключен :)

five.Board({ port: "COM09"}).on('ready', function() {  console.log('Arduino is ready.');

Затем зафиксируйте настройки индикатора состояния и т. д.

Связь с рукопожатием.

Эта часть фиксирует данные:

client.on('rgb', function(data) {      state.red = data.color === 'red' ? data.value : state.red;      state.green = data.color === 'green' ? data.value : state.green;      state.blue = data.color === 'blue' ? data.value : state.blue;

Тогда остается только транслировать.

client.emit('rgb', data);      
client.broadcast.emit('rgb', data);

HTML — это вид спереди. Это дает возможность захвата пользовательского ввода.

Клиент js использует библиотеки io Socket-io и передает данные через сокет на сервер.

Делает необходимые заявления и слушает изменения ползунков.

Файл стиля выполняет только центрирование страницы.

После запуска приложения введите node rgb.js в консоли (или терминале:), откройте новую подсказку и введите ipconfig. Затем запишите адрес, по которому запущено ваше приложение:

И это все!

Если вам интересно, вы можете быстро узнать, как использовать Изобретатель приложений MIT на официальной странице учебных пособий. Попробуйте !!

Это все на сегодня. До следующей реализации. до свидания :)

Скачать все архивы этого проекта

Ссылки и кредиты

Начало работы с Arduino, johnny-five и веб-сокетами Рикардо Фелипе (спасибо, чувак!)

Отзыв @ янв 2020 от j3 — снова запускаем приложение, рефакторим коды и текст, добавляем новые изображения, правим файл для скачивания — все как всегда работает отлично 😊

MIT встречает Express Socket-io и J5

Дебют Bleeding Edge Technology #kidSeries 07

Похожие сообщения

Ссылки и кредиты

Вопросы по теме