Discover the power of Bubble.io! How to build app in Bubble? Video tutorial

I'm Kamil Tarczyński and welcome to the next episode of Just No Code. Today we will talk about...

‍

Exploring Various Platforms

‍
Platforms we talk about so much. We will make a small short series in which we will introduce you to what platforms look like, which we are talking about, how you can use them, what functions they offer. They will be such knowledge about each of the individual platforms. The series will contain episodes about platforms such as...

‍

Deep Dive into Bubble.io

‍
How the platforms work, what functions they offer and what we can build in them and how the work looks directly with them. Without further ado, today's episode will be about the Bubble.io platform, so I invite you very warmly. As you can see, we are already in our editor.

‍

The Editor's Role in Application Development

‍
I won't show you the dashboard itself because there is not much to show. First of all, secondly, of course, we have there projects of customers with which we can not fully boast publicly and show them all. Hence, I just show you directly how the platform looks inside, how the editor itself looks, because this is also the heart of this application.

‍

Navigating the Bubble.io Interface

‍
In which we are building the application interface. As you can see on the left side here, we have various tabs. Currently, we are in the C Design tab, where we are creating the whole design of our application. We also have the Workflow tab, where we create workflows. We have the Data tab, in which we manage our entire database. We have the Style tab, in which we define styles.

‍

Functionality and Customization in Bubble.io

‍
All the elements that are in the design. We have a plugin tab, with which we can add different functionalities, expand this basic functionality of Bubble. We have a settings tab, from which we can change the settings of our platform. We also have a logs tab, where we can view how our server is used,

‍

Getting Started with Bubble.io

‍
The place where all the work, some tasks that are scheduled for one day later, planned for one day later, what are the tasks, how many are there, etc. Let's start with this editor. I will not go into all the functionality of Bubble, because we have our free training from which you can get acquainted on our website, on our academy, up2u.pl. There is such a three-hour free Bubble training, which is just doing such an introduction

‍

Page Settings and Layout Management

‍
To create the first application for managing tasks, so we go deeper there. Today I want to show you how this platform works. So as you can see, here we have our white paper card, where we can double-click to change a few settings regarding our page, such as page title, whether it has a type of content, we'll get to that in a moment, we can give it some style or attributes, and some different settings for SEO.

‍

CSS and Front-End Development in Bubble.io

‍
We can also manage it with a layout, i.e. what kind of container should have a layout, whether it will be a column or a row. For those who design applications, know CSS, they know what it is, that it just corresponds to how the elements are arranged, whether they are arranged in a row or in a column. It is taken from CSS, because the whole bubble is based on CSS Grid.

‍

Customizing Interface Elements

‍
Simply by applying the following elements here we create the HTMLC code below here I will not go into it exactly and we have here various conditions, i.e. conditional behavior, conditional formatting or conditional display or things like that touch particular elements and as you can see here also on the left we have the whole menu where we can just these various visual elements which are responsible for the visualization of these elements we can apply to our platform

‍

Building a User-Friendly Interface

‍
If I want to add some header, I take a group, because group is just some div. Again, this is knowledge for those who use it on a daily basis.

‍
I'm programming some front-end and so on. As you can see, we have the first div. I can say that it is the first element on our page. I want to say that it has some other color. So I just change it. I'm clicking this interface here. And what I would like to pay attention to here is how easy this whole interface can be built. Because as you can see, I create new elements, I drag them to the page, I adapt them to the editor, I can see everything right away, how it all looks like. Thanks to this, I have much better control over how my application will look like, what will happen in it, where and what element will be visible, how they will be arranged on the whole page. In the traditional approach, it looks completely different,

‍

Traditional Coding Versus Visual Development

‍
We need to write the code first, then run the code to see how it will look like. As you can see here, I click everything, I put the next elements on the page and I can see how they look and how they present themselves. As you can see, I'm creating a small welcome page.

‍

Designing a Welcome Page

‍
Let's say it's a very large bar, here applied. I would like, of course, to have the width to what this element contains. Welcome page, and here we add some button that will allow us to start some first workflow. Let's call it start.

Building and Previewing Your First Page

‍
And you see, I built some first page. We also have a magic preview button here, with which I can immediately see how it will look in the browser, not directly in the editor, but strictly in our browser. It will look like this. Here you see, we have a debugger with which we can debug what is happening in our application. We can turn off this debugger by simply removing this parameter, debug mode equals true we can just delete it, click on version test and as you can see at this moment this is how our application looks like of course there are very few elements on it we can add more elements all that we have here on our website we will get to all of this in a moment however, one more thing I would like to draw your attention to because here you see you have a responsive button with which you can also immediately see how the page will behave on responsive settings.

‍

Designing for Different Screen Sizes

‍
As you can see, at a width of 318 pixels, it's starting to spread a bit, but in fact, most of the phones that are now produced, even 95% of the phones that are currently produced, have a minimum resolution of 365 pixels. So let's see how it would look like with 365 pixels, well, it's already pressed, but it still works. So here we can create and edit all this, our first page to look like.

‍

Adding Workflows and Actions

‍
As you can see, it's quite simple. However, of course, something should also be happening in our applications. And let's say I want to add some workflow here. If someone clicks the button, then I click on this double button, click Add Workflow. As you can see, at this point I am transferred to the Workflow tab, where when I click Start, I can do some different actions here.

‍

Exploring Workflow Triggers and Actions

‍
User's data. Can I create something based on data, modify, delete or upload from the CSV file? Can I send an email? Can I make some payments, analytics, hide some elements, show? Let's say I want to hide a header on this button, I hide it in group A, because I can do it, for example. And now, when I do a preview of this application. I will be able to see how it works. When I click start, the header should disappear. I click start and you see the element. The action I had in the workflow was made.

‍

Triggering External Website

‍
Let's say that I want to open an external website which is our website havenocode.io and let's see how it will work now I would like it to open in a new tab so I will mark this checkbox here and here you go I click on Start

‍

Data Management and User Authorization

‍
We always have a data type at the very beginning called user which stores all user information and serves us to authorize these users. Of course, Bubble as a web application allows us to use various authorization providers. We can also build authorizations using some external solutions, but Bubble also offers such a service. Of course, by clicking Create New Field here, we create new fields in this datatype and we also have to indicate its name, for example, first name and indicate what type of data this field contains, whether it will be text, number, date, date or numbers or whatever else. I click on text and we have created our database. We also have the Privacy tab, which this tab serves to manage user access to various types of data.

‍

User Access and Privacy Settings

‍
This is the heart when it comes to managing user access to data, to what types of data it has access to, to which fields and on what rules. Basically, as you can see, for example, to be able to read the user. This user is current user, so the user we want to read the data to must be the current user then he has access to everything so this is the rule of user-owned data, so I can read my own data while all others who are in the application they can't do it of course this is an unambiguous setting that we can change because some applications must have other accesses, here we can define these roles we can change it, configure it as to simply meet our specific needs.

‍

Styling and Plugins for Enhanced Functionality

‍
Next we have the Styles tab. Of course, each of our elements, these elements of different types, such as buttons, groups, inputs, etc. They can take on different styles that are repeated throughout our application. So, in order not to define each time what a given button should look like, what a given group should look like or anything else, from the central point, and not on every single element, it would simply take a lot of time. We also have a Plugins tab, in which we can add, expand these Bubble functions for further possibilities. And as you can see, for example, in this application I have an added API Connector, which allows us to integrate Bubble environments with various third-party providers.

As long as we have some APIs, we can simply integrate them into Bubble and then it is directly implemented in our platform, we can also add such functionality, which are already played by various other developers. For example, as you can see here, I added Stripe, it is a plugin created by Bubble himself. So as not to have to implement Stripe, because so many users use it, that Bubble decided to build a Stripe plugin, thanks to which you will be able to use it directly in the application. And when we have such an integration done, I have all these Stripe actions created, available and I can directly use them. So, for example, I want to create a new one for some user, a current user. I need to indicate some data here that this method requires and I can use it directly in this application.

Application Settings and Management

‍
Next, we have settings where we manage the plan of our application. We have information about the name of our application, whether it is hidden behind some password, various settings, for example, favicon, API for Google Map, Google Geocode, various apps on iOS, color palette, information about domains, e-mails. Multilanguage, where we can also implement Multilanguage in Bubble, we will define how it is to be translated, how it is to function exactly, how we want to translate certain phrases in a given language. We have various settings regarding SEO, the whole of the application, as well as individual pages. Settings regarding API.

‍

Backend and API Management

‍
Bubble as a platform allows us to create frontend, but also allows us to create backend, allows us to create endpoints that will be displayed, for example, as public endpoints that will require authorization or not, it will of course depend on us. We can turn them on here, then we have a link with our domain. Thanks to this, we will be able to create backend workflows from this level, which will be new API workflows, as you can see, available directly under this link. We can say whether it is a post or a get, what is going to happen there exactly, but we also have data API, so here we have all the methods where if we have created some data type, we can also manage it through this data API. Get, post, patch, updates, deletes, all these methods will be then on those of our marked as you can see we can mark them. Enable data API, we have that we can manage objects with a Data Type called Contact.

‍

Collaboration and Application Management

‍
Here we can add other collaborators, our coworkers, who will also have the opportunity to modify this application. We can connect several applications in one environment. We also have the possibility of connecting directly to MSSQL, or to some simple SQLs, not only MSSQL. And here we can also manage features or new version of Bubble.

‍

Version Control and Feature Updates

‍
New features, new versions of this platform, so we can manage it here. Because of course, a big danger would be that Bubble introduces some new functions that may be incompatible with our application, and we did not test it, it was automatically implemented, it ruined our application. Yes, it is not. We have full control over it here, Bubble says, okay, here is a new version, check it out, you can upgrade, test if it all works, what would you like it to work, and then you can only let it go.

‍

Resource Utilization and Optimization

‍
So as you can see, the ability to manage these applications is really wide, complex and allows for a lot. And the last tab, last but not least, these are the logs where we see the use of the resources of our application, what these resources actually use, thanks to which we are able to optimize our application over time, because we see what things take the most resources to our server, what exactly is happening there, when, how, so we will be able to optimize it, of course, in this application too much will not work, as you can see, so there is nothing to analyze here, but such an opportunity... We have? We also have a Logi server, so we can look at it.

‍

Analyzing Server Logs

‍
What was happening in our environment, in the developer or live environment for example, let's take 10 minutes ago what was happening in this time frame nothing was happening, here we can mark what we would like to see what kind of things you see, there is a lot of it these logs are very precise and show us everything. There was no server action, I clicked something, but it did not have much impact. And of course we have a scheduler where nothing will be, because we did not schedule any workflows to be done in some later time, only it all happened continuously. So in this way, we can actually manage our application, we can create other pages here, because of course we have an index, a page for resetting the password, page 404.

‍

‍

Deploying the Application

‍
Which are always in our application. We can add more if we need to. And when we are ready, we click here, we click Deploy to Live, we click Continue, we have some issues, so we can't let our Live application go. Bubble doesn't allow it. You see, I've already got rid of the issues. So I click Deploy to Live, Test, Deploy. And now I click confirm and we have the first published application under this link.

‍

Bubble io. - Conclusion

So, as you can see, using Bubble is very interesting, very complex. This platform allows us to do a lot of things. So I hope that thanks to this video you have some kind of a look, I'll give you a look at how this platform works, how to use it, what can be done in it. And here, what can be done in it. As you can see, it is a complex platform, so flexible or so generalized web applications, from CRM, through job boards, through listings, through fintech applications, through medtech applications, really here we are only kept by imagination and some legal regulations about what we want to build. Anyway, if you go to our website, havenowcode.io, the site of Case Studies, you will see what kind of applications we have built, that really because the very interesting thing is that even if Bubble does not offer us any specific functionality, any specific possibility, we have the possibility of adding our own code, which means that we can then build what we like and simply expand the functionality of Bubble. So that's it from me in today's episode, thank you very much for participating, I hope it was helpful for you, that's it from me, bye!