+7 (495) 147-04-32
Главная
/
Кейсы
/
Media
/
BMG Release // Media

BMG Release Приложение для звукозаписывающей компании

#media #bmgrelease

О клиенте

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

Часть IT-продуктов компании, написанных на устаревших технологиях, было сложно поддерживать и развивать. Так, фронтенд одного из  приложений под названием BMG Release был написан на «AngularJS 1.6».

Неудобство пользования разделом «Поисковик» выражалось в:

  • медленной загрузке страницы и отработке примененных фильтров
  • разрозненности по части отображаемых статусов
  • нечитабельности таблицы в приложении

Пользование «Страницей артиста» осложнялось:

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

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

Задача

Перенести музыкальное приложение звукозаписывающей компании с AngularJS 1.6 на современную 
версию Angular с минимальными изменениями на бэкенде. 

Для улучшения пользовательского опыта необходимо было:

  1. актуализировать UI приложения
  2. реализовать новый дизайн согласно дизайн-системе BMG
  3. создать адаптивные версии музыкального приложения для мобильных устройств и планшетов

Решение

Команда LightTech выполнила бесшовный переход на платформу Angular 2+ и обновила дизайн музыкального приложения с фокусом на улучшении удобства пользования интерфейсом.

Интерфейс приложения для медиа

Этапы проекта

1

Этап 1

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

2

Этап 2

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

3

Этап 3

Составили план поэтапной миграции существующего web-приложения с AngularJS 1.6 на Angular 2+.
Интерфейс BMG Release от LighTech

Функционал

Сервис поиска

  • Группировка фильтров согласно различным сценариям поиска
  • Повышение производительности мобильного приложения, а также читабельности таблиц
  • Унификация статусов внутри экосистемы продуктов, а также реализация всплывающих подсказок по ховеру и пр.
 

Функционал приложения для медиа

Страница музыкального артиста

  • Реализация сайд-бара для удобного перехода между музыкальными продуктами внутри приложения
  • Реализация адаптивных версий мобильного приложения
  • Повышение интерактивности раскрывающихся элементов по ховеру, наглядной географической карты и т. д.
Функционал BMG Release

Вызовы

Для пользователей веб-сервиса необходимо было обеспечить возможность бесперебойной работы как на страницах нового приложения, разработанного на Angular 2+, так и на тех страницах, которые до сих пор остались на устаревшей версии AngularJS. 

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

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

Важным аспектом при реализации стала поддержка существующей системы прав доступа в приложении без каких-либо изменений.

Эффект для бизнеса

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

Фронтенд

Angular Material
TypeScript
Язык программирования, основанный на JavaScript, с поддержкой строгой типизации, что позволяет выявлять ошибки ещё до запуска кода.
RxJS
Библиотека для реактивного программирования на JavaScript. Позволяет работать с асинхронными данными через потоки событий, используя наблюдаемые (Observables) и операторы для их обработки.
NGX
Bootstrap
Популярный фронтенд-фреймворк для создания адаптивных и стильных веб-сайтов и приложений. Включает готовые CSS и JavaScript компоненты для ускорения разработки.
 

Бэкенд

Python
Мощный и гибкий язык программирования, обеспечивающий быструю разработку и высокую производительность. Идеален для создания сложной бизнес-логики и обработки больших объемов данных
Django
Высокоуровневый Python-фреймворк для быстрой разработки безопасных и масштабируемых веб-приложений
Celery
Асинхронная очередь задач для Python, позволяющая выполнять отложенные операции и распределять нагрузку
Nginx
PostgreSQL
Мощная объектно-реляционная СУБД с открытым исходным кодом, известная своей надёжностью, расширяемостью и поддержкой сложных запросов.
Redis
Хранилище данных в памяти, оптимизированное для высокой скорости, часто используется как кэш или брокер сообщений.
RabbitMQ

Мобайл

Flutter
Мощный фреймворк для быстрой и эффективной разработки, идеально подходящий для создания кроссплатформенных приложений. Он обеспечивает высокую производительность и гибкость, позволяет эффективно реализовывать сложную бизнес-логику и обеспечивает высокое качество пользовательских интерфейсов
Dart
Объектно-ориентированный язык программирования от Google, используемый для разработки мобильных, веб и настольных приложений
Riverpod
Современный инструмент управления состоянием в приложениях на Flutter, предоставляющий гибкий и безопасный способ взаимодействия с данными без ограничения архитектуры.
REST API
sockets
ObjectBox

Еще кейсы

Обсудить проект
Имя
Связаться
Сообщение
Прикрепить файл +
Запрос на получение файлов
Имя
Отправить файлы
Сообщение
Спасибо!
Ваша заявка отправлена
После обработки наш менеджер свяжется с вами