Bubble.io Tutorial – Step by Step Guide

I’ve recently been interested in web development approaches other than HTML, CSS, and JavaScript.

With the growing no-code landscape, it wasn’t surprising to discover that there are several alternatives to the more standard approaches for developing web applications.

You must be familiar with some of the more well-known CMS platforms, such as WordPress that are pretty much code-free. But, if you want to build web apps, such platforms may seem restrictive.

Here I introduce you to Bubble.io, a powerful no-code tool that lets you build web apps like never before.

Let’s explore it in-depth!

What is Bubble.io?

Bubble is a non-technical platform that combines a visual programming language and a web development framework.

Users can use these programming tools to construct unique online applications, alter databases and processes, add page components (images, text, input forms, maps), and design their interfaces.

It’s a marketplace where you can discover ideal templates, plugins, and services to help you in building strong products.

Without having to set up a typical programming framework, you can create anything from a marketplace to a social network to a CRM (Customer Relationship Management) using Bubble.

It gives customers the ability to create and personalize their apps using a user-friendly interface and a point-and-click editor.

You can use it in conjunction with services that provide a REST API, such as Facebook, SQL, analytics, and payment apps. It enables users to devote time to improving the functionality and appearance of their applications so that they look well on tablets and mobile devices.

It is appropriate for all business sizes, from small to medium to large; and accessible for Windows, Mac, and the web.

What is visual programming?

Visual programming is essentially what it sounds like. Instead of manually programming by writing code, you do it graphically by clicking and dragging components into pages.

Don’t be misled by that short description.

It is not like any other cookie-cutter app or website-building tool you’ve come across online. Most app builders require you to rely on basic templates and have extremely limited functionality; they only allow you to develop specific sorts of apps and limit your personalization.

Although the notion of “visual programming” and “dragging and dropping” appears easy in Bubble, it is tremendously powerful.

Its visual programming environment not only allows you to drag objects such as text, graphics, inputs, and more onto a page, but it also allows you to configure what those elements do.

What does Bubble do?

Bubble’s primary goal is to enable anybody to create web apps without having to write code.

However, while this provides for an easily remembered goal statement, it leaves out a significant bit of the tale. The path from idea to market is more complicated than just creating lines of code.

A team of highly trained professionals working on certain sections of the app’s creation, growth, and maintenance is required in conventional development. Consider this.

What does every app require?

• Security to make sure that no one has unauthorized access to data.
• A database for storing and retrieving information such as items, articles, and social media updates.
• Scalability to enable the unhindered development of the user base and data volume.
• A pleasant user interface to make the app attractive and easy to use.
• Integration with various services and systems.

Bubble replaces far more than a coder. It provides all of these services in a visually appealing and highly automated manner, making it conceivable, if not simple, for a single person to handle everything.

While previous no-code platforms have tried to replace coding in various ways. Its concept is to remove as many barriers as possible for an app to reach the market, handling everything from responsive design and animations to hosting, version deployment, security, and database operations.

Using the API connector to connect Bubble to other services

Its API Connector is likely the most important plugin on the market. As the name implies, this allows you to connect to other apps and services to share actions and data.

Rather than delving into the technical specifics of how this works, consider these examples of what APIs might accomplish:

• Obtaining access to machine learning methods such as image recognition and translation.
• Get the most recent weather information from anywhere on the earth.
• When an event is triggered in Bubble, information is exchanged across systems, such as establishing a lead in your CRM or an appointment in your Google Calendar.
• Book a flight or a hotel stay anywhere in the globe.
• Get the phone number, location, photographs, logo, and reviews for any company on Google Maps.

Using plugins to enhance native features

Technically, it mixes JavaScript code modules, CSS, and HTML into a functional node. Application written in JS.JSON serves as the foundation for its own language.

While you don’t need to fully understand those terminology to construct apps, they do indicate one key fact: it adheres to known and acknowledged web standards, allowing developers to enhance its native functionality considerably.

This is already seen on the plugin site, where hundreds of free and paid extensions to the basic functionality are available. It also implies that if you reach a point when its fundamental capabilities are insufficient, there are plenty of JavaScript experts willing to put up a bespoke solution for you.

What types of apps can you develop?

You can create a wide range of applications, some of which are given below.

• Apps for specialized markets with a community.
• Apps for job boards in a variety of sectors.
• Software for hospital staffing.
• Point-of-sale software for physical stores.
• Dental office software with a white label.
• Personal business inventory and customer service software.
• Broker and client-facing real estate aggregation applications.
• Apps for events and courses on the market (and even boats).
• Professional certificates require internal testing applications.
• Applications for first responders.
• Employee management software for internal use.

To be honest, the platform isn’t designed to do everything. It might not be the ideal choice if you’re designing a game app with complex visuals and motion. Besides, if you’re creating a native app (one for app stores), you’ll need to integrate it with another third-party service.

Key features

Bubble is jam-packed with features. We won’t be able to cover them all here, but we’ll try to cover the most essential ones.

1. Plugins

It allows you to include functionality from numerous tools on the Internet into your web application. For example, if you want your users to log in using their Facebook account, you can use the Facebook plugin to do this.

2. Develop

It allows you to construct dynamic, multi-user apps for desktop and mobile web browsers, as well as all of the tools required to build a site similar to Instagram or Airbnb.

3. Design

You can create mobile-friendly layouts and dynamic content to give the finishing touches to a product that you’ll be glad to show off to others.

4. Hosting

Never have to be concerned about server upkeep, infrastructure, or operations again and again.

It takes care of deployment and hosting for you in a safe and secure manner. The number of users, traffic volume, and data storage are all unrestricted.

Building an app with Bubble (Tutorial)

Let’s now get into action and explore how you can build a news app on Bubble.

1. Getting started

To begin, you must first register for a free account on Bubble.

We’ll start by using Bubble’s visual design tool to shape our platform’s user interface. Some of the key pages to include are given below:

• Upload page – A website where publishers will develop and distribute articles.
• Home page – A list of recently published stories is displayed.
• Narrative page – A page where each unique story can be found.
• Publisher page- A page to displays a list of tales from a certain publisher.

2. Configuring database

After you’ve laid out your product’s display, you can focus on building the data fields that will fuel your application. We’ll use these fields to link the workflows underlying your product.

For this example, we’ll establish two distinct data types for each news piece. One data type will contain the basic facts of a story (such as the title, featured picture, and publisher), while the other data type will contain bigger content files such as the whole narrative itself.

By defining them as discrete data types, we can only load the information that is required when it is required, limiting the amount of material that the Bubble editor will need to produce.

The following data types and fields will be created:

Data type: User

Fields:

• Name
• The following publishers are a list of publishers. Important note: Creating a field as a list based on a distinct data type allows you to incorporate all of its essential data fields effortlessly without having to create extra fields.

Data type: Story

Fields:

• Title
• Featured image
• Writer
• Category
• Publisher
• Story content

Data type: Story content

Fields:

• Story content

Data type: Publisher

Fields:

• Name
• Logo
• Followers

3. Building workflows

Now that you’ve organized your application’s design and database, it’s time to start putting everything together and making it work.

Workflows are the primary method for accomplishing this in Bubble.

Each workflow occurs when an event occurs (e.g., a user clicks a button) and then performs a sequence of “actions” in response (e.g., “sign the user up,” “make a change to the database,” and so on).

4. Creating a news story

The first feature we’ll offer is a tool that allows publishers to write and post news pieces to the site.

On the upload page, we’ll begin by incorporating a lot of input items that will be applied to entering data into our database. Text inputs, a picture uploader, and a dropdown selection are examples of these fields.

We’ll also need to customize the publisher dropdown menu to display a list of dynamic options. Since each new article will be added to a publisher’s list of total articles, we’ll need to choose an existing publisher from our database.

When setting this dropdown menu, we’ll pick the type of options to be a publisher.

Following that, our data source will scan our database and return a list of all current publications. Finally, we’ll change the source caption to include the publisher’s name.

Once a writer has entered the necessary information into each on-page entry, they will click the publish button to generate a new tale.

Then, within your database, you’ll create a new thing with the data type set to narrative.

Then we’ll need to begin populating our database with the necessary fields. Connect each of the on-page input components to their respective database columns.

First, we’ll create the story content type, which will finally be linked to the tale itself.

Next, we’ll add another stage to this procedure, generating something else – this time, the tale itself.

It is possible to integrate this data effortlessly throughout your platform by integrating the first narrative material we developed with this tale.

A new tale will be produced each time this procedure is activated.

5. Displaying dynamic content in the feed

Once publishers start uploading material to your mobile app, we’ll need to start creating the logic on your homepage that shows each article as a dynamic list. This can be accomplished by employing our repeating group element.

Repeating groups work with your database to present and refresh a list of dynamic material.

When applying a repeating group, you must first link the element to a data type in your database.

In this case, you’ll categorize the sort of material as tales. You’ll also need to provide the data source as a list of all the tables in your database.

We’ll also arrange this recurring group by each story’s start date, showing the list in reverse chronological order. You can now begin organizing the dynamic material that will appear within each grid.

Simply fill in the top row with the appropriate material you want to display, and this powerful element will populate the remaining columns with data from your current database.

6. Sending data between pages

It is also possible to construct events within each row of a repeating group. When developing navigational features for your platform, this functionality will come in handy.

Our news app’s homepage merely shows a preview of each story, including the publisher, a featured image, and the story title.

However, it does not display the entire content of an article until the user clicks through to the story page. We’ll use our workflow editor to transmit data between pages to display this material.

To begin, create a process that sends a user to the story page when the picture of a story is clicked.

Use a navigation event to transfer a user to another page while developing this process.

Choose the destination page type to be the narrative page from the drop-down menu. You’ll then need to give further information to this page so that the Bubble editor understands which unique tale to show.

The information you’ll need to give comes from the current cells tale.

7. Displaying dynamic content on the story page

You can easily retrieve this event data and show the relevant material from the narrative when a user is sent to a certain story page.

To create this function, you must first check that the target page type matches the data property that you’re delivering through the workflow. In this situation, you must associate the story page with a story property.

It can simply pull and deliver appropriate data from existing sources by categorizing the type of content on a page.

You can now begin inserting dynamic material into fields that display information from a single table.

8. Displaying the publisher’s article

After reading a news item, a user can choose to examine the publisher’s entire catalog of articles. If you have developed a publisher data type, creating a separate page for publishers is as simple as creating our original home page.

On this page, we’ll need to begin by setting the page type to publisher.

Then, copy the repeating group from the home page and edit the settings.

In this case, our repeating group’s data source will look for all existing articles whose publisher is the current page publisher.

9. Following publishers

The third fundamental feature we’ll build for our MVP is the ability to follow a publisher on the platform. We’ll add a follow button on the publisher page. When we click this icon, we’ll launch a new process that modifies a thing.

Adding the current page publisher to their list of following publications will change the current user.

Following that, we’ll need to update the current page publisher’s list of followers by adding the current user.

10. Additional features you can add

Now that you’re comfortable with building custom data fields and presenting dynamic information, you can get creative with the experiences you create for your product. You can also include:

• Create a feature that allows users to save content for later reading.
• At the bottom of each piece, provide a recurring collection of suggested articles.
• Create a search tool to help people find fresh content on the site.

11. The result

Your final app will look something like this.

Pros

• The ability to connect to many APIs and plugins.
• An easy-to-use, no-code application.
• People with no programming experience will benefit from this.
• Design tools that are both versatile and powerful.
• Quick query processing.

Cons

• Increased dependability.
• Data processing speed is slow.
• Performance is constrained.

Pricing

The free plan allows you to learn about the platform and develop your application.

Paid subscriptions include extras like white-labeling, a custom domain, access to the Bubble API, and reserved server capacity, which are listed below.

• Personal – $25/month (paid annually) or $29/month (paid monthly).
• Professional – $115/month (paid annually) or $129/month (paid monthly).
• Production – $475/month (paid annually) or $529/month (paid monthly).

Get Started with Bubble for Free

Conclusion

Bubble is an excellent alternative for building web applications that can only show information or have a minimal UI.

It is quite simple to use, and the tutorials provided by Bubble are extremely helpful. Its online visual editor that allows you to design web apps based on your preferences.

And the best part is you don’t need any programming experience or expertise. Bubble is appropriate for everyone, regardless of whether you know how to code or not.

However, prior understanding of frontend languages can give you an edge because it allows you to quickly figure out what it is doing regarding event handling.

So, what do you think about Bubble’s capabilities?

Let us know in the comments!