DOU Проектор: Smartdelivery — невеличкий подарунок українському e-commerce

Від редакції:
В рубриці DOU Проектор всі бажаючі можуть презентувати свій продукт (як стартап, так і ламповий pet-проект). Якщо вам є про що розповісти — запрошуємо прийняти участь. Якщо ні — можливо, серія надихне на створення власного made in Ukraine продукту. Питання і заявки на участь надсилайте на editors@dou.ua.

Початок

Всім привіт! Я веб-розробник із Києва, в основному займаюся проектуванням і програмуванням CRM, обожнюю все, що пов’язано із граберами, апі та юзабіліті. Цього року започаткував свою невелику команду, що наразі займається в основному пет-проектами. Можливо, ви чули про наш перший проект — це сайт Гривня Тудей, що розповідає про курс валют і є повністю автоматизованим. Сподіваюсь, що незабаром матиму можливість написати на DOU і про цей сайт, але сьогодні розмова піде про інший проект.

У всіх українських інтернет-магазинів приблизно однакова логіка доставки товарів покупцеві — обираєш склад і отримуєш товар за декілька днів. І мене завжди дивувало, що ніхто, окрім пари топових магазинів, не запропонував покупцеві зручного інтерфейсу вибору цих складів — в кожному інтернет-магазині під час вибору складу доводилось лізти на сайт транспортного сервісу і копіювати звідти номер відділення у сторінку оформлення покупки.

Одного разу я робив сторінку замовлення товару у CRM для української компанії, у якої є мережа складів, які отримують товари цієї компанії службами Нова пошта і Автолюкс. Для максимально простого і зручного вибору складу вирішили зробити інтерфейс, що буде включати у себе список складів і мапу, на якій ці склади розташовані. Користувач обирав склад одразу на сторінці замовлення товару — це пришвидшувало процес і зменшувало кількість помилок у заявах на замовлення товару. Звичайно, довелось написати грабер, що збирав інформацію зі складів, та інтерфейс, що зберігає і віддає цю інформацію у належному вигляді.

Потім стало зрозуміло, що такий діалог було б добре встановити і на декілька інших інтернет-магазинів, що я тоді обслуговував, а базу даних складів для цього треба виносити на окремий сервер. Так з’явився невеличкий відкритий безкоштовний сервіс Smartdelivery.

Реалізація

Зараз я б хотів показати, як це працює, а потім перейти до технічного опису. Як я і казав, є сервер з API, що зберігає і віддає інформацію про склади, та є jQuery-плагін, що вміє звертатись до цього API та взаємодіяти з користувачем. Щоб далеко не ходити, давайте встановимо плагін просто у цю статтю. Тож, спробуйте, як це працює! Вкажіть місто і натисніть на кнопку.

Щоб встановити цей плагін таким чином, досить додати у вихідну сторінку такий код:

<!-- include jquery, google maps, smartdelivery -->
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="//static.smartdelivery.com.ua/v1/dialog/smartdelivery.js" type="text/javascript"></script>
<!-- smartdelivery plugin -->
<script type="text/javascript">
$(function() {
   $('#smartdelivery').smartdelivery({
         getCity: function() {
         	return $('#city').val();
      }
   }); 
});
</script>

Як ви бачите, ми включили скрипти jQuery, Google maps API, Smartdelivery dialog, викликали плагін та розповіли йому, де шукати назву міста, в якому плагін має знайти відділення поштових сервісів.

Для налаштування поведінки і зовнішнього вигляду плагіну у вас є достатньо важелів впливу. Далі коротко про кожен із них.

Контент. Звичайно, ви можете налаштувати вивід лише конкретних служб доставки, якщо ваш інтернет-магазин працює, наприклад, лише з Новою поштою. Також, є можливість виводити діалог українською (за замовчуванням) або російською мовою.

Поведінка. Ви можете задати події для плагіну, що будуть викликатися під час його завантаження, вибору складу, закриття та таке інше.

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

Якщо вас не влаштовує робота діалогу, ви можете запропонувати зміни або написати свій, використовуючи виклики до API. Якщо ви хочете забирати інформацію у бекенді, ви також можете використати відкритий API.

Повний опис з використання плагіну та API ви можете знайти у документації на гітхабі. У цьому ж проекті ви можете запропонувати зміни у розділі Issues.

Що у бекенді?

Архітектура сервісу складається з декількох частин, що легко маcштабувати, і всі вони працюють у стеку LNMP.

API, що аналізує запити, віддає результат у форматі JSON і веде логування. Ця частина написана без фреймворків і максимально використовує кешування, що дає можливість швидко давати відповідь. Якщо у пам’яті немає готової відповіді, PHP аналізує запит, звертається до бази даних, та генерує дані для відповіді, що містять у собі інформацію про склади: адресу, номер, координати складу на мапі та таке інше.

Статичний хост, де зберігаються плагіни і стилі. Налаштування nginx на цьому хості дає можливість швидко віддавати файли великій кількості клієнтів.

Рушій для оновлення даних та генерації сайту — парсить сайти сервісів і генерує сайт. Парсер та інші інструменти написані на Yii2.

Сайт — інший статичний хост з HTML-кодом сайту, що генерує рушій щогодини для оновлення статистики.

Наразі база даних оновлюється декілька разів на день і містить дані про три сервіси доставки: Нова пошта, Автолюкс та поштомати Приватбанку.

Тож, так це все працює. Щоб слідкувати за змінами та знати більше, заходьте до нас на гітхаб та не забувайте підписатись на новини.

Подальші плани

Звичайно, продовжувати роботу над сервісом можна до нескінченності. Наразі сильно не вистачає рішення для мобільних девайсів. Хотілося б зробити фільтрацію складів більш зручною, додавши сортування за вагою та часом роботи складів. Також є ідея зробити плагін, що генерує випадаючий список міст або автосаджест зі списком міст. До API треба далі додавати більше транспортних сервісів (планую почати з Meest Express та InPost).

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

Тому хочеться і далі мати сили і ресурс для розвитку open source проекту, що допоможе зробити український e-commerse зручнішим. Якщо у вас чи ваших друзів є інтернет-магазини, розкажіть їм — Smartdelivery вже існує, його просто встановити та ним зручно користуватись.

Якщо у вас залишились коментарі чи питання, ви можете задати їх під статтєю, я спробую відповісти на кожен :-)

Маєте важливу новину про українське ІТ? Розкажіть спільноті. Це анонімно.І підписуйтеся на Telegram-канал редакції DOU

👍НравитсяПонравилось0
В избранноеВ избранном0
Подписаться на автора
LinkedIn



Підписуйтесь: Soundcloud | Google Podcast | YouTube


17 комментариев

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

Отличная идея! Успехов!

Спасибо! Взял на заметку.

У всіх українських інтернет-магазинів приблизно однакова логіка доставки товарів покупцеві — обираєш склад

WTF is that? 8 років користуюсь онлайн магазинами і ні разу не обирав склад. Для чого?

есть же копеечная доставка... если вам выгодней потратить время вместо заплатить 35 грн, то у меня для Вас плохие новости.

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

к чему переход на личности?

Ок. Извиняюсь. Вредная привычка троллить.

А якщо НП в 1,5хв від дому?

копеечная доставка
 — для цього треба сидіти вдома і чекати

По этой причине не пользуюсь курьерской доставкой — нужно подстраиваться под курьера и все такое. В НП проще сходить.

Я так понимаю, рубашки вы тоже не стираете... сразу в мусор?

Так це ж не для користувачів DOU, а для їх клієнтів. Для багатох із них 35 грн — це гроші.

Я думаю, що факт, який каже про те, що Нова Пошта відкриває по два-три склади щодня, а ПриватБанк долучився до цього процесу, відкривши поштомати, відповідає на ваше питання. Звичайно, конкретно ви і ще певна частина українських покупців може не забирати покупки на складах, але у всіх інтернет-магазинів, з якими я працював, доставка Новою поштою чи подібними сервісами охоплює вагомо більшу половину замовлень.

Ну то може це треба було додати при описі проблеми? Я думав навпаки, що ніхто не ходить за товаром сам, це ж беззмістовна трата часу. Вигідніше замовити до дверей.

Буває швидше і простіше зайти на найближче відділення Нової Пошти, ніж чекати дзвінків кур’єра, пояснювати йому дорогу, бути вдома у визначений час і т.п.

Я дивлюсь на проблему з іншого боку — в мене офіси складів є просто під офісом і під домом, і мені простіше спуститися до них у зручний час, а не чекати на кур’єра.

А я думав, що це очевидно, тож нехай це тепер навіки залишиться в коментарях :-)

Все круто, дякую, скоро заберу для свого проекту.

Лише є один неприємний баг — якщо вже відкрив якесь місто(а можеш це зробити випадково, як я щойно), то не працює кнопка закриття (Х) і неможливо повернутися до початкового вікна із вибором міста.

p.s. Chrome, Ubuntu

Дякую!

Дивно, досі такої проблеми не було у клієнтів, та і я в хромі під убунтою розробляв. Будь ласка, під час тестування, якщо цей баг знову буде, напишіть мені.

Подписаться на комментарии