Как мы сэкономили 2 млн клиенту и разработали приложение во «ВКонтакте»?

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

• Каталог кейсов с аннотацией, в каждом из которых пул вопросов для профориентации подростков.
• Фоновое видео или иллюстрация на детальной странице кейса для визуализации темы.
• Тест (механизм опроса). Слайдер с вопросами и ответы в виде кнопок «Да»/«Нет» или список с вариантами ответов. Результат с пояснением выдается сразу после сделанного выбора.
• В случае успешного прохождении кейса пользователь получает подборку тематических фильмов или книг для расширения кругозора в выбранной области и может вступить в группу единомышленников в VK. Также есть возможность поделиться результатом теста на личной странице.

Наши задачи

• Создать приложение на платформе VK. Ранее клиент пробовал разработать приложение на независимых платформах iOS и Android, но опыт сложился неудачный и решили создать MVP-версию (Minimal Viable Product — минимально жизнеспособный продукт) на платформе VK.
• Проанализировать имеющийся дизайн приложения и упростить его интерфейс для интуитивно понятной навигации по нему.
• Разработать удобную для заказчика административную панель, чтобы он мог без труда вносить изменения в контент мобильного приложения.
• Позаботиться о возможности развития и расширения проекта в будущем.

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

VK mini apps — это современная платформа, которая позволяет без публикации в Google Play и App Store создать мобильное приложение и разместить его в магазине приложений VK.

Преимущества такого решения для клиента:

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

Преимущества решения для разработчиков:

• размещение приложения в магазине без регистрации аккаунта разработчика. Сейчас это особенно актуально для тех, у кого нет аккаунта в Apple и желания обходить ограничения, наложенные на РФ.
• трансляция приложения как на мобильных устройствах, так и на десктопе (комп.) без дополнительных манипуляций в коде.

Этапы создания EASY

• Изучение технического задания и анализ дизайна приложения.
• Внесение корректировок в макеты для упрощения будущего интерфейса. Согласование с заказчиком.
• Изучение площадки VK для создания приложений и кейсов коллег на рынке.
• Бекэнд (программирование функциональной части проекта): приступили к разработке административной панели (Orchid) и онбординга (вступительных экранов).
• Фронтенд (вёрстка визуальной части проекта) реализовывался параллельно бекенду.
• Интеграция фронта и бека.
• Тестирование.
• Дебаг (исправление найденных ошибок).
• Релиз (размещение приложения на аккаунте заказчика в VK).

Сложности

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

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

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

Amiga — amigos de verdad!

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

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

Мы объединили всю экспертизу в нашей компании и успешно реализовали современное мобильное приложение с прекрасной и светлой миссией — помощь детям в выборе будущей профессии.

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

Нас воодушевляет, когда люди любят то, чем они занимаются и готовы делиться своими знаниями во благо других!

Руслан Ревель, Teamlead Amiga

Технологии и инструменты

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 разработчик

Олег Коваленко — Тестировщик