mdinfotech.net  



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
App Development
Libraries
  1. Bootstrap
  2. JQuery
Platforms for App Development
Possibly: PHP, JSON, Databases

Go to w3 Google Maps JavaScript API Tutorial. Run the code on from the first example page. (ask Ms. Wear for a temporary key .) Continue on through the tutorials to learn how to use the Google Maps Javascript API.

To continue on using Google Maps in future projects, you will need to create your own account with Google to get your own API keys. (Go here Get API Key.) I suggest you wait to do this until you actually decide to pursue Google API's in this coure. Note: Google requires a credit card number, but will not be charged anything you unless you enable manual billing. Each account get $300 in free usage for Maps, Routes, and Places for the Free 3 month trial. After that, you can stop using your account OR you can switch your account to accept billing, plus, get $200 in free usage for Maps, Routes, and Places every month. For more info, see: Pricing.

Read this Why, when, and how to use the Google Map API for inspiration.

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 yellow 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.

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
Design and write an interval timer in JavaScript.

Appearance, usability, flexibility, robustness, and application will be considered in the assessment.

You will be turning this into a PWA.

Follow this tutorial and turn your JS timer into a PWA. Do lessons 2, 3, 3.1 and 3.2. If the software is installed on the classroom computers, use them, if not, use glitch: https://codelabs.developers.google.com/dev-pwa-training/.

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. Installation & Setup in JavaScript which also requires reading Add Firebase to your JavaScript project
  3. Get a working JS Tic Tac Toe game from the Wear_IT.
  4. Go to this github repository https://github.com/MatthewHightech/firebase-tic-tac-toe
  5. Follow the instructions on the README of the Github
  6. Turn it into a realtime two player PWA.
  1. Log into firebase website. Add project. Don't enable analytics. Add a web app and select hosting. Register app.
  2. Copy and paste html code into index.html if required. Install firebase CLI if not already done.
  3. Make a folder for your project on the h drive.
  4. Open a command prompt. CD into the folder you just created.
  5. RYun the firebase CLI, you need a full path on the school computers. Mine looks like this: C:\Users\lwear\AppData\Roaming\npm\firebase login. This will open a browser window and allow you to log in via the web. Allow firebase to access everything.
  6. run C:\Users\lwear\AppData\Roaming\npm\firebase init and it will create all the project files for your project. In the process, select Database, and Hosting. Then Use an Existing Project. Then select the right project. Use the default file for the database rules and directory. Cyonfigure as a single app. Don't use Github.
  7. Build the database. From firebase project page, go to console (on the website). Create a realtime database in test mode. Add variables for p1, p2, p1Grid, p2Grid, and winner and set to 0. Create turn and set to 1.
  8. Download the code from github and put only the contents of public into the public folder in your project on the H drive
  9. Copy and paste the authentication. On firebase project website access, click next to Project Overview and select Project Settings. Scroll down to Firebase SDK snippet, choose config, and copy the code, and replace it in Matt's version.
  10. run C:\Users\lwear\AppData\Roaming\npm\firebase serve from the command line. This runs the server as localhost and your website can be accessed through a browser at http://localhost:5000
  11. Now you should be able to see firebase working
  12. li>Once it works, you can deploy it live on the firebase servers. C:\Users\lwear\AppData\Roaming\npm\firebase deploy
List of criteria for assignment:
  1. interface with an API (Maps, or any other API) that requires a private API key OR refresh tokens
  2. store data in a cloud database (Firebase, or another cloud storage system)
  3. have a responsive design
  4. be deployed to the web (Firebase Deploy, Heroku, maybe Glitch?)
  5. Include some form of user input with full error checking/security
  6. Get green on all Lighthouse criteria and get no red triangles on PWA status
1) Come up with 3 ideas for an app Submit your 3 ideas on Google Classroom. For inspiration: Watch Coming up with APP ideas, read App Ideas for Start Ups and App Idea Generator

2) Prototype 1: Build an app that is online and interacts with your selected API. Get feedback from Ms. Wear.

3) Prototype 2: Modify the app according to feedback and testing.

Marking Criteria: Marking Criteria PDF

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();
});                     
                     

Agile design is a set of principles that can be applied to the software development process. Agile practices approach discovering requirements and developing solutions through the collaborative effort of self-organizing and cross-functional teams and their customer(s)/end user(s). It advocates adaptive planning, evolutionary development, early delivery, and continual improvement, and it encourages flexible responses to change.

Scrum is a process that applies Scrum principles. This specific framework revolves around three fundamental principles:

  • transparency: each team members must have access to all information regarding the product to deliver;
  • inspection: regular evaluations are essential to readjust the project if necessary;
  • adaptation: the implementation of new measures is necessary when inspection shows deviations from the measured results.

A Sprint is a short, time-boxed period when a scrum team works to complete a set amount of work. Sprint planning is a collaborative event where the team answers two basic questions: What work can get done in this sprint and how will the chosen work get done?
sprints

The final project is to be developed using a process that implements the principles and ideas above.

Resouces:
Understand Scrum in 10 minutes
Scrum Sprints