A15 – Using spotify-web-api.js

Part I

Download the Spotify-web-api.js library from https://raw.githubusercontent.com/JMPerez/spotify-web-api-js/master/src/spotify-web-api.js and upload it your server. Place it is a subdirectory of your site’s root directory (e.g. /javascript).
Download the require.js library from https://requirejs.org/docs/release/2.3.6/minified/require.js and upload it to your server. Place it is a subdirectory of your site’s root directory (e.g. /javascript).
Create a web page named elvis_pics.html in your …/csci240 directory and a file named elvis_pics.js in your …/csci240/javascript directory.
Create a Spotify account if you haven’t already.
Read my tutorial named Spotify for Developers and register your web application (i.e. elvis_pics.html).
Read my tutorial named Using Require.js and add a single <script> tag to your elvis_pics.html file so that require.js is loaded first and then your elvis_pics.js file is loaded.
Edit your elvis_pics.js file so that require.js loads the spotify-web-api.js file in your /javascript directory as well as the d3.js JavaScript module found at https://d3js.org/d3.v5.min.js. Pass a function named main to requirejs().
In your elvis_pics.js file, declare a function named main and in it, print something to the console. Verify that main() is executed by navigating to your web app using Chrome, Firefox or Opera, open the Developer tools, and verify that main() was executed by checking the console.
Add code to main() that uses d3.js to append a visual element to the web page. Verify that the d3 code in main() is working properly by navigating your browser to your web app.

Part II

Rewrite your main function so that it communicates with Spotify’s authorize endpoint and retrieves data from from Spotify using the spotify-web-api.js library. Your main function should be structured as follows.

function main(spotty, d3) {
    // Detect when the user has navigated to the website
    if (window.location.hash.length == 0) {
        //compose a url for the Spotify authorize endpoint

        window.location = new_loc;
    }

    // Parse window.location.hash to get the access token

    // Instantiate the spotify-web-api constructor

    // Set the access token

    // Make 3 requests for data from Spotify and do something 
    // visual with the data when it is received.

}

Instructions on how to compose the URL for the Spotify authorize endpoint and parse the hash string can be found in the tutorial named Spotify for Developers.

Instructions on how to instantiate the spotify-web-api constructor and set the access token can be found in the tutorial named Using spotify-web-api.js.