ПРОЕКТ

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

Индивидуально разработанное ПО, Совместная работа в реальном времени, Свободное рисование, Общий доступ к доскам, Приватные пространства проектов, Загрузка файлов, Экспорт в 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 (Dropbox API SDK) связывает информационные файлы и содержимое облачного хранилища с доской.

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, а статус экспорта показывает их состояние.
Экспорт доски и обмен файлами

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

Что даёт решение

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

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

Могли бы готовые системы выполнить эту работу?

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

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

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

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

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

В итоге

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

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

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

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