Bubble for Beginners: How to Get Started With Your First No Code App

in this video we're walking through the basics of building an app on Bubble we'll talk about how to get started what your most important tools are in the interface and how to best approach logic and design of your first app consider this your bubble crash course because you don't want to miss out on the critical features and Concepts you'll need right from the start using a no code development approach with your app comes with many advantages first it can be significantly cheaper to build your app yourself compared to hiring outside development teams or agencies second you are in complete control you don't have to worry about miscommunicating your vision with other developers this way you can ensure you are building exactly what you want and third speed because you're literally not having to write any traditional code or have to learn a programming language first your development can go by so much faster and this includes the the build itself any testing rounds and iterations on the app long term bubble.io is a no code web application Builder this is a full stack solution that supports highly interactive datadriven applications of all sizes anything from small personal projects to businesses and businesses of all sizes as well small businesses Enterprise SAS solutions for organizations we've really seen it all and this is all done through Visual programming so you can drag and drop your designs together you can drag and drop your logic together without writing a single line of code and because it's full stack everything is all Under One Roof so your designs your databases and all the workflows that connect everything together and bring it to life not only that but there's a whole Suite of features and capabilities to really complete your development needs so there's collaboration tools so that you can work with other people integration options so that you can connect your app to the outside world all sorts of data security customizations that you can put in place that are unique to your app and more so let's get to know the bubble interface all right so we've got one of our demo applications open here we are in the editor and I'm going to take you through three primary screens that you'll be using more often than not for building and designing your app if you look over here on the left- hand side the editor is split up into seven different sections we're going to focus on the first three here design workflow and data the other sections are of course important those have a little bit more to do with just general settings so we'll start with the data Tab and this is further broken down into other subtabs uh the first one here is data type so you can think of data types as tables every bubble application comes with a user type so that you can create user records inside of the user table anything else that you need for your app you're going to custom create within the data type you'll also create Fields so these are the different properties you want for every record in that table so for example for the user we'll want to have a date of birth a name a photo these are just examples examples um and of course there are some built-in fields that bubble handles for you like the creation date of that record uh imagine you're building a financial tracking application you may want to create a data type for expenses for um sales for categories to associate your transactions to specific tags things like that notifications lots of different things that you can do it's up to you right this is actually one of the most important steps that you'll want to take very early on is to really Define your database architecture you can create all sorts of relationships between these records as well the next tab here is the Privacy tab this is how you can create privacy rules that are custom to your data structure so that you can uh Grant or restrict access to specific records based on who the user is or what their relationship to that record is uh the next tab here is how you can actually see your data uh that has been created in the app either by you as the owner of the application or generated by your users you'll notice that it's all separated by the data type because again you can think of the data types as Separate Tables so here in this demonstration I have seven user records um within the user data type and I can see those values there some photos some names things like that the next tab is option set this is a really handy uh feature and capability within the data structure where you can manage lists of choices that are always going to be available for your user so these are not created by your users but for example with expenses right I might want to create um a a predetermined list of expense categories for my users to choose from in my uh Financial tracking application so you just set up the uh option Set uh itself and then the choices within them very very handy uh capability there and then the final T here is your file manager so any files that are getting uploaded to your application PDFs images documents um these are all going to be managed here every app uh does come with a certain amount of file storage capacity depending on the plan that you're on um will dictate how much capacity there is you can also add more capacity as needed um but this is a fantastic capability that comes built in to the bubble editor as well you don't have to connect to an external file storage solution you certainly can if you want but there's a lot that's already available for you here out of the box okay so the next tab that we're going to look at here is the design tab so this is your canvas this is where you um create the front-end interface that your users will see and interact with um the majority of the space taken up here is the canvas itself this is how you put together your page on the le- hand side you have all of the tools all of the visual elements that you can add to the page there's a lot of visual elements that come um right out of the box with bubble but you can also install more through the plug-in Marketplace so don't forget that that plug-in Marketplace is there um the visual elements are broken down into different categories depending on the type of element so you have things that are generally clickable so or or just something to read so like a text buttons icons things like that you also have containers uh so ways of grouping elements together so that they can move around as a unit um containers also have very special properties uh that work with your logic so that you can reference information from your database and also input forms uh this is how your users can really interact with the application so they can type things in they can make selections um they can search for things right so a combination of these visual elements will help you put your designed together right now we're on one of our signup demonstrations and you can see there's a little bit of everything here we've got a group that kind of organizes this form in one place right so that it's separate from the image that we have over to the right inside of the form we have text we have a button um we have inputs and uh this is you know these are pieces that are available to you so that you can drag and drop onto the canvas um and when you are working with one of these visual elements you're going to see this property editor come up this is a context sensitive window so depending on the element that you're selected on um you're going to get different settings available so within an input I have the ability to choose you know what format of input I can expect is this going to be a text is it a password are they going to type in a number or a currency value of some sort uh compared to a button my settings change just a little bit I don't necessarily have all of those same formatting options or compared to the image my settings are going to be more about image related characteristics you know the sizing how it scales things like that so this is something that you know you're going to find actually all throughout the editor to help you configure uh all of your designs and logic now there are a couple of other very handy tools within the design canvas such as your elements tree so everything that you've placed on your page you can actually see it in a sort of hierarchy how things are nested within one another they can help you show and hide different things so that you can work within the canvas more easily you have various search tools to help you find things which you know after a while your app is going to grow to many many different elements and so you want to make it really easy for you to move around and keep your development really efficient and another very big setting here or uh capability is to view your page from the responsive perspective so actually previewing how this page reacts when you're on different break points uh different device widths so this is our default width if I take this down to more of like a tablet size it's a little bit more narrow um if I take it down to more of a mobile you can see that the design that we have here has collapsed that image away so that we're just looking at the form since that's more appropriate from a mobile perspective um we've got a little ruler here and stuff so that we can uh see how everything reacts in one place so there's a lot of different tools available for you to preview what you're doing but to highly configure the exact layouts you know the precise placements of all these visual elements in your canvas um Bubble has a lot of things that help you uh to keep things consistent such as styling tools where you can you know create a preset style and then just apply it to everything so you don't have to reconfigure things over and over and over again um and the responsive settings in general are a big help to help you design on a grid right basically placing things in terms of rows and columns at the end of the day A Very Organized page is always going to be in some structure of rows and columns if you look very closely you'll see it all over the web uh so this is a great way to you know quickly put designs together and have full control over how everything looks all right so now we're going to take a look at the workflow tab I have switched over to a different page here where um I actually have workflows in place to show you this is a messaging uh type of feature here where a user can send a message to other people whether a onetoone or a group type of chat um so we have that designed there and in the workflows we've got a few things to make this interactive So within the workflow section what you're doing is you're giving bubble instructions to do things either to make adjustments in the database create a record edit a record delete it or to make something visually happen on the page that the user is looking at maybe show a little alert message or change the way something is uh appearing for the user in that moment uh so here's an example of a workflow workflows are made up of two parts you have your event and your action the event is like the trigger so for example I have clicked on the send button this is to send my message and when when that button is clicked we're going to tell bubble to run a series of actions you can have it do one action you can have it do multiples um and they're going to follow the order that we have here now there's also some other Rules and Things to understand about um you know conditional actions where they have to wait on something else that needs to happen or maybe branching things off into different scenarios based on you know who the user is or what the data is that's involved um you have a lot of customization options here we're going to keep this simple for now so when the button is clicked we're going to create a new message record in the database this message is one of my custom data types for this application and you can see these are my Fields my custom fields that I've defined within that message data type this is why it's important to address your database first because you won't really be able to create the records if the structure doesn't exist yet uh so here we have uh the input being mapped to a specific field that I've created in the message data type so I'm just telling bub what to do and where to find all of the information and bring it all together notice that I'm not actually writing any code this action here to create a new message is one of the many actions available in this um list here that's organized by different categories these are all of the different things that you can do either visually or adjustments in the database you just have to search for the thing that you're looking for and then depending on what it is you're asking bubble to do you may have some configuration steps here so after we create the message message we're going to reset the inputs I don't have to set anything up here this is just telling bubble to clear out the input so it visually gives the user an indication that something happened and I'm also scrolling to that new message in my list of messages design that I have on the design can miss there so the event and the actions um you'll notice that there's also uh a few different types of event options so some things can happen automatically whenever something becomes true or the user has to interact with something first like click a button or make a selection with an input um but this is really just the tip of the iceberg you can get incredibly customized here because it's up to you to piece these things together bubble will sh will offer all of the possible choices and you just have to choose the right ones in the right combination to bring your app to life also remember that the plug-in Marketplace that bubble has um can also offer different actions and event triggers uh to add to this area here it just depends on what capabilities that you're looking for sometimes plugins will give you more functionalities uh that you can work with on the left hand side we have some other organizational tools for workflows so I can actually put these uh workflows in folders you can see that we can color code them almost everything that you can customize is also editable in terms of its name so I can change the way that this event is named so that if I want to find it by a different name later on uh here in the search for example I can do that um this makes it easy easy for me to navigate throughout my own editor as efficiently as possible and that's really important the bigger your app gets to be able to move quickly and have a full command over your own work hey real quick if you're finding this useful so far then I have a free extended training that I want you to head to next it's over at coaching nood apps.com workshop and in this free extended training you're going to learn the necessary individual steps you need to go from idea to app you'll learn things like scoping your application properly development methodologies starting to use no code tools like the bubble platform and you'll also get to see what other non-tech Founders are building for their first step so you can find that over at coaching nood apps.com workshop and head over there next after this video all right so we're going to walk through how to create your first bubble application if you haven't already done so head over to bubble.io and create a new bubble account you can do this for free all applications that you create within your account are automatically going to be placed on the free plan when you're ready to upgrade to take advantage of more advanced features then you can place that app on a paid plan keep in mind that the plans are per app so if you're going to have multiple applications within your bubble account where they are all going to be on paid plans those are going to be separate paid plans one for each individual application okay so once you're in your bubble account you'll head over to the apps section and then go over to the button create an app in in the upper right corner here we're going to click on that and that's going to open up a popup so that we can name our new app I'm going to call this uh cnca no code 101 all right so we'll click on get started and when you first get started Bubble has a series of intro walkth through you know popups and uh kind of helpful tutorials to get you acquainted with the interface I do recommend that you go through those those are always very helpful so that you can uh take a look around and understand what your options are all right so now that you have your brand new application created and you're in the editor you've made your way through all of the getting started tips make sure that you start with a completely blank page resist the urge to use any pre-built components or templates because I promise you're going to learn so much more when you build everything yourself from scratch not to mention you won't have to spend any time adjusting any pre-built elements uh so that they're customized to your own application so starting with the completely plank canvas is going to be the way to go okay now every editor comes with three built-in Pages if we go to the page drop- down list in the upper right corner or sorry the upper left corner we can see what those are so we have our index the reset password and the 404 page your index page is your main homepage so if somebody were to navigate to The Domain of your application this is where they land some people like to put their marketing material here just a general landing page some other people like to use this as the sign up or login screen to get started and access the application it's up to you just depends on what makes sense for your app the reset password page is where users can uh reset their password if they've forgotten it so if they try to log in they don't know what it is you can trigger a workflow to send them a link and when they click on that link they'll come to this page and that's where they can reset their password and get access to the app again um the 404 page is your general error page so if your user tries to access um a path on your domain or a page that does not actually exist they're automatically going to be taken to this screen you've probably seen this across other websites or appc where it says oops we couldn't find what you were looking for that's what that page is so those are all built in those are handled for you just don't forget about the reset and the 404 there are some uh placeholder designs and texts there that you'll want to customize to your own language and you know your designs now of course you can create your own custom Pages you will likely be doing this here so when you click on add a new page bubble's going to ask you for uh the name that you want to give it this is actually going to show up in the URL um and you can change this after you've created it you're not stuck with it um 's also a shortcut here to create a copy um to save you a little bit of time if you have multiple pages with generally the same design so we're going to get started with creating a simple signup form on our index page this will give us a bit of exposure to a little bit of everything visual elements working with the workflows and setting up your data structure properly so let's actually prepare our data structure first to support a new user record now I have come in here ahead of time um and added fields to my user data type every bubble application comes with a user data type you're going to see see it in your app as well and I've added four Fields here for my user these are custom fields that I created by clicking on this button create a new field you can type in your field name there and then you'll select the format of that field so is this going to be a text a number a date and so on so I've created four Fields one for date of birth which is a date first name last name are both text and then profile picture is an image notice that there's actually a built-in email field the that bubble provides for us within the user data type this is a special data type it's a special field it has to do with uh you know all of the security credentialing that bubble will help take care of for you you'll also notice that you don't see a password field in here it is there it's hidden you will never have access to your users direct passwords um but it is uh something that bubble is managing for you behind the scenes okay so you don't have to create a password field for them now going back over to the design let's set up kind of the frame of our page I'm going to double click on the canvas here and this will pull open my property window this is broken down into three tabs you'll always see these three tabs here for your visual elements appearance layout and conditions appearance is going to cover any visual properties like colors fonts sizes things like that layout is all about your Dimensions so the widths and Heights there's a lot of different settings here especially when it comes to responsive design um right now my page is at a fixed setting which you're rarely going to want to do um if you don't know what container layout to choose for your page go with the column um not only is it a responsive setting but it is the most natural you know if you think about users engaging with a page they're typically looking at things in a vertical maner manner scrolling up and down uh so things are going to be stacked in a in a vertical column uh there are of course other use cases where aligned to parent or row are more appropriate I encourage you to play around with them so you can see how those behave but we're going to start with column as as it's a great uh default setting here once you're on a responsive setting you have all sorts of options here for controlling the distribution of elements within that container um so these these settings are specific to Containers the page is one giant container um you'll find other ones here as well groups popups things like that U but you can control the minimum widths the maximum widths the heights all sorts of things like that the conditional tab uh is where you can change the appearance properties when some condition is true uh so for example if I am logged in or if the current user is logged in maybe you hide the login button because they don't need to see it they're already logged in or maybe the reverse if they're logged out uh you know you show a uh login button so that they can become logged in uh that that's really just tip of the iceberg there's a lot of really fine tune customizations that you can add to conditions so that you can change how things appear you know in that moment or who depending on who the person is or what their relationship is to the page to the data that they're working with okay all right so on this page now that this is set up as a column we're going to add a header and a footer so kind of creating a frame very traditional um so that you have kind of uh navigation areas for your users and menu area things like that I'm going to start start by creating a group I'm going to click on group here and then I'm just going to click and drag it'll resize itself on the page and then I can fine-tune what I want to do with this first thing I'm going to do here is rename my group to group header that way I can find it more easily as the app grows I'm also going to go into the appearance tab here and just change the background style so that I can see it a little bit better because by default there's no background color so it looks kind of invisible so let's change it to one of our color variables here this bright blue all right so there is my header now I'm going to create another group um you have tons of shortcuts to help you duplicate clone things if you rightclick you have all sorts of options here you have other editing menus uh you know like you might find with all these sorts of editing tools um so I'm going to rightclick and copy I can use keyboard shortcuts but I'm showing you kind of the long way around so you know what's available and then I'm going to paste here so now I have two groups I'm going to rename my second group to group footer like this and of course I don't want my footer stacked right below my header I actually want it at the bottom of the page so if I go back to the page uh level of the property editor head over to the layout I can change the alignment style so that can help me control the distribution of the elements within the page right now it is top aligned so everything just starts at the top of the page and works its way down but I'm going to choose here to space everything between uh or to have space in between and what that'll do is it'll take the first element in my column and then the last element I only have two right now but it'll spread them out to the top and B bottom of the pages and uh that way anything that's in the middle will be evenly distributed so if I add a button here as an example um it's going to be right in the middle of the page if I add a text now both of them are going to be evenly distributed in the page again I can control the sizing further with these individual elements but you'll see how that alignment style at the page level keeps my header and footer spaced out so that they're always at the top and the Bottom now what I will do here is add a group in the middle of my page to serve as kind of my primary container for the form my my signup form so I have some resizing to do here because this is certainly not going to be enough space for me to create a signup form I'm going to rename this group sign up and uh we're also going to give this a border we'll give it a solid border so we can see it we'll leave it white uh but we'll have solid border we'll maybe make some rounded borders there so a little bit of a shadow style um so that we have you know kind of offsetting it a little bit from the background okay so let's change the sizing of this a touch I'm going to go into layout of my group signup and I'm going to give this a Max width I don't really want it expanding to the full width of the page so let's give this a Max width of let's say 600 pixels um and we won't have a minimum width for now if I wanted to address kind of a mobile responsive down to you know smartphones I might include a minimum width so that it doesn't squish too much um for now we'll leave this with no minimum and we'll have a maximum of 600 I also want this in the middle of my page I don't want it over to the left so I can change the horizontal alignment to centered notice you see all these different variables that help me control the exact placement of everything now this is also quite short uh in terms of its height so here I will give it a minimum height of let's say 400 pixels this can be fine-tuned uh but this is a great place to start so you see now we have a kind of frame a little blueprint or a wire frame of where my elements are going to go this is what I always suggest you do when you're first getting started is roughly configure the placement of your primary elements so that you know like what the space is where everything is going to live all right so the all three of these elements are containers so I can put stuff inside of them so for example I can add a button inside of my group up here to say uh let's change the styling of this so that it's not lost inside of the group it looks like it has the same uh color let's change it to one of these Styles here um this is a predetermined style that uh is managed in the Styles area in your editor you can check that out that's where you can create all sorts of presets for all visual appearances for your buttons your text your groups your uh images you know even in conditions uh very very powerful section that can help save you a lot of time and stay super super consistent in your designs um so I'm applying one of those preset Styles and let's say that this is uh you know log out something like that right and I can Center this inside of uh my group it looks like my group oh my group is still currently a column um I'm going to change this into a row so that the button and anything else I put inside of this group Stacks horizontally so unlike the page which is a vertical column stacking the row is going to stack horizontally so let's add another uh text here so that you can really see this inside of the group and uh looks like the the text is set to a black or a very dark blue so let's change this to White okay I'm going to say my new app let's say that this is just the name of my app here and we're going to give it maybe a bigger sizing so that it's easier to read make it bold something like that okay and then in the layout I'm going to have the boundaries of this text fit to content because I don't really need that much you know space for that text to take up if it's just going to have these three words I'm also going to get rid of the minimum width so you see the boundaries of that text is now perfectly around the content that I've typed in I'll Center this as well and just like with the column distribution I can change the distribution of um these elements inside of the group so first thing I'm going to move this text to the front of the row right I'm going to have it swap places with the button then at the group level I'm going to space them out differently um I also have this space between option just like I did with the page so you see now they're all spread apart um but with this one I might want a little bit of padding to the left and right I don't really want them hugging the very edges of that group so I have a couple of options I can go with this other spacement spacement this other containment container alignment uh to have a little bit of space around so you see that so it'll keep things evenly distributed with even spacing on either side and also in between that might be a little bit too much of like pushing in in between there so if I return this back to the space between option and scroll down to the very bottom I can add padding to the group so on the left I can say let's add some 20 pixels just kind of push it over and then also on the right 20 pixels so I've created some space inside of the group to push everything in um by that amount okay so again you can spend more time with this like really custom configuring uh the exact placements let's move on to our form so I'm going to add a few inputs to my form so that I can collect information about my user and get them signed up okay so this input here notice how it is positioned just in the upper left corner of the group um and that is because the group is a column style and the input is horizontally aligned to the left so I could move this over to the middle um if I wanted to do that I'm going to add a couple of more inputs here let's do uh let's do three inputs total uh and one of them is going to be the date for our date of birth and I'm also going to add a picture uploader so that the user can upload their profile picture so this picture uploader I'm also going to move it to the center now notice how everything is just touching each other side by side I might want to give this a little bit more breathing room so at the group level another setting that I can work with here is Gap spacing if I check this box I can add some gaps between the rows created in the column so let's add maybe 20 pixels of Gap spacing there you see how that spreads that out a little bit more that's a touch more comfortable um and inside of the group I'm also going to add some padding as well let's do padding all the way around maybe 20 pixels of padding top bottom left and right just so that again nothing is really touching the the borders of the group group um to keep give it a bit cleaner of uh of a styling there so these inputs also have different settings that we can configure let's say that this first input is for the user's uh email address okay so I'm going to change the format so that bubble knows this this is an email technically an email is just a text but with credentials um these are special formats so you'll want to make sure that you um tell bubble that this is where the email is going to go I'm going to rename my input to say input email down in the second input I'm going to make this my password okay and we're going to call this input password you see how there are placeholders here this is an optional thing but you can put Little Instruction for your user you can leave it blank um uh and also with inputs you can pre-populate them that doesn't really apply here for this sign up form but you can definitely have inputs automatically fill in with some value if you'd like whether it's a static value or something Dynamic from your database is up to you and then for this input I'm going to set this to a date um actually you know what I'm going to replace this with a date picker which is a different type of input so I'm going to rightclick this and I'm going to replace the element type and choose date time picker it's a different type of input with uh a few different settings where you can see a calendar um to choose a date it's much more user friendly in that way so there is our date picker um and then my image I think it's all good as is now the last thing I'm going to add is a button to my screen okay and then this is going to say sign up so an action item oops there we go sign up uh is our action item here and this will trigger our workflow all right and I'm going to move this to the middle of the page okay so the user will fill this out you can preview this page immediately once you click on this preview button you can see exactly what it looks like it should be you know what you see is what you get based on how you've designed everything in the editor if you see other Behavior happening other than what's in your editor you may have conditions at play you may have uh you know dynamic values or um you know you may have workflows that might be affecting things so this is when you know you'll want to start learning how to troubleshoot things and understand where do I need to make an adjustment so that um the behavior is exactly what I expect and I also have my debugger turned on this is a troubleshooting tool I'm going to turn it off for the moment we'll talk about the debugger here in a moment but um this once this is uh removed now I see exactly what I expected what I design in the editor my header at the top the footer at the bottom and my sign up group in the middle okay uh so we're going to go hook up the sign up button so that we can actually create a new user record when the user fills out the form so from the button I'm going to click on ADD workflow and this is automatically going to get me started in my workflow with my first event when the button sign up is clicked I can also set this up manually I don't necessarily have to come from the button I can go to the elements list here and choose an element is clicked I'll have to choose the element itself right you would otherwise see a list here to select all of these things here are clickable um but that was a nice little shortcut from the property window at the button level so when this button is clicked I want to sign up a new user so that is found under the account settings we have all sorts of details here actions that you can uh use to manage user accounts and I'm going to run the first one here sign the user up you'll notice that bubble is asking me for some required details email password is bare minimum um so the email I'm going to map this field that bubble is asking for to the input that I've named email uh input email uh so that I know that that right value is going to the right place here and from the input I'm going to go to its value so it's literally what the user typed in same thing for the password you'll notice that I have a lot of different options to choose from here and as your app starts to expand you know you you're going to have to navigate to the right Pathway to get to the values that you need we're keeping this very simple just mapping our input values to the the settings here with this action I could of course have another input for them to retype their password this is an optional setting I do recommend it um but that way uh it ensures the user doesn't have a typo with their password now I also have other fields that are custom that I want the user to sign up with um so I'm going to add another field here to Define and this is going to be from my custom field that I've added in the user data type so I believe I have one field out there for the first name so we'll map the first name here to that input uh oh looks like I didn't actually let's go back to the design I imagined it let's add one more input here for their name I'm going to just cop I'm using my keyboard shortcuts to copy and paste looks like it copied it um to the very end there so I'm going to go over to the layout bring it back to the top up here by selecting make first and we'll change this to a regular text for the user to type in we'll just do their first name here and I'm going to rename this input to say first name like this that way I can identify don't want to reference the wrong input all right so here the first name and I can start to search to to filter down my list um I want to map to the first name's value and I also have the date of birth which is going to map to that date picker so there's the doob we'll navigate to the date Pickers value and same thing for my profile picture which is an image field so profile picture here and this will map to the picture uploaders value right so they click on the button bubble will create a user record with this action um with all other data types you're going to use uh a regular create a new thing action which is part of your database users are a part of your database as well but they're a special type of data type so bubble has very specific actions for creating users and managing them um so once the user is signed up what I'm going to do is reset the inputs this is an element action just a little visual for the user to know okay we're signed up there's all sorts of other things that I can do from here as well if you think about a signup flow what do you want to happen you want to send them an email you want to navigate them to a different page in your application maybe you want to show them an alert message that says okay you're signed up all sorts of things so it's just a matter of sequencing those actions here so let's preview our page I'm going to refresh the page here and create my first user in my application so obviously I haven't put in placeholders I don't also I don't have any labels for this but ideally I would have text elements that I've also added to this group above each input to help these identify exactly what these inputs are for so um my first one is my name so we'll say Gabby the second one is an email address we'll say Gabby test.com and then a password I'm just going to type in a password Here you see how it conceals it um and then we'll choose a date here for date of birth and I'm going to upload an image all right so it pulled open my file manager just from my computer and I could select an image from there now I'll click on sign up you see how all of the inputs cleared out on the data tab over in app data and then I can select the user table here I can confirm if my user was created or not and there they are there's the email date of birth first name I didn't set up the last name so that's left blank and there's my profile picture this was the creation date and time these are built-in timestamps I can also go over to the file manager um and I should see the photo here as well so this is going to contributing to my file storage there all right and so that's a very quick uh kind of Crash Course into setting up your page layout to get things started um and a quick way to set up a new user now when it comes to customizing your uh functionalities and interactions in your design there is so much that you can do um we're going to take a look at a very simple example here with uh managing our users so I have gone ahead and created two additional users in my database so that I have uh three in total uh we've got Joe Bob and Gabby here they all have a a profile picture and they all have a first name now I've created a table on a separate page in my application this is a new page here that I've called manage users um and there's a table element here that I can set up to display all of the users in my application in a dynamic way so all I have to do is tell bubble hey go find all of the users and then populate this table with that information now I am in control of the design of this table what I want to display um I'm also in control of which users it doesn't have to be everybody um this table element here is a a uh great container uh element that helps you create kind of spreadsheet like designs and I've set this up to search through my entire user database um unconstrained no filters but I could filter this if I want so for example I only want to see people who have a profile picture or who are born after a certain year I could add those constraints here and really fine-tune um that data retrieval because I have it unconstrained we're going to see all of my users all three of them in my table here you'll notice that the way that this looks in the editor is uh kind of like placeholders I'm not actually seeing those photos or seeing the exact number of users um here this is how I set up the instructions for bubble to then evaluate those expressions and then produce the results on the frontend preview here that your users will actually see so notice that um with my Dynamic row that I have here uh in order to show the photo I have an image Element image element designed inside of this cell and it's going to dynamically populate with whoever's picture um this row belongs to so current rows users profile picture okay this is an example of a dynamic expression to display something in real time based on what that data is so you know the first person could be uh Gabby the first person could be Joe maybe if I have my data source filtered first person might change um same thing over here current rows users email current rows users uh first name so I'm not actually seeing real names I'm just seeing my instructions to Bubble to evaluate everything and what it produces is the real data coming from the database okay now I've intentionally um displayed the first name inside of an input so that you can see an example of how you can pre-populate inputs with content so we're seeing you know something that I can actually type into and change myself but it's not actually going to change until I tell bubble to do it through a workflow okay so I could type all this in if I refresh the page um it's just going to revert back to the original uh the original name here so we're going to hook up a workflow so that we can see how we can now modify the record um so with this save changes button I'm going to start by adding a new workflow from this this is again going to create a new event and what I'm going to do here is run a make a change action this is under data and then make a change to a specific thing in this case the thing I want to change is the current row user I could technically change other things in my database if it made sense to here I have to go find it but in this case I have an immediate kind of shortcut to the parent data source which is the current rows user so now I'm modifying that user record what do I want to change about this user record I'm going to set up the field and tell bubble I want to change the first name because that's what my input here is going to be for um so the first name is going to equal the inputs value so let's go find the input I can kind of scroll through here I can also type in you know to filter it down inputs value I if I had other inputs throughout the row for the email for the you know profile picture for other details I could set up multiple changes all at once in this one action so by clicking this button I'm modifying that record and making a change to a specific field here um I can also you know show alert messages to the user to let them know that everything was successful but let's take a quick look at just what that one action does here and we're going to change um one of our users names in the workflow let's change Bob to Robert and we're going to click on Save changes now I clicked on the button the workflow ran I don't really have a visual indicator that anything happened so this is why it's really important that you think about your users experience as well bubble's not going to assume to show anything to your users it is up to you to create those interaction so I would probably want to show like an alert message or maybe a popup or some some kind of an indicator to the user but let's check our database I'm going to refresh the data down here and we're going to see that Bob has been changed to Robert so the change went through right you have other uh manipulations for the database other actions available to you I could delete the whole user if I wanted I could copy records um you know again I could continue creating other things here and I am not restricted to just modifying that that row user I can go search for other records in my database if maybe I need to have a ripple effect of changes here just depends on what you're doing few other customizations you want to start to pay closer attention to are things like your conditions um to maybe change the appearances or maybe restrict access to certain details let's say that I should only be allowed to change my own first name I'm currently logged in as Gabby I recently signed up as Gabby um so I could add a condition here to this button to say if the current user current row user sorry the current row user is not the same as the current user so the current user is the person looking at the page then I'm going to disable this button in fact I'm going to hide the button altogether I'm going to change the visibility property of this button and turn it off that visibility property lives in your uh layout tab here and by default everything is visible that you add to the page so you can turn that off if you wanted to start out hidden and then maybe in a workflow or with a condition like this you can turn it on um but I've kind of got the reverse I'm going to have it currently everything's visible but with this condition I will disable it so let's refresh the page here and we'll see what that did just with the condition okay no workflows or anything happening here again I'm logged in as Gabby so you see that for Gabby only that's where that button's available I don't have the ability to click on that button for the other users I would probably want to do other conditions on the input for these other users where maybe it's just a text instead of an input um so that's how we can start to apply those conditions there conditions can also be added to your workflows in fact you're definitely going to take advantage of those as your app starts to grow you can put conditions at the event level you can also put conditions on the Action level so you can really fine-tune custom flows and Pathways that everybody's taking with any sequence of actions that you create here um and then finally don't forget about your Styles this is uh the fourth tab here in the editor and this is where you can uh configure all of these preset appearance properties so it can really save yourself time um on how things look so for example here are all of the Styles um the moment that I have for buttons you know the flat button outline button and I can change those styles by going into kind of what looks like a property ated or here but this is specifically for the style um you know for the the sizing the colors you know there are some conditions that you can create here as well it's a part of a style layout settings and all of that I can add more Styles um within this area I also have style variables to control um kind of my app wide colors completely custom to your own application now there there are of course many other capabilities and features available to you here in the editor we've really just gone through the very very basics of putting together a simple feature in a bubble application but I'm going to walk through a few other areas that you'll want to be mindful of so that you know what's available um as you start to progress in your development the first thing is to look through all of the different workflow actions so you understand what the possibilities are um these are organized by different categories So within the account category you have different user management um capabilities here logging people out signing them up with social networks you know updating their credentials creating temporary passwords for people so you can absolutely create systems where users invite other users or create accounts for other people um that's very popular with Team uh Team environments uh a few different Navigation flows to move move users from screen to screen obviously all sorts of data management operations for your standard crud operations create reading updating and deleting um some email actions and again keep in mind if you do install plugins you may see extra actions um and workflow events getting added to this area so just be mindful of that the plug-in details will also um list those things out under payments I don't have anything listed right now but if I had for example the stripe plug-in installed the one that uh bubble has published you're going to see a bunch of actions here creating a charge setting up a subscription you know setting up invoices things like that um analytics is another one that's going to uh show up with uh plugins that have been installed um element actions are more for the visual so if you need to show or hide something if you need to reset um the contents of a group for example uh there's some animations that you can Implement as well uh in general you know most plug-in actions are going to appear here if they're are Bubble created plugins you'll typically find them within uh the bubble categories but any custom plugins that you add from thirdparty Publishers uh if they offer an action they'll show up in this here and then you have a couple of more advanced triggers for your work workflows um within the custom events here uh and also within the event triggers up at the top right so there's some additional things that you can do to really control the timing around your workflows the way that data is passed around and so on now if you head over to the settings area of your editor there's also several different tabs of configurations that I do recommend you go through take a look around see what's available to you I want to point out a couple of things here um within the general tab you have a few other privacy settings that you want want to pay attention to in terms of defining a password policy who can access your editor things like that some other General appearance properties that you want to take a look at bubble has a built-in connection to Google Places um and location services so if you're working with maps or addresses in any way where you want to calculate distances you want to extract you know the street name from an address things like that um you'll want to enter in some API keys so that you can take full advantage of those features under the domain and email tab this is where you can connect your application to a custom domain bubble doesn't sell domains you'll need to purchase those from a domain registar like uh Blu host um squares spaces one now Google domains things like that uh and bubble will give you the instructions so that they're connected properly bubble also has a built-in connection to send grid which is an email service provider so right out of the box you'll be able to send emails from your application now you can further customize it to ensure that emails are coming from your own custom domain you can also choose to use an integration if you prefer to go with a different email service provider it's up to you under languages you have a lot of capability here to um create system messages um work with error handling messages if issues show up and you need to present that message to your user bubble has a whole bunch of these system messages already created and already translated to um all of these different languages that you can see in this drop down here this is also an area where you can create custom translations if you're looking to do a multilingual app very very powerful section that gives you a lot of control if you have um SEO requirements that you want to make sure you're meeting take a look around at this setting here this is where you can set up your little metadata around your apps title pictures description things like that and of course bubble applications become very powerful when you take advantage of their API capabilities so the Bubble app itself exposes um apis that other systems can communicate with so you can actually expose your data through API if another external system needs to grab information from your database you can give it that access by default it's all turned off you have to enable these things you've got to create the privacy rules for them to work properly um but this is a very powerful section a little more advanced but um know that you have all sorts of extensibility options by communicating with the outside world if you do plan on working with other people in your bubble editor there's some collaboration tools you can invite them to have access to your app while keeping it private um and a few other additional you know custom features around bubbles versioning you know every once in a while bubble release um some bigger upgrades and improvements to the platform so you can upgrade to the latest versions um if you're working with kind of a SAS system or a very large enterprise system where you need to create multiple sub applications you can manage those here as well so um in terms of the design some other things to be uh made aware of bubble has this concept of a reusable element that uh can help you repeat your designs across multiple pages that way you don't have to redesign them and re- uh program them over and over again a very common example of uh where a reusable element is helpful is your header right typically you'll want to see something like this on all of your pages and rather than having to rebuild it every single time you can create a reusable element out of it it's kind of like creating a global element that you can copy to multiple Pages if you ever need to make an edit to one of them you do it once and it'll reflect everywhere you have added an instance of that reusable something like this that I've already started here I can convert to reusable element as well I can rightclick on this and I can say there it is convert to a reusable element once that happens I can give it a name I can call it something like main header and once that's created bubble will take me to kind of a special editing area for this element um I might need to reset my color on this here looks like it stripped it out let's change this back to that blue and it's kind of like I'm editing a standalone page you'll see here now my re usable element lives down there and so on my index page let's get rid of our original header now I can add my main header here which is my reusable element I'm going to select this and add that there and it it's this is now the design of kind of my Global element if I go back over to my manage users page I can also add an instance of my header so if I wanted to change the color for example or change the wording here or add other elements I do it within the reusable editing area and it will automatically reflect everywhere I've added that design it's great for multi-page applications to really save you a lot of time make sure that things are um consistent now the last area that I want to talk about and this is also for more advanced applications is that you do have uh a backend workflows area so I'm going to show you what that looks like going to have to enable this under the API subtab I will check this box here and what this gives me this is an area that you won't be able to run until you're on a paid plan but you can configure things um now I have this section here that I've checked this box backend workflows in my page drop down list so this looks very similar to page workflows but notice that this design tab is kind of faded out this is not tied to any specific page this is where you run server side workflows it's an incredibly powerful section of your editor where you can run things on a schedule you can have things running on a loop um they kind of happen behind the scenes so let's say that we want to schedule an email to go out to our users a week from now a year from now or maybe make a database change every single hour every month at the end of every week on a certain at a certain time you have complete control over that kind of scheduling and looping logic if you'd like this is also an area where you can have external systems trigger things to happen in your app let's say that you have a payment Gateway integration uh you you know create a new subscription or someone is going to make an invoice payment let's say that their credit card fails you can have that payment Gateway notify you immediately so that you can take an action on it so you can set up a workflow here to kind of wait for an update from an outside source so that you can update your database you can send an email right so you don't need a user to kind of babysit this area and have to click on a button these are serers side workflows that can run behind the scenes incredibly powerful especially if you're doing like bulk processing um or have anything on a schedule and finally when it comes to developing an application you're absolutely going to run into issues and bugs and things that you need to troubleshoot or investigate you know why something isn't happening the way that you intended it's very normal we can't possibly design these apps you know perfectly right from the beginning so bubble has a handful of tools to help you uncover any issues that you may be running into uh the first one is your issue Checker up here at the top anything that is technically not configured properly so if you're like missing a required setting they're going to show up here in the issue Checker bubble will turn this red it'll show you the number of issues that you have and this is something to give you kind of like a to-do list so that you can address those and make sure everything is good to go you actually won't be able to deploy your app to a live environment until all of your issues are resolved it's a very good thing to have this issue Checker here another uh tool that's available to you is your debugger um so you'll see here in the URL uh that we have this kind of enabled here and that's that toolbar that's at the very bottom and this can help us evaluate and inspect um all of our different components on the page that we're currently looking at whether it is um the design or the workflows this is kind of broken down into two parts um the debugger with these buttons here normal slow step by step this helps me debug a specific workflow I'm actually going to refresh my page here so that you can see um I'm going to go into the step-by-step mode and uh we'll I'm going to change my name here we'll say Gabby edit and then I'm going to click on Save changes and so now it's going to reveal all the steps that I've created in this workflow to help me really evaluate exactly what is happening what expressions are being used what conditions may or may not be passing because if something happens that I didn't expect with the workflow I want to uncover why um so workflows are one part of the debugger but also this inspector on the uh right side allows me to select any of my elements I can again really break down my Expressions I can see what all the properties are and that way I can see if something's not lining up with how I designed it in the editor remember that your editor is really made up of a bunch of um placeholders you know they instructions that you're putting together so it may be difficult to really preview until you see it in the moment uh and and if something is not behaving the way that you want and it's hard to kind of see where that disconnect happen that's where the the debugger can be helpful for you um another area that is helpful for troubleshooting is your server logs um so here at the very last tab there's a lot of metrics and analytics available to you for your app um and this second subtab here for the server logs helps us see all of the activity that's happening in the application after it's happened so we have time stamps we have IDs we have the email addresses of the people who ran them this is the uh log of what I just did on the page here which was to change the name of that user so I can see every single piece of what went down um to potentially uncover any issues um sometimes this is the the you know most appropriate route to help you find things and then the final uh tool here which you'll find all throughout the editor are a lot of different powerful searching tools so we've seen a few of them already you know when you're looking at your design you can search through all of your elements here um I can you know type in to filter those down your pages are going to explode in the number of visual elements so naming them properly and being able to search through them is going to help you move through your editor a lot faster you can also search within the workflows area as well and bubble has a dedicated app search tool this magnifying glass in the upper right corner to search your entire application across many different um uh uh from from many perspectives so I can search uh through any anything that uses a particular field for example any expression any condition um any reference to a specific field or I can search by anywhere I'm using um a send email action or a make a change action uh or anything that uses a particular data source this is very powerful once your app starts to grow in size especially if you start to make changes that can have a ripple effect of things you'll want to check out your entire app and make sure that you've resolved all instances of what that change uh needs to work with all right I hope this was helpful and if it was the content you're about to see on the next screen will help you take it even [Music] further

Channel: Coaching No Code Apps

Views: 4,055

Keywords: bubble.io, bubble for beginners, bubble.io tutorial, bubble.io overview, how to build an app on bubble, no code, no code apps, bubble app platform, bubble.io platform, design, workflows, forms, build a form on bubble, responsive design, bubble responsive, bubble 101, getting started on bubble, getting started with bubble, form design, bubble editor, navbar, app setup, editor overview, styles

Id: 8_kShAOR_6Y

Length: 57min 42sec (3462 seconds)

Published: Wed Apr 10 2024