No code bubble

Bubble’s No-Code Guide to Building Marketplace Apps

Discover all the resources you need to start building your custom marketplace with Bubble’s visual editor.

Alex Wang

Read more posts by this author.

Alex Wang

Throughout this guide, we’ll walk you through the process of using Bubble’s no-code web app builder to build your own marketplace app without code. Whether you’re looking to launch a business with your custom marketplace or just starting to understand what you can do with no-code tools, this guide will share useful tips and resources for you to think about as you start building your app.

How to Build Different Marketplace Apps

With Bubble, the possibilities for your marketplace are endless. Here are some guides we’ve put together on building some well-known marketplaces. You can potentially copy and customize these to make your own app:

Bubble App Showcase: Marketplaces

Just like you, thousands of marketplace founders have built their apps on Bubble. Here are a few examples:

Frequently Asked Questions about Building Marketplaces in Bubble

Q: How long will it take me to build my marketplace on Bubble?
A: It depends on each person’s experience and learning style, but building with Bubble is several times faster and cheaper than using traditional programming for the same result. Some of our app founders have been able to release fully functional MVPs in as few as 100 hours after discovering Bubble.

Q: What services can Bubble connect and integrate with for my marketplace?
A: Bubble offers hundreds of pre-built integrations that support marketplaces, including payments (Stripe, Paypal, etc.), email (Sendgrid, Mailchimp, etc.), and analytics (Mixpanel). Here’s our complete integration list.

Q: Can I scale my marketplace on Bubble if it becomes very successful?
A: Yes! With our paid plans, Bubble is equipped to handle scaling automatically, allowing you to expand and scale your app’s servers to meet your growing user numbers, traffic volume, or data storage.

Q: Can I hire someone to build my marketplace app for me?
A: Yes! A number of agencies build Bubble apps that are then easier for you to maintain and update than an app built in code. You can find available Bubble agencies here.

Additional Resources for Creating Your Marketplace

Did you know that we offer a variety of Bubble Bootcamps that can help you hit the ground running on your marketplace app? Our Jumpstart Bootcamps can help you master the basics, and our Build and Launch Bootcamps can help you build a launch-ready marketplace app in just 8 weeks. From ironing out your app’s framework to mastering a specific Bubble technique to polishing your data structure, our Bootcamps are the best way to learn Bubble. For even more help building your app with Bubble, check out these resources:

Getting Started on Your Marketplace with No-Code

Your marketplace app will only be as solid as the planning you do in advance. We’ll start by highlighting the key things to think about:

If you haven’t already, it’ll be useful to get comfortable in the Bubble editor. We recommend completing our introductory lessons and crash courses, which guide you step-by-step through the most common Bubble features. This will help you get a running start when you build your marketplace.

Configuring Your Data Structure

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by laying out the data types and fields that you will use throughout your various app pages. In a marketplace, there are usually three core data types:

Bubble’s default database makes it easy to create different data types with unique fields. For more guidance, check out the video tutorial on configuring your data structure below or read about it in our Bubble Manual.

Designing a User Interface and Page Structure

Next, we will focus on using Bubble’s visual design tool to shape the user-interface of our product. First, determine your app’s page structure with some key marketplace components in mind:

This video tutorial walks you through the basics of designing an interface:

You can also read more about these concepts in our Bubble Manual:

Build Out Features with Workflows and Stripe

Now that you’ve structured both the design and database for your app, it’s time to stitch it all together and make your product functional.

Some of the core features and functionalities of your marketplace app are involved with conducting transactions. The main examples are:

Most importantly, you will likely need to install a plugin to easily accept payments and process orders. A common plugin for this is Stripe. You can watch a full video tutorial on how to implement Stripe below or read about it in our Manual.

There are many more resources that offer detailed instruction on configuring these workflows, including in our How To Build articles.

Launching Your Marketplace

Once you’ve gotten familiar with creating custom data fields, displaying dynamic content, and installing plugins, you can get even more creative and refine your marketplace until it’s ready to launch. Our paid plans will also let you host your app on your own custom domain.

Check out the video tutorial below to understand how to deploy your app, or learn more by reading in our manual.

Обзор Bubble: мощный конструктор веб-приложений без кода

Несмотря на то, что зерокодинг в России только набирает обороты, в распоряжении зерокодера десятки платформ под разные задачи и вкусы. Есть довольно простые, как iBuildApp, и многофункциональные — как Bubble. Последний — один из лидеров среди конструкторов веб-приложений. Ему и посвящен этот обзор.

Общая информация

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

Из-за обилия возможностей разобраться в Bubble чуть сложнее, чем в Glide, Adalo или Webflow. Зато возможностей куда больше. Разработчики создают как простые приложения для личного применения, так и сложные системы на десятки−сотни тысяч пользователей. Например, на основе встроенных шаблонов можно построить онлайн-школу, CRM-систему или клон Uber.

Основное понятие в Bubble-разработке — рабочий процесс (workflow). Сначала вы собираете интерфейс из форм, кнопок, иконок и текста, перетаскивая их в рабочее пространство. А затем «оживляете» каждый элемент — закрепляете за ним события и связываете с другими элементами и данными. Мы ещё расскажем подробно о процессе разработки.

Как Bubble спасает от рутины

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

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

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

Ограничения Bubble

Есть 3 вещи, которые Bubble не может или может, но не очень хорошо.

На Bubble нельзя создавать мощные игры. В платформе нет инструментов для работы со сложной графикой и физикой. Зато можно собирать игрушки с примитивной механикой: «крестики−нолики», казино, судоку и др. Все-таки Bubble — это про бизнес-приложения, а не про развлечения.

На Bubble по умолчанию нельзя сделать нативное мобильное приложение. Это значит, что его не получится установить на Android и iOS. Но не спешите расстраиваться. Проблему можно обойти с помощью двух инструментов:

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

С адаптивностью в Bubble сложновато. Чтобы сделать адаптивное веб−приложение, нужно погружаться в нюансы платформы и потратить время. Поэтому собрать лендинг или простую страницу удобнее в Тильде, а приложения с базами данных и сложной логикой — в Bubble. Затем их можно объединить на одном домене.

Во всем остальном Bubble — полноценный инструмент для разработки полезных и работающих веб-приложений.

Изучить Bubble и начать зарабатывать можно на нашем курсе «Зерокодер на Bubble»

Сколько денег экономит Bubble по сравнению с традиционной разработкой

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

Допустим, есть задача: разработать личный кабинет ученика для оффлайн-школы с обучающими материалами, домашними заданиями и контрольным работами. В школе зарегистрировано 15 тыс учеников. В этом году компания планирует привлечь еще 10 тыс.

Вот из чего складывается стоимость заказа:

Если заказываем в студии на цену также влияют репутация, город и наличие офиса. Московская студия с офисом в «Сити» попросит за работу в 1.5-2 раза больше, чем группа специалистов из Красноярска на удаленке. Цена за решение нашей задачи «под ключ» начинается от 1 млн рублей. То есть за эти деньги студия разработает для школы уникальный дизайн, напишет код с админкой и ролями ученик/преподаватель и опубликует приложение в сторах. Часто студии гарантируют бесплатную техническую поддержку от нескольких месяцев.

Если создаём на Bubble — цена зависит от тарифа. Так как компания планирует привлекать новых пользователей, нужно масштабируемое решение. В нашем случае подходит тариф Professional за 129$ или 115$ в месяц, если оплачиваем на год вперед (подробнее о тарифах ниже).

Допустим, зерокодер напишет приложение за месяц. Тогда себестоимость работы — около 130$. По нынешнему курсу — 10 тыс рублей. Прибавим сюда вознаграждение за работу — примерно 100 тыс рублей. Итого: 110 тыс.

Получается, что зерокодер выполнит заказ на Bubble примерно в 10 раз дешевле, чем студия. Самостоятельная разработка вообще обойдётся 100 раз дешевле, но тогда нужно четко понимать структуру приложения и нанимать дизайнера. В любом случае, когда необходимо написать стандартное бизнес−приложение, есть смысл обратиться к Bubble.

Тарифы: какие есть и как подобрать подходящий?

В Bubble есть 4 основных тарифных плана. Один базовый, для знакомства с платформой и три для разработки.
Тарифные планы и некоторые опции перечислены в таблице. Подробнее с ними можно ознакомиться на странице bubble.io.

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

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

История Bubble: как появился и стал платформой разработки номер один

Идея Bubble пришла в голову Джошу Хаасу, когда он работал в Share Point. Тогда ему удалось разработать платформу, на которой сотрудники без технического бэкграунда могли создавать свое ПО. Увидев перспективы, Джош решает построить нечто более масштабное и открывает компанию. Через пару месяцев он знакомится с Эммануэлем Страшновым — будущим соучредителем Bubble.

Первые пользователи появились у Bubble в декабре 2012 года. По словам Страшнова, на тот момент у платформы не было многих важных функций, и она частенько лагала. По сути это был MVP для создания MVP. Но даже в таком виде клиенты были в восторге от Bubble. После презентации на ProductHunt на платформе зарегистрировалось 3000 новых пользователей. С тех пор трафик только растет.

На начало 2020 года Bubble приносил создателям более 100 000$ в месяц. Уверены, что после глобальной миграции бизнеса в интернет сумма только выросла. Компания продолжает расти, привлекает разработчиков, маркетологов и планирует стать сервисом для создания нативных приложений.

Знакомимся поближе

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

Регистрация и первые шаги в зерокодинге

Зарегистрироваться на платформе довольно просто — достаточно ввести email и пароль или, что проще, залогиниться через Google или Github.

Домашняя страница Bubble

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

Что умеет Bubble?

Основа построения визуала в Bubble — технология drag-and-drop. Зерокодеры перетаскивают графические элементы в рабочую область и собирают из них интерфейс. Для каждого элемента можно настроить параметры отображения: длину и ширину, цвет и толщину границы, размер шрифта и т.д. Помимо общих параметров, есть и индивидуальные. И те и другие отображаются в соответствующем диалоговом окне. Позиция элемента задается через координаты или вручную.

После компоновки — формы, кнопки и ссылки «оживляют» — закрепляют за ними события и связывают с данными. Как мы уже сказали ранее, зерокодеры выстраивают рабочий процесс (он же workflow), который представляет собой цепочку действий и событий. Например, чтобы кнопка Save сохраняла пользовательские данные и сбрасывала содержимое полей, на нее последовательно навешивают действия «Create a new thing» и «Reset inputs».

Create a new thing — создает запись в БД. Например, можно создать запись user и прописать поля name, surname, birth и пр. Для каждого поля указываем источник данных. В нашем случае name берет информацию из инпута «Имя», а surname — из «Фамилия». Reset inputs — сбрасывает все, что ввел пользователь.

В панели Workflow более 50 действий, с которыми можно построить любой популярный сценарий. Вот некоторые из них:

А еще там с десяток опций для работы с пользовательскими событиями и API сторонних приложений.

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

Окно установки плагинов в Bubble

Чтобы найти подходящий модуль, достаточно в панели Install new plugins выбрать тип (работа с API, фоновые сервисы и т.д.) и категорию. В окне появится список платных и бесплатных плагинов, которые можно отсортировать, например, по рейтингу или цене. Если ничего стоящего не нашли, можно загрузить свой js-код через панель My plugins.

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

Примеры приложений на Bubble

«Тильда для ресторанов»

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

Тогда он решил назерокодить свой проект и проверить гипотезу — насколько интересен этот рынок и есть ли в нем деньги. Результатом стал Ornum.

Автоматически сгенерированный мини-сайт ресторана

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

Дашборды со статистикой по среднему чеку, количеству посетителей и выручке

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

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

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

Карьерный цех. Сервис для найма продактов

Паша Шишкин в одиночку назерокодил приложение, которое берет на себя первую половину воронки найма. Оно избавляет компании от необходимости проводить по 30 собеседований на одну позицию, а кандидатов — каждый раз проходить всю воронку найма.

Основная часть воронки найма — тестовое задание. «Карьерный цех» дает одно задание на всех продактов, они выполняют его и оценивают друг друга — на выходе получается рейтинг кандидатов, компании выбирают тех, кто по своему мышлению и уровню проработки тестового подходит им больше всего. Модель монетизации простая — компании платит комиссию, если кандидат успешно прошел испытательный срок.

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

Анкета, которую пользователи заполняют после регистрации

Еще надо понимать, что каждое поле в Bubble отправляется отдельным запросом, такое ограничение системы. Например, все 170 позиций рейтинга загружались довольно долго.

Паша собирал приложение для «Карьерного цеха» полтора месяца и тратил на это по 15−20 часов в неделю. То есть в сумме ушло примерно 120.

Ornum. Мобильное приложение для геймификации обучения и личного развития

Еще одно приложение Евгения Спорыхина. На этот раз вместе с ребятами из WeLoveNoCode он сделал мобильное приложение под iOS и Android — Ornum. Оно помогает осознанно выстраивать карьеру и прокачивать нужные навыки с использованием геймификации. Пока это самое крутое мобильное приложение на Bubble от российских разработчиков, которое мы встречали.

Экран Ornum с дашбордами и статистика по выполнению задач

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

Экраны регистрации, входа в приложение и карта компетенций

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

Каждый день надо выполнять задания и зарабатывать баллы. Если выполняешь все дневные задачи — получаешь дополнительный балл, если пропускаешь день, не получаешь «страйк».

Что внутри приложения:

Евгений делал приложение один. В традиционной разработке нужна была бы команда из пяти человек и 1−2 млн рублей (при готовом ТЗ), а с итерациями и добавлением функций это в итоге могло бы обойтись в 4−5 млн рублей.

Где поучиться и что почитать?

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

Обучающий курс есть на сайте самого сервиса. Это мини-экскурсия по интерфейсу и основным возможностям платформы. Чтобы начать, просто зарегистрируйтесь. Дальше — Bubble сам все покажет с помощью стрелочек и всплывающих подсказок. Когда разберетесь в интерфейсе, можно попробовать силы в разработке приложений-клонов. В разделе How to build — 50 туториалов, в которых вы научитесь создавать Instagram, Netflix, Spotify и другие крупные приложения.

Полезные материалы о Bubble и зерокодинге в целом есть на портале no code.tech. Их можно найти в разделе nocode.tech/learn. В обозримом будущем сайт планирует запустить платную подписку с премиум-контентом и скидками на Bubble за 40£ в месяц. Подписаться можно уже сейчас.

На русском языке есть есть полноценный курс от университета зерокодинга с живыми эфирами, геймификацией, отличной доходимостью и бизнес-модулем, в котором учат зарабатывать на Bubble, искать и вести переговоры с клиентами. Еще рекомендуем справочное руководство от команды Ne-Coder. По сути, это перевод справки Bubble.

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

Вывод

Bubble отлично подходит для разработки как MVP, так и «боевых» веб-приложений. Он гибкий, расширяемый и постоянно развивается. Конечно, у платформы хватает ограничений, но в своих задачах — это лучший инструмент. Стать профессионалом здесь непросто: нужно разобраться в особенностях построения рабочих процессов, работе с БД и API сторонних сайтов, понимать, как элементы будут отображаться на экране устройств и т.д. Но если всему научитесь, то станете востребованным зерокодером. Ведь клиенту не столь важно, на чем написано приложение. Гораздо важнее сэкономленное время и успешное решение поставленной задачи.

A 2022 Guide To Web App Development in 10 Days

This simple, 10-day guide will get you started with web app development using Bubble’s no-code editor.

Vivienne Chen

Vivienne is Bubble’s Content Manager & Writer. She is a storyteller and is passionate about meaningful ways technology can help foster social solidarity.

More posts by Vivienne Chen.

Vivienne Chen

This guide is for people who are new to the idea of building a web application. We’re going to help get you started using Bubble’s no-code web app builder. If you have coding experience or you’ve worked with other no-code tools, you might find yourself ready to develop apps even faster than 10 days – and that’s great! Either way, if you have amazing ideas for tech products and want to learn how to develop an app yourself, we’re here to help you start your journey.

Day 0: Sign up for Bubble for free.

Time required:

50 minutes or how long it takes for your bread dough to rise.

Our interactive lessons show you how to harness basic tools in the Bubble editor that you’ll need to build any web application.

Between lessons, you can also create what are called wireframes of your application’s pages, either on paper or using a prototyping tool. Wireframes are low-resolution mockups of your page design. This is where you should also consider how many pages you want in your web app. The answer can be: one or more than one. Your desired number of pages will help guide your design process once you start to develop apps in Bubble on Day 5.

Day 3: Revisit the lessons in hard mode & go over the fundamentals.

50 minutes + 5 minutes for video watching, less than the time it takes to complete an escape room.

If you breezed through the lessons, try them again in hard mode (without the arrow helping you navigate).

Bonus: Review Bubble fundamentals video course, and ask yourself a few more question about your app’s design: Do I want my app to be mobile-friendly? If yes, get familiar with the Responsive editor. Am I going to be creating a multilingual app? If yes, the Settings tab > Languages section will be your friend.

Bubble has the capability to offer responsive layout editing and allows anyone to develop apps in multiple languages; just remember to give yourself some time to get comfortable with these features during your web app development process.

Day 4: Build your database.

Time required: 1-2+ hours—less if you’ve been thinking like a programmer.

In your new application, use your past few days of brainstorming to create your data types in the Data tab. This is a key step in making your Bubble app and sets Bubble apart from other simple website builders or no-code tools. Database creation normally requires engineering skills, but with Bubble, all you need to develop apps is the logical mindset to set up your app’s data organization. These data types will allow you to build dynamic pages, set up workflows, collect inputs from your users, and more.

If you forget something or want to add a new field or data type to your database, you can easily add the entry in your Data tab whenever you need it. Be careful if you’re deleting or modifying your data types after you’ve built workflows and check them to ensure they run correctly.

Day 5: Create your web app’s pages & customize your styles.

Time required: An afternoon, depending on how much you like to fiddle with things.

Now it’s time to begin building the basic pages and reusable elements you will need, starting in the top left corner of the editor. Reusable elements are for any visuals you want on multiple pages (headers, footers, site-wide popups).

If you are creating a one-page app, you should focus on grouping your elements on Day 6, and learn how to hide/show groups of elements of your app based on where the user navigates.

Examples for pages many apps might need include:

Don’t forget to visit the Styles tab to begin adjusting your app-wide style setting for elements that you will be creating soon.

*Did you know? You can set a page’s «Type of Content» to be a data type. You use this when you want to generate dynamic content on that page based on your database. Examples of pages that use this include: a Restaurant profile in a food review app, User profiles on a social networking site, and an individual Item page in a marketplace. We’ll touch on element content tomorrow.

Day 6: Design your elements & set up your integrations.

Time required: A morning, afternoon, and evening, but less for every repeating group you have.

In the Design tab, you can create buttons, links, images, text input elements and more on your pages. In the Responsive editor, you can check to see how your app appears on various screen sizes, and create «hiding rules» to determine which elements appear on smaller screens.

Three other key things you should know about elements are:

You can design in Bubble from scratch, import a template, or try our design import from Figma feature. With Figma, you can transfer your mockup into Bubble with corresponding elements that are ready to be connected to workflows.

Now’s also the time to explore additional plugins and integrations if you need custom elements like a Zoom video or to connect to external APIs, like a Stripe API to do payment workflows (in tomorrow’s steps). Find what you need and install them with a click in Bubble’s Plugin tab, then set them up with any necessary key information.

Day 7: Link it all together with workflows.

Time required: 3+ hours depending on how many pages, elements, and actions you have, so get into the flow.

Workflows are powerful ways to turn your app from a basic design to a working product. Building workflows will help you connect your data to your design and make your app fully functional!

Click on individual elements to “Start/edit workflow” or navigate to the Workflow tab and build out what you want your elements to do. You can, for example:

This step can take a bit of time and care as you are connecting your design to your data. But once you’re done, you’re almost done building a web app with no code!

Day 8: Add privacy rules.

30 minutes, around the time it takes to set up a VPN.

Web apps need custom permissions because you may want different users to see different things. By default, anyone (logged in or out) can see all data types and pages of your app, so go to the Data tab and click Privacy to set up some privacy rules in your app for your various data types.

Day 9: Test your app & debug any issues.

If you need help, visit our Support Center or ask on our forums.

What You Can Build With Bubble

Discover examples of real applications built with no code, from marketplaces to management tools.

Vivienne Chen

Vivienne is Bubble’s Content Manager & Writer. She is a storyteller and is passionate about meaningful ways technology can help foster social solidarity.

More posts by Vivienne Chen.

Vivienne Chen

If you’re looking to build a digital startup and want to prove your idea, you may be wondering, “can I really build this myself without hiring someone to help code this?”

The answer is yes, if you’re using Bubble. Bubble lets you build sophisticated web apps using our drag-and-drop UI editor and powerful built-in workflows & database.

Here are some of the most popular types of apps you can build in Bubble, with successful examples from us and our users. The best part is: these are all built with no code.

Custom Marketplace

These days, there are increasingly diverse online marketplaces that will let you buy and sell just about anything. But if you’re trying to build something uniquely innovative, like a marketplace for boat docks, private storage, or music lessons, existing out-of-the-box e-commerce solutions geared towards physical goods might not make sense for you. That’s where Bubble comes in. Bubble’s Repeating Groups and built in User sign-in system will let you create your multi-way marketplace and listing pages with ease.

Examples of marketplaces built on Bubble: Piershare, the “Airbnb” for boating docks, String Theories, for music lessons.

Try building a marketplace for yourself by signing up for Bubble for free.

Social Network

Today’s giants of social media are coming under scrutiny for their practices. If you’re tired of the culture of existing social media or are looking for new ways to let people connect digitally, you can build your own social network using Bubble. Building your own social network with no code means you also don’t need to find a technical co-founder, especially not one who might «Zuckerberg» you out of your company in future.

Example of a social network built on Bubble: NotRealTwitter, a demo by AirDev.

Learn how to clone other major social networks like Instagram and Facebook with no code by checking out our How To Build series.

Booking App

Tour operators looking to sell excursions often turn to Bubble for their custom web apps, and service providers can create a custom booking portal for their business that delivers quotes and directly manages payments. Like marketplaces, listing services can be achieved dynamically in Bubble, and you can even build a backend portal for your team within the same app to manage requests. Bubble offers built-in analytics and database metrics that can help you better track your business’ performance and your customers’ behavior.

Examples of booking apps built on Bubble: OceanAir Travel for tourism, YardGuru for landscaping.

Visit Bubble Academy for help along on your no-code journey.

Personal Finance Tools

Budgeting and invoice management tools are increasingly popular, and apps can offer people simple ways to save money from their phone or browser. Bubble has been used to build several exciting personal finance tools that give people the ability to pay off debt, manage their freelance earnings, track expenses, and more. Teams creating these tools save money developing their tech ideas with Bubble.

Examples of personal finance apps built on Bubble: Qoins for paying off debt, Incomee for managing invoices.

Community and Review Sites

Forums and online communities have existed since the early days of the Internet. Now you can build sophisticated communities with features for your users based on their shared interests, all without having to write a single line of code. Commenting, reviews, and “upvote” systems are fairly easy to implement in Bubble, while not being possible on other website builders or tools.

Example of communities build on Bubble: Nucode for the no-code community, NuNotions for beauty products.

Internal Management Tool

There are plenty of project management tools out there, but maybe your team needs something more customizable to your business. Or maybe you are looking to offer people a new way of organizing their work lives with your exciting new startup. We’ve discovered firsthand how building your own project management tool is a worthwhile endeavor for many teams, ours included!

Example: Think Confluent, JustOKRs, Co-planning, and Bubble’s Internal PM tool!

Food Delivery Service

Are you a pioneering restauranteur or a hustling courier? You may decide you want to skip the high fees and predatory practices of listing on other delivery apps by building your own. Or you want to service your region better by offering a delivery app that caters to your neighborhood. All around the world, Bubble users have built custom delivery services that offer couriers, provisioners, and hungry users something different on their plate.

Examples of food delivery services built on Bubble: Nóz delivery and Ceu delivery serving Brazil.

Jobs Boards

Finding a new role can be hard and not everyone wants to use Linkedin. Bubble lets you build a searchable and contribution-friendly database of jobs for any industry, with specialized roles for talent, companies, and hiring recruiters. And you don’t need to hire any engineers to deliver a final product.

Examples of jobs sites built on Bubble: goodgigs for social entrepreneurship roles, Theo Jobs for design roles.

Educational Tools

Remote learning or digital tools to help educators are more important now than ever before. Educational innovators have built new ways of helping students, parents, and teachers organize and deliver engaging content through web applications. Entrepreneurial students from major universities are now learning Bubble to build their own web apps to enable them to try out new ideas for exciting projects and startups.

Examples of education tools built on Bubble: Remote Quiz for young learners, Behavior Rocket for parents.

And more!

This list is not even close to the limit of what Bubble can build. We’ve seen our creative users build everything from games to dating apps. While we will be the first to say that Bubble is great for some ideas and less good at others (see our response to: what you can and can’t build in Bubble), Bubble is ultimately an open-ended visual programming tool. With Bubble, you have the power really push technology to its limits and create new, exciting opportunities – without needing to spend a fortune on engineering talent.

About Bubble

​​Почему Bubble.io? Обзор no-code сервиса для разработки веб-приложений

Мир no-code сервисов разнообразен. От конструкторов сайтов и лендингов (Tilda и Wix), создания простых мобильных приложений (Glide), до коннекторов (Zapier и Integromat) и профессиональных сервисов для создания сложных веб-приложений (Bubble и Directual).

Разработка приложений без кода — это особый тип создания приложений. Мы потратили много времени на тестирование и проверку возможностей разработки приложений во многих конструкторах приложений без кода. Самый мощный и универсальный сервис для создания веб-приложений, на наш взгляд, это Bubble — часто называемый Bubble.io, ранее известный как Bubble.is.

Bubble.io — это среда разработки приложений без кода, которая позволяет проектировать, разрабатывать, размещать и масштабировать приложения без написания кода. Bubble в настоящее время содержит сотни тысяч веб-приложений с миллионами пользователей, начиная от хобби-проектов и запущенных стартапов и заканчивая компаниями из списка Fortune 500 и университетами. Bubble названа одной из самых инновационных малых и крупных компаний 2021 года по версии журнала Fast Company.

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

Что нужно каждому приложению?

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

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

С технической точки зрения Bubble объединяет модули с кодом JavaScript, CSS и HTML в работающее приложение node.js. Собственный язык Bubble основан на JSON. Хотя вам не нужно полностью понимать эти термины для создания приложений, они говорят об одной важной вещи: Bubble следует проверенным и общепринятым веб-стандартам, что позволяет разработчикам значительно расширять его собственные функции.

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

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

С недавним взрывным интересом к no-code может показаться, что Bubble — это недавнее изобретение, но на самом деле Bubble существует уже давно. Он был основан еще в 2012 году, когда Джошуа Хаас (выпускник Гарварда по философии) увидел потенциал решения известной проблемы: как упростить для нетехнического предпринимателя создание технологического продукта? Он познакомился со своим соучредителем, выпускником Гарвардской школы бизнеса французского происхождения Эммануэлем Страшновым, и они договорились о концепции.

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

В течение следующих лет Джош и Эммануэль работали над улучшением Bubble, постепенно добавляя ключевых членов в свою команду. К тому времени, когда снова начались дискуссии о привлечении инвестиций, у Bubble уже было 250 000 зарегистрированных пользователей и годовой доход в 1 миллион долларов. Предстоящий начальный раунд привлек крупных инвесторов с портфелями, которые включали Facebook, Dropbox, Lyft, AirBnB, Notion, Behance и Lean Startup.

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

В 2017 году компания превысила 250 000 пользователей. В 2019 году они привлекли 6,25 миллиона долларов от посевных инвесторов и еще 100 миллионов долларов в виде венчурного финансирования в 2021 году.

По данным Similarweb, Bubble.io посещают около 2,1 миллиона посещений в месяц с июня по август 2021 года. По состоянию на середину октября 2021 года по данным Alexa, Bubble.io занимает 3323-е место среди самых популярных веб-сайтов в Интернете в мире.

Согласно нашему анализу с использованием данных Google Trends, трафик на Bubble.io вырос более чем на 430% в 2021 году по сравнению с сопоставимыми периодами 2017 года.

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

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

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

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

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

Со временем вокруг Bubble возникло множество агентств, которые занимаются созданием приложений для клиентов. На официальном сайте Bubble есть список таких агентств. Большинству агентств сегодня требуется минимальный размер бюджета в диапазоне от 2000 до 7000 долларов в зависимости от сложности проекта и реализуемых функций. Одним из плюсов разработки у агентства является выделенная команда профессиональных разработчиков, которая занимается созданием приложения. В дальнейшем агентство может поддерживать и развитить ваше приложение. В этом случае заключается договор с относительно небольшой фиксированной ежемесячной платой, по сравнению с затратами на собственный IT-отдел.

Наша студия веб-разработки 0code состоит в списке агентств Bubble и предоставляет услуги по разработке и поддержке приложений.

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

No-code значительно снижает стоимость и время вывода на рынок новых приложений для стартапов и малого и среднего бизнеса.

Давайте рассмотрим несколько различных сценариев, в которых отсутствие кода может дать вашей компании значительное конкурентное преимущество:

С помощью разработки на Bubble можно получить MVP от стадии эскиза до запуска за несколько недель, что позволит вам быстро тестировать гипотезы с реальными пользователями и реальными транзакциями. Зачем тратить время на бизнес-план, если вы можете проверить свои гипотезы на реальном рынке?

Пользовательское программное обеспечение

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

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

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

Многие наши клиенты, которые раньше не были знакомы с Bubble, а обращались к традиционным методам разработки сильно удивляются, когда после демонстрации макетов будущего приложения и объяснения логики получают от нас ответ: “Мы готовы приступить завтра, а через 3 недели вы сможете протестировать первую версию вашего приложения. Если потребуется внести какие-то правки или изменения, это займет всего пару дней”.

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

How To Build A Stock Market App With No Code

Learn how to create a financial data tracking app, using Bubble’s visual web editor.

Lachlan Kirkwood

Lachlan is a digital marketing specialist and passionate no-code maker.

More posts by Lachlan Kirkwood.

Lachlan Kirkwood

Whether you’re doing some first-time market research, or you’re a full-time day trader, mobile apps like Apple Stocks have made it easier than ever to make well-informed decisions based on real-time finance data.

If you were ever interested in building your own finance app, it’d traditionally require a team of software engineers with experience using advanced APIs.

As the no-code movement has continually scaled, it’s now possible for anyone to build their own powerful software without touching a single line of code.

Bubble’s visual programming tool is the gateway for makers of tomorrow. Our customers from across the world are using Bubble to build their own marketplaces, directories, and even social networks.

Throughout this post, we’ll uncover the process behind building an Apple Stocks clone using Bubble. Whether you’re looking to replicate the entire product, or you’re just interested in utilizing some of the core features from the platform, this guide will share how to start writing the workflows to get started.

The steps to building a stock market app with no code include:

Get Started

Before you start, you’ll need to first register your free Bubble account. Click the button below to get started, then you can follow along as we build our product together.

Register your account on Bubble.

New to Bubble? Follow along on our introduction videos to get familiar with the basics of Bubble.

We also recommend completing our introductory lessons which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when creating a Stocks app.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database. (We recommend thinking about your data first!)

In this case, we’ll start by using Bubble’s visual design tool to shape the user-interface of our platform. If you’re replicating a version of Apple stocks, you’ll only need to build one core homepage.

Configuring your database

Even if you haven’t finalized the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When building Apple Stocks as an MVP, we’ll need to create the following data types & fields:

Data type: User

Fields:

Data type: Stock

Fields:

Data type: Stock price

Fields:

Build your workflows

Once you’ve structured both the design and database of your application, it’s time to start stitching everything together and making your app functional.

In Bubble, the main way to do this is with workflows. Each workflow happens when an event occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)

Searching for a stock (data from external API)

The first feature we’ll build is a function that allows a user to search for an individual stock, then save this to a watchlist.

On our home page, we’ll start by using a text input field to create a search bar experience for stock symbols.

Below this, we’ll also add two additional text input fields. These will be used to display the current price of the stock, and the current date/time.

In order to fetch real-time stock prices within our mobile app, we’ll then need to install the Financial Data plugin.

Note: Once you’ve installed this plugin, you’ll also need to configure the API keys inside the plugin settings.

From here, we can now create a feature to display the current price of a stock when a user performs a search for its symbol. Within our stock price input, we’ll update the initial content field to include this data.

When configuring this initial content, start by selecting the get data from external API option.

Next, we’ll indicate which specific stock we’d like to fetch this data for. In this case, we’ll choose the value from the stock symbol search input element.

Finally, we’ll then need to confirm what data we’d like to fetch from this API. In this instance, it will be the stocks price.

Now, we’ll also need to configure the date/time input element to record the time of the stocks current price.

Within this element, we’ll update the initial content field to record the current date/time.

As we won’t need to display this element on our user interface, we’ll also unselect the option to display this element when the page is loaded. This will now make the element invisible.

Adding a new stock to a watchlist

Once a user has searched for an individual stock, we can now create a workflow that saves this item to their total watchlist of stocks.

We’ll build this workflow by creating a trigger when the add to watchlist button is clicked.

When building the workflow for this feature, we’ll start by opting to create a new thing.

In this instance, we’ll want to create a new stock. When creating this stock, we’ll match the on-page stock symbol element with the corresponding field in our database.

When storing the current price of the stock, we’ll once again need to request data from our external API.

Like before, we’ll be fetching data from the API provider that sources the latest stock prices. The stock symbol we’ll be requesting data from is the value from our on-page search bar.

Finally, we’ll once again verify that we’ll be recording the stocks price.

Now, we’ll also link this stock price to the stock we just created in step 1 of our workflow.

Start by opting to make changes to a thing in your database.

The thing you’ll want to change is the current users list of stocks, adding to it the stock we created in step 1.

Whenever this workflow runs, a new stock will be created.

Displaying a list of stocks

Once a user begins adding stocks to their watchlist, we’ll need to display this as a list on their home page. This can be achieved by using our repeating group element.

Repeating groups are a powerful way to display a dynamic list of data from your database.

Once you’ve added a repeating group, you’ll need to configure the data type to be a stock.

When the data type is set, you’ll then need to identify which data you’d like to display from your database. In this case, we’ll display all of the stocks from the current users stocks.

Once we’ve configured the data for our repeating group, we can then start to add dynamic content that will be displayed within the element. Simply map out the top row, then this powerful element will pre-fill the remaining columns.

As the data of our stock prices and individual stocks are stored separately, we’ll need to use a lookup field when displaying the price of a each cells stock.

By searching for all of the stock prices where the original stock is the same as the current cells stock, we can display the last recorded price for this stock.

The last feature we’ll add into a users list of stocks is a graph that displays the historical price of each item.

Using Bubble’s chart element plugin, it’s possible to seamlessly add a line graph into our repeating group cells.

When adding this item, we’ll also need to configure the data it displays.

In this instance, we’ll start by configuring the data type of this graph to be a stock price.

Next, we’ll configure the data source to once again search for stock prices where the original stock is the value of the current cells stock.

Using Bubble’s no-code platform to configure a dynamic line graph element

FInally, we’ll configure the label and value expressions to display the current points stock price, as well as the current points modified date.

Now this line graph will display a historical plot of all the stocks registered prices by their date/time.

Fetching stock pricing data (by scheduling a backend API workflow)

Once we’ve configured our repeating group to display a stocks historical price list, we’ll need to create a workflow that constantly fetches and updates these prices with new data. This can be achieved by using Bubble’s API scheduling tool.

Using Bubble’s editor, it’s possible to connect with external API endpoints. If you haven’t had any experience working with APIs, I’d recommend watching this video tutorial to help you get up to speed.

When working with APIs, we’ll need to break the process down into two separate stages. First, we’ll need to build an API event using Bubble’s backend editor, then we’ll create a trigger in our front-facing editor that calls on this event.

Note: You can access Bubble’s backend workflow editor once you enable the API settings in your project.

Once enabled, you can click-through to your backend editor through the main dropdown menu.

From here, we’ll create a new API endpoint event.

When creating this event, we’ll need to provide it with a name. This name is what we’ll use as a reference to call the API in our front-end workflows.

Next, you’ll need to add a custom parameter to this workflow. Adding a parameter allows the bubble editor to interpret what data to fetch from the API, and how to best send this data to the relevant fields in your application database.

For our application, we’ll create a custom parameter called ‘stock’ and configure it as a stock price data type.

Once a parameter has been set, we can start to identify what specific data we’ll send through to our application.

By creating a new thing, we can create an entry in our database with the latest stock price each time this API is called.

When building this event, we’ll need to create a new stock price in our database.

Once again, you’ll also need to indicate which stock symbol you’ll look up through the finance API. In this case, we’ll be searching for the stock symbol that’s linked to the current stock parameter.

Whenever this workflow is called, it will now search for a specific stock, fetch the latest price, then create a new entry in our database under the stock symbol.

After building this API event in our backend editor, we can finish this feature by creating a front-end workflow that calls on our new API event.

To trigger this API event, we’ll start by creating a workflow from the event that deploys an action every 5 seconds.

When using this event as a trigger, it’s possible to manually configure the duration in which it’s deployed. For the sake of our MVP, we’ll have this workflow run every hour (3600 seconds).

Within this workflow, we’ll then want to use the schedule API on a list event. By scheduling the API for a list, it will allow our finance API to pull data for all of a users saved stocks at once.

When building this API call, we’ll need to indicate what data we’d like to pass on from our backend event. For this workflow, we’ll set the data type as a stock price.

The stock prices that we’d like our finance API to search for are only the stock symbols that a current user has saved to their watchlist of stocks.

Finally, we’ll then indicate which API event we’d like to call on (fetch-stock-price), then also match our custom parameter to the stocks in a users watchlist.

After building this workflow, our stock app will now classify all of a users saved stocks, then fetch the latest stock prices each hour.

As our line graph also groups stock prices by their stock symbols, it will display a historical graph of a specific stocks price based on a timeline from each API request.

If you’d like some additional help when working with APIs on a list of items, I’d recommend watching this video.

Additional features

Now that you’re familiar with building custom data fields and displaying dynamic content, you can start getting creative with the experiences you build within your product. Additional you can:

Privacy & Security

Launch

Hiring a developer or dev team to build this application would cost thousands, if not tens-of-thousands of dollars. With the money you save by building with Bubble, you can afford to start investing in some stocks of your own!

Templates

If you didn’t want to build your Apple Stock clone from scratch, you can purchase one of the templates made by our community members. Some similar templates include:

Start building

Bubble can help you build an Apple Stocks clone or any other product you choose! It’s never been easier to build something incredible without having to code.

Ready to join the no-code movement? Register your free account here and get started today.

If you’d like additional help when building your product, our thriving community forum is a great place to source actionable advice and resources. Any maker is also encouraged to ask questions within the community to help empower their no-code journey.

How To Build An Etsy Clone Without Writing Code

Learn how to create your own marketplace without coding, using Bubble’s visual web editor.

Lachlan Kirkwood

Lachlan is a digital marketing specialist and passionate no-code maker.

More posts by Lachlan Kirkwood.

Lachlan Kirkwood

Love self-made crafts? How about self-made software?

No-code tools like Bubble are revolutionizing how everyday makers can build software. Bubble’s powerful platform has made it easier than ever to start building software without having to write a single line of code. Our customers are using Bubble to build websites, directories, and even social networks.

Throughout this post, we’ll uncover the process of using Bubble to build your own code-free whitelabeled version of Etsy.

Whether you’re looking to build a dedicated marketplace, or you’re just interested in utilizing some of the core features from Etsy, this guide will share how to start building the underlying logic for your no-code MVP.

Throughout this guide, we’ll highlight how to build the following key features from Etsy:

Steps to build an Etsy clone with no code include:

Get Started

Before you start, you’ll need to first register your free Bubble account. Click the button below to get started, then you can follow along as we build our app together.

Register your account on Bubble

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your no code Etsy clone.

We also recommend understanding how to create and edit user accounts. We’ve previously covered how to create user accounts in Bubble in great detail.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubbles visual design tool to shape the user-interface of our product. If you’re replicating a version of Etsy, some of the core pages you’ll want to include are:

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your Etsy clone, you’ll only need to create one page to host your individual products. We can then write the necessary logic to display only the relevant product on each page when it’s needed (we’ll cover this in more detail soon).

Configuring your database

Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When building Etsy as an MVP, we’ll need to create the following data types & fields:

Data Type: Products
Fields:

Data Type: User
Fields:

Building workflows

In Bubble, the main way to do this is with “workflows.” Each workflow happens when an “event” occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up,” “make a change to the database,” etc.)

Listing a product for sale

One of the core features of Etsy is the ability for users to list their products for sale on the marketplace.

On the product upload page, you can start creating this process by using a combination of input fields, including; free-text fields, image uploaders or multiple selection fields.

Once a user has added their relevant details within each input, they’ll click the submit button to create a new entry in your database. This button click will be the necessary action to trigger your workflow.

Using the workflow editor, you can select to create a new thing within your database. In this instance, we’ll be creating a new product.

You’ll then need to start adding data to the relevant fields within your database. Map each input field you’d like to create against its corresponding data field.

Display a list of dynamic content on your home page

Once you’ve started submitting products to the platform, you’re ready to display each item in a feed on the homepage. This can be achieved by utilizing our repeating group element.

Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type as a product.

You’ll also need to set the data source as a list of all the submitted products from your database. If you’d like to segment each repeating by a relevant category, you can add an additional constraint to your data source.

Now you’re ready to start structuring the dynamic content that will be displayed within this grid. Simply map out the first column with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.

Within a repeating group, it’s also possible to create events within each individual column.

This feature will become useful when building navigational features across your platform. As Etsy’s homepage only displays an overview of each product (including its name, image and price), you’ll want to display the full product details for each unique item on a separate page.

This additional content will need to be hosted on your individual product page.

To power this event, you’ll need to start by creating a workflow that redirects a user to your product page when the item’s image is clicked.

When creating this workflow, use a navigation event to send a user to another page. From here, select the destination page type to be the product page.

You’ll then need to send additional data to this page so the Bubble editor knows which specific product to display. The data you’ll need to display is that of the current cell’s product.

Display dynamic content on a products page

When a user is directed to a specific product page, you can easily pull this event data from your workflow to display the relevant content.

Before we create this workflow, you’ll first need to ensure that the page type matches the data property that you’re sending through your event logic. In this case, you’ll need to set the product page to a product property.

You can now start adding dynamic content into your page elements, displaying the information from the product that has been sent in your workflow.

Adding items to a cart

When a user decides they are ready to purchase a product, they’ll click the add to basket button and trigger a new workflow.

The logic behind this workflow is similar to creating a new product, only this time we’ll be making changes to a field in your database, not creating a new thing.

The thing we’ll need to change is the current user, in which we’ll want to add the product from the current page to their added to cart products.

Bubble No Code Etsy Clone Shopping Cart Walkthrough

Building a checkout using Stripe.js plugin

One of the unique features to Etsy or any marketplace is the ability to purchase products through a checkout. Using Bubble, it’s possible to harness the power of several plugins to easily accept payments and process orders.

In this guide, we’ll be using the Stripe.js plugin to process credit card payments through Stripe.

Note: After integrating this plugin, you’ll need to first configure your API keys within the plugin settings.

When you’re building a checkout page, you’ll begin by adding a repeating group that displays a list of all the items currently within a user’s add to cart data field.

Bubble No Code Etsy Clone Stripe Walkthrough

Below this list, you’ll then want to display the total price of the items collectively in their cart. Bubble will automatically calculate this based on your existing data fields.

Below this price, you can then map out a payment form where a user can add their payment details. You’ll also need to include a Stripe token element next to the payment form.

This element won’t be visible to your end-users, but is essential to powering a new transaction in Stripe.

When the purchase button is clicked, we’ll then create a new workflow that triggers a Stripe payment.

You’ll begin by selecting the event ‘convert card into Stripetoken A’. Within this event, you’ll need to configure your input fields to match Stripes payment structure.

Once a card has been converted into a Stripe token, you’ll then need to create an additional workflow that automatically processes this token from a user’s bank account.

If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.

Additional features

Once you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build within your marketplace.

Additionally you can:

Launch

Hiring a developer or dev team to build this app would cost thousands, if not tens-of-thousands of dollars. Now you can treat yourself to some new craft supplies of your own with the money you’ll save by using Bubble.

Templates

If you don’t want to build your Etsy clone from scratch, you can purchase one of the templates made by our community members. Some similar templates to Etsy include:

Start Building

Bubble can help you build an Etsy clone or any other product you choose! It’s never been easier to build something incredible without having to code.

To get started for free, sign up here.

You can also connect with other passionate makers building with Bubble on our community forum.

What Is Bubble?

And how did it clone Twitter with no code?

Emmanuel Straschnov

Emmanuel is founder of Bubble, that makes programming as easy as clicking. Born in Paris, Emmanuel studied at Polytechnique and got his MBA from Harvard. Prior to Bubble, he was a consultant in China.

More posts by Emmanuel Straschnov.

Emmanuel Straschnov

So, you’ve never heard of Bubble.

If you’ve wanted to build an app, launch a startup, or simply express an idea on the web – but you’re not an engineer and you don’t know how to code — two guys in a coffee shop have dedicated the last three years of their life to bridge that gap.

Emmanuel Straschnov and Josh Haas have built a platform that generates the code underneath your design, allowing you to program applications in the browser without needing to write any code.

And you shouldn’t have to.

If you work in fashion, you’re thinking about your design or your retail strategy. If you’re going to culinary school, you’re improving your recipes. If you’re a doctor, you’re spending time with your patients. Your focus is on your passion — where it should be.

But until now there have only been two ways to take your passion and build a web application or start an online business: 1) learn to code or 2) hire people who know how to code. The former is a huge knowledge gap for non-engineers; the latter is very expensive.

That’s why there’s Bubble.

Let’s Rewind

The first revolutionary thing Apple and Microsoft did was make computing accessible to everyone. They abstracted away the command line by providing a highly intuitive and visual interface. Then they gave us a mouse and keyboard to type and click to make the computer do what we want it to.

Coding, however, still looks very much like it did 50 years ago.

Yes, things have become easier. Programming languages have become more abstract, open source facilitates collaboration, and communities like Stack Overflow help learning. But at the end of the day, the coding process is still typing highly structured text (code) into a text editor in a way that the computer can understand.

But since we’re the ones building the computers, isn’t it reasonable to expect the computers to begin understanding the languages we already speak?

That’s Bubble’s vision. 50 years from now, I can’t imagine people programming as we do today. It just can’t be. The future is a world where programming is self-explanatory; where people talk to computers to build software. To get there, programming tools first need to begin using our language. To turn a button red, we shouldn’t have to write code — we should be able to point to the button and select a shade of red.

Coding Vs. Programing

A core belief of the founding team is that coding and programming should be two different things. They’re currently synonymous because, to put it simply, if you want to program an application you have to write the code to do it.

But wouldn’t you agree there’s a fundamental difference between understanding how an application should function and how to write the code? For example, we all understand that hitting the “post” button on Facebook will share our thoughts. And if we were programming an app of our own, we’d all be able to say “put a blue button here that says ‘post’ and when it’s clicked share whatever’s written in the text box.” Well, that’s exactly how Bubble let’s you build.

Because what deters most people from innovating online is not the programming; many people already have a very solid understanding of how applications should work and look like. We use them in our everyday lives for everything from socializing to working, so the learning curve is minimal.

The guys at Bubble claim that if you complete the 9 lessons they currently have available on their website, which should take about a week’s time, you will have enough familiarity with the platform to start building applications visually. For a first-time user that may be ambitious; but it’s certainly reasonable that within a couple month’s you’ll be able to build apps that would take years of training if you were to code them.

Because if you’re building a web app with a Ruby backend, then you have to worry about sending data from the server to the client, talking to a database, the way web browsers translate html and css into your user interface, asynchronous vs synchronous event code, and much more.

That’s all built in with Bubble, which allows non-technical people to start innovating online. “The reason Facebook took off on college campuses was because it was built for students by a student; the best ideas come about when you’re building something for your peers,” says Emmanuel. “Mark Zuckerberg happened to know how to code, so he was able to build it. If Bubble had existed back then, any student could have built Facebook.”

Bubble v. Squarespace

Squarespace and other template-based content management systems are great for templated websites that are simple and consist primarily of static content. If you want to have a blog or portfolio on the web, using Squarespace or WordPress are ideal solutions. Hell, you can even splurge on a paid template and have a different look and feel than 80% of your peers.

But it doesn’t compare to the functionality or customizability offered with Bubble. You could not build AirBnB or Facebook on Squarespace — you very reasonably could do so on Bubble, and very quickly.

How It Works (Cloning Twitter)

Vladimir Leytus, an MBA graduate with little prior coding experience, was able to clone Twitter in four days [see: NotRealTwitter]. To see Bubble in action, here’s a quick example of building the Tweet functionality.

1) Within the design tab, you design the interface of your app visually, by dragging and dropping. In this case, we want to build a popup with an input and a tweet button.

2) Next, you set a condition that changes the color of the text to red when the number of characters exceeds 140 characters.

3) Finally, program your app with workflows, e.g. “when the button Tweet is clicked → create a new tweet, wipe the content of the input, and hide the popup.”

As you can see, there’s still a bit of work to build something that appears simple to the end user, like sending off a Tweet. But understanding the flow of a user’s actions will come naturally, making the learning curve for Bubble very small in comparison to having to code.

The Future with Bubble

Bubble is building a revolutionary platform that will significantly reduce the time engineers spend reinventing the wheel into applications for people who don’t know how to do it for themselves. Instead, engineers could spend their time building libraries to a new standard, integrating them into platforms like Bubble for everyone to use. Coders will still write the code in terms of new widgets, plugins, and features — and if it’s necessary to dropdown to a lower-level language like Javascript in order to tweak things, then that will always be an option.

But in general it won’t be necessary. And we expect this to greatly increase the rate at which new ideas are born. People who don’t code will be able to express themselves online while ensuring the code underneath is built by experts; and the people who do code will now focus the majority of their time on new products and features.

This all may still sound outlandish: to claim that you can build and scale the next AirBnB without any coding skills. But if you’ve read this far, it means you’re at least interested enough to give it a try.*

“Instead of being consumers of technology, people will produce it,” says Josh. “This will unleash tremendous economic potential, as the number of people able to build new products and companies will skyrocket. It will create new jobs and opportunities for more people. It will also be extraordinarily empowering to enable people to build their own solutions to their own problems. That’s why making programming accessible to everyone is an incredible opportunity.”

Now that you know about Bubble, what will you build?

NoCode бэкенд для bubble.io — пошаговое руководство

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

В конце статьи будет ссылка на это приложение и небольшой опрос.

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

Полезное свойство ideav.pro — это, вероятно, самый мощный движок базы данных среди чистых NoCode платформ. Только здесь есть полноценный конструктор запросов и возможность работы с сотнями миллионов записей.

Объединив эти два инструмента, вы можете решить проблему производительности базы данных в Bubble, затратив минимум усилий и средств.

Мы будем использовать плагин API Connector в Bubble — его не нужно там покупать и он прост в использовании.

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

У нас есть список задач в экселе, который мы изначально хотим импортировать в это приложение, вот он:

Для начала мы создадим этот список в ideav (далее будем называть его Интеграл, так он больше знаком русскоязычной публике). После регистрации в сервисе мы запустим меню Загрузка — это универсальный загрузчик данных, который импортирует нашу таблицу в Интеграл.

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

Когда мы нажмём Проверить, загрузчик разберёт файл и предложит нам загрузить его как структуру и данные в таблицу Интеграла, выдав примерно такую картину:

Как мы видим, загрузчик распознал разделители полей и типы данных, а также показал как будет выглядеть таблица в конструкторе. Мы внесём пару правок: укажем, что Статус задачи у нас будет справочником — проставим значок ссылки, а Описание будет многострочным полем ввода — укажем тип данных Memo.

Нажав ещё раз кнопку Проверить, мы увидим окончательный вид нашего будущего справочника задач:

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

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

Мы не будем обращаться извне непосредственно к таблице, а создадим запрос в конструкторе запросов Интеграла — это займет не больше минуты. В меню Запросы создадим новый запрос, назвав его BubbleAPI.

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

Не более чем через полминуты у нас получится такой отчет по нашему запросу:

Для простоты мы пока проигнорировали статусы задач.

Конструктор отчетов умеет делать практически любые выборки из множества таблиц с фильтрацией, группировкой, сортировкой, вложенными запросами и другими возможностями, свойственными языкам запросов SQL. В нём можно сделать копию 1С, но пока нам нужен простой список.

Кликнем название запроса в конструкторе и получим соответствующий отчет в новой закладке браузера:

Здесь нам интересен адрес этого отчета для доступа извне, вот он, в строке адреса браузера, копируем его:

Итак, мы можем получать список задач по этой ссылке. Однако, нам требуется сохранять в таблицу новые задачи. Для этого мы будем использовать плагин API Connector Bubble, который будет обращаться к API Интеграла.

Чтобы создать запись для задачи с её реквизитами, нам нужно вызвать команду API и передать в ней все значения в виде параметров запроса. У каждого параметра есть свой системный номер, и нам нужно их узнать, чтобы указывать их в Bubble. Номера параметров мы можем увидеть в таблице:

Для того чтобы добавить задачу Test с датой 22.01.2022, сроком 22.01.2022 и описанием Test memo, нам следует послать из Bubble такой запрос:

Скопируем эти номера — они нам понадобятся в Bubble.

Бэкенд почти готов, и нам осталось только выдать доступ внешнему пользователю, под которым Bubble будет ходить в нашу базу.

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

В меню Пользователи мы видим нашего пользователя, которому мы зададим секретное слово, под которым он сможет авторизовываться:

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

Сохраняем это изменение.

Всё! На этом наш бэкенд полностью готов, хотя мы потратили на него не более 10 минут. Теперь мы пойдем настраивать Bubble на работу с ним.

Мы добавим три API в Bubble API Connector для таких вызовов:

Добавляем плагин и создаем панель ideavAPI:

Начнём с получения списка задач из Интеграла — раскроем панель и добавим интеграцию синей кнопкой внизу:

Настроим вызов API точно как показано на картинке, используя ссылку на отчет, ключ JSON_KV и секретное слово пользователя:

Мы используем метод вызова POST, чтобы скрыть от посторонних наше секретное слово.

Если инициализировать его синей кнопкой внизу формы, то мы получим ответ от Интеграла с нашим списком задач в формате JSON:

Если всё прошло нормально, то мы сохраняем интеграцию.

Если же что-то пошло не так, то мы увидим сообщение об ошибке и сможем исправить её:

Мы можем использовать этот вызов API для вывода задач на форме Bubble, создав на форме группу записей (Repeating group) и задав ей в качестве источника имя нашего вызова:

Добавляем в строку группы записей все поля нашей задачи и связываем их с соответствующими полями из результата вызова API:

Запустив приложение, получаем примерно такую таблицу Bubble с данными из Интеграла:

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

Теперь нам нужно организовать форму добавления задач в список. Сначала мы создадим вызов API Интеграла для запроса токена безопасности по известному нам секретному слову. Настроим этот вызов точно как изображено на картинке:

Инициализируем его синей кнопкой внизу формы и получим ответ от Интеграла с нашей авторизационной информацией, включая токен XSRF:

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

Теперь мы кладем в произвольном месте формы текстовое поле ввода, называем его xsrf и настраиваем его значение по умолчанию (Initial content) как результат вызова нашего API:

Указываем, что в запросе нам интересно именно значение _xsrf:

Bubble’s No-Code Guide to Building Dashboards

Discover all the resources you need to start building your own custom dashboard tool with Bubble’s visual editor.

Alex Wang

Read more posts by this author.

Alex Wang

In this guide, we’ll walk you through the process of using Bubble’s no-code platform to build your own dashboard without code. Building a completely custom dashboard would traditionally require the expertise of one or more seasoned software engineers. As the no-code landscape continues to evolve, however, it’s easier than ever for makers across the world to build their own powerful software.

Depending on the data it is displaying or the end use case, dashboards can come in many forms. Bubble is the perfect platform to support the dynamic needs of a custom dashboard with capabilities ranging from design flexibility to data visualization to notification triggers.

Whether you’re looking to build a highly-visible tool for your internal team or just getting started in Bubble, this guide has useful tips and resources for you to think about as you start building your app.

How to Build Different Dashboard Apps

Many dashboards exist as a feature within another app. Here are some guides we’ve put together on how to build some well-known apps that have useful dashboards. You can potentially copy and customize these to make your own:

Bubble App Showcase: Dashboards

Many users have used Bubble to build their dashboards. Here are a couple examples:

Frequently Asked Questions about Building Dashboards in Bubble

Q: How long will it take for me to build my dashboard on Bubble?
A: It depends on each person’s experience and learning style, but building with Bubble is several times faster and cheaper than using traditional programming for the same result. Some of our app founders have been able to release fully functional MVPs in as few as 100 hours after discovering Bubble.

Q: What services can Bubble connect and integrate with for my dashboard?
A: Bubble offers hundreds of pre-built integrations and plugins that support dashboards, including those for connecting data sources (API Connector, SQL Database Connector, etc.) and depicting your data visually (Simple Charts, Graph Plugin, etc). Here’s our complete plugin list.

Q: Can I scale my dashboard app on Bubble if it becomes very successful?
A: Yes! With our paid plans, Bubble is equipped to handle scaling automatically, allowing you to expand and scale your app’s servers to meet your growing user numbers, traffic volume, or data storage.

Q: Can I hire someone to build my dashboard for me?
A: Yes! A number of agencies build Bubble apps that are then easier for you to maintain and update than an app built in code. You can find available Bubble agencies here.

Additional Resources for Creating Your Dashboard

Did you know that we offer a variety of Bubble Bootcamps that can help you hit the ground running on your dashboard app? Our Jumpstart Bootcamps can help you master the basics, and our Build and Launch Bootcamps can help you build a launch-ready dashboard in just 8 weeks. From ironing out your app’s framework to mastering a specific Bubble technique to polishing your data structure, our Bootcamps are the best way to learn Bubble. For even more help building your app with Bubble, check out these resources:

Getting Started on Your Dashboard with No-Code

Your dashboard app will only be as solid as the planning you do in advance. We’ll start by highlighting the key things to think about:

If you haven’t already, it’ll be useful to get comfortable in the Bubble editor. We recommend completing our introductory lessons and crash courses, which will guide you step-by-step through the most common Bubble features. This will help you get a running start when building your dashboard.

Designing a User Interface and Page Structure

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubble’s visual design tool to shape the user interface of our platform. Ask yourself:

While you have complete design freedom, also keep in mind that dashboard apps usually have:

This video tutorial walks you through the basics of designing an interface:

Configuring Your Data Structure

Once you’ve wireframed your pages, you can shift focus to the data that will be powering your dashboard. Bubble is able to integrate with third party services to import the exact data you need. Here are some free Bubble built-in plugins that may be of use:

Ultimately, your dashboard’s data structure can vary significantly depending on what you want to display. Critically, Bubble can house whatever information you need as long as you represent it correctly in your database through data types and fields. Here is an example of the core data type and fields you’d have within a internal sales organization dashboard:

For more guidance, check out the video tutorial below on configuring your data structure, or read about it in our Bubble Manual.

You can also read further about all the above concepts in these additional Bubble Manual sections:

Build Out Features with Workflows and Plugins

The final and most important component of your dashboard is being able to visualize your data using charts and graphs. Bubble already has plugins available for this purpose:

For further instruction, check out our instructor Jacob Gershkovich’s tutorial on how to build charts in Bubble:

There are many more resources that provide detailed instructions on configuring these workflows, including our How To Build articles. Some additional options for popular dashboard features include:

Launching Your Dashboard

Now that you are familiar with creating custom data fields, displaying dynamic content, and installing plugins, you can get even more creative and refine your dashboard until it’s ready to launch. Our paid plans will also let you host your app on your own custom domain.

Check out the video tutorial below to understand how to deploy your app, or learn more by reading in our manual:

How Can Your Bubble App Scale?

Building no-code web applications for massive success and optimal performance.

Vivienne Chen

Vivienne is Bubble’s Content Manager & Writer. She is a storyteller and is passionate about meaningful ways technology can help foster social solidarity.

More posts by Vivienne Chen.

Vivienne Chen

Whether you’re a first-time founder or a seasoned entrepreneur, if you’re choosing to launch a digital product with the help of no-code tools, you may be wondering: “Can I really grow my business?”

If you’re looking for a platform that can help you build, launch, and scale your startup, Bubble can be your all-in-one tool. Bubble is the leading visual programming platform that lets you build and host a full-featured web app without needing to code. This article answers commonly asked questions about the scalability and performance of no-code apps built on Bubble, with examples of Bubble apps that have achieved traction, scale, and success.

How much traffic can my Bubble app handle?

Bubble’s platform has the ability to grow with your increased demand and traffic based on our different tiered plans, and we can accommodate as much traffic as your servers can handle. (We work with Amazon Web Services (AWS), the leading cloud hosting provider.)

Here’s how it works: Like other cloud-based platforms, Bubble allocates your app some server space when you sign up for a free Bubble account.

On the free plan, you can begin using the drag-and-drop editor to build your app. Bubble takes care of the hosting once you’re ready to launch. Once your app takes off, you can meet surges of increased demand and traffic with additional server units (more on this below).

For instance, when 19-year-old Max decided to build a site to make character skins for his favorite video game Fortnite, he didn’t set any milestones or expectations. A recent high school graduate from a Kansas town with less than 1,000 residents, Max taught himself Bubble to help him create Make Fortnite Skins.

Read more about Max and his story in our interview.

“Within 3 weeks after being introduced to Bubble, I released a fully functional version-1 of my application. Less than a day after I finished creating it there were over 150,000 visits on the page.”

Max is an example of (literal) overnight success. After sharing his Bubble-built app on Reddit, he woke up the next morning to find his app in Forbes, IGN, and the Daily Mail.

“During peak hours on the first day, there were over 1,500 active users, which was incredible. Essentially my site went from complete obscurity to being all over the internet in less than 24 hours.”

How can I measure the traffic on my Bubble app?

Web traffic can be measured through many different metrics, but often most people look at the number of page views and number of visitors to your site. On paid tier plans of Bubble, you can track various metrics of your app in our Logs tab. These metrics include page views, workflows run, and average CPU usage, which all pertain to your app’s capacity. You can also integrate your Bubble app with the leading analytics tools like Google Analytics, Mixpanel, and Segment.

Bubble’s Logs let you monitor your capacity.

What is “capacity” and how does it work?

Bubble’s concept of «capacity» is a general term for how much «work» your app can do in a given period of time before it can’t keep up–»work» includes things like page visits, database calls, workflows, API calls, etc., but we group them together as «capacity» to make it easier on you. As a Bubble user, you don’t have to worry about budgeting for different kinds of granular computing resources, unlike with most traditional web services. Just add capacity!

Our free Hobby plan has all the capacity you need for an MVP or your early launch product, but Bubble also allows you to upgrade to more units on paid plans and add capacity boosts à la carte as you scale – so we are designed to grow with you as your company succeeds. In fact, as Bubble itself improves, your performance per unit of capacity also improves. Recently in July 2020, Bubble made significant upgrades to our backend systems so that you get more bang for your buck.

For full details on capacity, see the resources on performance and scaling in our manual.

How many users can my Bubble app support?

There is no absolute limit to the number of users that can sign up to use your app. The only limit is capacity, which affects how many users might be able to use your app at once. So as your app grows more popular, you will want to monitor your capacity usage and make sure you are designing efficiently, before you consider upgrading or adding more capacity.

Our top apps have hundreds of thousands of active users, and Bubble’s built-in User management system makes setting up log-ins and secure password management simple.

Brothers Nicolò and Sebastiano Ammendola, based in Italy, built their home fitness marketplace app, Kappa Trainup, using Bubble and had over 1,800 trainers registered within weeks after launch. In a few months, Kappa Trainup garnered an estimated 28,000 daily users seeking home workout classes with little to no additional investment from the Ammendola brothers.

Read more about Kappa Trainup on our App of the Day series.

One other important thing to note is that we use our own platform to create Bubble’s website, so we are literally invested in making sure our half a million users can achieve the same quality of performance that we want for ourselves.

How will my Bubble app perform?

Bubble is an open-ended platform built to support complex applications with high performance. Just like with any custom-coded web app, you can build no-code apps geared for speed and scale by keeping in mind a few key principles of web design. Some of our experts have written entire books on the subject, but here’s a quick breakdown of factors that affect all web app performance and tips for making your Bubble app fast:

Performance, as your users perceive it on your app, breaks down along a few different major dimensions: page load speed (without considering any queries on the page), querying speed (which influences total page load speed), and workflow speed. Remember: these performance factors are true for custom-coded apps as well as no-code apps.

Factors that determine how fast your Bubble app performs include:

For Page load speed:

For querying speed:

For workflow speed:

How much will it cost to run my Bubble app?

When you’re budgeting for your project, no-code tools like Bubble can replace the larger cost of front-end developers, back-end developers, database administrators, and DevOps entirely – offering your early stage startup even more runway and resources to succeed.

Bubble’s ecosystem of community builders also offer a marketplace of third-party templates to help you get started, as well as free and premium third-party plugins if you need them. But remember: you always have access to our free API Connector, so you can integrate your Bubble app with almost any software on the web at no extra cost from us.

The bottom line: we think Bubble is much more affordable than traditional coding and can help you get the edge you need to start proving your product idea.

How successful can you be on Bubble?

Here are some great examples:

Bubble’s platform is here to grow with you and your business. We have worked hard to ensure that we can support you as you bring on more users, more visitors, and more revenue–so that you can spend more time enjoying your hard-earned success.

Примеры приложений на Bubble: вдохновляющие стартапы, созданные с помощью no-code

Bubble, пожалуй, самая мощная no-code платформа, которую очень любят основатели, создатели и стартапы. Неудивительно, что это лучший выбор, когда речь идет о создании многофункциональных веб-приложений. Хотите узнать, какие веб-приложения создаются на Bubble, на что способна платформа и подходит ли этот инструмент для вашего случая использования?

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

Codemap.io — платформа для поиска no-code талантов, которая объединяет no-code экспертов, экспертов по SaaS и команды с основателями, стартапами и малыми и средними предприятиями. На данный момент у Codemap.io более 2000 клиентов из США, Европы и всего мира. На этой платформе зарегистрированы тысячи проверенных экспертов и команд no-code разработки. Их услуги включают в себя:

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

Beelango — это платформа электронного обучения, которая предлагает курсы для быстрого и легкого изучения нового языка. На данный момент у них более 100 000 пользователей по всему миру. Пользователи могут научиться читать, писать и говорить на нескольких языках. Что отличает Beelango от других платформ для изучения языков, так это уникальные действия, которые они предлагают своим пользователям. Существует около 100 мероприятий, посвященных изучению языка по вашему выбору. Каждый курс разработан, чтобы быть интерактивным. Есть предварительно записанные видео, мероприятия и викторины. Учащимся даже показывают видео из реальной жизни от носителей языка. Затем следует ряд упражнений, в которых вы учитесь имитировать фонетику, слоги и диалекты. Лучшая часть Beelango — это упражнения по записи и распознаванию голоса. Beelango построен с использованием Bubble.

Strabo стремится максимально упростить управление трансграничными деньгами. Это облачная платформа, которая помогает связать несколько учетных записей со всего мира на одной панели. Это универсальное решение для отслеживания всех денег, которые вы должны / владеете, планирования ваших инвестиций и получения целостного обзора вашего собственного капитала. Маркетинговый веб-сайт Starbo построен на Webflow, веб-приложение — на Bubble, управление контентом и пользователями — на Hubspot, Medium и Airtable, управление проектами — на Miro, Slack и Trello.

Nocodify — это образовательная платформа, которая предоставляет практические пошаговые инструкции по созданию собственного веб-приложения. Платформа предлагает различные курсы, индивидуальное наставничество экспертов, индивидуальную поддержку и многое другое. Nocodify не только сам построен на Bubble, но и его основная цель — помочь миру создавать и распространять веб-приложения с использованием Bubble. Существует более 110 управляемых курсов, более 50 часов видеоконтента для обучения и более 3000 участников в сообществе. У них даже есть щедрый бесплатный план, чтобы вы могли начать. Плата за доступ к платформе начинается от 29 долларов в месяц.

Вся эта платформа была перенесена в Bubble за несколько недель. И, в то же время, были добавлены новые функции.

Project ANT стремится предоставить своим пользователям возможность получать доход и получать реальный опыт, в то же время развивая свои навыки обучения для достижения своей идеальной карьеры. И в то же время сделать их более привлекательными для работодателей, поскольку у них будет заметное портфолио и проверенные навыки и рекомендации по проектам, пройденным курсам и другим достижениям, выполненным на платформе ANT или вне ее. В то время как основатели начали создавать ANT с использованием MERN Stack, развернутого на AWS и используя множество других инструментов, в конечном итоге перешли на Bubble в первую очередь из-за неотложных потребностей в разработке и нехватки ресурсов, капитала и времени для традиционной разработки. По состоянию на февраль 2022 года у Project ANT более 1200 подписок на бета-тестирование, 100 готовых пользователей и около 50 клиентов.

FiveTeams — это анонимный онлайн-рынок труда специально для людей из технологического сектора. Он помогает людям в их пассивном поиске работы. На этой платформе личные данные хранятся анонимно по очевидным причинам. Компании нанимают людей только на основе их достоинств, таких как опыт и навыки. Люди могут указать зарплату, которую они ожидают. Кандидаты могут оставаться анонимными, пока они не достигнут стадии собеседования в процессе найма. Более 10 000 человек уже воспользовались этой платформой для поиска работы с желаемой зарплатой. FiveTeams создан с использованием целого набора инструментов без кода. Webflow для CMS, Stripe для платежей, Bubble для веб-приложений и Zapier для интеграции и автоматизации.

Switchboard от Ads on Top помогает рекламодателям управлять всеми своими DOOH-операциями с единой централизованной облачной платформы. Это приложение можно использовать на всех платформах. Инструменты интеграции настроены для работы как на офлайн-форумах, так и на платформах CMS. Все инструменты доступны через API. Коммутатор удобен в использовании и позволяет более эффективно отслеживать, обрабатывать, строить и анализировать вашу сеть. Приложение готово к интеграции и программированию, а также к постоянной технической поддержке. Тарифные планы начинаются с 3 долларов в месяц за экран. Более крупные организации могут выбирать из целого ряда пакетов. Пользовательский интерфейс этого приложения полностью построен на Bubble.

Ensemble19 — это стартап, они включены в этот список из-за удивительного подвига по сбору средств, который им удалось совершить: 600 000 швейцарских франков за считанные недели. Веб-приложение было создано с целью помочь местному торговому сообществу. HuggyStudio, агентство Bubble разработки, базирующееся в Швейцарии, разработало концепцию Ensemble19 для сбора денег от людей, желающих поддержать местных продавцов посредством пожертвований или ваучеров. У людей была возможность выбрать местный бизнес, которому они хотят предложить помощь, а затем выбрать сумму пожертвования и оплатить. Затем деньги переводятся местному продавцу через Stripe, а человек получает ваучер (если он выбрал ваучер), который можно использовать при повторном открытия магазина после снятия ограничений Covid. Вся эта платформа для сбора средств была построена на Bubble всего за три дня.

Dripdrop — это приложение, созданное на базе Bubble и помогающее подросткам сократить время, проводимое за экраном.

Как это работает? Это очень простая концепция. Подростки и дети могут получить то, что они хотят от своих родителей. В свою очередь, они должны делать то, что их родители. Например, если ребенок хочет провести некоторое время за игрой, он может обменять это время со своими родителями на сеанс медитации. Цель этого приложения — помочь детям развить здоровые привычки, умственную работоспособность и сократить время, проводимое за экраном. Через это приложение у родителей есть доступ к обученным экспертам и тренерам; психологам, спортсменам, музыкантам. Когда дети завершают эти занятия, им дают то, что они хотят, в качестве награды. Маркетинговый веб-сайт был построен на Webflow, а само приложение — на Bubble. Инструменты без кода дали основателям DripDrop огромную гибкость и доступность для запуска этой идеи.

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

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

Martechbase создана, чтобы предоставить организациям лучший стек маркетинговых технологий. Это поможет вам выбрать и использовать стек маркетинговых технологий, который требуется вашей компании. Их функции помогают отслеживать различные количественные показатели, такие как использование SaaS, контракты, продления, расходы и т. д. Управление всеми требованиями осуществляется из одного источника. Платформа помогает отделам продаж и маркетинга выбирать наиболее подходящие инструменты. Им предоставляются индивидуальные предложения о том, какие инструменты использовать, и новые инструменты, которые могут быть добавлены в зависимости от команды и их навыков. Для управленческих команд платформа помогает получить общее представление о технологическом стеке их компании. Есть также функции, которые помогут им следить за расходами, различными клиентами, категориями и т. д. Для финансовой команды: платформа предоставляет возможности для отслеживания циклов выставления счетов между отделами для различных используемых технологических инструментов. А для финансовых групп — знать общий технический бюджет и то, как он расходуется. В целом, Martechbase объединяет все инструменты маркетинговых технологий, используемые организацией, в одном месте и действует как единая информационная панель. Весь этот набор функций был разработан без написания кода.

Dividend Finance предоставляет владельцам недвижимости возобновляемые источники энергии и энергоэффективные финансовые решения. Его пользователи получают возможность получить финансирование экологически чистой энергии с помощью полного набора вариантов финансирования. Флагманский продукт DF, EmpowerLoan™, продолжает расширять свои предложения продуктов в области хранения и домашней энергии. Платформа также предлагает коммерческий PACE, который представляет собой государственно-частный механизм финансирования энергоэффективности, возобновляемых источников энергии, водосбережения и сейсмической модернизации частной собственности. Преимущества включают кредитные решения, принимаемые в кратчайшие сроки, за которыми следует кредит, который не влияет на ваш кредитный рейтинг, первоначальный взнос в размере 0 долларов США и краткосрочные и долгосрочные планы платежей. Компания, полностью созданная инструментом Bubble без кода, смогла обработать кредиты на сумму более 1 миллиарда долларов.

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

Plato — это платформа наставничества для инженеров и руководителей продуктов. Они предлагают программы наставничества для руководителей, разработанные с учетом требований клиентов. Пользователь может использовать сеансы AMA, индивидуальное наставничество и обучение по запросу от опытных наставников. Каждому пользователю назначается тренер по талантам, который поможет найти индивидуального наставника. Можно также установить цели, проблемы и пути для своей команды, чтобы получить подробный анализ достигнутого прогресса. Весь Plato был построен с использованием платформы Bubble. Они также использовали Bubble для создания систем отслеживания и целевых страниц для своих мероприятий. Plato, известная платформа, на данный момент получила финансирование в размере 13,3 миллиона долларов.

Comet, по их собственным словам, представляет собой гибкую экосистему талантов. Платформа может похвастаться более чем 10 000 мотивированных и доступных, квалифицированных и активных технических фрилансеров. Comet имеет функциональные возможности для приема заявок, проверки и оценки лучших специалистов в области технологий и данных. Для найма ИТ-специалистов все, что нужно сделать компании, это представить свои требования. Затем автоматически — с помощью ИИ — интеллектуально обнаруживайте, квалифицируйте и сопоставляйте временную рабочую силу с требованиями. Компании требуется менее 48 часов, чтобы закрыть вакансию. За 5 лет Comet поработала с более чем 1000 клиентов по всему миру. Некоторые из их известных клиентов включают LVMH, Renault, Zenly и Deezer. Основанная в 2016 году, Comet была построена с использованием инструментов без кода и сегодня является популярной платформой, объединяющей ИТ-фрилансеров и компании.

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

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

Мы надеемся, что эта подборка приложений вызвала у вас интерес к no-code, и у вас появилось желание построить свой стартап, не беспокоясь о технической части/программировании и связанных с этим затратах.

How To Build An Amazon Clone Without Code

Learn how to create your own no-code Amazon.com clone, using Bubble’s visual web editor.

Lachlan Kirkwood

Lachlan is a digital marketing specialist and passionate no-code maker.

More posts by Lachlan Kirkwood.

Lachlan Kirkwood

If you need a physical product shipped fast, Amazon is the go-to marketplace for a huge selection and quick delivery.

If you need to ship your software product quickly, no-code tools like Bubble are the one-stop solution for quickly building and deploying powerful software.

No-code tools like Bubble are revolutionizing how everyday makers can build software. Bubble’s powerful platform has made it easier than ever to start building software without having to write a single line of code. Our customers are using Bubble to build websites, directories, and even social networks.

Throughout this guide, we’ll uncover the process of using Bubble to build your own white-labeled version of Amazon.

Whether you’re looking to build a dedicated marketplace, or you’re just interested in utilizing some of the core features from Amazon, this guide will share how to start building the underlying logic for an MVP.

Throughout this post, we’ll highlight how to build the following key features from Amazon:

Steps to building an Amazon clone with no code include:

Get Started

To get started, you’ll need to register your free Bubble account. That way, you can follow along and build you own marketplace without code.

Register your account on Bubble

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your Amazon clone.

It’ll also be beneficial if you understand how to create and edit user accounts. We’ve previously covered this in more detail in our How to Build Quora article.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubbles visual design tool to shape the user-interface of our product. If you’re replicating a version of Amazon, some of the core pages you’ll want to include are:

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your Amazon clone, you’ll only need to create one page to host your individual products. We can then write the necessary logic to display only the relevant product on each page when it’s needed (we’ll cover this in more detail soon).

Configuring your database

Once you’ve mapped out the display of your product, you can focus on creating the necessary data types and fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When building Amazon as an MVP, we’ll need to create the following data types & fields:

Data type: User

Fields:

Data type: Product

Fields:

Building workflows

Now that you’ve structured both the design and database for your application, it’s time to start stitching everything together and making your product functional.

In Bubble, the main way to do this is with “workflows.” Each workflow happens when an “event” occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)

Adding a new product

One of the core features of Amazon is the ability for sellers to list their products for sale on the marketplace.

On our product upload page, you can start creating this process by using a combination of input fields, including; free-text fields, image uploaders or multiple selection fields.

Once a user has added the relevant details within each input, they’ll click the submit button to create a new entry in your database. This button click will be the necessary action to trigger your workflow.

Using the workflow editor, select to create a new thing within your database. In this instance, we’ll be creating a new product.

You’ll then need to start adding data to the relevant fields within your database. Map each input field you’d like to create against its corresponding data field.

Display a list of dynamic content on your home page

Once multiple products have been added to your marketplace, you’re ready to display each item in a feed on the homepage. This can be achieved by utilizing our repeating group element.

Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type as a product.

You’ll also need to set the data source as a list of all the submitted products from your database.

Note: If you’d like to segment each repeating by a relevant category, you can add an additional constraint to your data source.

Once this data source has been configured, you’re ready to start structuring the dynamic content that will be displayed within this grid. Simply map out the first column with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.

Sending data between pages

Within a repeating group, it’s also possible to create events within each individual column.

This feature will become useful when building navigational features across your platform. As Amazon’s homepage only displays an overview of each product (including its name, image and price), you’ll want to display the full product details for each unique item on a separate page.

This additional content will need to be hosted on your dedicated product page.

To power this event, you’ll need to start by creating a workflow that redirects a user to your product page when the product’s image is clicked.

Within this workflow, use a navigation event to send a user to another page. From here, select the destination page type to be the product page.

You’ll then need to send additional data to this page so the Bubble editor knows which specific product to display. The data you’ll need to display is that of the current cell’s product.

Display dynamic content on a product page

Once a user has been redirected to a specific product’s page, you can easily pull this event data from your workflow and display the relevant content.

On the destination page, you’ll need to configure the page type to be the same data type that’s being sent through your workflow.

In this case, you’ll set the product page to a product property.

From here, you can then start adding dynamic content into your page elements, displaying the information from the product that has been sent in your workflow.

Creating a search navigation

As an alternative navigation feature, it’s also possible to build a search function to navigate between pages.

With millions of products across the Amazon marketplace, users will often need to search for specific items through a search bar on the home page.

This allows users to input a query, then view a list of all the relevant products that match these keywords.

By building an additional page in our application, we can create a search results list. As we’ll be using the same repeating group element that we created on our home page, you can streamline the build time by replicating this existing page.

When building this page, we’ll also need to configure the type of page content to a product.

Back on our home page, we’ll then use a text input field, allowing users to enter product keywords.

From here, we’ll create a new workflow that classifies a users search phrase, then passes this data through to our search results page.

To power this workflow, we’ll create an event trigger that recognizes when an inputs value is changed. The element will, of course, be the text input field.

As we’ll need to add a unique search query to our URL string, we won’t be sending a user to a page with this workflow, but will instead be opening an external website. This will allow us to customize the URL path between pages.

The URL we’ll be sending the user to will be the current website’s home URL + the URL of our search results page + the dynamic query value from our text input field.

Now on our dedicated search results page, we’ll update the data source of our repeating group to display only the products that include our URL strings text in their title field.

Finally, you’ll be prompted to select which field of the URL you’ll pull this data from. Simply choose to get data from the URL path, not the parameter.

This will now display any product where the title matches an instance of the specific keyword being searched.

Now that you’ve indexed a list of relevant products, you can repeat the same steps as before to build a navigation function between the repeating group’s cells and the individual product page.

Adding items to a cart

Once a user decides they’re ready to purchase a product, they’ll click the add to cart button and trigger a new workflow.

The logic behind this workflow is similar to creating a new product, only this time we’ll be making changes to a field in your database, not creating a new thing.

The thing we’ll need to change is the current user, in which we’ll want to add the product from the current page to their added to cart products.

Storing a list of a user’s total cart items will be useful when building our final checkout experience.

Building a checkout

One of the crucial features to Amazon (or any eCommerce platform) is the ability to purchase products through a checkout. Using Bubble, it’s possible to harness the power of several plugins to easily accept payments and process orders.

In this guide, we’ll be using the Stripe.js plugin to process credit card payments through Stripe.

Note: After integrating this plugin, you’ll need to first configure your API keys within the plugin settings.

When you’re building a checkout page, you’ll begin by adding a repeating group that displays a list of all the items currently within a user’s add to cart data field.

Below this list, you’ll then want to display the total price of the items in their cart. Bubble will automatically calculate this based on your existing data fields.

After indicating the cart’s total price, you can map out a payment form where a user can submit their payment details. You’ll also need to include a Stripe token element next to the payment form.

Note: This element won’t be visible to your end-users, but is essential to powering a new transaction in Stripe.

When the purchase button is clicked, we’ll then create a new workflow that triggers a Stripe payment.

You’ll begin by selecting the event ‘convert card into Stripetoken A’. Within this event, you’ll need to configure your input fields to match Stripes payment structure.

Once a card has been converted into a Stripe token, you’ll then need to create an additional workflow that automatically processes this token from a user’s bank account.

If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.

Additional features

After building the core features for your MVP, you’ll become familiar with the process of creating custom data fields and displaying dynamic content.

If you’d like to continue adding additional features to your marketplace, you could consider:

Launch

Templates

If you don’t want to build your Amazon clone from scratch, you can purchase one of the templates made by our community members. Some similar templates to Amazon include:

Start Building

Bubble can help you build an Amazon clone or any other product you choose! It’s never been easier to build something incredible without having to code.

To get started for free, sign up here.

You can also connect with other passionate makers building with Bubble on our community forum.

«Ноукод пришёл, чтобы остаться». Что можно сделать на ноукод-платформе Bubble.io

«Ноукод пришёл, чтобы остаться. Какие-то приложения пишутся на нём уже сейчас, а какие-то будут написаны только через пять лет. Но сейчас – его заря, заря ноукода. И его использование расширяется, потому что делать продукты с его помощью быстрее, чем с обычной разработкой. Ноукод – это тенденция ближайших 5-10 лет. Если вы интересуетесь новыми технологиями, то не захотите остаться за бортом», – рассказал в интервью основатель Bubble.io Эммануил Страшнов (Emmanuel Straschnov) на нашей ноукод-конференции.

Bubble – лидерская платформа среди ноукод-инструментов. Это мощный веб-редактор, это облачный хостинг, это открытый инструмент для визуального программирования – всё в одном.

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

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

Примеры веб-приложений, которые создали наши ученики на Bubble

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

Дом мастеров Lighthouse

маркетплейс, где можно найти мастера (художника, иллюстратора и тд.) для создания индивидуального произведения искусства

Сервис каршеринга во Владивостоке Rideshary

помогает людям локально находить совместные поездки

Биржа no-code фрилансеров

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

Чего нельзя делать на Bubble

Честно с нашей стороны сказать и об ограничениях платформы. А правда в том, что создать на Bubble в теории можно практически все те же IT-продукты, что с кодом. Есть только два ограничения.

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

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

How To Build An Instagram Clone With No Code

Learn how to create your own no code photosharing app, using Bubble’s visual web editor.

Lachlan Kirkwood

Lachlan is a digital marketing specialist and passionate no-code maker.

More posts by Lachlan Kirkwood.

Lachlan Kirkwood

If a picture says a thousand words, then a workflow is the canvas it’s painted on.

Building a mobile app like Instagram would traditionally require the expertise of a seasoned software engineer or team. As the no-code landscape has continually evolved, however, it’s easier than ever for makers across the world to build their own powerful software.

Throughout this post, we’ll uncover the process of using Bubble to build your own version of Instagram without writing a single line of code.

Whether you’re looking to build a dedicated photo-sharing platform, or you’re just interested in utilizing some of the core features from Instagram, this guide will share how to start building the underlying workflows for your MVP.

The steps to building Instagram with no code include:

Get Started

Before you start, you’ll need to first register your free Bubble account. Click the button below to get started, then you can follow along as we build our app together.

Register your account on Bubble

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your Instagram clone.

As we’ll be building a social network, it’ll also be beneficial to have a basic understanding of how to create user accounts.

We’ve previously covered how to create user accounts in Bubble in our How To Build Quora article.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubble’s visual design tool to shape the user-interface of our mobile app. If you’re replicating a version of Instagram, some of the core pages you’ll want to include are:

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your Instagram clone, you’ll only need to create one page to host your individual user profiles. We can then write the necessary logic to display only the relevant user on each page when they’re needed (we’ll cover this in more detail soon).

Configuring your database

Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these properties to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When creating a database, we recommend splitting larger items into separate data types to enhance the speed of your application.

For example, we’ll create two separate data types for each post. One data type will include the basic details of a story (including the creator, the number of likes, and the total comments), while the other data type will include larger content files like the photo and caption of the post itself.

By creating these as separate data types, it allows us to only load the necessary information when it’s needed, reducing the amount of content the Bubble editor will need to render.

Within our Instagram mobile app, we’ll need to create the following data types & fields:

Data type: User

Fields:

Data type: Post

Fields:

Data type: Post-content

Fields:

Data type: Comment

Fields:

Build your workflows

Now that you’ve structured both the design and database of your application, it’s time to start stitching everything together and making your app functional.

In Bubble, the main way to do this is with workflows. Each workflow happens when an event occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)

Update user profile details

When a user creates a profile in your app, we’ll need to build a settings page, allowing them to update their profile details.

By using a combination of input fields, we can easily add this new data into a users profile. After filling in each input field, a user will trigger this workflow by clicking the update button.

From this action, you can use the workflow editor to make changes to a thing within your database.

In this instance, you’ll want to make changes to the current users details, mapping each of the on-page inputs with the corresponding data field.

Once this workflow has run, it will update all of the relevant fields with any new values.

Additionally, you can now display this data on a users profile by using elements that match the data fields provided.

Create a new post

Once a users profile has been configured, we’ll then need to build a feature that allows them to create a new post to our platform.

The workflow that powers user-generated posts will also follow a familiar structure to the profile editing function, only this time, you’ll want to create a new thing within your database.

On our upload page, we’ll add an image uploader element, as well as a multiline input field. Once the share button is clicked, it will trigger a new workflow.

Throughout this workflow, we’ll first start by creating the post content data type, then we’ll link this to the post itself.

By linking the initial post content to this post, it’s possible to seamlessly integrate this data across your platform.

Each time this workflow is triggered, a new post will be created.

Display dynamic content in a feed

Once users have started generating posts across your platform, it’s time to build a feed that will display these on your homepage as a dynamic list. This can be achieved by utilizing our repeating group element.

Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type of content as a post.

You’ll also need to set the data source as a list of all the posts where the creator is in the current users list of following users.

Now you’re ready to start structuring the dynamic content that will be displayed within the grid. Simply map out the top column with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.

Within a repeating group, it’s also possible to create events based on each individual row.

This feature will become useful when building navigation features across your platform. If a user wishes to comment on a post in their feed, they’ll need to be redirected to a dedicated page which displays a list of all the post comments.

Publishing comments

Creating a workflow to publish and display comments is as simple as our previous workflow used to create posts. To direct a user to a comment page, we’ll build a navigation workflow that’s trigger when a user clicks on the comment icon from our home page feed.

When sending a user to a page, you’ll then need to send additional data so the Bubble editor knows which specific comments to display. The data you’ll need to send is that of the current cells post.

Over on our comments page, we’ll need to configure the page type to be a post. This will allow the Bubble editor to display unique data based on each post that is sent through our workflow.

Next, we’ll add another repeating group to the page, displaying a list of comments.

When configuring this repeating group, the type of content will, of course, be a comment. The data source will then need to be set to index comments from the current pages post.

Now, we’ll once again need to map the relevant content for each comment in the top row of our repeating group.

Below this list of comments, we’ll also add an additional input field, allowing users to publish new comments.

When the post button next to this input field is clicked, we’ll create a new workflow.

Once again, we’ll then map the comment input field with the data field required.

Liking a post

The next feature we’ll be building is support for users to like posts in their feed. Using the Bubble editor, this process is seamless to create.

Back on our home page, we’ll create a new workflow when the heart icon is clicked.

The workflow for creating a like will be as simple as opting to make changes to the current cells post.

The change we’ll need to make is to the posts like field, adding to it the current user.

Note: If you’d like to display a list of the likes for each post (although Instagram is moving away from this feature), you could easily create a dynamic text element to display the count of users added to a posts likes.

Displaying user profiles

Displaying individual profile pages will be an essential feature for our Instagram clone. Profile pages allow you to see a grid of a users posts, as well as follow their accounts.

By creating a separate user profile page, we can start dynamically displaying the necessary data for each user within the community.

Start by configuring this page type to be a user.

Next, add the dynamic elements to the page that you’d like to display for each user.

Finally, we’ll add a repeating group to this page, allowing us to showcase a list of all the posts created by the current pages user.

Simply set the data type of this repeating group to be posts, then configure the data source to search for posts where the creator is the current page user.

Following a user

The final core feature we’ll create for our MVP is the ability to follow another user on the platform.

On the user profile page, we’ll add a follow button. When this button is clicked, we’ll create a new workflow that makes changes to a thing.

The thing we’ll want to change is the current user, adding the current page user to their list of following users.

Next, we’ll also need to update the current page users list of followers by adding the current user.

Additional features

Now that you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build within your product. Additionally, you can:

Privacy & Security

Launch

Some templates and plugins may cost more, but you can build all the functionality of Instagram without any additional costs.

Templates

If you didn’t want to build your Instagram clone from scratch, you can purchase one of the templates made by our community members. Some similar templates include:

Start building

Bubble can help you build an Instagram mobile app or any other product you choose! It’s never been easier to build something incredible without having to code.

Ready to join the no-code movement? Register your free account here and get started today.

If you’d like additional help when building your product, our thriving community forum is a great place to source actionable advice and resources. Any maker is also encouraged to ask questions within the community to help streamline their no-code journey.

No-code как отличная альтернатива для быстрого решения бизнес-задач

«Будущее программирования — вовсе не кодинг», — Крис Ванстрат, CEO в GitHub.

В современных реалиях все стремятся к упрощению, удешевлению и автоматизации. И веб-разработка не стала исключением. Пять лет назад в США зародился глобальный тренд — программирование без кода. За это время появилось огромное количество платформ для визуальной разработки (No-code, Low-code, конструкторы сайтов). Давайте разбираться, в чём их специфика и отличия.

В роли CEO Skillum мне удалось близко познакомиться с платформой Bubble, которая позиционирует себя как No-code-технология. В то же время я часто имею дело с конструктором Tilda. Поэтому обзор будет основан на личном опыте работы с данными ресурсами.

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

Фишка в том, что после 3-х месяцев обучения основатели стартапов могут разрабатывать полноценные приложения самостоятельно. А если временные ресурсы не позволяют, то задействовать No-code-разработчиков, которые в любом случае обойдутся в разы дешевле программистов.

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

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

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

Что касается интерфейса, то на первый взгляд он не очень френдли. Но после просмотра базовых видеоуроков все вопросы отпадают. Интерфейс разделен на 3 основных блока: дизайн, рабочий процесс и вкладка «Данные».

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

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

На вкладке Workflow вы задаете действия и логику приложения. Проще говоря, формируете back-end. Представьте, что вы пишете путь пользователя по этапам. Именно по-такому принципу строится функциональная часть приложения на Bubble: выбираете действие и просчитываете последовательность шагов, которые должны выполняться.

Например, вы разработали форму регистрации, установили поля для ввода логина и пароля, разместили кнопку «Зарегистрироваться». Далее по клику пользователя нужно создать аккаунт и запомнить его данные. После регистрации осуществляется переход на другую страницу приложения. В таком виде и строится back-end.

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

В Bubble их более 900. Плагины полезны для расширения основного функционала или для интеграции с другими сервисами.

Важно знать! Все, что вы создаете в Bubble, будет размещаться на общем сервере платформы, а мощность и хранилище зависят от выбранного вами тарифа.

Bubble также позволяет разместить приложение на отдельно выделенном сервере. Это хорошее решение для крупных и высоконагруженных проектов.

Например, CRM-систему, интернет-магазин, СДО, маркет-плейс или личный кабинет для существующего сайта. Этот список можно продолжать до бесконечности — все зависит от ваших задач и фантазии.
Среди других популярных No-code платформ можно отметить Webflow, Wappler и Betty Blocks. Каждая из них имеет ряд особенностей. Например, у Wappler более широкие возможности для дизайнеров, нежели у Bubble, но при этом сервис требует навыков верстки и кодинга для создания сложных приложений.

Если вам нужен простой сайт, небольшой интернет-магазин или лендинг, то, скорее всего, в изучении Bubble не будет смысла. С этой задачей отлично справятся конструкторы сайтов, такие как Wix или LPgenerator. Тем более, что благодаря наличию огромного количества шаблонов, блоков, готовых модулей для подключения оплат и интеграций с популярными сервисами, разработка сайта становится действительно быстрой.

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

В библиотеке Tilda более 450 шаблонных блоков. Они разделены на 28 категорий: обложка, магазин, о проекте, услуги, контакты и другие. Также вы можете выбирать варианты дизайна.

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

Что можно создать на Tilda:

Множество шаблонов помогут разработать сайт максимально быстро. И важная особенность — наличие Zero Block. Это встроенный визуальный редактор, который позволит создавать собственные блоки и придать сайту «нешаблонный» вид.

Основные достоинства Tilda:

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

Благодаря встроенной аналитике, подключению Яндекс.Метрики и Google Analytics, возможности отслеживать количество кликов и другим маркетинговым фишкам у вас не будет проблем и с продвижением.

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

Для тех, кто считает, что No-code сервисы и конструкторы не справятся с решением их задач, есть еще одна набирающая популярность «категория» платформ — Low-code. Они включают целый ряд различных ресурсов, которые помогают ускорить и упростить разработку, но требуют навыков программирования. Скажу честно, даже с учетом опыта работы с подобными технологиями, очень сложно определить, какой сервис относится именно к этой категории. На западном рынке к платформам Low-code причисляют Appian, Mendix и Salesforce Lightning. Но, на мой взгляд, для НЕпрограммистов они подойдут разве что для создания прототипов.
Ниже предлагаю ряд сервисов, которые помогут вам решить задачи, связанные c No-code разработкой.
Для интеграций:

Для дизайна и прототипирования:

Для создания чат-ботов:

Разработка мобильных No-code приложений:

Для работы с данными:

Как видите, сервисы для визуальной разработки активно врываются в IT-индустрию. Это говорит лишь о том, что No-code технология действительно «лечит» боли начинающих интернет-предпринимателей, стартапов и всех, кто хочет строить карьеру в программировании, но испытывает трудности с кодингом.

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

Кодинг нужен для решения новых задач, для которых еще не появились шаблонные решения. Веб-сайты уже проходили через визуальные инструменты в конце 90-х–начале двухтысячных (Dreamweaver, MS Frontpage). Все эти решения хороши для расширения ниши, затем они очень быстро исчерпывают пространство возможностей и теряют актуальность. Кодинг никуда не денется, он просто будет уделом профессионалов, собственно как и раньше.

Я сам сторонник отказа от кодинга, хоть и являюсь программистом с многолетним стажем. Но противопоставление «кодинг–визуальный редактор» является популизмом и профанацией. Я бы делал упор на тех тезисах, которые только что вы привели в пользу nocode, как решении практической задачи – быстрого старта, а не на заявлениях от каких-то там CEO (среди топов достаточное количество просто продвинутых пользователей).

Мне, если честно, трудно представить ситуацию, когда без хорошего технического бэкграунда можно запустить IT проект как прототип)
Идея по созданию упрощенных приложений и сайтов уже не нова и используется вполне себе успешно (тильда, марвел. ). В игровых движках есть такое понятие как blueprint’ы или node’ы, это кусочки шаблонного кода (ureal, unity. ) В гугле даже есть есть свой «nocode» (формы).
Вот тут и возникаем у меня проблема с понимаем. Например, мы хотим создать приложение для интернет-магазина. Мы идем в студию или к своим программистам и начинаем собирать приложение. Что нам дает Nocode в данной ситуации, т.е. что тестировать? Какие программные продукты требуют бюджеты для прототипирования? Прототипы нужны, но как по мне, это уже неотъемлемая часть разработки, без всяких там «а давайте мы сделаем прототип, а потом посмотрим».
Глупо садится за руль автомобиля, слушаясь советов пешехода.

Полностью согласен. За свои многие годы в разработке помню несколько таких всплесков. С появлением того же DreamViewer’а появлялись подобные статьи о том, что кодинг больше не нужен. Но, разумеется, революции не случилось. В последнее время вообще популярно говорить, что программиста заменит AI. 🙂 Однако, на практике все наоборот. Все чаще приходят к тому, что для решения задач, требующих индивидуального подхода нужно использовать именно код, а не визуализацию. Системы становятся сложнее, заказчики требовательнее. Конструкторы сайтов генерируют отвратительный не поддерживаемый код, и масштабируемость такой системы под вопросом. А если мы говорим о сложном, высоконагруженном бэке, то тут вообще ни о каких визуальных редакторах речи не идёт, для бэка-то писать надо. Работал одно время в компании, где дизайн был одним из основных требований к сайту. Требования дизайнеров на таких конструкторах воплотить в жизнь было бы крайне сложно или невозможно, даже без учёта бэка. Сайт на конструкторах останется уделом тех, кому просто нужен абсолютный минимум присутствия в интернете. По сути, это можно сравнить с созданием одного html-файлика с css-файликом без БД и сложной логики системы, как делали лет 30 назад. Если такой результат устроит, то да, визуальный конструктор здесь поможет. Системы сейчас только усложняются: не зря в вебе разделили фронт и бэк и создают все новые js-фреймворки для первого.
P.S. Это касается не только веба, можно и десктоп-примеры привести. Раньше на WinForms интерфейс приложений накидывался визуальным конструктором, теперь же это XAML-верстка в WPF или UWP. Всё идёт, наоборот, в сторону кода, так как он позволяет обеспечить более гибкое решение.

Согласен, тут нужен мыслить под задачи, иногда нужны такие штуки, иногда нет, но кодинг никуда не исчезнет) И это радует:D

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

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

Конкретные технологии – это отдельный уровень абстракции

Bubble vs Tilda — что выбрать для проекта?

Мы в Code Breakers часто сталкиваемся с резонным вопросом, который возникает у новичков в ноукоде: «Я хочу разработать сайт для бронирования отелей / заказа еды / сервиса доставки и т.д. Какой No-code инструмент мне нужен: Bubble или Tilda? Они же оба для создания сайтов, но Bubble, говорят, намного сложнее!»

Первое, что важно понять — “сайт” на самом деле не всегда такой уж и “сайт”

Для обычных людей, кто далек от мира IT, все, что открывается в браузере, называется «сайтом». Это слово крепко прилипло к миру веба. Но на самом деле вы, не зная того, пользуетесь чаще не сайтами, а веб-приложениями. В чем же разница?

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

Веб-приложение — это IT продукт, с которым пользователь может взаимодействовать: создавать заказы, регистрироваться/логиниться, заходить в личный кабинет, оставлять комментарии, отслеживать статусы покупок, вести переписку, загружать видео и любой другой функционал. Это все реализуемо благодаря 1 вещи — серверной части (она отвечает за базу данных и логику работы вашего приложения).

Примеры: Youtube, Booking.com, Ozon, DoDo Pizza, VC, iHerb

Tilda подходит для создания сайтов (вы реализуете в ней только фронтенд — дизайн). По сути собираете свою уникальную страницу из разных типов блоков: текст, видео, картинки, кнопка с формой, зеро-блок и т.д. В итоге получаете визуальную страницу, на которой можно просматривать контент и максимум отправить заявку через форму или оплатить товар и т.д..
В качестве примера приведу наш кейс: основной сайт — codebreakers.tech сделан на Тильда. Задача сайта — рассказать о компании и показать, какие есть продукты. Тильда отлично справляется с этой целью.

Bubble позволяет создавать веб-приложения (в нем вы создаете фронтенд, базу данных и логику работы вашего приложения — workflows). Именно поэтому на Bubble вы можете создать сервисы любой сложности: от простых интернет-магазинов до маркетплейсов, LMS и т.д. Тут вам доступно все: личные кабинеты и разграничения по ролям пользователей, API интеграции, заказы, бронирование, создание админ панели и управление всей платформой, чаты, загрузка пользователями своего контента и т.д.

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

Кстати, в Bubble вы также можете создавать не только веб-приложения, но и сайты. Правда это не всегда целесообразно, т.к. верстку в Bubble создавать намного трудозатратней, поэтому с дизайном нужно будет возиться прилично дольше, чем на Тильда.

Важно понимать, что в одном проекте вы можете миксовать оба инструмента. Например, сделать витрину (сайт) с описанием продукта на Тильде, а уже личный кабинет и весь функционал веб-сервиса на Bubble. Либо встроить Bubble в Tilda, если нужен какой-то локальный функционал (например, калькулятор).

Если вы уже знакомы с Тильдой, то наверняка скажете: «Как же так, я знаю, что в Тильде тоже можно создавать личный кабинет и даже сделать онлайн-магазин”. И вы будете правы, но! Эти функции здесь реализованы скорее как отдельная “фича», которую Тильда встроила для пользователей в качестве наиболее используемых кейсов клиентов. При этом она не позволяет делать какую-либо кастомизацию.

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

То же самое и с функционалом интернет-магазина. На Тильде вы можете сделать карточки товаров, их заказ и оплату, но не получится сделать ЛК с отслеживанием статуса доставки, возможностью отменить заказ, посмотреть историю заказов и т.д. Все это уже функционал веб-приложения и с ним справляется отлично Bubble.

Bubble и Tilda на данный момент очень крутые No-code инструменты для веб-разработки продуктов. Они позволяют закрыть большее количество кейсов и задач бизнеса. Неудивительно, что они так популярны среди заказчиков, ноукодеров и дизайнеров. Такая популярность позволяет легко найти подрядчика для своего проекта, работающего на данных инструментах за адекватные деньги. Либо вы можете сами стать ноукодером и предлагать заказчикам создание проектов на связке Bubble + Tilda. С такими навыками ценник на разработку значительно выше, чем просто за создание сайтов на Tilda. Ведь сочетая оба инструмента, вы создаете полноценные веб-продукты «под ключ» от идеи до запуска.

Если вам интересно больше про мир No-code и экспертных разборов, подписывайтесь на наш Telegram-канал @code_breakers

ТОП 3 No-code инструмента, которые создадут вам приложение или сайт за 3 секунды и 4 копейки

В последние годы, благодаря появлению No-code конструкторов, IT разработка стала более доступной для бизнеса.

Если лет 10 назад многостраничные сайты делали за 100-200 тыс. рублей, то теперь при помощи конструкторов Tilda и Wix такой же многостраничный сайт можно собрать из готовых блоков за 10-15 тыс. рублей, и затратить на это одну неделю.

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

С 2018 года на рынок IT-разработки активно выходят No-code конструкторы, которые позволяют собрать, практически, любой вид web или мобильного приложения: маркетплейсы, обучающие платформы, сервисы доставки, таск-трекеры и планеры задач, мессенджеры и социальные сети, crm системы и другие.

На рынке довольно широкое предложение по No-code сервисам. Относительно недавно свои No-code продукты выпустили Amazon и Google, а Apple анонсировал выход своего конструктора в обозримом будущем.

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

Американская платформа, с самыми широкими возможностями для создания web-приложений.

Компания Bubble была основана в 2012 году в Нью-Йорке и запускалась в течение семи лет, понемногу расширяя свои функциональные возможности. В 2019 году Bubble привлек 6 миллионов долларов инвестиций, и с того момент пошло-поехало.

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

При помощи ключей API возможны более 1000 интеграций, в том числе:

Когда у нас заходит речь с заказчиками о No-code конструкторах, многие беспокоятся о размерах баз данных: “Не накроется ли Приложение, когда число пользователей станет слишком большим?”.

Еще 1 актуальный вопрос: можно ли создавать на Bubble мобильные приложения или сервис предназначен только для веб-приложений? Ответ: да, можно. Примерно, с лета 2021 года появилось обилие решений для поставленной задачи. Благодаря наличию нескольких плагинов и сервисов, созданные веб-приложения можно размещать в App Store и Google Play. При этом в этих плагинах можно будет настроить все возможные нативные функции для вашего приложения, такие как: Push уведомления, работа с геолокацией и другие.

Однако из-за дороговизны плагинов и сервисов “нативаторов” многие разработчики используют Webview обертки для Android Studio и Xcode для IOS, в которые заворачивают веб-приложение, чтобы выложить в сторы, как нативное приложение. Такие webview обертки уступают по функционалу плагинам и сервисам, однако широко используются в разработке благодаря своей стоимости.

Некоторые недостатки Bubble:

Bubble’s No-Code Guide to Building Customer Relationship Management (CRM) Tools

Discover all the resources you need to start building your own CRM with Bubble’s visual editor.

Alex Wang

Read more posts by this author.

Alex Wang

Throughout this guide, we’ll walk you through the process of using Bubble’s no-code web app builder to build your own customer-relationship management (CRM) tool without code. Building a custom CRM would traditionally require the expertise of one or more seasoned software engineers. As the no-code landscape continues to evolve, however, it’s easier than ever for makers across the world to build their own powerful software.

Whether you’re looking to build an internal project tool for your team or just getting started in Bubble, this guide has useful tips and resources for you to think about as you start building your app.

How to Build Different CRM Apps

First, here is a guide we’ve put together on how to build Salesforce, one of the most well-known CRM platforms. You can potentially copy and customize this to make your own app.

Bubble Showcase: CRM Apps

Many users like you have built their CRM apps on Bubble. Here are a few examples:

Frequently Asked Questions about Building a CRM in Bubble

Q: How long will it take me to build my CRM on Bubble?
A: It depends on each person’s experience and learning style, but building with Bubble is several times faster and cheaper than using traditional programming for the same result. Some of our app founders have been able to release fully functional MVPs in as few as 100 hours after discovering Bubble.

Q: What services can Bubble connect and integrate with for my social network?
A: Bubble offers hundreds of pre-built integrations and plugins that support CRM apps, including those for customer communications (Twilio) and depicting your data visually (Simple Charts, Graph Plugin, etc). Here’s our complete plugin list.

Q: Can I scale my CRM app on Bubble if it becomes very successful?
A: Yes! With our paid plans, Bubble is equipped to handle scaling automatically, allowing you to expand and scale your app’s servers to meet your growing user numbers, traffic volume, or data storage.

Q: Can I hire someone to build my CRM for me?
A: Yes! A number of agencies build Bubble apps that are then easier for you to maintain and update than an app built-in code. You can find available Bubble agencies here.

Additional Resources for Creating Your CRM

Did you know that we offer a variety of Bubble Bootcamps that can help you hit the ground running on your CRM app? Our Jumpstart Bootcamps can help you master the basics, and our Build and Launch Bootcamps can help you build a launch-ready CRM app in just 8 weeks. From ironing out your app’s framework to mastering a specific Bubble technique to polishing your data structure, our Bootcamps are the best way to learn Bubble. For even more help building your app with Bubble, check out these resources:

12 MIN READ Bubble vs Glide: Which No-Code Tool Is Best for Your Business?

The main differences between Bubble and Glide are:

» Bubble favors the end users’ ability to develop more complex use cases by sacrificing ease of use and starting with a steeper learning curve compared to Glide which is all about visual development and less about coding concepts. Where Bubble clearly takes inspiration from programming, Glide takes inspiration from allowing you to put the building blocks together as easily, rapidly, and seamlessly as possible.

The question of Bubble vs Glide can be “quickly” answered when you consider robustness and complexity of a no-code platform versus ease-of-use and simplicity respectively.

Glide allows you to launch your app in a matter of minutes, if you’re okay with choosing from a wide array of design templates and working with a cookie-cutter style.

Bubble allows you to go beyond templates with a more complex drag-and-drop editor, but it comes with quite a learning curve. With the help of a tutor or a pre-built template, you can become familiar enough with the Bubble editor—the equivalent of Photoshop in the no-code world.

However, Glide can also help you create beautiful apps from scratch without having to compromise on brand authenticity and original design.

Plus, with the help of a no-code app developer like LowCode Agency and some thoughtful brainstorming, a Glide app can be just as powerful as a Bubble one.

Why Compare Bubble.io & Glide Apps?

This makes the space a lot more accessible for small businesses looking to get their feet wet with internal apps and software and move towards operational excellence. That’s why platforms like Bubble and Glide are being analyzed under a microscope more and more lately.

The Bubble vs Glide debate is an ongoing “war” in the no-code space

Full Comparison of Glide vs Bubble

Bubble and Glide are two highly reputable no code mobile app building platforms that offer businesses a more cost-effective option compared to launching directly into a native app store, and the app can be equally as functional. Both applications have similarities:

With drag-and-drop interfaces that make for a strong experience for users who don’t know how to (or don’t want to learn how to) code, Bubble and Glide are great options to get your app ready to go in a matter of weeks, not months or years, with huge savings as part of the deal.

Bubble vs Glide Part #1: App Design

Bubble

Bubble allows you to build apps with a more complex drag-and-drop interface that gets beyond the limitations of templated design, but with a learning curve that needs to be overcome.

Bubble offers a sea of “How To” resources to help you quickly understand how to use their interface. Once you’re familiar with it, you have full control over the design of your app.

With Bubble, you can enhance the robustness of your app by integrating templates from 3rd parties that can boost the functionality of your app.

The same can be said for Glide.

(More on this towards the end of the comparison)

Bubble’s interface is less polished than Glide’s but very powerful

Glide

Glide offers a swath of templates suited to many common business processes (i.e., sales, human resources, etc.). Choose a template, connect a spreadsheet, tweak and launch.

But templates aren’t the only option with Glide. You can start an app from scratch, although you may need the help of an experienced no-code developer like LowCode Agency in the process.

Glide has a clean and easy-to-use visual development interface

Bubble vs Glide Part #2: Database Integration and Functionality

Google Sheets is the primary database technology used by Glide because of its simplicity, allowing only for CRUD (create, read, update, and delete) interactions.

Creating a database in Glide is as simple as organizing a spreadsheet

That can be limiting to some companies who aspire to offer more functionality. That’s why Glide offers full SQL database integration with their Enterprise plans in case that’s what you want.

Google Sheets is the primary database technology used by Glide because of its simplicity, reliability, and close-to-real-time performance.

Bubble also allows you to build web apps with the confidence of knowing you can integrate full database capabilities that allow you to handle real-time conditional situations and an ability to connect to any Application Programming Interface (API) system.

Glide leans more heavily towards a 100% no/low-code scenario whereas Bubble is ok with implementing some level of code within the workflow, making more of a low-code solution.

Bubble vs Glide Part #3: “How To” Resources & Tutorials

The increased complexity of Bubble is supported by the many resources that they offer. There are video lessons, as well as interactive, guided lessons that let you work in a “sandbox” environment allowing you to test the functionality of Bubble’s web app capabilities.

Bubble.io has a ton of resources to offer to learn how to use their tools

Glide offers just as many video tutorials, and they lend themselves well to users who want to practice working within Glide apps as well as learn about the broader concepts surrounding it.

Although the interfaces are easy to interact with, building a fully responsive (mobile & desktop) app with either Glide or Bubble is still a good amount of work so you’ll want to consider hiring an extra pair of experienced hands.

Bubble vs Glide Part #4: Scalability

In terms of scalability, both Glide and Bubble have something to offer. Glide connects so easily and reliably to Google Sheets that it promotes that as one of its main selling points.

Glide can also be used with its own database platform that can scale to hundreds of thousands of rows, or you can connect it to a MySQL database that keeps your data updated in real-time, and does so securely.

Bubble also offers its own database and is robust enough to connect to a wide array of common databases allowing you to store and work with 100s of millions of records if need be.

Bubble vs Glide Part #5: Look-and-Feel

Glide

The reason Glide is the first choice for newcomers has everything to do with the fact that the visual development experience is smooth and user-friendly. There is a high level of interactivity with Glide meaning a very low learning curve and a fun development experience.

Bubble

A bit more complex, but intriguing to those curious about how app coding works.

The editor offers a powerful point-and-click environment stocked with the latest design trend icons allowing you to build a fully customizable web app ranging from simple MVPs to complex applications that host SaaS products and even very large eCommerce applications.

The reason Glide is the first choice for newcomers has everything to do with the fact that the visual development experience is smooth and user-friendly.

Though more customizable than a Glide app, with Bubble you can easily spend hours creating your app and find out that it may not be the best flow for your users. That’s a lot of time and money wasted a business can’t afford, so in many cases Glide may be the better choice.

You can really get a sense of how different the Bubble vs Glide interfaces are when side-by-side

Bubble vs Glide Part #6: Ease-of-Use

Glide

Glide is without a question the easier of the two primarily because the interface is very friendly to beginners who aren’t interested in having to learn how to code.

The interface is easily navigated, allowing for users to create an app from a data sheet with a click or two and the ability to preview your app just as fast.

Glide is also the more cost-effective choice of the 2 with minimal maintenance costs.

The way Glide Apps shows content is through your database entries

Bubble

Bubble is definitely the more complex of the two, and for those who are genuinely interested in how code tools work, Bubble is the more appealing of the two, particularly because you can work easily with a drag-and-drop functionality while following programming-style rules.

The wide range of options and the 100s of tiny tool icons circling the interface can be overwhelming to someone who truly wants to build in a no code environment.

Bubble.io is a true drag-and-drop tool similar to Adobe Photoshop

Bubble vs Glide Part #7: Backend Technology

With Glide, your Google Sheet functions as your backend database so you are only allowed CRUD interactions (create, read, update, delete). However, users can also connect a third-party database or software like a CRM or ERP to the Google Sheet, which in turn goes into Glide.

Bubble offers backend capabilities, but on a case-by-case basis.

However, Bubble also offers a useful API Connector “plugin” that allows you to work with third-party backends, making it as extensible as you want it to be.

Bubble vs Glide Part #8: Third-party Integrations

Bubble has built-in plugins with apps such as Airtable, Audio Recorder, Blockspring and many more. With Glide, you are able to connect with more than 3,000 apps through Zapier.

Should You Use Bubble.io or Glide Apps?

As you understand more about Bubble vs Glide, you’ll be able to determine which of the two platforms suits the needs of your business best. Are you a tech-savvy founder looking for just enough complexity? Choose Bubble. For everyone else, Glide is the de-facto choice.

It should be pointed out that building a no-code app by yourself, and building one that achieves the goals of your business are two very different things. If after exploring no code options you still feel like you could use some guidance, you can fall back on an expert provider.

LowCode Agency has developed Glide applications for years with the specific intent of solving internal business problems.

LowCode Agency works to get you a highly-functional (and beautiful!) Glide app in just a few weeks

That’s the benefit of working with a no-code platform that streamlines the process and a provider whose expertise allows for efficiency and quality in app design. See how much your own app would cost with the super-simple calculator linked in the image below.

Originally published Feb 19 2021

Frequently Asked Questions

Bubble.io is an excellent resource for no-code web app design if you’re willing to deal with a bit of a learning curve when building a new app with only core functionalities.

Glide and Bubble are ranked among the top no code app platforms. Determine what features your app needs to offer and make your choice between these two based on whether you value simplicity and ease of use (Glide) over personalization and design features (Bubble.io).

Bubble is meant to help you build a Progressive Web App or PWA in short. It’s a mobile app that works via a web browser but that has the same functionality as a native app.

Glide is the easier of the two to use for building an app. Bubble’s drag-and-drop interface may merit the use of tutorials. Your business goals should be carefully considered before deciding which of the two to use. Let’s have a chat and figure out which is the best platform for you.

Jesus is the founder of Low Code Agency: a low-code development agency that allows small business owners to get their mobile and web apps done fast and cost-effectively while maintaining quality.

Bubble

Сервис для создания веб-приложений без использования кода.

Похожие на Bubble

Описание Bubble

Bubble — платформа для создания многофункциональных веб-приложений без использования программного кода (No-Code). Платформа содержит в себе необходимые для разработки: графический редактор, сбор данных, подключение других сервисов по API. Пользователь может создать как отдельные веб-приложения, так и полноценные десктопные программы и приложения для мобильных устройств.

Графический редактор позволяет создавать интерфейс веб-приложений с логической структурой, корректно работающей пре перемещении пользователя по приложению. Редактор состоит из коллекции контейнеров и динамических элементов (меню навигаций, графиков, новостных лент, формы и т. д.), которые имеют много возможностей для настройки. Структурные данные хранятся в отдельном хранилище. Хранилище данных содержит в себе данные пользователей, пользующихся разработанным приложением, из базы данных можно управлять пользователями. Э то cтатья системы Startpack. При помощи JavaScript созданное приложение можно интегрировать по API с другими сервисами.

5 инструментов зерокодинга, которые пригодятся программисту

В конце мая я рассказывал о зерокодинге на CodeFest 11 — программистам, продактам и тимлидам. Вопросы из зала показали: этим подходом, который часто ошибочно понимают как «программирование для гуманитариев», интересуется все больше разработчиков. Так они экономят время на рядовых задачах. При этом инструментов зерокодинга так много и появляются они так часто, что нужные легко пропустить. Специально для Tproger я подготовил обзор, который поможет сориентироваться в основных платформах.

Что такое зерокодинг

Зерокодинг, за рубежом известный как «no-code» — это способ создавать работающие IT-продукты без использования кода, за счет визуального интерфейса программирования и готовых платформенных решений. Применение принципов и инструментов зерокодинга в проекте позволяет бизнесу в разы сократить временные и денежные затраты, а разработчику — больше зарабатывать и меньше работать «в стол». И вот почему:

Зерокодинг до сих пор встречает скепсис со стороны консервативно настроенных разработчиков. Это закономерный процесс: например, когда-то программисты свысока смотрели на языки типа Python. Дескать, они верхнеуровневые и не дают работать с аппаратным обеспечением напрямую, как это должен делать «настоящий программист» — в отличие от C или того же Ассемблера. Со временем отношение к Python изменилось: он стал одним из самых популярных.

Можно ожидать, что то же самое произойдет и с концепцией зерокодинга. Все больше разработчиков будут пробовать no-code платформы и использовать визуальное создание продукта наравне с написанием кода. Зерокод прекрасно ложится в традиционные принципы разработки — KISS (делай проще), DRY (не повторяйся), YAGNI (откажись от лишнего), повторное использование кода, «чем хуже, тем лучше». В ближайшем будущем «настоящий программист» будет не столько кодить вручную, сколько проектировать программы и решения.

Платформы и инструменты зерокодинга

Существует уже несколько сотен разнообразных инструментов зерокодинга под конкретные задачи — мы рассказываем о них в своем блоге и Телеграм-сообществе. Из-за растущего спроса на no-code инструменты несколько компаний-разработчиков уже стали единорогами. Кстати, хороший побочный источник дохода для программиста — разработка плагинов к популярным платформам зерокода. Расскажу о ключевых.

Airtable

Airtable — стандарт на рынке no-code для задач структурированного хранения данных. Работает просто, как обычная Google-таблица, но выглядит красивей и удобней. Позволяет работать над данными вместе с «гражданскими» разработчиками — дизайнерами, менеджерами, продактами, в одном файле и с мгновенной скоростью обновления информации.

Хорошо в Airtable

Плохо в Airtable

Integromat

Integromat — это конструктор бэкенда для оптимизации работы компаний и создания новых продуктов. Он помогает устранить рутину вроде переноса данных между разными системами и сервисами. Известен как «клей для интернета».

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

Типичная задача, которую можно решить в Integromat: нужно прогнать данные из входящих имейлов с определенной темой через Google-переводчик, а результаты вносить в Google-таблицы, после чего уведомлять пользователя через Телеграм или Slack о новых записях.

Хорошо в Integromat

Плохо в Integromat

Проект по созданию красивых графиков из статистики Strava в Google-таблицах.

Bubble

Bubble — мощный конструктор приложений на зерокоде, символ no-code движения. Инструмент all-in-one: бэк, фронт, база данных для полноценных веб-приложений. Позволяет создавать полноценные веб-приложения со сложной и разветвленной бизнес-логикой — например, аналоги АлиЭкспресса и Яндекс.Еды. Мобильные приложения на Bubble можно публиковать в сторы с помощью специальных контейнеров.

Хорошо в Bubble

Чемпион мира по программированию Павел Шишкин выбрал Bubble, чтобы создать сервис для упрощения найма и обучения продактов. Андрей Ковтун никогда не программировал, хотя 10 лет работал в ИТ в роли архитектора, продакта, проджекта. Он собрал на Bubble маркетплейс обучающих курсов для детей и LMS — Brainfab.

Adalo

Adalo — когда нужно быстро собирать симпатичные нативные мобильные приложения. Из шаблонов или с кастомным дизайном. С базами данных и сложной логикой. Чтобы подошли для публикации в сторы и работали с пуш-уведомлениями и другими функциями смартфонов. Платформа подходит как для тестирования идей будущих сложных приложений, так и для приложений под МСБ, у которых не планируется миллионный DAU.

Пример использования

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

Directual

Directual — «российский убийца Bubble». Изначально low-code, а теперь и no-code платформа для создания масштабируемых и сложных приложений для бизнеса с простым интерфейсом, которую создали выходцы из Тинькофф. Дает возможность автоматизировать процессы, как в Integromat, и собирать сложнейшие веб-приложения, как в Bubble. В отличие от них без труда тянет серьезнейшие нагрузки — например, миллионы объектов в базе данных.

Хорошо в Directual

Плохо в Directual

Пример использования

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

Building a Yelp-Like App

Using Bubble to create a location-based coffee shop directory.

Bubble

Read more posts by this author.

Bubble

Bubble lesson of the day: building Yelp! For now, we’re going to program a simple version that focuses on coffee shops. On Bubble, such an app takes about 30 minutes to build – starting from a white page!

Getting Started

How are we going to structure our app? We need two pages: one for the submission of coffee shops, and one to display them on a map.

Let’s start with our first page. We need an input for the coffee shop name, an input to type the address, a picture uploader, and a dropdown to rate on a scale from 1 to 10. We’re also going to add a map, so that the user can make sure she typed the right address. Finally, a button ‘Submit’ will allow users to actually save their entry.

So here is our white page. Let’s add a background texture. I usually use this website http://subtlepatterns.com to get some nice textures (free). First, I click on the white page to change the background. Then, I pick ‘image’ and upload the texture i took from subtlepatterns.

Alright, let’s start building our page. Here is what it looks like after adding the 2 inputs, the drop down element, the picture upload button and the map.

Making The Page Work

First, I need to make the input type “address” (so that the input will make sure anything typed there can be understood by Google Maps). I do this simply by picking “Address” in the Content Format section in the Property Editor.

I also want to have the map display the address that has just been typed. To do this, I double click on the map and define the address of the marker as “Input Address’s value”.

Last, I had to enter the options for the drop down menu. In this case, these are options 1 to 10.

Programming The Workflow

Okay, now let’s add a button ‘Submit’ below the different elements and move to the workflow part. What do we want to happen when the user clicks on Submit? We want to save this new coffee shop. So let’s double click on the button and click on ’Start/Edit workflow’.

This takes us to the workflow page, where we define what the app does. The action we want to happen then is ‘Create a new thing’ in the Data part. In this particular case, the new thing is a coffee shop.

Click on ‘Create a new type’ and type coffee shop.

Now, what are the fields that are going to describe our coffee shop? Well, these are related to the inputs I’ve drawn: the name, the address, the picture, and the rating. I can create these fields in the ‘Settings’ tab. I have to be careful about two things: the type of the address field should be an address (!), and the rating should be a number.

Let’s get back to our action. The logic here is to say where the data we want to save is coming from. This is the content of the inputs.

Here is what it looks like:

And we’re done for the submission part. Now, our users can save coffee shops. If I press preview, I can start using my app!

Creating A Display Page

Now, we want to create another page to display what has been submitted. This is actually going to be much faster. Begin by clicking on ‘New page’ in the application menu and name it ‘search’.

Let’s apply the same background fix with the texture. Now, I’m going to add a map element that will pretty much take up the whole page.

The only thing I need to do here is define which list I should display. First, we want to display a list of markers.

Then, we pick the type ‘Coffee Shop’ as that’s what I want to display in my map. Let’s click on data source to define the list we want to display. In this case, we’re just searching for all coffee shops, so let’s not add constraints.

The last thing we want to do is display some legend on that map with the coffee shop rating (so that we can see the highest rated coffee shops)!

And we’re done! Here are some coffee shops I submitted, but feel free to enter yours 🙂

That’s All!

In about 30 minutes, I’ve built a Yelp-like app. I can add plenty of other features. For instance, I can refine the search based on current location within a range of miles. I could also allow users to sign up and type comments about places, or even message people that like the same places and have a coffee date 🙂

How To Build A News App With No Code

Learn how to create your own no-code news aggregator app, using Bubble’s visual web editor.

Lachlan Kirkwood

Lachlan is a digital marketing specialist and passionate no-code maker.

More posts by Lachlan Kirkwood.

Lachlan Kirkwood

It’s never been easier to stay connected with world events through dedicated news aggregator apps. With products like Digg and Apple News, the latest headlines are easily accessible across any mobile device.

With the power on no-code tools, it’s also never been easier to build a mobile news app of your own. Tools like Bubble have made software development accessible to makers of all backgrounds. Without any coding experience, it’s possible to dynamic applications that users will love. Our customers are using Bubble to build marketplaces, mobile apps, and even social networks.

Throughout this post, we’ll uncover the process of using Bubble to build your own version of a mobile news aggregator app, just like Apple News.

Whether you’re looking to build a dedicated news app, or you’re just interested in utilizing some of the core features from Apple News, this guide will share an inside look into building the underlying workflows for your MVP.

The steps to building an Apple News with no code include:

Get Started

To get started, you’ll need to first register your free Bubble account. Follow the link below to get started, then we can build our product together.

Register your account on Bubble

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your Apple News clone.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubble’s visual design tool to shape the user-interface of our platform. If you’re replicating a version of Apple News, some of the core pages you’ll want to include are:

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your Apple News clone, you’ll only need to create one page to host your individual story. We can then write the necessary logic to display only the relevant story on each page when it’s needed (we’ll cover this in more detail soon).

Configuring your database

Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When creating a database, we recommend splitting larger items into separate data types to enhance the speed of your application.

Advanced Tip: you can also use option sets for basic information that is universal and public to enhance the speed of your application.

For this example, we’ll create two separate data types for each news story. One data type will include the basic details of a story (including the title, the featured image, and publisher), while the other data type will include larger content files like the content of the full story itself. By creating these as separate data types, it allows us to only load the necessary information when it’s needed, reducing the amount of content the Bubble editor will need to render.

You can also create a single story data type with a text field for links to external websites where stories are hosted.

When building Apple News as an MVP, we’ll create the following data types & fields:

Data type: User

Fields:

Data type: Story

Fields:

Data type: Story content

Fields:

Data type: Publisher

Fields:

Advanced Tip: if you want to further simplify your MVP and speed up your app, you can also manually create a list of Publishers as an option set instead of a data type.

Building workflows

Now that you’ve structured both the design and database of your application, it’s time to start stitching everything together and making your app functional.

In Bubble, the main way to do this is with workflows. Each workflow happens when an event occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)

Creating a news story

The first feature we’ll build is a function for publishers to create and upload news stories to the platform.

On the upload page, we’ll start by adding a variety of input elements that will be used to add data into our database. These fields can include text inputs, an image uploader, and a dropdown selection.

Note: When building a product that requires text to be marked-up or formatted, we recommend using the rich text editor plugin. This input element will allow users to customize the style of content they add into this field.

We’ll also need to configure the publisher dropdown menu to display a list of dynamic choices.

As each new article will be added to a publishers list of total articles, we’ll need to select an existing publisher from our database.

Note: This initial list of publishers can be manually added into your database or a fixed set of publishers can be added as an option set.

When configuring this dropdown menu, we’ll select the type of choices to be a publisher. Next, our data source will search our database, pulling a list of all the current publishers.

Finally, we’ll set the source caption to display a publishers name.

Once a writer has added the relevant details within each on-page input, they’ll click the publish button to create a new story.

You’ll then create a new thing within your database, with the data type set to a story.

We’ll then need to start adding the relevant fields within our database. Map each of the on-page input elements with their corresponding field in your database.

We’ll first start by creating the story content type, then we’ll link this to the story itself.

By linking the initial story content we created with this story, it’s possible to seamlessly integrate this data across your platform.

Each time this workflow is triggered, a new story will be created.

Display dynamic content in a feed

Once publishers begin posting content to your mobile app, we’ll need to start writing the logic on your home page that displays each story as a dynamic list. This can be achieved by utilizing our repeating group element.

Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type of content as stories.

You’ll also need to set the data source as a list of all the stories in your database.

We’ll also sort this repeating group by the creation date of each story, displaying the list in reverse chronological order.

Now you’re ready to start structuring the dynamic content that will be displayed within each grid. Simply map out the top row with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.

Sending data between pages

Within a repeating group, it’s also possible to create events within each individual row. This feature will become useful when building navigational features across your platform.

To display this content, we’ll use our workflow editor to send data between pages.

You’ll need to start by creating a workflow that redirects a user to the story page when a story’s image is clicked.

When creating this workflow, use a navigation event to send a user to another page.

From here, select the destination page type to be the story page.

You’ll then need to send additional data to this page so the Bubble editor knows which unique story to display. The data you’ll need to send is that of the current cells story.

Display dynamic content on a story page

When a user is directed to a specific story page, you can easily pull this event data and display the relevant content from the story.

In order to build this function, you’ll first need to ensure that the destination page type matches the data property that you’re sending within the workflow. In this case, you’ll need to set the story page to a story property.

By classifying the type of content for a page, Bubble can easily pull and send relevant data from existing sources.

You can now start adding dynamic content into the fields that display information from a unique story.

Display all of a publisher’s articles

After reading a news story, a user might decide to view a full list of articles created by the publisher.

Building a separate page for publishers is as easy as building our initial home page if you created a publisher data type.

On this page, we’ll need to start by configuring the page type to be a publisher.

Next, you can copy the repeating group from the home page, then update the configurations.

In this instance, the data source of our repeating group will search for all existing stories where the publisher is the current pages publisher.

Following a publisher

The final core feature we’ll create for our MVP is the ability to follow a publisher on the platform.

On the publisher page, we’ll add a follow icon. When this icon is clicked, we’ll create a new workflow that makes changes to a thing.

The thing we’ll want to change is the current user, adding the current pages publisher to their list of following publishers.

Additional features

Now that you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build within your product. Additional you can:

Launch

Templates

If you don’t want to build your Apple News clone from scratch, you can purchase one of the templates made by our community members. Some similar templates include:

Start Building

Bubble can help you build a news app or any other product you choose! It’s never been easier to build something incredible without having to code.

Ready to join the no-code movement? Register your free account here and get started today.

If you’d like additional help when building your product, our thriving community forum is a great place to source actionable advice and resources. Any maker is also encouraged to ask questions within the community to help streamline their no-code journey.

How to Adapt Your Bubble App to Mobile

Learn the different ways you can convert a no-code Bubble web app into a mobile app, from native wrappers to progressive web applications.

Grace Hong

Grace Hong

These days, users often access websites and apps through their smartphones. Creating a Bubble app suited for a mobile experience can help you reach more customers.

Bubble is a no-code platform that helps you build web applications without code. But you might wonder how your web app would work on a mobile device. In this article, we’ll discuss the different ways in which you can adapt your Bubble web app to mobile.

Web apps, unlike mobile apps, can be accessed on your computer and your phone through a web browser, like Safari or Chrome.

Mobile apps that you download through your phone’s app store (Google Play Store or Apple Store) are called native apps. If you design a native mobile app, you can even improve the user experience by integrating mobile sensors (camera, GPS, etc.), push notifications, keyboard shortcuts, and gestures.

Prepare your Bubble App for a Mobile Experience

While Bubble apps do not start off as native apps, all Bubble apps are still accessible on a mobile device through any web browser. In fact, we have features to optimize the mobile experience on your existing Bubble app:

Some additional tips on designing a Bubble app for a mobile experience are:

Compare Mobile Wrappers: Native vs. PWAs

There are two primary ways to go about adapting your app for mobile.

1) Wrap your app into a native mobile app, which is specific to iOS or Android and represents your standard downloadable mobile app.

2) Wrap your app into a progressive web app (PWA), which is a web-based solution comparable to a native app.

Pros of Native Apps

Native apps are the standard for mobile apps. Because they’re created for a specific mobile operating system (OS), native apps provide a wider range of UI/UX features, give access to all APIs in the corresponding OS, and interact easily with other native apps. Moreover, native apps allow the creator to monetize purchases of their app directly on the app store and customize app store searches.

Note: Make sure your app does not violate app store guidelines, test thoroughly for bugs, and complete the necessary fields (title, icon, description, etc.) for your app to have the highest probability of acceptance onto the app store.

Cons of Native Apps

Native apps require a longer period to develop. Not only do they have to pass the screening of app stores, but they also are NOT OS-agnostic: native apps are created to conform to a specific operating system, either Apple’s iOS or Android. If you want to be on both iOS and Android, you will need to build two native apps. Native apps also require the user to install the app on their device, rather than allowing the user to browse the app quickly on the web.

Pros of PWAs

Progressive web apps represent a newer alternative to native apps but share many similar features. PWAs were originally developed and coined by Google in the 2010’s. Users can install the app directly and use it offline, and PWAs are also generally accepted across all mobile operating systems (Android and Windows). The additional feature of being web-based allows PWAs to take advantage of faster speed to launch, search engine optimization, a smaller file size, and a high level of security (specifically, they use an encrypted protocol as they run on HTTPS).

Cons of PWAs

While they are more OS-agnostic, PWAs unfortunately face different levels of acceptance by operating systems. Because Google developed PWAs, they’re relatively easy to push to the Android app store. Meanwhile, Apple limits the ability of PWAs to access native features and only allows native apps (not PWAs) to be published on the Apple app store.

Ways to Wrap your Bubble App to Mobile

Once you have followed the earlier steps to «Prepare your Bubble App for a Mobile Experience,» you are now ready to use a wrapper to launch your mobile-friendly Bubble app! The wrapper primarily conforms your app to the technical standards for a mobile app, rather than dramatically alter its visual appearance for mobile (which is why you still need to design for mobile).

While there are a few different platforms to choose from, we found the following wrapper platforms to be the most friendly for no-code users.

Note: This is NOT a paid or sponsored post, and Bubble does not maintain any of these third-party platforms. We don’t monitor updates for these platforms or whether they go out of date.

BDK (Native Apps)

Summary: BDK caters solely to Bubble apps and has served hundreds of apps. Beyond wrapping their app, users can also integrate native features through the BDK Bubble plugin. The wide range of features offered on BDK includes push notifications, integration of Touch ID/Face ID/biometric data, scanning QR and barcodes, access to native contacts, device vibration, access to device GPS, custom splash screens, etc. To preview their app before purchase, users download BDK’s Native app and customize with an app name, icon, link, native header, splash screen, and more. Note that BDK also allows you to create mobile apps, without requiring that the app be built on a single page.

Nativator.io (Native Apps)

Summary: Nativator wraps a wider range of apps (not just Bubble apps) into a native app for iOS and/or Android. Features included with your native app are: white-labeled splash and webview, camera and file upload ability, geolocation, push notifications, audio/video/microphone access, and offline native alerts. To preview the app before purchase, users enter a few details about the app (name, icon, description, URL) and customize features relevant to the mobile operating system. The setup process is a bit more complex as wrapping to an iOS app requires an app store developer account to proceed.

GoNative (Native Apps)

Summary: GoNative is another option for transforming your Bubble app into a native app. In addition, GoNative guarantees that your app will be accepted onto both app stores. It supports multiple websites (not just Bubble apps) and provides an easy preview, source code download, native UI (a splash image, navigation menu, Dark mode), and availability of native plugins (push notifications, biometric authentication, and more). GoNative also offers professional services to configure your app for mobile or add your app to the app store. To preview, users can add in their app URL, an app name, and their email to receive URLs to samples of their native app.

Codeless Academy (Native Apps)

Summary: Codeless Academy is a relatively new platform with similar capabilities as BDK. Designed for Bubble apps, Codeless Academy providers users with the ability to test native integrations with their native features plugin for push notifications, custom screens, Touch ID/Face ID, location data, QR/Barcode scanner, Apple Pay, and more. To preview before purchase, users download the Codeless Academy app on their mobile device.

Zeroqode (Native Apps)

Summary: Zeroqode also provides a wrapper to convert your Bubble app to a native mobile app with a 100% guarantee your app will be published on the App Store and Google Play. Similar to other platforms, Zeroqode allows you to set the splash screens, Android and iOS icons, etc. for your app, and you can purchase the Air Native plugin to unlock additional native features, such as photo taking, GPS tracking, vibrate, and more. To preview your app on Zeroqode’s website, select “Allow all iframes” for your app in Settings > General > “Allow to render the app in a frame/iframe.”

Progressier (PWAs)

Summary: Unlike the other options, Progressier allows users to convert their Bubble apps to a progressive web app, rather than a native app. No-code features in Progressier include querying statistics (i.e., installations) of your PWA, an API, push notifications, and iOS compatibility. To preview, users enter their app’s URL, customize a few settings (name, domain, logo), and paste a script provided by Progressier into their Bubble app’s settings.

Bubble as a Backend for Mobile

While Bubble is a full-stack solution, allowing you to build both the frontend and backend entirely on our platform, you can exclusively use our backend functionalities to release a native mobile app.

By enabling your Bubble API in Settings, you can connect another app to the backend of your Bubble app. For instance, you can make calls from another app to create, read, update, and delete entries in your database with the Data API, or you can sign up users, log in users, or trigger more complex actions with our Workflow API. This can be useful if you want to use another tool to build the frontend, but you want the powerful database and workflow features of Bubble to make a richer web application experience.

Overview of Pros and Cons

If you decide to combine Bubble as a backend with a native mobile frontend platform, you’ll be able to take advantage of designing directly on an app that automatically becomes a native mobile app. In addition, you likely won’t have to adjust your app after conversion due to resized elements. This option is more friendly to users who are familiar working with mobile app builders already and want to bring more data or workflow functionality to their app.

However, while Bubble’s powerful backend functionality distinguishes our platform and empowers our users to build complex apps, Bubble is ultimately a full stack solution. Wrapping a fully Bubble-made app can have benefits of running workflows directly on visual elements, managing all your data in one place, customizing responsive design, and more—all in one place.

Bravo

Summary: One example of of a mobile frontend platform that integrates with your Bubble app is Bravo. This newly released platform uses Figma/Adobe XD for the frontend design of your mobile app and integrates with your Bubble app’s API. To make API calls on Bravo, create a new Data Collection and construct new API requests relevant to your Data and Workflow API’s on Bubble.

As you use Bravo and run into questions, you’ll be able to use their Academy and Tutorials for guidance. More notably, Bravo also has a number of sample apps. You can play with these on your Bravo account to learn how to set up an app on their platform.

Price: Bravo has a free tier, but to connect form data to your API, you will need to be on the Olé plan, which is 19 euros/month. In addition, using the Bubble API requires you to be on a paid Bubble plan.

With all these options, it’s never been easier to adapt your Bubble app into a native app or progressive web app! In fact, there are plenty of Bubble apps that have led the way—Bubble apps with a native mobile presence include Qoins, TravelTrunk, and more. We hope these suggestions offer you a more tangible path towards designing a mobile experience for your Bubble app.

How To Build A Meal Delivery Platform Without Code

Learn how to create an Uber Eats or Doordash clone with no code, using Bubble’s visual web editor.

Lachlan Kirkwood

Lachlan is a digital marketing specialist and passionate no-code maker.

More posts by Lachlan Kirkwood.

Lachlan Kirkwood

If you’re hungry for a good bite, we recommend ordering something off Uber Eats. But if you’re hungry to start building software without needing to write code, we recommend using Bubble’s cutting-edge visual development tool.

Our powerful platform is revolutionizing how everyday people can build software, making the path to building an online business more accessible. Our customers are using Bubble to build portfolios, marketplaces, and even social networks.

Throughout this guide, we’ll highlight how to build the following key features for your no-code Uber Eats clone:

The steps to building Uber Eats with no code include:

Get Started

Before you start, you’ll need to first register your free Bubble account. Click the button below to get started, then you can follow along as we build our app together.

Register your account on Bubble

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your no-code Uber Eats clone.

We also recommend understanding how to create and edit user accounts. We’ve previously covered how to create user accounts in Bubble in great detail.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubbles visual design tool to shape the user-interface of our product. As we’re replicating a code-free version of Uber Eats, some of the core pages we’ll need to include are:

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your Uber Eats template, you’ll only need to create one page to host your individual meals. We can then build the necessary logic to display only the relevant meal details on each page when they’re required (we’ll cover this in more detail soon).

Configuring your database

Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database streamlines the process of creating different data types with unique fields. To build the underlying logic for the core features listed above, we’ll need to create the following data types & fields:

Data Type: User
Fields:

Data Type: Meals
Fields:

Data Type 3: Restaurant

Data Type 4: Delivery contractor

Building workflows

In Bubble, the main way to do this is with “workflows.” Each workflow happens when an “event” occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up,” “make a change to the database,” etc.)

Display a list of dynamic content on your home page

To display content on your platform, you’ll need to first add new entries within your database. Within Bubble, there’s two ways to accomplish this.

If you’re the sole moderator of your product, you can manually add a new entry in your database to the relevant fields.

As an alternative, it’s possible to also build a separate page into your product where you can visually add submissions using input fields. We cover this process in more detail here.

Once you’ve started submitting meals into your database, you’re ready to display each item in a feed on the homepage. This can be achieved by utilizing our repeating group element.

Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type as a meal.

You’ll also need to set the data source as a list of all the submitted meals from your database. If you’d like to segment each repeating by a relevant category, you can even add an additional constraint to your data source.

Now you’re ready to start structuring the dynamic content that will be displayed within this grid.

Simply map out the first column with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.

When using a repeating group, it’s also possible to create events within each individual column.

This feature will become useful when building navigational functions across your platform. As the Uber Eats homepage only displays an overview of each product (including its name, image and price), you’ll want to display the full meal details for each unique item on a separate page.

This additional content will need to be hosted on your individual meals page.

To power this event, you’ll need to start by creating a workflow that redirects a user to your product page when the meals image is clicked.

When creating this workflow, use a navigation event to send a user to another page. From here, select the destination page type to be the meal page.

You’ll then need to send additional data to this page so the Bubble editor knows which specific product to display. The data you’ll need to display is that of the current cells meal.

It’s also possible to use our search bar element to help navigate through the pages of your application. If you’d like to learn more about this powerful element, we’d recommend reading this guide.

Display dynamic content on a meals page

When a user is directed to a specific meal page, you can easily pull this event data from your workflow to display the relevant content.

Before we create this workflow, you’ll first need to ensure that the destination page type matches the data property that you’re sending through your event logic. In this case, you’ll need to set the meal page to a meal property.

You can now start adding dynamic content into your page elements, displaying the information from the meal that has been sent in your workflow.

Using Bubble, it’s possible to harness the power of several free plugins to easily accept payments and process orders.

In this guide, we’ll be using the Stripe.js plugin to process credit card payments through Stripe.

Note: After integrating this plugin, you’ll need to first configure your API keys within the plugin settings.

When accepting payments, you’ll need to build a checkout interface that allows users to add their credit card details. For the sake of our MVP, we’ll be adding these relevant fields below the purchase button. Within your product, you could add these elements to a pop-up or even a separate page.

You’ll also need to include a Stripe token element next to the payment form. This element won’t be visible to your end-users, but is essential to powering a new transaction in Stripe.

When the buy button is clicked, we’ll then create a new workflow that triggers a Stripe payment.

You’ll begin by selecting the event ‘convert card into Stripetoken A’. Within this event, you’ll need to configure your input fields to match Stripes payment structure.

Once a card has been converted into a Stripe token, you’ll then need to create an additional workflow that automatically processes this token from a user’s bank account.

If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.

Once a payment has been processed, you’ll then need to create a new order for a new delivery contractor.

By adding an additional step to the payments workflow, we’ll create a new thing (delivery contractor). The data we’ll want to add is the current pages meal.

Displaying meal deliveries to couriers

Finally, once a meal has been added to a couriers dashboard, we’ll want to display both the pickup and delivery address.

Start by configuring the delivery backend page type as delivery contractor.

Now use a repeating group to display the current delivery contractors meals to deliver.

You can then format the repeating group cells to display both the pickup address (restaurants address) and the delivery address (purchased users address).

Additional features

Once you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build within your marketplace.

Additionally, you can:

Launch

Hiring a developer to build your product no longer needs to cost thousands. Instead, you can re-allocate these resources to growing your product user-base.

Templates

If you don’t want to build your Uber Eats clone from scratch, you can purchase one of the templates made by our community members. Some similar templates include:

Start building

Bubble can help you build a no-code Uber Eats clone or any other product you choose! It’s never been easier to build something incredible without having to code.

To get started for free, sign up here.

You can also connect with other passionate makers building with Bubble on our community forum.

How To Build An AirBnB Clone Without Code

Learn how to create a vacation rental marketplace without coding, using Bubble’s visual web editor.

Lachlan Kirkwood

Lachlan is a digital marketing specialist and passionate no-code maker.

More posts by Lachlan Kirkwood.

Lachlan Kirkwood

If you are interested in building your own version of AirBnB, finding a whitelabel Airbnb that you can customize, or building a similar type of housing or short-term rental marketplace–but you do not know how to code–then we’ve got a solution for you.

Using Bubble, a no-code visual programming platform, you can easily build and customize any web app for your exact needs and visions, without hiring an engineer or having any background in programming. In this guide, we will walk through the basic setup and structure for building your very own no-code version of AirBnB on Bubble.

This guide to building a «NoCodeBnB» platform that lets users find places to stay, or rent out their spare rooms will cover the following topics:

The steps to building your own AirBnB clone with no code include:

Get Started

Before you start, you’ll need to first register your free Bubble account. Click the button below to get started, then you can follow along as we build our app together.

Register your account on Bubble

Before starting on this app, we recommend completing the introductory lessons, which will guide you step-by-step through some of the most common Bubble features. This will help you get a running start on building your no-code AirBnB clone.

How do people even begin building their apps?

The short answer is that this comes down to personal preference. Some Bubblers like to start by designing their pages so that they can visualize what the user interactions are like, then move on to hook up their pages to the database and workflows. Other Bubblers like to start by defining their app’s database, which influences how they think about page design and workflows. There’s no right answer, so give the different approaches a try over time to see what fits best with your style of thinking.

Designing your app

We’ll start off by thinking about the main pages that a no-code AirBnB needs in order to provide the features your users will expect from a short-term rental marketplace. These pages will act as the primary user interface your users will view the rooms to rent or make bookings on, so it’s important to get them right.

If you come from a web design or WordPress background, Bubble lets you design stunning dashboards and pages that will make your users feel at home. If you have no idea about design, no problem! You can easily kickstart your project by choosing from one of the hundreds of our templates.

One of the advantages of Bubble is the ability to send data to a page. This means that you only need to create one generic version of a page with one simple design. Bubble will automatically populate the elements on the page with the data fields from the data stored on the page. This means you won’t need thousands of different pages for each room in your no-code AirBnB app!

To build a vacation rental marketplace MVP, we’ll build the following pages:

Configuring your database

How is the Bubble database different from normal databases?

Some users find it easier to start with setting up their data types, which is essentially setting up the database. Every Bubble app comes with a built-in database that you can configure however you need, meaning no setup hassle for you.

Each of these data types should have fields within it that hold properties of that thing. As we continue building the pages, elements on the page will draw upon different fields of different data types.

When building Airbnb as an MVP, we’ll need to create the following data types & fields:

Data Type: User

Fields:

Fields:

Fields:

These are the bare minimum fields we’d need to get the app working. As we build more features, we would likely add more data types and fields. For example, we can add an address for the room, or a “Draft” boolean field to indicate if the room is in draft mode and not yet published. We can then hide and show different design elements or change the way the app behaves based on those bits of data.

Core Features

How do you build features in Bubble?

Now that we have some blank pages and the database set up, we’re going to give the web app some actual functionalities by connecting everything together and performing some basic actions. In Bubble, the main way to do this is with a list of “actions” grouped in a “workflow.”

Each workflow happens when an “event” happens (e.g. a user clicks on a button or the page is fully loaded), and then runs a series of “actions” in response (e.g. “sign the user up,” “make a change to the database” or “hide/show an element” etc.)

To get you started with the basics of the workflows, you’ll need to build the following features:

User Signup

To better understand how to create and edit user accounts, check our how we previously covered this in more detail in our How to Build Quora article.

Adding a property to the platform

On our create room page, start by using a combination of input fields, including; free-text fields, image uploaders or multi-line inputs fields.

Once a user has added their relevant details within each input, they’ll click the list room for rent button to create a new entry in your database. This button click will be the necessary action to trigger your workflow.

Using the workflow editor, you can select to create a new thing within your database. In this instance, we’ll be creating a new product.

You’ll then need to start adding data to the relevant fields within your database. Map each input field you’d like to create against its corresponding data field.

Display available rooms for rent

Once users have started submitting rooms to the platform, you’re ready to display each item in a feed on the homepage. This can be achieved by utilizing our repeating group element.

Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type as a room.

You’ll also need to set the data source as a list of all the submitted rooms from your database.

Now you’re ready to start structuring the dynamic content that will be displayed within this grid. Simply map out the first column with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.

Send data between pages

Within a repeating group, it’s also possible to create events within each individual column.

This feature will become useful when building navigational features across your platform. As Airbnb’s homepage only displays an overview of each listing (including its name, image and price), you’ll want to display the full rooms details for each unique item on a separate page.
This additional content will need to be hosted on your individual room page.

To power this event, you’ll need to start by creating a workflow that redirects a user to your product page when the rooms image is clicked.

When creating this workflow, use a navigation event to send a user to another page. From here, select the destination page type to be the room page.

You’ll then need to send additional data to this page so the Bubble editor knows which specific room listing to display. The data you’ll need to display is that of the current cell’s room.

Display dynamic content on a room’s page

When a user is directed to a specific room page, you can easily pull this event data from your workflow to display the relevant content.

Before we create this function, you’ll first need to ensure that the page type matches the data property that you’re sending through the workflow. In this case, you’ll need to set the room page to a room property.

You can now start adding dynamic content into your page elements, displaying the information from the room that has been sent in your workflow.

Book a room

One of the core features of Airbnb is the ability for users to book and pay for rooms. Using Bubble, it’s possible to harness the power of several plugins to easily accept payments and process orders.

In this guide, we’ll be using the Stripe plugin to process credit card payments.

Note: After integrating this plugin, you’ll need to first configure your API keys within the plugin settings.

When building your payments experience, you can begin by creating an additional page called checkout. The type of page should also be configured as a room.

Once you’ve created this page, we’ll go back to our room page and create a workflow when the book room button is clicked.

Within this workflow, we’ll create a navigation event, redirecting the user to our new checkout page. We’ll also want to send the data of the current pages room.

On our checkout page, we’ll then create a function for users to select their total amount of nights for a stay, then display the final price of this booking.

Using a dropdown menu, we’ll add a static choice to select a number of nights.

We can then display the final price of the booking by multiplying the price per night by the number of nights selected.

To process the payment for this booking, we’ll create a new workflow when the finalize booking button is clicked.

Within this workflow, we’ll create a payment event, charging the current user.

When using this event, you’ll need to input the dynamic purchase data based on the current page rooms price and the number of nights selected.

After configuring this payment workflow, the Stripe plugin will now automatically display a form and process a users card payment.

If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.

Start by creating a step that makes changes to a thing.

The thing we’ll want to change is the current pages room, adding the current user to its list of users booked.

Finally, we’ll then make changes to the current user, adding the current pages room to their list of rooms booked.

Adding user reviews

Once a user enjoys their stay (thanks to your no-code platform 👏), they may want to leave a review and share their experience with users across the platform.

We’ll start building this function by first adding a repeating group on our room page. This repeating group will be used to display a list of all reviews.

Configure your repeating group as a review data type, then update its data source to be only the reviews from the current pages room.

Now that we’ve created a repeating group to support our room reviews, we’ll add an input below this element, allowing users to submit new reviews.

Next, we’ll create a workflow when the submit button is clicked. The purpose of this workflow will be to create a new thing.

The thing that we’ll want to create, is of course, a review. Once again, you’ll make the on-page elements with the necessary fields in your database.

When a new review is created, the on-page repeating group will automatically update with the latest content.

Additional features

Here are some fun next feature ideas to add more functionality to your no code Airbnb clone. These are not only features your users will love, but building these will help you practice designing pages, structuring the database, and building workflows in Bubble.

Launch

Hiring a developer or dev team to build this app would cost thousands, if not tens-of-thousands of dollars. Well, now you can treat yourself to a night away at one your community members rooms.

Templates

If you don’t want to build your Airbnb clone from scratch, you can purchase one of the templates made by our community members. Some templates that demonstrate specific kinds of social networks include:

Start Building

Bubble can help you build a home or room rentals platform with custom features of your choosing! You can build your idea without code. To get started for free, sign up here.

You can also connect with other passionate makers building with Bubble on our community forum.

How To Build A YouTube Clone Without Code

Learn how to create your own no-code YouTube clone, using Bubble’s visual web editor.

Bubble

Read more posts by this author.

Bubble

After getting started with the first video being simply titled ‘Me at the zoo’ back in 2005, YouTube is now a cornerstone to modern video content consumption. In seconds, users can find world class educators and free video content in every niche imaginable, as well as millions of hours of entertainment. In this article, we will walk through a tutorial to build YouTube clone using Bubble, a no-code web app development platform, no programming experience required!

In this guide for building your own no-code YouTube platform, we’ll cover the following topics:

The steps to building YouTube with no code include:

Getting Started

What is Bubble?

Bubble is a no-code tool that empowers our users to design, develop and host fully-functional web applications without writing a line of code. Applications built on Bubble can range from simple prototypes to complex marketplaces and platforms, completely replacing the programming languages and frameworks traditionally used for web development. Bubble’s powerful point-and-click editor gives users the complete power and ability to design fully customizable applications and workflows; from there, Bubble handles the infrastructure, DevOps, and scaling automatically.

Before you start, you’ll need to first register your free Bubble account. Click the button below to get started, then you can follow along as we build our app together.

Register your account on Bubble

New to Bubble? Follow along on our Crash Course introductory videos to get familiar with the basics of Bubble.

We also recommend completing the introductory lessons, which will guide you step-by-step through some of the most common Bubble features. This will help you get a running start on building your no-code Youtube clone.

How do people even begin building their apps?

The short answer is that this comes down to personal preference. Some Bubblers like to start by designing their pages so that they can visualize what the user interactions are like, then moving on to hooking up their pages to the database and workflows. Other Bubblers like to start by defining their app’s database, which influences how they think about page design and workflows. There’s no one correct approach, so give the different approaches a try to see what fits best with your style of thinking.

Main pages of your app

We’ll start off by thinking about the main pages that a site like YouTube needs in order to provide the features your users will expect from a modern video-sharing platform. These pages will act as the primary interface that your users will use to upload a video and make it available to your platform’s community for watching.

Bubble lets you build stunning dashboards and pages that will make your users feel at home, regardless of your design background. If you are a beginner, no problem! You can easily kickstart your project by choosing from one of our many templates.

One of Bubble’s features is the ability to send data to a page. This means that you only need to create one generic version of a page, with one simple design; from there, Bubble will automatically populate the elements on the page using this data. This information is stored in the Bubble database, which requires no external setup, and Bubble will then automatically propagate the data into the right groups and text elements, so you won’t need thousands of different pages for each profile or post.

To build an MVP, we’ll build these pages of the app:

Data Types You’ll Need

How is the Bubble database different from normal databases?

Some users find it easier to start with setting up their data types, which is essentially setting up a database. Every Bubble app comes with a built-in database that you can configure to suit your needs, meaning no setup hassle for you.

Each one of these data types should have fields within it that hold properties of that thing. As we continue building the pages, elements on the page will draw upon different fields of different data types.

Our video app will have these data types:

These are the bare-minimum fields we’d need to get the app working. As we build more features, we would likely add more data types and fields. For example, we can add things like user commenting, video embed features, and more to make our platform as powerful as YouTube. We can even integrate with a third party video editor and let users upload then edit videos inside our app, then automatically upload the final edited video!

You can have as many data types and fields as you like. We can then hide or show different design elements or change the way the app behaves in Bubble based on those bits of data.

Core Features

How do you build features in Bubble?

Now that we have some blank pages and the database set up, we’re going to give the web app some actual functionalities by connecting them together and performing some basic actions. In Bubble, the main way to do this is with a list of “actions” grouped in a “workflow.”

Each workflow happens when an “event” happens (e.g. a user clicks on a button or the page is fully loaded), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database” or “hide/show an element” etc.).

To get you started with the basics of the workflows, you can build the following features:

User Signup

Create a YouTube profile

Here, we’ll design a form and then let the user click a button to save their profile image, handle and full name. A workflow will tie both the design side (the form) to the data types that we created earlier, which makes Bubble really powerful for building data-driven apps that store and retrieve user information.

First, here is an example of a profile page:

The elements added include:

As we want all of this information to be public, we won’t need to worry about Data Privacy rules for now. If you want to change who can see what, check out the reference here.

Note: Input fields need to have Content Formats that match the type of data that Bubble’s database is expecting. For instance, Name fields should have the Content Format of «text,» and Profile Picture data field should be an «image,» which means we need an image uploader element to get the right type of data.

Next, save the user’s profile information using a workflow.

Double click the ‘Save Profile’ button in your form and click ‘Start/Edit Workflow’ in the properties menu. This tells Bubble that you want to tie some logic to the button when it is clicked.

Then select the step ‘Make changes to a thing.’ In this case, we are making changes to the user that is currently logged in to our application.

Above, you can see the workflow is set to trigger ‘When Button Save Profile is clicked’, so when the user clicks the green button to submit the form the workflow will run.

Create the action ‘Make Changes to the Current User’ using the input’s data as shown above:

(Supporting materials: Lessons on “Saving data” and “Saving and modifying data”)

Uploading a ‘Video’ to the video library

Build a page for uploading a Video to the video library, using a ‘FileUploader’ element, an icon, a Video Title input, and a Thumbnail Image Uploader icon. Add an ‘Upload’ button:

Click the Upload button and select » create a new workflow.
Step 1: “Create a new thing” > Type = Video with the following fields:

In Bubble, when files are stored in the database, Bubble returns the Amazon Web Services url of the location of the file, which in this case is the video’s storage link. We’re actually uploading the video file itself to AWS via Bubble, and then saving the returned URL to access that file in the Video_Url. We can use that piece of data to then show the video in a video element later on.

Step 2: create a new step and select «Make changes to a thing» > Set Thing to change = «Current User» > Change another field > Set the field as «Videos_Published add = Result of step 1 (Create a new Video. )» We don’t necessarily have to do this for an MVP, but depending on the app, saving data and mapping it to a user this way can save time on privacy rules in the future.

Step 3: Add ‘Reset relevant inputs’ action after this so that the user can post something else without needing to remove the old text they typed and files they added. Don’t worry, it’s all been saved already before we reset these inputs.

That’s it! Videos will now be saved to the database, along with some default data Bubble automatically adds (like the user account who created the Video, the time it was created and a unique ID for the Video) which we can use for more advanced actions later down the line.

Displaying Uploaded Videos

Now, we have to create the Video feed to view all of the Videos stored in the database. This is really easy to do in Bubble, but you can also add more complex filters and access rules when you get more versed in the Bubble platform. To do this, we add a ‘Repeating Group’ element from the element types on the sidebar of the Bubble editor to our ‘Latest’ page or wherever we want to display the videos.

In each cell of the repeating group, you want a different Video to show.

Add a ‘Video’ element and set Video source = YouTube, Video cell’s Video’s Video_Url.

Add a text element to Repeating Group cell #1 to display the ‘Current cells’ Video’s Created Date’ if you like, which will then show the date the video was uploaded to your platform! You can even sort by created date: set ‘Descending’ to ‘yes’ to sort videos chronologically so the latest video is shown first in the grid.

Your users can then scroll the repeating group as they would normally on YouTube and the cells will scroll through all of the different Videos stored in the database. Repeating Groups are very powerful, and you can add filters or constraints if you want to only show Videos created by the current user, or even build in a search with a text input to only show Videos whose title contains the search term!

How to Show logged-in users their Videos but a generic Video feed to logged-out users

Create a Conditional statement to show a different data source based on if the user is logged in or out.

Go to the Conditional tab in Bubble for your Repeating Group element. Create the following Condition: ‘When the Current User is logged in’ > Data source = Search for Videos > Type = ‘Video,’ Created By = ‘Current User’.

The Repeating Group will now show only Videos that have been ‘Created By’ the ‘Current User’, i.e. the person logged in. This is a great way to show different data to different users. Remember, Repeating groups can only have one data type each, so we can’t change the type of data it shows to anything other than ‘Video’: if we wanted to show a list of Users in the database for example we would need a separate Repeating Group with the data type set as User. (See our supporting materials: Lesson on “Using conditionals”).

Additional features

You can also add some fun additional feature ideas to add more functionality to your no-code YouTube clone. These are not only features your users will love, but building these will give you more practice with designing pages, structuring the database, and building workflows:

Launch

Hiring a developer or dev team to build this app would cost thousands, if not tens-of-thousands of dollars. Well, now you can treat yourself to a vacation, because you can build and launch your app in Bubble for free.

Templates

If you don’t want to build your no-code YouTube clone from scratch, you can purchase one of the templates made by our community members:

Plugins

Videos can sometimes exceed the 5GB upload limit that Bubble applies, so you can use third party plugins for uploading HD videos and storing them, like File Uploads by Zeroqode.

Start Building

Bubble can help you build a user-generated video hosting platform with custom features of your choosing, all without code!

To get started for free, sign up for Bubble.

Connect with other users building a video sharing platform on Bubble’s community forum.

No-Code Deep Learning with Bubble & Peltarion

Allen Yang

Read more posts by this author.

Allen Yang

This week Peltarion launches its plugin with Bubble. With this plugin, you can call your Peltarion models and use them in your Bubble app.

A sample no-code deep learning model in Peltarion, which you can now call in a Bubble app.

This means you can use your data set to train a deep learning model on Peltarion, then access it from your Bubble app.

For example, let’s say you’re building a Bubble app for a manufacturing process and want some help with quality control, like detecting faulty products. You can now use data you have from your past output to train a model in Peltarion, then use the Peltarion plugin to integrate it into your Bubble app. This way, a user of your app can upload a picture of an output from the manufacturing process, and get a quick assessment on whether it’s faulty. Our colleagues at Peltarion built a mini-app into this article for a quick demo.

Just to get you excited, here are some other things you can build:

We’re really excited to work with Peltarion. Just as Bubble aims to open up web app development to more users, Peltarion aims to make AI / ML accessible to more users.

Have a look at their tutorial, if you’re interested in building your first AI web app, and let us know what you think!

Click here to learn to build a no-code AI app on Bubble.

About Peltarion

Peltarion is a no-code platform for building AI models at speed and at scale. As an intuitive cloud-based platform, it puts AI in the hands of everyone who has an AI problem they want to start working on. Healthcare workers, manufacturers and climate scientists are now using Peltarion to solve some of the most pressing challenges of our time. By keeping up to date with the latest development in the deep learning space, we make it possible for people without a code or data science background to start applying AI. Building an AI model can now take fewer than five clicks. Adding AI to your apps has never been easier. Ready to see for yourself?

About Bubble

How We Built a Web3 App in Bubble With No Code

The creators of LinksUp share how they built a NFT marketplace using Bubble’s no-code platform.

Arjeta Culaj

Co-Founder of LinksUp

More posts by Arjeta Culaj.

Albert Astabatsyan

Founder LinksUp.io & VentureDev.io | Ex-finance guy, now working full time on #tech, #web3 and #nocode.

More posts by Albert Astabatsyan.

Arjeta Culaj, Albert Astabatsyan

When we started building LinksUp a year ago, I had no idea how to code, let alone create a whole app from scratch. I used to work in finance—despite having done some projects in tech in the past, I had no prior experience in coding. I heard about Bubble and discovered the potential of making what we wanted without writing a single line of code.

We initially started LinksUp to help creators and solopreneurs easily set up a storefront for their projects and automate their back office. Our app was featured on Product Hunt and received the #1 Product of the Day badge. LinksUp was also nominated for the Golden Kitty product of the year award in the creator economy category.

The current focus of our product is web3—specifically, content creation and tokenization with NFTs. Creators can claim ownership of their content by minting an NFT and storing the attached content (such as song or video) on a decentralized blockchain. However, the content is still accessible to everyone. This makes the value of token ownership a subject of debate. For example, I can mint a song or video NFT, but without gating, it can still be accessed by someone who doesn’t own that NFT. Token gating is a way of guaranteeing that only the holders of the token can access the content, which gives it more value and utility.

This is how it technically works: The wallet (e.g. MetaMask) seamlessly connects to the white-labeled storefront of the creator. The system can then verify the ownership of the NFT. If the ownership is confirmed, access to the creator’s content is then granted. Thus no login or password is required. It’s essentially a web3 member area where users have total ownership of their content.

Most major membership platforms profit when users’ content, like videos or songs, goes viral. With token-gated NFTs, creators don’t have to depend on these platforms for discovery and views or pay intermediary costs for hosting and affiliation. NFTs return ownership of content—and profit from the revenue it generates—to creators. Using NFTs to gate content enables creators to host their content on a decentralized blockchain instead of a platform’s database. This way, they can sell content directly to an audience.

A consumer buying a piece of music or video NFT from a small creator means that they are either a fan and adopter or are speculating that this creator will get big with their NFTs gaining in value as a result. It’s like buying stocks, but the underlying asset, in this case is the creator’s brand and content instead of a company. If an aspiring creator gets famous, so does their content, and NFTs shoot up in value. Creators can even include royalty fees in their smart contract while minting their NFTs. If applied, the original creator receives a percentage of all secondary sales.

How LinksUp Works

LinksUp consists of two different Bubble apps connected with each other. This structure provides users with their own white-labeled storefront solution consisting of:

LinksUp is like a website builder for creators. The first app is the user’s white-labeled storefront. The second app is the editor, where users can customize the storefront pages, create content and services, mint NFTs, and more.

Building an app of this scope with a traditional code-based approach would have been a massive challenge with our small team and limited resources. So the decision was made to build on Bubble, and with it we managed to launch the app really fast—in less than two months. Bubble’s app connector, which can stitch together multiple apps via internal API, made this possible. We integrated Netlify using Bubble’s API connector to provide users with their own white-labeled domains.

From there, we focused on adapting our platform to the increasing demand of creator communities for decentralized content ownership and web3 features. At that point, our current CTO, Sassun Mirzakhan-Saky, had joined the team. He had a long track record in traditional code and had worked on numerous IT projects. This was a huge boost for our team, now four people, and opened up new possibilities in terms of technical capabilities.

Our team

“Bubble changed the trilemma of ‘scope vs. costs vs. speed’ which persists in traditional software development,» says Sassun.

You can break the no-code stack we used to expand into web3 down to three main components:

All this was built in only a fraction of the time it would have taken with a code-based approach.

Andrew Chu’s Bubble-built NFT marketplace, one2all.io, was also a big inspiration for LinksUp. “The goal of one2all was to prove that a fully functional NFT platform was possible in no-code without cutting any corners. In fact, we believe it will prove to be the lowest-cost and fastest way for anyone to build their own unique web3 vision today,” Andrew says.

The Future of No-Code and Web3

At LinksUp, we want to expand further into web3 since these are the features that excite our users most, and we see that the adoption of this new technology is rapidly increasing. We are convinced that having Bubble as the core of our no-code stack is a huge advantage.

We plan to use the skills we gained building LinksUp and our Bubble agency for our new venture idea, which will take the synergies between no-code and web3 to a new level. Ultimately, our main goal is actively helping and empowering founders.

You can find out more about LinksUp on Twitter or LinkedIn.

How To Build An eBay Clone Without Code

Learn how to create your own no-code auction site, using Bubble’s visual web editor.

Lachlan Kirkwood

Lachlan is a digital marketing specialist and passionate no-code maker.

More posts by Lachlan Kirkwood.

Lachlan Kirkwood

Finding a great buy online has never been easier. With well over a billion products listed on eBay, buyers and sellers from across the world can connect and exchange value.

Thankfully, finding a great no-code development tool is also now easier than ever. With Bubble’s visual programming application, makers from across the world can create their own form of software.

Our mission is to revolutionize how everyday makers can build software. Our powerful platform has made it easier than ever to start building software without having to write a single line of code. Our customers are using Bubble to build websites, directories, and even social networks.

Throughout this post, we’ll uncover the process of using Bubble to build your own no code, white-labeled version of eBay.

Whether you’re looking to build a dedicated marketplace, or you’re interested in utilizing some of the core features from eBay, this guide will share how to start building your own no code MVP.

Throughout this article, we’ll highlight how to build the following key features from eBay:

The steps to building eBay with no code include:

Get Started

To get started, you’ll need a Bubble account. Then you can follow along as we build our product together.

Register your account on Bubble

New to Bubble? Follow along on our Crash Course introductory videos to get familiar with the basics of Bubble.

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your eBay clone.

It’ll also be beneficial if you understand how to create and edit user accounts. We’ve previously covered this in more detail in our How to Build Quora article.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubbles visual design tool to shape the user-interface of our product. If you’re replicating a version of eBay, some of the core pages you’ll want to include are:

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, and dynamically display the relevant content from your database when it’s required.

In the case of your eBay clone, you’ll only need to create one page to host an individual product. Later in this post, we’ll explain how you can dynamically display a relevant product on this page only once it’s been selected.

Configure your database

Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When building our eBay MVP, we’ll need to create the following data types & fields:

Data type: Product

Fields:

Data type: User

Fields:

Building workflows

Now that you’ve structured both the design and database for your application, it’s time to start stitching everything together and making your product functional.

In Bubble, the main way to do this is with “workflows”. Each workflow happens when an “event” occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)

Listing a product for sale

One of the core features of eBay is the ability for users to list products for sale on the marketplace.

On your product listing page, you can start building this feature by using a combination of input fields, including free-text fields, image uploaders, and dropdown fields.

Once a user has added the relevant details for a product within each input, they’ll click the submit button to create a new entry in your database. This button click will be the necessary action to trigger your workflow.

Using the workflow editor, you can select to create a new thing within your database. In this instance, we’ll be creating a new product.

You’ll then need to start adding data to the relevant fields within your database. Map each input field you’d like to create against its corresponding data field.

Display products on your home page

Once you’ve started submitting products to the platform, you’re ready to display each item in a feed on the homepage. This can be achieved by utilizing our repeating group element.

Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type as a product.

You’ll also need to set the data source as a list of all the submitted products from your database.

As eBay’s home page is filtered by product categories, we’ll also add a dropdown element to our homepage, allowing users to view products by their relevant segments.

It’s also possible to integrate this dropdown menu as a data source for our repeating group, and only display products from our database that match the same category as the selected dropdown.

Simply add a new constraint to the data source of your repeating group. This constraint will filter the repeating group by the products that feature the same category as our dropdown menu’s selected value.

Once we’ve properly configured the data source of this repeating group, we can start structuring the dynamic content that will be displayed within each column. Simply map out the first column with the relevant content you’d like to show, and this powerful element will populate the remaining columns based on your existing data.

The content we’ll add to each column is a product’s title, the product’s image, and the product’s buy it now price.

Navigate between pages

When using a repeating group, it’s also possible to trigger events from the elements in each individual column.

This feature will become useful when building navigational features across your platform. As eBay’s homepage only showcases an overview of each product, you’ll want to display the full product details for each unique item on a separate page.

This additional content will need to be hosted on your individual product page.

To power this event, start by creating a workflow that redirects a user to your product page when an item’s image is clicked.

Select a navigation event to send a user to another page. From here, select the destination page to be the product page.

You’ll then need to send additional data to this page so the Bubble editor can identify which specific product to display. The data you’ll need to display is that of the current cell’s product.

Searching for products

From your homepage, it’s also possible for users to navigate to a specific product by integrating a search navigation element. A search bar is a powerful way to streamline the process of discovering particular products by their title.

Once you’ve added a search bar element to your home page, configure the data source as the product data type, along with the title data field. This will now index all of your database entries and even offer search suggestions as they’re typed.

From here, you can direct a user to the relevant product page by building a navigational workflow.

Start by creating a new event that is triggered when the value of an element is changed. The element we’ll be working off, is of course, your search bar.

Next, create another navigation event, setting the destination page as your product page. The data that will be sent is the search box’s current value.

Display dynamic content on a product’s page

When a user is directed to a specific product page, you can easily pull this event data from your workflow and display the relevant content.

Before we create this function, you’ll first need to ensure that the page type matches the data property that you’re sending through your workflow. In this case, you’ll need to set the product page to a product property.

You can now start adding dynamic content into your page elements to display the information from the product that has been sent in your workflow.

Bid on or purchase a product

Now that a user has landed on the page of a product they’d like to buy, it’s time to build our final core feature.

Across eBay, there’s two alternatives to purchasing products listed for sale. The first is to make a bid on a product, and the second is to pay a fixed price and buy it immediately.

We’ll cover both options, starting with the bidding alternative.

On the product page, we’ll use a text element to display the current product’s bidding price.

This text field will display the initial bidding price that a user originally added to their product. As a dynamic field, this will automatically update each time a higher bid is added.

To facilitate the bidding process, we’ll also add an input field and a bid button. Each time a user submits a bid, we’ll need to make changes to the current product’s bid price.

When the bid button is clicked, we’ll make changes to the current page’s product, then update the bid price and product bidder data fields.

Now whenever a new bid is added, our app will store a record of this price and who the current top bidder is.

If a user wishes to buy a product outright, however, we’ll need to create a separate workflow. This will follow a similar process to creating a regular checkout experience across any eCommerce platform in Bubble.

Below the product’s price, start designing a payment form where a user can add their payment details.

Using Bubble, it’s possible to harness the power of several plugins to easily accept payments and process orders.

In this guide, we’ll be using the Stripe.js plugin to process credit card payments through Stripe.

Note: After integrating this plugin, you’ll need to first configure your API keys within the plugin settings.

After configuring the plugin, you’ll need to add a Stripe token element next to your payment form.

This element won’t be visible to your end-users, but is essential to powering a new transaction in Stripe.

When the purchase button is clicked, we’ll then create a new workflow that triggers a Stripe payment.

You’ll begin by selecting the event ‘convert card into Stripetoken A’. Within this event, you’ll need to configure your input fields to match Stripes payment structure.

Once a card has been converted into a Stripe token, you’ll then need to create an additional workflow that automatically processes this token from a user’s bank account.

If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.

Additional features

Now that you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build within your marketplace. Additionally, you can:

Launch

Templates

If you don’t want to build your eBay clone from scratch, you can purchase one of the templates made by our community members. Some similar templates to eBay include:

Start Building

Bubble can help you build an eBay clone or any other product you choose! It’s never been easier to build something incredible without having to code.

To get started for free, sign up here.

You can also connect with other passionate makers building with Bubble on our community forum.

How To Build A Craigslist Clone Without Code

Learn how to create an online marketplace without coding, using Bubble’s visual web editor.

Lachlan Kirkwood

Lachlan is a digital marketing specialist and passionate no-code maker.

More posts by Lachlan Kirkwood.

Lachlan Kirkwood

If you’re looking to buy or sell just about anything under the sun, Craigslist is a good place to start your search.

If you’re looking to build just about any piece of software, Bubble has become the best place to start for makers of all backgrounds. Our powerful no-code platform has made it easier than ever to start building software with little experience. Our customers are using Bubble to build websites, directories, and even social networks.

Throughout this guide, we’ll walk through the process of using Bubble to build your own no code white-labeled version of Craigslist.

Whether you’re looking to build a dedicated marketplace, or you’re just interested in utilizing some of the core features from Craigslist, this guide will share how to start building the underlying logic for a no-code MVP.

This tutorial will explain the process of building the following core features:

The steps to building Craigslist with no code include:

Get Started

Register your account on Bubble

New to Bubble? Follow along on our Crash Course introductory videos to get familiar with the basics of Bubble.

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your Craigslist clone.

It’ll also be beneficial if you understand how to create and edit user accounts. We’ve previously covered this in more detail in our How to Build Quora article.

When kickstarting your project, you can choose to begin by wireframing your product design or building the necessary fields within your database.

In this case, we’ll start by using Bubbles visual design tool to shape the user-interface of our product. If you’re building your own version of Craigslist, some of the core pages you’ll want to include are:

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your Craigslist clone, you’ll only need to create one page to host your individual ad listings. We can then write the necessary logic to display only the relevant listing on each page when it’s needed (we’ll cover this in more detail soon).

Configure your database

Once you’ve mapped out the UI of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the logic behind your product.

Creating a database in Bubble is a seamless process. Start by listing your top-level data types, then add the necessary fields within each category.

When building a no-code Craigslist MVP, we’ll need to create the following data types & fields:

Data type: User

Data fields:

Data type: Listing

Data fields:

Data type: Category

Data fields:

Building workflows

Now that you’ve structured both the design and database for your application, it’s time to start stitching everything together and making your product functional.

In Bubble, the main way to do this is with “workflows”. Each workflow happens when an “event” occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)

Creating and publishing new ad listings

One of the core features to Craigslist is the function to create user-generated ad listings.

To build this feature, we’ll add a combination of input elements to build a submission form on our create listing page.

For the sake of our MVP, this page will include some basic details like a title, a featured image, a description, and a category.

In order to select a category from the dropdown, we’ll need to configure this element to integrate with our database.

By properly configuring this dropdown, it will now add any new ad listings into their relevant categories. This will come in handy later on.

When a user has completed this form, we’ll start building a workflow that creates a new listing once the create button is clicked.

In this workflow, we’ll want to create a new thing within our database.

You’ll then need to start adding data to the relevant fields within your database. Map each input field you’d like to create against its corresponding data field.

Building your homepage

Once your community has started publishing ad listings, you’ll now need to build a home page to filter these by their categories.

Using a repeating group element, we’ll create a list of the current categories throughout our marketplace. As repeating groups integrate with your database, it will display all of the current categories that have been created.

When using a repeating group, you’ll need to first link the element to a data source from our database. In this instance, you’ll classify the source as categories.

Once we’ve configured the data source of the repeating group, you can begin mapping out the dynamic content that will display in each row. Simply add an element into the top row of the repeating group, then this element will automatically populate the remaining rows.

Within your repeating group, it’s also possible to create events based on the individual content within each row. You’ll use this feature when you start building navigational features throughout your marketplace.

Sending data between pages

When a user clicks on a selected category, we’ll need to redirect them to a new page, displaying a list of all the relevant listings within this chosen category.

When building this feature, we’ll start by creating a separate page called categories search results. This page will include a repeating group used to display the full array of our relevant ad listings.

Finally, we’ll configure the data source of our repeating group. In this instance, we’ll only want to display the listings that are included in the current page’s category.

Once this data source has been configured, you’re ready to start structuring the dynamic content that will be displayed within this grid.

Now that we’ve finished building this page, we can create the workflow that will navigate users between the home page and the list of ads within each category.

From our homepage, we’ll then need to create a new workflow when a category’s title is selected.

From here, select the destination page to be the category search results page. Throughout this workflow, you’ll also want to send the data of the current cells category. By sending this data, the repeating group on our results page will now have a point of reference.

Navigate through a search function

An alternative way to discover ads on Craigslist is by using the search function on the homepage. With thousands of ad listings across the platform, users may want to search for relevant listings by their keywords, not their categories. This will help streamline the experience of sourcing a particular listing.

Before we build the workflow to support this feature, we’ll once again need to create a separate search results page. As the design of this page will remain the same as our categories search results page, you can replicate this existing page.

As the content we’ll be displaying on our new results page is specifically for ad listings, we’ll also need to update the page type from categories to listings.

After building this page, head back to the home page and add a text input element as a search field.

From here, we’ll create a new workflow on the page when an element’s value is changed. The element will, of course, be the text input field.

As we’ll need to add a unique search query to our URL string, we won’t be sending a user to a page with this workflow, but will instead be opening an external website. This will allow us to customize the URL path between pages.

The URL we’ll be sending the user to will be the current website’s home URL + the URL of our search results page + the dynamic query value from our text input field.

Now, on our dedicated search results page, we’ll update the data source of the repeating group to fetch the query being sent between pages.

Finally, you’ll be prompted to select which field of the URL you’ll pull data from. Simply choose to get data from the URL path, not the parameter.

This will now display any ad listing where the title field matches an instance of the specific keyword being searched.

Navigate to an individual ad listing page

Once you’ve finished building both of the search result pages, we’ll build the final navigation feature that sends a user to an individual ad listing once they click on a specific card.

Within a repeating group, it’s possible to create events within each individual row. For this function, we’ll create a new workflow when a listing’s image is clicked.

Throughout the workflow, we’ll opt to send a user to a page. The page we’ll be sending them to is the listing page. We’ll also need to send the data of the current cell’s listing.

Dynamically displaying the content of an individual listing

Once a user has been redirected to a specific listing page, you can easily pull this event data from your workflow and display the relevant content.

On the destination page, you’ll need to configure the page type to be a listing.

From here, you can then start adding dynamic content into your page elements, displaying the information from the unique listing that has been sent in your workflow.

Contacting ad creators

The final feature we’ll build in our MVP is a function to send an email enquiry to the user who has created an ad listing.

Using Bubble, there’s a number of ways to build this feature. For the sake of our MVP, we’ll use a simple solution.

By creating a workflow when the reply button has been clicked, we’ll choose to open an external website.

We’ll configure the external URL as a MailTo address for the ad listing creator’s email.

Additional features

After building the core features for your MVP, you’ll become familiar with the process of creating custom data fields and displaying dynamic content.

If you’d like to continue adding additional features to your marketplace, you could also consider:

Launch

Templates

If you don’t want to build your Craigslist clone from scratch, you can purchase one of the templates made by our active community members. Some relevant templates include:

Start Building

Bubble can help you build a Craigslist clone or any other product you choose! It’s never been easier to build something incredible without having to code.

To get started for free, sign up here.

You can also connect with other passionate makers building with Bubble on our community forum.