Site Files:

The Site

site files

What I did:

To start this unit I brainstormed what would be useful to the people that come to use the site. I decided that getting data from a Json file to display user projects would be one and that users would also benefit from being able to search for youtube videos right from the site. After all that was finalized I used w3schools to learn Json and Ajax after spending some time there I started learning about the Youtube API and how I could implement its search into my site. To use the API I had to sign-up for an account and get an API key when I finished that setup all the HTML for the videos to show. Then I used jquery to handle some button logic and ajax to make the request to get videos. Once that was all taken care of I started to work on the second part, which was getting information off a JSON file that was stored in a different location than the site files. I needed to write a JSON file that would have an image (lg and sml), creator name, description, project name (ect) after writing this file I needed to take some screenshots of previous games that I have made and add them to the landing so that I could add their URL to the JSON file. Next was finishing the JSON file by filling in the rest of the information. Now I just needed HTML, CSS, and some js to make a slide show for the images, due to time constraints I just used the everything from a from the slide show on w3schools now that that was set up all I had left to do was some ajax to fetch the data from the JSON file. link to the youtube API

What Went Well and Didn't Go Well:

I had some issues with the youtube API at the start. I was originally using pure js to get authenticated, setup my API key and so on but I was having problems with accessing this script https://apis.google.com/js/api.js which was required to do anything with the js because of this I opt for making an HTTP request with ajax using a URL that would only change in regards to the search term. This gets a request is seen on lines 6 and 7 of youtubeApi.js this simplified getting the videos greatly. On the other hand, making everything for the JSON file that would get user project to be displayed was an easy task because I already knew how to write js objects, and get/parse JSON files so they could be used.

What I Would Do Differently:

If I were to do this unit again I would want to spend more time figuring out what was wrong with the youtube API so that I could have done everything through js instead of having a URL pre-made. I would also like to be able to find some way to add HTML via little snippets instead of adding it through js i.e. the jquery append it would be much cleaner and probably more efficient to have some way of getting little HTML snippets from a file and populate the elements through some kind of parameter system.

The Most Valuable Thing I Learned:

With this unit, it is very difficult to choose one thing to put above the others because it was all extremely useful information and skills to learn. So the most valuable thing I learned this unit was this unit.

Linking to Personas and Sernarios

• Sebastian: does not want to spend lots of time reading about the implementation or interface of specific sections - video tutorials do not go over the specifics of why they mostly just show it get implemented
• Sevastian: Wants to create a game for mobile but has no idea how to get user input from a touch screen - can quickly search for a video that will teach him
• having the youtube API will allow the users to quickly search for videos without having to leave and open another tab.
• Due to time constraints, I cannot set everything up but having the slide show of user projects would allow for them to submit their project and have it viewed by others. This would let the get feedback and be a way to have their game seen by others. It would also show the others that are just starting out that using the resources that the site provides they can learn how to make a game. It'll also give them an idea as to what they can make if they aren't sure yet.

Learning outcomes

When you have completed this unit, you should be able to use JavaScript to access and use web services for dynamic content (AJAX, JSON, ect.). in slideShot.js I use XMLHttpRequest object to get a JSON file UserProjects.json that I wrote from the outside my site files, I then parse that data so it can be just by JS and then I use Jquery to display that data to the user (lines 3 to 25). In youtubeApi.js I again use the XMLHttpRequest object to get data from youtube's servers. After reading about the API I got the URL I would need to use in order to send the request and I just needed to add my API key and put in the search term (lines 1 to 12).