mdinfotech.net  

Web Dev 12 Curriculum



Course and Lab Introduction
Topics:
  • the "Back-up" talk
  • user accounts
  • meet the lab, lab rules
  • meet the computers
  • exactly what does "monitors OFF!" mean?
  • printing

Students are responsible for saving back-up copies of all their work. It is useful to have a GMail account and a USB drive.

Topics to be Covered
  1. PWA Development
  2. Google Maps API
  3. More Advanced Programming in JS
  4. Firebase
Day 1
Animation Series

Complete these CSS animation tutorials before starting the Animation Assignment.

Original Source and lots of other little animation projects: 25 cool CSS animation examples to recreate.

Animation Assignment

Design and create a CSS animation from scratch.

  • Effort (/5) - how much effort did you put in?
  • CSS Animation (/5) - CSS Animation demonstrates originality
  • Extra Functionality (/5) - At least one event affects the animation, additional JS Functionality, use of SVG etc
  • Design (/5) - follows principles of modern design
Hexadecimal Color Code Game App Assignment

Step 1: Watch Ms. Wear's Video Lesson on How to Write a Hexadecimal Color Code Game.

Step 2: Add functionality so that the game asks exactly 10 questions.

Step 3: Add functionality so that the game there are 3 levels: Level 1 - two choices for the correct answer, Level 2 - four choices for the correct answer, Level 3 - eight choices for the correct answer. Redesign the interface so that it works with all 3 options.

Step 4: Add functionality so that the game has two options: the one shown in the video AND another one where the color code is shown, and the user has to click on the correct color.

Step 5: Turn it into a PWA using the instructions from Unit 3 in Web Dev 11. Host it on Glitch. Hand in on Google Classroom.

Evaluation:

  • Game From Video Finished and Asks 10 Questions (/5)
  • Game Has 3 Levels As Describes (/5)
  • Second Game Created (Step 4) (/5)
  • Passed PWA Test (Lighthouse) (/5)
  • RWD works on Phone and Laptop (/5)
  • Overall User Interface (/5)
tba
Intro to Google Maps JavaScript API - Get Outside! Exercise

An alternative to google maps that does not require a credit card is openstreetmap api.

Step 1: Set up an account with Google Cloud and get a Maps API Key:Watch Setting Up a Google Maps API. You will need to add billing information to be able to use it. I suggest also following along in the Google Documentation that the video is following: Google Maps JS API Overview.

Note:Google recommends restricting your API key instead of hiding it: API Best Practices.

Step 2: Watch Ms. Wear's Video Lesson for the Google Maps Project. See a working example of the example project I will teach: Get Outside!

Links used in the video

Hint: Google Maps now requires a callback function. Since we don't really need one, try this:

Step 3: Add functionality: let the user change the search radius

Step 4: Turn it into a PWA. Submit link on Google Classroom.

Evaluation:

  • App From Video Finished (/2)
  • Passed PWA Test (Lighthouse) (/2)
  • Added Functionality (/2)
tba
Google Maps Assignment
Level 1: Using the Google Maps API, show a map of your local area, with your location as a red marker, and any restaurant in a 3km radius with a yellow marker.
Level 2: Show the 3 restaurants in a 3km radius with the highest star rating with a brighter colored marker.
Level 3: Add a button for each restaurant that shows directions from you to the restaurant.
Level 4: Add a button that toggles the route between driving and bussing.
Level 5: Add your own feature(s) to the program. Suggestions: vary the radius, change the number of results, allow other types of places to be searched for etc.
All levels: Turn into a PWA and validate code. Submit link on Google Classroom.

Resources:
Here are some links that will help you with various requirments of the project.
  1. Initializing the map: https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=en_US
  2. When you receive a response for your search request it will look like this: https://developers.google.com/places/web-service/search#PlaceSearchResponses. This is where you can access the "Rating" of the restaurant.
  3. When searching for the restaurants, the API has a built in service called "nearby search" learn about it here: https://developers.google.com/maps/documentation/javascript/places#place_search_requests
  4. You will NEED to add &libraries=places in between your API_KEY and &callback=initMap in the script link at the bottom of your HTML file. Example 
    https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap
  5. Lighthouse failing? Online PWA checker, Online Performance Checker

Evaluation:

  • Level 1 Achieved (/4)
  • Additional Level Achieved: 2(+1-2), 3(+1-2), 4(+1-2), 5(+1-2) (/8)
  • Passed PWA Test (Lighthouse), HTML and CSS Validate, No JS errors (/4)
tba
User Interface Design: HIIT Timer

An interval timer allows you to set two (or more) periods of time of different lengths. One period is for work (high intensity) and one period is for rest or active recovery (low intensity). By alternating these two time periods, you've set up the intervals of your workout.

A typical HIIT timer has a set number of high intensity intervals separated by low intensity intervals. Optionally, you can provide a warmup and cooldown period by including a duration.

  1. Search 'HIIT workout' on Youtube and see the variety of workouts available.
  2. Learn about HIIT Training
  3. Read Principle of Design
  4. Design and write an extremely easy to use responsive HIIT interval timer in JavaScript. Here is an example of a Tabata Timer. Tabata is a very intensive type of hiit workout.
  5. Appearance, usability, flexibility, robustness, and application will be considered in the assessment.
  6. Turn it into a PWA. Eliminate all red dots on the Lighthouse test. Submit link on Google Classroom.
  • Lighthouse failing? Online PWA checker, Online Performance Checker

    • Deadlines:

    • Prototype 1 - Real User Test tba
    • Final Project Due tba

    Evaluation:

    1. Interval Timer Created working interval timer as defined above (/5)
    2. Usability as a HIIT Timer for a Specific HIIT Workout - create a HIIT Timer as defined above. Usability refers to ease of programming a specific workout and use during workout . Ms Wear will try and program in a specific workout and do the workout to your timer(/5)
    3. Application of Principles of Design to Interface (/5)
    4. HTML and CSS Validate, no JS Errors (/5)
    5. No Red Dots/Triangles on Lighthouse Test (/5)
    tba
    Multi-user Tic Tac Toe

    Write a multiuser Tic Tac Toe game using Firebase.

    Note: to do this project, you will need to set up a billing account with Google API. This means you must provide a credit card number. No charges will actually be billed unless you "enable billing." If you are not comfortable creating a billing account with Google, it may be possible for me to set up a Firebase database for you to use, however, you will not be able to log in to Google to access it, or modify it, and it may make learning to use Firebase more difficult.

    1. Read about Google's Firebase Realtime Database
    2. Complete the assignment outlined at my Multiplayer Tic Tac Toe Github repository.
    3. Follow the instructions on the README of the Github
    4. Turn it into a realtime two player PWA.
    5. Once it works, you can deploy it live on the firebase servers. Firebase Deploy Instructions. At school: C:\Users\lwear\AppData\Roaming\npm\firebase deploy
    tba
    The Power of Service Workers
    Read about some capabilities of service workers:

    Make your final project work offline by storing any previously fetch requests.

    Bonus: set up a push notification that occurs 10 minutes after installing the app

    tba
    Final Group Project: Create an App

    The plan is for you to work in a group, however, sometimes this is not possible and it will be an individual project.

    Read What Makes A Great App?. Design and build an original app that implements the skills you have learned in this course.

    Minimum technical criteria for assignment:

    1. requires JavaScript coding
    2. interface with an API (Maps, or any other API) OR store data in a cloud database (Firebase, or another cloud storage system)
    3. has a responsive design that is easy to use
    4. meets basic modern design principles
    5. be deployed to the web (Firebase Deploy, Heroku, maybe Glitch?)
    6. Installable PWA - get green on all Lighthouse criteria and get no red triangles on PWA status
    7. Works offline by caching all key resources, and all recent fetches that are made

    Additional marks for the following:

    1. Innovative use of an API (Maps, or any other API)
    2. Amazing design and user friendliness
    3. Innovative use of storinge data in a cloud database (Firebase, or another cloud storage system)
    4. Include some form of user input with full error checking/security

    Bonus marks available

    1. +1%: Sends a push notification 2 minutes after being installed welcoming you to the community.
    2. +2%: Self defined, Ms. Wear approved.
    Marking Criteria: Marking Criteria Web Dev 12 Final Project

    Resources
    Ms. Wear's Secure API Key Example on Glitch
    CORS Errors
    To prevent CORS Errors from API's being accessed from server.js running Express on Node 
    // needed to prevent CORS errors
app.use((req, res, next) => {
  console.log("CORS Error Check");
  res.header('Access-Control-Allow-Origin', '*');
  next();
});
    tba