SPARKvue и визуальный язык программирования Blockly

Мы уже сообщали о возможности писать небольшие коды для датчиков в ПО SPARKvue. Рассмотрим это подробнее. <br> <br>Blockly - это визуальный редактор, разработанный в 2012 г. фирмой Google, который позволяет пользователям писать программы, соединяя блоки кода друг с другом. Это упрощает процесс создания кода и, благодаря этому, каждый может проявить творческий подход в процессе обучения. <br> <br>Кодировщик Blockly интегрирован у ПО SPARKvue и Capstone, благодаря чему можно запрограммировать поведение любого датчика, который будет сопряжён с данной программой. При этом графическая среда программирования не позволит написать синтаксически неправильную программу, что значительно убыстряет процесс написания кода. <br> <br>Напоминаем, что скачать и установить ПО <noindex><a href="https://www.pasco.com/downloads/sparkvue" target="_blank" rel="nofollow">SPARKvue</a></noindex> и <noindex><a href="https://www.pasco.com/downloads/capstone" target="_blank" rel="nofollow">Capstone</a></noindex> можно по&nbsp;ссылке на сайте компании-производителя. <br> <br>В этой статье мы рассмотрим самые азы программирования при помощи Blockly на простом примере. <br> <br>Итак, где найти вкладку с Blockly? <br> <br>В Capstone она находится прямо на панели Функции в самом низу и называется «Ввести код» <br><img src="/upload/resize_cache/main/8a1/600_600_1/Screenshot_39.jpg" title="" alt="Screenshot_39.jpg" border="0" width="600" height="306" data-bx-image="/upload/main/8a1/Screenshot_39.jpg"> <br> <br>В SPARKvue немного надо потрудится: подключите датчик, выберите любой шаблон отображения данных. Например, график. <br>Вы попадёте на страницу с тем самым графиком. Далее щёлкните по кнопке <b>Управление экспериментом</b>, расположенной справа на нижней панели <img src="/upload/main/661/Управление экспериментом_29.jpg" title="" alt="Управление экспериментом_29.jpg" border="0" width="75" height="69" data-bx-image="/upload/main/661/Управление экспериментом_29.jpg"> <br> <br>Откроется диалоговое окно, где надо щёлкнуть по кнопке <b>Ввести код</b>. <br> <br><img src="/upload/resize_cache/main/095/600_600_1/Ввести код.jpg" title="" alt="Ввести код.jpg" border="0" width="600" height="562" data-bx-image="/upload/main/095/Ввести код.jpg"> <br> <br>Именно так вы попадёте на страницу, где и будем писать простой код. <br> <br>На странице вы увидите большое поле для написание кода и логические вкладки: <br><img src="/upload/resize_cache/main/28e/600_600_1/Screenshot_8.jpg" title="" alt="Screenshot_8.jpg" border="0" width="600" height="397" data-bx-image="/upload/main/28e/Screenshot_8.jpg"> <br>Графический редактор Blockly оперирует двумя видами объектов: блоками и вставками. Всё это скрыто в боковой вкладке. <br> <br>Блоки представляют в языке операторы, управляющие конструкции, процедуры, функции, вызовы процедур. <br> <br>Вставки служат для оформления констант, выражений и вызова функций. <br> <br>Контроль типов осуществляется частично: редактор не позволяет использовать вставки там, где они не подходят по типу. <br> <br>Рассмотрим каждую вкладку подробнее: <br> <br>Основные <b>логические</b> блоки: определяют, какое действие следует выполнить, в зависимости от значения переменных в момент проверки условия. <br><img src="/upload/resize_cache/main/803/600_600_1/Screenshot_9.jpg" title="" alt="Screenshot_9.jpg" border="0" width="600" height="372" data-bx-image="/upload/main/803/Screenshot_9.jpg"> <br> <br><b>Циклы</b> <br>Набор блоков, позволяющих задать набор действий с заранее известным числом повторений, а также для обхода списков <br><img src="/upload/resize_cache/main/f7d/600_600_1/Screenshot_10.jpg" title="" alt="Screenshot_10.jpg" border="0" width="600" height="370" data-bx-image="/upload/main/f7d/Screenshot_10.jpg"> <br> <br><b>Математика</b> - набор блоков, позволяющих работать с числами. <br><img src="/upload/resize_cache/main/28f/600_600_1/Screenshot_11.jpg" title="" alt="Screenshot_11.jpg" border="0" width="600" height="374" data-bx-image="/upload/main/28f/Screenshot_11.jpg"> <br> <br><b>Текст</b> - набор блоков, позволяющих работать с текстами. <br><img src="/upload/resize_cache/main/6e2/600_600_1/Screenshot_12.jpg" title="" alt="Screenshot_12.jpg" border="0" width="600" height="370" data-bx-image="/upload/main/6e2/Screenshot_12.jpg"> <br> <br><b>Списки</b> - это набор переменных любого типа. <br><img src="/upload/resize_cache/main/be3/600_600_1/Screenshot_13.jpg" title="" alt="Screenshot_13.jpg" border="0" width="600" height="375" data-bx-image="/upload/main/be3/Screenshot_13.jpg"> <br> <br><b>Переменная</b> – это область памяти, где можно хранить определённое значение, чтобы позже к нему обратиться. По большому счёту, объект сам по себе является переменной. <br><img src="/upload/resize_cache/main/7d0/600_600_1/Screenshot_14.jpg" title="" alt="Screenshot_14.jpg" border="0" width="600" height="368" data-bx-image="/upload/main/7d0/Screenshot_14.jpg"> <br> <br><b>Функции</b>. Команды, вызывающие те или иные действия системы <br>Набор блоков, позволяющих создавать и вызывать функции. <br>Функции удобны для структурирования и множественного использования повторяющейся логики. <br><img src="/upload/resize_cache/main/ba4/600_600_1/Screenshot_15.jpg" title="" alt="Screenshot_15.jpg" border="0" width="600" height="364" data-bx-image="/upload/main/ba4/Screenshot_15.jpg"> <br> <br><b>Аппаратное обеспечение</b> – это команды для подключённых датчиков. <br><img src="/upload/resize_cache/main/065/600_600_1/Screenshot_16.jpg" title="" alt="Screenshot_16.jpg" border="0" width="600" height="366" data-bx-image="/upload/main/065/Screenshot_16.jpg"> <br> <br><b>Код алгоритма</b> - для создания набора данных раздела Введено пользователем. <br><img src="/upload/resize_cache/main/7c5/600_600_1/Screenshot_17.jpg" title="" alt="Screenshot_17.jpg" border="0" width="600" height="363" data-bx-image="/upload/main/7c5/Screenshot_17.jpg"> <br> <br><b>Время</b> – это команды для управления временем снятия показаний. <br><img src="/upload/resize_cache/main/81a/600_600_1/Screenshot_18.jpg" title="" alt="Screenshot_18.jpg" border="0" width="600" height="366" data-bx-image="/upload/main/81a/Screenshot_18.jpg"> <br> <br>Для создания кода требуется сначала понять, по какому сценарию будет развиваться действие. <br> <br>Для удобства понимания давайте создадим простой код, в котором датчик температуры будет измерять воду, а на экране мы будем видеть, подходит ли температура воды для купания или нет. <br> <br>Схема размышлений такая: <br>если температура воды будет ниже 21 градусов, то нам отобразят слово «Холодно», если выше 45, то – «Горячо», а иначе – «Комфортно». <br> <br>Для написания этого кода мы используем логический блок ЕСЛИ. Выносим его на рабочую область и расширяем его возможности при помощи колеса <b>Настройки</b>. <br><img src="/upload/main/92c/Screenshot_29.jpg" title="" alt="Screenshot_29.jpg" border="0" width="597" height="231" data-bx-image="/upload/main/92c/Screenshot_29.jpg"> <br> <br>Далее нам надо указать, при каком значении температуры нам покажут «Горячо» <br><img src="/upload/resize_cache/main/c82/600_600_1/Screenshot_32.jpg" title="" alt="Screenshot_32.jpg" border="0" width="600" height="258" data-bx-image="/upload/main/c82/Screenshot_32.jpg"> <br> <br>Для дублирования строки и блоков щёлкните правой мышкой и выберите в контекстном меню соответствующую команду: <br><img src="/upload/main/36e/Screenshot_25.jpg" title="" alt="Screenshot_25.jpg" border="0" width="264" height="197" data-bx-image="/upload/main/36e/Screenshot_25.jpg"> <br> <br>Используйте вкладки Логические, Циклы, Математика, Аппаратное обеспечение, Время, чтобы в конечном итоге у вас получился такой код: <br><img src="/upload/resize_cache/main/8e2/600_600_1/Screenshot_23.jpg" title="" alt="Screenshot_23.jpg" border="0" width="600" height="272" data-bx-image="/upload/main/8e2/Screenshot_23.jpg"> <br> <br>После того, как вы написали код, нажмите Готово. И создайте новую страницу со следующим шаблоном: <br><img src="/upload/resize_cache/main/f46/600_600_1/Screenshot_38.jpg" title="" alt="Screenshot_38.jpg" border="0" width="600" height="308" data-bx-image="/upload/main/f46/Screenshot_38.jpg"> <br> <br>На готовой странице нажимайте ПУСК. <img src="/upload/resize_cache/main/47c/600_600_1/Screenshot_41.jpg" title="" alt="Screenshot_41.jpg" border="0" width="600" height="396" data-bx-image="/upload/main/47c/Screenshot_41.jpg"> <br> <br>В зависимости от снимаемых показаний надписи будут меняться в соответствии с кодом. <br> <br>Если вам надо отредактировать код, используйте кнопку <b>Ввести код</b> <img src="/upload/main/612/Screenshot_42.jpg" title="" alt="Screenshot_42.jpg" border="0" width="77" height="64" data-bx-image="/upload/main/612/Screenshot_42.jpg">, расположенную внизу страницы рядом с кнопкой <b>Управления экспериментом</b>. <br> <br>Таким образом, вы можете писать различные коды для программирования датчиков. <br> <br>Для вас мы подготовили видеоролик, как создаётся этот простой код: <br> <br><iframe width="560" height="315" src="https://www.youtube.com/embed/22uoexcVbLY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br> <br>Углубиться в работу с Blockly вам помогут следующие ресурсы: <br>• <noindex><a href="http://blockly.ru/about-learning.html" target="_blank" rel="nofollow">http://blockly.ru/about-learning.html</a></noindex> <br> <br>Всё о Blockly <br>• <noindex><a href="https://blockly.games/?lang=ru" target="_blank" rel="nofollow">https://blockly.games/?lang=ru</a></noindex> обучающие программированию игры <br>• <noindex><a href="https://developers.google.com/blockly" target="_blank" rel="nofollow">https://developers.google.com/blockly</a></noindex> на англ.яз., но можно использовать возможность автоматического перевода браузера Chrome.<br>• <noindex><a href="http://anngeorg.ru/info/prog/young/blockly" target="_blank" rel="nofollow">http://anngeorg.ru/info/prog/young/blockly</a></noindex> небольшая статья о Blockly <br> <br>Успехов! <br> <br>Ждём ваших шедевров!