Как научить школьников кодить

Все школьники кодят — каждый год во всех школах страны проходит акция «Час кода». В этом году тренажер, который прошли 10 миллионов детей, разработали в Кодвардс в сотрудничестве с традиционными партнерами акции в России ZeptoLab, «Лабораторией Касперского» и Майкрософт. Ниже — история о том, как заинтересовать ребенка программированием, сделать интерфейс, понятный детям от 6 до 17 лет, и сервер, который выдержит нагрузки и атаки продвинутых восьмиклассников.

Одна из задач «Часа кода» — заинтересовать школьников и показать, что программирование и IT — не про ботаников и снеговиков в Excel. Тренажер должен быть одновременно увлекательным и похожим на рабочее пространство разработчиков. Поэтому основой тренажера стала игра, где дети могут быстро освоить базовые команды и увидеть результаты своей работы.

"Час кода" рассказывает, что программирование — это доступный инструмент и он не ограничивается только компьютерами, а используется в промышленности, медицине, энергетике. Самый простой способ показать, как это работает — дать детям возможность самим запрограммировать персонажа.
Галина Денина, руководитель проекта

Традиционный партнер акции ZeptoLab предоставила персонажей своей игры C.A.T.S., в оригинальном сюжете которой котики собирают и бесконечно улучшают боевых роботов для победы в сражениях. Сражения нам не подходили — сражаться детей могут научить и на других уроках (физкультуре или трудах, например), а Мультиплеер долго и сложно разрабатывать, да и на полноценную работу с ним одного урока явно недостаточно — тут каждый должен программировать, а не размазать в FIFA Гошана из параллельного.

Поэтому мы придумали новый сюжет и назначили главной героиней кошечку Элси, которая решила победить в Олимпиаде роботов. Главным преимуществом Элси в борьбе стало как раз участие ребенка — по легенде живой пилот, управляющий роботом, помогает быстрее обучить искусственный интеллект. Команде предстояло собрать необходимое оборудование, установить его на заводе и протестировать на полигоне. Для тренажера мы продумали 3 локации и 14 челленджей разного уровня сложности.

Главной сложностью при проектировании интерфейса было то, что пользоваться им должно быть легко и интересно и первоклашкам и ученикам старших классов, при том что уровень подготовки даже в одном классе может отличаться. К тому же, в каких-то школах детям мог подсказывать учитель информатики, а где-то весь процесс они осваивали сами. Изначально дизайн для акции делался на основе решений, разработанных для актуальной на тот момент версии платформы Кодвардса, но в процессе решили опробовать новую, которую только готовили к внедрению в основной продукт. Вот так смело бета-тест апдейта мы возложили на школьников со всей страны. Ключевым отличием был переезд главных “управляющих” кнопок на игровое поле. Нам важно было удержать внимание детей и вовремя переключать их фокус с панели, где пишется код, на игровое поле. И не забыть, что мониторы в классах информатики могут быть очень разными. Сам код, написанный детьми, напоминает тот, который они, возможно, будут писать в будущем. Мы посмотрели, как выглядит интерфейс для написания кода у наших разработчиков iOS и Android, какие цвета используются в среде разработки, и перенесли в тренажер, сделав их чуть более детскими. Черный фон для кода также выбран неслучайно — так меньше нагрузка на глаза.
Катя Михайлова, дизайнер

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

Важно, что мы не ведем пользователя через уровень, показывая, что ему делать. Мы объясняем значение каждого действия, чтобы он освоился и в дальнейшем осознанно его использовал. Так, первое, что ребенок видит на уровне, это подсказка: «Выбери, кто будет выполнять действи». Он нажимает на соответствующую кнопку, следом появляется новая подсказка: «А теперь выбери, что робот будет делать», «теперь запусти программу». По мере появления новых команд для управления объектами появляются и новые подсказки.
Александр Седнави, руководитель разработки

Язык, на котором программируют дети в «Часе кода», содержит только объекты, методы и ключевые слова. Команды в редакторе кода набираются построчно по формуле «объект (кто/что должен делать?) — метод (что именно делать?) — аргумент (как делать?)».

Для каждого из слагаемых кода в интерфейсе есть соответствующая кнопка, связанная с другими составляющими формулы. То есть написать команду неправильно, например, указав 2 объекта или применить сразу 2 метода, нельзя. Такая модель помогает сразу заложить правильную модель поведения и избежать ошибок в будущем.

Сами мы писали бэкенд тренажера на Go и верстали фронт на JS, хотя изначально все работало на Python. Увидев, что серверу с трудом дается запланированное количество обращений в секунду, ребята за ночь переписали всё с Python на Go, и по итогам тестирования сервер держал в три раза больше запросов, чем было запланировано.

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

Мы предусмотрели защиту, чтобы даже самый продвинутый старшеклассник не смог взломать тренажер и сайт, а также защитили систему от DDoS-атак — подозрительные источники автоматически отключались.

За время акции через тренажер прошли 10 миллионов ребят со всей страны — и система отработала без сбоев.

Перед запуском мы протестировали каждый из 14 уровней: сначала пользователи Кодвардса, а потом в ходе закрытого бета-тестирования тренажер до старта акции увидели несколько десятков детей в заданных возрастных категориях. После прохождения тренажера старшие школьники и родители младших заполнили анкету — и это также помогло нам устранить последние баги перед боем.

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