Соберите проект #
Выберите интересующую вас услугу

Этапы разработки веб-продукта: сайта, приложения

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

    Создание любого IT-проекта проходит в два больших этапа. На первом проводим аналитику и проектирование, а на втором — разработку. В статье рассказываем, как разрабатываем веб-продукты.

    Основные этапы разработки сайта или приложения

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

    Дальше проект передается команде разработчиков. Она начинает работу по web-проекту на основе ТЗ от заказчика: аналитики, прототипов и дизайн-концепции. Теперь о каждом из этапов — подробнее.

    Разработка дизайн-макетов

    Дизайн-макет — это набор всех страниц сайта или экранов приложения под необходимые разрешения и устройства. В дизайн-макете также описаны правила использования всех элементов.

    На этом этапе работают дизайнеры и менеджер. В своей работе они опираются на аналитику, прототипы, дизайн-концепцию и SEO-рекомендации.

    Задача менеджера — подобрать на проект дизайнеров с необходимым опытом. Он также контролирует чистоту макетов и единство стилистики.

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

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

    В финале макеты готовятся к верстке, формируется UI-кит. Это PSD- или Sketch-файлы с полезными элементами для дизайна интерфейсов и сценарии их взаимодействия с пользователем. Тут же описываются все типы заголовков и их поведение при изменении верстки. UI-кит помогает frontend-разработчикам во время верстки сохранить стилистическое единство всех разделов.

    Программирование

    Теперь, когда дизайн-макет готов, за работу берутся frontend-разработчики. На основе дизайн-макета, UI-кита, архитектуры продукта они программируют визуальные решения, пользовательские сценарии и функциональность. Их цель — сделать продукт удобным для пользователей и эффективным с точки зрения бизнеса.

    Frontend-разработчики:

    • Пишут скрипты, при помощи которых подгружается контент.
    • Делают элементы интерактивными.
    • Реализуют сложные анимации и визуальные эффекты.
    • Пишут API для интеграции с бэкендом или CMS-системой. API — это описание способов взаимодействия программ между собой. Она позволяет связать действия пользователя с бизнес-логикой продукта.
    • Пишут юнит-тесты для проверки, насколько корректно работает та или иная функциональность.

    Параллельно с frontend-разработкой ведется и backend. Backend-разработчики реализуют процессы, происходящие на серверной части сайта в ответ на действия пользователя. Они делают так, чтобы продукт функционировал:

    • Программируют серверную часть.
    • Проектируют базы данных.
    • Настраивают пользовательские роли и управление в админпанели.
    • Разрабатывают API для интеграции со сторонними сервисами.

    Тестирование

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

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

    Релиз сайта или приложения

    После завершения всех этапов:

    • Переносят продукт на сервер заказчика.
    • Передают инструкцию по использованию.
    • При необходимости проводят обучение пользователей.

    Как правило, компания-разработчик не бросает работу над проектом после релиза.

    Развитие и поддержка

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

    • Гарантийное обслуживание. Студия разработки предоставляет гарантию на разработанный продукт на фиксированный срок. Например, вскоре после релиза приложения в нем обнаружили ошибки, связанные с кодом разработчиков. Если это произошло в срок действия гарантийного обслуживания, то исправления вносятся бесплатно.
    • Абонентское обслуживание. Часто используется для ecommerce-проектов, которым важно, чтобы сайт, приложение или маркетплейс всегда был доступен. Специалисты техподдержки должны при любом форс-мажоре, например, хакерской атаке, быстро устранить проблему.
    • Развитие проекта. В этом случае команда специалистов дорабатывает и улучшает функциональность и интерфейс продукта: добавляет новые фичи, меняет дизайн, занимается контекстной и таргетированной рекламой, SEO-оптимизацией, контент-наполнением.

    Заказчику выгоднее пользоваться услугами технической поддержки того же подрядчика, что и разработал веб-сервис. Дальнейшими работами по проекту занимается команда специалистов (менеджеры, дизайнеры, разработчики, аналитики), которая разрабатывала сайт или приложение. Им не надо долго вникать в проект или чужой код.

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

    Еще одно преимущество для заказчика — готовая команда высококвалифицированных специалистов. Техподдержка на аутсорсе освобождает время и средства компании. Не надо тратить ресурсы на открытие технического отдела, искать и нанимать специалистов.

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

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

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

    Среди других проблем, которые быстро выявляет мониторинг:

    • проблемы с хостингом;
    • баги в CMS;
    • ddos-атака;
    • закончился срок действия SSL-сертификата;
    • не установлены критические обновления CMS;
    • заканчивается срок регистрации домена и т.д.

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

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

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

    Продолжая пользоваться сайтом, я даю согласие на работу с Cookie и Яндекс.Метрика для сбора технических данных.