#Project 4 - Soundcloud API
##Do Now Begin this session by completing the Do Now activity.
##Scope
You have just been hired by APIs R US inc. This company relies entirely on using API for the many webapps. As a first project they have asked you to make a simple site that calls on the SoundCloud API to test your skills.
Since this is your first project, your manager has provided you with some helpful tools to get started.
##Project Criteria Your Manager has laid out the following requirements for the project:
- The webapp will display the Track Title, Genre and URL for songs tagged with the genre the user inputs.
##Learning Objectives By the end of this project the employee will be able to...
- Initialize their application using SC.initialize
- Get information from an API using SC.get
- Use jQuery to append text to an HTML page
##References/Tools
##Vocabulary
- Client
- Server
- API
- Get
- Initialize
- Callback
##Instructions
Your manager has provided you with some useful direction to complete this project. Follow the step-by-step instructions below.
Although these directions do not provide all the answers for this project, they do provide you with the guidance you will need to make this project.
###1) Create a GitHub repo and C9 workspace for this project This should have already been completed during the Do Now.
Before moving on to step two, ensure your HTML is correct by having an instructor confirm you are ready to move on.
###2) Obtain a Client ID
You will need to use the following client ID with the API: 90f2a1fb287219fc9350fe313a7dfced
Copy this and use SC.initialize to begin using the SoundCloud API.
###3) Ready the Document
Now that you have initialized the yourwebapp it is time to "ready" the document. For information on how to do this, research the jQuery ready function.
Hint: all of the remaining code for this project will fall inside of this ready function.
###4) Interpret User Input Now that the document is ready you must store the user's response in a variable.
In order to achieve this set a variable equal to the id of your button. Then use the .click function to set the value of the user input to a new variable called userChoice.
Hint: this can be accomplished in 3 lines of code. before moving on to step 5 check this code is working by logging userChoice to the console.
###5) SC.get
Now that you have stored the value of the user input it is time to use it with the SoundCloud API.
Now that you have initialized the document and you are ready to interpret user input from the html file you are now ready to call the SoundCloud API to get data.
Call on the SC.get function to get tracks by the genre selected by the userInput.
If you are having an issue with this check out the Basic Use section of the SoundCloud API Documentation. Also see the documentation on the SC.get method here.
After the SC.get function has been created you must use the .each function of jQuery to then append text within the results id.
###6) Display content You are finally ready to start placing text in the form of API references in your HTML page! Use the SoundCloud API reference to do this. The example completed code uses track, genre and permalink_url but you may choose any three properties to display on your page for each song.
####Bonus) Your Manager has offered a stipend of $500 for each of the bonus requirements listed below:
-
Use Bootstrap to style the unsorted list that the results sit in, so that they look more appealing.
-
Display information about the user next to information about the track. Use the SoundCloud Developers Guide for this documentation
##Grading Criteria Your manager will be grading your capibility on this project based on this rubric
##How to Submit The final code for this project must be pushed back up to your repo on GitHub. Then share the link to your repo at bit.ly/ScriptEdProjects
To push to GitHub run the following commands in your terminal:
git status
git add .
git commit -m "example comment"
git push origin master
##Homework Instructor will assign homework based on progress in class.