Почему этот кейс будет полезен каждому?
Ответ — этот проект особенный по многим параметрам:
- Фронт-энд — S.P.A приложение.
- Серверный пререндеринг для SEO
- Самописная CMS на Ruby on Rails.
- Это единственный нам известный ecommerce проект с фронт-эндом S.P.A + серверным пререндерингом в Рунете
- Этот проект использует полноценную и исправно функционирующую связку: Сайт+CRM+Сервисы+Складской софт.
Наша студия уже более трёх лет работает с Петром Максаковым и Галиной Юдашкиной в направлении развития различных сервисов и стартапов в интернет среде. Предыдущие и успешные проекты — это старая и новая версия проекта Lcycle.
Пётр вынашивал идею создания этого проекта уже давно, но вот однажды он позвонил нам и сказал: “Я собрался с мыслями, идеями и готов к старту”.
Задачи которые перед нами поставил заказчик:
- создать современный ресурс, который должен идеально работать как на десктопе так и на мобильных устройствах
- объединить воедино, склад (1С. 7.7), готовящийся к открытию оффлайн магазин, интернет-магазин и систему управления клиентами
- создать административную панель, имеющую возможность масштабироваться в систему управления не только интернет магазином, но и другими ресурсами (блог компании, основной корпоративный сайт)
- создание корпоративного UI кита который будет масштабироваться и на другие ресурсы компании
Мы работаем на различных коробочных системах, от пресловутого WP и до популярного и всеми “любимого” Битрикса.
К сожалению, ни одна система из коробочных, не позволяет нам реализовать все эти задачи, не применив при этом костыли высотой в 20 этажный дом.
Битрикс
Поэтому решили поднять свое приложение на Ruby on Rails, используя опыт таких гигантов индустрии, как Shopify.
Задачи, поставленные перед нами:
- создать современное веб-приложение, которое идеально работает как на десктопе так и на мобильных устройствах
- приложение, само-собой, должен быть SEO-friendly.
- создать административную панель с возможностью масштабироваться в системе управления не только интернет-магазином, но и другими ресурсами (блог компании, основной корпоративный сайт).
- объединить воедино, склад ведущийся еще на то время в 1С. 7.7, готовящийся к открытию магазин, интернет-магазин и систему управления клиентами (тут и Битрикс бы подошёл, но по всем остальным аспектам большой пролёт) выбрали RetailCRM, ниже тезис почему.
- создание корпоративного UI кита, применимый и к другим ресурсам компании — поддержка и развития UI кита с коробочными системами также проблематична и больше усложняет её,нежели оптимизирует.
А теперь по порядку. Этап проектирования и дизайна. Тут тоже были особенности, мы всегда клиенту предлагаем два подхода — классический (привычный) и мобайл фёрст — проектирование.
Привычный — это когда мы проектируем и утверждаем дизайн-концепт, например, главной страницы.
Мобайл фёрст, это когда мы сначала продумываем мобильную версию, а уже исходя из этого, работаем над остальными разрешениями. (Нет смысла долго разжевывать почему это правильно, тут подробно описаны базовые принципы)
Мы уже давно работаем по принципам построения отзывчивого дизайна в наших проектах, поэтому разработка и проектирования мобайл фёрст это единственно верный процесс в построении отзывчивого дизайна.
Мы рады, что клиент, согласился с нашими доводами и пошли по этому пути, так как большинство клиентов бояться данного метода и предпочитают “поиграться с главной”.
Инструментарий проектирования: На тот момент работали в Axure, структурно каталог достаточно простой, поэтому на этом этапе мы много не буксовали, хотя всё равно допустили несколько ошибок, так как на тот момент было мало информации по коллекциями и тем товарным предложениям которые будут. “Друзья мои, контент, контент решает” повторяюсь всем моим заказчикам.
Фирменными цветами выбраны, новые фирменные цвета “бело-золотые”. Существовали и существуют несколько вариантов как главной так и страницы каталога в десктопе. Остановились на вторых так как их легче обновлять при смене коллекций.
Valentin Yudashkin from N E T L A B on Vimeo.
Все решение по UX больше связаны с front-end программированием и в данном случае была непосредственная работа UX/UI специалиста и front end программиста в связке.
Реакция активных элементов при наведении:
Valentin Yudashkin from N E T L A B on Vimeo
Процесс выбора размера:
<pпроцесс подбора=”” товара=”” в=”” каталоге:<=”” p=””>
Процесс оформления заказа:
Для реализации веб-приложения нами был выбран такой технологический стек:
- Фронт-энд SPA на AngularJS (1.6)
- Бэк-энд приложение на Ruby on Rails + скрипты на ruby для серверного пререндеринга страниц SPA приложения (для обеспечения концепции seo friendly)
- База данных PostgreSQL
- In-memory хранилище для кэширования Redis.
В бек-энд приложении были использованы несколько гемов от Shopify. Они реально рубят фишку в ecommerce разработке.
Интеграции, омниакальность, CRM и прочий “адок”.
Решили использовать в качестве основы RetailCRM, можно долго рассуждать какая из популярных CRM для магазина лучше, но могу с 80% гарантией сказать что для небольших магазинов круче RetailCRM просто нет. Можете в комментах писать растолкую почему, назову единственный факт. Это CRM создана специально для e-commerce исходя из сложностей и особенностей этих продаж.
Складская система 1С. версия, 7.7 это трешь, но “сказано — сделано”.
Общая схема выглядит таким образом:
Мы считаем, что у каждого из специалистов должен быть доступ только к интерфейсу того сервиса с которым он работает. Невозможно сделать идеальный кухонный комбайн, придётся чем-то жертвовать. По этой же причине мы отказались работать и с Битриксом и Битрикс-24 в этом проекте. Если кто-то работал с заказами в Битриксе меня прекрасно поймет.
По 1с всё понятно тут всё без изменений, такие требования заказчика. Из системы на наше веб приложение мы получаем товарные остатки и стоимость. В систему из CRM приходит информация по заказам.
Вся контентная часть администрируется непосредственно из административной панели приложения. Описания и изображения редактируются из того же приложения, а не в складской программе.
Административная часть приложения — отдельное SPA приложение, но уже без серверного пререндеринга, так как сео для админки не нужно.
RetailCRM — я уже много дифирамбов им пел, это по моему мнению единственная быстроразвивающиеся система для e-commerce проектов на территории Рунета. Все основные сервисы с легкостью интегрируются, много полезного функционала по управлению клиентами, от моих любимых триггеров до расходов. P.S Напишу как нибудь обзор. Но камень в их огород всё равно кину, API для Ruby on Rails написан три года назад и не обновлялся, тоже касается и складских систем.
Что сделали:
- полная интеграция с Яндекс.Кассой и Атолом
- около 30 триггеров (рассылки, оповещения, работа с списками, работа с менеджерами)
- передача заказов в 1с
- многоскладовость, резервация товара
- подключение сервисов ( GA, службы доставки)
Интеграция с GA даёт много возможностей, если вы хотите получить сквозную аналитику за дешево — то это то, что вам нужно!
Valentin Yudashkin from N E T L A B on Vimeo.
