ПРОЕКТ

Онлайн-доска для творческой работы в реальном времени

Индивидуальная разработка ПО, Совместная работа в реальном времени, Свободное рисование, Общий доступ к доскам, Приватные проектные пространства, Загрузка файлов, Экспорт в PNG и PDF

  • Отрасль: Креативные услуги
  • Чешская Республика Местоположение: Чешская Республика
  • Срок разработки: 16 недель
  • Технологии: JavaScript / TypeScript (Node.js), Python
4+ месяцев

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

Итоги

Проблема

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

Решение

Решением стала сложная онлайн-доска с синхронизированным состоянием холста, проектными пространствами и чатом.

Результат

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

История клиента

Клиент - креативное агентство из Чешской Республики. Оно работает с распределенными командами, которые совместно создают, обмениваются и просматривают визуальный контент.

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

Планировалось добавить профили, поиск или подбор, а также управление проектами, общение и совместную работу.

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

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

Рабочее пространство дополнили чатом с вложениями, воспроизведением сессий и экспортом в PNG или PDF.

Клиент хотел

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

Почему готовое решение не подошло

Готовые платформы для инноваций на рабочем месте помогают создавать приложения и автоматизировать бизнес-процессы, но позиционируются скорее как low-code или no-code платформы, а не как специализированные общие холсты. Для объединения синхронного рисования, курсоров в реальном времени и комментариев в единый рабочий процесс требовалась индивидуальная платформа. Она также объединила права доступа, приватные пространства, обмен файлами и воспроизведение сессий.

Обзор проекта

Решение создано вокруг сложного веб-приложения с синхронным редактированием и совместной работой в пространствах. Состояние холста общее для пользователей и сессий, а интерфейс объединяет рисование, текст и изображения.

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

Чат в реальном времени связывает общение с работой на доске. Сообщения, прикрепленные файлы и ссылки на комментарии остаются частью общей сессии.

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

Система построена модульно, чтобы добавлять аналитику, панели управления, документацию и дальнейшие расширения без полной перестройки платформы. Документацию можно создавать с помощью @docusaurus/core (инструмент для документационных сайтов) или Sphinx (генератор документации).

Реализованные ключевые функции

  • Синхронизированное состояние холста
  • Совместная работа на онлайн-доске
  • Инструменты свободного рисования
  • Курсоры и комментарии в реальном времени
  • Приватные проектные пространства
  • Общий доступ к доскам и права доступа
  • Чат в реальном времени с вложениями
  • Запись и воспроизведение сессий
  • Экспорт досок в PNG и PDF

Дополнительные функции

+ Запись сессии + Воспроизведение сессии + Создание вайрфреймов + Экспорт в PNG + Экспорт в PDF

Кому еще подойдет это решение

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

Креативная студия

Задача Нужно единое место для общих эскизов, визуальных референсов, комментариев и сессий просмотра.
Как помогает решение Решение помогает команде рисовать вместе, обмениваться файлами, управлять доступом к доскам и экспортировать готовые доски.
Креативные студии

Платформа дистанционного обучения

Задача Нужно, чтобы преподаватели и участники могли работать на общих визуальных досках во время сессий.
Как помогает решение Решение объединяет рисование от руки, комментарии, вложения, присутствие участников и воспроизведение сессий.
Услуги для бизнеса

Платформа для сотрудничества создателей

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

Технологический стек

JavaScript / TypeScript (Node.js)

Разработка веб-приложений

Этот стек поддерживает гибкий веб-интерфейс и функции совместной работы в реальном времени.

Python

Аналитика и анализ данных

Python поддерживает аналитику, отчетность и анализ активности при необходимости.

PHP

Серверная разработка

PHP доступен для серверных модулей приложения.

css

Дизайн интерфейса

css (парсер и минификатор таблиц стилей) поддерживает дизайн веб-интерфейса.

dropbox

Обмен облачными файлами

dropbox (SDK API Dropbox) связывает референсные файлы и облачный контент с доской.

jspdf

Экспорт досок в PDF

jspdf (библиотека JavaScript для создания PDF) генерирует версии досок в PDF.

pandas

Анализ данных об активности

pandas (библиотека Python для анализа данных) поддерживает отчетность и анализ сохраненной активности.

@docusaurus/core

Сайт документации

@docusaurus/core (генератор сайтов документации) может публиковать инструкции для команды клиента.

PNG

Экспорт изображений досок

Файлы PNG сохраняют экспортированные изображения досок для обмена и просмотра.

PDF

Экспорт досок в документы

Файлы PDF сохраняют экспортированные доски в виде документов.

Интеграции

Dropbox

Референсные файлы и файлы из облачного хранилища перемещаются между Dropbox и доской через этот SDK.

Analytics services

Сохраненная активность может передаваться в аналитические сервисы для метрик, отчетов и панелей управления.

PNG and PDF files

Содержимое доски экспортируется с платформы в виде PNG-изображений или PDF-документов.

Результат

Общие доски объединяют визуальную работу

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

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

Как это работает

  1. Модуль синхронизации холста поддерживает состояние холста, рисунки, текст, изображения и стикеры согласованными между пользователями и сессиями.
  2. Инструмент свободного рисования отображает процесс рисования на общей онлайн-доске.
  3. Курсоры и комментарии в реальном времени показывают присутствие пользователей и обсуждение рядом с работой на доске.
Совет: Приватные проектные пространства и права доступа к доскам помогают контролировать общую творческую работу.
Общее рабочее пространство доски

Общее рабочее пространство доски

Функции этого экрана
Синхронизация состояния холста Совместная работа на онлайн-доске Инструмент свободного рисования Совместная работа в реальном времени Управление доступом к доскам

Контролируемые пространства упрощают управление досками

Коллекция досок объединяет существующие доски и проектные пространства в одном представлении. Владение, доступ и права редактирования делают структуру досок понятной руководителям проектов и участникам команды.

Как это работает

  1. Список досок показывает названия досок и их владельцев.
  2. Приватные проектные пространства связывают доски с соответствующими проектами.
  3. Настройки общего доступа сохраняют права пользователей и редактирования для каждой доски.
Коллекция досок и проектные пространства

Коллекция досок и проектные пространства

Функции этого экрана
Управление доступом к доскам Приватные проектные пространства

Чат хранит файлы и обсуждение рядом с доской

Чат для совместной работы объединяет сообщения, вложения и данные участников во время общей сессии. Он дает агентству единое место для обсуждения творческой работы и обмена файлами.

Ссылки на комментарии связывают чат с соответствующей работой на доске.

Как это работает

  1. Панель чата в реальном времени показывает сообщения и данные участников.
  2. Редактор сообщений отправляет обсуждение рядом с общей сессией.
  3. Загрузка вложений добавляет файлы, а ссылки на комментарии связывают сообщения с работой на доске.
Чат для совместной работы

Чат для совместной работы

Функции этого экрана
Совместная работа в реальном времени Совместная работа в реальном времени

Воспроизведение помогает просматривать процесс рисования

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

Это делает сохраненную активность полезной для обучения, просмотра и последующего обсуждения.

Как это работает

  1. Список сессий показывает сохраненные сессии рисования.
  2. Временная шкала связывает события сессии рисования с их местом воспроизведения.
  3. Область воспроизведения холста показывает сессию рисования, а заметки по просмотру остаются доступными.
Примечание: Воспроизведение - дополнительное расширение для просмотра сохраненной активности рисования.
Воспроизведение и просмотр сессии

Воспроизведение и просмотр сессии

Функции этого экрана
Функция воспроизведения сессии Запись сессий рисования

Экспорт превращает доски в файлы для обмена

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

Статус экспорта показывает состояние созданного файла доски.

Как это работает

  1. Элементы загрузки изображений и облачных файлов добавляют изображения и файлы хранилища на доску.
  2. Список файлов показывает загруженные изображения и файлы из облачного хранилища.
  3. Операции экспорта в PNG и PDF создают файлы досок, а статус экспорта показывает их состояние.
Экспорт доски и обмен файлами

Экспорт доски и обмен файлами

Что позволяет решение

С помощью этого решения креативное агентство может:

  • Создавать и редактировать общие визуальные доски в реальном времени.
  • Хранить эскизы, комментарии, файлы и права доступа в одном рабочем пространстве.
  • Управлять доступом через приватные проектные пространства и настройки досок.
  • Обсуждать работу на доске в чате с общими вложениями.
  • Просматривать сохраненные сессии рисования с помощью воспроизведения.
  • Экспортировать доски как PNG-изображения или PDF-документы.

Справились бы с задачей готовые системы?

До начала дизайна задачу сравнили с готовыми решениями на основе их собственных описаний.

Что нужно клиенту Low-code платформы Claris FileMaker, AppSheet, Ninox No-code платформы Budibase, Google App Maker, Appify Корпоративные платформы приложений BMC Helix Platform, Grid Индивидуальное решение
Профили, поиск и подбор — — —
Проекты, общение, совместная работа частично частично частично
Аналитика и воспроизводимая активность — — —
Гибкая работа на компьютерах и мобильных устройствах — — —
Соответствие правилам клиента: этапы, роли, отчеты частично частично частично
Все этапы в одном месте — — —
Отсутствие ручных этапов между программами частично частично частично

На основе общедоступных описаний продуктов и их категорий.

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

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

Итог

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

ЧАСТЫЕ ВОПРОСЫ

Рассматриваете создание похожей системы? Ознакомьтесь с ответами ниже, чтобы узнать, как индивидуальная онлайн-доска может объединить визуальную совместную работу, контроль доступа, обмен файлами и просмотр.

Нужно что-то похожее? Давайте обсудим
Или посмотрите другие проекты