Connect the Dots: API’s

Natalie Wells
2 min readOct 2, 2020

This week the topic to tackle was API’s and how they relate to data and such. The initial concept made sense to me and in an in-class exercise we conceptualized ideas for ways to do an API mashup. I had a number of ideas including:

  • twitter → text to speech to read your feed to you like an audiobook
  • text to speech → news outlet (such as WSJ or NYT) to read news articles aloud
  • WebDAM → Google Drive to organize files in drive better and vice versa with Dropbox
  • facebook messenger → shopify to have real chats with past customers or reviewers of certain products

For the first part of my project, I decided to go with the Google text to speech API and a news outlet API mashup. I was thinking if there was a button in the news app that the user could click on and queue up articles to be read to them aloud that would be very helpful. I would love to have this in real life because I enjoy reading the news, but often end up reading while doing other things like watching tv, and would prefer to listen to the news while driving or cleaning my home. So I took some screenshots from the WSJ app, added a button in XD and designed a spotify-esque queue of articles and various settings to show the concept. Here is a video of the clickable prototype from my screens in InVision.

Now if you have read any of my previous blog posts from CM studio you will be fully aware that I am a complete novice when it comes to coding. So I find it completely ironic that this assignment is the one where the dots actually began to connect for me when it came to coding, especially because this was one of the trickiest things to figure out: how to add an API to a site I create.

Admittedly, this site was not particularly built to be beautiful, the main point for me was to figure out how the hell to successfully incorporate an API. After extensive reading, googling, youtubing, and more reading, I finally came to the mostly user friendly Google Maps API site that walked me through step by step how to add a google map to my site.

Overt Coffee is one of my favorite spots here in Denver, so I figured, why not make a short and sweet website about why I like them and attempt to add a map to show where this fabulous place is? (Conveniently located in one of my favorite Denver neighborhoods, Wash Park). Well I did more than attempt, I succeeded (with tears of joy mind you!) that the dots finally connected for me!

And here’s a link to my github repo.

--

--

Natalie Wells

Current graduate student at the CMCI Studio in Boulder, CO. Designer, Colorado native, dog-obsessed.