- Зміни на сайті
- Запитуємо адресу доставки на початку при додавання першого товару в корзину
- Труднощі, проблеми, рішення
Хто ми? ИнтерВолга - кваліфікований розробник розширених онлайн-магазинів на Бітрікс.
Ми любимо і вміємо вирішувати складні завдання. Підходимо до справи відповідально і робимо все так, щоб замовнику було зручно з нами працювати.
Майбокс - сучасний сервіс по доставці японської та паназиатской кухні. Географія велика, швидкість розвитку висока, обсяг впроваджуваних IT-змін колосальний.
У 2015 році нами був розроблений сайт mybox.ru , Відразу після його запуску з'явився потік завдань, який не закінчується донині. Нас це дуже радує, тому що завжди приємно і цікаво працювати з розумним клієнтом.
У початку 2016 на сайті заробив конструктор страв паназиатской кухні. влітку 2016 сайт став адаптивним і отримав API для роботи з мобільними додатками.
В кінці 2016 року було проведена робота по оптимізації сайту, тестування навантаження показало поріг пропускної спроможності сайту .
Сайт mybox.ru дозволяє замовити страви з доставкою в 90 містах Росії. Ці міста перебувають в різних часових поясах. Такий розкид міст підвищує вимоги до сервісу і IT-інфраструктурі. Потрібно враховувати багато дрібниць: від обліку інгредієнтів на торгових точках до локального часу для обмеження прийому замовлень. наприклад:
Обід. Час пік. Пробки. Вася хоче почастувати свою подругу Машу стравами паназиатской кухнею. Сам Вася живе на одному кінці міста, а Маша на іншому. Вася замовляє їжу з доставкою до Маші. Система повинна прийняти вірне рішення, і вибрати торгову точку, яка може приготувати всі страви з замовлення, розташовану в максимальному наближенні до Маші.
Відлюдник Никанор живе за адресою "Старі Хлебенном, 119Ж". Він робить замовлення і вводить свою адресу. Сайт нічого не знає про цю адресу, його немає в КЛАДР, проте система приймає замовлення у Никанора і автоматично направляє його в колл-центр для уточнення адреси та способу доставки. Неподалік від Хлебенном є торгова точка, з якої можна отримати замовлення самовивозом.
Через раптове приземлення марсіан розвели мости і пора заборонити доставку в деякі райони міста.
Нагадаємо: точок дуже багато. Інструмент управління геозалежні повинен бути швидким і зручним.
Потрібна система інструментів на сайті (для клієнтів) і в бек-енді. Однією з еволюційних ступенів у розвитку сайту було впровадження КЛАДР. КЛАДР дозволив спростити оформлення замовлення, а також дав можливість автоматично розподіляти замовлення по найближчих торгових точках.
КЛАДР дуже хороший, однак він не дав можливість управляти зонами доставки (в ньому немає даних за координатами будинків, вулиць, районів). Один місто, одна зона. Таке управління можна назвати гнучким.
Так перед нами постала нові завдання:
Збільшити кількість замовлень прийнятих через "автопріёмку".
Дати можливість гнучко налаштовувати зони: кордону, вартість доставки, час доставки, час прийому замовлення і т.д.
Завжди показувати на сайті актуальну інформацію по зонам.
Вирішення цих завдань є великою цінністю для замовника:
Зниження навантаження на колл-центр
Прозорість роботи сервісу та щастя клієнта
Помітну конкурентну перевагу, тому що ні у кого такого немає
Професіонала від дилетанта відрізняє вміння осмислити свій і чужий досвід і зробити добре на надійних перевірених інструментах, а не винаходити велосипед з трикутними колесами.
Ми проаналізували сайти конкурентів і подібні сервіси, вивчили можливі призначені для користувача сценарії, склали своє уявлення про можливе рішення:
Адміністратор сервісу в обліковій системі за допомогою спеціально створеного графічного редактора поверх карти міста малює багатокутник, задає налаштування зон і зберігає його.
В обліковій системі реалізується веб-сервіс, готовий до високої навантаженні і здатний швидко віддавати багатокутник зони на вимогу сайту
На сайті робиться механізм введення адреси з підказками вулиць і будинків, щоб в максимальній кількості випадків користувач вибирав свою адресу зі списку, а не вводив його повністю; адреса конвертується в координати "довгота + широта"
На стороні облікового системи робиться надійний веб-сервіс, якій за координатами визначає зону.
Пошук готових рішень підтвердив, що нічого на 100% готового для цього завдання ще немає, проте є чарівні Яндекс-карти, які вміють і підказки показувати і адреси в координати конвертувати, а крім того, у них є ціла бібліотека інструментів для малювання поверх карт:
1. Редактор дозволяє створювати зони, управляти ними, змінювати кордони, час і вартість доставки.
2. Редактор не дає одній зоні накладатися на іншу
3. Зони можуть знаходиться всередині один одного
Великий завданням було реалізувати такий розумний редактор зон.
Він запрограмований на ReactJS. JS і HTML код редактора розміщені на сайті, проте викликається безпосередньо з облікового системи за допомогою CEF - Chromium Embedded Framework. Результат сеансу роботи конвертується в JSON і зони у вигляді координат кутів багатокутників зберігаються в базу даних.
Зміни на сайті
Запитуємо адресу доставки на початку при додавання першого товару в корзину
Додаючи перший товар в корзину, користувач повідомляє, як він хоче отримати своє замовлення: доставка або самовивіз. Залежно від вибору сайт приховує або показує частину товарів. Наприклад, якщо за вказаною адресою не доставляються страви паназиатской кухні, вони не будуть відображатися в меню.
Сайт допомагає користувачеві ввести потрібну адресу: після введення перших символів, сайт відправляє їх в яндекс карти і шукає список схожих вулиць на околиці міста користувача.
Зазначену адресу автоматично передається на сторінку оформлення замовлення, тепер користувачеві не потрібно витрачати час на заповнення форми, він може швидко оформити і сплатити своє замовлення!
Труднощі, проблеми, рішення
Перший реліз форми введення адреси включав одне поле для введення вулиці і будинки, як в Яндекс.Таксі. У це поле відвідувачі писали все, аж до коду домофона. Від таких змін навантаження на колл-центр зросла. Ми переробили форму, розділивши одне поле на два (вулиця і будинок) і додати третій для номера квартири. Результат: навантаження впала, все видихнули.
"3-тя вулиця будівельників будинок 25 квартира 12".
У кожному місті є вулиця Леніна, в деяких, однойменна площа або проспект. У Волгограді повний комплект, а ще поруч є селище Гумрак (в ньому є аеропорт) і своя вулиця Леніна. Так склалося, що Гумрак з вул. Леніна, що Волгоград зі своїми Леніна знаходяться в одній зоні доставки. Коли в Волгограді хтось пише "Льоні ....", він може запросто вибрати вулицю в іншому місті. У Яндекс.Карт є 2 методи, які так чи інакше повертають підказки:suggest ( request [, options ]) - Повертає список адрес виду {displayName: "Митищі, Московська область", value: "Росія, Московська область, Митіщі"}. Проблема в тому, що область пошуку автоматично збільшується до регіону. Т.ч. Повертаються вул. Леніна у всіх містах і селах обраної області. Гірше ніж у нас тільки в підмосковному Домодєдово.
Геокодер - повертає координати найбільш підходящого об'єкта. Приймає на вхід будь-який рядок і сам намагається зрозуміти, що шукає користувач. Теж класна штука, проте, при запиті століть ... (проспект Столєтова) старанно повертає аптеки доктор століття.
Проблему вирішили комбінацією запитів і аналізом відповідей на стороні сайту. В результаті проб і помилок отримали алгоритм, який швидко знаходить вулиці і будинки в околицях користувача.
Потрібно більше точок на карті. Зона доставки - складний багатокутник, в якому можуть бути дірки, наприклад область всередині зони, куди доставка неможливі (наприклад режимний об'єкт). Чим більше зон в одному місті, тим більше потрібно точок для їх опису. Браузер починає сильно гальмувати, коли на карті з'являється кілька сотень. Коли і чому гальмує? Гальмувати починає при додавання нових точок або переміщення попередніх, тому що система прораховує можливі перетину зон і намагається укласти зони так, щоб зони не накладалися один на одного і між ними не утворювалися дірки.
У підсумку всі питання були вирішені. Сервіс запущений і працює. Впала навантаження на колл-центри, замовник отримав точний інструмент для управління вартістю доставки.
Ми отримали компетенцію роботи з комерційним API яндекс карт, дізналися його особливості, наступили на десяток грабель і готові точно оцінювати і вирішувати подібні завдання.
Для довідки: ця глибока модернізація зажадала залучення ~ 10 фахівців з трьох сторін (особливо варто відзначити фронтенд-розробника Дмитра Матюшечкіна) і роботи з координації 3 менеджерів на протязі декількох місяців.
Оцініть статтю:
Коли і чому гальмує?