Разработка веб-приложений и личных кабинетов
Разработка веб-приложений — когда сайта уже мало: клиентам нужен личный кабинет, дилерам — заказы и остатки, сотрудникам — сервис вместо таблиц. Проектируем и пишем веб-сервисы на открытом стеке, связываем с 1С и CRM. Код и сервер ваши, абонентской платы за лицензию нет.
Что такое веб-приложение и чем оно отличается от сайта
Веб-приложение — программа, которая работает в браузере: у пользователя есть вход, данные и действия. Сайт рассказывает, веб-приложение позволяет что-то сделать: оформить заказ, согласовать документ, посмотреть отчёт.
Сайт
- Главная задача
- рассказать и получить заявку
- Вход и роли
- обычно нет
- Где работает
- браузер
- Установка
- не нужна
- Когда выбирать
- маркетинг и поиск
Веб-приложение
- Главная задача
- работать с данными и процессами
- Вход и роли
- да
- Где работает
- браузер на любом устройстве
- Установка
- не нужна
- Когда выбирать
- кабинеты, сервисы, внутренние системы
Мобильное приложение
- Главная задача
- сервис в телефоне
- Вход и роли
- да
- Где работает
- iOS и Android
- Установка
- из магазинов приложений
- Когда выбирать
- частые действия с телефона
PWA
- Главная задача
- веб-приложение, которое ставится на телефон
- Вход и роли
- да
- Где работает
- браузер и главный экран телефона
- Установка
- одним нажатием, без магазинов
- Когда выбирать
- нужен «почти апп» без публикации
Разработка интернет-приложений нужна, когда пользователю есть что делать на сайте, кроме чтения. Если главное — телефон и push-уведомления, смотрите мобильное приложение.
Какие задачи решает веб-сервис
Клиенты звонят, чтобы узнать статус заказа
Личный кабинет со статусами и уведомлениями: звонков становится меньше, менеджеры заняты продажами.
Дилеры присылают заказы в Excel по почте
B2B-кабинет с каталогом, ценами дилера и корзиной: заказ сразу в учёте.
Сотрудники ведут учёт в десятке таблиц
Внутренний сервис с ролями и правами, общими данными и историей изменений.
Данные разбросаны по пяти системам
Сервис собирает их по API в одном месте и показывает каждому своё.
Сервис на конструкторе упёрся в лимиты
Переносим на свою разработку без абонентской платы и ограничений.
Разработка личного кабинета для клиентов и партнёров
Личный кабинет — самый частый веб-сервис, который заказывают компании. Клиент или партнёр входит по логину или номеру телефона и видит только своё. Такие кабинеты — одно из направлений нашей команды разработки сайтов и сервисов.
Что умеет кабинет: заказы и их статусы, документы и счета, цены и остатки из 1С, повтор заказа. Здесь же обращения в поддержку и уведомления на почту и в Telegram. Роли и права: руководитель клиента видит все заказы компании, сотрудник — только свои.
Как понять, что кабинет работает: считаем долю заказов и обращений, которые прошли через него, число звонков менеджерам и время обработки заказа. Эти метрики закладываем в аналитику с первого дня, чтобы через месяц было видно, окупается ли разработка, а не спорить об ощущениях.
Личный кабинет B2B добавляет индивидуальные цены и скидки, лимиты, акты сверки, закрывающие документы. Данные берутся из учёта через интеграцию с 1С, поэтому вести их вручную не нужно. Если кабинет нужен и сотрудникам, и дилерам, и клиентам сразу, это уже корпоративный или B2B-портал.
- Заказы, статусы и документы
- Цены и остатки из 1С
- Роли и права доступа
На чём пишем web-приложения: стек и архитектура
Открытый стек без платных лицензий: код можно передать любой команде.
Фронтенд
Бэкенд
База данных
Инфраструктура
SPA, PWA и архитектура
SPA — одностраничное приложение: интерфейс грузится один раз и дальше работает быстро, как программа. Подходит для кабинетов и внутренних сервисов. PWA — то же веб-приложение, которое можно поставить на главный экран телефона и открыть без интернета для части функций. MPA — классический многостраничный подход, когда важен поиск.
Архитектуру выбираем под нагрузку и команду: для большинства сервисов хватает одного приложения с хорошо разделёнными модулями, микросервисы нужны при высокой нагрузке и нескольких командах. С внешними системами сервис общается через API — это интеграции по API. Где и как работает сервис — сервер, копии, выкладка — настраиваем как серверы и DevOps.
Безопасность данных и нагрузка
Личный кабинет хранит то, что нельзя потерять и показать чужим: заказы, счета, персональные данные клиентов. Поэтому безопасность закладываем в архитектуру, а не добавляем в конце.
Что делаем: вход с подтверждением по телефону или почте, роли и права на уровне сервера, а не только интерфейса, журнал действий пользователей. Соединение шифруем, базу копируем, а данные храним на серверах в России по требованиям 152-ФЗ.
Нагрузка. Для большинства кабинетов хватает одного сервера. Но мы заранее проверяем, что будет, когда пользователей станет в десять раз больше. Для этого — нагрузочные тесты перед запуском, кеширование частых запросов, очереди для тяжёлых выгрузок и отчётов. Если нагрузка растёт, сервис масштабируется добавлением ресурсов, а не переписыванием. Так устроен наш движок для десятков сайтов на одной платформе.
Веб-сервисы, которые мы сделали
Сервис кластеризации запросов, платформа для сети сайтов и дашборд руководителя: задача, решение и что изменилось для бизнеса.
Сервис кластеризации поисковых запросов
Свой сервис, который раскладывает поисковые запросы по будущим страницам сайта по выдаче Яндекса: смета до сбора, ручные правки, выгрузка в Excel.
Платформа для сети сайтов
Своя платформа для запуска и ведения многих сайтов: библиотека блоков с превью, шаблоны страниц, медиатека, меню и дублирование сайта в один клик.
Дашборд для руководителя: трафик, заявки и поиск
Закрытая панель для собственника: посещаемость, заявки и звонки, позиции в поиске и здоровье сайта в одном месте. Данные обновляются сами каждую ночь.
Сколько стоит разработка веб-приложения
Цена считается по функциям, а не «за сервис». Пример того, как раскладываем смету личного кабинета, — точные суммы считаем на вашем составе.
Вход и роли
- Что входит
- регистрация, вход по телефону, роли и права
- От чего зависит цена
- число ролей и правил доступа
Заказы и статусы
- Что входит
- список, карточка заказа, уведомления
- От чего зависит цена
- сложность статусов и уведомлений
Документы и счета
- Что входит
- выгрузка из учёта, скачивание
- От чего зависит цена
- откуда берутся документы и в каком формате
Интеграция с 1С
- Что входит
- обмен ценами, остатками, заказами
- От чего зависит цена
- конфигурация 1С и направление обмена
Отчёты
- Что входит
- таблицы и графики для руководителя
- От чего зависит цена
- число отчётов и источников данных
Админ-панель
- Что входит
- управление пользователями и контентом
- От чего зависит цена
- что администратор делает сам
Уровни веб-сервиса
Кабинет с интеграциями
роли, заказы, документы, обмен с 1С и CRM, уведомления
Цену увеличивают число ролей, интеграций и отчётов, требования к нагрузке и безопасности. Начать можно с MVP и расширять по данным.
Проектирование и разработка веб-приложений: этапы
- 01
Исследование
Интервью с будущими пользователями, процессы, данные. Результат — техническое задание и прототип.
- 02
UX-прототип
Кликабельные экраны главных сценариев, согласуем до кода.
- 03
Дизайн
Интерфейс, удобный для ежедневной работы, а не только красивый.
- 04
Разработка спринтами
Каждые две недели — рабочая версия, которую вы проверяете.
- 05
Тестирование и нагрузка
Сценарии, права доступа, безопасность данных, нагрузочные тесты.
- 06
Запуск и развитие
Выкладка, обучение, метрики использования и план развития.
Вопросы о веб-сервисах и личных кабинетах
Что такое разработка веб-приложений?
Сколько стоит разработка веб-приложения?
На чём пишут веб-приложение — React, Vue, Python?
Как разработать веб-приложение: с чего начать?
Сколько времени занимает разработка?
Можно ли начать с MVP личного кабинета, а потом расширять?
Что такое PWA и когда его выбирать?
Можно ли подключить кабинет к 1С и CRM?
Кому принадлежат код и сервер?
Нужна ли поддержка и развитие после запуска?
Как понять, что личный кабинет окупается?
Ещё из разработки
Разработка ПО на заказ
Программы для учёта, заявок, склада и отчётов под ваш процесс: база данных, интеграции, код и права ваши.
Разработка CRM
CRM под ваш процесс продаж: сделки, заявки, склад, документы и отчёты, интеграции с 1С и телефонией.
API-интеграции сервисов
Связываем CRM, 1С, Авито, маркетплейсы, сайт и мессенджеры по API, когда готового модуля нет.
Дашборды и отчёты (DataLens, Power BI)
Реклама, сайт, продажи и CRM на одном экране. Отчёт обновляется сам.
Начать можно с технического задания и прототипа: смета станет точной до первой строки кода. Нужен сервис именно для продаж и сделок — посмотрите CRM под ваш процесс. Если продукт только проверяете, начните с разработки MVP, а когда пользователям нужен телефон и push — с мобильного приложения.
Обсудим ваш проект
Заявку читает руководитель проекта, а не колл-центр и не автоответчик.
Что будет после заявки
- Укажите удобный способ связи для обсуждения задачи.
- Созвонимся, чтобы понять задачу, цифры и ограничения.
- Предложим план: что сделать, в каком порядке, кто из команды подключится и сколько это стоит.
Заявка ни к чему не обязывает. Если задача окажется не нашей, скажем прямо и подскажем, куда обратиться.
Расскажите о задаче
Имени и телефона достаточно. Подробности можно добавить сразу или обсудить при звонке.