Exercises

Table of Contents

1. Exercise One - IndexedDB
2. Exercise Two - Git Pull Requests
3. Exercise Three - PWA
4. Exercise Four - Flutter Config
5. Exercise Five - Basic Flutter App

1. IndexedDB

During class 2.2

For this exercise you will be adding an IndexedDB to database to a webpage. Create your own private repo for this exercise. Start with this repo (opens new window) for the page. Clone this repo and then delete the .git folder. Then you can use the git remote add origin to point it at your own private repo.

The script will install version 1 of the database, use the onupgradeneeded event to create an objectStore called movies with the keyPath: "title".

Have your onupgradeneeded function also add 4 documents that you hard code. The documents each need a unique title and then two other properties of your choice.

The web page has a form that lets you add new movies. Each time the form gets submitted, you need to use a transaction to call the add method on the movies store to insert the new document.

Submission

Invite your professor - prof3ssorSt3v3 to be a collaborator on your private repo.

Submit the URL of your private repo to the IDB Exercise in BS LMS.

Week 2

See BS LMS for the due date and time.

2. Pull Requests

During class 3.2

For this exercise we will be working on a shared Github repository, creating git branches, pull requests, merging, and authorization. The shared repo link (opens new window).

Your instructor has created a repo and will be inviting everyone to collaborate via their @algonquinlive email. You will need to be granted access before you can do any commits.

WAIT!!!

We will be doing this, and more, together in class.

You will need to:

• Clone the repo
• Create a new branch named after yourself and switch to it.
• Add a new .md file named after yourself and add a message to the file.
• add, commit, and push your new branch up to the Github repo.
• Then go to the Pull Request tab and initiate a pull request to merge your branch with the main branch.
• Your instructor will approve the merge with a custom message.

Submission

Your submission for the assignment is to paste the custom message from the approval message in the BS LMS submission textbox.

Week 3

See BS LMS for the due date and time.

3. PWA Ex

During both classes in Week 5 we will be building a basic PWA. In the first class we will be creating the structure for the pwa, the web manifest, and the other needed files. Then we will create our service worker and register it to our domain.

In the second class we will focus on handling the service worker life cycle events and deal with online and offline handling of file requests from the browser.

Starter Code for the exercise (opens new window)

The website we create must work both offline and online. All styles and images should work regardless of the online status.

The 404 Error page must be displayed if the user navigates to somewhere other than index.html or other.html. Add a link to both of those pages that points to some non-existent page.

Add your full name in the header for all three HTML pages.

Submission

Invite your professor - prof3ssorSt3v3 to be a collaborator on your private repo.

Submit the URL of your private repo to the PWA Ex in BS LMS.

Week 5

See BS LMS for the due date and time.

4. Flutter Install and Setup

To show that you have Flutter and all the proper dependencies installed you will need to create a series of screenshots and submit them in BS LMS.

• In VSCode, do a screenshot of the Extensions section that shows the Flutter and Dart extensions installed.
• In VSCode Terminal, or a stand-alone Terminal, run the flutter doctor command and take a screenshot of the results, showing that all teh Flutter requirements have been installed.
• Take a screenshot of the opening screen of Android Studio showing the Bumblebee version and the option to create a New Flutter Project.
• Take a screenshot of Finder showing the flutter/ and flutter/bin folders inside your user home folder.

Submission

Put all your screenshots into a single folder and zip that folder. Submit the .zip file in BM LMS.

Due in Week 10. See BS LMS for the exact due date.

5. Basic Flutter App

Now that we have covered the fundamentals of creating a Flutter app, it is time for you to see how quickly you can put one together.

Your Flutter App will need the following features:

• Three different screens made with separate .dart files in the /lib/screens folder.
• Either a Drawer() or a BottomNavigationBar() to navigate between the screens. Whichever one you use needs to be saved in a separate file called /lib/shared/nav.dart.
• One screen needs to show a FlutterLogo() and Text() centered on the screen. The Text should show your name.
• One screen needs to have a ListView() that contains at least 3 ListTile() widgets.
• One screen needs to have a Column() that contains 2 cards. Each Card() contains an AssetImage() and a Text() widget. You will need other Widgets to get both the AssetImage and the Text inside the Card.
• Use the flutter-nav-starter repo from class as a reference.

Additional widgets can be used as you like.

You can apply colors as you like, as long as they would pass accessibility tests.

Submission

Create a private Github repo to hold your Flutter app project. Choose an appropriate name for the repo.

Be sure to do multiple commits as you are building the app.

Push the finished repo to Github, invite your instructor prof3ssorSt3v3 as a collaborator to the repo.

Submit the link to the repo to the Flutter Exercise in BS LMS.

Due Week 12 - See BS LMS for the exact due date and time.