Uber Price Estimate

Price Estimate and requesting rides example with map.

This demo uses the following libraries

Server Side

1. express for routing and serving static files
2. request for simpler async https requests to uber api
3. body-parser middleware for parsing POST body requests
4. oauth for authorizing users with uber api through OAuth2
   • OAuth2 module source because the readme docs are too light
   • github example take care to modify url configurations to use uber endpoints

Client Side

All libraries are imported using cdnjs

1. leaflet for maps
   • OpenStreetMap as a source for map tiles
2. backbone for client side models, views, templates and routing
3. handlebars for rendering dynamic templates
4. jquery for dom selecting, some manipulation, and async http requests
5. underscore mainly used for extending classes and objects
6. skeleton lightweight responsive css framework

LiveCode demo

For presenting this project as a live tutorial, here are the steps along with links and source.

First, you must register as a developer with uber, and create an uber app.

It's simpler to have an uber account, and if you don't have one, download the app on your smartphone, create an account, and you do not have to enter in your credit card info at this time. login to the uber developer panel using the uber account you just created.

1. create a package.json file
2. install the express module, setup your server.js
   • server.js
3. setup static middleware in server.js, add boilerplate index.html
   • server.js
   • public/index.html
4. add leaflet
   1. editing index.html
      1. include the leaflet js library from cdnjs
      2. include the leaflet css file from cdnjs
      3. include your main js/app.js file (doesn't exist yet)
      4. include your main css/styles.css file (doesn't exist yet)
      5. add a h1{Hello Uber} to the body
      6. add a div#map container to the body
      • public/index.html
   2. create and edit js/app.js
      1. do a sanity check
      2. create an iife
      3. use strict
      4. create an origin array of lat/lng of some location
      5. create a new map object and set it's view to origin, with a zoom level of 17
      6. add a TileLayer using OpenStreetMap
      7. add a new marker object and addTo your map
      • public/js/app.js
   3. create and edit css/styles.css
      1. add #map height of 600px
      • without this, your map will not show
5. add destination marker on map click
   • public/js/app.js
6. use jquery to GET price estimates from your api
   1. include jquery library
   2. create a getPriceEstimates() function in app.js
      • public/js/app.js
   • this request should fail
7. create an api Router and mount it on the /api path using express
   1. server.js
      • mount api.js onto /api
   2. create and edit api.js
      1. setup an express Router
      2. create a GET /estimates route handler
      3. respond with a "hello world" json
      • api.js
8. pass source and destination from jquery to api
   1. public/js/app.js
      1. add GET query params by stringifying source and destination
      • public/js/app.js
   2. api.js
      1. console.log req.query
9. get price estimates from the uber api
   1. install the request module
   2. api.js creating an http GET request to uber api
      • api.js
      • note changed the path to /estimates/price
   3. public/js/app.js update the endpoint url, parse the data, log it
10. add backbone, underscore, handlbars, models, views, templates and render all the price estimate results to browser.
    1. public/index.html
    2. public/js/models/price.js create a Price model, and a Prices collection
    3. public/js/template_manager.js create a template manager for asynchronously loading external handlebars template with caching
    4. public/js/views/price.js create a PricesView to render the Prices collection
    5. public/templates/prices.hbs create a handlebars template to render the PricesView
    6. public/js/app.js create an instance of Prices collection, a new instance of PricesView, add prices to pricesView, then render it
11. add price estimate detail view, add skeleton css
    1. public/index.html add skeleton css, restructure divs, add container for #price-detail
    2. public/js/views/price.js create a new PriceView to render an estimate detail, add a click event to PricesView that will render a new instance of priceView
    3. public/templates/price.hbs create new price.hbs template for PriceView detail
    4. public/templates/prices.hbs add a data attribute to each li, data-id="{{@index}}"
12. interact with OAuth2 uber endpoints to authorize the user with your app, add popup window to let user authenticate, get the access_token from uber, add /api/get_ride endpoint that will interact with uber's /request api
    1. install the oauth module
    2. install the 'body-parser' module
    3. server.js add bodyParser.urlencoded middleware
    4. api.js stub out a POST /get_ride route handler
    5. public/js/app.js extend the price model to add source and destination attributes
    6. public/js/views/price.js add a .get-ride event handler that will post to the /api/get_ride endpoint and opens up new browser for authenticating with uber
    7. api.js create an instance of OAuth2, generate authorization url to send back to the client. create oauth callback endpoint, handle errors, stub out success. gets the access_token
    8. create a .env file for secret uber keys
    9. read .env and restart nodemon
13. send the access token back to the client, add backbone router to extract the access_token, store it in localStorage, use the token for authorized requests
    1. public/js/routes.js create a router
    2. include the /js/routes.js file in public/index.html
    3. public/js/app.js create an instance of router
       • var router = new Router();
       • Backbone.history.start();
    4. api.js when receiving the access_token tell the popup window to give the token to the main window, and close
14. authorized requests post to uber /requests to call an uber driver. add status view, model, and template for displaying status
    1. app.js use the correct uber path requests
    2. app.js send success = true attribute with the response body
    3. public/index.html add #ride-status container, and include js/models/status.js and js/views/status.js
    4. create a bare public/models/status.js
    5. create a public/views/status.js view
    6. create a public/templates/status.hbs template
    7. public/js/views/price.js on successful /api/get-ride request, create a new instance of statusView