INF 133 - User Interaction Software - Fall 2018

Small clarifications may arrive later

A5: Improved Sleep tracker in Ionic

Due Wednesday, December 12th, 4:00am

In this assignment, you’ll improve upon your mobile sleep tracking app in Ionic developed in A4. You will add either a feature involving native resources or back up logged data to a Firebase database. You will also improve upon the visual and interaction design to follow good principles of mobile design.

You may keep the same partner for A4 and A5. If you had a partner for A4, you may not switch partners to complete A5. You and your partner may choose to complete A5 individually, but you cannot find new partners.

Starter code

A starter repository is on GitHub Classroom. Please use this repository rather than re-using your A4 one, even if you import your A4 code.

Repository structure

The repository contains a large number of files. It adds a few files beyond the A4 starter code, specifically:

  • Two services in the services folder: native.service and firebase.service. These services provide some starter code for accessing native resources and connecting to Firebase.

It also edits a few configuration files, specifically package.json and package-lock.json to install Firebase and native resource libraries.

Again, you will likely want to create additional components, pages, or services to build your app. Running ionic generate [filename] will generate skeleton code for these files(documentation here). The decision on how many pages, components, etc. to add and what they contain is up to you.

There is also a readme.txt file in the root folder. Most of the readme questions are identical to A4 and can be copied from one to another. There are a few A5-specific questions added.

Setting up your Workspace

Check the A4 description for information on setting up Node JS and Ionic.

Cordova should be installed globally to utilize native resources: npm install -g cordova

You will have to do some manual merging of your A4 code with the A5 starter repository. There are many ways to do this, but the recommended flow is:

  • Back up the A5 starter repository
  • Replace the sleeptracker folder in the starter repository with your A4 code
  • Add the two services from the A5 backup to the services folder
  • Replace the A4 package.json and package-lock.json files with the A5 backups
  • Run npm install to add the required libraries.

If you do not want to replace the package files (you imported some new libraries in A4, for example), you can install the same packages with the following command-line commands:

  • ionic cordova plugin add cordova-plugin-local-notification@0.8.5
  • npm install de.appplant.cordova.plugin.local-notification@0.8.5
  • ionic cordova plugin add cordova-plugin-device-motion
  • npm install @ionic-native/device-motion@beta
  • npm install firebase
  • npm install @angular/fire

You can skip the installation of anything you are not planning to use (e.g., no need to install the native libraries or add the native service if you are planning to complete the Firebase option).

Setting up Firebase

To set up Firebase, you will need to create a project in the Firebase console. You will then need to add your project configuration information to the environment.ts file in the environments folder. The Angular Firebase instructions describes how to edit the file (follow steps 4 and 5). The information about the project you created can be found by following the "gear" icon by Project Overview.

Please commit this file although it may contain secret information. This will allow us to use your database for grading rather than re-creating a new database. Make sure your Firebase database's rules are defined as public.

Running the App

To run the Ionic app, cd into the sleeptracker folder and run ionic lab. This will start the app at localhost:8200. ionic serve will also run the app in the browser, but lab is recommended because Ionic will then replicate what the app would look like on iOS and Android. Be sure the dependencies have been installed first via npm install. Any code changes will be automatically reloaded.

Once Ionic is installed, you can run your app on your phone using the Ionic DevApp (Android, iOS). The terminal will provide a URL for accessing your app (follow the "External") link. You will need to make an Ionic account to access the DevApp.

Load your app via the DevApp takes over the DevApp. This makes it difficult to refresh changes or go back to the DevApp's menu. Shake your phone if you need to exit your running app and go back to the DevApp menu.

The DevApp has been tested on the UCI campus WiFi as well as personal routers. You may need to manually add the IP address for the DevApp to load your app on the campus WiFi. Enter the external URL and port (e.g., 8100) displayed when you run ionic lab. Be sure to include http:// in the URL declaration.

Working in pairs

If you are completing the assignment in pairs, you should work in one shared GitHub repository. The easiest way to do this is to have one of you create the repository and add the other as a collaborator.

The downside of working in pairs is that you open yourself up to potential issues merging one person's code into another. Make sure you always update the version of the code on your computer prior to beginning work. This guide offers some suggestions for how to resolve potential conflicts which might arise. But more generally, we suggest that you complete this assignment via pair programming, alternating roles as drivers and navigators.


In addition to the three features described in A4, you must add one of the following two features:

  1. A feature involving a native device resource.
  2. Automatically backing up all logged data to a Firebase database.

These two options are designed to be of roughly equal difficulty.

Your app will also be evaluated on how well it follows good principles of mobile design and whether it goes beyond Ionic standards to create a visually compelling app.

Option 1: Using a Native Device Resource

You must add a feature which uses a native device resource. The added feature must change the app's experience for a user in a meaningful way. It is not sufficient to read a device's manufacturer and present it back, for example, because that does not change how a user would log or view their sleep. Please contact the course staff if you have any question about what would or would not qualify as a feature.

Ionic supports a long list of native device resources. However, some of these are not supported by the Ionic DevApp. So be sure to select a feature which the DevApp will support. Each Ionic resource provides instruction on how it should be installed.

The Device Resources lecture offers a few suggestions for features which use a native resource. One option is to send notifications to remind someone when it is time to journal their sleepiness (a well-studied method for reducing the burden of logging). Another option is to approximate how restful someone's overnight sleep is by measuring how much the accelerometer value varies while they sleep.

Debugging native features can be challenging because console statements are not visible on a device. One option is to use bindings to display variables or debugging messages on the screen.

Option 2: Backing Up Logged Data to Firebase

In A4, all data logged would be cleared when the app is restarted (such as when a change to the code is made). For this A5 option, you must back up all data a person logs to a Firebase database. When a person re-opens the app, all of the data they previously logged should be visible. When a person logs a new record, it must be saved to the database.

You may structure your database however you like, so long as both overnight sleep and sleepiness logs can be saved and retrieved. One challenge is that Firebase expects a JSON object rather than a TypeScript class. You will need to write helper functions to export a class to a JSON object and re-import it. You may want to change the name of the collection in the starter code or create multiple collections for different types of data.

As described in lecture, set your database's permissions to be readable by everyone on the web. You may also assume that there is only one user of the app (e.g., you do not need to support authentication).

You may use an alternate database technology with permission from the course staff, such as MongoDB or MySQL. However, the staff will not provide any support for those options. You are on your own if you choose to pursue another technology. Make sure the readme describes anything the course staff would need to know in order to run your code.

Following Good Principles of Mobile Design

We discussed four major principles of good mobile design in lecture:

  • A useful initial view
  • The "uh-oh" button
  • Error prevention
  • Follow platform conventions(Android) (iOS)

These principles are by no means exhaustive, but provide a good foundation for thinking through the design of your app. Your app will be evaluated against these principles. Feel free to pick a single platform to prioritize (and specify which in your readme).

Creating a compelling app

Your app will also be evaluated on whether the app would impress a new user in your target audience (specified in your readme). Impressing the target audience can be either aesthetic or functional--e.g., by changing the app's styling or adding additional features.

We have not explicitly covered good principles for visual design in this class. Platform conventions offer some recommendations about visual design, such as using a concise set of colors and ensuring legible fonts. We expect that, at minimum, your app edits Ionic's global styling variables and customizes the appearance of some components.


Your code repository on GitHub Classroom is your submission. The service will take the latest snapshot of your repository as your submission. Any commits made after the deadline are considered late and are subject to the course's late policy.

You may use up to two late days on this assignment. Please indicate whose late day(s) you are using in your readme. If you completed the assignment in a pair, the late day(s) can be from either of the pair's allowance, but must be divided as whole days. For example, one day from student A and one day from student B are allowed for a total of two late days. Two days from student A and zero from student B is also allowed. One day from student A and zero days from student B is also allowed (for a total of one late day). 12 hours from student A and 12 hours from student B is not allowed. One day from student A and two days from student B is also not allowed.

Because many people will complete this assignment in pairs, you are also required to complete a short evaluation on Canvas signifying how work was distributed. The partner evaluation is available at


This assignment will be graded on a scale of 10 points, broken down as follows:

  • The added feature, either using a native device resource or backing up logged data to Firebase (3 points)
  • Following good principles of mobile design (4 points)
  • Creating a compelling app (2 points)
  • A readme which explains how features are implemented and the design rationale (1 point)

You can receive 2 points of extra credit if you complete both feature options (using a native resource or backing up to Firebase).

The course staff reserves the right to redistribute, penalize, or award bonus points to one or both students in situations where work was not distributed equitably among partnerships.

In prior courses, you've been asked to follow good principles for indentation, naming variables, commenting, etc. We expect you to do the same in this course, but aim to avoid being draconian in our enforcement of these principles. Egregiously poor formatting, completely uncommented code, etc. may incur a small penalty (e.g., -1 point), but we expect this to be rarely applied.