Кейс интернет-магазин "Юдашкин"

20 апреля 2018, 17:50
1

Кейс интернет-магазин "Юдашкин"

Административная часть приложения - отдельное SPA приложение.

Всем привет, это наш первый кейс на COSSA (все остальные у нас на сайте).

Почему мы захотели начать с него? 



Ответ - этот проект особенный по многим параметрам:

  1. Фронт-энд - S.P.A приложение.
  2. Серверный пререндеринг для SEO
  3. Самописная CMS на Ruby on Rails.
  4. Это единственный нам известный ecommerce проект с фронт-эндом S.P.A + серверным пререндерингом в Рунете
  5. Этот проект использует полноценную и исправно функционирующую связку: Сайт+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

Процесс выбора размера:


Процесс оформления заказа:


Для реализации веб-приложения нами был выбран такой технологический стек:


  1. Фронт-энд SPA на AngularJS (1.6)
  2. Бэк-энд приложение на Ruby on Rails + скрипты на ruby для серверного пререндеринга страниц SPA приложения (для обеспечения концепции seo friendly)
  3. База данных PostgreSQL
  4. 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.

Действительно, адаптация для мобильных устройств сейчас выходит на первый план. Это требование в прошлом 2017 году даже сильно повлияло на передовые разработки вебдизайна.
Ответить?
Введите капчу


Вход на cossa.ru

Уже есть аккаунт?
Авторизуйся через VK:
Vkontakte
Не забудьте написать email на странице своего профиля для управления рассылкой