--- title: "Ptichka" date: 2023-09-04 description: "Сделали MVP для курьеров в виде бота в Telegram. Разработали кроссплатформенное приложение на React Native и Flutter." author: "Mikhail Dashkevich" intro_image: "https://metalamp.ru/images/cases/ptichka.png" categories: - name: "Cases" url: "https://metalamp.ru/cases.md" --- # Ptichka ![Ptichka](https://metalamp.ru/images/cases/ptichka.png) # Сервис курьерской доставки «Птичка» [Перейти ко всем кейсам](https://metalamp.ru/cases) ![](https://metalamp.ru/images/ptichka/vova-p.png) Владимир Кобзев Январь 2017 Всем привет! Нужен фронтендер, там работы на 2 недели, гипотезу потестить. Сделать веб-форму заказа курьеров. ![](https://metalamp.ru/images/ptichka/sergey-p.png) Сергей Черепанов Январь 2017 Мне интересно! Знаю ReactJS, JavaScript, Python. Беру на себя всю техническую часть. ![](https://metalamp.ru/images/ptichka/sergey-p.png) Расскажи о проекте. ![](https://metalamp.ru/images/ptichka/vova-p.png) Владимир Кобзев Январь 2017 Хочу запустить Uber для курьеров. ![logo_main-white](https://metalamp.ru/images/ptichka/logo_main-white.svg) ![logo_icon-white](https://metalamp.ru/images/ptichka/logo_icon-white.svg) MetaLamp Декабрь 2021 Так, в 2017 году вместе с топ-менеджером крупнейшей службы курьерской доставки по Москве «Достависта» Владимиром Кобзевым мы начали работу над новым стартапом — «Птичкой». [Ключевые особенности](https://metalamp.ru/ptichka#key-features) [Этапы работы](https://metalamp.ru/ptichka#project-stages) [Подробности проекта](https://metalamp.ru/ptichka#project-details) [Технологии](https://metalamp.ru/ptichka#our-technologies) [Почему мы?](https://metalamp.ru/ptichka#why-us) «Птичка» — это Одностраничная ‍форма заявки Отсутствие колл- центра‍ Автоматизированные ‍найм и обучение курьеров Гибкая cистема поручений и типов посылок Гибкая cистема поручений и типов посылок «Птичка» — это Одностраничная форма заявки Отсутствие колл-центра‍ Автоматизированные ‍найм и обучение курьеров Гибкая cистема поручений и типов посылок ## Этапы работы Идея! month 1 month 2 month 3-4 month 5-6 month 7-8 month 9-10 month 11-12 month 13-24 month 25-36 development design analytics ![cross-yellow](https://metalamp.ru/images/ptichka/cross-yellow.svg) ![shevron-right-yellow](https://metalamp.ru/images/ptichka/shevron-right-yellow.svg) MetaLamp Декабрь 2021 Мы шаг за шагом прошли все этапы работы над проектом: от идеи до реализации. Выкатывали MVP и тестировали, работали в цикле над каждым изменением и фичей. ![logo_icon-blue](https://metalamp.ru/images/ptichka/logo_icon-blue.svg) ![logo_main-blue](https://metalamp.ru/images/ptichka/logo_main-blue.svg) Это бесконечный и непрерывный процесс слаженной работы всей команды 💪 `; this.stages.appendChild(badgeWrapper); this.calcBadgeWrapperOffset(badgeWrapper, line); } hideMessage() { this.messages.classList.remove("stages-work__messages_visible"); const closeIcon = this.rootObject.querySelector('[data-action="close"]'); const openIcon = this.rootObject.querySelector('[data-action="open"]'); this.badgesWrappers.forEach((item) => { item .querySelector(".stages-work__badge") .classList.remove("stages-work__badge_disabled"); }); if(this.messages.classList.contains('stages-work__messages_visible')) { closeIcon.classList.add('stages-work__button-icon_visible'); openIcon.classList.remove('stages-work__button-icon_visible'); } else { closeIcon.classList.remove('stages-work__button-icon_visible'); openIcon.classList.add('stages-work__button-icon_visible'); } } setScaleStyles(newLeft) { this.scaleItems.forEach((item) => { const coords = item .querySelector(".stages-work__line") .getBoundingClientRect().left; if (coords { const badge = item.querySelector(".stages-work__badge"); const EMPTY_BADGE_WIDTH = 48; const SLIDER_START_COORD = 5; const left = item.getBoundingClientRect().left - this.sliderLeftCoord; const right = item.getBoundingClientRect().right - this.sliderLeftCoord; const width = right - left; const filledWidth = left - newLeft - tooltipWidth; const filledWidthPrc = (-100 * filledWidth) / width; if (newLeft = 0) { badge.style.width = filledWidthPrc + "%"; if ( badge.offsetWidth { item .querySelector(".stages-work__badge") .classList.toggle("stages-work__badge_disabled"); }); this.buttonIcon.forEach((item) => { item.classList.toggle("stages-work__button-icon_visible"); }); } handleDocumentClick(e) { if (this.messages.classList.contains('stages-work__messages_visible')) { this.hideMessage(); } } handleTooltipPointerDown(e) { e.preventDefault(); this.shiftX = e.clientX - this.tooltip.getBoundingClientRect().left; this.tooltip.setPointerCapture(e.pointerId); this.tooltip.addEventListener("pointermove", this.handleTooltipPointerMove); this.tooltip.addEventListener("pointerup", this.handleTooltipPointerUp); } handleTooltipPointerMove(event) { let newLeft = event.clientX - this.shiftX - this.sliderLeftCoord; if (newLeft rightEdge) { newLeft = rightEdge; } if (newLeft === rightEdge) { this.button.classList.add("stages-work__button_visible"); } else { this.button.classList.remove("stages-work__button_visible"); } if (newLeft > 0) { this.arrow.classList.add("stages-work__arrow_hidden"); } else { this.arrow.classList.remove("stages-work__arrow_hidden"); } this.setScaleStyles(this.tooltip.getBoundingClientRect().right); this.calcBadgeWidth(newLeft, this.shiftX); this.tooltip.style.left = newLeft + "px"; this.progressBar.style.width = (newLeft * 100) / this.slider.offsetWidth + "%"; } handleTooltipPointerUp() { this.tooltip.removeEventListener("pointerup", this.handleTooltipPointerUp); this.tooltip.removeEventListener("pointermove", this.handleTooltipPointerMove); } handleWindowResize() { this.tooltip.style.left = 0; this.progressBar.style.width = 0; this.button.classList.remove("stages-work__button_visible"); this.arrow.classList.remove("stages-work__arrow_hidden"); this.messages.classList.remove("stages-work__messages_visible"); this.badgesWrappers.forEach((item) => { item .querySelector(".stages-work__badge") .classList.remove("stages-work__badge_disabled"); }); badges.forEach((item, i) => { this.setBadgeWrapperSize(this.badgesWrappers[i], item.start, item.end); this.calcBadgeWrapperOffset(this.badgesWrappers[i], item.line); }); if (window.innerWidth { const badge = item.querySelector(".stages-work__badge"); badge.style.width = "100%"; badge.style.opacity = 1; }); this.progressBar.style.width = "100%"; this.removeEventListeners(); } else { this.addEventListeners(); } } } const root = document.querySelector(".stages-work"); new StagesOfWork(root); ![logo_icon-blue](https://metalamp.ru/images/ptichka/logo_icon-blue.svg) MetaLamp Декабрь 2021 Мы шаг за шагом прошли все этапы работы над проектом: от идеи до реализации. Выкатывали MVP и тестировали, работали в цикле над каждым изменением и фичей. ![](https://metalamp.ru/images/ptichka/sergey-p.png) Это бесконечный и непрерывный процесс слаженной работы всей команды 💪 Подробности проекта Одностраничная форма заявки MetaLamp Декабрь 2021 Например, стало возможным видеть, как вес посылки или сроки влияют на стоимость заказа, изменить, перепроверить все данные и запустить поиск курьера. ![](https://metalamp.ru/images/ptichka/logo_icon-white.svg) ![](https://metalamp.ru/images/ptichka/logo_main-white.svg) Мы стремились сделать процесс заказа доставки удобнее. В большинстве сервисов на тот момент процесс заказа был таким: ввести адреса, откуда и куда доставить, а на следующем экране подробности заказа и только в конце узнать стоимость, например. Ошибся или передумал — запутался в экранах и ушёл. Мы поместили всю функциональность на один экран. Отсутствие колл-центра и линейного менеджмента MetaLamp Декабрь 2021 Отметить статус заказа, получить ответы на вопросы или решить проблему курьеры могли через Telegram-бот, а чат с менеджером нужен был только в нетривиальных ситуациях. Благодаря этому на несколько сотен заказов в день хватало 1-2 менеджеров в команде, которыми были сами инженеры сервиса. ![](https://metalamp.ru/images/ptichka/logo_icon-white.svg) ![](https://metalamp.ru/images/ptichka/logo_main-white.svg) Многие службы доставок содержали штат менеджеров для сопровождения заказов. Например, курьер доставил заказ, клиент должен сфотографировать посылку и отправить в сервис, а менеджер — проверить, выставить заказу статус «Выполнен» и т.д. Мы решили сократить издержки и автоматизировали все возможные действия менеджеров. Автоматизация найма и обучения курьеров MetaLamp Декабрь 2021 Обучали курьеров через тесты в Typeform, где доносили основные принципы работы с клиентами, давали инструкции для решения конфликтных ситуаций. ![](https://metalamp.ru/images/ptichka/logo_icon-white.svg) ![](https://metalamp.ru/images/ptichka/logo_main-white.svg) Мы стремились сократить путь от регистрации курьера до первого выполненного заказа. Достаточно было скачать приложение, отправить фото паспорта и пройти обучение, чтобы получить доступ к заказам без всякой коммуникации с менеджером. Гибкая система поручений и типов посылок MetaLamp Декабрь 2021 Мы одни из первых внедрили к процессу доставки дополнительные поручения. Отправитель мог поручить не только привезти посылку, но и, например, подождать, пока получатель примерит вещь в заказе, а если не подошло, привезти на адрес отправителю. Это дало отправителям больше удобства, а курьеры стали получать вознаграждение за дополнительные просьбы. ![](https://metalamp.ru/images/ptichka/logo_icon-white.svg) ![](https://metalamp.ru/images/ptichka/logo_main-white.svg) Клиенты «Птички» могли указать параметры посылки более подробно, чем в других сервисах. Так, курьеры на этапе выбора заказа для исполнения видели, что нужно доставить не просто посылку 20х30х5 см, а торт. Это помогало понять, удобно ли будет выполнить такой заказ, передвигаясь на метро например. ## Подробности проекта Одностраничная форма заявки Мы стремились сделать процесс заказа доставки удобнее. В большинстве сервисов на тот момент процесс заказа был таким: ввести адреса, откуда и куда доставить, а на следующем экране подробности заказа и только в конце узнать стоимость, например. Ошибся или передумал — запутался в экранах и ушёл. Мы поместили всю функциональность на один экран. MetaLamp Декабрь 2021 Например, стало возможным видеть, как вес посылки или сроки влияют на стоимость заказа, изменить, перепроверить все данные и запустить поиск курьера. ![](https://metalamp.ru/images/ptichka/logo_icon-white.svg) ![](https://metalamp.ru/images/ptichka/logo_main-white.svg) Отсутствие колл-центра и линейного менеджмента Многие службы доставок содержали штат менеджеров для сопровождения заказов. Например, курьер доставил заказ, клиент должен сфотографировать посылку и отправить в сервис, а менеджер — проверить, выставить заказу статус «Выполнен» и т.д. Мы решили сократить издержки и автоматизировали все возможные действия менеджеров. MetaLamp Декабрь 2021 Отметить статус заказа, получить ответы на вопросы или решить проблему курьеры могли через Telegram-бот, а чат с менеджером нужен был только в нетривиальных ситуациях. Благодаря этому на несколько сотен заказов в день хватало 1-2 менеджеров в команде, которыми были сами инженеры сервиса. ![](https://metalamp.ru/images/ptichka/logo_icon-white.svg) ![](https://metalamp.ru/images/ptichka/logo_main-white.svg) Автоматизация найма и обучения курьеров Мы стремились сократить путь от регистрации курьера до первого выполненного заказа. Достаточно было скачать приложение, отправить фото паспорта и пройти обучение, чтобы получить доступ к заказам без всякой коммуникации с менеджером. MetaLamp Декабрь 2021 Обучали курьеров через тесты в Typeform, где доносили основные принципы работы с клиентами, давали инструкции для решения конфликтных ситуаций. ![](https://metalamp.ru/images/ptichka/logo_icon-white.svg) ![](https://metalamp.ru/images/ptichka/logo_main-white.svg) Гибкая система поручений и типов посылок Клиенты «Птички» могли указать параметры посылки более подробно, чем в других сервисах. Так, курьеры на этапе выбора заказа для исполнения видели, что нужно доставить не просто посылку 20х30х5 см, а торт. Это помогало понять, удобно ли будет выполнить такой заказ, передвигаясь на метро например. MetaLamp Декабрь 2021 Мы одни из первых внедрили к процессу доставки дополнительные поручения. Отправитель мог поручить не только привезти посылку, но и, например, подождать, пока получатель примерит вещь в заказе, а если не подошло, привезти на адрес отправителю. Это дало отправителям больше удобства, а курьеры стали получать вознаграждение за дополнительные просьбы. ![](https://metalamp.ru/images/ptichka/logo_icon-white.svg) ![](https://metalamp.ru/images/ptichka/logo_main-white.svg) ## Технологии MVP формы для заказа курьеров сделали на Python+Django и TypeScript+React. Впоследствии переписали бэкенд сервиса на Haskell. MVP для курьеров было в виде бота в Telegram. Впоследствии в дополнение к боту разработали кроссплатформенное приложение на React Native и Flutter. - ### Haskell Позволил стабилизировать работу сервиса, подстроить его под пиковые нагрузки, а также упростил работу с поддержанием кода. Благодаря этому новые функции стало проще разрабатывать без страха навредить всему проекту. - ### Flutter Ускорил работу курьеров: первое приложение на React Native загружалось 5-10 секунд, а новое, написанное уже на Flutter, — 1-2 секунды. Мы сделали приложение кроссплатформенным, что сократило на тот момент сроки и бюджет на разработку нативных приложений для iOS и Android. Мы прошли непростой, но интересный путь от голой идеи до реализации масштабируемого стартапа, который просуществовал 4 года. Работая с IT-предпринимателями сейчас, мы не понаслышке знаем, как это — быть стартапером. ## Чему мы научились? ![logo_main-blue](https://metalamp.ru/images/ptichka/logo_main-blue.svg) ![logo_icon-blue](https://metalamp.ru/images/ptichka/logo_icon-blue.svg) MetaLamp Декабрь 2021 Мы столкнулись с трудностями масштабирования проекта, которые побороли выбором технологий. ![](https://metalamp.ru/images/ptichka/sergey-p.png) Сейчас мы внимательно относимся к выбору между быстрым результатом и тщательной проработкой архитектуры на старте. Мы уверены: иногда стоит сделать быстро и «костыльно», а иногда — сбавить темп, чтобы подготовится к будущим вызовам проекта. ## Почему мы? ## Наш опыт пригодится вам в разработке - ### Сервисов доставки еды, продуктов и лёгких посылок Опыт работы с расчётами срока и стоимости заказов в зависимости от расстояний и прочих факторов, настройки гибкой детализации, работы с геолокациями и интеграциями карт позволит эффективно разрабатывать аналогичные сервисы. - ### Высоконагруженных систем: финансы, логистика, science-моделирование и т.д. Опыт работы с Haskell открыл нам дорогу в работу с многофункциональными системами, где высоки требования к нагрузке и необходимы 100% надёжности работы. - ### Мобильных приложений на Flutter и React Native Мы успели поработать с кроссплатформенными технологиями, изучив преимущества и недостатки каждой. Сейчас в разработке стартапов и их MVP мы прибегаем именно к этим двум инструментам. ## Custom Fields **Description:** Стартап с нуля с партнёрами: сервис срочной курьерской доставки по uber-модели в Москве, Санкт-Петербурге и нескольких городах Казахстана. **Service tags:** outsourcing **Technology tags:** typescript_react **Technology tags:** haskell