mdinfotech.net  



Google Classroom exercsie on the client server model.



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?
    Download index.html and apiexample.js. Run and examine this code and figure out how it works. Code will be explained in class.

    In Class Exercise: Read the BoredAPI Documentation. Modify the code to make 3 different requests and display 3 different pieces of information from BoredAPI in the app.
    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 AND an example of usage, 
    the origin of the word (if it exists), 
    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, 
    2+ definitions each with an example of usage (if there are two or more), 
    the origin of the word (if it exists), 
    2+  phonetic text (if they exist),  
    and 2+  audio clips (if they exist)
    and if a definition does not exist: an appropriate message
    
    11/10
    Styled
    Shows word, 
    all definitions each with an example of usage (if they exist), 
    the origin of the word (if it exists), 
    all phonetic text (if they exist),  
    and all audio clips (if they exist)
    and all synonyms and antonyms if they exist,
    and if a definition does not exist: an appropriate message
    
    
    Using the code from the 'Intro To API's' example, Ms. Wear will demonstrate how to show images from the Dog API.
    Code: index.html and apiexample.js.
    1. Refer to the TV Maze API.
    2. Download sample code with Lightboxes working: apiexamplewithforloopanddeepapisearc.zip
    3. When an episode is clicked on, display a lightbox with the following: episode image, name, season, number, and description.
    4. Validate the HTML and CSS
    5. No JS errors should appear in the console.
    6. Create a simple, attractive, design that works, and looks good, on both devices and desktops.
    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.					
    			
    			
    			
    			

    Explore different free API's without keys and learn how to display the content from the json reponse in a web page. As you do this exercise, think about which API's might be useful in your final project "Create a PWA" coming up next.

    1. Pick a Sample URL from Free API's No Key.
    2. Copy and paste the JSON into the JSON Formatter and Validator so you can see what it looks like.
    3. Read How to Work with JSON in JS
    4. Write a JS Script that displays the JSON data formatted in a basic website. Use CSS and HTML to display it in a Web Friendly manner with basic modern design.
  • Read the following article: 3 Rules of App Design
  • Read "Final Project: Create a PWA" below this block.
  • Come up with ideas for an app you could write for this project. Be able to answer the following questions:
    1. What is the name of your app?
    2. Describe your app:
    3. In what way is it informational or entertaining so that users will come back?
    4. What API does it use data from?
    5. What will you do with this data?
    6. Are you starting with a previous assignment from this course? If so, which one?
  • Complete the assignment on Google Classroom to submit a plan for the Final Project.
  • Write a Progressive Web App that is justifiably worth weeks of work and 20% of your final mark. It is an informational or entertainment app that uses data from an API like the ones found in Free API's No Key or More Free API's. If you do use an API from the second list, select one that does not use an API Key or OAuth.

    You may start with a previous assignment from this course, or start a new one from scratch. If you do choose to reuse an assignment, only functionality added since the prior assessment will be counted towards this project.

    Assessment

    Meets Progressive Web App Criteria (/5)
    1. Manifest is recognized and contains basic required info.
    2. Icon used with multiple required sizes for the icon to show up on splash screen and desktop icons.
    3. Manifest refers to multiple sizes of icons.
    4. Service worker that preloads cached files works and app can be used offline.
    5. Chrome's "Install App Name..." creates a working shortcut that opens to the sites homepage, with an appropriate title, in standalone mode (that is, the browser window is not visible).
    6. Splash screen loads correctly on a mobile device.
    7. In Chrome Web Dev Tools, Application > Audit gets all scores in the green zone, and NONE in the red zone.
    	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 attempt to create PWA.
    
    Usability and Presentation (/5)
    1. easy to use
    2. applies principles of design
    3. attractive design using colors, fonts, css positioning, css effects
    4. responsive design
    5. Appropriate icon used without breaking copyright.
    6. Provides a pleasant, easy to use experience offline.
    	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 attempt to create attractive, responsive, usable design.
    
    Functionality and Complexity(/5)
    1. the work you put in is justifiably worth 20% of your mark
    2. works on a desktop/laptop
    3. works on a mobile android device
    4. robust (cannot crash it)
    5. reliable (behaviour is reliable)
    6. error checking (can handle invalid input)
    7. has a purpose that will bring users back
    8. has reliable offline functionality
    9. it meets the What Makes a Great App? criteria.
    	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	    A static HTML/CSS website was submitted.
    
    Code (/5)
    1. HTML Validates
    2. CSS Validates
    3. No JS Error in console
    4. 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.					
    	
    			
    Insert https://cors-anywhere.herokuapp.com in front of the fetch request to your API
    Documentation