обсудить проект
обсудить проект

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

Mobile
(О проекте)

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

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

(Задача)

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

Юлия Автенюк
Юлия Автенюк
Founder & Art Director компании Easy

Мы хотим помочь молодым людям с выбором их будущей профессии, чтобы они изучали и делали то, что нравится именно им!

(Функционал)

Онбординг показывается только 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 месяц, что радует и нас, и заказчика.

Юлия Автенюк
Юлия Автенюк
Founder & Art Director компании Easy

Слаженный коллектив профессионалов! С первой минуты знакомства было понятно, что команда Amiga настроены на один результат — победа, где высокое качество граничит с идеалом.

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

(Технологии)
React
VK Bridge
VK UI
Video.js
Laravel 9
Orchid
(Команда)

Дарья Малкова

Руководитель проекта

Руслан Ревель

Teamlead Frontend

Антон Горохов

Teamlead Backend

Олег Поляков

PHP разработчик

Олег Коваленко

QA

другие проекты

Web

Имиджевый сайт «Шахтинская плитка»

Имиджевый сайт «Шахтинская плитка»

Web | NDA

Casio

Casio

Mobile | NDA

Бизнес-приложение Жёлтая печать

Бизнес-приложение Жёлтая печать

Web | NDA

ERP-система лизинга автопарка

ERP-система лизинга автопарка

Web | NDA

Образовательный портал Школа гениев

Образовательный портал Школа гениев

Mobile

Образовательный проект Easy

Образовательный  проект Easy

Mobile | NDA

Приложение с интеграцией ML

Приложение  с интеграцией ML

Web | NDA

Nike

Nike

Mobile | NDA

Приложение для здоровья CW Clinic

Приложение для здоровья CW Clinic

Mobile | NDA

М.Видео

М.Видео

Mobile

Интернет-магазин NL Store

Интернет-магазин  NL Store

Mobile

AI-приложение Get Art

AI-приложение Get Art

Mobile

Интернет-магазин Brav-o

Интернет-магазин Brav-o

В работе | NDA

Маркетплейс горного оборудования

Маркетплейс горного оборудования

Web | NDA

Mercedes-Benz

Mercedes-Benz

Mobile | NDA

Rockwool

Rockwool

Web | NDA

НЛМК

НЛМК

Mobile | NDA

DHL Express

DHL Express

Web | NDA

Samsung

Samsung

Web

Корпоративный портал ЕМС Team

Корпоративный портал ЕМС Team

Web

Транспортная компания №1

Транспортная компания №1

Mobile | NDA

Shell

Shell

Web | NDA

Крупное федеральное СМИ

Крупное федеральное СМИ

Mobile

Мобильное приложение для АЗС ХТК

Мобильное приложение для АЗС ХТК

В работе

Интернет-магазин мебели Трио

Интернет-магазин мебели Трио

Web

HR-сайт для SOKOLOV

HR-сайт для SOKOLOV

Mobile

Магазин на диване

Магазин на диване

Web

Маркетплейс специалистов Gigoo

Маркетплейс специалистов Gigoo

Mobile | NDA

Сбер

Сбер

Web | NDA

Газпром

Газпром

В работе

Приложение для пекарен Хлеб Хмельницкого

Приложение для пекарен Хлеб Хмельницкого

Mobile

Airspector

Airspector

Web

Маркетплейс нефтяных продуктов Proleum

Маркетплейс нефтяных продуктов Proleum

Mobile

Программа лояльности Vaillant Group

Программа лояльности Vaillant Group
Хотите связаться с владельцами компании напрямую?
Константин Франгуриди
Константин Франгуриди
Account director

НАПИСАТЬ

Дмитрий Тарасов
Дмитрий Тарасов
СЕО

НАПИСАТЬ