Приложение VK для образовательного проекта Easy

О проекте

EASY – приложение, которое познакомит школьников с миром самых популярных современных профессий. С помощью кейсов-симуляций каждый пользователь узнает, какие soft и hard скиллы требуются для работы в разных областях.

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

Задача

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

Функционал

Онбординг показывается только 1 раз при запуске приложения и служит помощником для знакомства с его миссией. Далее пользователь попадает на экран со списком кейсов по направлениям: AI, кинопродюсер, PM, робототехника и другие.

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

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

Статусы кейсов

В приложении есть три статуса кейсов:

1. «В разработке» — если в админ-панели добавлен и опубликован кейс без заданий.

2. «В процессе» — если пользователь начал отвечать на вопросы из кейса, но прервался.

3. «Пройден» — если пользователь ответил на все вопросы из кейса.

Если кейс с вопросами опубликован, но пользователь не начал проходить кейс, то вместо статуса указывается время прохождения кейса.

Повторное открытие кейса

В приложении есть три статуса кейсов:

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

Если кейс с вопросами опубликован, но пользователь не начал проходить кейс, то вместо статуса указывается время прохождения кейса.

Экран с результатами

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

Содержание приложения

Каталог кейсов с аннотацией, в каждом из которых пул вопросов для профориентации подростков.

Фоновое видео или иллюстрация на детальной странице кейса для визуализации темы.

Тест (механизм опроса). Слайдер с вопросами и ответы в виде кнопок «Да»/«Нет» или список с вариантами ответов. Результат с пояснением выдается сразу после сделанного выбора.

В случае успешного прохождении кейса пользователь получает подборку тематических фильмов или книг для расширения кругозора в выбранной области и может вступить в группу единомышленников в VK. Также есть возможность поделиться результатом теста на личной странице.

Реализация проекта

1. Изучение технического задания и анализ дизайна приложения.

2. Внесение корректировок в макеты для упрощения будущего интерфейса. Согласование с заказчиком.

3. Изучение площадки VK для создания приложений и кейсов коллег на рынке.

4. Бекэнд (программирование функциональной части проекта): приступили к разработке административной панели (Orchid) и онбординга (вступительных экранов).

5. Фронтенд (вёрстка визуальной части проекта) реализовывался параллельно бекенду.

6. Интеграция фронта и бека.

7. Тестирование.

8. Дебаг (исправление найденных ошибок).

9. Релиз (размещение приложения на аккаунте заказчика в VK).

Сложность

Загрузка видео в приложение

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

Для решения проблемы мы использовали популярную библиотеку Video.js. и с помощью плагина (расширения), специально предназначенного для работы с YouTube, внесли необходимые модификации.

Теперь администраторы приложения могут добавлять видео с Youtube или загружать контент на сервер, а в приложении они будут выглядеть одинаково эстетично.

Современные технологии

Мы стремились запустить проект на основе современных технологий (Vite и TypeScript), чтобы в будущем заказчик мог трансформировать VK-приложение в полноценную мобильную и веб версии при минимальных вложениях.

Стилизация нативных функций телефона

При верстке дизайна проекта мы столкнулись с проблемой стилизации фона онбординга на iPhone.

Образовалась белая полоса снизу, которая «ломала» дизайн-концепцию и восприятие интерфейса в целом. Для устранения проблемы мы использовали VK Bridge — это встроенный инструмент VK, который позволяет задавать определенные параметры элементам управления мобильных устройств (iOS и Android).

Административная панель

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

Мы кастомизировали Orchid (Laravel Admin Panel) под требования заказчика. Получилась административная панель, с которой приятно и нативно понятно взаимодействовать человеку без опыта в программировании.

Результат

Мы, не раздумывая, взялись за интересный с технической стороны и полезный для подрастающего поколения проект. Реализация заняла 1 месяц, что радует и нас, и заказчика.

Благодаря технологиям, используемым при разработке приложения, клиент может с минимальными усилиями конвертировать VK mini app в полноценное мобильное приложение или сайт. Это дает хорошие перспективы для развития и расширения проекта!