The third week of my being a developer relations intern at Google in NYC revolved around learning Google Cloud Functions. As someone who learned to code by playing around with link hovers and custom cursors on Tumblr, naturally I wanted to embed my new knowledge of Cloud Functions into a web app. Was this a challenge? Absolutely.
Of course, first I needed to come up with an idea for my app.
I must confess and say that I knew almost nothing about machine learning until I started my internship at Google, which is why I so intrigued by playing around with the Google Vision AI. I decided my super cool, tech-savvy, machine learning web app was going to make a call to this vision AI: I would send it a picture and return the data obtained from the cloud.
This is where Google Cloud Functions comes into play. Something I learned the hard way (read: after hours of painful confusion and visits to StackOverflow) is that making calls to any service in the Google Cloud requires several levels of authorization. Cloud Functions acts as a server that handles all of this work for you — hooray!
So, combining my newfound love for the Google Vision AI and Cloud Functions, here is what I wanted to achieve in my web app:
In order to call my Cloud Function, I needed to use — you guessed it! — a fetch request. Here’s how you make fetch happen:
var functionEndpoint = "YOUR_FUNCTION_URL";
.then(res => res.json())
/** DO STUFF WITH YOUR DATA **/
console.log("Err is:" + err);
I made a ‘GET’ request to my Cloud Function, where functionEndpoint was set to the function’s URL. I was passing in one parameter; the fileID of the image I wanted to be sent through the Vision AI. As per ‘GET’ request specification, the parameter was sent through the functionEndpoint URL, which makes the body of the fetch request itself much simpler.
So, how do I actually get back the data from my Cloud Function, and display it on my HTML page? This is when I learned about arrow functions.
.then(res => res.json())
Arrow functions implicitly return, which is why there is no need for a “return” statement prior to my res.json(). The “.then” bit, when pasted directly after a fetch request, signifies that we are obtaining the data returned from the function call. In this code, our data is being caught in the variable res, which is a very cute abbreviation of the word response. However, the Vision AI has specified that it is returning data in JSON format, which is why the .json() bit is necessary.
Now that I’ve gotten my response data from the server, printing it into my HTML is as simple as another .then:
JSON.stringify(data, null, 2);
And of course, somewhere in your HTML you are going to need to specify this destination:
<pre id="output"> </pre>
A lot of internet searching & visits to StackOverflow led me to utilise a “pre” tag as the best way to print JSON data in an HTML page.
The last part of the fetch request is the error catch, which basically handles cases in which things might (definitely will) go wrong.
Playing around with GCFs and Google APIs is free as long as you are operating within the free tier — yay for affordable tech hobbies!
Plus, my Tumblr is about to look really, really cool.
Let me know how you’re using GCF or Google APIs in your web apps, I’d love to hear from you.