DOU Проектор: Escapewithpro — наш досвід розробки travel-сервісу для бронювання турів
У рубриці DOU Проектор всі охочі можуть презентувати свій продукт (як стартап, так і ламповий pet-проект). Якщо вам є про що розповісти — запрошуємо взяти участь. Якщо ні — можливо, серія надихне на створення власного made in Ukraine продукту. Питання і заявки на участь надсилайте на Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. .
Привіт, я Андрій Шкіря. Зараз я займаюся проектом 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 та додавати schema.org розмітку на сторінку, що дозволило пошуковим результатам виглядати більш презентабельно.
Наша команда
Ігор — засновник проекту. Він має вагомий досвід у сфері ІТ та декілька власних компаній з розробки програмного забезпечення. При цьому завжди любив подорожувати. Саме жага до подорожей та бажання допомогти людям побачити нетуристичні місця та подорожувати частіше надихнули його на створення цього проекту.
Андрій, тобто я, — CTO. Відповідаю за технології та інновації, напрограмував левову частку сайта. Роблю всілякі круті технологічні штучки, такі як швидке завантаження великих фото, миттєві фільтри й інше.
Толік — талановитий розробник. Зробив разом з Андрієм вже не одну систему. Завдяки йому користувачі можуть у нас на сайті чатитися, отримують SMS- і email-нотифікації. Він налагодив інтеграцію з ticketsUA, а незабаром ще буде онлайн-оплата.
Саша — працює з Pro (організаторами турів). Саме вона шукає найцікавіші пропозиції та найяскравіших організаторів мандрівок. Також Саша відповідає за комунікації з Pro і з користувачами.
Оля — відповідає за контент на сайті, PR та роботу з лідерами думок.
Проект стрімко розвивається, тому нещодавно до нашої команди приєдналася Таня. Вона займається зйомками відеоінтерв’ю, дизайном і маркетингом, включаючи Facebook, Instagram, YouTube.
Результати та плани на майбутнє
Майже за рік ми побудували онлайн-сервіс та досягли певних результатів:
- кількість активних та унікальних турів — 130;
- кількість тур-лідерів — 46;
- за липень на сервіс зайшло більше ніж 10 000 користувачів;
- кількість сторінок, які продивились користувачі у липні, — більше ніж 200 000.
Головні виклики, які нас спіткали:
- постійний пошук інформації;
- постійне вивчення нових технологій;
- постійна зміна функціоналу;
- робота в будь-який час та в будь-якому місці.
Плануємо додати до сервісу такі можливості:
- пошук квитків;
- онлайн-платежі;
- побудова блогу;
- створення конструктора тематичних сторінок.
Дякую за увагу. Пишіть, якщо було цікаво, та здавайте питання. Будемо тримати вас у курсі нових звершень.
