How to Build a No Code App With Bubble.io - Learn No Code for Beginners

hey everybody so today I'm going to be doing a full bubble dot IO tutorial based on my experience growing my own app to over 32 000 per month in sales on the bubble platform there's a lot of tutorials out there but what I want to show you specifically is how you can do this as building an app that actually will generate Revenue a lot of the apps out there on Bubble currently are not generating a lot of Revenue and that's because of the design principles that they're using to build these apps and so my hope is to show you exactly how to build a profitable app in 2023 and how you can build it on mobile and display it to your users let's dive into it so one of the first things you're going to do is you're going to go to bubble dot IO and you're going to sign up for a free account you can actually get started on building this completely for free just by signing up here and if you hit get started for free it'll walk you through a sign up process to get the app going now keep in mind there is different levels of pricing so when you go to the actual pricing page you can see the different levels but you can actually build on the development version of the app completely for free and sign up in seconds [Music] the next thing you're going to want to do is go get this extension called canvas by air Dev it has over 6 000 users kind of a small user base but it does help make some of these app builds pretty easy to get started they have some beautiful designs that you can get using right away and they're a pretty cool company then once you've had that Chrome extension added you're going to want to go search for mobile menu and then you can hit add page and you're going to come up with the page title you're going to hit create a new page as I hit the preview button and it will take me to this preview page and essentially what this is is this is what the app is going to look like now when you view it from here you don't see really anything and that's because this debugger view at the bottom is actually covering up the menu for the mobile settings here at the bottom so I'm going to go up here and I'm actually going to remove this URL path here at the top and then it's going to just display it with the buttons now again keep in mind this is a mobile view because we're building a mobile first application and so if I were to go into inspect here and actually view it on mobile now I can see the buttons in a way that actually makes a little bit more sense on mobile but I'm going to want to be in debug mode as I add new things so I'm going to go in here and reload this URL with the debug mode added now with the debugger essentially is is it allows you to see different steps and different elements inside bubble from this drop down menu all the elements that are located on this page you can find here the next thing it allows you to do if you were to click on a button so I'll try to click on this one here it's kind of hard to see but I'm going to remove um I'm gonna click on this one here this is the floating group bottom menu when I click on it normally nothing happens but if I go step by step and I click on it there's going to be a series of steps that run that correspond to what I just clicked on [Music] so this debugger is very useful for being able to navigate between elements on the page and also see step-by-step debugging of different elements in their workflows now I'm a bit of a music guy so I want to actually create a music streaming app on my mobile device and I'm going to show you how you can do that here in bubble first go to air Dev and I'm going to look for any elements that I might need for this application now the way that this page is constructed is on the left hand side here you'll actually see all the different elements to this page if you've used other kind of website Builders like webflow before you'll know that everything is categorized in a hierarchy and this is called the elements tree and you can expand and close the tree with toggling the elements tree button here and essentially what the elements tree contains is groups and then groups within groups and pop-ups headers and the page itself and every single one of these items has their own conditional logic and other information categorized with it so you can set Dynamic text within certain sections of the page and you can also set color you can set style you can change layout you can make things conditional meaning if this condition is met then this page element does something right so for example if current user is logged in and [Music] current user [Music] account status is active then this is true so you can change the paid title to welcome right now it may be kind of hard to see but if you were to look up here at this tab it now says welcome but again today what we want to do is start to build a basic music streaming service and so I'm going to show you how to do that next essentially what we're going to do is we're going to start adding elements from the air Dev extension into this group main content group and what this is going to do is it's going to condense everything into a viewable field that looks good on mobile okay and this is sort of where the fun part comes in because you can look at some of these blocks and you can ask yourself which of these blocks would be good for something like a music streaming service and if you go into the air Dev extension and hit view full Library you can actually look at every single block in a much easier to view standard way on the air Dev website and view the different things that come up here what's the first thing that you want to see it should be the ability to search for anything that you want at any time any piece of music by any artist so what we're going to need is a really cool search bar function and we're going to need colors that look really good on the background of this app so after looking through the library I've actually found one search page that I want to use so I clicked on this one and I found it here under search page so what I'm going to go do now is I'm going to go look here I'm going to go to pages and I'm actually going to add a new page that's going to be the search page so what I did was I shopped around for a couple different search pages and Views I liked and I really arrived at this one it's simple it's got a nice little filter here on the side and you can search for things very easily so what I'm going to go do now is I'm going to go change the name of the text here to music streaming app and I guess it could be more clever and come with something a little bit cooler but I'm just going to keep it pretty basic for now all the world's music in one place right keep it simple and then what I'm gonna go do next is actually change the background color I really like black backgrounds uh they look really cool and Sleek so I'm actually going to go ahead and change this to a purely black background I'm also going to change the entire page and everything up here as well so that everything is black and I might change the text then here to some sort of white text so it looks a little bit better [Music] change this background again to Black [Music] and then let's see what that looks like now what I don't like is I don't like this white lines right here I think that looks kind of weird so I'm going to go and remove those real quick I'm going to go into the group [Music] I'm going to change the border to none the bottom of the top [Music] and again I'm going into this group which is inside the elements tree and I'm changing the style and the appearance right you can do this where you change all the borders independently or you do all of them changed one by one or sorry where you change all of them together [Music] and now as you can see it's gone what I'm going to do is I need some data to actually go and search this from right now there's no data inside the database on Bubble so I'm going to go and actually go into chat CBT and just come up with some fictitious artist names and I'm going to go grab and put into my CSV file here [Music] and then I'm going to ask it to also come up with 100 song titles that are not real so I went ahead and I grabbed artist name and song title what I'm gonna go do now is I'm going to download this and I'm gonna go upload this on the back end now the cool thing about Bubble is that it has a database View and a design view and a workflow view which we haven't even gotten to yet but the database view here we can add artists and songs foreign [Music] is that you can create referential data objects so for example I can go in here and I can actually refer to an artist who is in a different data type in this database and I can do the same thing with an artist and a song so in this specific specific situation I'm going to have a song with an artist name and I'm going to go in here and I'm going to actually look for artist and then I'm going to add title which is the name of the song [Music] and that's just going to be text I'm now also going to go into artist and I'm going to do song but the cool thing is that when you go in here and do song you can actually add it as a list because every artist can have multiple songs foreign [Music] there is a more advanced way to do artists and title but in this specific situation we're just going to keep it simple so I'm going to go into app data and I'm actually going to go upload underneath the song category the artist and the title name I'm going to take the file and I'm going to upload it here and as you can see now the artist is mapped to the artist header and the song is mapped to the title header I'm going to hit validate data and it says your data set is ready for upload and it will now upload the data into the database you can now hit new upload if you want to upload more data but for now we're just going to upload this basic data here now here comes the fun part if you want to actually manipulate the data that's inside the database you can display all of the songs at once or you can display a partial view of some of the songs or you could use the data inside the song objects to display in specific elements depending on how you want them viewed by the user for now we're going to do is we're just going to take all the songs and we're going to display them in a list and then have the ability to search for different songs in the search bar now again the cool thing about the air Dev Chrome extension is that when you search for something like list you can go and grab a already formatted version of this list for you to add into this object and so I'm going to go and I'm going to search for list and I'm going to find something that looks pretty decent which I can easily manipulate and group main content is where it's going to be added so I'm going to hit add and you can see that it's currently being added now even though it's done it still looks a little ugly so I'm going to go in here and I'm going to customize it so I'm going to go back in the back end we don't really need to see a list here for now I just want to show you the songs as they come up so we're going to click here and make it invisible so when I click the element is visible on load if I uncheck that box it will no longer be visible however here what I want to do is I want to change this to songs and I also want to change the color of this to White so that way you can view it here so when I come into here [Music] I can now see songs the only problem is that songs text is a little bit too close to the rest so I'm going to add some padding below it which you can do here by going to padding bottom and you can add 15 pixels of padding to make it a little bit easier to view now you could either do padding or margins doesn't really matter at the beginning when you're doing basic stuff like this as you get more complex you're going to want to change things also what you're going to want to do is we're going to change what's displayed in these pieces of text for the songs for example when you go into the repeating group and that's what this is It's a repeating group so this group contains another group which then lists everything that you're going to see when you're searching for songs so when I come into here I can drill down and I can essentially see what does this repeating group contain when I drill down far enough I can see that a repeating Group which contains a list of items contains these things right now it's just placeholder text but if I go in here and I search song now I can actually see all of the songs if I change this to song If I change the data type to song and I remove that filter from the data source I'll be able to see everything here so when I come into here unless there's some kind of Privacy Rule enabled you'll be able to see all of the items now the reason that it says Farm flowers is because we haven't adjusted the text to actually include what the specific song is in this list so when I come into here and I click on the text in this section I can now insert Dynamic data and when I do the dynamic data switch foreign [Music] I should be able to see the song listed now the thing about groups is that you have to change the data type in every group that contains an element for it to be displayed properly so when I come into here and I see type of content song I've actually got to go and make sure that every group that is around this text matches the data type song the way to do that really easily is you can see where is this in the elements tree and you just go and make sure that every single type of content matches what you're trying to display so this group is what contains the text and so because of that you need to make sure that the type of content is song and you can see here that this inner group is also now the same kind of data type as well and if you continue going up you can make sure that every single data group contains the same data type and so as I drill down I can see further into this and now I can select what's going to show so this cell contains the song and the song's title and when I select that and I come back to here now I can see all of the song titles I can also go into here and instead of showing this I can now go parent group songs artist which is pretty nifty [Music] so now you can see the name of all the songs and the name of all the artists [Music] so now that I've went and I've added that list what I want to do is add a workflow where when somebody searches for something in this search bar it actually pops up the song that they're searching for [Music] so what I'm about to show you next is a very integral part of bubble so make sure to pay close attention to what I'm doing here what you're going to want to do is you're going to want to go into the repeating group and you're going to want to set a conditional workflow that runs when this input search remember this input search here when the value of it is not empty and this is something you'll do a lot with bubbles so it's very important that you know how to do this where you then set the data source so what's going to be displayed here in the list view in the repeating group to be the title equals the input searches value so now that I've went and done that what's going to happen is when this isn't empty it's going to show all of the songs but when I search for something specifically it'll then show that specific song [Music] now there's so much more you could do with this you could filter by songs that match certain text phrases so for example if you wanted to have all songs that contain the word neon you can actually run certain workflows that do this I'm not going to cover that in this video but if you watch separate videos on this channel I'll be going into depth about how you can customize different search results and things like that to Showcase different kinds of items in a repeating group so now that you've uploaded your list of music you've made it in such a way that looks clean and Slick to the user all you have to do is make sure that this app looks good on mobile so I'm going to show you what it looks like when the app is on mobile and then if that is complete then you can deploy this app so what you're going to want to do to make sure it looks good on mobile is you're going to want to go back to that preview page and you're going to want to right click inspect that page now as you can see here it looks pretty decent there's a lot of things that I could do I could change the padding the margin I could change how much text is shown here I could only show artists if I want to only show artist names instead of the song names I can do many different things to make sure that's compatible with mobile I could also go up here and I could see what it looks like on different sized screens so when you right click inspect on a Google Chrome browser you'll be able to see what it looks like on the pixel 5. it looks like on the Samsung Galaxy S8 plus and if you want to go even deeper you can even see what it looks like on tablets and many other things and with custom Dimensions you can change the width you can change the height you can even change the speed of how fast things load so for example I'm looking at it on low end mobile I'm taking the text and I'm pasting it into this bar and I can see how fast it runs you can see there is a slight delay there with how fast it ran now I hope that this video was valuable for you if you want to see more content like this please feel free to like And subscribe and share with a friend you think might find it valuable again everything we're trying to do with this channel is to show you how to build apps that actually generate Revenue we've been able to do that with our own applications and make thousands and thousands of dollars a month from bubble.io and so I definitely recommend that you dive into this revolution of no code and start to build apps today whether you're a traditional developer or you're somebody that has no experience in development that's one of the coolest Parts about this revolution feel free to comment below with any questions and stay tuned for more videos just like this one expanding on how to build applications in bubble what you can do to grow and scale any kind of bubble.io app and if you would like to have any kind of free training from us we do offer free training by clicking on the link below and you can access free training with our team to show you how to do this exactly so thank you so much for watching please stay tuned for more until next time

Channel: Lucas James Tech

Views: 7,805

Keywords: zapier, webflow, saas, bubble io, no code saas, bubble responsive design, bubble workflows, bubble no code, no code app dev, option sets, app metrics, bubble app builder, no code app builder, no code saas builder, no code mvp, bubble.io lessons, bubble database, bubble.io review, bubble app tutorial, bubble.io create mobile app, bubble.io tutorial, saas no-code, no code tools, no code, no code saas ideas, no code saas idea, no code development, no code app development

Id: Lm_fsGY14oI

Length: 19min 33sec (1173 seconds)

Published: Wed Aug 30 2023