World Wide Web and Mobile Applications

CSC 130 - Lab B01 and B02

Teaching Team

Department of Computer Science
University of Victoria

Lab 08 and Lab 09

Table of Contents

Admin

All CSC 130 TA Lab Notes: https://notes.dominiquecharlebois.com/ta/csc130.html

Admin

Lab 08 and Lab 09 are due at the end of the lab today.
Lab Material: Brightspace CSC 130 Course - Content - Day 10: Lab 8! and Lab 9!
Checkpoints are optional, thus feel free to work at your own pace and demonstrate your work at the end.
Ask Questions! Answer Questions! Collaborate with Peers!
Resource: https://developer.mozilla.org/en-US/

Admin

Credit is awarded by demonstrating your work at the end of each lab:

Students who complete all required material will obtain 3/4.
Students who complete bonus material AND collaborate with peers will obtain 4/4.

You are expected to collaborate with peers by asking and answering questions.

Table of Contents

Lab 08 - Overview

Objectives

Understand how to make a get request to a RESTFUL web services.
More practice working with JSON objects References/Resources.
Translation between JavaScript and jQuery.

Lab 08 - Resources

Examples

Open Movie Database API: - https://jsfiddle.net/ycoady/4en790k3/24/

Resources

Lab 08 - Starter Files

Starter Files

Download the ZIP folder named lab8-starter within a folder named csc130.
Unzip the folder named lab8-starter.

The folder named lab8-starter contains one HTML file, one CSS file, one JS file.

Lab 08 - Part 01a

Check Point 01a

Open up the lab8.html file in a text editor.
Add the references to the JS and CSS files, and a link to jQuery into the HEAD section.
Open up the lab8.html in a web browser. Verify that everything is connected correctly.
Open up lab8.js in a text editor.

Resources: https://www.redhat.com/en/topics/api/what-is-a-rest-api

Lab 08 - Part 01b

Check Point 01b

Create an account with Open Movie Database: http://www.omdbapi.com/apikey.aspx.
Use the RESTFUL API example to get the information from the user and then retrieve the data from Open Movie Database.

Hint: http://www.omdbapi.com/?apikey=[yourKey]&t=[movieTitle]&y=[movieYear]

where [yourKey] will be replaced by your key from the Open Movie Database (e.g., http://www.omdbapi.com/?apikey=01234).

Resources: https://jsfiddle.net/ycoady/4en790k3/24/ and http://www.omdbapi.com/

Lab 08 - Part 01c

Check Point 01c

Complete the submit() function in th file named lab8.js.

Lab 08 - Part 02

Check Point 02

Complete the displayResults() function in th file named lab8.js.
Determine which attributes in the JSON data we need to access.
Add the data dynamically to the HTML file with JavaScript.

Lab 08 - Part 03

Check Point 03

Use the MPAA standard ratings with the corresponding MPAA standard image to add movie ratings to our displayed results (e.g., G, PG-13, R, M, etc.).
Add the JavaScript variables (g, pg, pg13, r, and unrated) with the appropriate URL.
Using the movie rating of the movie, display one of these MPAA standard rating images in addition to the text.

Hint: You will need to use if-statements to conditionally render the content based on the rating.

Lab 08 - Bonus Check Point

Bonus Check Point

Add the alt attribute to the MPAA standard images.
Set the alt text to correspond with the MPAA standard rating (i.e., A G rating will have General Audience as the alt text).

Table of Contents

Lab 09 - Overview

Objectives

Practice thinking about JSON, arrays, and loops.
Introduction to 3D using Babylon.js.
Become familiar with GitHub and Repositories.

Lab 09 - Part 01a

Check Point 01a

Explore the type of data model you will use in Project 02 (i.e., how many objects in the array, stored values, names of attributes in the objects).

Resources: https://www.imdb.com/interfaces/ or https://bookshelf.erwin.com/bookshelf/public_html/2021R1/Content/References/Data\%20Modeling\%20Overview/Data\%20Model\%20Example.html

Lab 09 - Part 01b

Check Point 01b

Create a design of your data model for your Project 2 (i.e., a hand drawn sketch, or list of formatted data elements).
Demonstrate your mocked up JSON object.

Note: The JSON object can be from a server, but it does not have to be from a server.

Lab 09 - Part 02

Check Point 02

Create your first Babylon.js app, as described in the tutorial.
Modify Playground 5 from the tutorial (e.g., modify the colour, texture, yeti, etc.).
Demonstrate your modified Playground 5.

Tutorial: https://doc.babylonjs.com/journey/theFirstStep\#everyones-very-first-step

Lab 09 - Part 03

Check Point 03

Create the GitHub Repository for the Babylon.js Application.
Upload the Babylon.js code to the GitHub Repository.

Lab 09 - Bonus Check Point

Bonus Check Point

Upload Project 01 and/or Project 02 to GitHub.

Table of Contents

Lab 08 and Lab 09

Lab 08 and Lab 09 are Finished!

Final Steps

Upload files to Brightspace.
Add link to text field in Brightspace submission.