Как создать приложение-маркетплейс без программирования

TL;DR: Двусторонний маркетплейс должен одновременно работать как для покупателей, так и для продавцов. Выбирайте платформу в зависимости от того, как она обрабатывает выплаты продавцам и изменения после запуска, и закладывайте в бюджет ежемесячный тариф плюс комиссию за транзакцию. Запустите минимально жизнеспособную версию, которая позволит обеим сторонам совершить сделку, а затем создайте доверие с помощью отзывов и правил конфиденциальности, прежде чем приглашать реальных пользователей.

Приложение-маркетплейс — одна из самых популярных идей для стартапа, но при этом одна из самых сложных в реализации. Идея проста: соединить покупателей и продавцов и брать процент с каждой продажи.

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

Если вы готовы создать двусторонний маркетплейс, начните с оценки вариантов платформы и затрат. Затем вы будете создавать маркетплейс шаг за шагом: от базы данных и страницы поиска до инструментов для продавцов, платежей, отзывов и обмена сообщениями.

Что такое приложение-маркетплейс?

Приложение-маркетплейс, такое как Etsy, Airbnb или Upwork, связывает независимых покупателей и продавцов, чтобы они могли найти друг друга и совершить сделку, а платформа обычно получает комиссию или сбор с каждой продажи.

В отличие от интернет-магазина, где компания продает свои собственные товары, владелец маркетплейса обычно ничего не продает напрямую. Он создает поиск, платежные системы и другие инструменты, которые делают возможной каждую продажу — это больше похоже на управление торговым центром, чем магазином. Некоторые маркетплейсы, например Amazon, совмещают обе модели, продавая свои товары наряду с товарами сторонних продавцов.

Когда маркетплейс набирает обороты, он выигрывает от сетевых эффектов: больше продавцов привлекают больше покупателей, что, в свою очередь, привлекает еще больше продавцов.

Односторонние и двусторонние маркетплейсы

Маркетплейсы делятся на две основные категории:

• Односторонние маркетплейсы: платформа централизованно управляет предложением и листингами. Так работают The RealReal и Toptal.
• Двусторонние маркетплейсы: продавцы создают профили, управляют своими запасами, устанавливают цены и общаются с покупателями, а платформа предоставляет инструменты. Так работают Airbnb и Upwork.

Как маркетплейсы зарабатывают деньги

Большинство маркетплейсов сочетают одну или несколько моделей дохода:

• Комиссия с транзакции: платформа удерживает процент или сбор с каждой продажи, поэтому вы зарабатываете больше, когда зарабатывают ваши продавцы.
• Плата за размещение: продавцы платят за публикацию каждого товара; это подходит для дорогих товаров, таких как автомобили или аренда недвижимости.
• Подписка для продавцов: продавцы платят ежемесячно за доступ к платформе или премиум-инструментам, что делает ваш доход более предсказуемым.
• Продвижение объявлений: продавцы платят за то, чтобы их товары отображались в верхней части результатов поиска.

В отличие от комиссии, остальные три модели требуют от продавцов оплаты до совершения продажи, поэтому они лучше всего работают, когда на вашем маркетплейсе уже есть постоянные покупатели.

Примеры приложений-маркетплейсов

Самые известные маркетплейсы решают проблему доверия между незнакомыми людьми:

• Товарные маркетплейсы: Amazon Marketplace размещает сторонних продавцов наряду с собственными товарами Amazon, eBay поддерживает аукционы и объявления с фиксированной ценой, а Etsy известен товарами ручной работы и винтажными вещами.
• Сервисные маркетплейсы: Uber подбирает водителей для пассажиров, а TaskRabbit связывает людей с местными исполнителями услуг.
• Цифровые и фриланс-маркетплейсы: Fiverr связывает компании с фрилансерами и удерживает оплату до тех пор, пока работа не будет выполнена.

Каждый из них начинался с одной ниши и небольшого набора функций.

Какие функции нужны приложению-маркетплейсу?

Большинству маркетплейсов в конечном итоге требуются эти семь основных функций. Вы можете запуститься с меньшим количеством, но каждая из них должна работать для обеих сторон:

• Аутентификация и профили пользователей: покупатели и продавцы получают разные типы учетных записей, каждая со своими правами доступа.
• Поиск и фильтрация: покупатели находят то, что им нужно, с помощью поиска по ключевым словам, фильтров и сортировки.
• Управление листингами: продавцы добавляют товары, фотографии, цены и поддерживают актуальность своих запасов.
• Безопасные платежи: каждый платеж разделяется на выплату продавцу и вашу комиссию. Большинство маркетплейсов используют провайдеров вроде Stripe, которые также обрабатывают возвраты, споры и налоговые формы.
• Отзывы и рейтинги: отзывы помогают покупателям доверять незнакомым продавцам, а ограничение возможности оставлять отзывы только завершенными заказами обеспечивает их честность.
• Обмен сообщениями и уведомления: покупатели и продавцы могут общаться напрямую, а автоматические электронные письма держат всех в курсе заказов и акций.
• Инструменты администратора: вам понадобится способ проверять объявления, разрешать споры и удалять недобросовестных участников с любой из сторон.

Начните с фокусного MVP

Самый быстрый способ застопориться — создать все функции до того, как кто-либо начнет пользоваться вашим маркетплейсом. Начните с одной ниши и одной транзакции, ради которой он существует, и поговорите с несколькими продавцами и покупателями, прежде чем приступать к разработке. Вашему MVP нужно только то, что необходимо для безопасного завершения этой транзакции, а все остальное может подождать, пока пользователи сами об этом не попросят.

В этом руководстве мы шаг за шагом разберем создание каждого из этих элементов: от поиска и инструментов продавца до платежей, отзывов и обмена сообщениями. Но сначала нужно решить, на чем строить.

Как выбрать платформу для вашего приложения-маркетплейса

Прежде чем приступить к разработке, решите, где будет «жить» ваш маркетплейс. Выбранный конструктор или подход определяет, насколько глубоко вы сможете настроить платформу и сможете ли вы вносить изменения самостоятельно по мере роста.

Информация о платформах актуальна на октябрь 2026 года.

Специализированные конструкторы маркетплейсов, такие как Sharetribe

Sharetribe предоставляет готовые компоненты, которые есть у большинства маркетплейсов: листинги, профили, поиск и потоки транзакций с платежами. Если ваш маркетплейс следует стандартной модели, это часто самый быстрый способ запуска.

Вы можете настроить данные, транзакции и бронирования, но если ваш маркетплейс работает иначе, чем стандартные модели, будьте готовы к дополнительной настройке или необходимости привлечения разработчика.

Традиционные no-code инструменты, такие как Softr и FlutterFlow

Softr создает порталы и клиентские приложения поверх уже имеющихся данных, например, базы Airtable или Google Таблиц, и может принимать платежи через Stripe. FlutterFlow ориентирован на мобильные и веб-приложения и обычно подключается к бэкенду вроде Firebase или Supabase для серверной логики.

Оба инструмента позволяют визуально настраивать экраны, но ни один из них не поддерживает выплаты продавцам «из коробки». Интеграция Stripe в Softr обрабатывает прямые платежи и подписки, а разработчики на FlutterFlow обычно добавляют Stripe Connect с помощью пользовательских облачных функций.

Комбинации фронтенда и бэкенда, такие как WeWeb и Xano

Некоторые разработчики сочетают визуальный фронтенд, например WeWeb, с бэкендом вроде Xano, который управляет базой данных, API и серверной логикой. Это гибкая настройка для тех, кто мыслит категориями API, и многие продолжают использовать ее, даже несмотря на то, что у WeWeb теперь есть собственный конструктор бэкенда.

Компромисс заключается в необходимости поддерживать два отдельных сервиса и следить за их связью, поэтому, если что-то ломается, вам приходится искать причину в обоих местах.

Инструменты ИИ-кодинга

Инструменты ИИ-кодинга создают работающее приложение на основе ваших запросов. Они вдохновили миллионы людей начать разработку, позволяют быстро получить первую версию, и большинство из них дают возможность визуально настраивать экраны.

Однако логика и данные по-прежнему остаются кодом. Чтобы изменить принцип работы выплат или права доступа к заказу, вам нужно переформулировать запрос или редактировать код самостоятельно, что становится сложнее по мере роста вашего маркетплейса.

Заказная разработка

Найм разработчиков или агентства позволяет получить полностью индивидуальную сборку, которая необходима некоторым маркетплейсам по мере их роста. Обычно это медленнее и требует больших первоначальных затрат, а любые изменения после запуска проходят через ваших инженеров. Это большой риск, если вы все еще тестируете идею.

Вопросы, которые стоит задать перед выбором

Смотрите дальше того, как быстро вы сможете запуститься. Эти вопросы показывают, как платформа будет работать, когда покупатели и продавцы начнут от нее зависеть:

• Как она обрабатывает раздельные платежи? Выплата продавцам за вычетом вашей комиссии — это функция, без которой не может запуститься большинство маркетплейсов. Проверьте, можете ли вы самостоятельно настроить такого провайдера, как Stripe Connect, или для этого требуются разработчик и написание кода.
• Можете ли вы решать, кто что видит? Покупатели не должны видеть заказы друг друга, а продавцы — клиентов друг друга. Ищите правила доступа, которые вы сможете прочитать позже, чтобы убедиться в их правильности.
• Можете ли вы самостоятельно изменить ключевую функцию через полгода после запуска? Представьте, что продавец просит добавить новый вариант ценообразования. Если вы не понимаете, как ваше приложение обрабатывает цены настолько хорошо, чтобы изменить это, вы будете зависеть от кого-то другого каждый раз, когда ваш бизнес будет меняться.
• Что произойдет, когда вы начнете расти? Узнайте, включены ли хостинг, масштабирование и мобильная версия, или каждый из этих пунктов означает нового поставщика и дополнительные расходы.

Сколько стоит создание приложения для маркетплейса?

Стоимость приложения для маркетплейса складывается из затрат на разработку и ежемесячных расходов на эксплуатацию, плюс комиссии за обработку платежей с каждой транзакции.

Что влияет на стоимость маркетплейса

Большая часть ваших расходов приходится на несколько предсказуемых статей:

• Подписка на платформу: Ваш тариф часто определяет, можете ли вы запуститься, какой объем трафика может выдержать ваше приложение и может ли оно выполнять запланированные задачи, поэтому рассчитывайте стоимость тарифа, на котором будете запускаться.
• Время разработчиков: Инженеры или агентство обычно стоят дороже всего, и вы продолжаете платить им за каждое исправление и функцию после запуска.
• Сторонние сервисы: Электронная почта, SMS, карты и премиум-плагины — все это увеличивает ваш ежемесячный счет.
• Ваше собственное время: Создание приложения своими силами стоит часов, а не долларов, и платформа, которую вы хорошо понимаете, позволяет сократить эти затраты времени.

Обработка платежей и комиссии платформы

Платежные провайдеры для маркетплейсов разделяют каждую продажу между продавцом и вами. Они также берут свою долю, обычно в виде процента плюс небольшая фиксированная комиссия. В зависимости от модели ценообразования, Stripe Connect может добавлять комиссии за каждый подключенный аккаунт продавца или выплату, поэтому проверяйте страницу цен Stripe Connect для получения актуальных ставок.

Если вы берете с продавцов 10%, посчитайте типичный заказ, чтобы увидеть, сколько из этой суммы остается у вас после вычета комиссий.

Сколько стоит создание маркетплейса на Bubble

На Bubble начать можно бесплатно. Создание приложения с помощью Bubble AI Agent не использует AI-кредиты (до ежемесячного лимита), как и редактирование в визуальном редакторе. Создание или редактирование с помощью Агента расходует ежемесячный лимит AI-кредитов, который предоставляется с каждым тарифом, но вы всегда можете вносить изменения вручную.

Для запуска вам понадобится платный тариф. Starter Web стоит $29 в месяц при ежегодной оплате или $32 в месяц при ежемесячной оплате до 20 октября 2026 года, после чего цена изменится до $32 и $39 соответственно. Купите годовой план до этой даты, чтобы сохранить цену $29 в месяц на год.

Каждый тариф включает встроенную базу данных, а платные тарифы добавляют хостинг и серверные рабочие процессы (backend workflows), используемые во второй части. Комиссии платежных провайдеров оплачиваются отдельно, полная информация приведена на странице цен.

Почему стоит создавать приложение для маркетплейса на Bubble?

Bubble — это полностью визуальный конструктор приложений, где вы можете создавать программное обеспечение, понимать каждую его часть и контролировать каждую деталь без написания кода. Каждый уровень вашего маркетплейса, включая логику, данные и правила конфиденциальности, является визуальным и редактируемым. Вы можете создавать приложения с помощью ИИ, не теряя контроля, и будете знать свой маркетплейс достаточно хорошо, чтобы изменять его по мере развития бизнеса.

Начните с сессии планирования с Bubble AI Agent

Опишите свою идею маркетплейса Агенту, и он начнет с сессии планирования, задавая уточняющие вопросы и составляя план, который вы сможете доработать перед тем, как он сгенерирует дизайн, базу данных и рабочие процессы. В процессе создания он показывает, что собирается сделать, и объясняет на простом языке, что именно он построил, поэтому вы учитесь тому, как работает ваш маркетплейс, по ходу дела.

После этого вы можете продолжить общение с Агентом или работать напрямую в визуальном редакторе. Используйте ИИ, когда это помогает, или редактируйте вручную, когда вам нужна точность.

Видьте и меняйте любую часть вашего маркетплейса

Рабочие процессы читаются как шаги, которые можно произнести вслух: «Когда покупатель нажимает 'Подписаться', создать запись 'Подписка', затем добавить магазин в его список». Когда продавец просит новую функцию, вы можете открыть рабочий процесс, увидеть, что именно он делает, и изменить его в тот же день.

Ваша база данных также видна, включая каждый магазин, товар и заказ. С помощью правил конфиденциальности вы решаете, кто что видит в вашем приложении, вплоть до каждого поля. Это важно для маркетплейса, где покупатели и продавцы доверяют вам свои данные.

Растите в вебе и на мобильных устройствах с одной платформы

Многие покупатели маркетплейсов заходят с телефонов. С помощью Bubble для нативных мобильных приложений вы создаете приложения для iOS и Android в том же редакторе и базе данных, что и веб-приложение, а затем публикуете их в обоих магазинах приложений прямо из редактора.

Покупки внутри приложения (бета-версия) распространяются только на подписки. Маркетплейсы, продающие физические товары или услуги, обычно используют Stripe, но проверьте правила каждого магазина приложений для вашей модели.

Хостинг и автоматическое масштабирование включены в платные тарифы, поэтому маркетплейс, который вы запускаете, — это тот, который вы будете продолжать развивать.

Маркетплейсы, созданные на Bubble

Через приложения на Bubble проходит более $1 миллиарда в год, и эти истории маркетплейсов показывают, как это выглядит на практике:

• Ohana: Маркетплейс субаренды принес хостам $16,2 миллиона дохода за первые 14 месяцев. «Bubble дает нам преимущество, потому что любой может зайти и легко понять, что происходит», — говорит соучредитель Эзра Гершанок.
• BuyTicket: Бразильский маркетплейс по перепродаже билетов достиг 20 000 пользователей за первую неделю. «На Bubble можно быстро менять функции и учиться быстрее, чем на традиционной платформе», — говорит соучредитель Густаво Селсо.
• EqualReach: Маркетплейс для беженцев и перемещенных специалистов запустил MVP за три месяца и создал более 100 рабочих мест за первый год. «Если на платформе нужно быстро исправить интерфейс, я могу зайти в Bubble и обновить его прямо сейчас», — говорит ведущий специалист по продукту Елена Волошина.

Часть 1: Создание страницы поиска вашего маркетплейса

В течение следующих трех частей вы пройдете путь создания маркетплейса книжного магазина на Bubble. Мы показываем ручную сборку, чтобы вы понимали, как база данных, страницы и рабочие процессы должны сочетаться друг с другом, когда Агент будет создавать их для вас, и чтобы вы могли заметить все, что захотите изменить. Опишите свой маркетплейс Агенту, и он сгенерирует приложение с похожей логикой, которую вы сможете просмотреть и доработать самостоятельно.

1. Настройте структуру базы данных

Перейдите на вкладку данных (data tab). На подвкладке типов данных (data types) создайте два пользовательских типа данных: «Shop» (Магазин) и «Product» (Товар). Затем добавьте следующие пользовательские поля:

Shop:

• Name (текст): Отображаемое название магазина, которое показывается у каждого продаваемого им товара.

Product:

• Name (текст): Название книги. Поиск по ключевым словам будет выполняться по нему.
• Description (текст): Краткое описание, которое помогает покупателям решить, стоит ли кликать.
• Price (число): Хранение цены в виде числа позволяет фильтровать товары по диапазону цен и форматировать их как валюту.
• SellerShop (магазин): Связывает каждый товар с магазином, который его продает, что делает ваш маркетплейс двусторонним.

Затем детализируйте тип данных вашего продукта с помощью статических опций. На подвкладке «Option sets» (наборы опций) создайте три новых набора:

Book Genre (Жанр книги):

• Fantasy (Фэнтези)
• Romance (Романтика)
• Thriller (Триллер)

Book Format (Формат книги):

• Print (Печатная)
• Digital (Цифровая)
• Audiobook (Аудиокнига)

Book Type (Тип книги):

• Novel (Роман)
• Comic Book (Комикс)
• Short Stories (Рассказы)

Три различных варианта для каждого набора позволяют легко протестировать работу каждого фильтра. Добавьте больше, если хотите, но каждый из них увеличивает количество фильтров и метаданных, которые вы будете отображать позже.

Теперь вернитесь к типу данных вашего продукта и добавьте созданные наборы опций в его структуру. Нажмите «Create a new field» (Создать новое поле) и выберите каждый созданный набор опций из выпадающего списка «Field type» (Тип поля). Для простоты сделайте имя поля (Field name) соответствующим типу поля (Field type).

Структура вашей базы данных готова.

2. Добавление образцов данных

Образцы данных полезны для тестирования и демонстрации, и они становятся критически важными при добавлении более сложных функций.

Чтобы добавить их, перейдите на подвкладку «App data» (Данные приложения) во вкладке «Data» (Данные) и нажмите «New entry» (Новая запись), чтобы добавить свои собственные. Варьируйте свои товары, чтобы поиск и фильтры было легче тестировать.

3. Создание страницы поиска маркетплейса

Создайте новую страницу под названием «search» (поиск) в выпадающем списке страниц. Дважды щелкните по странице, чтобы открыть редактор свойств, и установите для «Container layout» (Макет контейнера) значение «Column» (Столбец).

Настройте каркас страницы. Откройте библиотеку компонентов на панели инструментов в верхней части редактора и перетащите заголовок (header) и нижний колонтитул (footer).

Затем добавьте пустую группу слева для основного контента. Измените ее макет на «Row» (Строка) и снимите флажок «Make this element fixed-width» (Сделать этот элемент фиксированной ширины).

В процессе работы переименовывайте элементы, чтобы поддерживать порядок.

Теперь создайте основной контент страницы поиска. Переименуйте группу строк в «G Dashboard» (Группа панели управления).

Затем добавьте новую группу и назовите ее «G Filters» (Группа фильтров). Вы можете добавить стиль фона из выпадающего списка, чтобы она выделялась на странице.

Рядом с группой «G Filters» добавьте повторяющуюся группу (repeating group) и переименуйте ее в «RG Products» (Повторяющаяся группа товаров). Установите следующие настройки:

• Layout (Макет): Снимите флажок «Make this element fixed-width», чтобы она расширялась до родительского контейнера, и установите для «Container layout» ячейки значение «Column» (Столбец), чтобы обеспечить вертикальное расположение.
• Appearance (Внешний вид): Установите «Type of content» (Тип контента) на «Product» (Товар), а «Data source» (Источник данных) — на «Do a search for Products» (Выполнить поиск товаров). Это указывает повторяющейся группе отображать одну ячейку для каждого товара в вашей базе данных.

Теперь добавьте текстовый элемент. В разделе «Layout» снимите флажок фиксированной ширины и установите «Min height» (Минимальная высота) на 5px. В разделе «Appearance» нажмите «Insert dynamic data» (Вставить динамические данные), чтобы создать динамическое выражение «Current cell’s Product’s Name» (Имя товара текущей ячейки).

Вы добавите еще несколько текстовых элементов в эту повторяющуюся группу. Вы можете скопировать и вставить первый текстовый элемент, чтобы сохранить настройки. Добавьте по одному динамическому выражению для каждого:

• «Current cell’s Product’s Description»: Краткое содержание книги.
• «Current cell’s Product’s Price: formatted as Currency»: Цена с символом валюты.
• «Current cell’s Product’s SellerShop’s Name»: Кто продает каждую книгу, взято из связанного магазина.
• «Current cell’s Product’s Genre’s display»: Метка жанра. Часть «display» превращает значение набора опций в читаемый текст.
• «Current cell’s Product’s Format’s display»: Метка формата.
• «Current cell’s Product’s Type’s display»: Метка типа.

Наконец, выделите все содержимое в ячейке повторяющейся группы, щелкните правой кнопкой мыши и сгруппируйте элементы в контейнер строк. Затем добавьте новую группу справа.

Перетащите иконку в эту группу и выберите «сердце». Затем добавьте кнопку и подпишите ее «Add to cart» (Добавить в корзину). Настройте отступы и выравнивание по своему усмотрению.

Чтобы исправить проблему, при которой повторяющаяся группа отображает только фиксированное количество товаров, снимите флажок «Set fixed number of rows» (Установить фиксированное количество строк) в настройках повторяющейся группы.

4. Настройка фильтров

Добавьте способ для пользователей фильтровать поиск, добавив следующие элементы в группу «G Filters»:

• Одно поле ввода: Для поиска по названию или ключевому слову.
• Один слайдер: Для установки максимальной цены.
• Четыре переключателя (radio buttons): По одному для жанра, формата, типа и магазина, чтобы покупатели могли выбрать один вариант для каждого фильтра.
• Одна кнопка: Для сброса всех фильтров сразу.

Вы также можете добавить текстовые элементы для подписи ваших фильтров. Добавьте первый текстовый элемент, настройте его минимальную и максимальную ширину и высоту, а затем дублируйте его для каждой подписи.

Теперь разберитесь с каждым вводом по очереди.

Поле поиска: Здесь не нужно ничего программировать. Пользователям нужно просто ввести в него текст.

Слайдер: Настройте подпись, чтобы включить динамические данные. После «Price filter» вставьте динамическое выражение «SliderInput A’s value:formatted as $».

Затем установите значения «Min» и «Max» на 0 и 100, а «Step» (Шаг) на 5, чтобы сделать слайдер менее детализированным. Наконец, установите «Default value» (Значение по умолчанию) на вашу максимальную цену, чтобы приложение по умолчанию показывало все товары и все цены.

Переключатели (Radio buttons): Для переключателя жанров выберите «Dynamic Choices» (Динамический выбор) в стиле выбора, а для типа выбора — «Book Genre». Сделайте источником выбора «All Book Genre», а подписью опции — «Current option’s Display».

Сделайте то же самое для переключателей формата и типа книги.

Переключатель магазина немного отличается, так как он отображает динамические данные (продавцов), а не наборы опций. Выберите «Shop» в качестве типа выбора. Сделайте источником выбора «Do a search for Shops», а подписью опции — «Current option’s Name».

Кнопка: Пока что подпишите ее «Clear Filters» (Очистить фильтры) и отцентрируйте или настройте ее ширину и высоту по необходимости. Вы вернетесь к ней позже.

Ваши фильтры готовы. Теперь соедините все вместе.

5. Подключение фильтров к повторяющейся группе

Измените «Data source» (Источник данных) для вашей повторяющейся группы «RG Products». Ранее вы сделали его простым поиском по базе данных. Если вы нажмете на динамическое выражение, вы сможете добавить ограничения к этому поиску, которые ссылаются на каждый фильтр.

Начните с жанра. Добавьте новое ограничение к поиску по базе данных и установите «Genre = RadioButtons A’s value».

Если вы предварительно просмотрите приложение для тестирования, вы можете больше ничего не увидеть в повторяющейся группе. Это ожидаемо, и исправление быстрое.

Вернитесь к выражению источника данных и установите флажок «Ignore empty constraints» (Игнорировать пустые ограничения). Теперь, если какой-либо из ваших вводов пуст, поиск по базе данных не будет применять этот фильтр.

Примените ту же логику к другим переключателям. Добавьте ограничение, которое устанавливает каждое поле равным значению соответствующего элемента переключателя.

Добавьте «Price ≤ SliderInput A’s value» в качестве ограничения. Таким образом, будут отображаться только товары с ценой, равной или ниже значения слайдера.

Наконец, добавьте еще одно ограничение для вашего поля поиска: «Name contains keyword(s) Input A’s value». Аллен использует «contains keyword(s)» вместо «contains», чтобы создать более гибкий поиск по словам. Эти два оператора по-разному сопоставляют текст, и связанная запись в руководстве объясняет, как именно.

Ваша функциональность поиска и фильтрации теперь настроена.

6. Реализация функциональности кнопки «Очистить фильтры»

Выберите кнопку, которую вы добавили в нижнюю часть группы «G Filters», и нажмите «Add workflow» (Добавить рабочий процесс).

На вкладке рабочего процесса добавьте одно действие к новому рабочему процессу. В разделе «Element actions» (Действия элемента) выберите «Reset a group/popup» (Сбросить группу/всплывающее окно), затем выберите группу «G Filters».

Если вы предварительно просмотрите свое приложение, у вас должна быть полностью функционирующая страница поиска. Клиенты могут просматривать товары, искать по конкретным названиям и фильтровать результаты.

7. Дополнительные улучшения дизайна

Вы завершили функциональную часть 1. Вот несколько дополнительных настроек, которые стоит рассмотреть:

• Добавьте пустое пространство между дизайном и краями страницы, чтобы страницу было легче просматривать.
• Добавьте изображение рядом с каждым списком товаров. Добавьте поле изображения в тип данных Product для обложек книг.
• Настройте шрифт и стили в повторяющейся группе, чтобы ваш маркетплейс соответствовал вашему бренду.
• Добавьте элементы в заголовок, такие как значок корзины, кнопка входа или ссылка «Продавать на нашем маркетплейсе», чтобы обеспечить четкую точку входа для каждой стороны вашего маркетплейса.

Часть 2: Добавление серверных рабочих процессов

Вам не нужно создавать это вручную. Попросите Агента настроить функцию подписки и запланированные электронные письма, а затем доработайте любой шаг в визуальном редакторе.

Посмотрите, что может создать Агент →

1. Обновите структуру базы данных

Начните с расширения структуры данных на вкладке данных.

Сначала создайте тип данных под названием «Follow», чтобы записывать, когда пользователь подписывается на магазин. Ему нужны два пользовательских поля: «Shop» с типом поля Shop и «User» с типом поля User.

В типе данных User добавьте поле под названием «Shops I’m Following» с типом Shop и установите флажок «Это поле является списком» (несколько записей).

Поскольку продавцы будут управлять магазином, вам также нужен способ связать пользователя с магазином, которым он владеет. Добавьте еще одно поле в тип данных User под названием «Managed Shop» с типом Shop. Вы будете ссылаться на него позже при создании инструментов для продавцов.

Чтобы позволить магазинам отправлять электронные письма своим подписчикам позже, создайте тип данных под названием «Email» со следующими полями:

• «Body» (текст): сообщение, которое магазин отправляет подписчикам.
• «Subject Line» (текст): то, что подписчики видят в своем почтовом ящике.
• «Shop» (Shop): магазин, отправляющий электронное письмо, используется для поиска его подписчиков.
• «User» (User): продавец, создавший электронное письмо.
• «Send Date» (дата): когда электронное письмо должно быть отправлено, что считывается вашим серверным рабочим процессом для планирования.

2. Создайте функционал «подписки»

Вернитесь на вкладку дизайна и откройте страницу поиска. Запрограммируйте значок сердца, который вы добавили ранее, чтобы пользователи могли подписываться на магазины.

Сначала добавьте всплывающее окно с названием «Popup Follow Shop», чтобы подтвердить, что пользователь хочет подписаться на этот магазин. В нем должен быть базовый текст, объясняющий это пользователю, а также кнопка для подтверждения подписки. Оформите всплывающее окно так, как вам нравится.

Затем добавьте рабочий процесс к значку сердца. Выберите «Показать элемент» и выберите свое всплывающее окно из выпадающего списка. Если какой-либо текст во всплывающем окне ссылается на конкретный магазин, добавьте второй шаг к вашему рабочему процессу: «Отобразить данные в Popup Follow Shop».

Теперь, когда клиенты могут открывать всплывающее окно, добавьте рабочий процесс к кнопке подписки во всплывающем окне. Первым шагом должно быть «Создать новую подписку» (Create a new Follow). Определите два поля: User должен быть равен Current User, а Shop должен быть равен магазину, продающему товар в этой ячейке.

Вам также нужно будет обновить список магазинов, на которые подписан пользователь. Для этого добавьте второй шаг в рабочий процесс: «Внести изменения в Current User».

Начните создавать бесплатно