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?

The tech suffix in ‘orijtech’ obviously implies that orijtech is a technology provider and problem solver — software is the main medium of expressing and delivering solutions to problems. In the past months, I’ve been thinking about what the purpose of technology is and what direction I want to take. This thought brought back memories of a 9 year old Emmanuel, on that rainy Thursday afternoon, in my Social Studies/Civic Education class learning about the definition of technology: I recall my teacher Elizabeth defining technology as the application of scientific knowledge to solve society’s problems, practically. That definition has been a guiding light for me, as I try to see how best I can apply the knowledge that I have been acquiring, to solve problems around me. I am starting to find a couple of answers in that direction by seeing that simple answers and abstractions require a lot of thought and practice. If one has the technological expertise, but cannot solve problems around them, then perhaps they need to re-think and repurpose that expertise?

uberclick’s motivations and cases

uberclick is a simple product that could benefit entities that:

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

In mid May, I returned to Silicon Valley on a business/networking trip to make new connections, meet companies, friends and seek future prospects and collaborations for my 3 month old venture https://orijtech.com/ While there, I attended meetings with connections that I had previously made at conferences, via code reviews on open source projects, via Twitter and via email etc. One of those connections is Alexander Graebe https://twitter.com/agrabe/ who is a Developer Advocate at Uber.

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

Below is the slide on which I proposed uberclick

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

Its frontend/UI design is inspired by Google’s reCaptcha button integration

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

uberclick serves as a library that you can import in your frontend code like you usually would for jQuery. Here is a sample of how you can do it

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

The backend is a Go server that backed by Redis as the key-value store, to associate API keys with associated domains. To uniquely identify each user, it issues/or looks up a cookie value. This cookie value is obtained and associated with a particular user’s OAuth2.0 credentials. The server is simple in that it uses plain net/http muxing and handlers, and it is self contained.

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

Hopefully this post has shown you the power of the Go SDK https://github.com/orijtech/uber, to allow you to order Ubers without having to use the Uber smartphone app, moreover making it possible for any website to have their own integration. As mentioned before, folks can get creative in any capacity that involves becoming a middleman of convenience between users and Uber itself. Since Uber has already solved the hard problem of network of delivery on a global scale, sharing of a usually expensive resource(vehicles), that’s a direct application of technology of their riding sharing software. We too can ride on their shoulders to solve simpler problems around us, using this software; hopefully you will be able solve your needs and business problems.

Previously delivered projects

Using the Go SDK I’ve been able to:

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

If you are interested in deploying this, solving problems, such topics or discussing potential projects and partnerships, please feel free to get in touch with me. Pardon any unintended typos, rumblings or errata, I got fired up this evening and figured I had better open source uberclick before I get way too busy and forget, thus I wrote this post and I am delivering it on its first draft.

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

Kind regards,

Emmanuel T Odeke