Transcript
Now, first things first — we need to create our Bubble project.
I'm going to assume that you've already got a Bubble account. If you don't, go and create one now.
And then, from the homepage, just click to create a new app. We'll give our app a name.
And then you may be offered a free trial of the Starter plan. Now, we will eventually need to have a paid plan in order to deploy our application to the Apple or Android app stores. So you can activate a free trial of the Starter plan here in order to test out some of the features that it gives you.
We can also just start building on the free plan and upgrade later, which is what I'm going to do here.
Now, once your project is created, you're going to land here in the Bubble editor. And I don't want you to get overwhelmed — we're going to go through what all of this does as we go through the course. I just want us to do one really specific thing up front, which is to head over into this top-left section here where it says Web.
And I want us here to create a mobile app.
This is going to create a mobile version of our application because, as you may already know, every Bubble project can have two versions. You can have a web version, which your users will access via their web browser, like Chrome or Safari, but also a mobile version, which your users will install and access via the respective app stores of Android and Apple.
So, I'm going to hit here to create a new mobile app, and this is going to open the editor for our mobile version.
Now, just so we can quickly get orientated here altogether: over on the left-hand side, you have the main tabs of the Bubble editor. Right now, we're in the Design tab, and we're going to get introduced to the other tabs too as we move through this course. But for now, we're just going to stick here on the Design tab.
And this is where we design the interface for our Bubble application.
So, over on the right-hand side, we have the design canvas. And on the left, we've got a library of elements — and, actually, drag this up — that we can add to our application.
So I can add, for example, a text element here by clicking it and then clicking again on the canvas. And then we have this thing that appears called the Properties Window. And this lets us modify various attributes — properties — of the elements that we place on the canvas.
So, for this text element, for example, I can change what the text element actually says to use an old, famous programming convention.
For now, though, I just want to show you that, as well as seeing here within the Design tab what our app looks like, we can also hit Preview here by clicking on the top toolbar. And this is going to show us what our app actually looks like as if we were running it on our device.
And this will reflect any changes that we make in the editor more or less immediately as well. So, if I say “Welcome to Bubble” at the end here, and then I hit Preview again — or simply refresh the tab where my preview is open — you'll see that the latest changes are reflected here.
Now, this preview version is good for observing simple changes that we make to our app. But to really test how our app behaves on a real mobile device, we should install the Bubble Go app, which you can find the instructions for in the description for this video.
Now, once you open it up, you should see your newly created app at the top. And if you click on it, you'll see this little menu asking you to select the branch.
Now, we don't really need to understand what branches are right now. Just think of branches as variations of your application — just like you might have different cuts of a movie, maybe a director's cut or a limited edition cut for a particular country. Right? These are just variations of your application.
And we only have one variant right now — our Test Branch. So that's what I'm going to click on now to open my app.
And you can see, here is my app running locally on my device.
Now, if I was to make some changes here again to my application, what you'll notice is that I'm not seeing those changes within Bubble Go. So all I have to do is give my phone a little shake, and we see this little menu appear down the bottom.
We just hit Relaunch App — that's just the same thing as refreshing your application — and now you can see that your changes are reflected.
So now we know how to see what our app looks like when it's running.