44-563 Developing Web Apps and Services Syllabus

Denise Case
Assistant Professor
Northwest Missouri State University

Prerequisites

Follow this guide for Windows users to get set up for development.

Getting Started

Fork contents to a new repository.
Clone your repository down to your local machine.
From Windows File Explorer, open index.html in Chrome to view.
Using Visual Studio Code, open the folder to edit.
Open GitHub repository, under Settings / GitHub Pages, set Source to master branch and click Save.
Go to your Google Analytics dashboard. Add a new property for your GitHub Page, generate your tracking id, and replace the analytics code in index.html with yours.

Progressive Web App

This syllabus is a progressive web app and can be installed on mobile and other devices.

Track your outcomes with local storage.

Semester Updates

Update the CDN styles in index.html.
Update the Canvas course URL in the navigation bar.
Update outcomes.
Update tools and requirements.
Update schedule.
Update office hours.

Create Custom PWA Icons

PWA require lots of icons.

First, create initial favicons

Basic icon built with Favicon.io

Generate from Text
Text: DATA
Background: Rounded
Font family: Hanalei Fill
Font size: 50
Color: #FFFFFF
Background: #006747

Download and save favicon_io.zip file to images folder. Extract and delete the zipfile.

Copy favicon.ico into the root project folder (the one that has the index.html file).

Second, create a full set of PWA icons

Full set of PWA icons built with PWA Builder App Image Generator. Upload your largest favicon (e.g., the 512 size created above) and update settings as desired (these used 0.3 padding with custom color #006747). Check all the boxes. Click the button below the color option to generate a zipfile. Save the AppImages.zip file to images folder. Extract and delete the zipfile.

Update icons property in manifest.json as needed (if the names are the same, updates can be copied from a reference project).

Third, create additional Android icons (optional)

Android Asset Studio
Stack Overflow
48 × 48 (mdpi) , with 1 dp padding
72 × 72 (hdpi), with 1 dp padding
96 × 96 (xhdpi), with 1 dp padding
144 × 144 (xxhdpi), with 1 dp padding
192 × 192 (xxxhdpi) , with 4 dp padding

Try It

To test automatic formatting and linting and PWA testing, open a PowerShell Window in this folder as an adminstrator.
Run the following commands to install packages, format the code, and view any recommendations.

npm run sort
npm install
npm run prettier
npm run lint
npm run lint-fix

Current

Removing jQuery to increase performance
Moving to JavaScript modules
Shared custom elements using only JavaScript (components use general page styling)
Shared web components encapsulate their own styles (not currrently used)

budsus/44-563-webapps-syllabus