mdinfotech.net  

4. JSON and APIs



4. JSON and APIs

Review Javascript
Host/Client Relationship
Google Classroom exercise on the client server model and JSON.



Watch the following video and answer the questions below in a Google docs document.
  • Watch The Client Server Model - Clients and Servers
    1. Define client.
    2. Give examples of a client computer.
    3. Give examples of a client program.
    4. What is a server?
    5. What is a virtual server?
    6. Who makes requests?
    7. Who provides repsonses?
    8. What is the client-server model?
    Intro to JSON
    Google Classroom exercise on the client server model and JSON. Read the following tutorials:
    Fetch and API's

    Fetch and API's Lesson: Ms. Wear's Fetch and API's Notes for Web Dev 11

    In this unit, you will learn how to read the documentation and fetch data for API's that produce their content in JSON. You will also learn how to use JavaScript to pull specific information out of the data to display as content in your app.

    Resources
    Using Fetch
    Understanding Promises
    Understanding Arrow Functions
    Steps to Coding an App that uses an API for Content
    1. Create a responsive interface using HTML and CSS.
    2. Fetch the content from the API using an event like onload, onclick, or onchange to trigger it.
    3. Receive the content from the API in JSON.
    4. Format and display the data you wish to show.

    In this unit, you will learn how to read the documentation and fetch data for API's that produce their content in JSON. You will also learn how to use JavaScript to pull specific information out of the data to display as content in your app.

    API Example No. 1: Activity API

    This exercise uses the MDInfoTech Activity API.

    Download index.html, style.css, and apiexample.js.



    Partner Activity:

    Run and examine this code and figure out how it works. Code will be explained in class.

    Answer these questions:

    1. What js function gets called when the button is clicked?
    2. What actions happen when the page finishes loading?
    3. What does fetchContent do?
    4. What does changeContent do?
    5. What can you do to see what data is storing?

    Try to do this:

    1. Add the number of participants required to the webpage.
    2. Display the cost of the activity to the webpage.


    In Class Exercise:
    1. Read the documentation for the activity api: Activity API Documentation.
    2. Add a new button to the page and a new div tag to display information. The button should say "Get a Recreational Activity". When it is clicked, it will display a recreational activity in the new div tag.
    3. Add a new button to the page and a new div tag to display information. The button should say "Get a Free Activity". When it is clicked, it will display a free activity in the new div tag.
    tba
    Word of the Day Exercise

    This exercise demonstrates how to use two API's on the same website.

    Code along in class to create a "Word of the Day" app.

    In Class Exercise: Word of the Day Fun Project Maximize the information shown for each definition and include playable pronunciations! In this project we will be using two api's:
  • Word of the Day
  • Dictionary API
    • 6/10
Styled
Shows word and if a definition exists:

the first definition, 
and an audio clip
and if a definition does not exist: an appropriate message

8/10
Styled
Shows word,
the part of speech, 
the first definition, 
one phonetic text (if it exists), 
and an audio clip (if it exists)
and if a definition does not exist: an appropriate message

10/10
Styled
Shows word, 
all the parts of speech with
all of the definitions, 
all of the phonetic text (if they exist),  
all of the audio clips (if they exist)
and if a definition does not exist: an appropriate message

11/10
Styled
Shows word, 
all the parts of speech with
all of the definitions, 
all of the phonetic text (if they exist),  
all of the audio clips (if they exist)
all synonyms and antonyms if they exist,
and if a definition does not exist: an appropriate message
    tba
    Dog API Exercise: Using Images from API's
    Using the code from the Activity API Exercise, Ms. Wear will demonstrate how to show images from the Dog API.
    Code:Download index.html, style.css, and apiexample.js.
    What to do:
    1. Update the interface of the Activity API to be a Random Dog Pictures site. Change the title in the browser tab, change the question being asked, change the text on the button, and modify the CSS to accomodate the dog images.
    2. Add 5 more buttons, each labelled with a breed. When the button is clicked, a random picture of that breed is shown.
    3. Print a list of all the dog breeds available in the console. Turn this list into a drop list (html select element) and when a breed is selected, it shows a random picture of that breed.
    6/10
Styled
Step 1 done

8/10
Styled
Step 2 done

9/10
Styled
Step 3 done without subbreeds

10/10
Styled
Step 3 done with subbreeds

11/10
Styled
Step 3 done with subbreeds and drop list in alphabetical order
    tba
    TV Maze Exercise

    A lesson on how to use an API the delivers much more complex JSON: the TV Maze API

    Sample Code: Example using TV Maze with Complex JSON

    In Class Exercise: Use a for loop to display info for all 10 TV shows returned by TV Maze (instead of just the one in the sample code).

    tba
    TV Maze API Assignment Part 1
    Ask Ms Wear to show this assignment. It will be marked as part 1 of 2 parts. Part 2 is in the next unit. Assessment (/15) 
    Basic Design of Website							
Create a simple, modern, attractive, design that works and looks good on both devices and desktops.							
	5	                4	                    3	                2	            1		
	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    Minimal, or no CSS Design
	                                                or does not work on 
	                                                one of mobile/desktop			
Added Functionality							
The code provided shows a search bar that allows the user to search for a TV Show, then display the TV shows 
search results along with an episode list. You are to add the following functionality:
When an episode is clicked on, display a lightbox with the following: episode image, name, season, number, and description.							
	5	                4	               3	                2	            1		
	All criteria met	Most criteria met	Some criteria met	Multiple issues     Incomplete		
	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    It does not do what is it supposed to.		
Code							
HTML Validates
CSS Validates
No JS Error in console
Practice separation of languages							
	5	                4	                3	                2	            1		
	All criteria met	Most criteria met	Some criteria met	Multiple issues	    Incomplete		
	All criteria met	1 -2 issues	        3-4  issues	        4+ problems         Not coded to standards taught in class.
    tba