// Разработка

Сколько стоит построить сайт как Трелло (Trello)?

Есть вопросы?
Юрий Мусиенко. Бизнес аналитик
Написать в Telegram

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

Построить сайт как Трелло

Концепция канбан была популяризирована в 1980-х годах сотрудниками Toyota, которые использовали ее для упрощения управления цепочками поставок. А в 2011 Fog Creek Software (сейчас компания называется Glitch) воплотили ее сначала в виде отдельного веб-сервиса, а затем и мобильного приложения Trello.

По некоторым данным, на разработку и маркетинг Fog Creek Software потратили несколько миллионов долларов, что принесло им более 400 миллионов долларов прибыли. Далее мы разберем, за сколько сегодня можно создать приложение по типу Trello (и даже лучше), чтобы получить свою долю этого сверхприбыльного пирога.

Время и стоимость разработки приложений

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

Построить сайт как Трелло codementor

Почасовая ставка веб-разработчиков в разных странах (по данным codementor.io)

Так, в Северной Америке средняя почасовая ставка находится на уровне 70 долл/час для IT-специалистов среднего уровня и на уровне 120 долл/час для профи. Тогда как в Африке вы без проблем найдете человека, который сделает то же, что и американский профи, но за 10 долл/час. Разумеется, качество полученного программного продукта в первом случае, скорее всего, будет намного выше, но сам продукт вы получите в любом случае — хоть за 100 долл/час, хоть за 10 долл/час.

Поэтому далее по тексту мы будем в первую очередь говорить о времени, которое нужно потратить на реализацию той или иной функции Trello-подобного приложения — app-разработка. И только после этого обозначим стоимость (в Северной Америке, Восточной Европе, Азии и Африке). Кроме того, отдельным пунктом будет обозначено, во сколько обойдется web-разработка (HTML / CSS-кодирование, интерфейс и программирование бэкенда). Это важно, если вы будете создавать приложение с нуля, а не на базе уже существующего веб-сервиса.

Ключевые элементы приложения Trello

Главное, за что пользователи любят Trello, — дизайн. Он прост, удобен, приятен внешне и отлично справляется со своей главной задачей — облегчение управления рабочими процессами в стиле канбан. И поскольку последнее является ключевой особенностью Trello, то именно на это стоит обратить основное внимание при оценке стоимости разработки аналогичного приложения. Речь идет о таких функциях: доска, списки, карточка и команда.

Реализация досок — от 3280 долл

Это список верхнего порядка, внутри которого находятся другие списки. Каждая доска представляет отдельный проект, продукт или цель, находящиеся в стадии разработки и нуждающиеся в управлении посредством концепции канбан. Управлять с их помощью можно любыми проектами легкой и средней сложности — от личного рабочего графика до издания крупного делового журнала, например, The New York Times (это один из пользователей Trello).

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

Построить сайт как Трелло настройки

Для более удобной работы с карточками в Trello реализована функция фильтра по имени, дате создания, дате исполнения, ключевым словам и меткам. Функция поиска также присутствует. Найти что-то можно по всему содержимому или ограничив выборку с помощью прописанных операторов, например, @name, где «name» — название пользователя, ограничивает поиск по участникам, также можно вводить @me.

Реализация всех функций досок Trello в новом приложении потребует от 80 до 96 часов работы соответствующих специалистов. Если разработка приложения идет с нуля, то дополнительно к этому нужно будет потратить от 320 до 342 часов на кодирование HTML / CSS, разработку внешнего и внутреннего интерфейсов.

Построить сайт как Трелло доска

Реализация списков — от 1640 долл

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

Построить сайт как Трелло этапы

Списки можно переименовывать, менять местами, дополнять, удалять и т.д. Все это можно сделать, кликнув на конкретный элемент списка или через настройки, доступ к которым можно получить посредством иконки «…» (три точки) в правом верхнем углу списка.

Построить сайт как Трелло список

Разработка UI- и UX-дизайна списков, как у Trello, потребует от 40 до 50 часов. Веб-разработка (HTML / CSS-кодирование, интерфейс и программирование бэкенда) для данного функционала займет от 96 до 104 часов.

Построить сайт как Трелло функционал

Реализация карточек — от 3280 долл

Как мы писали в начале статьи, доски в Trello разделены на списки, и эти списки могут быть заполнены карточками. Карточки представляют некую задачу или работу, выполнение которой можно разделить на отдельные этапы (их представляют списки). Для авторов текстов (копирайтеры, блогеры, журналисты и т.д.) это будет новая статья или пост в социальных сетях.

В качестве примера можно взять процесс написания данной статьи. Для этого нужно создать карточку и дать название новой статьи: «Сколько стоит построить приложение как Trello». Затем внутри карточки нужно описать задачу и прикрепить к ней файлы (при необходимости). Эти файлы могут быть редакционной политикой, техническим заданием, учебным пособием, инфографикой, справочной литературой и т.п.

Построить сайт как Трелло файлы

Затем можно добавить один или несколько цветных ярлыков, которые помогут классифицировать эту карточку и обозначить ее приоритетность и направление. Если поставленная задача состоит из нескольких этапов, можно создать для нее чек-лист: «Поиск данных», «План статьи», «Черновик», «Готово», «Размещено», «Архив». Это поможет руководителю быть в курсе текущего состояния задачи. Когда карточка готова, к ней можно прикрепить исполнителя и пустить в производство.

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

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

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

Построить сайт как Трелло фон

Чтобы удалить ненужную карточку, нужно зайти в ее настройки и выбрать функцию «Занести карточку в архив». В архиве карточка будет находиться до бесконечности (если только вы не докажете службе поддержки Trello, что карточку нужно обязательно удалить из-за нарушения закона или прав пользователя). Такой подход спасает от случайного удаления и помогает вести историю прошлой деятельности. При желании любую карточку в архиве можно сделать активной в любое время.

Другие возможности карточек Trello:

  1. Горячие клавиши. Например, можно нажать Q, чтобы система скрыла все карточки, в которых вы не отмечены или ? (знак вопроса), чтобы увидеть все горячие клавиши.
  2. Мгновенный импорт предметов. Можно перетащить в название карточки перечень, кликнуть внизу Add и затем Create N-ное количество новых карточек.
  3. Отметки статуса карточки. Над каждой карточкой можно поставить большую иконку, которая отметит статус процесса: звездочка, галочка, большой палец вверх и т.п.
Реализация функционала UI / UX и остальных возможностей карточек Trello в новом приложении потребует от 80 до 96 часов, веб-разработка (кодирование HTML / CSS, интерфейс и программирование бэкенда) — от 400 до 440 часов.

Построить сайт как Трелло CSS код

Реализация команд — 1640 долл

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

Построить сайт как Трелло personnel

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

Построить сайт как Трелло иконка

Еще в настройках можно настроить видимость ваших досок: для всех, команды и отдельных участников. Рядом возможность подключения команды в Trello к команде в Slack, а также возможность ее улучшения до Business Class (местный аналог платной подписки с дополнительными возможностями).

Бизнес-модели монетизации Trello:

  1. Gold — 5 долларов в месяц. То же, что и базовая версия сервиса, + больше 800 смайлов и три существенных улучшения: интеграция с внешними приложениями, повышение ограничения вкладок до 250 МБ и история поисков.
  2. Business Class — 12,50 долларов в месяц на члена команды. Предназначен для команд до 100 человек. Добавляет возможность настройки видимости досок, прав участников команды и несколько других существенных возможностей, включая приоритетный статус ваших обращений в службу поддержки.
  3. Enterprise — начиная с 20,83 долл в месяц на члена команды (есть скидки для больших групп, вплоть до 6 долл с человека для команды из 5000 участников). То же, что и Business Class, + двухфакторная аутентификация (2FA), выделенный менеджер по работе с клиентами, приоритетная поддержка в рабочее время по телефону и несколько других фишек.
Реализация этого модуля потребует от 40 до 48 часов для разработки UI / UX и от 96 до 104 часов для веб-разработки (кодирование HTML / CSS, программирование внешнего интерфейса и бэкенда).

Построить сайт как Трелло HTML

Стоимость разработки базовых элементов

Помимо ключевых функций, для работы Trello-подобного приложения потребуется реализовать несколько других базовых элементов. Их разработка также требует времени (денег), а потому и этот процесс стоит включить в план стоимости разрабатываемого продукта. Вот что относится к базовому функционалу приложений:
  1. Вход в систему. Стандартный функционал входа с помощью имейла или телефона (аутентификация по уникальному URL или OTP) + регистрация через социальные сети потребует 20 часов работы веб-разработчиков. Кроме того, нужно будет потратить еще 10−50 часов на AB-тестирование для поиска оптимального варианта входа (сценария, дизайна, выбранных слов и т.п)
  2. Горизонтальный и портретный вид. Некоторые вещи проще изучать в горизонтальном виде, другие в вертикальном, особенно если речь идет о видео, изображениях и графиках. Потребуется от 20 часов на реализацию.
  3. Навигация. Для разработки гладкой панели навигации, меню гамбургер, прокрутки и кнопок может легко потребоваться 10 и более часов. Этот элемент также требует тщательного AB-тестирования, на которое может уйти до 50 часов.
  4. Push-уведомления. Обязательны для приложений типа Trello. Время их разработки зависит от сложности уведомлений: всплывающее уведомление на экране телефона, имейл, SMS, сообщение на экране PC, интеграция с мессенджерами (Slack, Viber, WhatsApp, Telegram). Примерно от 20 до 200 часов.
  5. Синхронизация с веб-сайтом. Если вы создаете приложение на базе веб-сервиса, то вам нужно синхронизировать их содержание (доски, списки, данные, мультимедиа, команды и т.д.), на что может уйти до 20 часов.
  6. Многоязычная поддержка. Нужна для выхода на более широкую аудиторию. На 6 общемировых языков нужно потратить около 20 часов.
  7. Автономный режим. Trello может хранить данные приложения на локальном устройстве, благодаря чему пользователи могут просматривать доски, списки, карточки и вставленные файлы без подключения к сети. Требуется 50 часов.
  8. Датчики (GPS, акселерометр, компас, свет, отпечаток пальца и прочее). Чтобы научить приложение их использовать, потребуется около 10 часов.
  9. Реклама внутри приложения. В зависимости от сложности может потребоваться от 20 до 50 часов работы веб-программистов.
Помимо этих функций, вам также могут понадобиться возможность шифрования, геолокация, работа с картами Google, пользовательский поиск, потоковое видео и захват изображений, интеграция с другими приложениями и подключение к сервисам платежей. Реализация всего этого потребует от 100 часов работы веб-разработчиков.

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

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

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

  • Языки программирования: JavaScript, CSS3, HTML5, Ruby.
  • Системы автоматизации: RSpec, Capybara, PhantomJS
  • Облачный хостинг: Amazon Web Services (AWS).
  • Сервер веб-приложений: Puma.
  • Веб-сервер: Nginx.
  • Каркас веб-приложений: Ruby on Rails.
  • JavaScript Framework: React.js
  • Хранение значения ключа: Redis
  • Хранение данных SQL: PostgreSQL

Дисклеймер

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

Есть вопросы? Задайте их здесь

Имя *
Email *
Телефон
Ваш бюджет
Сообщение