Ridely - Ride Sharing like Uber Template
Template page link: https://zeroqode.com/template/ridely---ride-sharing-like-uber-template-1501857279453x140151737882509310
Ridely is an amazing no-code taxi template. It creates a ride sharing application for any taxi company, or can bring several into one app. This template features both rider's and driver's pages, which are formatted as a mobile app. As well as desktop pages for signup/signin and profile management.
This template is built with taxi services in mind, but it can be used for shuttle busses, ride-sharing etc. It is all up to your creativity and ideas.
Mobile design
Landing page
Driver dashboard
Rider dashboard
Stripe Payment
Integrated Map view using Google Maps Extended and Google places plugin.
Admin Dashboard
Payments: See the documentation on how to set Stripe Payments in Bubble App.
This template allows for two user types, a rider and a driver type account. Information about this user types are stored within the User. Within this data structure, they are fields that include basic profile details like Last Name, First Name, email, Phone Number. It also contains user Rating, snapshot of the Drivers License, Trip (takes a List of Trips) Driving Experience and so on.
This data type takes information about the car used by a user (provided by the driver). The Car data table has fields like Brand of the car, the car's Color, Full Name, snapshot of the Insurance, License Plate, car Model, a Picture of the car, Selected (takes a value of either Yes or no and is True when a car is selected for use on the platform).
The payment data type only contains fields that include the Logo, Name and the associated User (takes a list of Users).
When rider users takes a ride to their various locations, a fee is charged and paid to the driver user, the Transaction data table holds the information necessary for this process. Within this type, we have fields like the Amount charged for a trip, the CC Last 4 Digits ( found on the back of payment cards), the associated Driver user, the associated Rider user and the Trip.
The Trip data type holds all the details about a particular trip on the platform, it includes fields like the Cost, the Starting Point, Destination, Direction (takes a List of geographic addresses), Distance(API), the associated Driver and Rider, Duration(API) of the trip, End Time of the trip, Payment Received (takes a value of yes or no and is true when payment is received), Pickup Time, Transaction and Rating
The landing page of the template shows an overview of how the platform works, provides a call to action on user login and signup as either a driver or a rider.
The index page has no custom states.
This page provides the user the option to Get a Ride and also houses a list link of rider information that include the history of the rides, details on payment methods and transactions, Help (this displays a view with answers to frequently asked questions and so on), and the option to log out as a user. Note that when a user is not logged in, this page would prompt user to create an account or login with already existing account details.
States | Elements | Note |
selected | Group Ride Info Header, Group Driver Header | This state is used to display a view and is true when the ride or Driver information is displayed |
page | app_rider | This state also determines view that is displayed. |
selected | Materiallcon menu | This state is used on the navigation button to toggle (hide and show) between views. |
user_type | Group User Signup | Used to set and determine the signup view to display |
credentials | Popup Email | credentials state is either yes or no and is true when the Popup email view is shown or visible. |
This is the driver user's profile page. within this page, there is a tab view with three tab items that include MY TRIPS (this tab item when active populates the list of trips the driver has taken below the tab view), PAYMENT (shows the driver's Card Details) and PROFILE (when this tab item is active, the user's details are displayed).
States | Elements | Note |
selected | Button PAYMENT, Button PROFILE, Button MY TRIPS | This state is used on the tab items PAYMENT, PROFILE, MY TRIPS to toggle (hide and show) between views. |
status | Button Connect Payment | When the Connect Payment button within the PAYMENT TAB is clicked, this state sets and displays a view. |
selected | Group Car in RG, Group Trip Panel Driver | Also in these elements, this state sets a view. |
This is a previous layout for the index page.
This page houses the sign in view that provides a form for the user's (driver) login credentials and also the signup view.
States | Element | Notes |
selected | Button Upgrade Driver! | This state is set on the Upgrade button that becomes visible when an email that is already in use is used for another account type. |
Like the app_rider page, this page provides a link list of items, but in this case the details are for the driver user. This list items include Go for a Ride, Rides History, Payment, Profile, Vehicle (on clicking this link, a view is populated with a form to take car details such as the brand, model, license plate number, etc), Help and Log out.
States | Elements | Notes |
screen | app_driver | Used to set and display a view |
ride info | Group Ride | This state's value is either yes or no and is true when set view is displayed. |
menu | FloatingGroup Top Menu | This state is set on the menu button and is used to make a view visible. |
credentials | Popup Email | The view with the form that takes the inputs email and password for editing credentials is made visible or invisible using this state. |
This is a simple page with background image (static image) and a few elements. It has no custom states.
The help page displays a static content that an assists the users and answers frequently asked questions and it has no custom states.
This page is similar to the driver_profile_3 page. It contains a map view as background and a tab view with MY TRIPS, PAYMENT and PROFILE as the tab items.
States | Elements | Notes |
selected | Button PROFILE, Button PAYMENTS, Button MY TRIPS | In these elements, this state is used to alternate between the views that belong to different tab items. |
selected | Group Trip Panel | Within the MY TRIPS view, the Group Trip Panel element is set with this state and it is used to display a view. |
This page contains views for the users(rider) sign-up and sign-in forms.
States | Element | Notes |
selected | Button Upgrade Driver! | This state is set on the Upgrade button that becomes visible when an email that is already in use is used for another account type. |
To setup your stripe account, go to stripe.com, create an account. You will be allowed to access your dashboard once you have successfully verified your email address and activated your account.
Click on Developers and then, API keys. copy your API keys. Ensure to use a live API key when your template goes live
Paste the API keys in the stripe connector calling the plugin.
In order to have the Map working properly will be needed to set up the Google service account and enable libraries.
Here is a step by step instruction on how to do that:
Open this link: https://console.developers.google.com (and make sure you are logged in)
Create a project by clicking here https://prnt.sc/r7v0w6 and then in the window that will open click on “New Project” https://prnt.sc/r7v45v and click on “Create” button https://prnt.sc/r7v6mi
Once the project is created open Library by clicking on its tab https://prnt.sc/r7v78f
In the opened tab, use “Search for API & Services” https://prnt.sc/r7v96c for finding the libraries that are needed to be to enable. (in the following steps will be shown an example of how to enable the one library and with the following one you just will need to repeat steps from 4 to 8).
Click on the found library https://prnt.sc/r7vbrz 1
Press Enable button https://prnt.sc/r7vc7b (please consider that you may need to wait until the Enable button will appear)
Go back to search page https://prnt.sc/r7vci2
Go back to step 4 and search for the following library.
The list of libraries that are needed to be enabled include:
Geolocation API
Maps SDK for Android API
Roads API
Places API
Maps JavaScript API
Maps Embed API
Time Zone API
Distance Matrix API
Maps SDK for iOS API
Maps Elevation API
Directions API
Maps Static API
Geocoding API
Street View Static API
Once all libraries will be enabled, open Credentials tab https://prnt.sc/r7vzsp Click on “Create Credentials” button https://prnt.sc/r7w086 Select “API Key” option https://prnt.sc/r7w0pz And then send to us the key from the field “Your API Key” https://prnt.sc/r7w1dz
Live Demo: https://uber-clone.bubbleapps.io/