Поэтапная инструкция по правильной разработке интернет-магазина

25 января 2013

в разделе Технологии

В данной статье хотелось бы рассказать о поэтапном создании интернет-магазина на примере реализованного нами проекта — магазина шин «Ваши шины». Результаты разработки Вы можете увидеть по адресу vashi-shiny.com.ua. Итак, с чего же начинается процесс разработки интернет-магазина?

Правила разработки интернет магазина

Этап 1. Анализ запроса от заказчика

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

Мы оцениваем требуемый функционал — какие функции будут полезными в интернет-магазине шин? Начнём с базового функционала клиентской части магазина:

  • Каталог продукции с разбивкой на категории
  • Возможность оформить покупку через магазин
  • Информация о условиях покупки, доставки, оплаты продукции
  • Вспомогательная информация по теме (не забываем о дальнейшем продвижении ресурса)
  • История покупок для зарегистрированных пользователей

Далее, обсуждаем дополнительные функции, которые могут быть полезными с учётом тематики:2

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

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

  • Возможность с лёгкостью управлять заказами;
  • Простую работу с каталогом;
  • Возможность проведения акций на сайте;
  • Систему ведения статистики по продажам;
  • Возможность создавать «наборы» позиций — ручная привязка товаров друг к другу в панели администрирования.

Определив основную концепцию магазина, рисуем примерную структуру сайта:

Отдельно определяем структуру каталога:

Этап 2. Разработка технического задания

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

Этап 2.5 Разработка структурных макетов страниц

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

Этап 3. Создание дизайн-макетов страниц ресурса

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

Этап 4. Вёрстка страниц ресурса

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

Этап 5. Разработка программной части

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

Этап 6. Тестирование веб-сайта

Следующий, крайне важный этап — тестирование реализованного функционала веб-сайта. Корректное тестирование позволяет избежать значительных проблем с работой веб-сайта в дальнейшем. Более подробно узнать о тестировании веб-сайтов вы можете в нашей статье «Процесс тестирования веб-сайта».

Этап 7. Размещение веб-сайта на сервере

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

В результате…

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

Узнайте, почему клиентам так нравится работать с нами