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

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

    Этапы разработки веб-продукта: сайта, приложения
    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-атака. Покупатели не могут совершить покупки и уходят к конкуренту. Заказчик теряет деньги, рекламные бюджеты сливаются.

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

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