How to use Spotify's API with Javascript

[Music] what's going on guys I am back another day another video although today is not just gonna be any of the video today we are going to write some actual code and I know who would've thought right that's crazy I say I'm a programmer I say I'm a developer so I figure why not write some code for the viewers hopefully it'll validate a little bit of what I say on this channel this is going to be our Spotify API tutorial javascript video and I know that was a bunch but essentially what we're gonna do is we were going to learn JavaScript by the way of using Spotify API now for me typically there is no one to call whenever a coding issue arises if something comes up I'm pretty much stuck on an island and I'm not saying that that's a bad thing honestly that's probably the best way to learn you screw up something you figure out what you did wrong and you work to find your solution however every now and again it's nice to have someone guide you nice to have someone show you their step-by-step process when it comes to coding a piece of software from the ground up one of my goals has been to create an easy way to learn JavaScript for beginners so hopefully through this video we'll accomplish that will actually be rendering everything using plain of HTML CSS and JavaScript and I know there are tons of frameworks and libraries that may development so much faster at this point however I've lost and learned that a lot of developers don't really had that foundation knowledge and that's partly because a lot of these frameworks while they're really fast and they made development go quick they do so much under the hood that it's no point in knowing what's going on under the hood so the first thing we're gonna do is we're gonna plot out our application layer I'm gonna show you the design approach we'll take and develop it let's add the next thing we'll do is we'll talk about our coding strategy I want you to understand the approach that we're taking as we code this piece of software from the ground up lastly Wilco and will reference modifies documentation throughout the process to design our application layout I'm gonna be using a tool called Mach flow and no I'm not sponsored by them but I do think the tool is pretty solid I'm gonna be using the basic package because it's free this is a tutorial so I really didn't feel like paying for another upgraded package so I think I've done enough talking I just won let's get to work alright so they had this option here at the top lift design UI Casas which allows you to create a new UI project so we will go ahead and click that we are going to use the boost draft Tim for this project so that the concept elements will already have the bootstrap Styles apply we'll name the Spotify with API project plan tutorial will go ahead and click start so the way this is gonna work is that we're gonna pull a list of genres on Spotify so here's the Spotify desktop app we'll pull a list of genres when you select a genre such as pop that will give you a list of playlists when you select a playlist that will give you a list of tracks for that playlist that's what we're going to duplicate in our app [Music] once the user has a playlist they will hit a search button to get a list of tracks for that playlist [Music] when you click on a particular track will display the track details maybe the track title track artists and maybe the album cover let's work so now that we have our ad layout we're going to review the coding strategy that will follow we're gonna do all of our coding using vs code and again this is gonna be a very simple app as you can see we have an HTML page a single CSS file and an app JS file to handle all of our logic I've already added the styles and selectors to our HTML file and these will be used to populate our page with Spotify data we want to be using the module pattern for this project specifically the pre es6 module patter concept the module pattern essentially emulates classes in JavaScript it's widely used because it allows us to keep our code cleanly separated and organized we can hide the implementation of certain functions from outside scope while at the same time allowing our site entities necessary access via publicly declared functions or objects the pattern is effectively implemented by the way of closures and Effie's for those of you who are familiar with closures it's essentially a JavaScript feature that allows an inner function access to the variables of an outer function let's say we have an anonymous function declaration we'll assign this anonymous function to a variable called car inside the function we create and initialize a private variable called speed we then return a function call for that's able to access the privately declared variable speed this enclosing scope access is made available via a closure in turn while we cannot touch the private variable speed directly we can update it by utilizing the publicly declare method for this shows the power closures can give us if these are also very prevalent in the JavaScript language it stands for immediately invoked JavaScript expression essentially it's a function that's executed immediately after is declared variables and functions declare an aside cannot be accessed from outside scope unless we explicitly allow them by returning them this provides data privacy as well as encapsulation we're going to create if Easter houses separate components of our app each component will essentially serve as a module hence the module pattern now for some preliminary talk about Spotfire for this application we will be used their client credentials a authorization float and I know there was a bunch but it's synteny what's gonna happen is we're gonna get a token from Spotify we will then use that token as we call future API endpoints having said that we're gonna start on our first module that will house all of our API functionality so the first thing we're gonna do to get that token is we're gonna call their token API endpoint this will be a post request also we will be given a client ID and a client secret during the registration of our app this will be useful in the post request as well because we were to pass that in the body of the post request now unless we call that API Spotify will give us back a bearer token that we will continue to use as we call their various API endpoints okay guys we're going to start with the API module as I quote I will stop at various points to explain what's going on [Music] okay so as you can see we have the initial coding set of our first module our API module it's an iffy we know that by these two parentheses here that will cause this function to fire immediately inside the function we've declared two variables a client ID and a client secret we've also created a private method called get token that will return a promise as a note about the async keyword set before the parentheses so inside the function we use the JavaScript fetching API method to call the Spotify token endpoint this needs to be a post request we need to specify the required content type in our header additionally they require we supply a parameter called authorization with a value of basic followed by a base64 encoded string representation of the client ID and client secret in the body of our request we supply a parameter called grant type that has a value called client credentials will await the data from that endpoint place it in a variable called result and we then convert that data to JSON the conversion method will also return a promise in turn we await the JSON resolve finally we store that JSON result into a variable called data and specifically return the access token property from the JSON data we will be able to use that bearer token to call a Spotify endpoint giving us actual playlists so now let's take a note of what API endpoints we're going to be calling first we use the API endpoints to get a list of categories next we'll use the API endpoints to get a list of categories playlists next we'll call the API endpoints to get items of a playlist and finally we'll call the API endpoint to get a track [Music] [Music] [Music] [Music] so now we've created all of our API methods that we will be using to pull our data they essentially all follow the same basic template so I'll go over details using the first method and I'll show differences in the subsequent methods our first method is to get a list of genres this method receives a token parameter because we would need to supply the token Spotify provided to us in each API call this function will return a promise as denoted by the async keyword we use the JavaScript fetch method to call the Spotify category's API endpoint per Spotify as documentation this will be a get request and we are to pass a bearer token along the way in the request header once we receive the result from Spotify we will then convert it to JSON which will also return the promise in turn we await that conversion and store the data in the variable called data finally we return the items array store on the categories object the next method is to get a list of playlists based on a given Java this method receives a token parameter and a genre high D parameter we create a variable to hold a limit on the amount of playlists we want to receive using the JavaScript fetch method we call the categories playlist endpoints applying both the jar ID and lending additionally supplying the requested header information just for clarification we are using JavaScript template literals in our fetch API template literals are very versatile because they allow us to embed expressions directly inside of a stream obviously we're only passing parameters but I think the code is just cleaner this way anyways we will receive the data from Spotify convert it to JSON and finally return the items array store on the playlist object the next method is to get a list of tracks for a given playlist this method will receive a token and a tracks employee parameter we will have this Trax endpoint because it is included in the data set we retrieved when we first pull the playlist so in turn when the user selects a playlist we will be able to access the tracks API endpoint attached to the playlist object we declare a limit and we pass the track's endpoint and limit to the fetch call we supply the token await the results from the fetch call I'll weight the JSON conversion finally return the items array object the last part of method will get the actual selected track eventually we will be able to display all the tracks on the lizabrewer and the user will be able to select a specific track to view details that said this method will receive a token and a track endpoint which we will supply in our fetch call we will await the result in the fetch call i'll wait the json data conversion and finally return that json object next we return methods we want to exposed to outside scope here we are using closures because the publicly declared get token method has access to the privately implemented get token method these public methods will be caught in our main app module we are now going to start working on the functionality to handle our UI we'll create a module for that as well we would need to be able to populate select lists and create change events for them to interact with the API data [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] we've done our second module started our UI module first thing we do is declare an object to hold references to our HTML selectors we do this to avoid having to type the specifics a letter name multiple times as we code if we happen to update an ID or a class name in the HTML file we'll only need to update it once here in the JavaScript file next we're going to declare public methods that will eventually be called by our main controller the first method input field returns an object with the following name value pairs essentially that object will return the actual HTML field this object is useful as it will allow us to attach event listeners to input fields outside of the module our next method creates our will be used to add select options to our Java select field the method receives detect and value parameter that will pass into the template literal here we are using separate literals to construct actual HTML we then grab our genre select field using the curie selector method we pass in the genre selector using the Dom elements object we created above we then insert the HTML into a genre select field using the insert adjacent HTML method the insert adjacent HTML method will insert text as HTML at a specified position we're using the before imposition which says that we want to insert our elements as the last child of the parent element we use this coding approach to generate playlist generate tracks and generate deesis for a given trend the only difference is with the create track detail method we grab the track detail div using our Dom elements object and we clear it out prior to populating it with HTML we currently have two separate modules one for our UI and one for our API our UI module has no relation to our API data it's only concerned as input fields that we need access to this is called separation of concerns now we're going to make a module that we utilize both the API and UI module to handle retrieving data from Spotify and populate our UI fields with that data [Music] [Music] [Music] [Music] [Music] [Music] so we are back and we've written a decent amount of code here we've started creating our main hat module that we utilize both the UI and API modules if he's like any function can accept parameters so we actually passed the UI controller and the API controller variables into the function this allows us to access both modules public methods passing them as parameters allows you to know exactly what variables you're working with within the add module in turn and eliminates confusion first thing we do is retrieve the object referencing input elements from our UI module if you remember the get token method and our API controller returns a promise so we make this method asynchronous in order to use the away keyword which will ensure we don't call the token dependent methods before we actually have a token once we grab the token we will store all the hint and field within our page immediately after we'll use that token to pull Alyssa Spotify genres once those genres are pulled we will loop through each genre using the JavaScript for each method and called the create charmer method on our UI controller to populate the Select field let's take a look as you can see we receive the token from Spotify and we store the value within a hidden field you can also see that hard grammar select list has been populated we've also coded our genre change event when the user selects a genre we will first call our UI controller method to clear out the playlist select field and all subsequent elements we then get the token that we stored in a hidden field during page load we give the genre select field grab the selective value and we finally car API method to retrieve a list of playlist for that genre right now we are logging the playlist data to the console let's take a look we select the pop genre and you can see that we successfully retrieved our playlist array for each item we will access the Trax object to grab the tracks end point we will also use the playlist name now we'll go ahead and code our last two event listeners [Music] [Music] we've now coated our last two event listeners the submit button will use a click event listener it will work very similar to the genre change event listener we first utilize the prevent default method to prevent the pace from refreshing we then call the reset tracks on ru our controller we grab the selected playlist value which will be a Spotify tracks endpoint we then get all the tracks for that playlist and display them in our list group lastly we add a click event listener to our tracks div if you recall each track will be represented by an anchor tag inside of the tracks div while the user will click on the anchor tag to select track we don't want to add an event listener to each anchor to handle that we use a JavaScript technique called event delegation event delegation is a technique that allows us to delegate a parent element as a listener for all the events that happen inside of it so we attached the events that the parent tracks did that encapsulates all the anchor tags when we click on the anchor element you're also clicking on the tracks div in term we triggered the event listener on that div we can utilize the event dive target to determine which element within the track sitive we actually clicked on now that we have the actual element we can access the tracks dev endpoint since we set that to be the value ID property on the anchor tag we then call the API to get the actual track object and we rendered that to the page looks like our app is working as expected we are able to Lozano's we then lo playlists based on the genre when we click the search button we pull a tracks based on the selected playlists finally when we click on a specific track we're able to view the album cover song title and artists who made the song so I think that about sums it up well done guys so that's all we have for today guys I appreciate you for stopping by and watching this video this is my first tutorial video so let me know if it was effective did you learn something new did I reaffirm things that you already understood at any rate I'd love to hear all the feedback also please like subscribe comment all the days and I will see you on next time

Channel: Avery Wicks

Views: 110,220

Keywords: how to use spotify's api with javascript, Spotify API Tutorial with Javscript, javascript api tutorial for beginners, how to use spotify's api, learn spotify api, using spotify api with javascript, programming javascript for beginners, programming for beginners javascript, javascript coding for beginners, javascript app development tutorial, javascript project tutorial for beginners, javascript tutorial for web development, basic html css javascript tutorial, spotify api, spotify

Id: SbelQW2JaDQ

Length: 20min 55sec (1255 seconds)

Published: Mon Jun 15 2020