tl;dr 👉 Final Result
Prototyping with code
Prototyping using APIs, Application Programming Interfaces can enable all kinds of awesomeness, like Building Voice-Enabled Prototypes or integrate with services like Google Sheets, Twitter, MailChimp. I decided to explore this realm myself by building a fun, little game prototype using Spotify’s Web API.
Preparation
For prototyping, my weapon of choice is Framer. As a designer without proper coding background, I find Framer the most ‘designer-friendly’, it enables me to work both ‘quick and dirty’ and craft relatively complex and detailed interaction flows too.
In order to work with data, JSON basics becomes handy cause this is the most common format you will receive the data you requested. I warmly recommend you to play with Firebase a bit (here is a great beginners guide: Prototype with real data in Framer, from JSON to multi-device and internet of things)
The Spotify’s Web API lets your applications fetch data from the Spotify music catalog and manage user’s playlists and saved music.
“Based on simple REST principles, our Web API endpoints return metadata in JSON format about artists, albums, and tracks directly from the Spotify catalogue. The API also provides access to user-related data such as playlists and music saved in a “Your Music” library, subject to user’s authorization.”
When you start using the API, one of the first thing to consider is determining the scopes you needed. Scopes let you specify exactly what types of data your application wants to access, and the set of scopes you pass in your call determines what access permissions the user is asked to grant.
The idea to prototype
After I understood all of these above, the only thing I needed is an idea.
I had an idea💡!
What you can not see in the picture is the sound. My idea is a memory game with identical black cards (on both sides) and the goal is to match the identically sounding cards.
note: later on I decided to fill the downward facing sides with album arts and artist names for demonstration purposes
Great! With my brilliant idea, I could start creating and setting up ‘My Application’:
👉 a detailed setup guide can be found here: Using the Spotify Web API in Framer
Make it your own 👨🎤
Different Web API endpoints give external applications access to different user data sets like user’s top artists and tracks or any artist’s album or song titles.
First I wanted to make the game my own, so I get my “profileImage.image” and “profileName.text” to the top of the App. For this I used the ‘Get Current User’s Profile’ endpoint:
GET https://api.spotify.com/v1/me
Make some noise 🔊
So this is where the fun begins. Spotify’s Web API lets you access to your playlist and gives you all kinds of data, including a 30 seconds preview [track.preview_url] which can be easily played back with Framer or any browser.
To access my ‘saved tracks’ playlist and artists names, album arts, track samples I used the ‘Get a User’s Saved Tracks’ endpoint.
https://api.spotify.com/v1/me/tracks?offset=0&limit=2
Final touches 🎵
After adding some randomisation, and logic to flip back the cards which are not pairs and remove those which were already paired, I added a rewarding success screen with a satisfying earcon.
I used Facebook’s Sound kit in Framer, this lets you add high quality auditory feedback to your prototypes.
You can hear more about Sound Design at Facebook 🎧👇
The Thing
So here is the thing. It works as intended. In case you would like to get your hands on the code drop me a line on twitter @grotandthemob
Learnings and thoughts 🤔
Prototyping with data provides an extra ‘reality-layer’ for your prototype with actual avatar images, names or email addresses. What is more exciting to me in experimenting with code and real data sets is the potential to unlock new ways to manipulate and display digital content — making Things that would not have been possible by sketching on paper or pushing pixels from left to right.
Recently I became fascinated by the field of sound design. I started writing a separate piece on PSD (product sound design) to share how much I lack of the vocabulary to express characteristics of sound, what are the differences between earcons and auditory icons, what sonification means.
If you wanna set up the Spotify Web API for your Framer project, I recommend you to start with Sam Thorne’s article 👇
