DOU Проектор: Escapewithpro — наш досвід розробки travel-сервісу для бронювання турів

У рубриці DOU Проектор всі охочі можуть презентувати свій продукт (як стартап, так і ламповий pet-проект). Якщо вам є про що розповісти — запрошуємо взяти участь. Якщо ні — можливо, серія надихне на створення власного made in Ukraine продукту. Питання і заявки на участь надсилайте на [email protected] .

Привіт, я Андрій Шкіря. Зараз я займаюся проектом Escapewithpro — сервісом для пошуку та бронюванню авторських турів. Вісь декілька вражень, які отримала наша команда у процесі створення сервісу, якими я і хочу з вами поділитися.

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

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

Ідея

Минувши майже рік відтоді, як наша команда вирішила змінити напрямок діяльності та спробувати себе в новому амплуа. Раніше ми займалися створенням рішень для корпоративних клієнтів та малі досить непогані успіхи та великий багаж досвіду за плечима. Тільки одна ситуація нас бентежила: не завжди створені нами продукти знаходили очікуваний відгук у кінцевого користувача. Причин тому було багато, починаючи з нерозуміння як замовником, так і виконавцем кінцевого результату, закінчуючи всілякими обмеженнями з боку корпоративних платформ та бізнес-правил. Ще нам здавалось, що коли ти працюєш безпосередньо з кінцевим користувачем, то все стає прозорішим і зрозумілим. Та і всі ми плекали надію зробити щось нове і невідоме, але круте і технологічне. Вісь так з'єднання явилася ідея створити продукт Escapewithpro — сервіс, де зібрані авторські тури від досвідчених мандрівників. Наразі на сайті можна здійснювати пошук та бронювання турів.

Реалізація

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

Для розробки був вибраний MEAN стек, альо без Mongo. Обираючи Angular 2 (зараз уже 5) для клієнтської частини та Node.js для серверної навіть не роздумували довго, оскільки ми вже малі невеликий досвід у цих технологіях і результат нам подобався (у всіх технологіях є свої мінуси, але про це згодом). Одне хочу додати: якщо ви плануєте будувати щось серйозне, необхідно озброюватися серйозними інструментами.

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

Ми зупинили вибір на сервісі Firebase, який включав у собі базу даних реального часу, хостинг, сховище для збереження статичної інформації, сервіс push-нотифікацій та сервіс авторизації. Цей достатня потужний набір дозволив нам дуже швидко почати створювати наше концептуальне рішення та випробовувати його в реальних умовах. На додаток до всього він безкоштовний на початкових стадіях розробки та тестування, але в подальшому все ж таки доведеться платити. Хоча усе залежить від вашої моделі даних та їх використання.

У цілому база не дуже зростання за обсягом. У нас за півроку набралося лише 8 МБ, але треба бути уважним із завантаженням даних на клієнт. Дані завантажуються кожен раз, коли ви перевантажуєте сторінку. Таким чином кожна нова сесія потребує нового завантаження, а це вже платний трафік. Безкоштовна частина складає 10 ГБ завантаження даних на клієнт за місяць, а далі — по одному долару за гігабайт.

Найбільше вражає у цьому сервісі real time. Редагування контенту та його динамічне завантаження без будь-якого дублювання. Це для нас було як магія. Рекомендую спробувати, ви не пошкодуєте. Тім паче для Angular використання дуже просте. Ми в своїй роботі користуємося модулем Angularfire.

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

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

SEO для Single Page Application

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

Почали вивчати це питання, і виявилося, що в SPA (Single Page Application) пошуковий бот бачить лише index.html у всьму його мінімалізмі. Ми можемо додати og-теги автоматично, але ж нам потрібна індивідуальна картка для шкірного нашого посилання.

Після нетривалих пошуків знайшли одне рішення, яке тоді здалося вирішенням усіх проблем, — Angular Universal. Це спеціальний модуль для серверного рендеренгу вашої сторінки та передачі клієнту вже готового html-файлу зі всім контентом та розміткою. Налагодити свій проект для використання цього модуля досить легко (CLI 6.0 це виконується майже однією командою), але, як я вже казав, у нас проект вже на тестовій експлуатації з досить великою кількістю власних та сторонніх модулів.

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

Як я вже казав, нам необхідно було підготувати статичний контент для пошукових роботів у відповідності до посилання. Таким чином ми за допомогою Express.js опублікували наше рішення та почали обробляти всі запити, які надходили до index.html. У відповідності до запиту ми формували необхідні og-теги, статичний контент та вбудовували його в html-сторінку і віддавали її браузеру.

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

У подальшому постало питання індексації нашого сайту для доступності та просування в пошукових сервісах. Це завдання для нас було більш легким, оскільки у нас був вже готовий механізм. Нам потрібно було тільки додати умови визначення запитів та процес формування статичного контенту на сторінці. Також ми почали будувати файл sitemap.xml та додавати розмітку на сторінку, що дозволив пошуковим результатами виглядати більш презентабельно.

Наша команда

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

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

Толік — талановитий розробник. Зробив разом з Андрієм вже не одну систему. Завдяки йому користувачі можуть у нас на сайті чатитися, отримують SMS і email-нотифікації. Він налагодив інтеграцію з ticketsUA, а незабаром ще буде онлайн-оплата.

Саша — працює з Pro (організаторами турів). Саме вона шукає найцікавіші пропозиції та найяскравіших організаторів мандрівок. Також Саша відповідає за комунікації з Pro і з користувачами.

Оля — відповідає за контент на сайті, PR та роботу з лідерами думок.

Проект стрімко розвивається, тому нещодавно до нашої команди приєдналася Таня. Вона займається зйомками відеоінтерв'ю, дизайном і маркетингом, включаючи Facebook, Instagram, YouTube.

Результати та плани на майбутнє

Майже за рік ми побудували онлайн-сервіс та досягли певних результатів:

Головні виклики, які нас спіткали:

Плануємо додати до сервісу такі можливості:

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

Опубліковано: 30/08/18 @ 11:18
Розділ Блоги

Рекомендуємо:

Python Challenge, або Як я ознайомився з автоматизованим тестуванням за місяць
7 причин жити і працювати в Харкові для IT-спеціаліста
Релокация в американську глибинку: мої 4 роки у Вісконсині
Product Management дайджест #5: правильні роадмапы, ефект Рингельмана і кращі доповіді з Mind the Product SF
Чому вони не їдуть з України: історії IT-спеціалістів