OGS-Main
/
ogs-site

Title: Обучение программированию 2019, или в поисках идеальной программы: Последовательность
Date: 2020-02-12 00:00
Category: News
Slug: teaching-to-program-2019
Lang: ru

![МУРОМ][screenshot]

В этой статье Михаил расскажет об обучении ребят программированию в 2019-м году.

**Предисловие**

Осенью 2019-го я в третий раз участвовал в курсе обучения ребят 10-15 лет программированию в качестве одного из преподавателей. Наши курсы проходили с середины сентября по середину декабря. Каждое занятие было в субботу с 10:00 до 12:00. Подробнее о структуре каждого урока и деталях создаваемой на курсе игры можно узнать из [статьи за 2018-й год][article-2018].

Лично для себя я выделил две основные цели, к которым иду с помощью курсов:

* создать удобный инструмент для создания простейших игр, понятный заинтересованным людям в возрасте от 10 лет;
* создать программу обучения программированию, позволяющая заинтересованным людям в возрасте от 10 лет самостоятельно делать простейшие игры.

**Игра**

![Игра][screenshot-game]

Простейшей игрой уже второй раз является игра на память, суть которой в поиске совпадающих элементов на игровом поле. Детально механика игры разобрана в [статье за 2018-й год][article-2018]. Поиграть в созданную на курсе игру вы можете прямо из браузера [по этой ссылке][game].

**Инструмент**

![Среда][screenshot-ide]

Основным критерием при создании инструмента для меня являлась **неприхотливость**, выражающаяся в следующем:

1. работает на любой операционной системе
    * разработка на Linux, macOS, Windows
    * воспроизведение результата на ПК, планшете и мобилках
1. не нужно ничего настраивать: открыл ссылку в браузере и начал работу
1. фактически не нужен интернет: можно работать локально, т.к. нет какого-либо сервера на стороне
1. результат доступен всем
    * если положить на GitHub Pages, то достаточно дать ссылку
    * если кинуть файл по Skype, то его можно открыть локально

Инструмент представляет из себя интегрированную среду разработки (ИСР), технически являющуюся одним файлом HTML. В этом единственном файле находится как ИСР, так и создаваемый результат (в данном случае игра на память). Инструмент в целом выглядит довольно стандартно:

1. слева находится панель кода выбранного модуля;
1. посередине - панель с кнопками перезапуска, сохранения результата и управления модулями;
1. в правом верхнем углу - результат;
1. в правом нижнем углу - список всех модулей: как относящихся к ИСР, так и созданных для игры.

Ввиду того, что у нас лишь один файл, нам нужно уметь запускать его в двух режимах:

1. воспроизведение
    * является режимом по умолчанию
    * достаточно просто открыть файл HTML
1. редактирование
    * доступно при добавлении символов `?0` в адресной строке

Временное хранение изменений осуществляется с помощью хранилища браузера (IndexedDB). Для сохранения изменений на постоянной основе, например, для публикации, необходимо скачать этот же самый файл с изменениями, нажав на соответствующую кнопку в средней панели.

**Первые занятия**

Для первого занятия я подготовил [80 строк кода на JavaScript][80-sloc], распечатал их и раздал каждому. Каждый ученик должен был набрать распечатанный код в инструменте. Набором кода я преследовал две цели:

1. узнать скорость набора текста учениками;
1. показать API инструмента.

Скорость набора оказалась чрезвычайно низкой: от примерно 14 символов в минуту (ученик успел набрать лишь половину) до примерно 39 символов в минуту. Сам я этот код набирал со скоростью 213 символов в минуту, поэтому от результатов учеников опешил: у меня появилось подозрение, что написать необходимые 300 строк игры за 1 час мы к концу курса не осилим физически.

На втором занятии мы в набранном ранее коде искали опечатки. Я встретил такие опечатки, которые ни у себя, ни у других коллег в жизни не находил. Тут я опешил второй раз: ученикам было чрезвычайно сложно найти опечатки, даже имея перед глазами распечатанный код. Страшно представить, что случилось бы с их психикой, если бы мы проходили [жесточайший тест по дизайну интерфейсов][cant-unsee] с вопросами вроде такого:

![Can't unsee][screenshot-cant-unsee]

С третьего по шестое занятия я уменьшал код вплоть до 10 строк, выдавал инструмент уже с частично набранным кодом, в котором нужно было найти и исправить ошибки. Ничего не помогало: ученики просто не воспринимали написанное, как-будто вместо чего-то членораздельного на экране видели иероглифы.

**Успешное седьмое занятие**

Прошло уже больше половины курса, а я не продвинулся ни на йоту. В очередной попытке найти хоть какой-то способ объяснить код игры я ещё раз переписал игру. На этот раз с модулем под интригующим названием `последовательность`.
К моему удивлению, на занятии был оглушительный успех: мы успели до "звонка", и ребята буквально горели энтузиазмом. Горели настолько, что устроили под конец занятия мозговой штурм о том, чего бы ещё добавить в появившуюся в ходе занятия игру:

![Мозговой штурм][screenshot-brainstorm]

Итак, давайте разберём это занятие подробнее.

**Доска**

Предыдущие занятия у нас строились в формате "преподаватели подходят к каждому ученику и помогают ему индивидуально". За шесть занятий мы - два преподавателя - осознали, что подход к каждому и погружение в частные опечатки/ошибки занимает времени больше, чем объяснение нового материала.

С седьмого занятия мы решили завязать всех учеников на доску, т.е. доска становилась центральным местом, где все мы творили, куда выходили и где писали. Компьютеры же превращались в место, куда ученики копируют содержимое доски. Практика показала, что доски в школах существуют не зря:

* все в школе привыкли получать информацию с доски, поэтому знали, куда смотреть;
* преподаватель работает с тем, что на доске, поэтому может объяснять сразу всем про одно, без углубления в индивидуальные ошибки;
* исправление индивидуальных ошибок происходит быстрее, т.к. большинство из них связаны с невнимательностью, т.е. опечатками при копировании с доски.

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

* ученик сам пишет, т.е. принимает решение и реализует его сам, учитель не записывает с его слов;
* ученик выходит к доске, т.е. двигается, что и полезно, и уменьшает количество необузданной энергии;
* ученику приходится запоминать код, чтобы записать его на доске;
* по тому, насколько легко и организованно ученик запомнил и записал код на доске, можно судить о его внимательности.

**Последовательность**

Модуль `последовательность` для игры на память выглядит следующим образом:

![Последовательность][screenshot-sequence]

Последовательность позволяет записать алгоритм в виде событий и реакций:

* события (`начало`, `выбор` и т.д.) расположены без отступа слева;
* реакции (`настроить ThreeJS`, `показать заставку`) расположены под соответствующими событиями с отступом.

Таким образом, при запуске игры (событие `начало`) мы настраиваем ThreeJS (реакция `настроить ThreeJS`), показываем заставку (реакция `показать заставку`) и т.д.

Занятие мы начинали с практически пустым модулем `последовательность`, присутствовали заранее лишь события без реакций:

![События][screenshot-events]

Эти же события я выписал на доске, оставив свободное место для записи реакций (замазано уже в GIMP для удобства иллюстрации):

![События на доске][screenshot-board-events]

Реакции мы искали в модуле `память.реакции`:

![Реакции][screenshot-reactions]

Каждая реакция модуля `последовательность` представлена в модуле `память.реакции` [функцией-конструктором][constructor-function]. Например, реакции `проверить окончание` однозначно соответствует функция `ПроверитьОкончание`:

```javascript
function ПроверитьОкончание(мир) // 1.
{
    мир.состояние["скрыто сфер"] = 0; // 2.
    this.исполнить = function() // 3.
    {
        мир.состояние["скрыто сфер"] += 2; // 4.
        var скрыто = мир.состояние["скрыто сфер"]; // 5.
        var сфер = мир.состояние["сферы"].length; // 6.
        if (сфер == скрыто) // 7.
        {
            мир.события["конец"].уведомить(); // 8.
        }
    };
}
```

Рассмотрим эту функцию подробнее:

1. Функция принимает на вход `мир` (словарь), используемый для общения функций друг с другом. `мир` состоит из трёх областей (ключей словаря):
    * `состояние` содержит переменные значения для обмена данными;
    * `настройки` содержат константные значения для настройки функций;
    * `события` содержат [издателей][pub-sub] для организации возможности подписать функции на события.
1. Экземпляр функции-конструктора создаётся оператором `new` при разборе модуля `последовательность`. Фактически всё, что не входит в метод `исполнить`, является телом конструктора. В частности, здесь мы создаём переменную `скрыто сфер` для учёта количества скрытых сфер.
1. Метод `исполнить` вызывается на каждое уведомление о событии.
1. Т.к. реакцию `проверить окончание` вызывают на событие сокрытия пары сфер, то счётчик `скрыто сфер` увеличиваем на `2`.
1. Просто задаём короткий псевдоним для счётчика `скрыто сфер`.
1. Получаем общее количество сфер на игровом поле.
1. Сравниваем количество скрытых сфер с общим их количеством.
1. Если они равны, т.е. все сферы скрыты, уведомляем о завершении игры с помощью события `конец`.

Поиск функций в модуле `память.реакции` ученики осуществляли по очереди:

* ученик ищет функцию в модуле (для упрощения я разделил функции символами `// // // //`);
* при нахождении озвучивает название функции и выходит к доске;
* на доске пишет название функции в общий список найденных функций (допускается пользоваться любыми средствами для запоминания названия, кроме подсказки преподавателя).

Это упражнение тоже позволяет проследить, кто внимательно следит за поиском и записью функции, а кто не может, когда подходит его очередь, найти свою функцию.

После выписывания названий всех функций на доску мы сопоставляли события с реакциями (функциями) схожим образом:

* преподаватель спрашивает, например, какие из функций подходят для события `начало`
* в случае верного ответа предлагает ученику
    * выйти к доске
    * написать реакцию под событием
    * вычёркнуть соответствующую функцию из списка найденных функций

После получения более-менее рабочего набора реакций для одного события можно предложить ученикам перенести реакции с доски в компьютеры. Таким образом мы заполняем реакции как на доске:

![Последовательность на доске][screenshot-board-sequence]
![Функции на доске][screenshot-board-functions]

так и в инструменте:

![Последовательность][screenshot-sequence]

**Следующие занятия**

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

```js
var кот = "9";
console.log(кот);
```

К сожалению, донести смысл этих двух строк кода так и не удалось: ребята путались в том, что такое переменная, а что такое значение. На этом проблемы не закончились: в новой функции нужно было работать с массивом, что оказалось просто невозможно объяснить. Мне ещё предстоит научиться объяснять переменные и массивы в ходе следующих курсов.

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

**Последнее занятие**

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

![Ретро][screenshot-retro]

Как ни странно, ребятам не нравилось писать на доске, несмотря на то, что она увеличивала эффективность изложения материала. С одной стороны, была "объёмная программа", а с другой - "одно и то же каждый урок", т.е. повторение пройденного ранее материала.

Раз в несколько занятий мы сохраняли результат на GitHub. Давалось это тоже нелегко: мы тратили до получаса на то, чтобы каждый вошёл в свою учётную запись. Как всегда, никто не помнил свой пароль (причём каждый раз) либо для подтверждения захода с нового устройства требовался доступ к почте, пароль от которой либо тоже никто не помнил, либо почта была родительская (ребята звонили родителям).

Так или иначе, у каждого ученика к концу курса осталась собственная версия игры с персональными заставкой и концовкой:

![Адрес][screenshot-addr]

**Выводы**

С одной стороны, были явные успехи:

* инструмент оказался неприхотливым и полностью работоспособным;
* концепция последовательностей была хорошо принята.

С другой стороны, были явные неудачи:

* инструмент предполагает навык работы с JavaScript, чем ученики не обладали;
* программа обучения буксовала практически все занятия.

Поэтому в ходе курса обучения программированию 2020-го года я попробую ответить на следующие вопросы:

1. Будет ли другой язык (Python, Lua) проще для объяснения и работы?
1. Можно ли скрыть работу с Git внутри инструмента, чтобы сохранять результат на [Git, не покидая инструмента][isomorphic-git]?
1. Можно ли сделать декларативный API по аналогии со [SwiftUI][swiftui]?
1. Как всё-таки объяснить переменные и массивы?

Ответы на эти и другие вопросы будут через год ;)

![Группа][screenshot-group]

[screenshot]: ../../images/2020-02-11_teaching-to-program-2019_screenshot.png

[article-2018]: teaching-kids-to-program.html
[screenshot-game]: ../../images/2020-02-11_teaching-to-program-2019_game.png
[game]: http://kornerr.ru/ekids2019
[screenshot-ide]: ../../images/2020-02-11_teaching-to-program-2019_ide.png
[80-sloc]: http://kornerr.ru/ekids19?техника
[cant-unsee]: https://cantunsee.space/
[screenshot-cant-unsee]: ../../images/2020-02-11_teaching-to-program-2019_cant-unsee.jpg
[screenshot-brainstorm]: ../../images/2020-02-11_teaching-to-program-2019_brainstorm.jpg
[screenshot-sequence]: ../../images/2020-02-11_teaching-to-program-2019_sequence.png
[screenshot-events]: ../../images/2020-02-11_teaching-to-program-2019_events.png
[screenshot-board-events]: ../../images/2020-02-11_teaching-to-program-2019_board-events.jpg
[screenshot-reactions]: ../../images/2020-02-11_teaching-to-program-2019_reactions.png
[constructor-function]: https://learn.javascript.ru/constructor-new
[screenshot-board-sequence]: ../../images/2020-02-11_teaching-to-program-2019_board-sequence.jpg
[screenshot-board-functions]: ../../images/2020-02-11_teaching-to-program-2019_board-functions.jpg
[screenshot-retro]: ../../images/2020-02-11_teaching-to-program-2019_retro.jpg
[screenshot-addr]: ../../images/2020-02-11_teaching-to-program-2019_addr.jpg
[screenshot-group]: ../../images/2020-02-11_teaching-to-program-2019_group.jpg
[isomorphic-git]: https://isomorphic-git.org/
[swiftui]: https://medium.com/someswift/swiftui-dsl-%D0%BD%D0%B0-%D0%BC%D0%B0%D0%BA%D1%81%D0%B8%D0%BC%D0%B0%D0%BB%D0%BA%D0%B0%D1%85-891741685efe
[pub-sub]: https://ru.wikipedia.org/wiki/%D0%98%D0%B7%D0%B4%D0%B0%D1%82%D0%B5%D0%BB%D1%8C-%D0%BF%D0%BE%D0%B4%D0%BF%D0%B8%D1%81%D1%87%D0%B8%D0%BA_(%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)