How To Build a Web App Like Uber | Real Time Driving Service

15 May 2017
How To Build a Web App Like Uber | Real Time Driving Service

Nowadays, services such as Uber, Lyft and Curb are gaining more and more popularity throughout the whole world. Due to the high level of demand that is placed upon these services, it’s no wonder why more and more such services are popping up. In essence, this demand is the driving force behind the advancement of our modern-day technology, which allow us to interact with it in real-time. A lot of services that are like or similar to the ones we just mentioned, can be implemented in the form a mobile application, software or a web application. Let’s dive in and get a better look at implementation of a web application that supports such service. 

The main idea when it comes to having a full-fledged robust system like that, is to make sure that all changes that are queried to the database have to be tracked and that the service reports about these queries. Hence, any queries that relay changes (and these relays can happen as often as every second), has to be communicated to all its users. This, in turn creates a list of additional queries (requirements) that are also relayed to the database.

For this job, Google Firebase is the best service to take care of these queries. This technology offers a lot of advantages such as:

  • Withstands heavy traffic (data parsing) and informs all of its users about any changes that take place
  • Supports various coding languages such as Java, JavaScript, Objective-C, C++, Swift
  • Flexible in controlling or granting access
  • Ability to offer storage to save files on the cloud
  • Crash reporting in order to monitor efficiency
  • A sturdy structure for documentation, which allows low threshold entry

If you’re trying to figure out which web app is the best to go with, then Javascript is your best bet! Lately, there has a been a rising trend to create the web app in SPA (Single Page Application) format. For that reason, a lot of popular frameworks such as Backbone js, React JS or Angular JS can be used for this, but I would recommend to go with Vue JS. It’s a quite new framework that attempted to take the best parts of all of the other existing solutions, while remaining simple and straightforward in terms of use. The reason why it works in such a way, is because the developers singled out and separated the functionality from the basis version in the form of plugins. Additionally, in order to create a similar web application, one will need to utilize the library for all of the processes related to maps. I’m going to use Google Maps, since it is the most commonly utilized service. All of this will create the main stack of technologies that could be utilized again for projects similar in nature.

Finally, let’s take a look at the implementation of the main functionality while using Firebase.

Real time driving service

1. Setting up the environment

First and foremost, we need to create a file in which we’ll initialize Firebase with the pre-determined configurations:

After this, we can incorporate Firebase in any kind of component:

And utilize this target for any Firebase related queries.

2. Registering and authorizing users

In order for the user to be able to login with his username, he has to be created and added to the service first. For this, we’ll use the functionality “Authentication within Firebase”. The user just needs to provide his or her email and password, and then finally the account can be created.

After that, this user appears in Firebase and obtains his or her own uniqued uuid. This unique identifier can then be used within the database to match up and kind of information with the user

In order for the user to be able to get authorized, we need to use the following functionality:

3. Displaying the movement of the user within the map

The structure of the database within Firebase portrays the appearance of the JSON panels. This means that the database is not relevant and needs a NoSQL approach, where the rules from normalization of the database just simply don’t work. Within our database, we’re going to have the following layout:

In order for us to display the movement of the user, we need the map parameters for his/her car. To do this, we’ll add a function that will parse any changes related to this parameter and later display it onto the map.

This way, when the  user’s coordinates will be re-centered, a change in the user's position will be reflected and displayed onto the map.

4. Displaying the user’s route

In order to map out the user’s route, we need to link up Google Maps Direction (service). When we need to display a selected/pre-defined route in real-time, an active connection will be needed with the following parameters:

After this, anytime when a specified user gets added or changes direction, it will be displayed on the map.

5. Changing the user’s status in real-time

Besides the fact that the position and direction of the user can be changed, his status can be changed as well if the business logic mandates to do so. Then, we’ll need to track the status of the user by listening to and parsing the changes within this parameter:

All of these are examples of the most common and basic things that relate to such kind of service. They will allow to create the foundation (base) to which other features can be added. Especially the payments system. Luckily, the solution provided by Stripe compliments this well. A Chat can also be added and made available between users. For that reason, Firebase is also a very good solution. It allows to quickly develop this functionality due to its orientation and alerts delivered in real-time. Same thing goes for the notification functionality. In other words, all of these technologies allow to create a powerful solution for business with a relatively short timeframe of completion. This opens up a lot of opportunities to incorporate various ideas within our life into a feasible product.

Hope you have found this article useful, don't forget to leave your comments below. If you have a project idea in mind, but don't know where to start, we're here to help you

SEE ALSO: