Разработка веб-приложений: обзор от Surf
В этой статье расскажем о разработке web-приложений и о том, для каких отраслей бизнеса она может стать дополнительным источником дохода. Для начала определимся с терминологией.
- Веб-разработка — это максимально общее понятие: процесс создания веб-сайта или веб-приложения.
- Веб-сервис — это программа в сети, которая предоставляет услугу или отвечает определённому запросу пользователя. Например, поиск билетов: на странице сайта пользователь вводит данные, а веб-сервис обращается к авиакомпаниям, которые непосредственно продают билеты. В результате пользователь видит подобранные по его запросам билеты.
Веб-приложение — это сайт, который не просто содержит информацию, а имеет определённую функциональность. Часть кода, обрабатывающего бизнес-логику, выполняется на сервере. Не стоит его путать с мобильным приложением — это самостоятельный продукт, который пользователь скачивает из сторов.
Внедрение веб-приложения в бизнес-модель оправдано, когда проект подразумевает сложную бизнес-логику, авторизацию пользователей и работу с большим объёмом данных.
- Работает на всех устройствах. Бизнес-логика может отрабатываться на сервере, а для отображения пользовательского интерфейса подойдет даже самое маломощное устройство с браузером.
- Нет проблемы обновления ПО до последней версии — каждый раз, заходя на сайт, пользователь работает с самой актуальной.
- Можно контролировать хранение данных и выполнение бизнес-процессов.
Минус веб-приложений: разработка займёт больше времени и ресурсов, чем создание простого веб-сайта. Однако при грамотном планировании все затраты окупятся, а ваш продукт значительно расширит аудиторию.Мы с 2011 года создаём приложения, в том числе для веб: ERP, стриминговые сервисы, системы управления — от проектирования до релиза и дальнейшей поддержки. Среди наших клиентов: KFC, Medium Quality, IZZI.
Далее расскажем, из каких этапов состоит веб-разработка.
1 этап разработки web-приложений: предпроектное исследование
Перед стартом разработки web-приложений, мы рекомендуем провести предпроектное исследование. Оно решает несколько задач, ключевых для коммерческого успеха продукта:
- Помогает определить целевую аудиторию и понять, чего она ожидает от сервиса. В работе над созданием web-приложения это задача бизнес-анализа и UX-исследования.
- Выделяет приоритетные функции, которые должны быть в первой итерации проекта. Этот этап одинаково актуален для мобильной и веб-разработки. Для того чтобы приоритизировать фичи, мы используем CJM (customer journey map) — составляем карту пути пользователя. Она позволяет проанализировать потребности пользователей и особенности его взаимодействия с сервисом. Обладая этой информацией, проще создать удобное и понятное веб-приложение.
Определяет путь развития продукта и закладывает основу для дальнейшего роста. На этом этапе нужно учитывать, насколько большая нагрузка будет на приложение с учётом роста аудитории пользователей и добавления новой функциональности. Проектирование архитектуры — важный этап, который влияет на дальнейшее развитие сервиса и сокращает число ошибок на первых этапах.
В Surf предпроектное исследование проводит специальное консалтинг-подразделение Product Lab. Наши эксперты формируют и проверяют гипотезы, помогают настроить работу продуктовых команд, строят roadmap продуктов.
2 этап веб-разработки: проектирование
Проектирование в веб-разработке — это многоуровневый процесс, которым одновременно заняты сразу несколько команд с разной технической квалификацией. Условно можно выделить два уровня проектирования:
- проектированиетехнического дизайна — построение программного продукта, соответствующего входящим техническим требованиям. Коротко этот процесс можно проиллюстрировать схемой:
Проектирование технического дизайна
- проектирование пользовательского дизайна. На этом этапе мы продумываем основные и второстепенные сценарии, раскладываем действия пользователей на функциональные блоки. Тестируем прототип на реальных пользователях: собираем фокус-группы, предоставляем кликабельный прототип интерфейса, ставим несложные задачи по взаимодействию с продуктом и контролируем процесс. Это позволяет с каждой итерацией улучшать прототип и продвигаться на пути к созданию удобного продукта с точки зрения UX.
Приложение собрано в виде кликабельных чёрно-белых прототипов в Invision или Figma
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.
