ПРОЕКТ

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

Индивидуальная разработка ПО, Совместная работа в реальном времени, Рисование от руки, Общий доступ к доскам, Приватные проектные пространства, Загрузка файлов, Экспорт в 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 Индивидуальное решение
Профили, поиск и согласование — — —
Проекты, коммуникация, совместная работа частично частично частично
Аналитика и повторяемые действия — — —
Адаптивная работа на компьютерах и мобильных устройствах — — —
Соответствие правилам клиента: этапам, ролям, отчетам частично частично частично
Все этапы в одном месте — — —
Отсутствие ручных действий между программами частично частично частично

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

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

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

В заключение

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

ЧАВО

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

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