Hola Amigos! На связи Amiga. Делимся новым приложением на платформе VK, которое разработали за 1 месяц для образовательного проекта. Подростки с помощью увлекательного тестирования узнают, какие скиллы им необходимо подтянуть для профессии мечты.
Мы создали интуитивно понятную административную панель, которой легко управлять без навыков программирования. Заказчик сможет самостоятельно развивать проект и при минимальных затратах трансформировать его в полноценное мобильное приложение или сайт.
Давайте знакомиться! Мы аккредитованная IT-компания Amiga, специализируемся на web и mobile разработке. Среди наших клиентов: X5 Retail Group, Mercedes-Benz, Сбербанк, SOKOLOV и другие, чьи названия под NDA. Любим Flutter и посвятили ему целый тг-канал, но там еще много всего интересного, поэтому подписывайтесь.
В этой статье расскажем, как за 1 месяц мы разработали VK mini app EASY, которое поможет множеству школьников превратить свою мечту в профессию.
Приложение разработано с нашими большими друзьями из UXART.
EASY – это приложение, которое познакомит школьников с миром самых популярных современных профессий. С помощью кейсов-симуляций каждый пользователь узнает, какие soft и hard скиллы требуются для работы в разных областях.
Школьнику доступно более 20 подобных кейсов, в которых он должен решить разного типа задачи: выбор правильного ответа, проектирование схемы или создание модели.
После успешного выполнения заданий от компаний школьники смогут попасть на online и offline стажировки, где вместе с кураторами попробуют себя в роли выбранной профессии.
Схематично пользователь в приложении Easy проходит примерно такой путь:
Онбординг показывается только 1 раз при запуске приложения и служит помощником для знакомства с его миссией. Далее пользователь попадает на экран со списком кейсов по направлениям: AI, кинопродюсер, PM, робототехника и другие.
В аннотации указано: автор кейса, длительность его прохождения, описание области деятельности и возможность сделать донат. Задания представляют собой вопросы с вариантами ответов, итог с пояснением выдается сразу.
После прохождения кейса пользователь видит подборку тематических фильмов или книг, а также он может подписаться на группу в VK с единомышленниками.
Статусы кейсов
В приложении есть три статуса кейсов:
Если кейс с вопросами опубликован, но пользователь не начал проходить кейс, то вместо статуса указывается время прохождения кейса.
Повторное открытие кейса
Если пользователь начал проходить кейс, но не закончил, то при следующем открытии детальной страницы кейса появится модальное окно с предложением продолжить прохождение на том моменте, где пользователь остановился, либо начать заново.
Экран с результатами
Экран с результатами показывает, успешно был пройден кейс или нет. Также на этом экране находится подборка фильмов и книг и кнопка «Вступить в чат».
Содержание приложения:
VK mini apps — это современная платформа, которая позволяет без публикации в Google Play и App Store создать мобильное приложение и разместить его в магазине приложений VK.
Преимущества такого решения для клиента:
Преимущества решения для разработчиков:
Загрузка видео в приложение
В течение продолжительного времени мы добивались одинакового отображения видеоконтента в кейсах, как при загрузке с YouTube, так и с сервера. Нам было необходимо привести их к определенному стандарту, чтобы не нарушать целостность визуальной концепции.
Для решения проблемы мы использовали популярную библиотеку Video.js. и с помощью плагина (расширения), специально предназначенного для работы с YouTube, внесли необходимые модификации.
Теперь администраторы приложения могут добавлять видео с Youtube или загружать контент на сервер, а в приложении они будут выглядеть одинаково эстетично.
Современные технологии
Мы стремились запустить проект на основе современных технологий (Vite и TypeScript), чтобы в будущем заказчик мог трансформировать VK-приложение в полноценную мобильную и веб версии при минимальных вложениях.
Стилизация нативных функций телефона
При верстке дизайна проекта мы столкнулись с проблемой стилизации фона онбординга на iPhone.
Образовалась белая полоса снизу, которая «ломала» дизайн-концепцию и восприятие интерфейса в целом. Для устранения проблемы мы использовали VK Bridge — это встроенный инструмент VK, который позволяет задавать определенные параметры элементам управления мобильных устройств (iOS и Android).
Административная панель
Приложение должно быть простым в использовании для самого клиента, чтобы в дальнейшем он мог самостоятельно добавлять новые кейсы, видеоматериалы и другой контент.
Мы кастомизировали Orchid (Laravel Admin Panel) под требования заказчика. Получилась административная панель, с которой приятно и нативно понятно взаимодействовать человеку без опыта в программировании.
Мы, не раздумывая, взялись за интересный с технической стороны и полезный для подрастающего поколения проект. Реализация заняла 1 месяц, что радует и нас, и заказчика.
Благодаря технологиям, используемым при разработке приложения, клиент может с минимальными усилиями конвертировать VK mini app в полноценное мобильное приложение или сайт. Это дает хорошие перспективы для развития и расширения проекта!
Frontend: React, TypeScript, Vite, VK Bridge, VK UI, Video.js, Framer Motion, Swagger Backend: PostgreSQL, PHP 8.2, Composer, Laravel 9, Система кеширования Redis, Вебсервер Nginx, Orchid
Библиотека VK Bridge предоставляет возможность приложениям использовать API ВКонтакте и API операционной системы (iOS, Android), установленной на устройствах пользователей. Благодаря встроенному инструменту VK Bridge мы реализовали весь дизайн проекта, не отходя от технического задания.
Для реализации функционала плеера был применен мощный инструмент для воспроизведения видео — Video.js. Он обеспечивает широкий функционал и возможности для управления и воспроизведения видео в приложении.
Framer Motion (библиотека React-приложений) мы использовали для создания динамичных и анимированных интерфейсов. С помощью него нам удалось добиться плавного воспроизведения анимаций в пользовательском интерфейсе.
Поскольку мы использовали Swagger для документирования нашего API, мы приняли решение воспользоваться пакетом swagger-typescript-api. Этот пакет предоставляет автоматическую генерацию запросов API и моделей данных для TypeScript, что значительно сократило время и помогло нам более быстро решить все задачи. Благодаря этому решению мы смогли автоматизировать процесс создания API запросов и моделей данных, что в конечном итоге привело к повышению эффективности и ускорению разработки.
Дарья Малкова
Руководитель проекта
Руслан Ревель
Teamlead Frontend
Антон Горохов
Teamlead Backend
Олег Поляков
PHP разработчик
Олег Коваленко
Тестировщик
