Личный кабинет / Веб-сервисОбразование

Край Родной: Моя Москва

Срок проекта

01.04.2023По настоящее время

Разработка обучающего сервиса с личными кабинетами для первоклассников Москвы

Получить консультацию

Технологии

Backend

Nest.js, PostgreSQL, Steroids/nest

Frontend

React.js, Redux, Functional components, Steroids

1000

часов разработки

05

специалистов в команде на проект

Краеведение — важная составляющая воспитания патриотизма в подрастающем поколении, взращивания любви к своей малой родине. Уже повеяло чем‑то пафосно‑скучным, как речь завуча на линейке? Очень зря! Разработали крутой интерактивный портал, который способен увлечь даже самых придирчивых современных детей, и рассказываем, как это было.

div_ytp_cued_thumbnail_overlay_image.webp

Издательство АСТ‑Пресс разработало книгу для уроков краеведения в первых классах московских школ: не обычный учебник, а красочное пособие, через которое ребенок проходит вместе с героями — «Моя Москва, горжусь тобой!». Это такие же первоклассники, как он — мальчики и девочки, которые изучают историю и культуру своей малой родины, с ними легко себя ассоциировать, сопереживать и включаться в учебный процесс. Но современные школьники «избалованы» технологиями: зачастую им неинтересно просто читать, и для вовлечения нужно использовать разные способы. Так, создатели книги решили, что здорово будет, если она «поселится» в смартфонах детей, оживет и станет интерактивной. Страницы учебника нужно было сопроводить QR‑кодами, которые ведут на портал, где можно получить новые впечатления — посмотреть видео о приключениях героев, прослушать аудиоверсию главы учебника, проверить свои знания с помощью онлайн‑тестов и других заданий.

Задача

Представители издательства обратились к нам, чтобы мы разработали портал, который «оживит» пособие и будет интересен школьникам. Нужно было не только разместить аудиоверсию учебника, видеоматериалы и 3D‑модели, но и реализовать механику выполнения различных заданий и тестов, созданных детскими методологами — например, соединения изображений и названий линиями, выбор правильного ответа. Для портала творческий руководитель проекта разработал мастер‑классы — пошаговые инструкции для тематических поделок: самостоятельно или с помощью родителей дети собирают, например, макет московского трамвая, и загружают фото в свой профиль. От нас требовалось разработать личные кабинеты для учеников и учителей с разным функционалом, чтобы педагоги могли проверять творческие работы детей, для авторизации нужна была интеграция с сервисом МЭШ — «Московская электронная школа».

Решение

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

wda_1_1_png.webp

QR-коды на страницах бумажного учебника для перехода в расширенную онлайн-версию

Для перехода на портал на страницах бумажного учебника размещены QR‑коды. С помощью телефона школьник может отсканировать любой из них и перейти на соответствующую страницу сервиса. Там он увидит интерактивные материалы по теме урока: видео, аудио, тесты. Например, если ребенок захочет больше узнать о кузнецах в древней Москве, то при сканировании QR‑кода он попадет на страницу с видеороликом, где герои книги, такие же школьники как он, попадают в прошлое и заходят в мастерскую кузнеца.

image_235.webp

Интеграция с МЭШ

Сервис условно делится на публичную и приватную части. Публичную можно увидеть, просто наведя камеру на QR‑код в бумажном учебнике. В ней представлены:

  • 46 глав онлайн‑учебника «Моя Москва, горжусь тобой!» в ограниченном режиме — доступно только чтение текста на странице;

  • 19 тематических мастер‑классов также в ограниченном формате — можно только читать текст и просматривать изображения на странице.

Все остальные разделы и функции находятся в приватной части, доступной только после входа в учетную запись. Для авторизации на портале необходимо быть зарегистрированным в сервисе «Московская электронная школа». Изначально рассматривали вариант прямой регистрации на портале, но в итоге от этого отказались

После входа пользователь получает доступ ко всем материалам портала:

  • раздел «Книга» — электронное оглавление учебника, позволяет перейти на 46 глав с полноценным контентом в каждой главе;

  • раздел «Аудиокнига» — 45 озвученных глав учебника, собранных на одной странице в виде отдельных аудио‑дорожек;

  • раздел «Проекты» — творческие мастер‑классы, которые учащиеся выполняют по мере знакомства с материалом учебника;

  • раздел «Задания» — интерактивные онлайн‑задания и игры, тематически связанные с содержанием глав, помогающие закрепить усвоенные знания;

  • раздел «Словарь» — онлайн‑словарь, расшифровывающий значения незнакомых для детей терминов и имен деятелей, которые упоминаются в главах;

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

Мы разделили функционал личных кабинетов для ученика и учителя и настроили интеграцию с МЭШ. Ученик может просматривать все материалы, проходить тесты, загружать фотографии творческих работ. Учитель видит список учеников своего класса, может заходить в их профили, проверять выполненные задания. Также сам учебник мы разместили в библиотеке МЭШ. Вход можно осуществить как находясь на портале, так и из сервиса электронной школы — для этого разработаны разные сценарии.

render_4.webp

Механика разных тестовых задач

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

В итоге раздел «Задания» содержит все задания и игры онлайн‑учебника, сгруппированные по главам. Ученик может открыть и выполнить любое задание, когда находится в разделе:

  • тесты — нужно сделать единственный или множественный выбор, выбрать между «да» и «нет», решить ребус, дополнить предложение словами;

  • пазлы — нужно собрать мозаику из разрозненных элементов;

  • игры — нужно соединить элементы, расставить элементы в верном порядке, перетащить слоги или буквы на нужные места;

  • кроссворды — нужно вставить верные слова в клетки кроссворда;

  • другие задания — нужно зачеркнуть буквы, разгадать филворд, расшифровать и вписать слово.

wda_1_3_png.webp

Анимированный «живой» учебник

Сложной задачей было добавление анимации на страницы онлайн учебника. Над этим мы работали вместе с двумя другими командами, и в результате добились «оживания» книги. Кроме приключенческих видеороликов на портале реализованы медиа‑сцены в 3D‑формате, анимированные развороты. В исходном состоянии пользователь видит текст и иллюстрации главы, в точности такие же, как в печатном пособии. Но если кликнуть по нему мышью, включается анимация: начинают проигрываться фоновые звуки, отдельные элементы сцены приходят в движение. Если кликать персонажей, то можно услышать их реплики. Также пользователь может сменить вид сцены, например, изменить время года. Такие сцены можно развернуть на весь экран, а также закрыть, вернувшись к 2D‑странице.

render2_0000_1.webp

Что в итоге

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

  • Изучить интерактивный учебник по краеведению, в котором текст сопровожден звуком, анимацией — вместе с героями книги, школьниками Машей, Настей, Русланом, Гошей и Даниилом, ребята погружаются в разные периоды жизни Москвы;

  • Прослушать аудиоверсию своего бумажного учебника — материал разделен на короткие по времени главы с обозначенными темами, чтобы школьнику легче было найти нужный фрагмент;

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

  • Пройти тестовые задания по изученному материалу — короткие вопросы с вариантами ответов и игровые задачки помогают закрепить пройденный материал;

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

Развитие проекта

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

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

В перспективе мы будем разрабатывать аналогичные учебные платформы и для других регионов, например, для школьников Ямала.

Конкурсы

Сейчас мы создаем на портале «Моя Москва, горжусь тобой!» модуль для конкурса ко Дню победы. В нем московские школьники смогут загрузить фото своих тематических работ до определенной даты, чтобы после их просмотрело конкурсное жюри. Работы победителей поучаствуют в оффлайн‑выставке во время праздника.

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

12.webp

Результаты

Разработанный нами портал «Моя Москва» представлен мэру Москвы — Сергею Собянину. Он высоко оценил проект, и с 1 сентября 2023 года сервис был запущен. В течение месяца порталом начали пользоваться 35 московских школ. Также мы разработали аналогичный портал для школьников из Республики Дагестан, и в сентябре они также приступили к изучению местной природы, истории, традиций с помощью интерактивного пособия.

Портал «Моя Москва» предполагает регистрацию 130 000 учетных записей учителей и учеников. Позже мы добавим разделы с тематическими конкурсами для каждого региона, чтобы дети могли проявлять свои творческие способности и участвовать в офлайн‑мероприятиях. Также постепенно география проекта «Край родной» будет расширяться, обучающие платформы будут запускаться в разных частях нашей страны.

Закажите бесплатную консультацию

Свяжитесь с нами

СвязатьсяСвязаться