Разработка веб-приложений на заказ

Подробно

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

Какие веб-приложения создаем

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

• личный кабинет клиента: заказы, счета, документы, обращения в поддержку, история операций;
• внутренняя система для сотрудников: учет заявок, склад, график смен, панель руководителя;
• SaaS-продукт, который компания продает по подписке другим компаниям, с тарифами, биллингом и отдельным пространством для каждого клиента;
• агрегатор или маркетплейс, где встречаются продавцы и покупатели, исполнители и заказчики;
• онлайн-сервис для частных пользователей: запись, бронирование, калькулятор, конструктор;
• мини-приложение внутри Telegram для заказов, записи или программы лояльности.

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

Разработка сайтов и web-приложений

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

Разработку сайтов и web-приложений часто заказывают вместе, и это разумно. Публичный сайт веб-приложения отвечает за поиск и продажи: он должен быстро открываться, индексироваться поисковиками и объяснять продукт. Само приложение живет за логином, и там важнее скорость работы интерфейса и надежность данных. Мы делаем обе части на общем дизайне и общем API, поэтому пользователь не замечает перехода, а вы не поддерживаете два разных проекта.

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

Процесс создания веб-приложения

Этапы разработки веб-приложения одинаковы для небольшого кабинета и для SaaS-платформы, меняется глубина проработки.

1. Анализ. Разбираем бизнес-задачу, проводим анализ рынка и конкурентов, описываем роли пользователей и сценарии. Если продукт новый, ищем самую короткую дорогу к первой версии, которую можно показать клиентам.
2. Техническое задание. Фиксируем функции, интеграции, требования к нагрузке и безопасности. Техническое задание пишем сами по итогам анализа, от заказчика нужны ответы на вопросы и доступ к людям, которые знают процесс.
3. Прототип. Собираем кликабельные экраны без дизайна и проверяем логику на будущих пользователях. Правка на прототипе обходится дешевле правки в коде.
4. Дизайн. Рисуем интерфейс и дизайн-систему (набор компонентов и правил), чтобы новые экраны собирались быстро и выглядели единообразно.
5. Разработка. Пишем фронтенд и бэкенд, подключаем внешние сервисы, показываем результат после каждого спринта на тестовом стенде.
6. Тестирование. Ручные и автоматические тесты, проверка в разных браузерах и на телефонах, нагрузочные тесты для сервисов с большим трафиком.
7. Запуск и поддержка. Разворачиваем на сервере, настраиваем мониторинг и резервные копии, дальше исправляем ошибки и развиваем продукт по данным аналитики.

Срок каждого этапа зависит от объема, поэтому план с датами даем после брифа.

Что нужно от заказчика

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

Основы frontend-разработки

Фронтенд - это все, что пользователь видит и нажимает. Основы frontend-разработки не меняются годами: HTML, CSS, JavaScript. HTML задает структуру страницы, CSS отвечает за внешний вид и адаптацию под экраны, JavaScript оживляет интерфейс. Поверх этой базы работают фреймворки React, Vue и другие, и выбор между ними влияет на скорость разработки и стоимость поддержки.

Мы пишем на React или Vue с TypeScript (JavaScript с проверкой типов, которая ловит часть ошибок до запуска). React берем для больших приложений со сложным состоянием и множеством экранов, Vue - когда важна скорость старта и простота кода для команды заказчика. Для публичных страниц добавляем Next.js или Nuxt с серверным рендерингом.

Большинство кабинетов и внутренних систем мы делаем как SPA, single page application (одностраничное приложение): браузер загружает приложение один раз, а дальше подгружает только данные. Переходы между экранами идут без перезагрузки, интерфейс отзывается быстрее. Минус SPA в том, что поисковики хуже видят такой контент, поэтому для страниц, которые должны попадать в выдачу, используем серверный рендеринг.

Что важно во frontend-разработке

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

Бэкенд, база данных и интеграции

Любому веб-приложению, веб-сервису или мобильному клиенту нужен сервер, который хранит данные, проверяет права и выполняет бизнес-логику. Связку API и базы данных проектируем до начала кода: описываем сущности, связи и методы, по которым фронтенд и мобильные клиенты будут общаться с сервером. Бэкенд пишем на Python, Go или Node.js, основная база у нас PostgreSQL, для кэша и очередей используем Redis. Для сложного поиска подключаем Elasticsearch, для файлов - объектное хранилище.

Интеграция с внешними сервисами почти всегда нужна с первой версии:

• 1С и учетные системы: товары, цены, остатки, заказы, документы;
• CRM: лиды, сделки, история клиента;
• платежные сервисы и СБП (система быстрых платежей) для оплаты внутри приложения;
• SMS и мессенджеры для входа по коду и уведомлений;
• карты, службы доставки, сервисы аналитики.

Каждый внешний сервис подключаем через отдельный модуль с очередью и повторными попытками. Если платежный шлюз или 1С ненадолго недоступны, пользователь не видит ошибку, а заказ обработается, когда связь восстановится.

Отдельная задача - уведомления. Веб-приложение умеет отправлять push-уведомления в браузер на компьютере и телефоне, если пользователь дал разрешение. Письма, SMS и сообщения в Telegram подключаем как дополнительные каналы.

Безопасность и нагрузка

Веб-приложение открыто в интернет, поэтому защиту закладываем в архитектуру. Пароли храним только в виде хэшей, права доступа к данным проверяем на сервере для каждого запроса. Спрятать кнопку в интерфейсе недостаточно. Настраиваем HTTPS, защиту от перебора паролей и типовых атак из списка OWASP Top 10 (перечень самых частых уязвимостей веб-приложений). Персональные данные храним и обрабатываем с учетом 152-ФЗ, серверы размещаем в России, если этого требует закон или ваша политика.

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

Telegram web-приложение

Telegram web-приложение (Mini App) - это веб-приложение, которое открывается прямо внутри мессенджера по кнопке бота. Пользователю не нужно ничего устанавливать и регистрироваться: Telegram передает приложению его профиль, и сервер проверяет подпись этих данных. Для бизнеса это короткий путь к клиенту, который уже сидит в мессенджере.

Что делают в формате мини-приложения:

• каталог и заказ для кафе, магазина или сервиса доставки;
• запись к мастеру, врачу, на тренировку;
• программу лояльности с картой клиента и бонусами;
• внутренние инструменты для сотрудников: заявки, отчеты, смены.

Технически мини-приложение - обычное веб-приложение на HTML, CSS и JavaScript, чаще на React или Vue, которое подключает библиотеку Telegram для работы с кнопками, темой оформления и данными пользователя. Бота регистрируем через BotFather, там же привязываем адрес приложения. Бэкенд, база и интеграции такие же, как у любого веб-сервиса, поэтому одно ядро может обслуживать и мини-приложение, и сайт, и мобильное приложение.

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

PWA или мобильное приложение

Прогрессивное веб-приложение (PWA, Progressive Web App) - это сайт-приложение на веб-технологиях, которое можно установить на главный экран телефона. Оно открывается без адресной строки, работает при слабой связи за счет кэша и умеет получать push-уведомления, на iPhone - после установки на экран. Одна кодовая база закрывает iOS, Android и компьютер.

Когда выбирать веб-приложение PWA, а когда нативное мобильное приложение для iOS и Android:

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

Мы делаем и нативное приложение, и веб-приложение, поэтому выбор зависит только от задачи.

Создание веб-приложения с нуля и доработка

Создание веб-приложения с нуля мы начинаем с MVP (минимальной версии с главной функцией), если продукт новый и гипотезу нужно проверить на реальных пользователях. Если система уже работает, но устарела или не выдерживает рост, делаем аудит кода и архитектуры и предлагаем план: что переписать, что оставить, как переехать без остановки работы.

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

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

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

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

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