Недавно я начал возиться с новым продуктом от Code.org под названием AppLab. AppLab - это веб-среда программирования, которая позволяет студентам легко создавать короткие компьютерные программы и делиться ими.

Подобно Scratch и Snap, он имеет визуальный блочный язык программирования, который позволяет студентам создавать программы с помощью интерфейса перетаскивания. Уникальность в AppLab заключается в том, что я могу переключиться в текстовый режим и начать кодирование на JavaScript.

Текстовый режим

При обучении информатике с использованием блочного языка некоторые студенты неизбежно проявляют интерес к текстовым языкам. Через месяц или два после прохождения курса многие продвинутые студенты спросят что-то вроде Когда мы собираемся изучать настоящее программирование?. AppLab дает ответ на этот вопрос, позволяя студентам просматривать и редактировать базовый код JavaScript. Вот:

Возможность переключения между «блочным режимом» и «текстовым режимом» позволяет учащимся легко сравнивать блоки визуального программирования с их текстовыми эквивалентами. Обучая программированию на Python студента второго семестра, я часто обнаруживал, что проводил аналогии с тем, что он изучил в первом семестре в Snap. Например, «функция» с параметрами, которая возвращает значение в Python, аналогична настраиваемый блок с входами, который сообщает значение в Snap.

AppLab позволяет им увидеть это сравнение бок о бок, что упрощает переход к текстовому программированию. Я искренне думаю, что наш первый и второй семестр Введение в учебную программу CS можно было бы свернуть в один семестр для многих продвинутых студентов, использующих этот подход.

JavaScript

Мне нравится, что они выбрали JavaScript в качестве языка программирования. Это здорово по нескольким причинам:

  1. JavaScript - один из самых популярных языков программирования. Его использует не только каждый интерфейсный веб-разработчик - такие инструменты, как React Native, nodejs и Electron, делают JavaScript все более популярным выбором для мобильного, серверного и даже настольного программирования.
  2. Нечего устанавливать. Это позволяет учащимся легко писать код, который запускается в браузере, уже установленном на их школьном компьютере. Установка и настройка полноценной IDE, такой как Eclipse, может быть сложной задачей, особенно в заблокированной среде.
  3. Программами легко делиться. Поскольку все работает в браузере, программой можно поделиться с помощью простой ссылки. Студенты также могут продемонстрировать свои навыки JavaScript и поделиться фрагментами кода с помощью таких сайтов, как CodePen и JSFiddle.
  4. Его легче выучить, чем Java. Я лично считаю, что у Java слишком много накладных расходов, чтобы быть отличным языком для обучения программированию. Часто говорилось: самая простая программа «Hello World» на Java требует от вас использования классов, объяснения публичного и частного, разговора о том, что означает void, указания, куда идут фигурные скобки и точки с запятой, и использования статического метода, который принимает в качестве параметра массив аргументов. Приятно использовать язык, который позволяет вам начать с простого и использовать более продвинутые функции, когда это необходимо.
  5. Это может быть визуально, например Scratch. Студенты могут начать использовать простой JavaScript для рисования графики на холсте и создания игр. Или они могут использовать существующую библиотеку, такую ​​как processing.js, для создания расширенных визуализаций данных и цифрового искусства.

Написание программы с помощью AppLab

Режим дизайна

Перед кодированием приятно визуально увидеть, что вы создаете, будь то набросок на доске или инструмент для создания макетов, например Balsamiq Mockups. AppLab имеет встроенный режим дизайна, в котором вы можете перетаскивать виджеты на холст, представляющий ваш пользовательский интерфейс.

Кодовый режим

После того, как вы разработали свой пользовательский интерфейс, вы можете переключиться в режим кода, чтобы подключить некоторый код. Для ссылки на компоненты пользовательского интерфейса используются их идентификаторы, точно так же, как если бы вы ссылались на элемент в JavaScript. Ниже вы можете увидеть, как я прикрепил событие щелчка мыши к каждой кнопке и определил функцию обратного вызова для игры на инструменте:

Звуки

В AppLab есть менеджер активов, который позволяет загружать изображения и звуки для использования в вашей программе. Ниже вы можете увидеть, как мне удалось загрузить mp3-файлы для воспроизведения при использовании UI-элемента playSound ():

Анимация

Анимация может быть легко достигнута с помощью блока setTimeout (), который позволяет вам определить функцию, которая выполняется по истечении определенного количества миллисекунд. Ниже я сделаю кнопку пульсирующей, увеличив ее размер и установив для фона другой цвет. По истечении 100 миллисекунд выполняется функция обратного вызова setTimeout (), которая возвращает компонент пользовательского интерфейса к его исходному размеру и цвету:

Совместное использование

Программы легко доступны с помощью кнопки «Поделиться» в верхней части программы. При этом создается ссылка, которую можно скопировать в буфер обмена, поделиться через социальные сети или отправить текстовое сообщение на мобильный телефон друга:

С помощью ссылки для общего доступа программы AppLab можно использовать на мобильных устройствах, что особенно полезно, когда у многих студентов есть смартфоны. AppLab позволяет им создавать собственные простые приложения, которыми могут пользоваться их друзья:

И многое, многое другое

AppLab имеет множество дополнительных встроенных функций, включая хранилище данных, виджет диаграмм, поддержку HTTP-запросов и многое другое. Я хотел бы написать здесь обо всех этих функциях, но этот пост уже получился длинноватым. Я расскажу о других функциях AppLab в будущем руководстве, так что следите за этим блогом, если хотите услышать больше. А пока вы можете посмотреть это видео на YouTube, которое я создал, если хотите узнать, как создать полноценное приложение с помощью AppLab. Если вы просто хотите поиграть с окончательным приложением и отредактировать его исходный код, вы можете щелкнуть ссылку Remix ниже:



Мне очень нравится использовать этот новый инструмент программирования в классе, и я с нетерпением жду возможности увидеть, что с ним сделают студенты. Наслаждаться!