How to Build Your Own Uber-for-X App - Part 2

It was very informative article. I would like to know how can I move the location in civilian page like a uber ? Can you please hep me how can I go ahead and implement in the same manner ?

1 Like

Hi Rohit, thanks for reading the article! I’ll be releasing a blog post in a few weeks to show how you can do this. But if you’d like a headstart, here are a few pointers for you to try:

  1. As the first step, you’ll get the cop page to accept the civilian’s request
  2. Next, you can use the Navigator Web API inside civilian.html to get the civilian’s current location in the browser. Something like this would work:
const watchPosition = navigator.geolocation.watchPosition(shareLiveLocationWithCop, geoError, {
    enableHighAccuracy: true,
    maximumAge: 5000
});

In the above step, we have a callback function which we have named shareLiveLocationWithCop. This callback will run whenever the current location of the civilian changes. You can define the function in your code:

function shareLiveLocationWithCop(position) {
  // update the map marker here
  // emit a socket event, something like "share-current-location" to share the location of the civilian to the cop
}
  1. Next, your socket server has to be configured to listen to share-current-location. When it receives the location information from the civilian, it will relay the same to the cop.
  2. Finally, display the current location of the civilian in the cop page using web-sockets. So in civilian.html you can do something like this:
socket.on("share-current-location", (locationInfo) => {
   // update the civilian marker on the map
})

And just like that, you can repeat the above steps to display the cop’s location in the civilian page in real-time as they move around.

Try it out and see if you can get it working. if any of this sounds complicated - don’t worry, as I’ll be teaching it in detail in a blog post very soon.

hi ashwin,

so glad i tried your program to build it like uber.
then when you add the current position with:

const watchPosition = navigator.geolocation.watchPosition (shareLiveLocationWithCop, geoError, {
enableHighAccuracy: true,
maximumAge: 5000
});

I am somewhat confused where to put the script in the previous program.

and help with other functions such as:

function shareLiveLocationWithCop (position) {
// update the map marker here
// emitting socket events, something like “location sharing moments” to share civilian locations with the police
}

and:

socket.on (“share-current-location”, (locationInfo) => {
// update the civil marker on the map
})

whereas in a database (mongodb), coordinates are defined. should it be deleted first?

as below … was the coordinate data deleted first or what?

{
“userId”: “01”,
“displayName”: “Officer 001”,
“telephone”: “01”,
“email”: “officer001@uberforx.com”,
“EarnRatings”: 21,
“totalRatings”: 25,
“location”: {
“type”: “Point”,
“address”: “Kalyan Nagar, Bengaluru, Karnataka, India”,
“coordinates”: [
77.63997110000003,
13,0280047
]
}
}

Hey @nugroho!

For the first block of code

const watchPosition = navigator.geolocation.watchPosition (shareLiveLocationWithCop, geoError, {
   enableHighAccuracy: true,
   maximumAge: 5000
});

This will be within civilian.html, inside the script tag where you previously wrote your other methods. Similarly, the other methods shareLiveLocationWithCop can also be put there.

Inside shareLiveLocationWithCop(position):

  1. For updating the map marker, you’ll do something similar to marker.setLatLng (using the co-ordinates from the position argument.
  2. You’ll need to emit a socket-event here as well, so something like this:
    socket.emit("share-current-location", {
         copId: copDetails.userId, // to the cop with whom you want to share location
         location: locationData,
    });
    
    
    

Next, your server needs to be configured now to listen to share-current-location. So the following will be inside socket-events.js (inside the initialize method):

socket.on('share-current-location', async (eventData) => {
    io.sockets.in(eventData.copId).emit('share-current-location', eventData); //contains copId & location
});

The coordinates in the database need not be deleted. That was there to provide the initial locations of a cop. It also allows us to test the geolocation queries of mongodb.

Although you could delete them, my advice would be not to (even though yes, they should not be hardcoded and should instead reflect the actual locations). The reason is, if you’re testing this out locally on your machine, and use the actual location (using the navigator API, you’re gonna find it difficult to test. All the cop locations and the civilian locations will be the same (i.e in your own house)!

Rather, I’ll suggest you this: Since all the dummy co-oordinates are pointing to where I live (i.e India), you could change them to values that are near places where you live.

Once maybe you have deployed the app, then yes you could delete the coordinates, it’s anyway dummy data used for testing.

what do you mean out here

This is correct. Also, geoError is just a function to handle the error (so maybe you want to print out the error if it ever happens). So you can define it somewhere like this:

function geoError(error) {
        console.log(error);
};

Check out this MDN link for an example of how to use this API.


I’m not sure where you wrote it, but here let me illustrate:

You already have two socket events configured in that file right? So just like that, you’ll add a share-current-location event, and here is where you put it:

io.on('connection', (socket) => {
    socket.on('request-for-help', async (eventData) => {
        ....
    });
    
    socket.on('request-accepted', async (eventData) => {
      ...
    });

    // Put it here
    socket.on('share-current-location', async (eventData) => {
       ...
    });
});

does not work, the map even goes away

Can you share your code on Github?

pls ceck … nugrohomnk/ uber2 Private

nugrohomnk/ UBERX

enter to |Type|Name|Latest commit message|Commit time|
| — | — | — | — |
||.github/workflows|