Unit 5: Third-party Services
Unit Essential Questions
You should use the questions below to assess your own learning and understanding of course material. These questions are also a good method of organization if you’re taking notes.
AJAX
- What is AJAX?
- How does AJAX work?
- Why would one use AJAX?
JSON
- What is JSON?
- How does JSON work?
- Why would one use JSON?
APIs
- What is an API?
- How do APIs work?
- Why would one use APIs?
Unit Readings
AJAX
- Read AJAX Introduction and/or Watch JavaScript and AJAX tutorial: What is AJAX?
- Read AJAX: Getting Started and/or Watch Learn XML HTTP Requests in JavaScript: AJAX Tutorial
JSON
- Review W3School’s JSON Tutorial Intro
- Read Working with JSON and/or watch Learn JSON in 5 minutes
APIs
- Read Introduction to web APIs and/or Watch What is an API and how does it work? (In plain English)
- Read Third-party APIs and/or Watch Fetch API - JavaScript Tutorial for beginners
- I strongly recommend you follow along with the tutorial and add in comments to your code to develop a better understanding of what the code is doing and why.
- If doing the reading, pay close attention to the “An approach for using third-party APIs” section!
Recorded Lecture
The lecture below provides additional information on working with APIs which you may find particularly useful for completing the exercise below. However, if you feel comfortable with the material already, you may choose to skip watching this lecture. You can access a copy of the slides presented here.
Check your understanding
This optional exercise will have you practice working with an API to create a dynamic image gallery.
Complete the two functions for this Image Gallery JSFiddle using Unsplash’s API. Make sure you don’t change anything in the HTML or CSS! You only need to add code to the JavaScript box– there are 2 functions you need to complete, one for making the call to the API and the other for populating the data onto the site.
Additional Resources
Below are some additional resources specific to this unit. Even more additional resources are available under the “Resources” tab of our site.
- Review Mozilla’s Client-side web APIs Guides
- Review W3School’s Web APIs Tutorial
- Review W3School’s JSON Tutorial
- Review W3School’s AJAX Tutorial
- Review Github’s list of Public APIs
Unit Lab
This assignment will have you share your site with your peers to get feedback on your design.
Description
While this week we learned about third party services offered by APIs, integrating an API into your site may not make sense. You are welcome to use an API* for your site if you’d like to but are not required to. This week marks the halfway point of the term so we’ll be focusing on getting and sharing feedback on our sites!
- Upload the URL (option 1) or video (option 2) of your site to the Canvas Discussion for Unit 5.
- If you have any specific areas you’d like feedback on, please share them.
- Explore your peers’ websites (or videos) and provide feedback on at least three (3) of them. Consider:
- What’s the purpose of the site? How well is it accomplishing it?
- How easy to use and intuitive is the site?
- What is the site doing well? What are some areas of improvement?
- How interactive is the site? Do the interactions make sense given its purpose?
- If you were the target audience, would you revisit the site? Why or why not?
*If you decide to use an API for your site or final project, please note that you’ll need to be able to run a local server in order to test your site (otherwise, the API calls won’t work). The easiest way to do this would be with Python or VS Code if you already have either installed, or read MDN’s guide to setting up a local testing server.
Option 1
If you’re using tools or frameworks (e.g., Node, Jekyll, React, etc.) that require you to run a server to test your site locally, please refer to Option 2. Note that using an API will require you to run a server.
Use a free hosting service to get your website onto the internet. The recorded lecture below shows how to use Infinity Free but if you’re familiar with other hosting services you’re welcome to use that! Another popular means of free hosting is Github Pages for which you can follow along these written directions or review this video. Note that as a student, you qualify for the Student Developer Pack which includes tons of benefits, including private repositories!
In the past, other students have recommended the following options– please note that course staff may not be as familiar with the options below as we are with InfinityFree and Github Pages, so it may be harder to get help if you choose to go with one of these. Additionally, not all of the options below are free:
Option 2
Record a video navigating your site. Make sure to do it at a pace that allows the viewer to experience your site.
Recorded Lecture
The lecture below provides additional information on uploading a website to Infinity Free which you may find particularly useful for completing your assignment. However, if you feel comfortable with the material already, you may choose to skip watching this lecture.
What to Submit
Upload the URL (option 1) or video (option 2) of your site to the Canvas Discussion for Unit 5. Then provide feedback on at least 3 of your peers’ sites.
Requirements
- Student uploaded a video or URL of their site
- Student provided thoughtful and useful feedback to at least 3 peers.