Building An Uber Clone With No-Code Using Bubble

in melbourne as well we'll head over that's give me the option saying it's 25 i will select to book that ride and you'll see that it is now searching for a driver and then if i switch over to our drivers dashboard you'll now see that the my name here which is new test rider wants to go from this address to that address [Music] hello my name is lachlan kirkwood and today i'm going to be teaching you how to build an uber clone entirely out of no code using bubble bubble's one of my favorite no code tools as it gives you complete control over a custom database as well as the ability to use dynamic data to create truly powerful software for those of you who don't know me i've spent the last year working with the bubble team to write their how to clone series this series takes a list of the most popular products out there on the market such as airbnb uber and spotify and explains how you could rebuild them entirely out of no code using bubbles tool while these written tutorials were very helpful for no code makers across the world i had plenty of requests to recreate these as a video content so i've gone out on my own whim and this is exactly what i'm doing with this tutorial throughout this tutorial i'll be explaining the step-by-step process for you to follow in order to build an uber product this will include features like creating user accounts creating new rides creating a price estimate for those rides and even algorithm to power that dispatching rides to drivers to accept processing payments for a ride and then leaving reviews for drivers so grab your bubble editor and follow along as we build our uber clone together so the first feature we're going to build isn't actually a feature at all we're going to take the time to configure our database and set up the data types and fields that we need to build the infrastructure for our uber app i've just got mine in a notion dock here so i'll be following along from this um but you'll see i've broken these down into three key data types there's a user there's a trip and then there's a rating so we'll go into our bubble editor head over to our data page and add those data types in so i'll add a trip i'll add a rating and the user data type is already added in by default next thing we'll do is we will head back and look at the data fields we need to add into these so within our user we'll be adding a user's name a profile type and a list of their trips that they've previously taken now i'm just adding these as basic fields as an mvp you can add other data fields like a profile image or any other information like the phone number or credit card details if you want that saved but i'm trying to keep it as simple as possible for our mvp here so the name will be a text field the profile type will also be a text field and i'll explain that one in a second and then the list of previous trips will be linked to our trip data type and because there's going to be multiple trips they'll take we will select that that is a list of multiple entries then we will head back over to our notion board here and we'll start adding the data fields we'll need for our trip data type so the first thing we'll need to do is add a rider and driver data field now this will allow us to determine which user is the driver and which user is the rider and because these are users we'll be linking that to our user data type and there is only going to be one writer and one driver at a time so this will not be a list of multiple entries so we'll add that in writer driver will be a user again and then the remaining fields is the pickup location the destination and the price so i'll add those in pick up location and this will be a geographic address drop off location again this will be a geographic address and our price field which will be a number value now the remaining data fields we have here are going to help us create custom states within our product and what i mean by that is it'll allow our uber app to understand when a trip is searching for a driver the trip is in progress when it's complete and when the user finally makes a payment on that and you'll see how all of these data fields impact the way that we build our app and i'll walk you through the step-by-step process of how we're going to use those in a second but we'll start by adding those in first so the first one was searching driver and this will be a yes or no field type and we'll need to set the default value of this to be no the next one is in progress and again this will be a yes or no value with the default set as no the complete status yes or no value with a no default and a paid status again yes or no value and the default will be no and then we're going to link a rating to this trip and that of course will be a single rating linked to our separate data type we'll create that and that concludes everything we'll be adding for our trip data fields then we'll head back over to our notion board and just check out the last few fields we'll be adding here under our rating so i'll be adding a trip a star rating and a option for comment as well so we'll add a trip which allows us to link back to any trip just be a single trip not multiple entries a star rating which will be a number value one to five is what we'll be allocating and then a comment build which will be a text value and there we have it we have taken the time to set up all of the data types and fields we need to build our application from here we can go on and start to actually build out the product itself now that we're finished configuring our database we can jump in and start to build out the first core feature within our uber product and that is going to be the function to register user accounts and now if we head over to our application i'm going to create a new page here and i'm going to call this page register i'll then adjust the dimensions of it so it roughly looks like a mobile device if you're building for a specific size i'd recommend adding in those dimensions there i also personally like to just change the color of the background to a gray so if i'm adding any white elements i can see where the actual parameters of the background are and in this case we'll be adding a function to register accounts now if you're an existing bubble user you might be aware that they have a list of reusable elements for the sign up login process here you definitely can use that however i'm going to be adding my own in this case because i'm going to want to be customizing this as an actual page of our app whereas bubble's existing elements are a pop-up here so in this case i'm just going to add some text i'll say register account just choose a font for this h2 dark now of course you can add your own custom styles within your product for the text i'm going to keep this as simple as possible we'll add an input element here i'll call this input name or duplicate that two more times i will then also add some more text here name add another field here which will be email change the name of this input to email and this last one will be our password field and i'll also update that name to be a password now we'll also need to update the content format of this to be a password and our email will need to be an email and of course our name can just be a text field there the next thing i want to do is add a drop down menu here and this will be used to allow a user to register whether they are a writer or a driver now this will determine how they view the application and will store that within their data field on their account so we will just add another heading there call this account type so there i'll then add just two options manually a rider and driver and then i will add a button element that just says register and i will just change the styling of this to be a black background so it looks a bit more like uber's ui and there we have our page what we're going to want to do from here is begin to create our first workflow now we will click when a user clicks the register button will trigger our first workflow and we'll want to sign the user up and from here we're going to want to match the email fields on our page with the input value of our database here so select emails value we'll do the same for our password here it's value so it's registered that user's email and password that they've added from here we can also go and add in any additional data fields that we would like to add so the name of the user of course we've got that field on our page so we'll add the value of that input and then also the profile type now this will be an option from the drop down menu and there we have it that will register a user's account whenever they click uh to register that and from there we will need to redirect a user to a home page so we'll head over and create another page we'll call this home and we won't add any content onto that yet i just need to go back to my register page here and back in my workflow after user registers i'm going to want to send them to our home page so we'll click a navigation event adding it onto our existing workflow we'll select go to page and we'll select our home page so now whenever a user adds the information they'll click register it'll register their account as the profile type and then redirect them to our home page from there once we're finished registering our users we'll head back to our notion board here and i'm just going to take those features off and the next thing we'll be doing is a little bit more housework similar to setting up our database before we're going to want to take the time to register our google maps api keys now this is something that sometimes isn't added into many tutorials but i really want to take the time here and help you set these up because it can be a bit of a pain especially if this is the first time you're doing it so if you head over to your bubble editor the reason we're going to be needing to do this is because when we add a map element onto our home page so i'm just going to quickly resize this again change the background to be gray make that a bit wider and if we grab a map element here and add that in it's currently using bubbles api for connecting the google maps data into that map now you will quickly get rate limited depending on how many requests you're sending through that and you can see here now it is requesting that we add a google maps api key and also our geo code api key so if you head into your settings you'll see two inputs here that you need to add to configure maps correctly and the reason of course we'll be adding this is so we can pull and index real world addresses now if you're new to setting up api keys just click on bubbles documentation here and it will take you through to this fantastic guide which is quite simple to follow about how you can set up your own api keys i'll jump into my own google dashboard here so the first thing it will want you to do is to create a new project and in this case i've already done so but it's quite an easy process to do and from there what you'll need to do is create credentials and you want to create an api key now when you do this you'll want to create two api keys as bubbles documentation references so here it mentions that it wants you to create if you go down and i want you to create a server api key and also a client api key and these will be used in different placeholders for your maps api spot and the geo code api now in this case i've already created my two here and you can see that my existing api keys are ticked and ready to register and that's because i've taken the time to add some additional security settings which are outlined in bubbles guide here just around limiting where the api requests can come from so in my case they're restricted to my particular bubble url and once you've added those in they will connect properly if you have any connectivity issues i'd recommend reading these instructions quite thoroughly and following those as that will get you set up correctly and it should work a treat from here there is one last thing we'll need to do and that is go through and enable each of these specific apis that are listed in this bubble tutorial so this is our geocoding api places api geolocation maps javascript api and also the time zone api which is a relatively i guess new one you could say now don't forget this one as well because if one of these isn't working or isn't connected you might still have issues within your account now these are super simple to enable just head over to your dashboard and you can just go ahead and search these ones here so if i search for geo your location api now i've already enabled all of mine but you'll just need to go in and just click enable on these services and you can see that mine's already connected and once you've got your api keys you can then go into your bubble editor and add those into there now just a reminder in your editor that the server api key will go with the google map api key here and the client api key will in fact match with the geo code api so once you've set that up you'll see that the error code is gone from the bubble debugger and you should now be able to connect with maps and index addresses without any issues so back in my notion doc i can tick off that i've configured my google maps api keys one of the last bits of housekeeping will be creating is just a settings page where users can update their account settings now this can include things like their profile photos their credit card information uh or even their name for that matter so if we head over to our bubble editor i'm going to create another page we'll call this a settings page now i won't be using this within my clone product here but i just wanted to add this in in case you are new to bubble and you wanted to start storing more information for users to make things easier or to provide more information and transparency between writers and drivers so again i'm just gonna make the background of this to be gray i'll make this roughly a mobile size screen and then similar to our login screen that we recently created i'm going to just start adding in a bunch of input fields here that can be used to in this case update their name let's say you've got a profile photo we'll use a picture uploader element there trying to think what else you'd need you might need a mobile phone number and i'll just add some text at the top that just says that this is a settings page page two i'm just going to roughly center this pull that down make that a little wider grab another title and similar to our register page just write name there it's called name already i'll call this one a phone another one can be an image photo and if you really wanted to store a user's credit card information um for easier use you could add the card number and also their expiry date and c v c number as well i'm just going to leave those blank but you get the general idea of what i'm creating here uh now i'm going to add another button at the bottom of this page and this button will be used to update their profile information and similar to our register account workflow that we created we're going to create a new workflow when this button is hit and in this case we're going to instead of creating an account we're going to make changes to an existing thing now the thing we'll be making changes to is the current user and from here you can pull in any particular data fields that you want to change and match them with the input fields that we've just added so in this case i might want to update the user's name with the name field that we've just added and that's all the fields that i've added myself but if you had things like profile photo or the credit card information you could store that data there and then back on our settings page here we can start to add in initial content here now this initial content can pull in the current user's name so that way it's continuously stored there so when a user goes to this page they'll see their existing name there so they can see what data is already recorded and if they want to change it and update it they can make those changes appropriately but this is a nice and easy page to create and it is quite essential within certain products particularly like uber where you are storing personal information and then we can go back to our notion page and tick off that we have created a feature to allow users to update their profile settings now that we've taken care of all of the housekeeping it's time to jump into the fun part of this tutorial and really start to build out the actual user interface of the product that your users will interact with and we'll start with the home page here now i've added in some sub features that we'll be adding in like adding pick up and drop off locations being able to calculate prices and display previous prices and then also just adding conditions for pricing algorithms so if things like distances change or anything like that you can customize pricing to suit accordingly so if we jump back into our editor we'll go over to our home page here and you can see i already have my map element on there from beforehand and what we'll do is we will just add two new search boxes now we're not going to add in input fields although we are inputting an address we're going to be using search boxes because bubble can actually index addresses for you here so if you click the choices style and hit geographic places bubble automatically use the google maps api key that we connected and index any addresses that are registered on google maps and we will call this search box the current address search box and we'll just add a placeholder there that says where from and then we will duplicate that and we'll call this one a where to and this will be a destination i'll just stretch those out so they're the same length as our map and you can start to see that is bringing together most of the interface that users will be able to see and one other data type i'll be adding here is the current users a current address that they're registered at so head back over to our database and add a current address and we will save that as a geographic address now we can add in a marker on our map just so it adds a point of relevance when a user updates their current address so we'll click on this element here and we'll choose to display the current user's current address now in order to update the current user's address we'll need to create a workflow here that registers when an element's input value is changed now the input value is of course our search boxes current address and we'll want to make changes to a thing that thing will be the current user and we'll be updating their current address and adding the value of this search box so whenever a user adds in their current address it'll automatically show that on our map here now the other thing we'll want to do is also show the destination address when a user adds in where they want to go to so again we will create a new workflow when a value is changed and that value will be the destination search box in this case we will then want to display an element and we want to display a marker we'll display it on our home map and the address of this marker will be this search box's value so now when a user adds in their current address it'll show where it is on map and then when they add in their destination address they'd like to go to it'll automatically update that and show where that location is on the map as well one of the other core features we'll need to add is a pricing estimate or even just a price of that matter to this trip so user can determine how much it's going to cost them before they book that now we'll be using an input field here and i'll explain why in a second so this input field allows you to store data within it and then send that to workflows which will be needing to do in order to create certain features uh like sending that into a price of a ride itself when we create that data type now we don't want this price to display as soon as the page is loaded in fact you will only want it to display once the user has added in both their addresses and then we'll want to determine what the price is and display that there so we're going to go ahead and untick that this element is visible on our page load and then we're going to just quickly update the name of this to be accord a trip price and this is where we're going to start to add some estimates based on the distance of locations between the destination and also the pickup zone so we'll go ahead and in our initial content field add in a dollar sign and then we will also add the current users destinations address and then we'll measure the distance from our user's origin address which is of course the current address from our search box now i'm going to measure this in metric so i am in kilometers here so that's going to show the actual distance between those fields and what we want to do is to register a dollar amount for those distance and this is where you can start to create formulas within a bubble so from here i can add in formulas like a multiplication and i can say that for every kilometer that this uber trip travels i want to charge 1.5 times the rate of the kilometers so if your user goes one kilometer we'll charge them a dollar fifty and of course you'll probably also want to start adding different pricing parameters based on the different distances that a user might travel after all if a user travels a shorter distance you might charge a little bit more than 1.5 times the amount and if user travels a longer distance like 100 kilometers you might actually just want to charge them a dollar kilometer because that might be a bit more of a fair price uh so in our conditions we'll head over here and this is where you can start to create almost like a bit of an algorithm based on pricing parameters the first thing we'll need to do though is make this input field visible and if you can remember just before i disabled this from showing we're actually gonna want to only show this when the current users search box address its value is not empty and when their destination input is also not empty and we'll head over and say this element is visible and tick that now when a value is added into both of these input fields this field will pop up with a price ready to go for a user to review now if you want to start building out different conditions for different pricing structures you can do so by adding in a couple of conditions here so much similar to the one that i've just created so you could say that when the destinations address its value distance from the origin address which is the current address its value in kilometers is greater than or less than in this case let's say it's less than 10 kilometers we'll want this text this initial content to be let's say 25 now it will register whenever a trip is under 10 kilometers it'll register that it is 25 and anything over that it will go back to its default of timesing the distance by 1.5 and of course you can start adding different thresholds and parameters here so you could say that when it's less than uh 10 kilometers but greater than five kilometers it would charge a certain amount um but you can really start to see that coming together nicely and we'll head over to our development environment and see what this looks like in action so over here i can write where i'm traveling from i am based in brisbane so i'm just going to say 160 queen street and let's say i want to go to three 200 queen street probably won't even be a kilometer i will go to melbourne so that'll be quite a long trip um and you can see here that it is two thousand dollars for that trip because it is quite a bit of a distance but let's say i want to go to 161 queen street in brisbane this will then default to 25 that we mentioned before and that is how you can build your own pricing algorithm and also build out the i guess core feature to uber itself so we'll go back to my notion template here and i'll tick off that i have built my home page i have added in the option for custom pickup and drop off locations i've calculated the price and displayed them as a preview and i've also added conditions for a pricing algorithm and that is all i have time for in this tutorial today if you wanted to check out the rest of the course i'd recommend clicking the link in the description below and purchasing the full course throughout this i'll be walking you through the step-by-step instructions to complete the rest of our build you can also get access to a suite of bubble tutorials where you'll learn how to rebuild other popular products if you'd like to also get started learning how to build some other popular products i'll include some suggested videos in a moment that you can also check out thanks again for tuning in and be sure to hit that subscribe button if you'd like to see any more helpful tutorials like this to help you on your bubble journey

Channel: Building With Bubble

Views: 17,222

Keywords: no-code, no code, Bubble, Bubble.io, Webflow, software development, Uber product development, software engineering, visual programming, makerpad, airtable, glide, adalo

Id: iPskKVcaKXQ

Length: 31min 58sec (1918 seconds)

Published: Thu Jan 21 2021