OGS-Main
/
ogs-site

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            #header
            {
                background: #2BA6E3;
                padding: 0.7em;
                text-align: left;
            }
            #header a
            {
                color: white;
                text-decoration: none;
                padding: 0.5em 1em 0.5em 1em;
            }

            #lang
            {
                float: right;
            }

            .news_item
            {
                background: #FFFFFF;
                width: 720px;
                padding: 1em;
                margin-top: 2em;
                margin-bottom: 2em;
                border: 1px solid #E0E0E0;
                text-align: left;
            }
            .news_item_contents
            {
                color: #444;
                line-height: 1.5em;
            }
            .news_item_date
            {
                margin-bottom: 2em;
                color: #aaa;
            }

            html
            {
                font-family: sans-serif;
            }
            body
            {
                background: #FAFAFA;
            }
            code, pre
            {
                font-family: monospace, serif;
                font-size: 1em;
                color: #7f0a0c;
            }
            /*
            figure
            {
                margin: 0px;
                padding: 0px;
            }
            */
            img
            {
                width: 720px;
            }
            a
            {
                color: #3A91CB;
                text-decoration: none;
            }

            table
            {
                border-collapse: collapse;
            }
            table, th, td
            {
                border: 1px solid #aaa;
                padding: 0.5em;
                margin-top: 0.5em;
                margin-bottom: 0.5em;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <strong id="title">Open Game Studio</strong>
            <a href="../../ru/news/index.html">Новости</a>
            <a href="../../ru/game/index.html">Игры</a>
            <a href="../../ru/tool/index.html">Инструменты</a>
            <a href="../../ru/page/about.html">О нас</a>
            <div id="lang">
                <a href="../../en/news/teaching-to-program-2019.html">EN</a>
                <a href="../../ru/news/teaching-to-program-2019.html">RU</a>
            </div>
        </div>
        <center>
            <h1>В новостях...</h1>
            <div class="news_item">
                <h2 class="news_item_title">
                    <a href="teaching-to-program-2019.html">Обучение программированию 2019, или в поисках идеальной программы: Последовательность</a>
                </h2>
                <p class="news_item_date">
                    2020-02-12 00:00
                </p>
                <div class="news_item_contents">
<p><img src="../../images/2020-02-11_teaching-to-program-2019_screenshot.png" alt="МУРОМ" /></p>
<p>В этой статье Михаил расскажет об обучении ребят программированию в 2019-м году.</p>
<p><strong>Предисловие</strong></p>
<p>Осенью 2019-го я в третий раз участвовал в курсе обучения ребят 10-15 лет программированию в качестве одного из преподавателей. Наши курсы проходили с середины сентября по середину декабря. Каждое занятие было в субботу с 10:00 до 12:00. Подробнее о структуре каждого урока и деталях создаваемой на курсе игры можно узнать из <a href="teaching-kids-to-program.html">статьи за 2018-й год</a>.</p>
<p>Лично для себя я выделил две основные цели, к которым иду с помощью курсов:</p>
<ul>
<li>создать удобный инструмент для создания простейших игр, понятный заинтересованным людям в возрасте от 10 лет;</li>
<li>создать программу обучения программированию, позволяющая заинтересованным людям в возрасте от 10 лет самостоятельно делать простейшие игры.</li>
</ul>
<p><strong>Игра</strong></p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_game.png" alt="Игра" /></p>
<p>Простейшей игрой уже второй раз является игра на память, суть которой в поиске совпадающих элементов на игровом поле. Детально механика игры разобрана в <a href="teaching-kids-to-program.html">статье за 2018-й год</a>. Поиграть в созданную на курсе игру вы можете прямо из браузера <a href="http://kornerr.ru/ekids2019">по этой ссылке</a>.</p>
<p><strong>Инструмент</strong></p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_ide.png" alt="Среда" /></p>
<p>Основным критерием при создании инструмента для меня являлась <strong>неприхотливость</strong>, выражающаяся в следующем:</p>
<ol>
<li>работает на любой операционной системе<ul>
<li>разработка на Linux, macOS, Windows</li>
<li>воспроизведение результата на ПК, планшете и мобилках</li></ul></li>
<li>не нужно ничего настраивать: открыл ссылку в браузере и начал работу</li>
<li>фактически не нужен интернет: можно работать локально, т.к. нет какого-либо сервера на стороне</li>
<li>результат доступен всем<ul>
<li>если положить на GitHub Pages, то достаточно дать ссылку</li>
<li>если кинуть файл по Skype, то его можно открыть локально</li></ul></li>
</ol>
<p>Инструмент представляет из себя интегрированную среду разработки (ИСР), технически являющуюся одним файлом HTML. В этом единственном файле находится как ИСР, так и создаваемый результат (в данном случае игра на память). Инструмент в целом выглядит довольно стандартно:</p>
<ol>
<li>слева находится панель кода выбранного модуля;</li>
<li>посередине - панель с кнопками перезапуска, сохранения результата и управления модулями;</li>
<li>в правом верхнем углу - результат;</li>
<li>в правом нижнем углу - список всех модулей: как относящихся к ИСР, так и созданных для игры.</li>
</ol>
<p>Ввиду того, что у нас лишь один файл, нам нужно уметь запускать его в двух режимах:</p>
<ol>
<li>воспроизведение<ul>
<li>является режимом по умолчанию</li>
<li>достаточно просто открыть файл HTML</li></ul></li>
<li>редактирование<ul>
<li>доступно при добавлении символов <code>?0</code> в адресной строке</li></ul></li>
</ol>
<p>Временное хранение изменений осуществляется с помощью хранилища браузера (IndexedDB). Для сохранения изменений на постоянной основе, например, для публикации, необходимо скачать этот же самый файл с изменениями, нажав на соответствующую кнопку в средней панели.</p>
<p><strong>Первые занятия</strong></p>
<p>Для первого занятия я подготовил <a href="http://kornerr.ru/ekids19?техника">80 строк кода на JavaScript</a>, распечатал их и раздал каждому. Каждый ученик должен был набрать распечатанный код в инструменте. Набором кода я преследовал две цели:</p>
<ol>
<li>узнать скорость набора текста учениками;</li>
<li>показать API инструмента.</li>
</ol>
<p>Скорость набора оказалась чрезвычайно низкой: от примерно 14 символов в минуту (ученик успел набрать лишь половину) до примерно 39 символов в минуту. Сам я этот код набирал со скоростью 213 символов в минуту, поэтому от результатов учеников опешил: у меня появилось подозрение, что написать необходимые 300 строк игры за 1 час мы к концу курса не осилим физически.</p>
<p>На втором занятии мы в набранном ранее коде искали опечатки. Я встретил такие опечатки, которые ни у себя, ни у других коллег в жизни не находил. Тут я опешил второй раз: ученикам было чрезвычайно сложно найти опечатки, даже имея перед глазами распечатанный код. Страшно представить, что случилось бы с их психикой, если бы мы проходили <a href="https://cantunsee.space/">жесточайший тест по дизайну интерфейсов</a> с вопросами вроде такого:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_cant-unsee.jpg" alt="Can't unsee" /></p>
<p>С третьего по шестое занятия я уменьшал код вплоть до 10 строк, выдавал инструмент уже с частично набранным кодом, в котором нужно было найти и исправить ошибки. Ничего не помогало: ученики просто не воспринимали написанное, как-будто вместо чего-то членораздельного на экране видели иероглифы.</p>
<p><strong>Успешное седьмое занятие</strong></p>
<p>Прошло уже больше половины курса, а я не продвинулся ни на йоту. В очередной попытке найти хоть какой-то способ объяснить код игры я ещё раз переписал игру. На этот раз с модулем под интригующим названием <code>последовательность</code>.
К моему удивлению, на занятии был оглушительный успех: мы успели до "звонка", и ребята буквально горели энтузиазмом. Горели настолько, что устроили под конец занятия мозговой штурм о том, чего бы ещё добавить в появившуюся в ходе занятия игру:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_brainstorm.jpg" alt="Мозговой штурм" /></p>
<p>Итак, давайте разберём это занятие подробнее.</p>
<p><strong>Доска</strong></p>
<p>Предыдущие занятия у нас строились в формате "преподаватели подходят к каждому ученику и помогают ему индивидуально". За шесть занятий мы - два преподавателя - осознали, что подход к каждому и погружение в частные опечатки/ошибки занимает времени больше, чем объяснение нового материала.</p>
<p>С седьмого занятия мы решили завязать всех учеников на доску, т.е. доска становилась центральным местом, где все мы творили, куда выходили и где писали. Компьютеры же превращались в место, куда ученики копируют содержимое доски. Практика показала, что доски в школах существуют не зря:</p>
<ul>
<li>все в школе привыкли получать информацию с доски, поэтому знали, куда смотреть;</li>
<li>преподаватель работает с тем, что на доске, поэтому может объяснять сразу всем про одно, без углубления в индивидуальные ошибки;</li>
<li>исправление индивидуальных ошибок происходит быстрее, т.к. большинство из них связаны с невнимательностью, т.е. опечатками при копировании с доски.</li>
</ul>
<p>Важно отметить, что на доске преподаватели работают совместно с учениками: преподаватель задаёт направление, но ученики сами выходят и пишут на ней ответы на вопросы, заданные преподавателем. Плюсы такого подхода следующие:</p>
<ul>
<li>ученик сам пишет, т.е. принимает решение и реализует его сам, учитель не записывает с его слов;</li>
<li>ученик выходит к доске, т.е. двигается, что и полезно, и уменьшает количество необузданной энергии;</li>
<li>ученику приходится запоминать код, чтобы записать его на доске;</li>
<li>по тому, насколько легко и организованно ученик запомнил и записал код на доске, можно судить о его внимательности.</li>
</ul>
<p><strong>Последовательность</strong></p>
<p>Модуль <code>последовательность</code> для игры на память выглядит следующим образом:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_sequence.png" alt="Последовательность" /></p>
<p>Последовательность позволяет записать алгоритм в виде событий и реакций:</p>
<ul>
<li>события (<code>начало</code>, <code>выбор</code> и т.д.) расположены без отступа слева;</li>
<li>реакции (<code>настроить ThreeJS</code>, <code>показать заставку</code>) расположены под соответствующими событиями с отступом.</li>
</ul>
<p>Таким образом, при запуске игры (событие <code>начало</code>) мы настраиваем ThreeJS (реакция <code>настроить ThreeJS</code>), показываем заставку (реакция <code>показать заставку</code>) и т.д.</p>
<p>Занятие мы начинали с практически пустым модулем <code>последовательность</code>, присутствовали заранее лишь события без реакций:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_events.png" alt="События" /></p>
<p>Эти же события я выписал на доске, оставив свободное место для записи реакций (замазано уже в GIMP для удобства иллюстрации):</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_board-events.jpg" alt="События на доске" /></p>
<p>Реакции мы искали в модуле <code>память.реакции</code>:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_reactions.png" alt="Реакции" /></p>
<p>Каждая реакция модуля <code>последовательность</code> представлена в модуле <code>память.реакции</code> <a href="https://learn.javascript.ru/constructor-new">функцией-конструктором</a>. Например, реакции <code>проверить окончание</code> однозначно соответствует функция <code>ПроверитьОкончание</code>:</p>
<pre><code class="javascript language-javascript">function ПроверитьОкончание(мир) // 1.
{
    мир.состояние["скрыто сфер"] = 0; // 2.
    this.исполнить = function() // 3.
    {
        мир.состояние["скрыто сфер"] += 2; // 4.
        var скрыто = мир.состояние["скрыто сфер"]; // 5.
        var сфер = мир.состояние["сферы"].length; // 6.
        if (сфер == скрыто) // 7.
        {
            мир.события["конец"].уведомить(); // 8.
        }
    };
}
</code></pre>
<p>Рассмотрим эту функцию подробнее:</p>
<ol>
<li>Функция принимает на вход <code>мир</code> (словарь), используемый для общения функций друг с другом. <code>мир</code> состоит из трёх областей (ключей словаря):<ul>
<li><code>состояние</code> содержит переменные значения для обмена данными;</li>
<li><code>настройки</code> содержат константные значения для настройки функций;</li>
<li><code>события</code> содержат <a href="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)">издателей</a> для организации возможности подписать функции на события.</li></ul></li>
<li>Экземпляр функции-конструктора создаётся оператором <code>new</code> при разборе модуля <code>последовательность</code>. Фактически всё, что не входит в метод <code>исполнить</code>, является телом конструктора. В частности, здесь мы создаём переменную <code>скрыто сфер</code> для учёта количества скрытых сфер.</li>
<li>Метод <code>исполнить</code> вызывается на каждое уведомление о событии.</li>
<li>Т.к. реакцию <code>проверить окончание</code> вызывают на событие сокрытия пары сфер, то счётчик <code>скрыто сфер</code> увеличиваем на <code>2</code>.</li>
<li>Просто задаём короткий псевдоним для счётчика <code>скрыто сфер</code>.</li>
<li>Получаем общее количество сфер на игровом поле.</li>
<li>Сравниваем количество скрытых сфер с общим их количеством.</li>
<li>Если они равны, т.е. все сферы скрыты, уведомляем о завершении игры с помощью события <code>конец</code>.</li>
</ol>
<p>Поиск функций в модуле <code>память.реакции</code> ученики осуществляли по очереди:</p>
<ul>
<li>ученик ищет функцию в модуле (для упрощения я разделил функции символами <code>// // // //</code>);</li>
<li>при нахождении озвучивает название функции и выходит к доске;</li>
<li>на доске пишет название функции в общий список найденных функций (допускается пользоваться любыми средствами для запоминания названия, кроме подсказки преподавателя).</li>
</ul>
<p>Это упражнение тоже позволяет проследить, кто внимательно следит за поиском и записью функции, а кто не может, когда подходит его очередь, найти свою функцию.</p>
<p>После выписывания названий всех функций на доску мы сопоставляли события с реакциями (функциями) схожим образом:</p>
<ul>
<li>преподаватель спрашивает, например, какие из функций подходят для события <code>начало</code></li>
<li>в случае верного ответа предлагает ученику<ul>
<li>выйти к доске</li>
<li>написать реакцию под событием</li>
<li>вычёркнуть соответствующую функцию из списка найденных функций</li></ul></li>
</ul>
<p>После получения более-менее рабочего набора реакций для одного события можно предложить ученикам перенести реакции с доски в компьютеры. Таким образом мы заполняем реакции как на доске:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_board-sequence.jpg" alt="Последовательность на доске" />
<img src="../../images/2020-02-11_teaching-to-program-2019_board-functions.jpg" alt="Функции на доске" /></p>
<p>так и в инструменте:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_sequence.png" alt="Последовательность" /></p>
<p><strong>Следующие занятия</strong></p>
<p>На следующих занятиях мы пытались создать новую реакцию и соответствующую ей функцию-конструктор. Сначала я пытался опять наскоками (целыми строками кода) вбить решение в головы, однако, существенных результатов это не дало. Поэтому пришлось разбирать в течение нескольких занятий примерно такой код:</p>
<pre><code class="js language-js">var кот = "9";
console.log(кот);
</code></pre>
<p>К сожалению, донести смысл этих двух строк кода так и не удалось: ребята путались в том, что такое переменная, а что такое значение. На этом проблемы не закончились: в новой функции нужно было работать с массивом, что оказалось просто невозможно объяснить. Мне ещё предстоит научиться объяснять переменные и массивы в ходе следующих курсов.</p>
<p>К концу занятий мы, конечно, функцию написали, но понимания и последующей веры в себя, выраженной в горящем энтузиазме, как это было на седьмом занятии, уже не было.</p>
<p><strong>Последнее занятие</strong></p>
<p>На последнем занятии вместо стандартного круга приветствия я попросил каждого (включая себя) высказаться, что понравилось в курсе (+), а что стоит изменить (-). Получилась следующая таблица:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_retro.jpg" alt="Ретро" /></p>
<p>Как ни странно, ребятам не нравилось писать на доске, несмотря на то, что она увеличивала эффективность изложения материала. С одной стороны, была "объёмная программа", а с другой - "одно и то же каждый урок", т.е. повторение пройденного ранее материала.</p>
<p>Раз в несколько занятий мы сохраняли результат на GitHub. Давалось это тоже нелегко: мы тратили до получаса на то, чтобы каждый вошёл в свою учётную запись. Как всегда, никто не помнил свой пароль (причём каждый раз) либо для подтверждения захода с нового устройства требовался доступ к почте, пароль от которой либо тоже никто не помнил, либо почта была родительская (ребята звонили родителям).</p>
<p>Так или иначе, у каждого ученика к концу курса осталась собственная версия игры с персональными заставкой и концовкой:</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_addr.jpg" alt="Адрес" /></p>
<p><strong>Выводы</strong></p>
<p>С одной стороны, были явные успехи:</p>
<ul>
<li>инструмент оказался неприхотливым и полностью работоспособным;</li>
<li>концепция последовательностей была хорошо принята.</li>
</ul>
<p>С другой стороны, были явные неудачи:</p>
<ul>
<li>инструмент предполагает навык работы с JavaScript, чем ученики не обладали;</li>
<li>программа обучения буксовала практически все занятия.</li>
</ul>
<p>Поэтому в ходе курса обучения программированию 2020-го года я попробую ответить на следующие вопросы:</p>
<ol>
<li>Будет ли другой язык (Python, Lua) проще для объяснения и работы?</li>
<li>Можно ли скрыть работу с Git внутри инструмента, чтобы сохранять результат на <a href="https://isomorphic-git.org/">Git, не покидая инструмента</a>?</li>
<li>Можно ли сделать декларативный API по аналогии со <a href="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">SwiftUI</a>?</li>
<li>Как всё-таки объяснить переменные и массивы?</li>
</ol>
<p>Ответы на эти и другие вопросы будут через год ;)</p>
<p><img src="../../images/2020-02-11_teaching-to-program-2019_group.jpg" alt="Группа" /></p>
                </div>
            </div>
            <div id="footer">
                Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
                из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
                Сайт размещён на <a href="https://pages.github.com">GitHub Pages</a>.
            </div>
        </center>
    </body>
</html>