Веб-середовище візуального програмування 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» для програмного малювання
• текстових областей
• графіків,
• бігунків (слайдерів).
Кожен елемент налаштовується за допомогою власної сторінки зміни властивостей. На сторінці подій, притаманних цьому елементу інтерфейсу, можна ініціювати початок створення функції їх обробки,.
Другий режим ініціює кнопка «Код» — це безпосереднє прог