uberclick: Uber on any website

As the mantra of orijtech goes, “everything software, connect experiences with it”, I present ‘uberclick’, a by-product of the work of the Go SDK for Uber at https://github.com/orijtech/uber/ I present its motivations, end-to-end design, open sourced source code and demos.

uberclick

What’s the fuel?

uberclick’s motivations and cases

a) would like to make revenue as Uber affiliates as per https://developer.uber.com/docs/riders/affiliate-program/introduction

b) act as a middleman for users in situations where direct-to-Uber payment services(e.g credit cards) are not common, or might be inconvenient, or where you would like to order cars for others using your corporate account e.g

  • concierge services
  • recruiting services: welcoming folks for interviews; instead of giving them coupons for their travel, which are tediously filed for later reimbursement.
  • marathon organizers sending cars for runners that need assistance mid-race
  • insurance services that need to send a car for a customer stuck in a remote or dangerous area, immediately
  • all inclusive hotels and hospitality services ordering vehicles for their guests who might not have foreign currency on them, or could get ripped off because of unfamiliarity
  • corporate custom Slack integrations: /uber-it on Janice’s arrival — contact me if you’d like this integration ;)
  • a services platform using digital currencies as payment to allow folks to order Ubers and charge them in Atom, Ether, Bitcoin, Litecoin etc. This can easily be done in the near future, by using a combination of say https://github.com/orijtech/coinbase and https://github.com/orijtech/uber Might sound like a crockpot idea, but adigital currency platform could even make their proof of concept currency one to order Ubers
  • Snapdeal in India acts as the middleman for easy access to Uber without customers doing an additional app install. Some customers perhaps don’t have credit cards or access to the Uber mobile app. See more information at https://uber-developers.news/snapdeal-and-uber-make-getting-around-in-india-a-snap-db95d2a5538d I read that story though long after I had started the SDK and the idea for uberclick. Their use case seems to align with the vision of uberclick

c) add more use cases here…

Genesis

The kind and courteous Alexander spared his time and connections to organize a meeting with his great team at Uber, for me to discuss with them my then-month-old project. In that meeting, I made a presentation comprised of 9 slides in which I pitched why I was building the SDK, its benefits to Uber and the community, potential projects and collaborations that I believe can be built from it. The team seemed very excited about my ideas and work, and they were very welcoming and kind. With even more hospitality, they invited me to indulge in their lunch and drinks, and informal conversation after the meeting — thank you!

What went down

excerpt of potential projects from SDK from my slides: 2:00PM June 6th 2017, San Francisco UberHQ

In the spirit of walking the talk; a month ago, I started the journey of a million miles with that one step of building uberclick in my spare time. Today, I am presenting the source code for uberclick at https://github.com/orijtech/uberclick/ I haven’t had much time to work on it but nonetheless, release it early enough.

It is open source, end to end, all contributions and ideas are welcome and highly appreciated!

uberclick is not perfect nor UI pretty(I understand my limits with UI design, but am improving, 99.9% of my time is spent doing backend engineering). uberclick is basically a client side Javascript button to democratize/ease ordering of Ubers by anyone on any website, instead of only being limited by needing the app. The main goal for open sourcing it is to break down the initial barriers so that people with similar needs can build on the ideas and source code.

Design

recaptcha sample on a website

which is used live on https://orijtech.com/ and powered on orijtech by Go package https://github.com/orijtech/recaptcha/. reCAPTCHA is a proprietary system owned by Google that helps verify that a website’s visitor is a human and not a robot, and it also helps digitize books. By doing so, it helps prevent abuse and spammy submissions. reCAPTCHA’s technical guts are out of the scope of this post, but you can learn more about it here https://www.google.com/recaptcha/ Google allows websites to use reCAPTCHA by importing Javascript on the frontend and then ensures that website’s backend can compare responses from Google for end-to-end verifiability from the user as well as from Google’s backend. This kind of fine grained verifiability of the origin of the caller of a button, allows Google’s backend to strictly control and vet which websites they protect with reCAPTCHA. Or perhaps they want retroactive inspection to curb abuse if reported, want control of the sites that their trademark to appear on: these are the attractive features that I picked up from their design. In my case, the control is for logistical and usage tracking purposes to prevent abuse of customer accounts and possible fraud since any misuse of a user’s Uber account could result in a monetary loss.

Frontend/UI

uber on your website in 9 lines of JS on your frontend

with the full sample of a webpage

sample page

which produces a page like this below:

page output

Note that in the initialization:

  • a single div with an id that we pass into the initializer new Uber({itemId: “<theItemId>”}). The “UBER” branded button will be injected into that item
  • an API key — the API key is one that you’ll set on your backend and associate with authorized domains. For example in the example above I associated the API key ‘8bd5f4dd-85d4–432f-87e8-c98210d70da2’ is associated only with ‘localhost:9899’ so trying to load it directly from example.com/uberclick will fail if that domain hasn’t been authorized
  • if you aren’t yet OAuth2.0 authorized from Uber, you will be redirected to a page managed by Uber that asks for OAuth2.0 access to your Uber account with limited scopes that allow the application to read your profile and order an Uber on your behalf.

Backend

It contains endpoints for:

  • / — serves back static files e.g /index.html(containing the sample), /map.html, /favicon.ico
  • /init — first route invoked after the button is loaded. Checks if authorized or not and then performs the appropriate permissions grant requests.
  • /auth
  • /estimatePrice: must be authenticated
  • /profile — provides the user’s profile information, must be authenticated
  • /deauth — opposite of /auth, must be authenticated
  • /grant —request the user to authorize the app to use their OAuth2.0 credentials, must be authenticated
  • /receive-oauth2 — the callback that memoizes the user’s granted OAuth2.0 credentials
  • /order: actually orders the Uber, must be authenticated and please be cautioned that the Uber really will be ordered and show up

Demo

Next steps

Previously delivered projects

a) show folks how to save money and use promo-codes https://medium.com/@orijtech/save-money-on-your-uber-trips-with-golang-2ef610eb5b12

b) build a commandline app that can be used by programmers

with the demo at

there are more projects to come, it is all up to your imagination to build the next cool thing, hit me up, let’s collaborate!

Thank you

Thank you for your time, attention and for reading this far!

Kind regards,

Emmanuel T Odeke

Observability and infrastructure for high performance systems and the cloud.