Projects

1. Cordova Reviewr

Build a Cordova-based mobile app, called Reviewr on iOS or Android.

package name:  com.algonquin.[your username].reviewr
github repo:  https://www.github.com/[your username]/reviewr
App name: [your username]-Reviewr

Create an iOS or Android app with Cordova that allows the user to take a picture of anything and review it. The app will be a single page application - a single HTML file with a series of "pages" where only one of the "pages" appears at a time.

Home Page

The home page for the app is a list which will show either a message saying that there are no reviews or a list of the names of the items that have been reviewed.

The list of reviews will be stored in localStorage as an Array of objects. Make sure that your localStorage key is unique. Include your username and the app name. Each item reviewed needs to be saved as an object like this:

{
    "id": 134128716842,
    "title": "thing being reviewed",
    "rating": 4,
    "img": "path/on/phone/to/image"
}

Use the current timestamp when taking the picture as the id for each item.

Clicking on any of the titles will take you to the details page and show the image, title, and rating for the reviewed item.

The home page needs a button in the top bar (for iOS) or a FAB (for Android) to add new reviews by taking the user to the Add Page. Follow the Apple HIG or Android Material Design guidelines when designing and placing this button.

Details Page

The image should fill the whole width of the container. The title should be a label for the thing in the picture being reviewed. Use a <figure>, <figcaption>, and <img> element for the picture and title.

The rating system needs to be a number between 1 and 5 OR a star rating system displaying 1 to 5 stars. See the video link below as an example for how to create the rating system.

There needs to be a delete button which will remove the data from localStorage and return the user to the home page.

There also needs to be a button in an appropriate location in the interface, based on the OS, for the user to navigate back to the home screen.

New Review Page

The New Review Page should show a button to take the picture. This should always be the first step on this page. Do not show the input or prompt for the title until after the picture is taken.

After the picture is taken and displayed (on a canvas or img element) then show the input field for the title and some type of input for the rating (number input or star system).

After the picture is taken there should also be a save and a cancel button. The save button will also update localStorage adding the new item. Both buttons will take the user back to the home page.

Reference

To get you started, here is the official reference for the Camera plugin (opens new window), here is the github repo for the camera plugin (opens new window), and here is the tutorial on using the Cordova Camera Plugin.

Optional Starter Code

If you want, here is a small amount of HTML, CSS, and JS that you can use as starter code for this project. Code GIST (opens new window)

Submission

The submission of the assignment has multiple parts.

1. A screen recording or demo during class of your app running from an actual iOS or Android device.
2. Submit the URL for your private Github repo that contains your project.
3. The .gitignore file needs to include entries for the platforms/, plugins/, and node_modules/ folders. These folders must not be included in the repo.
4. Invite your instructor to the Github repo.

Due Week 5 (See BS LMS for the exact date and time.)

2. Cordova Playr

Build a Cordova-based mobile app called Playr on iOS or Android.

package name:  com.algonquin.[your username].playr
github repo:  https://www.github.com/[your username]/playr
App name: [your username]-Playr

This cordova Android app will be a SPA that shows a scrollable playlist of audio files and a second page that shows the current track playing. The user should be able to navigate back and forth between the screens.

Remember when creating apps for Android you need to design them to follow the Material Design guidelines (opens new window). You will be studying these guidelines in MAD9020.

The app will NOT use the HTML5 Audio player to play the audio and the player itself will not be visible on the page.

The Cordova Media Plugin (opens new window) will be required to play the audio on the device.

The audio controls will be created by you as HTML elements buttons which use icons as their labels. Make sure that your buttons are styled in a way that matches the Android Material Design guidelines. Material Design Button Guidelines (opens new window)

This StackOverflow Page (opens new window) provides lots of references to Font Awesome, Google Font Icons, plus the Unicode characters for creating the control characters.

Feature Checklist

• Each of the entries in the playlist should show a title, an artist, and a thumbnail image that represents the audio file.
• Nothing plays by default when the app loads.
• The user will have to tap on an item in the list to play.
• When an audio file reaches its end, the next item in the list should play.
• Create an Array called tracks inside your namespace that contains all the information about the audio files. Eg:

const APP = {
  tracks: [
    {
      id: 412,
      artist: 'Green Day',
      album: 'Dookie',
      track: 'Basket case',
      length: 0,
      path: 'media/green-day/basket-case.mp3',
    },
    {
      id: 222,
      artist: 'Green Day',
      album: 'American Idiot',
      track: 'Jesus of suburbia',
      length: 0,
      path: 'media/green-day/jesus.mp3',
    },
    {
      id: 141,
      artist: 'Green Day',
      album: 'Dos',
      track: 'Baby eyes',
      length: 0,
      path: 'media/green-day/baby-eyes.mp3',
    },
    {
      id: 312,
      artist: 'P!nk',
      album: 'The Truth About Love',
      track: 'Try',
      length: 0,
      path: 'media/pink/try.mp3',
    },
    {
      id: 566,
      artist: 'P!nk',
      album: 'Missundaztood',
      track: 'Just like a pill',
      length: 0,
      path: 'media/pink/like-a-pill.mp3',
    },
  ],
};

• Minimum of 5 songs in the playlist, from a minimum of two artists. Store all the audio files in a media folder inside the www folder.
• User should be able to click on another item in the list to start it playing. This will stop the current one playing. Use a global property to hold the media object that is playing the audio.
• The user should be able to pause and resume the playback of the current song.
• There must be some visual indication when a song is playing.
• There should be a visual indication of how far through the song the user is and/or how much of the song is left to play. Show the total length of the song and the current time.
• Save the total length of the song in the namespace tracks array.
• App design should reflect the Material Design guidelines.
• NO volume controls are needed.

Demo

Here is an example of what this app could look like. This is NOT a visual list of requirements.

References

Submission

The submission of the assignment has multiple parts.

1. A screen recording or demo during class of your app running from an actual iOS or Android device.
2. Submit the URL for your private Github repo that contains your project.
3. The .gitignore file needs to include entries for the platforms/, plugins/, and node_modules/ folders. These folders must not be included in the repo.
4. Invite your instructor to the Github repo.

Due Week 8 (See BS LMS for the exact date and time)

3. PWA - Suggest A Movie

Installable, Offline-first PWA built with the The Movie DB API (opens new window).

Here is a demo of a sample version the PWA in action with a discussion of the requirements.

List of Requirements

• 4 HTML files - Home, Search Results, Suggested Movies, 404 page.
• There must be a service worker that manages all requests from the webpage, a static cache, and a dynamic cache.
• The search results and suggested pages should not be in the static cache.
• The dynamic cache will hold the html for the trips to the search results and suggested pages plus all the movie poster images returned requested from TMDB.
• You need to have a default placeholder image for missing movie posters.
• IndexedDB saves the results array from every call to the Movie DB.
• The PWA must pass the Lighthouse tests in Chrome.
• When the user does a search for a movie or suggestion the app should check first in the IndexedDB Store(s) for a match before attempting the call to the Movie DB API.
• Materialize CSS (and the Material Icon set) needs to be used to build the interface.
• Customize your colour scheme.
• For each movie card you need to show (at least) an image, the title, the release date, and the description.
• On the search results and suggested pages, show the keyword or the movie title as part of the page title. This gives the user context for the cards being shown.
• Apply a size limit to the dynamic cache which will limit the number of movie poster images being dynamically cached.
• PWA must be installable.
• PWA must work offline.
• The IndexedDB code can be in either your app.js or sw.js or both, as long as it checks the DB before doing the fetch and after a fetch it puts the new data into the DB.

TMDB Endpoints

• To search for a movie by keyword - /search/movie?api_key={your api key}&query={keyword}
• To get a suggested list use either:
  • /movie/{movie-id}/similar
  • /movie/{movie-id}/recommendations

Submission

1. Create a private Github Repo and invite your professor to the repo.
2. Submit the URL for your private Github repo that contains your project to BS LMS.

Due Week 11 (See BS LMS for exact date)

4. GIFTR PWA with API from MAD9124

The final project is to create a Mobile First PWA called Giftr. This is a web app for saving gift ideas for people the user knows. In MAD9124 you are building the API and backend for this app. You will have the same partner for both MAD9124 and MAD9022 to build these. Both people should be working on both parts. Start by building your API because you will need this to test your app.

Here is the starter code for this app: https://github.com/prof3ssorSt3v3/proj4-pwa-starter (opens new window) and the working demo is here https://prof3ssorst3v3.github.io/proj4-pwa-starter/ (opens new window).

What to UPDATE

The starter code provides A LOT of the functionality, albeit in a simplified version. You will need to read this code and understand what it is doing to be able to modify it.

You will find comments throughout the HTML and JS that start with TODO:. These mark most of the places that you need to change the code.

The starter demo version has many of the features working. However, it uses two static JSON files as the back end. This means each time you navigate to a new page, you will be seeing the initial data again. There are notes on the home page with the email addresses that you can use to login. All three accounts use password as the password.

The forgot password feature does nothing yet. You need to build this.

Both the login and register buttons will log the user in and take them to the people list page. You need to update this to use the API that you build plus handle a proper JWT token.

The cards displayed on the people page represent the data from the static JSON file. You need to update this to get data from the API instead of the static JSON.

The people page gives the user the ability to:

• Add a new person
• Delete a person
• navigate to the gifts page to see the list of gift ideas for that one person.

Adding a new person will require a name and date of birth. The id will be created server side.

Other than the login | register | forgot password features, all the other requests to the API will need to use a fetch header x-api-key. Every request for people or gifts must be filtered by the user_id. This is really the purpose of the x-api-key header, to filter the results on the server.

On the gifts page you should show a list of gifts for the selected person along with the ability to delete an idea or add a new idea. The page also needs to display the name of the person that the ideas are for.

Each gift idea needs to include a title, a price, a store name, and a url for the store/product. The id will be created server side.

There needs to be a way of navigating back to the people page from the gifts page. In the demo, you can click on the name of the person in the title.

When navigating between the people and gifts you need to know who owns the people and ideas. This is what the token from the server is for.

You are allowed to change any of the HTML, CSS, and JS that was provided as a starter. We recommend that you continue to use the Materialize CSS library.

You MUST change the colour scheme for the app from the original.

What to ADD

The starter version of the app does not meet all the PWA installation requirements. It does not have a Service Worker, a proper set of launcher icons, theme colours, any cached files, or a finished web manifest. You will need to add all these things.

No Indexed DB is required.

When you make requests for JSON data from your API, you can simply cache the files that are returned from the API in your dynamic cache, instead of putting them in a database. A query string is a good way of making each request unique for saving in the cache.

REMEMBER

Be sure to frequently update your repo. Use git add and git commit every time you complete a step.

When you complete a feature, use git push to update it on the server. Treat this like your backup during development and early testing.

Submission

1. Create a private Github Repo and invite your professor to the repo. There will be one repo to submit for each team.
2. Submit the URL for your private Github repo that contains your project to BS LMS. In the notes for submission, you must include the name of your partner.

Due Week 14 (See BS LMS for exact date)

DEADLINE

Keep in mind that ALL submissions, even late ones, have to be submitted by Friday April 23rd. No submissions will be accepted after that.