How to Setup Your Custom Database in Bubble.io (2022)

so if you were to take away one thing from today's lesson in my opinion it's to make sure that you don't add plurals under your data type names [Music] hello my name is lachlan kirkwood and today i'll be explaining to you in detail how you can approach the whole process of structuring and creating your own custom database within bubble the whole process of creating a custom database from scratch can be quite overwhelming particularly if you've had no experience using any other tools in the past in fact one of the most common questions i get from people who watch my videos is how i personally approach structuring both my data types and my data fields and throughout most of my tutorials i actually walk through the process of creating a database but instead of just telling you which data types and fields to create this video is going to focus more on the actual strategy behind how you should create a custom database from scratch let's open up a bubble editor i have and i can start explaining this process in more detail so when it comes to creating a database the first thing i'd like to point out is just the difference between data types and data fields and if we were to open up our data tab within a bubble editor the first thing you'll notice is that bubble has actually already added in a data type for us by default and that is a user data type because within most applications it's going to be necessary for users to register accounts and in order to register an account a user would need an email and a password and so a practical example of the difference between data types and fields is within our user data type here so for every user account within our application we're going to need to store some data and information about that user so the data type itself would be a user and then the data fields would be any information we'd like to store about that user so for instance here bubbles already storing an email field and they'll also store a password field by default but you just won't be able to see that in plain text and this just takes me through to my point that i'd like to make about how you can approach creating your database so a really common question that i get is how to approach the whole process of creating a database from scratch and i find that a lot of people tend to get confused when it comes to splitting out the difference between data types and data fields and so for today's tutorial i'd just like to show you a quick example of how we can create a database from scratch and i want to walk you through my thought process throughout that experience and so when it comes to data types these should be the overarching things that will need to be created within your application so anytime a user needs to create something within your app this should be a data type and when i mean create something this could be let's say create an account they could create a post they could create a comment all of those things would be the data types and then the data fields is the information you'll be storing within everything that's been created so every time someone would like to create an account within an app you would be creating a new data type and you'd be storing all of that user's information as the data fields within it so the data fields in that case could be things like the user's name their email their password or even their address and to my other example before if you had let's say a social media platform and you'd like users to be able to create posts the post itself would be the data type and then the content of that post would be the data fields so you could say within the data fields there's the actual content of the post itself which is either written text or an image and then you'd also be storing things like how many users have liked that post and so for our tutorial today what i'd like to do is actually just walk us through the process of creating a database and i personally find that the best way to explain this is just by recreating a database for a popular application that already exists because you're more than likely already familiar with how that app functions and so it'll help us just understand how it is actually built behind the scenes and when it comes to creating a database i personally prefer to use a tool like notion which is just a note-taking tool to just start the whole process of structuring out and mapping my database in a doc before i then add it into my bubble editor and you'll see why i love notion so much in a moment but let's say if i was creating an instagram clone database the first thing i'd like to do is just map out all of the key things that users will be creating within an application because as i mentioned those will become our data types and so within our instagram clone the first thing someone's probably going to create is an account and so every time a new account is created we'll be creating a new user so i'm going to type in the word user that's going to be our first data type i might also just highlight this as a h2 heading just so it stands out because that's one of my overarching data types as i also mentioned before one of the next things that users will be able to create within our application is a post so i'm going to type in the word post and that's going to be an instagram post so this is of course what you'd see in the home page feed and then another item that users could create in an application would be something like a comment so people could leave comments on a post but because they'll be creating a comment we'll need to break this out to be a separate data type and i'll be showing you in a moment how we can link these data types together and for the sake of our tutorial today i'm just going to leave it at three different data types of course if you're building out the full instagram application you can have separate data types like stories but i'm just going to focus on these three data types for now so i'm going to highlight the rest of my text and just make these a h2 heading and then once i've identified everything users will need to create what i'm going to need to do is then add in all of the data fields that will sit within each data type so i'm just going to add a bit of space in between my first heading here and just identify that under my user account what particular information and data would i like to store within my app and now this is entirely up to you as the maker of your application so you can store whatever information you'd like or need and so i'm going to just start by adding in a check box here and this is what i love about notion is that i can add in a list and then check them off once i add them into my bubble editor later on but under my user data type i'm just going to identify a few key fields that i'd like to store within my users account and the first will be a name field so of course when a user registers an account i'd like to store their name and then i'm going to add in another option and i'd like to store a bio for this user so this is just the short text that's displayed on their profile then i'm going to add in another data field and i could store a user's handle so in my case my handle would be at lachlan kirkwood and then after that field i'm going to add in another data field and i'll be calling this the profile photo because of course for every user account i'd like them to be able to save a profile photo that we can display across our platform and then finally just for our tutorial i'm going to add two additional fields the first is a list of all of the followers that this user has and then i'd like to store a list of all of the people that this user is following and so you can now see that this is actually how we would structure our database within the bubble editor itself so we have our data type at the top and all of our data fields within it and i'll be transferring those across in a moment but what i'd now like to do is add in all of the data fields under our post data type so every single time a user creates a post within our application i'd like to store some data and information within each post so i'm going to start by adding in a checklist mark and then the first thing i'd like to store under each post is just the caption of the post so this is the text itself that's displayed when a user creates and publishes a post in our instagram feed and that's pretty straightforward it's just going to be a text field and then the next field i'd like to register is just the likes of this post and one thing you just might be curious to know is why i haven't created likes as a data type so as you've seen here i've added a data type for our comments because of course users will need to be able to create comments in an application and you're probably thinking that within our application users should also be able to create likes likes however in bubble are just created through a list of users and this is something that i should also point out when you're actually structuring your database and i'll be walking you through this in full detail when we add it into our actual database itself but whenever you create a new data field within your data type you'll have an option to choose what the field type is so should the field type be text or should it be a number if for instance we were storing the user's bio that would be a text field because we're just storing text within it but what you'll also see here is the option to store this field as a user so this is where we can reference that initial data type and so for something like the likes data field that i'm just adding within my notion doc here i'd like to actually just store a list of users under this field and you'll see an option within our database to tick this box here which enables this field to be a list with multiple entries meaning that every single time a user likes a post i'm just going to be adding them to this list of users so i can later on not only perform a count on how many people are within that list to get our like count but if i would like i could even reference the names and profile photos of all of the users who have actually been added to that list so that way if a user wants to see who has actually likes their post we can just pull through a list of all of those users again i'm going to be explaining that more detail when i actually add this into our database but what i'm going to do in my notion doc here is just add that this is going to be a list of users and of course our users is a separate data type so that's where you can start to see that we're going to be linking our data types across one thing i should also note is that under our user data type here we had our list of followers and a list of users that the person was following these are also going to be lists of users and again i'll be explaining that when i add that into my database itself but for the time being i'm just going to write that these are lists of users just so we can reference that when we add it into our database and now if i'm building out an instagram clone database the very last field i'd like to store within my post data type is the actual image itself and the reason i've left this to last is because i just like to explain how we can actually split our database to help optimize the performance of our application and so i also get a lot of people asking me how they can structure their database to optimize the performance of their app just to ensure that it doesn't slow down quickly and so while bubbles great for giving you the complete control to create your own custom database it's kind of like a double edged sort because by all means you can create and add whatever data types and fields you'd like but if you structure your database incorrectly you might find that it can quickly slow down because you're storing a ton of unnecessary data in the wrong places which just means that bubble might have a hard time trying to load all that data later on and so this is where i'd like to split my post data type into two separate data types and the reason i'd be doing this is because every single time you load let's say a post in our instagram application bubble's going to need to load all of the data fields that sit within it and if i'm loading a home page feed with let's say a hundred posts but we only want to display two posts at a time before a user continually scrolls down to view those i don't want to automatically fetch a hundred posts which include a hundred images because that is a ton of data for bubble to actually have to search and display so what i'd like to do is just split this data type into two and then later on which i'll be showing you how to do in a moment we can reference a separate data type and display the images for this post only when they're needed meaning bubble won't have to load them unless they're completely necessary and so what i'm going to do is just add some space and add in a separate data type here called post content i'm going to make this a h2 heading so we can clearly see that's a separate data type and now every time a user creates a post we're also going to create what's called post content and within this data type i'm essentially just going to have two data fields the first will just be the image of the post so whenever i create a post i'm going to be creating a post content and i'll be storing the image separate from the actual post itself but in order to link these two data types together and display my image whenever a post is also displayed i'm going to add another data field and i'm going to call this original post so this is the original post that this post content should belong to and i apologize for saying post so many times but if you just take the time at this point to structure your database correctly it's just going to ensure the longevity of your bubble application and so in order to link my post content back to a post i'm going to set the type of content for this data field to be a post data type and i'll be storing that information when i create a workflow to create a new post content but before i show you how to do that what i'd like to do is also just add in the data fields for my comment so this is the very last data type and now for every single comment that's created within an application i'd like to store the content of this comment so this is just going to be the text itself that sits within each comment and then of course i'd like to once again just link every single comment back to a post because of course if i'm loading a post in a homepage feed and someone clicks on that and they'd like to view all the comments within it i'm just going to need to link all these comments back to an original post so i'm going to just add a new data field here i'm going to paste in the same option from our post content so i'm going to need to link this comment to an original post and the field type there will be a post as well and now that is all of the data fields i just like to add within our notion dock here and as you can see the reason why i like to use notion before i actually work within my bubble editor is that it just allows me to sketch out a rough framework of how i'm going to structure my database accordingly and then once i've added in all those data fields i can just check them off as i go along so let's jump into bubble now and we can start adding in all of the necessary data types and fields and before we add in the data fields for our user data type what we're actually going to need to do is start by adding in all of our data types themselves just because within some of the data fields as you've seen here we're going to need to link these two separate data types and so you'll always need to create your data types first before you actually build out your data fields so if we jump back over into bubble i'm going to create a data type called a post and now one key thing that i really want to point out is that when you're creating a data type you should most likely never use a plural for the actual name of it and what i mean by that is i'll see a lot of people who for instance when they create a post they'll say that they're creating posts with an s at the end and that actually gives a false representation of how bubbles database management works because for every single data type you will only ever create one entry at a time so when a user creates an instagram post they're only creating one post they're not creating multiple posts so and it can just get quite confusing if you've got a data type that's called posts because it gives the representation that a user is creating multiple posts at once and it can quickly become confusing when you're creating workflows or even wanting to retrieve data from that data type so if you were to take away one thing from today's lesson in my opinion it's to make sure that you don't add plurals under your data type names so i've got a user i've got a post i'm then going to add in my post content and now one thing you probably noticed is that i like to add a dash between any two words within my database and the reason i do that is just because later on throughout my tutorial if i'm referencing any data types within my element inspector or my workflow editor it just allows me to recognize this data type quite easily because it's the only text with a dash in between the two words but from here i'm going to add in my very last data type which was my comment i'll choose to create that and now once i've finished adding in all of my data types here i can start adding in all of the data fields that sit within them so i'm going to start with my user data type as i'd mentioned before the first field i'd like to add is the name of the user and this is just going to be a text field type i will not be selecting this box to make this a list with multiple entries because a user can only have one name so i'm going to choose to create that then we had our bio for the user which again was another text field type nice and simple then there was the handle of the user this again will just be a text field type so these are all pretty straightforward and what i love is that by this point in our tutorial because we have already taken the time to structure our database the process of actually setting it up in bubble is a breeze because we don't have to do any heavy thinking right now we're simply just copying and pasting it across from our notion doc then the next data field is our profile photo once again i'll just be adding a dash in between those words and this field type will be an image and once again i will not be selecting this checkbox because one user can have one profile photo at a time i will create that and then finally the very last two fields is first of all the list of followers that every user will have so this is going to be a list of users so i'm going to select from our user data type here and i am going to tick that this is a list with multiple entries so every single time someone follows a user i'm going to be adding them to the list of total followers and we can easily reference and display that list at a later time and then the very last field i'd like to add is the total list of following so these are all the users that someone is currently following in an application and this will once again just be a list of users so i'll create that and now i can jump back into notion highlight all of my data fields under our user data type and check those off then i can scroll in down to my post data type and i'm going to open this up and first of all add in my data field for the caption of every single post that of course is just going to be an easy text field and then i'm going to store the likes for this post which as i had previously mentioned is also a list of users so i'm just going to be adding someone to this total list so i'll be selecting this field type to be a user and i'm going to tick that this is a list of multiple entries because more than one person can like a post so i'll be creating that and that's all the data fields under my post data type as i'd mentioned i'm splitting these into two separate fields themselves so under our post content i would like to add in the image itself so this field type will be an image and now depending on how you would actually like to structure application will determine if you want to tick this box or not for my example today i'm just going to make it that one person can only upload one photo for every single post but if you'd like to support something like let's say carousel post where they have multiple images you could of course tick that that is a list with multiple images i'm just going to leave that blank for now and choose to create that and then the very last data field i'll need to add is just a way to link this separate data type back to our original post data type so i'm going to create a new field and i'm going to call this og post so this is the original post that this post content belongs to and this field type if i scroll on down will be our post data type and of course one post content will link to one post at a time so i'm not going to check this box and now one thing i'd like to point out is just a quick note on how i've actually split these data types so if i just jump back into my notion doc you'll see here that i've linked our post content so our separate data type back to the original data type now technically if i was to open up my database and open up my post here i could create a field that links the original data type to our separate data type so i could say that i want this field to link the post content to a post content data type and i could create that but the reason i have not done that in our tutorial today is because if we're linking a separate data type under an original data type and bubble is to load a list of a hundred posts on our home page feed because this data field sits within our original data type it's also going to have to load all of the data fields that sit within our separate data type so not only is it going to load 100 captions and 100 like counts but it's also now going to load all of the images immediately that sit within our separate data type here and that is not the experience i want to create because that would actually slow our application down so i want to make the note that you should split the data types by linking the second data type back to the first and i'll be showing you how we can actually do that search in a repeating group in a moment but if i jump back into my post data type i'm just going to remove that data field that i added and from here the last data fields i'll need to add are under my comment data type so as i mentioned for every comment that's created i'm gonna need to store the content of that comment itself which is just the text that someone adds i'll just choose to create that and then finally for every comment i just want to link that back to the original post that it should belong to so i'll be selecting that the original post will be a post data type and now if i jump back into notion i can just highlight all of these data fields here and tick those off and that's actually the process of creating a completely custom database i do just want to take a quick moment just to show you how we can actually link these two separate data types together now in our application just so you have a full understanding of how this now works so if i was to open up my page drop down here i've just created a blank page which i've called my home page and let's say i want to add a repeating group onto my home page and this is going to display a list of posts within my instagram home feed i'm going to set my type of content of this repeating group to of course be a post and now let's just say i want to load all of the posts within my application i can perform a search for all of the posts and that's going to load every single post that's ever been published on our platform and then within my repeating group let's say i'd like to actually display the image of our post content i'm going to just quickly update the number of rows to be 2 and i'll add in an image element here and now because our data type for our image is split from the actual post that it sits within i'm going to need to insert dynamic data and the way i can display this is by performing a search in our database for the post content where the original post equals the same value as the current sales post in our repeating group and then i would like to just display the first item in our database because there will only be one item where the image itself is the same value as the current sales post and from there i just like to display the actual image that has been stored within that field and that is how you can link your data types together and display that information within your repeating group on the home page as you can see it's never been easier to create your own custom database entirely out of no code using bubbles tool if you follow this general outline i think it's going to simplify the whole process of creating your own custom database from scratch which of course will help you build your application in a reliable way to power the rest of the features that you add within your application that's it for me today but of course if you'd like to see any other bubble tutorials i'd recommend hitting the subscribe button below so you can stay up to date with all of the latest content that i publish about bubble [Music] you

Channel: Building With Bubble

Views: 551

Keywords: bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, Adalo, Zapier, Webflow, no-code tools, app development, MVP, minimum viable product, Bubble no-code, software development, Airdev, Zeroqode, database structure, database setup, database design, Bubble.io database structure, Bubble.io database setup, no-code database, Configure Bubble.io database

Id: Z_ueGppnjBY

Length: 27min 14sec (1634 seconds)

Published: Thu Dec 02 2021