INF 133 - User Interaction Software - Fall 2018

A4: Sleep tracker in Ionic

Due Thursday, November 29th, 4:00am

In this assignment, you’ll demonstrate your ability to make a mobile app by developing a tool for tracking sleep and sleepiness in Ionic. There are many sleep tracking apps in the Apple App and Google Play Stores. You will implement a few of the common features.

This assignment may be completed in pairs (exactly two students enrolled in the class) or individually. You may choose your own partner or use Slack to help find one. Because the assignment features build on top of one another, it is recommended that you pair program rather than distribute the assignment features. There is no grade benefit or penalty to completing the assignment individually.

By the end the of day on Tuesday, November 20th, please navigate to the “People” tab on Canvas to sign up for an A4 group. Do correspond with your partner while signing up for groups. If you’re the first member to join a group, please sign up for the next group that’s empty. Keep a note of the Assignment Group Number that you’ve signed up for and add it to your readme file.

You will not be able to swap to another group after the 20th. If something happens after you sign up and you decide you're best off working alone (team conflicts, incompatible schedules, etc.), you can disband your group and let the course staff know. However, you will not be able to team up with someone else, even if they do not have a partner. You will need to complete the assignment alone.

A5 will build directly on your code for A4 (or, put another way, A4 is a check-in for A5). You may keep the same partner for A4 and A5, but once you've identified a partner, 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.

Repository structure

The repository contains a large number files. The repository contains a sleeptracker folder with starter code for the assignment. Most of the files are generated by Ionic when creating a new (blank) project. However, a few files have been added to ease the ability to start making a sleep tracking app. These files can be edited. You may want to add variables and functions to these files, or create new subclasses. They are:

  • Three classes in the data folder: sleep-data, overnight-sleep-data, and stanford-sleepiness-data. These files provide some data structures for logging sleep data, with the latter two being subclasses of the first. Subclassing enables the two types of logged data to be displayed together (or not, as you see fit for your design).
  • One service in the services folder: sleep.service. This service provides static variables for storing the logged data and a method for loading default (fake) data.

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. The readme is more important to this assignment than to previous ones, as it is required to include justifications of your design choices.

Setting up your Workspace

Some of the packages/libraries depend on newer versions of Node JS.

Check what version of Node JS you have installed with node --version. If you installed Node JS before this class, make sure you've updated to at least 10, such as with nvm or downloading the latest version from the node website. If your version of Node worked for A3, you should not need to update. But it's worth checking the version number if you're encountering issues.

To run the Ionic app, you will need to install Ionic thourhg npm. To do this, you will install the Ionic Command Line Interface (CLI) globally with npm install -g ionic. The Ionic project is already set up in the sleeptracker folder, but the CLI is necessary to run the project. We will use the Ionic 4.0 beta in this course. The beta appears stable, but it's worth Googling around if something is not working as the documentation suggests.

One of the A5 options utilizes Cordova, so you may want to install it as well: npm install -g cordova

You will also need to install the dependencies for the Ionic app. These dependencies are defined in each project's respective package.json files. cd into the sleeptracker folder and install the dependencies with npm install.

When installing, if you run into issues which look like "permission denied, try changing the permissions of the node_modules directory. If you are still having trouble, ask on Slack or talk to the course staff. It's important to try to get the setup working sooner rather than later, even if you do not plan on working on the assignment until close to the deadline.

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.

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.

Using another framework

As with the previous assignment, it is an option to use another framework such as React Native to complete this assignment in order to pick up a new skill. While this is again an option, you are required to get approval from the course staff prior to pursuing this option.We expect to only allow grant approval for students who have used Angular, React, or another framework already.

Should you choose to use another framework, it is done with the understanding that the course staff will not support you in learning the framework or debugging your code. The course staff will not be more lenient in grading or give any extra credit for using something not covered in the course. You are required to complete the same assignment, which will likely mean adapting the provided starter code to the new framework. Should you choose this path, you are on your own. Godspeed!

Please include in your readme.txt any information we would need in order to run your code.


Your sleep tracker app is required to have the following three features:

  1. The ability to log overnight sleep.
  2. The ability to log sleepiness during the day.
  3. The ability to view these two categories of logged data.

It is up to you to decide exactly how your app implements these features. A4 will be evaluated solely on completion (e.g., whether your app can log those data and view logged data). A5 will add one additional feature and be evaluated on how well your app follows good principles of mobile design. The readme will similarly be evaluated solely on completion for A4.

Log Overnight Sleep

Your app must allow someone to log the sleep they had overnight. At minimum, this means allowing a person to log what time they went to bed and when they woke up. It's up to you to decide how to support this logging, with the goal of aligning with good principles of mobile design. As you go about deciding how to support logging, think about how someone might use your app (feel free to identify a particular user or type of user, such as college students). Do they start the log when they go to sleep, or log their full night's sleep in the morning? Will a particular input field make logging easier? Are there other things a person might want to log about their sleep?

The data file overnight-sleep-data.ts provides a starting point for logging this data. The fields can be changed, additional fields can be added, and helper methods can be added. So long as the questions of when someone went to bed and when they woke up can be logged and viewed in your app, you can change the fields however you wish. You can assume that a person logs overnight sleep only once per day.

All data logged will be cleared when the app is restarted (such as when a change to the code is made). This is expected and allowed for this assignment. A5 will present an opportunity to save data to a database, which will allow data to persist when the app is restarted.

Log Sleepiness During the Day

Your app must allow someone to log how sleepy they feel throughout the day according to the Stanford Sleepiness Scale.At minimum, this means allowing a person to log how they felt on the scale's 1-7 rating system and when they felt this way. Again, it's up to you to decide how to log this data. Consider whether there are other things a person may want to log alongside their sleepiness. A person may log sleepiness more than once a day--in the morning before and after coffee, for example. This might impact how you support implementing the scale.

Sleepiness throughout the day is often logged through Experience Sampling, a method in which someone is asked to log information about how they are feeling or what they are doing at multiple points over time. Technology can help facilitate experience sampling by providing a digital diary to log with. Technology can reduce the burden even further by sending notifications when it is time to journal. A5 will present an opportunity to add notifications to your app to invite someone to log their sleepiness.

The data file stanford-sleepiness-data.ts provides a starting point, but you may change the fields or add new ones as you wish.

Again, all data logged will be cleared when the app is restarted (such as when a change to the code is made). This is expected and allowed for this assignment.

View Logged Data

Your app must allow someone to view the overnight sleep and sleepiness data they have logged. These two types of data can be viewed together or separately. It is up to you to decide how the data should be presented. So long as a person's Overnight and Sleepiness data is visible in your app, you will get credit for the completion portion of A4.


Please update your readme.txt with how long the assignment took, who or what online resources you consulted with, any bonus features you added, and anything else we should know. If the assignment was completed in a pair, the readme should list names/emails/ids of both students. Only one submission needs to be made, however.

The readme for this assignment is critical, as it provides you an opportunity to explain why you made your design choices for each feature. A4 is graded solely on whether your features work as intended. Answering these questions in the readme is an opportunity to get feedback on your design choices prior to A5, where they will be evaluated on how well they align with good principles of mobile design. If you ran out of time or struggled to implement something, feel free to use the readme to describe what you intended to implement or what you struggled wtih.

We will aim to provide rapid feedback, but it may prove difficult with the size of the class. Completing the assignment significantly early (e.g., a week before the deadline) is a way to raise your odds of getting rapid feedback. Email the course staff if you finish the assignment early.

Recommendations and Looking Ahead to A5

There are a lot of different ways of fulfilling the requirements of this assignment. Though fulfilling the requirements is potentially doable with the lecture material, creating an effective mobile design will likely require reading Ionic's documentation to undertstand the different components available and how to work with them. We therefore recommend that you build up your assignment over time. Complete the requirements first with buttons, inputs, items, and lists on a single page of the app. Once the required features have been achieved, you can begin exploring modals and multiple pages.

Make sure you are looking at the Ionic 4 beta documentation (all URLs will start with beta). The syntax behind some features you might want to use, such as Modals, changed between Ionic 3 and 4.

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. In A5, your app will be evaluated against these principles. Feel free to pick a single platform to prioritize (and specify which in your readme).

There are no styling requirements for A4. In A5, 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. A4 provides an opportunity to get feedback on styling or feature choices.

A few other things you may encounter during development (list expected to grow):

  • By default, all new components, services, etc. made with ionic generate [componentname] will be added to the app folder. The files can be moved around to other folders (such as the data folder used in the starter code). But you may have to adjust imports and routing files to import them correctly.
  • If you add new pages, the module fileapp.module.ts may need to be changed. In general, any page added programmatically, such as for a Modal, needs to be added as an entryComponent.


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. partner evaluation is available at


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

  • The ability to log overnight sleep (3 points)
  • The ability to log sleepiness during the day (3 points)
  • The ability to view these two categories of logged data (3 points)
  • A readme which explains how these features were implemented and their design rationale (1 point)

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.