Welcome to my ultimate beginner's guide to Bubble.io. I'm Matt, I'm a Bubble developer, Bubble educator, Bubble coach. And in this video, I'm going to be going through basically all of the panels in Bubble, all of the different tabs that you can flick through when building a web app. And I'll be talking about my tips, tricks, basically what you can do, what you can't do. So, strap in, this might be a slightly long one, but I'm wanting it to be really comprehensive this is my ultimate beginner's guide to Bubble.

Why no code development with Bubble

Bubble.io is a fantastic web app development tool so if you have an idea for an MVP or a SaaS app and you're not from a coding background you're just like me and you came across Bubble because you are looking for a way to turn your idea into reality and maybe try and make some money along the side. So let's dive right in. I basically have got a fresh Bubble app created here and I'm just going to go through each of these tabs and give a few demonstrations as I go.

Design tab - UI & content layout

We're going to start here in Design. I've got a blank page here. You can swap between the pages by using the page menu up here in the top left and you can create new pages. When it comes to pages, a lot of people I've worked with recently as a Bubble Coach, they've decided to make one-page apps and that is basically by showing and hiding content on a page, they're giving the user the impression that they're going between different screens, but actually if you were to look at the URL they're not going from like a website point of view between different pages. That can have its advantages, it can make the app appear quicker, however the disadvantages are that you end up with a lot of elements on the page, it can slow down your development time because basically things get really cluttered.

But let's just focus on this index page and put a few containers, a few groups in place so that you can get bit of a flavor of how we can design in Bubble. Because Bubble covers everything. We've got design, we've got workflows, we've got data, plug-in settings, but everything you need to create and deploy a web app is included in Bubble. You don't need to necessarily integrate it with other services. It's an all-in-one web app development solution.

So I've got my index page here, and the And the first thing we're going to do is change the container layout to column. And that's because columns and rows, when Bubble takes what you build visually and it converts into HTML and CSS, columns and rows is basically the web standard for laying out content on a page. Fixed is going to appear really quick for me as the designer, but it's going to cause real headaches later on when it comes to trying to make my design responsive. like I say, Bubble is amazing at designing web apps and that can be web apps on large screens, small screens, even mobile screens. Do check out some other videos of mine where I look at other strengths and weaknesses of Bubble because one of the weaknesses I would say is that there isn't an amazing or even good way of converting a Bubble app into a native mobile app. I think Bubble is not for you if the majority of your use is going to be native mobile apps. That's not to say that some people haven't had success with native mobile apps, but check out my videos about Bubble limitations, Bubble weaknesses to find out more about that.

So I'm going to add in and just gradually style something. So let's put in a header here so that it really stands out. I'm going to make the background color red, and I want it to be width 100%. So again, I need to change the container layout. I'm change this in fact to a row and say width 100% and then I'm going to use some padding because I... let's add in an icon. So I'm going to use an icon as a logo here. For some reason a bell. I'm going to position this in the middle but it's a little bit too close to the left-hand side, so I'm going to add padding to its parent. And then I'll add in some text. I'll call this "My App". Center that. And then I might want to start adding in some links up here. So I could call this "Dashboard". I'm not bothering to style and settings. Okay, now what do I do if I want my dashboard and settings to be aligned to the left and I want my logo and app name aligned? No, wrong way around.

Building a header bar

What do I do if I want the the bell icon and the name of my app to be aligned left and I want my links to be aligned to the right? Well, to do that I need to group them. So I'm clicking on both and holding shift and then right-clicking and going group and I'm going to group these into a row and I'm going to do the same over here right-click and group into a row and then set the row to fit to content. Let's go to the same here, fit width to content and then I go on to the parent, this is my red group and I say container alignment space between. Let's preview that. You can see that I have my logo 'App aligned left' and my navigation 'Aligned right'. One last thing I'm going to show you on design, just a quick tip for laying out content, what do I want to add in two columns below here? So I'm going to add in a row, make this a hundred percent width. 100% width is a great trick for ensuring that things naturally lean towards the responsive side as you design. So I use 100% width a lot because it means that I'm not putting in values. I could have like, I could be six elements deep in my element tree in order to get the layout that I want. And if I've got just a series of numerical fixed pixel values in there, when it comes to making it responsive, I just have to go and hunt them all down. Whereas if I make stuff 100% width, it's kind of delegating the width up. In this case the width is actually set by the width of the page. But let's add in two groups here. So make this a column and then I'm going to copy and paste it. And so how would I make these two equally sized columns? Well, I will take off the fixed width, make this something like 100 which is much lower, and then do the same here. And now I've got two columns in my layout. So that's the design.

That is a very quick overview of how to lay elements out in Bubble using rows and columns. Now we've got other videos. If you head over to our website, planetnocode.com, you'll find exclusive videos only available to our members where we cover things such as design and layout. And so you can find out more details there.

Workflows

Let's move on to workflows. So to demonstrate workflows, I'm going to add in another page and I'll call this page 'dashboard'. And there's two main ways in Bubble that I can get to dashboard, not from my reset password, from my index page. One would be because I've added in a link element here and so I can say link destination is internal page and is dashboard. And And now that's all set to go. And that is an actual HTML link that's placed in the page. And that's important if the content of your Bubble app needs to be built with search engine optimization, SEO, in mind. So that's if you've got a lot of public content. If you're building a Bubble app where, you know, it's an internal business app, and actually all of the, the majority of your app is going to be for logged in users only, then you don't need to worry about SEO so much. So that's one way to do it using a link element. The other way would be if I just add in a button. And so how would I make this button link through to my dashboard page when I add in a workflow?

And when I'm in the Bubble Design tab, I can click on an element, even like a group, and I can say Add Workflow. So I'm going to click on this button and say Add Workflow. And then I go and it swaps me into the Workflow tab and it adds in a workflow block here, which is button A is clicked. That's my button. And I can say when button A is clicked, navigate, go to page dashboard. But let's take a moment to have a look at a few of the other things you can do. You can do a series of things to current user. For example, you can log them in, sign them up, you can update passwords, you can set up magic links. That's all built into Bubble. They've looked at navigation, refresh the page, go to previous page, go to external pages, add in pauses, terminate this workflow.

Data

We then got data. This is probably one that you'll find yourself using a lot because this is where you can create a new thing. So if we've got a data type, we'll pause database, we're coming onto that in only a few seconds. but you've got how to create things and make changes to things and delete things, including delete a list of things, a copy list of things, that's all set up in there. Send email, Bubble has that functionality built in to send emails to your users. Payment, that's blank at the moment because I don't have a Stripe plugin, or in fact the Stripe plugin created by Bubble. If I install that plugin, I'll get access to being able to charge my users, set them up with subscription plans. Same with analytics, if I add in one of the Bubbles analytic plugins, I can access that. This is how I, one way that I can show and hide elements on the page. Plugins, Bubble has got a wealth of plugins. Many of them are free. Most of them really cheap and easy and simple to check out. This is how I've added additional actions to the plugins. And then custom events. Triggering a custom event is a... Let me start again. When you are building any app, a good developer philosophy is to build lean and do not repeat yourself. So if you have a workflow that you're going to be running more than once on a page, then you can use trigger a custom event and you can create custom events here. And that's a good way of ensuring that you build once, even if you've got multiple places or multiple sets of dates being fed into a workflow you can keep it lean and you do not need to repeat yourself.

So that's workflows and yeah plugins add to the functionality of workflows but yeah we've got we've probably got 50 or more videos about workflows if you head over to our website planetnocode.com you can find out a lot more about how to use workflows and you can see some more examples of me taking you through building things like a Twitter clone where we give examples of how to use workflows in order to build that Twitter clone in Bubble. Right, let's move on to data.

Data types

So, Bubble gives you a data type to start with and that is user. And user is a special data type because the user data type is the only one that can behave in the manner of a user, like logging in and registering. A mistake that I see people make if they have different roles, take like a marketplace, they're building a no-code marketplace for Bubble, they might think right I need a buyer and a seller data type. Well you can do that as long as you link them back through to a user but the core of it is is that only a user can log in. So anyone who is logging in, well even if they are doing completely different things on your platform, they all need to actually be a user. And so if you've got different fields, for example if your seller has a business name field, you can add in a new field and you could say "business name". But if your buyer is just going to be first name, you can add in both fields and you would just have them sat alongside and you would only insert data into the field where it is relevant to do so.

Creating new data types

What about creating new data types? So let's go with a Bubble app. Let's say for some reason you're building a blogging platform. So we'd have post or maybe social media scheduling management tool. You're building that Bubble. You'd have a data type called post. So we can add in post. And you'll notice that post has got these set fields already. We've got Creator, we've got Modified Date and Created Date. So again, I see people creating an additional date field when it isn't needed. You would need to create an additional date field if you wanted a way of manually setting a date. For example, if you wanted your users to be able to create content but set a date that's in the past, you can't change your created date because that's fixed when the when that row in your database is actually created. So you would need to add in another field. Let's call this "Scheduled Date" and then we choose the date type and then that is all ready to go. In fact we will also put in "Text Content". The field names aren't important here. They are for my reference. Okay, and you can set defaults here. That's very useful if you want to ensure that a user doesn't end up being signed in and using your app without a value there. That's particularly useful if you've got numbers, maybe you want to default to zero. Let's go through the tabs here.

Privacy Rules

Privacy rules. Okay, now for more detail go to our website plantnoco.com where you can find and search for privacy rules because you'll find that we've got videos going to much more depth. But for now, with posts, we'll set up a really simple privacy rule. Again, this label here, rule name, that's just for me. I'll put something helpful for me, which is "user". And then I will uncheck all these boxes because I don't want the content in posts to be public. I only want it to be viewed by the person creates it. So I can say 'This post's creator is current user' and then they can view all fields and they can find it in searches. Privacy rules are the, underline the, only correct way to protect data in your app. If it's not protected by a privacy rule, then there's a good chance that someone could, if they were determined enough, find their way around it and that data then isn't secure and isn't protected in your Bubble app. So privacy rules, you should be adding them as you go along and you should be thoroughly testing them. Right, privacy rules is done. App data. So this is my view as the Bubble app creator of the database. It's important to remember that your Bubble app has at least two different versions and I'm looking here at the dev version. My live app has a separate database. But I can create, so for example, I wanted to test something but I haven't actually built a form in the design tab and workflows yet. So let's add in a, let's put in just a random date here. Because I'm now manually entering data in my database. Okay, and now it appears in my database here. If I go into users, there are no users because I've not signed up any users. A quick few tips here, when you do have some users, there's an extra column here on users. Look, post starts right at the end next to the check, users doesn't. that's because you'll see an option here for run as. So it's very quick and easy to sign in and test your app as a user because you can just click the button here.

What are primary fields?

One other thing I'm going to show you on AppData is primary fields. Bubble-like, you know, fairly standard across coded development environments is everything has a unique ID. You'll see that the post I created here has got a unique ID. And that is the software's way of identifying and making relationships between different entries in your database. But the unique ID doesn't mean anything to me as a human. So if I want in my database, when I'm viewing it here, in AppData, this doesn't affect the design tab or what my users see, it's only convenient for me. If I want posts to be displayed as, for example, the... Ooh, that's gone a bit funny there. The text content, then I can set the primary field for posts to be text content. And that then means that if I establish relationships between different... In fact, let me show you. So if I go on to users and then for some reason, what if I wanted to create a list of posts that they created? I wouldn't need to do that necessarily because every post that's created has got a created by field. But for the sake of giving a quick demonstration, let's just say posts created. And then I'll set that as a post type. And I'm going to make a list so they will accept more than one. And then if I go back into AppData, let's just set this up with demo.com. Okay. So now, instead of looking up a post by the unique ID, I can look up by what I set as the primary field, and then I click on, and now that relationship is established between the user and the post. Remember, the post has always had a created by field. So if the user was logged into the app and they created that post, you don't need to add your own creator field because Bubble has that included.

Option sets

Option sets are great for if you've got like a fixed series of values such as like currency, or if you're adding like SMS, sending phone numbers to your app, you could use them as country codes, like for the UK I'm in +44. Option sets are great for that. Option sets are really worth understanding. There's a video here that Bubblebles created. Also on our website plantnoco.com you'll find that we've got many videos giving really detailed examples of how you can use option sets. Basically option sets are like your own database separate from data types. Users of your app cannot create option sets or change them, but you can as the app developer. And then lastly, we've got file manager. If anything is uploaded to your app, it appears here.

Styles

Styles, I'm going to brush over this really quickly, but it's basically your way of, if you're familiar with CSS, it's effectively classes. classes, it's your way of deploying similar layouts and designs across all your elements. And ensuring that you're not creating more work for yourself because if you update, you know, button, primary button, here we go. Let's give an example. I don't like the blue, I'm going to make it into a pink. I've updated it here. Whoops. I'll go back to my design. Button, my button has been updated here because it is set to primary button. I can go back, edit primary button, make it green, and it's updated to green. So, styles can really save you a lot of time, especially if you're in that MVP stage, and you're anything like me, you find that you're updating the design quite a bit. I find it hard to stick with a UI kit. I find something better and I move on to it. If I use styles, it means I can easily update a lot of elements in my app very quickly, quickly, particularly changing topography, that sort of thing. Oh, talking of topography, you've got style variables, so you can set up colors and you can set up fonts. Again, it makes it easier for you to set topography, fonts and colors once and then deploy them as like dynamic values across your app.

Plugins

Let's talk about plugins. So plugins that I use a lot would be like Ionic elements that gives you some extra elements for the page. Let me give you an example of like a toggle. Okay, very similar to what you find in Android or iOS. It looks good. It works as a yes/no switch. Plugins, again, check out our website, plantnocode.com. We have used some of the top plugins and we've got demonstrations on them and you can find out how to use them on our website.

Settings

So as of a few months ago, Bubble will add a new metric called workload units. And that is basically the way of measuring how much computing power your app uses. Effectively every action that a user takes is assigned a workload unit. And you can view that in logs and you can come to understand which bits of your app are efficient, which bits are inefficient, but this is your way of keeping track of it basically. We then got general, I'd say the most important thing here is to ensure that define who can see and modify the app, you set that as private. If I set that as anyone can edit or anyone can view, then someone can view like exactly this page by going to the URL of my editor, they can view it. So that's okay for like non-critical collaboration across users, but as soon as you've got, you know, amongst friends, as soon as you've got data that you want to be kept private, even your own email address as a user in your database, you want it set as private. You don't want other people to stumble across it and to take data out of your database or even go as far as copying the implementation of your idea. So keep that one there private. Got some fairly standard web app things here, such as favicon, some colors, custom fonts, file management. Yeah, that's so good.

Domain settings

So when you... you'll get to a point in developing your Bubbleble app where you want to deploy on your own domain, you'll need to upgrade to any of the paid plans in order to do that, and Bubbleble will provide you with some instructions here of how to update the DNS records for your domain in order to connect your domain and run your app. Now you can run the Bubble app on your root domain, for example, example.com, or what I see is quite common, especially for like internal SaaS apps, is to run on a subdomain. So example.com is your landing page, it's your sales page for your app. You could use something something like Webflow or WordPress in order to have a really fast loading sales page. And then you actually deploy your Bubble app to a subdomain like app.example.com and Bubble will provide you instructions to either. It's entirely up to you.

Languages

Languages is a very handy tab. you're provided here in US English with all of the help text or the browser alerts that will come up and you can change and modify them. You can also make your app multi-language. If you have a language field on your user, you can allow them to talk between languages and you can use placeholders. basically you have the potential to deploy your Bubble up in a multitude of languages, but you'll manually need to enter in the translation. It doesn't have an automatic translation built in.

SEO and meta tags

I think we cover SEO in more detail in some of our other videos to go and check those out.

API

Bubble really is the all-in-one tool because even if you were to use another service to develop or even employ an iOS developer, for example, they can link in and authenticate and take actions in your database as a user. And so you can have a web app built with Bubble and the database is on Bubble and you can have an iOS app that integrates and authenticates in with that database. And that would be using the data API here. The one that I think is much more common is to enable back-end workflows. and that then adds an extra tab down the bottom here.

What are backend workflows

Backend workflows are your way of maybe doing some more heavy lifting with your app, sending workflows off to the server side so it's not slowing the user down. Backend workflows are also great for receiving data from webhooks. So for example with Stripe, if you want to take an action when a user completes an order or finishes a checkout session, you can set up a backend workflow, then set up a Stripe webhook to send information to that backend workflow. Collaboration, I think that speaks for itself. Subapps is basically on very expensive plans, your ability to deploy to multiple different domains, and then versions is that when Vobble makes a major change to their software, they don't force it upon you. In most cases, they allow you to deploy it yourself so that you can thoroughly test it in your development environment.

Logs

Lastly, let's look at logs. I mentioned workload units earlier on, so you can see here that the action of navigating to a new page took up a mere fraction of a workload unit. Server logs, again, this is just really helpful for debugging and finding out what went wrong, particularly if you're running back-end workflows because you can't run them through step-by-step in the debugger. And then scheduler. If you have back-end workflows and you schedule them into the future, Bubble will effectively queue them up and run them automatically on the date and time that you set to schedule. So there we go! We're coming me up on 28 minutes and that is my complete guide to getting started in Bubble. If you have any questions I can always record a follow-up video to this so please leave a question down below.

Summary

If you've got this far and you found it really useful, like and subscribe because that helps us out on YouTube, we'll be gratefully received. And again just a little reminder that if you are learning Bubble and you want access to our library of hundreds of Bubble tutorials which go into much more detail than this one. Become one of our NoCode Developer community members.