Фронтенд-разработка кастомного веб-приложения для управления бизнес-процессами в сфере переводов и локализации
Бизнес составляющая проекта
Компания заказчика поставляет услуги по локализации игр, приложений и сайтов, сотрудничая с распределённой по всему миру сетью переводчиков. Процесс взаимодействия с клиентами и подрядчиками включает множество этапов, которые необходимо систематизировать и контролировать. Компания фиксирует бизнес-процессы по переводу и ведёт документацию в сервисах Google (Sheets, Docs, Gmail). Однако использование данных ресурсов не удовлетворяет нужды заказчика: не обеспечивает необходимую скорость работы, позволяет сохранить ограниченное количество данных и в конечном итоге неудобно для применения в текущих целях.
Заказчику необходимо разработать веб-приложение для управления процессами перевода. Новая система должна обеспечить удобство использования и предоставить специфические возможности, которые важны для заказчика. В долгосрочной перспективе применение собственного веб-приложения позволяет сэкономить ресурсы и оптимизировать рутинные процессы. Также это обеспечивает большую безопасность и конфиденциальность хранения данных.
Техническое описание проекта
Веб-приложение Alfa реализовано в виде таблицы с данными. Доступен функционал удаления, добавления и изменения значений в ячейках посредством встроенных элементов: поля ввода, выпадающих списков, календаря и кнопок. Фронтенд-часть системы разработана на ReactJS. Управление состоянием приложения выполняется посредством Redux. Кастомный текстовый редактор для отправки писем реализован на основе фреймворка Draft.JS. Взаимодействие между фронтендом и бекэндом осуществляется посредством технологии gRPC.
Обязанности команды ДжазТим на проекте
В данном проекте наша команда выполняет следующие активности:
- Разработка компонента Table, который легко кастомизируется под необходимые задачи и типы данных. С нуля за короткий срок командой ДжазТим была создана архитектура таблицы. Данный раздел ПО предоставляет следующие возможности: отображение большого количества данных, их удобное чтение, редактирование, удаление, обработка. Кроме того, были внедрены автоматический расчёт полей на серверной стороне, а также расчёт оплаты и отправка писем заказчикам из приложения.
- Создание интерфейса для отправки писем с использованием фреймворка Draft.JS. Заказчику был необходим кастомный редактор текста для отправки писем. При этом базовые html-теги не позволяли гибко управлять каждым фрагментом текста. Требовалась полная свобода стилизации, расширения и кастомизации текста, поэтому от готовых решений нашей команде пришлось отказаться и обратиться к более низкоуровневому инструменту.По результатам проведённого исследования и разработки демонстрационного редактора приоритет был отдан фреймворку Draft.JS. Потенциал этой технологии чрезвычайно высок. Пользователю доступны следующие возможности: инлайн стилизация текста, добавление ссылок и декораторов, добавление изображений в контекст и создание слайдера изображений. На данный момент фреймворк внедрён и используется в приложении. Также продолжается работа по кастомизации текстового редактора: разрабатываются шаблоны писем, система поиска, тегирование.
- Кроме того, в нашу зону ответственности входят следующие задачи:
- Разработка интерфейса согласно макетам дизайнера.
- Построение единого стиля кода проекта.
- Проведение работ по оптимизации производительности приложения.
Используемые технологии
Разработка: JavaScript ES6, React, Redux, Draft.js, HTML, CSS3, redux-thunk, WebSocket, gRPC, npm, WebPack.
Окружение: Slack, Trello, Drone.io, Github, Sentry.
Особенности проекта
- Наша команда подключилась к проекту при наличии у заказчика небольшого codebase и архитектуры UI-части. Дальнейшая разработка проводилась на базе существующей архитектуры.
- Экстремальная непрерывная поставка. Команд ДжазТим каждый день поставляла новые стабильные функциональности продукта.
- Распределённая команда. Бэкенд-разработка реализована на стороне заказчика.
- Необходимость учесть большое количество специфических, постоянно добавляющихся требований к ПО от заказчика.
- Работа по Scrum с частыми поставками и ежедневными фидбэками от заказчика.
Достижения компании на проекте
- UI-часть системы успешно реализована. Приложение активно используется командой заказчика.
- Разработана база компонентов для переиспользования и быстрого обновления других разделов приложения, а также других проектов заказчика.
- Реализована простая навигация в таблице как с помощью мыши, так и при помощи клавиатуры.
- Успешно проведено исследование по подбору оптимального фреймворка для редактирования текста писем.
- Реализована виртуализация веб-приложения: подгрузка данных в таблице происходит динамически в процессе постепенной прокрутки страницы пользователем. Это позволило сохранять большое количество данных в рамках одной страницы (например, записи календаря с диапазоном более 3 лет).
- Наша команда получила опыт поддержки продукта в долгосрочной эксплуатации. Помимо разработки, мы участвовали в длительной поддержке и долговременном развитии важнейшего компонента системы.
Скриншоты
Свяжитесь с нами, чтобы обсудить Ваш IT-проект
