Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

233 строки
28KB

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5. <link rel="stylesheet" href="../../style.css">
  6. </head>
  7. <body>
  8. <script data-goatcounter="https://services.opengamestudio.org:443/count" async src="//services.opengamestudio.org:443/count.js"></script>
  9. <div id="header">
  10. <div>
  11. <strong id="title">Open Game Studio</strong>
  12. <div id="lang">
  13. <a href="../../en/news/teaching-to-program-2019.html">EN</a>
  14. <a href="../../ru/news/teaching-to-program-2019.html">RU</a>
  15. </div>
  16. </div>
  17. <div class="header2">
  18. <div class="menu">
  19. <a href="../../ru/news/index.html">Новости</a>
  20. <a href="../../ru/game/index.html">Игры</a>
  21. <a href="../../ru/tool/index.html">Инструменты</a>
  22. <a href="../../ru/page/about.html">О нас</a>
  23. </div>
  24. <a class="discord" href="https://discord.gg/3A6THQabNf">
  25. <img src="../../images/discord.png"></img>
  26. </a>
  27. <div class="clear"></div>
  28. </div>
  29. </div>
  30. <h3 class="left_item_title">В новостях...</h3>
  31. <center>
  32. <div class="news_item">
  33. <h2 class="news_item_title">
  34. <a href="teaching-to-program-2019.html">Обучение программированию 2019, или в поисках идеальной программы: Последовательность</a>
  35. </h2>
  36. <p class="news_item_date">
  37. 2020-02-12 00:00
  38. </p>
  39. <div class="news_item_contents">
  40. <p><img src="../../images/2020-02-11_teaching-to-program-2019_screenshot.png" alt="МУРОМ" /></p>
  41. <p>В этой статье Михаил расскажет об обучении ребят программированию в 2019-м году.</p>
  42. <p><strong>Предисловие</strong></p>
  43. <p>Осенью 2019-го я в третий раз участвовал в курсе обучения ребят 10-15 лет программированию в качестве одного из преподавателей. Наши курсы проходили с середины сентября по середину декабря. Каждое занятие было в субботу с 10:00 до 12:00. Подробнее о структуре каждого урока и деталях создаваемой на курсе игры можно узнать из <a href="teaching-kids-to-program.html">статьи за 2018-й год</a>.</p>
  44. <p>Лично для себя я выделил две основные цели, к которым иду с помощью курсов:</p>
  45. <ul>
  46. <li>создать удобный инструмент для создания простейших игр, понятный заинтересованным людям в возрасте от 10 лет;</li>
  47. <li>создать программу обучения программированию, позволяющая заинтересованным людям в возрасте от 10 лет самостоятельно делать простейшие игры.</li>
  48. </ul>
  49. <p><strong>Игра</strong></p>
  50. <p><img src="../../images/2020-02-11_teaching-to-program-2019_game.png" alt="Игра" /></p>
  51. <p>Простейшей игрой уже второй раз является игра на память, суть которой в поиске совпадающих элементов на игровом поле. Детально механика игры разобрана в <a href="teaching-kids-to-program.html">статье за 2018-й год</a>. Поиграть в созданную на курсе игру вы можете прямо из браузера <a href="http://kornerr.ru/ekids2019">по этой ссылке</a>.</p>
  52. <p><strong>Инструмент</strong></p>
  53. <p><img src="../../images/2020-02-11_teaching-to-program-2019_ide.png" alt="Среда" /></p>
  54. <p>Основным критерием при создании инструмента для меня являлась <strong>неприхотливость</strong>, выражающаяся в следующем:</p>
  55. <ol>
  56. <li>работает на любой операционной системе<ul>
  57. <li>разработка на Linux, macOS, Windows</li>
  58. <li>воспроизведение результата на ПК, планшете и мобилках</li></ul></li>
  59. <li>не нужно ничего настраивать: открыл ссылку в браузере и начал работу</li>
  60. <li>фактически не нужен интернет: можно работать локально, т.к. нет какого-либо сервера на стороне</li>
  61. <li>результат доступен всем<ul>
  62. <li>если положить на GitHub Pages, то достаточно дать ссылку</li>
  63. <li>если кинуть файл по Skype, то его можно открыть локально</li></ul></li>
  64. </ol>
  65. <p>Инструмент представляет из себя интегрированную среду разработки (ИСР), технически являющуюся одним файлом HTML. В этом единственном файле находится как ИСР, так и создаваемый результат (в данном случае игра на память). Инструмент в целом выглядит довольно стандартно:</p>
  66. <ol>
  67. <li>слева находится панель кода выбранного модуля;</li>
  68. <li>посередине - панель с кнопками перезапуска, сохранения результата и управления модулями;</li>
  69. <li>в правом верхнем углу - результат;</li>
  70. <li>в правом нижнем углу - список всех модулей: как относящихся к ИСР, так и созданных для игры.</li>
  71. </ol>
  72. <p>Ввиду того, что у нас лишь один файл, нам нужно уметь запускать его в двух режимах:</p>
  73. <ol>
  74. <li>воспроизведение<ul>
  75. <li>является режимом по умолчанию</li>
  76. <li>достаточно просто открыть файл HTML</li></ul></li>
  77. <li>редактирование<ul>
  78. <li>доступно при добавлении символов <code>?0</code> в адресной строке</li></ul></li>
  79. </ol>
  80. <p>Временное хранение изменений осуществляется с помощью хранилища браузера (IndexedDB). Для сохранения изменений на постоянной основе, например, для публикации, необходимо скачать этот же самый файл с изменениями, нажав на соответствующую кнопку в средней панели.</p>
  81. <p><strong>Первые занятия</strong></p>
  82. <p>Для первого занятия я подготовил <a href="http://kornerr.ru/ekids19?техника">80 строк кода на JavaScript</a>, распечатал их и раздал каждому. Каждый ученик должен был набрать распечатанный код в инструменте. Набором кода я преследовал две цели:</p>
  83. <ol>
  84. <li>узнать скорость набора текста учениками;</li>
  85. <li>показать API инструмента.</li>
  86. </ol>
  87. <p>Скорость набора оказалась чрезвычайно низкой: от примерно 14 символов в минуту (ученик успел набрать лишь половину) до примерно 39 символов в минуту. Сам я этот код набирал со скоростью 213 символов в минуту, поэтому от результатов учеников опешил: у меня появилось подозрение, что написать необходимые 300 строк игры за 1 час мы к концу курса не осилим физически.</p>
  88. <p>На втором занятии мы в набранном ранее коде искали опечатки. Я встретил такие опечатки, которые ни у себя, ни у других коллег в жизни не находил. Тут я опешил второй раз: ученикам было чрезвычайно сложно найти опечатки, даже имея перед глазами распечатанный код. Страшно представить, что случилось бы с их психикой, если бы мы проходили <a href="https://cantunsee.space/">жесточайший тест по дизайну интерфейсов</a> с вопросами вроде такого:</p>
  89. <p><img src="../../images/2020-02-11_teaching-to-program-2019_cant-unsee.jpg" alt="Can't unsee" /></p>
  90. <p>С третьего по шестое занятия я уменьшал код вплоть до 10 строк, выдавал инструмент уже с частично набранным кодом, в котором нужно было найти и исправить ошибки. Ничего не помогало: ученики просто не воспринимали написанное, как-будто вместо чего-то членораздельного на экране видели иероглифы.</p>
  91. <p><strong>Успешное седьмое занятие</strong></p>
  92. <p>Прошло уже больше половины курса, а я не продвинулся ни на йоту. В очередной попытке найти хоть какой-то способ объяснить код игры я ещё раз переписал игру. На этот раз с модулем под интригующим названием <code>последовательность</code>.
  93. К моему удивлению, на занятии был оглушительный успех: мы успели до "звонка", и ребята буквально горели энтузиазмом. Горели настолько, что устроили под конец занятия мозговой штурм о том, чего бы ещё добавить в появившуюся в ходе занятия игру:</p>
  94. <p><img src="../../images/2020-02-11_teaching-to-program-2019_brainstorm.jpg" alt="Мозговой штурм" /></p>
  95. <p>Итак, давайте разберём это занятие подробнее.</p>
  96. <p><strong>Доска</strong></p>
  97. <p>Предыдущие занятия у нас строились в формате "преподаватели подходят к каждому ученику и помогают ему индивидуально". За шесть занятий мы - два преподавателя - осознали, что подход к каждому и погружение в частные опечатки/ошибки занимает времени больше, чем объяснение нового материала.</p>
  98. <p>С седьмого занятия мы решили завязать всех учеников на доску, т.е. доска становилась центральным местом, где все мы творили, куда выходили и где писали. Компьютеры же превращались в место, куда ученики копируют содержимое доски. Практика показала, что доски в школах существуют не зря:</p>
  99. <ul>
  100. <li>все в школе привыкли получать информацию с доски, поэтому знали, куда смотреть;</li>
  101. <li>преподаватель работает с тем, что на доске, поэтому может объяснять сразу всем про одно, без углубления в индивидуальные ошибки;</li>
  102. <li>исправление индивидуальных ошибок происходит быстрее, т.к. большинство из них связаны с невнимательностью, т.е. опечатками при копировании с доски.</li>
  103. </ul>
  104. <p>Важно отметить, что на доске преподаватели работают совместно с учениками: преподаватель задаёт направление, но ученики сами выходят и пишут на ней ответы на вопросы, заданные преподавателем. Плюсы такого подхода следующие:</p>
  105. <ul>
  106. <li>ученик сам пишет, т.е. принимает решение и реализует его сам, учитель не записывает с его слов;</li>
  107. <li>ученик выходит к доске, т.е. двигается, что и полезно, и уменьшает количество необузданной энергии;</li>
  108. <li>ученику приходится запоминать код, чтобы записать его на доске;</li>
  109. <li>по тому, насколько легко и организованно ученик запомнил и записал код на доске, можно судить о его внимательности.</li>
  110. </ul>
  111. <p><strong>Последовательность</strong></p>
  112. <p>Модуль <code>последовательность</code> для игры на память выглядит следующим образом:</p>
  113. <p><img src="../../images/2020-02-11_teaching-to-program-2019_sequence.png" alt="Последовательность" /></p>
  114. <p>Последовательность позволяет записать алгоритм в виде событий и реакций:</p>
  115. <ul>
  116. <li>события (<code>начало</code>, <code>выбор</code> и т.д.) расположены без отступа слева;</li>
  117. <li>реакции (<code>настроить ThreeJS</code>, <code>показать заставку</code>) расположены под соответствующими событиями с отступом.</li>
  118. </ul>
  119. <p>Таким образом, при запуске игры (событие <code>начало</code>) мы настраиваем ThreeJS (реакция <code>настроить ThreeJS</code>), показываем заставку (реакция <code>показать заставку</code>) и т.д.</p>
  120. <p>Занятие мы начинали с практически пустым модулем <code>последовательность</code>, присутствовали заранее лишь события без реакций:</p>
  121. <p><img src="../../images/2020-02-11_teaching-to-program-2019_events.png" alt="События" /></p>
  122. <p>Эти же события я выписал на доске, оставив свободное место для записи реакций (замазано уже в GIMP для удобства иллюстрации):</p>
  123. <p><img src="../../images/2020-02-11_teaching-to-program-2019_board-events.jpg" alt="События на доске" /></p>
  124. <p>Реакции мы искали в модуле <code>память.реакции</code>:</p>
  125. <p><img src="../../images/2020-02-11_teaching-to-program-2019_reactions.png" alt="Реакции" /></p>
  126. <p>Каждая реакция модуля <code>последовательность</code> представлена в модуле <code>память.реакции</code> <a href="https://learn.javascript.ru/constructor-new">функцией-конструктором</a>. Например, реакции <code>проверить окончание</code> однозначно соответствует функция <code>ПроверитьОкончание</code>:</p>
  127. <pre><code class="javascript language-javascript">function ПроверитьОкончание(мир) // 1.
  128. {
  129. мир.состояние["скрыто сфер"] = 0; // 2.
  130. this.исполнить = function() // 3.
  131. {
  132. мир.состояние["скрыто сфер"] += 2; // 4.
  133. var скрыто = мир.состояние["скрыто сфер"]; // 5.
  134. var сфер = мир.состояние["сферы"].length; // 6.
  135. if (сфер == скрыто) // 7.
  136. {
  137. мир.события["конец"].уведомить(); // 8.
  138. }
  139. };
  140. }
  141. </code></pre>
  142. <p>Рассмотрим эту функцию подробнее:</p>
  143. <ol>
  144. <li>Функция принимает на вход <code>мир</code> (словарь), используемый для общения функций друг с другом. <code>мир</code> состоит из трёх областей (ключей словаря):<ul>
  145. <li><code>состояние</code> содержит переменные значения для обмена данными;</li>
  146. <li><code>настройки</code> содержат константные значения для настройки функций;</li>
  147. <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>
  148. <li>Экземпляр функции-конструктора создаётся оператором <code>new</code> при разборе модуля <code>последовательность</code>. Фактически всё, что не входит в метод <code>исполнить</code>, является телом конструктора. В частности, здесь мы создаём переменную <code>скрыто сфер</code> для учёта количества скрытых сфер.</li>
  149. <li>Метод <code>исполнить</code> вызывается на каждое уведомление о событии.</li>
  150. <li>Т.к. реакцию <code>проверить окончание</code> вызывают на событие сокрытия пары сфер, то счётчик <code>скрыто сфер</code> увеличиваем на <code>2</code>.</li>
  151. <li>Просто задаём короткий псевдоним для счётчика <code>скрыто сфер</code>.</li>
  152. <li>Получаем общее количество сфер на игровом поле.</li>
  153. <li>Сравниваем количество скрытых сфер с общим их количеством.</li>
  154. <li>Если они равны, т.е. все сферы скрыты, уведомляем о завершении игры с помощью события <code>конец</code>.</li>
  155. </ol>
  156. <p>Поиск функций в модуле <code>память.реакции</code> ученики осуществляли по очереди:</p>
  157. <ul>
  158. <li>ученик ищет функцию в модуле (для упрощения я разделил функции символами <code>// // // //</code>);</li>
  159. <li>при нахождении озвучивает название функции и выходит к доске;</li>
  160. <li>на доске пишет название функции в общий список найденных функций (допускается пользоваться любыми средствами для запоминания названия, кроме подсказки преподавателя).</li>
  161. </ul>
  162. <p>Это упражнение тоже позволяет проследить, кто внимательно следит за поиском и записью функции, а кто не может, когда подходит его очередь, найти свою функцию.</p>
  163. <p>После выписывания названий всех функций на доску мы сопоставляли события с реакциями (функциями) схожим образом:</p>
  164. <ul>
  165. <li>преподаватель спрашивает, например, какие из функций подходят для события <code>начало</code></li>
  166. <li>в случае верного ответа предлагает ученику<ul>
  167. <li>выйти к доске</li>
  168. <li>написать реакцию под событием</li>
  169. <li>вычёркнуть соответствующую функцию из списка найденных функций</li></ul></li>
  170. </ul>
  171. <p>После получения более-менее рабочего набора реакций для одного события можно предложить ученикам перенести реакции с доски в компьютеры. Таким образом мы заполняем реакции как на доске:</p>
  172. <p><img src="../../images/2020-02-11_teaching-to-program-2019_board-sequence.jpg" alt="Последовательность на доске" />
  173. <img src="../../images/2020-02-11_teaching-to-program-2019_board-functions.jpg" alt="Функции на доске" /></p>
  174. <p>так и в инструменте:</p>
  175. <p><img src="../../images/2020-02-11_teaching-to-program-2019_sequence.png" alt="Последовательность" /></p>
  176. <p><strong>Следующие занятия</strong></p>
  177. <p>На следующих занятиях мы пытались создать новую реакцию и соответствующую ей функцию-конструктор. Сначала я пытался опять наскоками (целыми строками кода) вбить решение в головы, однако, существенных результатов это не дало. Поэтому пришлось разбирать в течение нескольких занятий примерно такой код:</p>
  178. <pre><code class="js language-js">var кот = "9";
  179. console.log(кот);
  180. </code></pre>
  181. <p>К сожалению, донести смысл этих двух строк кода так и не удалось: ребята путались в том, что такое переменная, а что такое значение. На этом проблемы не закончились: в новой функции нужно было работать с массивом, что оказалось просто невозможно объяснить. Мне ещё предстоит научиться объяснять переменные и массивы в ходе следующих курсов.</p>
  182. <p>К концу занятий мы, конечно, функцию написали, но понимания и последующей веры в себя, выраженной в горящем энтузиазме, как это было на седьмом занятии, уже не было.</p>
  183. <p><strong>Последнее занятие</strong></p>
  184. <p>На последнем занятии вместо стандартного круга приветствия я попросил каждого (включая себя) высказаться, что понравилось в курсе (+), а что стоит изменить (-). Получилась следующая таблица:</p>
  185. <p><img src="../../images/2020-02-11_teaching-to-program-2019_retro.jpg" alt="Ретро" /></p>
  186. <p>Как ни странно, ребятам не нравилось писать на доске, несмотря на то, что она увеличивала эффективность изложения материала. С одной стороны, была "объёмная программа", а с другой - "одно и то же каждый урок", т.е. повторение пройденного ранее материала.</p>
  187. <p>Раз в несколько занятий мы сохраняли результат на GitHub. Давалось это тоже нелегко: мы тратили до получаса на то, чтобы каждый вошёл в свою учётную запись. Как всегда, никто не помнил свой пароль (причём каждый раз) либо для подтверждения захода с нового устройства требовался доступ к почте, пароль от которой либо тоже никто не помнил, либо почта была родительская (ребята звонили родителям).</p>
  188. <p>Так или иначе, у каждого ученика к концу курса осталась собственная версия игры с персональными заставкой и концовкой:</p>
  189. <p><img src="../../images/2020-02-11_teaching-to-program-2019_addr.jpg" alt="Адрес" /></p>
  190. <p><strong>Выводы</strong></p>
  191. <p>С одной стороны, были явные успехи:</p>
  192. <ul>
  193. <li>инструмент оказался неприхотливым и полностью работоспособным;</li>
  194. <li>концепция последовательностей была хорошо принята.</li>
  195. </ul>
  196. <p>С другой стороны, были явные неудачи:</p>
  197. <ul>
  198. <li>инструмент предполагает навык работы с JavaScript, чем ученики не обладали;</li>
  199. <li>программа обучения буксовала практически все занятия.</li>
  200. </ul>
  201. <p>Поэтому в ходе курса обучения программированию 2020-го года я попробую ответить на следующие вопросы:</p>
  202. <ol>
  203. <li>Будет ли другой язык (Python, Lua) проще для объяснения и работы?</li>
  204. <li>Можно ли скрыть работу с Git внутри инструмента, чтобы сохранять результат на <a href="https://isomorphic-git.org/">Git, не покидая инструмента</a>?</li>
  205. <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>
  206. <li>Как всё-таки объяснить переменные и массивы?</li>
  207. </ol>
  208. <p>Ответы на эти и другие вопросы будут через год ;)</p>
  209. <p><img src="../../images/2020-02-11_teaching-to-program-2019_group.jpg" alt="Группа" /></p>
  210. </div>
  211. </div>
  212. <div id="disqus_thread"></div>
  213. <script>
  214. var disqus_config = function () {
  215. this.page.url = "https://opengamestudio.org/ru/news/teaching-to-program-2019.html";
  216. this.page.identifier = "teaching-to-program-2019.html";
  217. };
  218. (function() { // DON'T EDIT BELOW THIS LINE
  219. var d = document, s = d.createElement('script');
  220. s.src = 'https://opengamestudio.disqus.com/embed.js';
  221. s.setAttribute('data-timestamp', +new Date());
  222. (d.head || d.body).appendChild(s);
  223. })();
  224. </script>
  225. <noscript>Пожалуйста, включите JavaScript для просмотра <a href="https://disqus.com/?ref_noscript">комментариев на платформе Disqus.</a></noscript>
  226. <div id="footer">
  227. Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
  228. из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
  229. </div>
  230. </center>
  231. </body>
  232. </html>