В этой статье расскажем о разработке web-приложений и о том, для каких отраслей бизнеса она может стать дополнительным источником дохода. Для начала определимся с терминологией, затем рассмотрим этапы разработки веб-приложений. 

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

Внедрение веб-приложения оправдано, когда проект подразумевает сложную бизнес-логику, авторизацию пользователей и работу с большим объёмом данных.

Преимущества веб-приложений:

• Работает на всех устройствах. Бизнес-логика может отрабатываться на сервере, а для отображения пользовательского интерфейса подойдет даже самое маломощное устройство с браузером.
• Нет проблемы обновления ПО до последней версии — каждый раз, заходя на сайт, пользователь работает с самой актуальной.
• Можно контролировать хранение данных и выполнение бизнес-процессов.

Минус веб-приложений: разработка займёт больше времени и ресурсов, чем создание простого веб-сайта. Однако при грамотном планировании все затраты окупятся, а ваш продукт значительно расширит аудиторию. Мы с 2011 года создаём приложения, в том числе для веб: ERP, стриминговые сервисы, системы управления — от проектирования до релиза и дальнейшей поддержки. Среди наших клиентов: KFC, Medium Quality, IZZI.

Расскажем, из каких этапов состоит веб-разработка.

1 этап разработки web-приложений: предпроектное исследование

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

• Помогает определить целевую аудиторию и понять, чего она ожидает от сервиса. В работе над созданием web-приложения это задача бизнес-анализа и UX-исследования. 
• Выделяет приоритетные функции, которые должны быть в первой итерации проекта. Этот этап одинаково актуален для мобильной и веб-разработки. Для того чтобы приоритизировать фичи, мы используем CJM (customer journey map) — составляем карту пути пользователя. Она позволяет проанализировать потребности пользователей и особенности его взаимодействия с сервисом. Обладая этой информацией, проще создать удобное и понятное веб-приложение.

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

В Surf предпроектное исследование проводит специальное консалтинг-подразделение Product Lab. Наши эксперты формируют и проверяют гипотезы, помогают настроить работу продуктовых команд, строят roadmap продуктов.

2 этап веб-разработки: проектирование

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

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

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

3 этап: разработка веб-приложения

В веб-разработке обычно используется: HTML (для разметки веб-страниц), CSS (для разметки стилей), JavaScript (для создания диалоговых окон, анимаций, отправки форм). Для создания серверных приложений множество языков, например, Kotlin, Golang или Python. Кроме этого, используются фреймворки: React, Angular и Vue.js. Они нужны для ускорения процесса разработки, так как содержат готовые решения для большинства рутинных задач. 

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

К универсальным технологиям относится Flutter Web. С помощью этой кроссплатформы от Google можно на единой кодовой базе создавать мобильные, веб и десктоп-приложения. Это открывает бизнесу новые возможности: при помощи одного фреймворка можно запустить универсальное приложение или оперативно заменить существующее, если его удалили из сторов.

Схематично процесс веб-разработки можно представить так:

• Начало процесса — поступает сообщение о готовности проекта к этапу разработки технического решения.
• Проверка качества — готовность материалов для разработки (проверка по чек-листу).
• Принятие решения по результатам проверки — проверка успешно пройдена и можно приступать к разработке, или не пройдена и тогда требуется доработка.
• Реализация — построение продукта, согласно требованиям.
  • Создание или уточнение концептуальной архитектуры решения — для создания общего верхнеуровневого облика будущего решения.
  • Создание информационной модели —  для выделения потоков данных в будущем проекте.
  • Создание функциональной схемы — для детального описания каждой функции системы.
  • Спецификация микросервисных API.
  • Создание инфраструктуры — определение объёма необходимых инфраструктурных мощностей, структуры и конфигурации их развёртывания.
  • Уточнение схемы развёртывания ПО.
• Завершение — проект готов к использованию.

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

4 этап: тестирование веб-приложений

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

Технологии для тестирования веб-приложений, которые использует команда Surf

• Charles и Proxyman — для чтения и изменения трафика. Хотя для чтения вполне подходит и стандартный DevTools в браузере, однако этими утилитами удобно подменять ответ, если это необходимо.
• Postman — помогает найти ошибки в API.
• Browserstack — помогает, не меняя рабочее место, протестировать веб-приложение на разных браузерах и версиях.
• Cypress — инструмент для end-to-end тестирования, который облегчает и уменьшает нагрузку на ручных тестах.

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

5 этап: поддержка или передача инхаус

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

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

The Hole — платформа видеостриминга для Medium Quality. Наша команда разработала веб-приложение для управления контентом с помощью React+Ant Design. Это рабочий инструмент для контент-менеджеров, в котором они публикуют видео и отправляют пользователям уведомления, добавляют дополнительную информацию и анализируют статистику просмотров в режиме онлайн.

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

Необанк на Flutter — концепт универсального приложения для современного банка. Мы продемонстрировали, что на Flutter можно создать универсальный продукт сразу для трёх платформ: мобильных, веба и десктопа. Применение кроссплатформы снизит бюджет, трудозатраты и риски на 60%. Во Flutter приложении доступны те же привычные функции, что и в мобильном приложении банка: карты (с общим и разделённым балансом); счета и цели (копилка, дебетовый и кредитный счёт); история (траты за каждый месяц); автоплатежи (по номеру телефона по QR-коду).

Веб-клиент для платёжной системы — быстрая и удобная отправка денег между странами. Наша команда за 4 месяца разработала веб-клиент для связи пользователей с процессингом платёжной системы. У компании появился собственный веб-сервис, через который взаимодействуют партнёры с системой денежных переводов. Функциональность позволяет отправлять и выплачивать деньги на расстоянии. Проект предполагает развитие и масштабирование. В дальнейшем можно расширить функциональность, увеличить количество направлений отправки и кастомизировать интерфейс.

IZZI: маркетплейс автоуслуг — b2b-решение для поставщиков автоуслуг. За 7 месяцев разработчики Surf создали web-приложение и нативные (iOS и Android) для автовладельцев и корпоративных клиентов. Сотрудники со стороны агрегатора могут добавлять, активировать и деактивировать точки обслуживания, редактировать информацию о них и записывать клиентов на автоуслуги. В мобильном приложении IZZI DRIVE b2c-клиенты могут искать точки обслуживания и подбирать стоимость услуг для своих автомобилей. Выбрать подходящие точки обслуживания можно на карте, используя фильтры по параметрам, времени и расстоянию.

Подведём итоги

Веб-приложение для бизнеса — это возможность предоставить своей аудитории ещё один канал для цифрового взаимодействия. Такой вид доставки цифрового продукта до пользователей подойдёт собственникам бизнеса во многих сферах: e-commerce (онлайн-магазины и маркетплейсы), финтех (банки и платёжные системы), онлайн-услуги (аренда жилья или поиск билетов).

Мы в Surf работаем по стандарту и для реализации веб-приложения используем следующие этапы:

• предпроектное исследование;
• проектирование;
• разработка;
• тестирование;
• развитие и поддержка.

На каждом шаге мы планируем спринты и сдаём отчетность о проделанной работе. За соблюдением сроков и объёма работ при создании веб-приложения следит ответственный project manager.