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». Я добавил в него версию для разработки и релиза, зависящая от команды, которую вызываешь в консоли.
Прочее
После разработанного интерфейса, оставалось только заполнить сайт контентом, настроить рекламные компании и идти вперёд — к успеху!
