Wiki · Веб-разработка

Веб-приложение: что это и чем отличается от сайта

5 мин чтенияАвтор: Дмитрий КолесниковСоавторы: Евгений Баев

Веб-приложение – это программа, которая работает в браузере: её не нужно скачивать и устанавливать, достаточно открыть адрес и войти. В веб-приложении не читают страницы, а работают: оформляют заявки, ведут учёт, согласуют документы, смотрят статистику.

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

Сайт, портал и веб-приложение

	Сайт	Портал	Веб-приложение
Главная задача	Рассказать о компании и получить заявку	Объединить разные группы людей и сервисы в одном месте	Дать инструмент для конкретной работы
Кто пользуется	В основном гости без входа	Сотрудники, клиенты, партнёры с разными правами	Зарегистрированные пользователи
Что внутри	Страницы и тексты	Разделы, кабинеты, новости, документы	Данные, формы, логика, отчёты
Важно для поиска	Да	Частично	Обычно нет, всё за входом

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

Когда хватит готовой CRM или Битрикс24

Если процессы укладываются в готовую CRM, 1С или Битрикс24, настроить готовую систему обычно быстрее и дешевле, чем писать свою. Своё приложение оправдано, когда логика работы особая и готовые системы приходится ломать под себя или когда в работе участвуют внешние люди: клиенты, подрядчики, временный персонал.

Веб-приложение или мобильное

Выбор между веб- и мобильным приложением зависит от того, как им будут пользоваться. Веб-приложение работает на любом устройстве, его не нужно публиковать в магазинах приложений, а обновление видят все сразу после выкладки. Мобильное приложение нужно, когда важны пуш-уведомления, камера, работа без сети и ежедневное использование. Промежуточный вариант: веб-приложение, которое можно добавить на главный экран телефона, его называют PWA.

Матрица выбора между сайтом с личным кабинетом, веб-приложением, PWA и мобильным приложением — Веб, мобильное приложение или сайт

Интерфейс, сервер, база и админ-панель

У любого веб-приложения есть интерфейс в браузере, серверная часть с логикой и правами доступа, база данных и связи с другими системами: 1С, CRM, оплатой, рассылками. Отдельно делают админ-панель, где заказчик сам меняет справочники, тексты и настройки без программиста. Права пользователей описывают заранее, об этом статья Ролевая модель доступа.

Схема устройства веб-приложения: интерфейс, серверная логика и база данных, интеграции с 1С и CRM, админ-панель — Из чего состоит веб-приложение

Если часть приложения должна находиться в поиске, например каталог или публичные карточки, важно, как страницы отдаются роботу. Об этом подробно в статье JavaScript SEO: CSR и SSR.

Портал для поставщика персонала: четыре роли и кабинет сотрудника

В Красноярске мы делали веб-портал для компании, которая закрывает потребность торговых сетей в сотрудниках на конкретные даты и смены. Старую систему написал программист клиента на Python: простые таблицы без дизайна и админ-панели, любое изменение требовало разработчика, у сотрудников доступа не было.

В новом портале четыре ролевые модели: администратор, менеджер, суперменеджер и магазины. В процессе добавили роль сотрудника с личным кабинетом и мобильной версией: вакансии, отклики, принятие или отклонение смен, обучение внутри приложения. Заявка проходит автоматическую цепочку от магазина до выхода сотрудника на смену. Есть чат с файлами, база знаний и админ-панель. Логику заявок построили заново: графики выходов в будни и выходные, дневные и ночные смены, планирование на месяц вперёд, диаграмма выходов за день, неделю, месяц или период. От начала работ до тестирования ушло 2–3 месяца, на момент подготовки кейса система была на этапе тестирования.

Цепочка заявки в веб-портале поставщика персонала: магазин, менеджер, сотрудник, выход на смену — Как заявка проходит через портал

Как шла разработка портала: ТЗ, прототипы, три варианта визуала

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

Что подготовить перед разработкой

Техзадание пишет разработчик, но без ответов заказчика его не составить. Ещё до первой встречи полезно описать:

кто будет пользоваться приложением и что делает каждая группа;
как процесс идёт сейчас: в таблицах, чатах, на бумаге, где он ломается;
с какими системами нужен обмен данными: 1С, CRM, сайт, бухгалтерия;
кто будет вести справочники и настройки после запуска;
кто работает с компьютера, а кто с телефона.

Почему веб-приложение не приживается после запуска

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

Веб-приложения и порталы проектируем и делаем на услуге разработка сайтов. Если нужен кабинет для клиентов, сотрудников или партнёров, посмотрите разработку личного кабинета.

Установка на телефон, PWA, сроки и поиск

Чем веб-приложение отличается от приложения, которое ставят из магазина?

Веб-приложение открывается в браузере по ссылке, устанавливать его не нужно, а новую версию все получают сразу после выкладки. Приложение из App Store или Google Play живёт на самом телефоне и поэтому лучше справляется с пуш-уведомлениями, камерой и работой без интернета.

Как установить веб-приложение на айфон?

Откройте сервис в Safari, нажмите «Поделиться» и выберите «На экран Домой». Иконка появится рядом с обычными приложениями, а если сервис сделан как PWA, он будет запускаться в отдельном окне без адресной строки.

Как удалить веб-приложение с экрана «Домой»?

Как любой ярлык: долгим нажатием на иконку и командой удаления. Аккаунт и данные лежат на сервере и никуда не пропадут, сервис по-прежнему откроется по адресу в браузере.

Чем PWA отличается от обычного веб-приложения?

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

Что нужно, чтобы сайт открывался на телефоне как приложение?

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

Сколько времени занимает разработка веб-приложения?

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

С чего начать создание веб-приложения для своей компании?

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

Какие страницы веб-приложения стоит открыть поисковикам?

Только публичные: каталог, карточки, описания услуг. Всё, что за входом, роботу не нужно. Публичные страницы отдавайте уже собранными на сервере, иначе поисковик может увидеть пустую оболочку, подробнее в статье JavaScript SEO.

Зачем веб-приложению отдельная админ-панель?

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

Почему на портале поставщика персонала мобильная версия есть только у сотрудников?

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