© 2017—2024 KozhinDev
Контакты
+7 (950) 973—73—40По вопросам маркетинга и PR:
+7 (923) 284—68—87По вопросам HR:
+7 (903) 917—83—11Край Родной: Моя Москва
01.04.2023По настоящее время
Разработка обучающего сервиса с личными кабинетами для первоклассников Москвы
Технологии
Nest.js, PostgreSQL, Steroids/nest
React.js, Redux, Functional components, Steroids
1000
часов разработки05
специалистов в команде на проектКраеведение — важная составляющая воспитания патриотизма в подрастающем поколении, взращивания любви к своей малой родине. Уже повеяло чем‑то пафосно‑скучным, как речь завуча на линейке? Очень зря! Разработали крутой интерактивный портал, который способен увлечь даже самых придирчивых современных детей, и рассказываем, как это было.
Издательство АСТ‑Пресс разработало книгу для уроков краеведения в первых классах московских школ: не обычный учебник, а красочное пособие, через которое ребенок проходит вместе с героями — «Моя Москва, горжусь тобой!». Это такие же первоклассники, как он — мальчики и девочки, которые изучают историю и культуру своей малой родины, с ними легко себя ассоциировать, сопереживать и включаться в учебный процесс. Но современные школьники «избалованы» технологиями: зачастую им неинтересно просто читать, и для вовлечения нужно использовать разные способы. Так, создатели книги решили, что здорово будет, если она «поселится» в смартфонах детей, оживет и станет интерактивной. Страницы учебника нужно было сопроводить QR‑кодами, которые ведут на портал, где можно получить новые впечатления — посмотреть видео о приключениях героев, прослушать аудиоверсию главы учебника, проверить свои знания с помощью онлайн‑тестов и других заданий.
Задача
Представители издательства обратились к нам, чтобы мы разработали портал, который «оживит» пособие и будет интересен школьникам. Нужно было не только разместить аудиоверсию учебника, видеоматериалы и 3D‑модели, но и реализовать механику выполнения различных заданий и тестов, созданных детскими методологами — например, соединения изображений и названий линиями, выбор правильного ответа. Для портала творческий руководитель проекта разработал мастер‑классы — пошаговые инструкции для тематических поделок: самостоятельно или с помощью родителей дети собирают, например, макет московского трамвая, и загружают фото в свой профиль. От нас требовалось разработать личные кабинеты для учеников и учителей с разным функционалом, чтобы педагоги могли проверять творческие работы детей, для авторизации нужна была интеграция с сервисом МЭШ — «Московская электронная школа».
Решение
К разработке мы приступили в начале мая 2023 года, и первая сложность заключалась в том, что показать прототип портала нужно было уже в конце мая — чтобы заручиться поддержкой мэра Москвы Сергея Собянина. Дизайн материалов и самого портала создавали сторонние команды, и мы были на связи с ними. Первый показ прошел успешно: мэр одобрил проект, и мы продолжили работу.
QR-коды на страницах бумажного учебника для перехода в расширенную онлайн-версию
Для перехода на портал на страницах бумажного учебника размещены QR‑коды. С помощью телефона школьник может отсканировать любой из них и перейти на соответствующую страницу сервиса. Там он увидит интерактивные материалы по теме урока: видео, аудио, тесты. Например, если ребенок захочет больше узнать о кузнецах в древней Москве, то при сканировании QR‑кода он попадет на страницу с видеороликом, где герои книги, такие же школьники как он, попадают в прошлое и заходят в мастерскую кузнеца.
Интеграция с МЭШ
Сервис условно делится на публичную и приватную части. Публичную можно увидеть, просто наведя камеру на QR‑код в бумажном учебнике. В ней представлены:
46 глав онлайн‑учебника «Моя Москва, горжусь тобой!» в ограниченном режиме — доступно только чтение текста на странице;
19 тематических мастер‑классов также в ограниченном формате — можно только читать текст и просматривать изображения на странице.
Все остальные разделы и функции находятся в приватной части, доступной только после входа в учетную запись. Для авторизации на портале необходимо быть зарегистрированным в сервисе «Московская электронная школа». Изначально рассматривали вариант прямой регистрации на портале, но в итоге от этого отказались
После входа пользователь получает доступ ко всем материалам портала:
раздел «Книга» — электронное оглавление учебника, позволяет перейти на 46 глав с полноценным контентом в каждой главе;
раздел «Аудиокнига» — 45 озвученных глав учебника, собранных на одной странице в виде отдельных аудио‑дорожек;
раздел «Проекты» — творческие мастер‑классы, которые учащиеся выполняют по мере знакомства с материалом учебника;
раздел «Задания» — интерактивные онлайн‑задания и игры, тематически связанные с содержанием глав, помогающие закрепить усвоенные знания;
раздел «Словарь» — онлайн‑словарь, расшифровывающий значения незнакомых для детей терминов и имен деятелей, которые упоминаются в главах;
раздел «Профиль» — раздел для просмотра и редактирования информации о пользователе, а также для выполнения иных функций, которые отличаются для разных групп пользователей.
Мы разделили функционал личных кабинетов для ученика и учителя и настроили интеграцию с МЭШ. Ученик может просматривать все материалы, проходить тесты, загружать фотографии творческих работ. Учитель видит список учеников своего класса, может заходить в их профили, проверять выполненные задания. Также сам учебник мы разместили в библиотеке МЭШ. Вход можно осуществить как находясь на портале, так и из сервиса электронной школы — для этого разработаны разные сценарии.
Механика разных тестовых задач
На портале представлены разные игровые задания: например, в некоторых нужно составить картинку из нескольких компонентов, в других — соединить изображения и понятия. На решение этой задачи ушло много времени, мы плотно общались с командой дизайнеров, чтобы реализовать их качественно.
В итоге раздел «Задания» содержит все задания и игры онлайн‑учебника, сгруппированные по главам. Ученик может открыть и выполнить любое задание, когда находится в разделе:
тесты — нужно сделать единственный или множественный выбор, выбрать между «да» и «нет», решить ребус, дополнить предложение словами;
пазлы — нужно собрать мозаику из разрозненных элементов;
игры — нужно соединить элементы, расставить элементы в верном порядке, перетащить слоги или буквы на нужные места;
кроссворды — нужно вставить верные слова в клетки кроссворда;
другие задания — нужно зачеркнуть буквы, разгадать филворд, расшифровать и вписать слово.
Анимированный «живой» учебник
Сложной задачей было добавление анимации на страницы онлайн учебника. Над этим мы работали вместе с двумя другими командами, и в результате добились «оживания» книги. Кроме приключенческих видеороликов на портале реализованы медиа‑сцены в 3D‑формате, анимированные развороты. В исходном состоянии пользователь видит текст и иллюстрации главы, в точности такие же, как в печатном пособии. Но если кликнуть по нему мышью, включается анимация: начинают проигрываться фоновые звуки, отдельные элементы сцены приходят в движение. Если кликать персонажей, то можно услышать их реплики. Также пользователь может сменить вид сцены, например, изменить время года. Такие сцены можно развернуть на весь экран, а также закрыть, вернувшись к 2D‑странице.
Что в итоге
В результате мы получили красочный и разнообразный учебный портал, который с помощью различных игровых и учебных методик привлекает и удерживает интерес ребенка. На сайте «Моя Москва» можно:
Изучить интерактивный учебник по краеведению, в котором текст сопровожден звуком, анимацией — вместе с героями книги, школьниками Машей, Настей, Русланом, Гошей и Даниилом, ребята погружаются в разные периоды жизни Москвы;
Прослушать аудиоверсию своего бумажного учебника — материал разделен на короткие по времени главы с обозначенными темами, чтобы школьнику легче было найти нужный фрагмент;
Ознакомиться с понятиями из разных эпох с помощью иллюстрированного словаря — например, там можно найти страницы о гербе и флаге, узнать, что такое ладья или электробус;
Пройти тестовые задания по изученному материалу — короткие вопросы с вариантами ответов и игровые задачки помогают закрепить пройденный материал;
Создать собственный проект по пошаговой инструкции, например, макет Боровицкого холма из пенопласта и других материалов или огород древних жителей москвы из цветной бумаги. Все проекты разделены на группы согласно хронологии — первые поселения и деревянный Кремль, белокаменный Кремль, современный город. Также в отдельные разделы вынесены проекты, посвященные зиме в древней Москве и различным ремеслам.
Развитие проекта
Вскоре после старта работ над порталом для московских школьников, издательство АСТ‑Пресс представило аналогичное пособие для другого региона — Республики Дагестан. Поэтому мы параллельно начали создавать сайт для дагестанских школьников. Пособия для каждого региона уникальны и составлены в соответствии с особенностями истории и традиций. Дагестанские первоклассники «путешествуют» по страницам книги и портала вместе с маленькими жителями республики, такими же, как они сами — с разными характерами и интересами. Мы «перенесли» их в онлайн‑версию, сделали повествование интерактивным, более интересным для младших школьников. Московским и дагестанским детям легко ассоциировать себя с персонажами, похожими на них, сопереживать им и включаться в учебный процесс.
Дизайн, разработанный сторонними специалистами, отличается для Москвы и Дагестана — он учитывает особенности детского восприятия и отражает культуру региона. Пользоваться порталами можно с помощью компьютера и смартфона.
В перспективе мы будем разрабатывать аналогичные учебные платформы и для других регионов, например, для школьников Ямала.
Конкурсы
Сейчас мы создаем на портале «Моя Москва, горжусь тобой!» модуль для конкурса ко Дню победы. В нем московские школьники смогут загрузить фото своих тематических работ до определенной даты, чтобы после их просмотрело конкурсное жюри. Работы победителей поучаствуют в оффлайн‑выставке во время праздника.
В будущем этот модуль необходимо расширить, создав на каждой из региональных платформ раздел с периодическими конкурсами. Эти разделы, как и порталы, будут независимы друг от друга — дети из Дагестана будут участвовать в своих мероприятиях, а маленькие москвичи — в своих.
Результаты
Разработанный нами портал «Моя Москва» представлен мэру Москвы — Сергею Собянину. Он высоко оценил проект, и с 1 сентября 2023 года сервис был запущен. В течение месяца порталом начали пользоваться 35 московских школ. Также мы разработали аналогичный портал для школьников из Республики Дагестан, и в сентябре они также приступили к изучению местной природы, истории, традиций с помощью интерактивного пособия.
Портал «Моя Москва» предполагает регистрацию 130 000 учетных записей учителей и учеников. Позже мы добавим разделы с тематическими конкурсами для каждого региона, чтобы дети могли проявлять свои творческие способности и участвовать в офлайн‑мероприятиях. Также постепенно география проекта «Край родной» будет расширяться, обучающие платформы будут запускаться в разных частях нашей страны.
Свяжитесь с нами