Создание интернет-магазина для аптеки

В ноябре 2020 года в новосибирское отделение нашей веб-студии обратился руководитель IT отдела компании «Ай-Ти-Аптека». Компания, занимающаяся автоматизацией и обслуживанием аптечного бизнеса (от небольших аптек до крупнейших розничных сетей) нуждалась в новом универсальном сайте, со специфическим функционалом для его работы, который требовалось разработать.

Задачи проекта

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

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

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

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

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

За данные об остатке товаров отвечала другая база на сервере, которую также требовалось связать с новым ресурсом. В общем, было необходимо по нескольким параметрам “соединить” экосистему компании «Ай-Ти-Аптека» с новыми сайтами их клиентов, обеспечив автоматическую выгрузку всех нужных товаров в заданный интервал времени, в соответствии с ассортиментом и остатком в каждой конкретной аптеке. Все ресурсы для аптек не должны были иметь отдельного собственного имени первого и второго уровня, и должны были разворачиваться на домене третьего уровня сайта itapteka.ru.

Из пожеланий заказчика и Технического Задания было понятно, что основными требованиями к функционированию сайта являются удобная и простая административная панель, простая смена дизайна (с достаточным количеством шаблонных модификаций) качественная “подвязка” через API баз данных заказчика для реализации информационного обмена (импорта/экспорта), с функцией бронирования товаров в аптеках.

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

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

Через несколько дней у нас были ответы на вопросы, желаемая схема взаимодействия сайта и программного обеспечения заказчика, с отображением основных элементов структуры (сайт сети аптек, статусы бронирования, остатки товаров, загрузка каталога товаров, его характеристик, описаний и изображений товаров), jpeg-изображения всех страниц нового сайта, включая главную страницу и образец карточки товара, оформление личного кабинета, xlsx-файл с перечнем всех имеющихся в базе товаров (результат выгрузки с сервера) для экспорта/импорта в необходимом формате.

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

Прежде чем окончательно озвучить точные цифры по созданию сайта «Ай-Ти-Аптека», наш руководитель проектов систематизировал и подготовил документы для каждого сотрудника веб-студии (дизайнера, веб-мастера, программиста, системного администратора) и попросил внимательно изучить их, задать конкретные вопросы, уточнить все неясные моменты и оценить сроки на реализацию каждого блока работ (дизайн, верстка, программирование, серверные работы). На основании этих данных, полученных от каждого специалиста, было подготовлено общее коммерческое предложение с перечнем всех необходимых работ, точными сроками на их выполнение и стоимостью “под ключ”. После одобрения коммерческого предложения руководством компании «Ай-Ти-Аптека» мы подготовили договор и выставили счет на оплату.

Реализация цели

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

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

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

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

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

Системный администратор подготовил площадку под новый проект и сделал необходимые настройки для сервера, веб-мастер развернул на рабочей площадке движок сайта (OcStore), а программист занялся разработкой функционала для взаимодействия всех необходимых блоков с API. Требовалось связать серверы заказчика с новым сайтом так, чтобы взаимодействие происходило корректно и с заданной периодичностью. API должна была реализовывать обмен данными между базами данных и CMS. Обновление баз данных должно было осуществляться каждый час.

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

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

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

Так, пришлось, например, создавать уникальный код заказа, получения и передачи информации о заказе, статусам заказа (“в работе”, “отправлен” и т.д.) и другим параметрам. Все это должно было работать быстро, корректно и логично. Поэтому заказчик практически круглосуточно был на связи с нами, оперативно давал пояснения и принимал нужные решения.

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

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

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