An API review

I love using APIs. There is something really cool about being able to send a request from my application and receive organized and comprehensive data that can be used to give application more function. As a refresher to myself I wanted to see how quickly I could connect a web app to an API and use that data. As an added challenge I wanted to use the data received from one API to make a request to another API. I searched around for some fun APIs to experiment with. I went to this page which seems to have a comprehensive list of open APIs.

https://github.com/public-apis/public-apis

I chose to use the brewery api because it would provide information about breweries by location. I chose to search breweries by state and persist that information to the database.

https://api.openbrewerydb.org/breweries?by_state=ohio

This provided the following json return. I could easily store this information to my database and display it on a show page. This was all good and fine but how about making this more challenging? It would be nice to show a map of where the brewery was located within the state. The brewery API provides latitude and longitude but no map. This is where I could use this data to do a second API request to provide a map image on the show page. I found that mapbox could easily provide this service. I signed up for a developer account so I could have an API key. Once I figured out my two data sources I needed to create a rails application. I ran the following commands to quickly create my app

rails new brewery_api
rails g scaffold name:string lat:string long:string state:string

This left me with a basic MVC structure. I used the new page as a search and modified it as follows.

When a search was submitted it would persist all the records to the data base. The show page would show this

I wanted to have a map with it. So I went to the show page controller and I wanted to make a request to the map api. I followed my typical pattern and did this

I had a show page but no map! Upon further inspection I found that the API was returning a PNG vs a link to a png so when I added it to the page it would not render.

After a long time thinking about how to make this png display correctly. I first thought I would have to store it locally and then use a link to it in the IMG tag like I have done before. Then I thought there had to be a better way. I realized that since the url to get the png was simple I could just pass that right into the IMG and let the browser do the work of displaying the image!

Now I had what I set out for. A quick and simple web app that used two different APIs to display some useful information. I needed the review. If there was anything different I should have done please leave a comment below!