Getting Started With Bubble - Key Concepts

foreign the premier web app builder with no code if you have an idea for a web app that you would like to build and you don't know how to begin you're in the right place throughout this course we'll guide you step by step on how to use the bubble editor the bubble platform and how to build your next web app with bubble by the end you'll have all the tools necessary to build something new realize your vision or even jump start your own business let's begin before we jump into building our first app and bubble let's familiarize ourselves with the key Concepts that'll be present in every app we create on the platform our bubble Journey Begins in the design tab on the index page also known as your app's home page there are several types of elements that we use to design our app but let's start with visual elements visual elements include text buttons icons images and anything else that is primarily useful for visual design these elements make up most of the interactive triggers that your users will click on next we have container Elements which allow you to organize the visual elements and any other elements in groups repeating groups pop-ups floating groups and group Focus elements each of these container elements can show data from your app's database and serve a critical role in your app's design in addition each container element has its own container layout that defines how the elements it contains are positioned for responsive design then we have input forms which allow you to create forms that capture information from your users you build these forms using inputs multi-line inputs check boxes drop downs search boxes radio buttons picture uploader and more input forms are the primary way in which your app will accept user-submitted data that you can save and modify later finally we have reusable Elements which allow you to design something once and reuse it across multiple Pages reusable elements come with their own design workspace independent of the page so you can drag any visual container or input into a reusable element then drag the reusable on the page as if it were any other element because it's reusable when you make a change to it those changes will reflect everywhere you've added the reusable element in your app when you're ready to see the elements you've added to the page you preview in what is called run mode this is how we view what your app looks like to the public and test how it functions when your users are interacting with it the bubble platform gives your app its own domain name which you can use to build your app on the free plan until you're ready to upgrade and deploy your app with its own custom domain to recap the design tab is where you add elements to the page that make up your app's design once you've designed these elements to your liking you preview your hard work in run mode next let's learn all about the property editor whenever you add an element to the page in the design tab a floating window accompanies it this floating window is the property editor and it's one of the most important windows and bubble let's take a look as it's named it allows us to edit the properties of whatever we have selected the property editor comes with three tabs appearance layout and conditional the appearance tab lets us control the look of the element and Define the contents of the element for instance here we have the property editor opened for this button and on its appearance tab we have a text area for defining what text should appear on it generally elements will come with a predefined style we'll learn more about Styles in the next lesson but for now let's just click remove style so we can see the different style settings for this element with the style removed we are now directly customizing the overall look of this element from many font properties to its color and even its borders next we have the layout tab in this tab you define the element's size and position on the page for responsive design as you'll start to see elements gain alignment controls through the parent container element they are in this tab gives us granular control over every element so we'll talk a lot more about the layout tab throughout this course as we build finally we have the conditional tab which allows you to Define conditional statements for the element and manipulate its properties depending on if the condition is true this is extremely powerful we can change the look the visibility the text we display or any of the available properties for this element to write a conditional statement we are given a drop down that has other data sources from our app and the page we'll talk more about these Concepts soon but for now to understand how we write conditionals think of it like a question that you ask yourself for example what property do we want to change on this element when the current user is logged in let's say we want to change this button's text to display something different we'll select the text property and rewrite the text we want to appear on the button when the user who runs the page meets this condition's criteria the element will display the properties that we conditionally changed if we had another condition saying the same thing the bottom most condition will be prioritized so bubble will evaluate conditions from top to bottom to recap the property editor is one of the most important windows and bubble because it controls the individual properties of what you have selected alright next let's learn all about styles when you drag an element on the page you may have noticed a default style was applied each new application you start comes with preset Styles like this for every element the style saves the visual look of the element and allows you to name it so you can create a style guide for your app if you remove the style from an element whatever style was applied will now be directly editable on the element instead as your app becomes more complex you'll find that updating each individual element style manually is not scalable on top of that it hurts your app's performance for consistency speed and efficiency purposes you'll want to create styles for all of your elements once and reuse them across any elements that should have the same appearance to create a style you can do so directly in the style drop down whatever design properties we had on the element will apply to this newly created Style to change these properties for this style click edit style which brings us to this style in the Styles tab the Styles tab lets you view every style that you've created and editing a style in the Styles tab is very similar to the design tab you're given a property editor with the same three tabs so you can edit all the styling properties right here Styles allow you to save the properties from each of these three tabs like the font the padding and any condition that would relate to how the element looks once you design your page almost all of your elements should have their own style Styles aren't the only thing we can reuse in the Styles tab we have style variables these variables allow you to set Global properties for your app's font and colors which you can then save and reuse on elements directly or in styles here we can set the app font so every element with text that uses the app font will use this font family by default so if a text element style use the app font we can now change the app font and the style will update its app font as well same goes for color we have numerous amounts of color variables that we can Define like the primary color for your app's brand the primary color for text within elements the primary text color background color Etc these color variables can be used wherever you assign a color hex value so you can do this directly on the element however Styles can use these variables to their advantage as well so if your style is using a color variable and we make a change to the color all of the styles that are using this color will update automatically making it incredibly easy to change the colors on a large scale we briefly learned about conditions in the design tab when we discussed the property editor here in the Styles tab we can create conditions the same way but only for style related changes the conditions we write here are saved to the style so any element that uses this style now automatically comes with this style conditional note that the conditionals we write inside a style will be overwritten if we add the same conditional directly in the property editor of the element if you wanted to see what the element will look like when the condition is true you can toggle this off on button to view a preview in addition when a condition affects the style of an element you have the option to add transitions transitions allow you to animate the before and after state of the element when a condition occurs for example when a button using the style is hovered we change the background color without a transition this change will happen abruptly but with the background color transition it will smoothly animate to its new color we can also customize the duration and the ease of the animation curve right next to the transition we can even set a style to be the default which means it'll be applied automatically anytime that element type is dragged on the page now that we've covered elements the property editor and styles we're going to learn about responsive design responsive design is when the elements on your page adapt for any screen size by default we are building our apps for desktop but as the page width shrinks for tablet and mobile we can fully control how our elements will be displayed to build a responsive page our page must use a responsive container layout there are three responsive container layouts that dictate how your elements are positioned they are aligned apparent row and column and each of them differ where elements are placed column will vertically stack elements on top of one another row will horizontally Place elements next to one another and aligned a parent will cut the container into nine positions based on its width and height to place elements in each of these layouts behave differently as the page shrinks for smaller screen sizes contents within columns will stay the same contents within rows will wrap to the next row and contents within aligned a parent will overlap therefore it's recommended that your pages and bubble have a column container layout and the groups you place on the page will have their own container layout in doing so your page will be comprised of group elements that are a mix between column row and aligned a parent let's take a look at an example here our page container layout is a column each of these sections of our page is put into its own group element and since a group is a container element we Define its container layout individually if we look at this page in the responsive tab we can see as the page gets smaller all of the elements start shrinking and their container layouts respond accordingly the responsive tab allows us to preview what our app will look like for any screen size by using this ruler to see the width we're targeting there are even presets for desktop tablet and mobile views so we can easily see what those would look like as we drag the ruler to the right the page grows and all of the elements will hit their Max width or if no Max width is set they will continue infinitely with the parent container the key to understanding responsive design in bubble is by understanding Min and Max width every element including containers have a Min and Max width the Min width allows us to Define how small an element can shrink and the max width defines how large an element can grow for most needs elements can comfortably use a Min width of 0 pixels so as the page shrinks the elements will shrink along with it regardless of how small it gets if a Min width is set and it happens to be a size that is greater than the screen size you want to Target the element will stop shrinking wherever its Min width is set for example if this group has a Min width of 320 pixels but the element can shrink to zero pixels the group will stop shrinking when the page hits 320 pixels meaning the element will never be able to reach 0 pixels keep this in mind as you build and make sure your elements have appropriate Min widths we can't add any elements to the page in the responsive tab but we can edit any of the responsive properties if things start feeling misaligned as the screen size shrinks you can control this alignment conditionally using current Pages width and manipulate the properties of the container element at any screen size so if we wanted this alignment to change when we hit a mobile width that condition will activate automatically when the page hits that screen size you can also control the element's margin padding and any other responsive properties allowing you to get extremely granular control with your responsive designs it's important to note that if your page is set to a fixed layout it will always stay fixed at whatever width and height is set so it won't be responsive and the ruler in the responsive tab won't work same thing goes for fixed width and height to make it responsive be sure to uncheck any fixed properties this is a primer on responsive design for more on the subject check out bubble Academy now that we have a full picture on designing and styling in bubble we're going to learn how we program in bubble using workflows bubble is built around a workflow-based programming system using events and actions a workflow is the event that runs a series of actions when triggered for instance when a user clicks on a button the event something will happen the series of actions each page has their own workflow tab where workflows are created and modified so if we're on the index page the workflows that we'll see here are only for this page to create your first workflow you start by picking the event that you want to trigger most of the time it will be when an element is clicked you can also start a workflow from an element in the design tab in this button's property editor we can see in the appearance tab the ability to start and edit the workflow attached to it whenever we start a workflow from the design tab like this the element is clicked event will automatically set up for us with this element already selected now that we have the event defined we need to add some actions so when the event triggers something will happen click here to add an action and the action window appears this window shows you all of the relevant actions that are provided to your app and each action is organized into categories depending on what they do anything related to users can be found under account data can be found under data so on and so forth for our first workflow why don't we navigate the user to another page in our app for example under navigation we can find the go to page action and if we don't already have another page created we can create one directly from the action some actions like this one will allow you to remain in the workflow Tab while creating things elsewhere in your app now when we preview this in run mode and click the button the workflow triggers and we are taken to the next page if the workflow should only run under specific circumstances you can add a condition like you would to an element in the design tab you can either add conditions to the event or to specific actions when you combine events actions and conditions you are programming but with a workflow based system if you need to insert an action before another clicking on the Arrow will reveal the action menu and you'll be able to add an action before the current one subsequently you can drag and drop actions to move them from step to step or right click for more control those are the very basics of how to set up workflows in bubble we'll be doing much more of this throughout the getting started course so be sure to stick around for later sections next we're going to learn all about creating our first user having users is a core need for many apps so every Bubble app comes with the concept of a user no need to build a complicated authentication sign up log inflow because bubble makes it super easy users can sign up log in log out and users can create accounts for others this is all made possible because of the built-in user data type which can be found in the data tab this data type comes with built-in Fields unique to users the most important one is the email field which stores the email address that the user signed up with to capture users we first need to create a form that collects their email and password back on our index page I'll go ahead and create a header and our sign up form for the input elements we'll set their content format to be email and password respectively this will format the user inputted text to expect email addresses as well as when a user types in their password hide the characters that they type finally we'll start a workflow on our sign up button and in Step One add an action under account sign the user up we're going to match the dynamic values of the input to the actions requirements here the action requires an email so we'll find our input email element from the list and select its value next we'll do the same for our password after the sign up action bubble will recommend the next step you take is to send the user an email usually this might be a welcome email that you would send welcoming the user to your app of course you can take other actions such as resetting the relevant inputs of the sign up form so the values the User submitted are reset or more commonly send the user to another page once they're logged in now that this workflow set up let's test this in run mode and sign up a user once we hit our submit button the form resets and the user should be signed up to our app to confirm this let's head back to the data Tab and navigate to the app data sub Tab app data gives us a database view of all of the User submitted entries for that data type currently we only have the built-in user data type where we'll see the entry for the user that's signed up now that our app has its first user we can build our page design around it using a data source called current user current user represents the current user using the app it can be found anywhere you add Dynamic data here we have a reusable element that contains our header that lives on all of our apps Pages inside we have a typical setup with buttons for sign up and login that we only want to show when the current user is logged out with current user as a data source we can write a conditional that controls the visibility likewise when the current user is logged in we can show the logout button we can also use current user to find any fields from the user data type like we do here displaying the current user's email we'll talk more about Dynamic data soon but for now current user is a main data source that you will use in elements like this and in actions now if we preview we can see our app is telling us who the current user is current user is made possible because of the built-in user data type all of our apps users are handled there but the typical actions to sign the user up and log them in are not the only ones at our disposal there are other ways to interact with the user data type first instead of logging in with a password you can instead send an email to your user with the magic login link if you do every time your user wants to log in the magic login link will email the user with a unique link that they can use once to log into your app and second you can also easily set up Social login with Google Twitter Facebook or any other platform that provides it through our plugin ecosystem just as I'm sure you've seen on countless of other web apps regardless of how you sign the user up they will all be stored as a user in your user database and unlike other databases since the user type is built in you may have noticed that the user database allows you to run as any user this is excellent for testing your app in case a user of yours encounters a bug or needs your help you can authenticate as them to see what they see this is also a key way to make sure your users have the right privacy permissions for your app but more on that later now that we've learned about the built-in user data type in the next lesson we're going to make our own data type and start to see how we can customize our app to whatever idea we have data types are the most high level concept you define when you build a data-driven application you can think of them like a kind of thing that you want to have data about in the database or to phrase it as a question to ask yourself what do you want this app to do later in this course we'll be making a project management app that allows users to create teams projects and tasks all of which are data types that we must create but before we do that let's demonstrate creating a data type with a simple example like a comment upvoting system this means we'll need to create a new custom data type named comment and add custom fields to Define what each comment consists of fields are your ability to Define additional information to store on a data type when creating a field it must be explicitly defined as one of the field types like text number dates yes no file image or even a custom data type for a common data type we'll want to add fields for the contents of the comment as text and votes as number when thinking of the fields your data type will need think about your app idea and what you want to achieve with it for example if we want our users to have profile pictures we can add a new custom field called profile picture that is Type image every data type comes with built-in fields for created by modified date and create a date which are automatically attributed when a user creates or modifies a thing of that data type we'll talk more about things next we can leverage these built-in fields to display the creator of the comment if they were signed in when they created it and we can display this user's profile picture next to the comment with our data types and Fields setup we can design a form so users can write their comments rather than dissecting this form now we're going to highlight what this does and explain more about it in the subsequent lessons so keep watching but know that we have a simple form for writing comments a workflow that submits the new comment a repeating group for displaying the comments and an icon for upvoting our favorite comments we can create read update and delete comments because it's a data type and we can do things with comments like upvote them and attribute them to the user who wrote them because we can leverage other data types like the user and the custom fields that we add to them in the next few lessons we're going to do more with this example while we learn more key Concepts let's talk about the word thing in the bubble language Feng refers to an entry in your app's database for example this comment is a thing and it has a unique ID representing it as do all of these things in this database you may be familiar with the word object or Row from other platforms or traditional programming languages but in bubble they mean the same as thing we refer to things when we want the user to do basic crud actions crud is an acronym for create read update and delete and in bubble we have actions in our workflows for performing these operations on a thing first we have a create new thing action this action creates a new thing in the application database for that data type for the type in this actions property editor select an existing data type from the drop down or Define a new one right within this event by selecting create a new type with our comment example we have a workflow when a user clicks on the right comment button to create a new comment but just creating the thing isn't all that our example does we also want to store the contents of the comment and the amount of votes so in the create new thing action when you click set another field we can find all of the fields on the comment data type and set them equal to any value in this case we set it equal to match the inputs value when this workflow runs a new comment thing will be created into our app data for the commons data type and if a user was logged in the thing will be automatically attributed to that user again thing relates to each of these that we store here for every data type you can also create a thing directly from app data this is extremely useful for testing as you build if you don't yet have a front-end form that creates a thing with the workflow whichever data type you have selected you'll be prompted to Define its fields and then hit create however when you create something like this you can attribute it to a user and the thing will instead be attributed to app admin so use this as needed bubble's workflow actions will also allow us to make changes to a thing let's say we wanted to allow users to upvote comments well using the make changes to a thing action modifies an existing thing in the application database if we want the users to be able to upvote comments we could add an upvote icon that can access the comment and use the make changes to a thing action like so when this icon is clicked We Run The make changes to a thing action and update the upvote field for that thing the action has context of the thing we want to modify so we can access the things fields in this case we can select this comments votes and add to it making our Expressions state that when a user clicks like votes equals this comments votes plus one or in other words whatever the vote count already is add one to it if we preview this each time we click on the icon we can see the workflow run and the number change as the workflow is updated this thing's upvote number we can also make changes to a list of things as it's common you'll want to edit multiple things at once this action is equivalent to make changes to a thing but modifies more than one entry to do so we must provide the list of things to change property with the list of each thing that we want to modify and then select the field we want to change in this example we would first have to retrieve a list of comments to properly set this up and of course we can delete things from the database with the delete thing action or we can use the delete list of things action the concept of thing is key to understanding the bubble language because it's how users interact with our app's database now that we've learned about thing we're going to learn about Dynamic data most information that you use in your bubble application will be dynamic and usually coming from your app's database but it can also come from other sources of data such as external apis or plugins in all of these cases you will use the Expression composer to Define an expression that will be displayed as an expression in the editor and evaluated in run mode for instance you will see in the editor current user's email which in run mode depending on who is logged in will display the logged in user's email the expression composer is a key element of the bubble editor that lets you build these Expressions without typing anything but instead by picking options in the drop down menu the system will automatically prompt you in the next menu with options that are available given what you have selected so far for instance if the first main entry in the expression is current user the next menu will offer options such as is logged in is logged out email profile picture Etc in bubble vocabulary the main entry or the first choice in a dynamic expression is known as a data source and all the chunks after it are known as operators like the email field or any of the expressions like first or contains the composer lets you build complex Expressions by combining different sources of data and different operators expression types are evaluated in the editor to validate the type consistency for instance if you're trying to display the current user's email in a text element current user won't be valid as it evaluates as user not text while current users email will be valid because it is text whatever the final operator of a dynamic expression is must evaluate to the intended type of content bubble has two ways for helping you catch issues in bugs in the editor we have the issue Checker which will alert you to any missing property or inconsistency when an expression is invalid it will be reported as an issue in the issue Checker and the whole expression will be displayed in red then in run mode the debugger is useful to understand how an expression is evaluated by inspecting the element itself we'll talk more about the issue Checker and debugger in more detail later now every time you see Dynamic data in an element or workflow you should keep in mind which is the data source which are the operators and how the whole expression is evaluating next we're going to learn more about type of content and data sources we've talked about the building blocks of responsive design user registration data types Dynamic data and things now we're going to dive into the next level of building your UI by exploring type of content and data sources container elements can explicitly declare a type of content and data source type of content allows you to define the type of thing a container displays and the data source property lets you select what the displayed thing or list of things is this is how we're able to build complex uis that display the data from our database and allow for our users to interact with that data for this to work the value of the data source must match the type of content let's look at an example here's a common scenario where we have a group that has a type of content for the data type user and the data source as current user the group contains visual elements that display the user's Fields such as the user's name and the user's profile picture all child elements that are contained within can access the fields from the data type that it expects and the data it returns will be the data from the data source given in other words these child elements are accessing the data from their parent groups type of content if we preview the page as a logged in user we can see that the current user is passed into this group as a data source and the text element retrieves that information and evaluates the fields as directly as it would even if it weren't retrieved from the parent group however once the type of content is set the data source can pull from anywhere so long as it evaluates to match the type of content for example if you had another group that also pulls the user and you wanted this to read from that group you can call out that group's type of content and read from that data source and use it for this group this is how you can really start to get creative with building your UI another container that can accept a type of content is the page a common example would be if we created a profile page and set the type of content to user now whenever we try navigating to that page we must pass in a user as data note that the page itself doesn't have a data source property but will instead pass this data in the URL so in our earlier example where we retrieve the current user we can start a workflow that when we click this element take us to the profile page and pass in that user our action will have context with the elements on the page that it can reference so we can pull the user from any data source and in the case of the current user we can also just reference current user when we run this workflow we are now going to that user's profile page since that's the user that is passed in and page is set up this way now have access to a new data source called current Pages thing or in this case current page user which gives us access to the user that we passed in in the URL this lets us easily build a profile page tailored to the current page user whose profile we're on in groups pop-ups floating groups and group Focus container elements the data source must evaluate to a single thing like this but for repeating groups it must evaluate to a list of things to display since the majority of container elements evaluate to a single thing it's important to make sure you are retrieving the right thing fortunately the issue Checker will let you know if the data source and the type of content don't match so you can fix it another important concept is that the type of content has to be defined but the data source can change for additional flexibility you can control the data source in the conditions tab of the container you can also leave the data source blank and have it populate from a triggered workflow this is extraordinarily powerful because it's useful to leave the data source blank and change it when something triggers keep in mind that changes made by actions this way will override whatever you specify as the data source directly on the element or as a conditional State until you run a reset action which will then restore the data source to its original setting now that we have deeper familiarity with type of content and data sources we're going to learn about repeating groups up until now we've only displayed a single thing from the database in container elements and while displaying a single thing is great for certain needs there are times when you would want to display a list of things and to do this we use a repeating group a repeating group displays lists of things either coming from your app data or from apis when you add a repeating group element to the page bubble wants to make sure you set it up correctly so it will warn you that you must have a type of content set once the type of content is defined the repeating group needs a data source that evaluates to be a list of things matching the type of content for example this repeating group is set to display comments so we retrieve a list of comments from the comments app data to search your app's database we use the do a search for expression which will search your application's database based on what type of content you're searching for as long as the repeating group's data source returns a list you can pull the list from anywhere like from an external API or even a field that is a list on a data type but for this example we are just pulling all of the comments in our comments database once this is set up we can focus on how to design the repeating Group by drawing our elements into the first cell and only the first cell the way it works is whatever is in the first cell the remaining cells will follow each cell represents one thing from our list to display our comments we'll insert Dynamic data and see a new data source available called current cells thing in the case of our common example current cell's thing becomes current cells common and when we select it we can display the comments fields from the comment data type for this text element we'll set the text to current cells comments content so when we preview we see every comment in the list from our data source behind the scenes our repeating group repeats the contents of the first cell for each item in the list and displays each unique thing whenever we customize the appearance of the repeating group we are usually controlling the cell itself for example when we change the container layout of a repeating group we are defining the container layout for each cell we can of course group elements within the cell using other container layouts for custom designs but the parent cells container layout is defined here by default we have rows and Columns of the repeating group as fixed values so that's how many rows and columns will fit into this repeating groups overall width and height if we uncheck fixed rows and columns we have control over the Min height of the row and Min width of the column so we can control how many cells are displayed given the size of the repeating group control like this allows us to create flexible list layouts by unchecking fixed we've also revealed more properties at our disposal which will allow us to design interesting looking lists for our app for example we can control the scroll direction or if we didn't want it to scroll we can have this repeating group show everything in the list immediately in our example we are currently retrieving a list of every comment as we haven't constrained the search otherwise but if we only wanted to retrieve comments for a particular thing like a post we need to narrow our search to do this I've gone ahead and in our data tab added a new data type called post that comes with its own fields and on the comments data type added a field that is post this allows us to create a relationship between comments and posts and later in this section we'll learn all about connecting data types I've also moved our repeating group to a page that has a type of content as posed connecting the types like this is key because as your app grows you'll need granular control over what you want the user to see so it allows us to constrain searches like this where we search for comments where the post equals the current Pages post we can also sort the results of the search by descending order so the most recent comments show up top now if we preview this we aren't seeing every comment in our database only the ones that relate to the post we're viewing repeating groups are the way to display lists of data and with some design you can customize it to look like a list of cards a table or whatever your app requires now that we've seen how it all interacts we need to make sure only the users with the right permissions have access to do this we're going to create our first Privacy Rule by default your data is not secured until you set privacy rules all data created by your users or yourself can be read by anyone this is appropriate for things such as comments on a Blog where you'd want to share it with the world however many apps involve users submitting information that you don't want to share with the world such as their names and emails or comments meant only for people they already know anyone with some programming skills can view all of your app's data even if there isn't a page in your app that explicitly shows the data to users you might be thinking so how do I secure my app well this is where privacy rules come into play you can find privacy rules in the data tab under the sub-tab Privacy with the right Privacy Rule in place they guarantee data is only shown to users who meet the expected criteria and because privacy rules are enforced on the server it makes them secure let's take a look at an example Privacy Rule with our post data type there are two parts to a Privacy Rule the condition that must be met and the permissions that are allowed if that condition is met we write privacy rules like we do other conditions like on elements or in workflows but we are only given access to two data sources one for the data type and one for the current user we use these data sources to make conditional statements since we are on the post data type let's limit visibility to only the Creator the easiest way to think about how to write a Privacy Rule is to use a statement like I want users to access these permissions when this posts Creator is current user using this post we gain access to the post data types Fields such as its creator and by comparing it to whoever is the current user we are now checking to see if it's a match and if that's true then that user has access to whatever permissions we check for instance let's allow that user to view all the fields on the post data type find their posts and searches and any attached files now we've defined what the user who meets this criteria can do but you might be wondering if they don't meet the criteria what permissions do those users have each Privacy Rule comes with the permissions for everyone else panel think of these like the default permissions for the users who don't meet any of the above rules in this example if you aren't the creator of the post let's uncheck every permission from everything else so only the creator of the post has permission if we preview a repeating group searching for all posts half of our posts won't show because we aren't logged in as the user who created them we can only see the posts that we've made when you're first building privacy rules are often a cause for why things are not appearing for example if we allow everyone else to find posts and searches and allow for the Post created by field to be visible we will now see everyone else's entries however we won't see the actual contents of them since that field was not checked and in fact if we inspected this element we can see that certain fields are being hidden due to privacy rules we recommend that as you get more familiar with bubble and creating data types you set up privacy rules sooner rather than later because it's all too common to forget to add them or force you to rethink your data structure later to incorporate them it's also easy to forget to add a permission that should be checked and oftentimes you may be left confused wondering why something isn't displaying and the answer is usually to check privacy rules privacy rules are additive so if a user meets multiple conditions they are granted access to all of the permissions combined it's key that your app has privacy rules so you can control who can view what and none of your data is left unintentionally exposed for more info and privacy rules be sure to check out our in-depth tutorial next we're going to learn about connecting data types how should I structure my database is a common and important question luckily your bubble database is quite flexible and there are many right answers it's also easy to fix later on if you realize you've made a wrong turn there isn't one catch-all for how you should structure your data because it's essential to structure your data in a way that can scale with your specific app in the data tab we have the data type sub tab whereas we previously learned Define what we want this app to do when you define a new field on a data type you can specify what type of field it is which means it can even be another data type this is how we connect types you may be familiar with terms like one to one one-to-many or many to many when connecting types together in bubble you don't explicitly declare relationships like this but you can still easily achieve the same end results this means you don't have to tell bubble which specific field is the unique ID for the related thing because it will connect the whole thing regardless when you specify another data type as a field you're creating a relationship from this data type to that one you may already be familiar with this type of relationship from our earlier comments and post example where our comment data type has a field for a post allowing us to search for all the comments for that post this is one of the most important relationships to understand when you're first starting out this relationship allows a single comment to be related to a single post so when we search for comments we constrain the list the search gives us to only look for comments that are for this post the post field would be defined when we create a new comment and the post field gets its value from the current page post that we're viewing you can also link this field directly in app data using the primary field for a thing for example here we have this post and here we have this comment we link the two together by connecting their unique IDs if we edit this comment we can see our field for post if we know the post's unique ID which is not something you can easily remember we could type it in but if you are going to be testing your app frequently this way you may want to change the primary field so you can search based on something more human readable like the post title then when you type in the title you can connect the appropriate post you can set primary fields for every data type here in app data you can also make any field a list of that specific type therefore you can specify whether a field should relates just one thing of that linked data type or to a list of things under that data type this means that instead of searching for comments where the post equals the current page post we can just use the current page posts list of comments now that you know you can either reference a single data type or a list of data types it is up to you with how you want to structure your database for your app but as a rule of thumb if your app will need to store more than 100 things on a list then you should make it its own data type and do a search for it rather than have it as a list on a field the more things the lists have the slower your app will perform however for smaller list of things a list field will be faster than doing a search so it comes down to knowing your app's needs and the best way to figure that out is to ask yourself will more than 100 users need to create this thing or in the context of our example is it possible that we'll want to store a thousand comments on a post if so structure appropriately with the right data relationships your options for Building Things become infinitely easier throughout your app and there's more ways that you can connect your data types together but focus on these two for now and make sure you understand the difference that's the basics of connecting data types next let's look at parent-child hierarchies understanding the relationship between elements and their parent container is key to developing a deeper understanding for building and bubble styling your app to look like your intended design is easy to do by matching properties it's when your design and data needs get more complex that understanding the hierarchy of how we build is key the top level parent element is the page it defines the container layout that the page uses for all of its immediate child elements and it can have a type of content defined as you build you inevitably structure your pages with container elements and mostly with group elements which can set their own type of content data source and container layout for example if we add a group to this page we can already see the parents container layout the page affect this group's position which we can control in the group's property editor where we have position controls based on the parents container layout that is set to keep going this group can have its own container layout and if we add elements to it it becomes the parent with its own controls in any child element it has inherits its position controls so on and so forth this is the responsive design hierarchy as we've seen if we set a type of content for this group the child elements it contains will have access to the parent group's things fields and this relationship can keep going no matter how many nested levels deep you want or need to go this is the data hierarchy for your design these two hierarchies are key to call out as you think about how to build the UI for your app let's take a look at a typical page and see them in action here are the page is a column and on the page we have a group that is row no type of content or data is set so far this row holds two groups where one is dedicated for a sidebar and is a column the other is dedicated for content and is also a column so already we have page column main group row two groups that are both columns we'll add some more groups to the content section and these groups will have their type of content and data source defined their child elements will then pull from their parent groups type of content we even have a group that has a type of content and data source and then an inner group that is mimicking its parent groups type of content and data source just so its child elements can have access to both passing data this way is called inheritance this inner group is inheriting its parent group's info but inheritance isn't the only thing to call out when working with the data hierarchy this group over here is referencing a group from all the way over here which as we just learned is the one inheriting its parents data so the ability to reference data is not only just from the direct parent but any container on the page can reference any other container so long as it matches the type of content as you continue to grow your skills when building your app remember how these hierarchies work as you plan out your design with bubble in mind all right next let's learn more about reusable elements reusable elements allow you to design something once and reuse it across multiple Pages they come with their own design workspace independent of the page after you've finished designing your reusable element you can then navigate to any Page's design workspace and drag the reusable element onto the canvas reusable elements are really useful for grouping certain functionalities that should exist on every page together for example if you want a header that triggers a signup pop-up you should build it as reusable as much as you can build with reusable elements in mind as it will make the editor lighter and make your app easier to maintain plus it's a good way to create reusable workflows as each reusable element has its own independent workflow tab you can even add reusable elements inside other reusables to stay organized each reusable can set the type of content inside the reusable workspace then each reusable instance on each page will have a place to set the default data source of that particular instance to match the type of content you can also use the display data actions to change this data source as well as show and hide actions just as you would with any element for those looking to build single page applications consider adding every view as a reusable element and hide and show it conditionally on one page of your app there are many use cases for reusable elements so be sure to start adding them to your apps sooner rather than later since bubble is very open-ended you can and probably will make some mistakes as you design a mistake can be as simple as a missing field or an issue with an inconsistent type whatever it is the issue Checker will check your app in real time and notify you a list of issues to fix the second you get an issue you'll notice a red warning icon in the top bar and clicking on this warning icon will reveal the issue it's flagging clicking on each issue will take you right to where the issue is happening and highlight it so you can fix it it is very important to keep the issue list as short as possible at all times preferably to zero as issues can make your app non-functional in run mode and bubble won't let you deploy to the live user-facing version of your app if you have any outstanding issues so the issue Checker covers your mistakes in editor but for mistakes in run mode you rely on the debugger when your application doesn't have the expected behavior in run mode the best way to analyze and fix the issue is to get into each workflow action one by one to see where the wrong data is being computed or where condition is evaluated in the wrong way that's what the debugger is for it allows you to run workflows at different speeds normal slow or step by step the normal mode runs workflows without interruption in slow mode there's a one second pause between each action and the next and in step-by-step mode you control the execution of the workflow this is the mode you'll use most often when more than one workflow is being executed each of them will run one after another and all will follow the same execution mode in the debugger be sure to check out our tutorial on how to use the debugger for more information finally you can also use the debugger to inspect elements on the page sometimes you need to figure out why an element is displayed in a particular way especially if you're using conditions or displaying some data the inspect drop down lets you pick an element on the page and see the list of conditions and Fields and their values in the current situation when the inspector is on the debugger will expand and you'll be able to pick the element you want to inspect you pick an element to inspect either by clicking on it which won't trigger any workflows attached to it or by finding it in the drop down menu this is especially useful to inspect an element that is visible or understand why the element isn't visible once an element is selected you'll see on the right the different properties and conditions and how they're evaluated you'll also be able to see at the bottom of the inspector a list of any other values the elements have in their context when a value is blue it's a dynamic expression and clicking on it lets you evaluate it piece by piece if you're using conditions the debugger will show you in green the conditions that are evaluated to yes and in red those that aren't again clicking on the expression will let you evaluate it piece by piece the debugger is also useful for debugging privacy rules privacy rules can lead to complex situations to debug as it can hide fields from a thing when you click in the evaluator on a thing that has been hidden due to privacy rules a red mention will be shown explaining what's being hidden with both of these tools at your disposal you'll be able to catch issues and debug workflows easily next let's talk about the difference between live versus Dev when you're building your bubble app you're using the development version or environment of your app this is done on purpose so you can test what your app would look like and how it functions when you deploy your users use the live environment by default your bubble app has two different versions called Dev and live and they both have separate databases containing your app's database all of our data that we've added to our app database thus far has been in our development version database to view live data you can also shortcut this and change from Dev to live in the app data tab you may have also noticed that when you preview your app in development your url will have version test next to it which means it's using the dev database and logic users on your Live app will be using the live database so their URL will not have version test attached to it instead use your app's domain by default app data will show you all of the things for that data type but you can also create new views to filter the data your users submit so you don't see every field you can even constrain the view to filter results whenever you create a new view in development it will create the same view in live which helps you filter your Live app data by those constraints as the app admin you can create modify delete specific things or do bulk uploads and exports from the data Tab and you can do this for both live and Dev as your app grows you can upgrade your plan and add more environments to your app besides Devon live for even greater collaboration and flexibility a pillar of bubble is the community that supports it and one way of supporting the community is by having a plug-in ecosystem the plugins tab extends the functionality of bubble by installing and configuring plugins plugins add additional elements events actions and data sources to your app these plugins are created by the bubble team and other bubble users and therefore are available as both free and paid some examples include external services like payment providers such as stripe analytics providers such as mixpanel and Google analytics and social networks such as Facebook are packaged as plugins as well as some other elements like draggable elements multi-select mouse and keyboard interactions and one of the most frequently used plugins bubbles API connector all of these plugins are here to help enhance the default capabilities of bubble so it's key that you rely on them from time to time to help build your specific app now that we've covered the key Concepts it's time to build your first app in the next section of this course we're going to be building this project management app that allows users to sign up create a team add collaborators and more as you build along you'll see all of the key Concepts discussed throughout this section and by the end you'll have a completed app that you can build upon foreign

Channel: Bubble

Views: 156,863

Keywords:

Id: 4_R8aIxGLyY

Length: 58min 32sec (3512 seconds)

Published: Thu Oct 13 2022