От редакции:
В рубрике DOU Проекторвсе желающие могут презентовать свой продукт (как стартап, так и ламповый pet-проект). Если вам есть о чем рассказать — приглашаем поучаствовать. Если нет — возможно, серия вдохновит на создание собственного made in Ukraine продукта. Вопросы и заявки на участие присылайте на valentina@dou.ua.
Початок
Всім привіт! Я веб-розробник із Києва, в основному займаюся проектуванням і програмуванням CRM, обожнюю все, що пов’язано із граберами, апі та юзабіліті. Цього року започаткував свою невелику команду, що наразі займається в основному пет-проектами. Можливо, ви чули про наш перший проект — це сайт Гривня Тудей, що розповідає про курс валют і є повністю автоматизованим. Сподіваюсь, що незабаром матиму можливість написати на DOU і про цей сайт, але сьогодні розмова піде про інший проект.
У всіх українських інтернет-магазинів приблизно однакова логіка доставки товарів покупцеві — обираєш склад і отримуєш товар за декілька днів. І мене завжди дивувало, що ніхто, окрім пари топових магазинів, не запропонував покупцеві зручного інтерфейсу вибору цих складів — в кожному інтернет-магазині під час вибору складу доводилось лізти на сайт транспортного сервісу і копіювати звідти номер відділення у сторінку оформлення покупки.
Одного разу я робив сторінку замовлення товару у CRM для української компанії, у якої є мережа складів, які отримують товари цієї компанії службами Нова пошта і Автолюкс. Для максимально простого і зручного вибору складу вирішили зробити інтерфейс, що буде включати у себе список складів і мапу, на якій ці склади розташовані. Користувач обирав склад одразу на сторінці замовлення товару — це пришвидшувало процес і зменшувало кількість помилок у заявах на замовлення товару. Звичайно, довелось написати грабер, що збирав інформацію зі складів, та інтерфейс, що зберігає і віддає цю інформацію у належному вигляді.
Потім стало зрозуміло, що такий діалог було б добре встановити і на декілька інших інтернет-магазинів, що я тоді обслуговував, а базу даних складів для цього треба виносити на окремий сервер. Так з’явився невеличкий відкритий безкоштовний сервіс Smartdelivery.
Реалізація
Зараз я б хотів показати, як це працює, а потім перейти до технічного опису. Як я і казав, є сервер з API, що зберігає і віддає інформацію про склади, та є jQuery-плагін, що вміє звертатись до цього API та взаємодіяти з користувачем. Щоб далеко не ходити, давайте встановимо плагін просто у цю статтю. Тож, спробуйте, як це працює! Вкажіть місто і натисніть на кнопку.
Щоб встановити цей плагін таким чином, досить додати у вихідну сторінку такий код:
<!-- include jquery, google maps, smartdelivery --><script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script><script src="http://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вже існує, його просто встановити та ним зручно користуватись.
Якщо у вас залишились коментарі чи питання, ви можете задати їх під статтєю, я спробую відповісти на кожен :-)