Веб-середовище візуального програмування App Lab
Олег Пустовойт
лауреат Global Teacher Prize Ukraine 2020,
відмінник освіти України,
лауреат почесної відзнаки МОН «Софія Русова»,
керівник наукових та творчих учнівських проектів
Одеської ЗОШ І—ІІІ ст. № 65
Ким створений даний програмний продукт та на основі чого?
Некомерційний проект «Code.org» є об'єднанням людей, які виступають за право і можливість будь-якого школяра або студента вивчати комп'ютерні науки нарівні з біологією, хімією або алгеброю.
Саме «Code.org» організовує щорічну загальновідому «Годину коду», яка охоплює до 10% студентів світу і забезпечує методичну та технічну підтримку поглибленої навчальної програми з інформатики для найбільших шкільних округів США. Недарма Code.org підтримується не тільки гігантами ІТ-індустрії — Microsoft, Facebook, Google, але й особисто Стівом Балмером, Біллом і Меліндой Гейтс, Дрю Хьюстоном з Dropbox та багатьма іншими відомими персонами галузі.
В рамках проекту створено сайт https://studio.code.org, на якому реалізовано, крім підтримки програми «Година коду», три Web-інструменти візуального програмування для школярів і студентів різних вікових груп і рівнів підготовки. Ці інструменти називаються Artist, Game Lab і App Lab. Про останній з них й піде мова у цій статті.
Artist, Game Lab і App Lab створені на основі технології Google Blockly — файлової бібліотеки для створення функціоналу візуального програмування, яка може бути легко вбудована в будь-який сайт або Web-додаток. Blockly реалізована на JavaScript, розробляється, підтримується і вільно поширюється разом c вихідним кодом компанією Google з 2012 року. Вже кілька років технологія включає набір генераторів коду на такі мови програмування, як JavaScript, Python, Dart, чим зумовлена зручність її використання при навчанні початківців цім професійним мовам програмування.
Які технічні вимоги для використання App Lab?
Досить просто мати під рукою комп'ютер, Інтернет та реєстрацію на https://studio.code.org.
Що корисного і кому дає App Lab?
Коротко кажучи, як це відображено у назві статті, перед нами інструмент для вивчення JavaScript, Google Blockly, табличних БД і мобільних додатків «в одному флаконі». Тобто, в одному місці ми можемо займатися і візуальним програмуванням, і ООП і основами мов запитів до баз даних.
Сode.org позиціонує App Lab для учнів 9-12 класів шкіл США. Особистий досвід дає автору статті право стверджувати, що зацікавлена і підготовлена дитина (наприклад, після проходження річного курсу Scratch рівня близько 100 учбових годин) може починати успішно робити з App Lab навіть з 5-6 класів.
Дуже привабливим є те, що цей проект модернізується буквально зараз. Добре знаючи особливості його роботи користувач може побачити шматочки поточної роботи «кухні» його творців та готуватися до появи нових функцій та можливостей.
Як виглядає інтерфейс App Lab?
За відсутності у App Lab поки що українського варіанту інтерфейсу, у статті ми будемо орієнтуватися на його російськомовну версію.
Після автентифікації посилання https://studio.code.org/projects/applab/ переведе вас на сторінку того проекту, над яким ви працювали востаннє:
Вгорі ви побачите наступні кнопки: перейменування поточного проекту «Переименовать»,
кнопку створення посилання для відправки користувачам і публікації в соціальних мережах «Поделиться», кнопку створення власної копії стороннього проекту у хмарному сховищі «Ремикс» та кнопку «Создать новый». Правіше розташована кнопка «Мои проекты», яка дає можливість потрапити на сторінку власних розробок користувача у хмарному сховищі
Зона роботи з проектом поділена на чотири частини.
Зліва розташовується імітатор екрану смартфону, де можна бачити результати роботи на даному етапі розробки. Вище нього знаходяться кнопки перемикання режимів роботи. Посередині екрану розташована панель інструментів з кнопками бібліотек програмних блоків. Праворуч — місце збірки коду, над яким знаходиться кнопка доступу до журналу версій та кнопка перемикання режимів візуального і текстового режимів програмування (неймовірно корисна та важлива опція). Внизу розташовані кнопки та консоль відладки зі слайдером вибору швидкості виконання проекту в імітаторі.
Що собою являють режими роботи з проектом App Lab?
Можна виділити чотири режими роботи при створені проекту в середовищі App Lab.
Спочатку розглянемо режим, який включає кнопка «Структура кода».
В цьому режимі методом «drag-and-drop» можна сформувати користувацький інтерфейс проекту на його сторінках-екранах за допомогою наступних елементів:
• кнопок
• полів введу
• підписів
• списків, що випадають
• перемикачів (радіокнопок)
• прапорців (чекбоксів),
• зображень
• полотен-«canvas» для програмного малювання
• текстових областей
• графіків,
• бігунків (слайдерів).
Кожен елемент налаштовується за допомогою власної сторінки зміни властивостей. На сторінці подій, притаманних цьому елементу інтерфейсу, можна ініціювати початок створення функції їх обробки,.
Другий режим ініціює кнопка «Код» — це безпосереднє програмування. Ось так виглядає сторінка типового проекту в цьому режимі.
Відзначимо ще раз факт, що введення програми може відбуватися як шляхом візуального програмування (перетягуванням блоків і вставок), так й класичним введенням тексту JavaScript-коду (кнопка «Показать текст»)
Слід сказати, що існують досить поширені ситуації, коли без цього режиму в App Lab неможливо обійтися лише методами візуального програмування. Цей момент є важливим для поступового переходу школярів до класичних способів сприйняття коду та методам роботи з JavaScript.
Крім того, середовище постійно аналізує стан програмної частини проекту і миттєво сигналізує автору про помилки і некоректні використання програмних елементів візуальними сигналами, позначаючи проблемні рядки червоними квадратами і жовтими трикутниками.
Для кожного проекту існує автоматично формується журнал версій, що, природньо, є великою допомогою для починаючих (і не тільки) програмістів при
роботі. Потрапити в журнал і повернутися до попереднього стану проекту можна натисканням на відповідну
кнопку:
Третій режим включається кнопко «Data» і присвячений роботі з таблицями проекту:
За допомогою цього режиму ви можете сформувати необхідні для роботи проекту таблиці, модифікувати їх структуру і самі дані.
Зручною опцією є імпорт і експорт даних в таблиці (або з них) за допомогою текстового формату CSV.
Треба зазначити, що з точки зору JavaScript таблиці App Lab є масивами записів, що легко побачити за допомогою кнопки «Debug view»:
Четвертий режим, режим відладки програми на імітаторі екрану мобільного пристрою включає кнопка «Выполнить» (вимикається кнопкою «Сбросить»):
Швидкість роботи в режимі налагодження, як уже згадувалося раніше, визначається бігунком («черепаха—заєць»).
В консолі налагодження можна програмно виводити необхідну проміжну інформацію. Там же App Lab виводить повідомлення про помилки, що виникли в поточному сеансі роботи програми.
Що можливо зробити за допомогою App Lab?
Багато що. Особливо якщо розглядати все крізь призму навчальних завдань. Підтримка багатокористувацьких додатків, інтуїтивно зрозуміла і проста робота з табличними БД, вся сила мови JavaScript разом з орієнтацією на використання мобільних пристроїв — вкрай привабливі риси App Lab.
Спробуємо коротко проаналізувати лише «офіційні» бібліотеки блоків візуального режиму програмування App Lab (а, кажучи по секрету, інші можливості повноцінного JavaScript вам ніхто не скасовує та не забороняє використовувати!)
У «рекомендованому» наборі зараз вісім бібліотек:
Бібліотека «UI controls» забезпечує роботу інтерфейсу додатку, програмне створення його елементів, настройку їх властивостей і програмну обробку подій, пов'язаних з ними. Також, тут знаходяться команди роботи з файлами зображень і обробки звуків, які використовуються в додатку. Це найбільша за кількістю блоків бібліотека App Lab.
Бібліотека «Data», напевно, найпотужніша за можливостями з усіх бібліотек Web-середовища. Чого тільки варта команда setWebRequest, що дозволяє використовувати запити до API Google, Yahoo, Вікіпедії і ряду інших ресурсів? Саме команди цієї бібліотеки забезпечують роботу з таблицями і інтерпретацію їх даних у вигляді графіків.
Бібліотека «Сontrol» містить блоки структур циклів, умовних операторів і блоків обробки інтервалів часу, а бібліотека «Variable» — блоки створення і модифікації змінних, текстових рядків, масивів і записів.
Бібліотеки «Сanvas» і «Turtle» призначені для програмного малювання. Якщо перша містить команди для роботи з однойменної структурою з HTML, растровим холстом-«canvas», який може бути використано для відображення діаграм, ігрової графіки або зображень, то друга включає в себе блоки засобів «черепашачої графіки», добре знайомої тим, хто вивчав мову програмування Лого.
Математична бібліотека «Math» досить «бідна» — там знаходяться блоки арифметичних операцій, логічних конструкцій і функції генерації псевдовипадкового числа, округлення, модулю, мінімуму і максимуму. Але ще раз нагадаємо, що ніхто не відміняв інші можливості JavaScript в невізуальному режимі...
Завершує огляд бібліотека «Functions» — незамінний помічник при створенні різних користувацьких функцій.
Як відбувається публікація проекту на App Lab?
Кнопку «Поделится» дає можливість отримати посилання на нього, відправити її по телефону (на жаль, поки лише на номер з США), опублікувати в Facebook або Tweeter, вставити в вигляді фрейму в свій Web-проект.
При цьому існує можливість закрити код вашого проекту від користувачів. Відзначимо, що App Lab, на відміну від інших продуктів візуального програмування Сode.org, не має галереї користувацьких робіт. З чим це пов'язано — незрозуміло, але однозначно позбавляє співтовариство користувачів Web-середовища можливості бути мотивованими та натхненними ідеями та методами робіт колег (що прекрасно реалізовано в тому ж співтоваристві користувачів Scratch).
Відкривши проект по посиланню в браузері, ви отримаєте можливість працювати з ним як з мобільного додатка, так і зі стаціонарного комп'ютера
Де можливо подивитися приклади проектів на AppLab?
Найпростіший арканоід https://goo.gl/eVbfS1
________________________________________________________________
«Малювання квітки»
(автор — Артем Чорнобровкін) https://goo.gl/YaDvJp
________________________________________________________________
«Малювання кота» (автор — Ксенія Булахова) https://goo.gl/1ZFjXg
________________________________________________________________
Побудівник графіків https://goo.gl/6B2tMt
________________________________________________________________
Гра «Red&Blue» https://goo.gl/95Ajl8
________________________________________________________________
Гра «Pockemon Hunter» https://goo.gl/Jfy0mi
________________________________________________________________
Гра «Bee Dan» https://goo.gl/fFYEUm
________________________________________________________________
«Визерунок»
(автор — Андрій Соловйов) https://goo.gl/2PMXNc
________________________________________________________________
Гра «Колобок» https://goo.gl/QJbU0o
________________________________________________________________
Найпростіший калькулятор https://goo.gl/rPoug0
________________________________________________________________
«Три виміри» https://goo.gl/B9lDAZ
________________________________________________________________
Часи (цифрові й аналогові) https://goo.gl/QsOXIv
________________________________________________________________
Розрахунок біоритмів https://goo.gl/sHdMXe
________________________________________________________________
Діафільм «2099» (автор — Марія Кебап, робота отримала диплом та медаль 2-го Міжнародного конкурсу мультиплікації та діафільмів у Білорусі) https://goo.gl/8yjAzP
________________________________________________________________
Діафільм «Дивний дзвін» (автор — Ганна Ткаченко) https://goo.gl/mQcBMa
________________________________________________________________
Обробник зображень «Grayscale» https://goo.gl/K45K4i
________________________________________________________________
«Математика та краса-1» (автор — Андрій Соловйов) https://goo.gl/7rXifE
________________________________________________________________
«Математика та краса-2» (автор — Андрій Соловйов) https://goo.gl/Tp2cQ1
________________________________________________________________
«Хрестики-нулики» (варіант «людина-людина») https://goo.gl/5mGIfL
________________________________________________________________
Гра «RGB game» (у ній необхідно за найменшу кількість кроків вгадати RGB-код випадкового кольору) https://goo.gl/jyuWVR
________________________________________________________________
«Відстані і маси Сонячної системи» https://goo.gl/5EMprQ
________________________________________________________________
«Відмітки в журналі» https://goo.gl/e2OeYl
________________________________________________________________
Приклади реалізації роботи функцій бібліотеки «DELTA» (автор — Михайло Лісовський, бібліотека є частиною проекту, який зайняв ІІІ місце на Чемпіонаті України з проектних технологій «ЕкоСофт—2017»)
https://goo.gl/88fi4k
https://goo.gl/mekZMi
https://goo.gl/O5kkf4
https://goo.gl/d0rXP2 https://goo.gl/aiC2bO
https://goo.gl/7j6Aea
________________________________________________________________
Ви можете подивитись на сайті о криптографії (http://codes.od.ua) Микити Аніщенко, де є кілька прикладів роботи як класичних, так і авторських алгоритмів шифрування, реалізованих на App Lab. Цей сайт також зайняв ІІІ місце на Чемпіонаті України з проектних технологій «ЕкоСофт—2017».
Всі зазначені вище приклади - навчальні завдання і творчі роботи учнів автора із загальноосвітньої школи № 65 I-III ступенів Одеської міської ради Одеської області.
Які перспективи у AppLab надалі?
Проект неймовірно вдало розвивається, серед команд текстового режиму вже є функції, яких ще немає в блоках візуальних бібліотек, але які чітко вказують на те, що користувачам App Lab незабаром буде доступна ще більша кількість можливостей, які наблизять їх проекти до повноцінних мобільних багатокористувацькіх додатків.
У App Lab усе тільки починається!
Материал подготовлен для издания "Информатика" (июль 2017)
