Задача

ArtCeil

ArtCeil — это компания поставляющая потолочные покрытия по всей России.

Техническое задание

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

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

Я обговорил детали с заказчиком и взялся за back-end приложение.

Back-end

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

Чтобы манипулировать всеми моделями, пришлось настроить панель администрирования.

Поскольку предполагалось, что сайт будет одно-страничным, следовало разделить серверную часть от части интерфейса. В этом мне помог DjangoREST Framework. Вмести с этим инструментом, я создал REST Api для запроса к данным моделей каталога.

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

В момент разработки моделей и REST Api, для надёжности их работы, я покрывал их тестами.

Mail сервер и оповещения

Чтобы заказчик во время узнавал, когда кто-нибудь выполнилял целевое действие на сайте, ему нужно было реализовать собственный mail сервер, вместе с sms и email оповещениями, настравиваемыми через панель администрирования.

Для mail сервера я интегрировал на Ubuntu сервер iRedAdmin. Эта панель администрирования позволяет гибко настраивать почтовые ящики и пользоваться почтовым клиентом.

Design

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

Front-end

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

Внутри приложения я использовал глобальное хранилище Redux для обмена данными между React компонентами, вместе с redux-form для обработки форм.

Я разделил приложение на несколько модулей (reducers):

Во время разработки модулей, я старался покрывать их unit-тестами.

Для переходов между страницами, я использовал react-router. Чтобы запрашивать данные у REST Api, выбрал библиотеку superagent. Для уменьшения времени ожидания пользователем данных каталога, я использовал надстройку над indexedDB для асинхронных запросов к хранилищу – localforage. Если данные были в хранилище, они оттуда вынимались, а позже обновлялись в фоновом режиме.

Вся front-end часть собиралась сборщиком «Webpack». Я добавил в него версию для разработки и релиза, зависящая от команды, которую вызываешь в консоли.

Прочее

После разработанного интерфейса, оставалось только заполнить сайт контентом, настроить рекламные компании и идти вперёд — к успеху!

  • Форма добавления продукта в корзину

  • Каталог

  • Главная страница панели администрирования

  • Главная страница

  • Мобильная версия формы вопроса

  • Форма заказа

  • Администрирование продукта

  • Список продуктов в панели администрирования