Connecting the Dots

Connecting to APIs (or application programming interfaces) is the most powerful way to bring interactive data calling to a user. A developer can connect people to data from the most powerful sources on the web, and add their own interests and insights, or find a solution for a group of users that would fulfill a need. This means developers can be creative as they want and act as a conduit to data for a curious audience.

Being new to including API’s, I found it easy to think of fun ideas for mashups, but hard to conceptualize how to get going. I tend to gravitate towards Youtube videos to practice, check out their Github contributions, and just start. For something as broad as API, and with companies having varying levels of security or costs with API access, it still is a bit intimidating , especially after seeing the flood gate of new functions and JS commands.

I will need to continue to learn this new language before I am proficient enough to complete API mash-ups.

So far, here are some ideas I had for API mash-ups:

-NASA pictures from year an album was released on Spotify via Discog data

-Spotify/YouTube connection that shows any live performance of a band in your playlists

-Nest Hello Doorbell to API with Spotify to ring a song instead of a tone.

-Spotify artists, map version to where the artist is from. Could search city to find what artists are from that city.

As you can see, they are all music related, but that is what has sparked my interest so far. I am sure I will discover a lot more as I practice which will lead me down different paths of discovery.

So far this is what I have done:

End result of API call to Spotify, after formatting

What I worked on was a replication of a project to call to the Spotify API, and have it return the following:

• Ability to connect and pull data from Spotify database
• Find the Genre of all the Spotify playlists,
• Call the different Genres in a dropdown menu,
• Call the Spotify playlists of each Genre and play in down menu,
• List 10 tracks from the selected Playlist
• Make tracks clickable and retrieves the full track name, artist name, and picture

It probably took longer than I would like to admin in order to navigate to get my API client ID number and client secret ID from Spotify, but this was the first step.

File Structure:

HTML:

HTML used for creating containers and viewports.

CSS:

CSS to create the formatting, positions, and color of the site.

Javascript:

Here, we are using JS to enter our credentials, and call to Spotify what information we want. In this case, the Token, the Genres, Playlist by Genre, and Track Title.

The first part of the tutorial, I felt like I was understanding conceptually what was happening to request the information from Spotify, and the language to make that call request. This uses the ‘GET’ function to grab the information.

Javascript to create list options.

Here we are writing the method to get input fields, create select list option, and creating a track list group item. Conceptually, I am still trying to understand the methods to get input fields — specifically what DOM Elements due functionally.

Javascript to show the track selected on the side, along with Artist name, and image from the album it belongs to.

Here is the final result:

As you can see, you can select the Genre, all the Playlists within that Genre, search for songs in that playlist, select a song and have it appear to the side with the Artist, Title, and Album art.

Genre Selector

Playlist selector after specifying Genre

While this was a great exercise and I learned a lot about API basics, I know that this is a lot more that can happen, and I need to better equip myself with the tools to unlock the capabilities of API mashups to move onto the ideas I want to accomplish.

Here is my Github repository if you want to try it yourself!