Lecture Slides 2018 Fall

Part I: Learn the Basics

Lecture 1 (2018/10/03): The Quantified Self

PPT slides of Lecture 1


  • What is Quantified Self?

Gary Wolf Ted Talk
Form 101
What do people track?
How do people track?
What are the technologies for self-tracking?
Why are people so obsessed with self-tracking?

  • How to design a Quantified Self app?

Form 102
What do you want to know of yourself? –> The story
How to achieve it? –> The needs
What are your solutions/strategies? –> The solutions
How to implement the solutions/strategies? –> The features

  • How do we learn web app development in this course?

Get the source code of SleepBeta on GitHub


  • Submit Form_101 and Form_102 to share folder
  • Subscribe to Microsoft Imagine (EN version, JP version)
  • Download & Install Microsoft Visual Studio (JP version)
  • Create account on Microsoft DevOps (former Visual Studio Team Service Foundation) (JP version)

Recommended Reading

Lecture 2 (2018-10-15): Cloud Computing 

PPT slides of Lecture 2


Form 201
Carl Schmidt Ted Talk

  • What is cloud computing?

What is cloud computing?
What are the three layers of cloud services?
What are the applications of cloud?

  • Why do we need cloud?

What are the benefits of using cloud?
What are the downsides of using cloud?

  • How does cloud work?

Check out your Azure portal


  • Complete an online survey
  • If you haven’t submitted Form_101 and Form_102, submit them to share folder
  • Submit Form_201 to share folder
  • Set up a repository for your web development project on Microsoft DevOps

# If you have no idea how to do it, there are some slides for your reference (some parts may be obsolete; use with caution!)
Set up local repository: windows  MAC
Set up remote repository: Set up DevOps

  • Download source code of SleepBeta from GitHub
  • Push source code to your remote repository on DevOps

# Current DevOps allows three ways for authentication, either personal token (for windows) or SSH (for MAC) is recommended  to establish secured connection between your local repository and DevOps.

# Windows users may find the Git Credential Manager a must-have extra piece of gem. 

Recommended Reading

Lecture 3 (2018/10/22): Version Control

PPT slides of Lecture 3


Form 301

  • What is version control?
  • Why do we need version control?
  • How does version control work?


  • If you haven’t done the online survey, plz complete it.
  • If you haven’t submitted Form_201, submit them to share folder
  • Submit Form_301 to share folder
  • Configure a pipeline in DevOps for your repository

Recommended Reading

Lecture 4 (2018/10/29): ASP.NET MVC Framework

PPT slides of Lecture 4


Form 401

  • What is a web framework?
  • Why do we need web frameworks?
  • What is MVC architecture?
  • what are the merits of MVC architecture?


  • Submit Form_401 to share folder
  • Configure continuous deployment

Deploying apps to Azure seems to be a bit challenging right now due to many ongoing changes underlying the DevOps. Probably the following posts will be helpful.

Deploy a web app to Azure App Services
Key concepts for new Azure Pipelines users

Recommended Reading

Lecture 5 (2018/11/05): Database

PPT slides of Lecture 5


Form 501

  • What is database?
  • What are common operations on a database?
  • What data need to be stored in SleepBeta database?
  • What tables should SleepBeta database have?


#  RazorSQL is a cross-platform desktop application that provides users with the ability to query, edit, browse, and manage databases. Note that free trial only valid for 30 days.

  • Create the following tables manually in your database on Azure, or follow the slides to deploy the database using Entity Framework in a tricky way (it worked last year but not sure if it will work this year given that Microsoft has significantly changed the Azure infrastructure) mac  windows


Recommended Reading

Lecture 6 (2018/11/08): API

PPT slides of Lecture 6


Form 601

  • What is API?
  • Why do we need API?
  • How does API work?
  • What data can you get from Fitbit through API?


  • Submit Form_601 to share folder
  • Download and install Fitbit app on your preferred device (e.g. smartphone, laptop)
  • Obtain Fitbit credential for your web app on Fitbit Developer Website
  • Configure Fitbit credential in web.config
  • Test and debug

Recommended Reading

Lecture 7 (2018/11/12): User Interface

PPT slides of Lecture 7


Form 701

  • What are the elements of a user interface?
  • What do we use data visualization for?
  • Can you list up some data visualization tools that you have used before?

Hans Rosling’s 200 Countries, 200 Years, 4 Minutes – The Joy of Stats – BBC Four


  • Submit Form_701 to share folder
  • Add a team member in your repository on DevOps


  • Complete app deployment

Completion criteria: (1) continuous deployment configured in Azure Portal, (2) database tables deployed, (3) Fitbit credential configured in web.config, and (4) app name changed. 

Recommended Reading & Watching

Mid-term Assignment

! Submit capstone project plan to share folder by 19 Nov 2018 !

Highlights of Capstone Projects in 2017

In 2017 Fall, we have the following two capstone projects that contain useful components for you to reuse (permissions obtained from the owners).

RunningBit helps runners reflect on their running routes and how their heart rate changes as a function of their running speed. Download the source code here. Credit to Tinghao Li.

NokoriMe helps users keep tracking their mental stress level using a digital diary. The diary contains 10 questions adapted from the validated Perceived Stress Scale (PSS) in psychology. It also integrate data from Fitbit devices, including sleep duration, steps, caloried consumption, physical activities, etc. The factors that correlate to stress will be highlighted (based on the calculation of Spearman correlation coefficients). Download the source code here. Credit to Lys Egholm Andersen.

Feel free to reuse code in all three web applications: SleepBeta, RunningBit and NokoriMe. You can also start from scratch.

Part II: Capstone Project

Lecture 8 (2018/11/19): SCRUM 

PPT slides of Lecture 8


  • Web app development process


  • Set up a repository for capstone project
  • Add team member “snowballs.u-tokyo[at]outlook.com”
  • Create a backlog with clear definition of “DONE” using DevOps Board
  • Plan for 2 Sprints/Iterations using DevOps Board
  • Decide SCRUM master for each sprint

Recommended Reading

Sleep in Quantified Self

# This paper offers a comprehensive review of the methods for sleep assessment and an exhaustive list of sleep metrics.

  • Taha Qazi, Francis A Farraye. (2018) Sleep and inflammatory bowel disease: an important bi-directional relationship. Inflamm Bowel Dis xx:xx.

# This paper provides a comprehensive review of studies investigating the relationship between sleep and inflammatory bowel diseases. You can get information on how sleep and IBD are measured. 

Self-tracking in General

Lecture 9 (2018/11/26): Sprint-1


  • Work on Sprint-1

Lecture 10 (2018/12/03): Trouble Shooting


  • Trouble shooting
  • Q&A

Lecture 11 (2018/12/10): Sprint-2


  • Work on Sprint-2

Lecture 12 (2018/12/17): Sprint Review


  • Sprint review

– What has/has not been done?
– What went well?
– What problems have been encountered?
– How the problems got solved?


Lecture 13 (2019/01/07): Good to Better


  • Complete an online survey
  • Fix the date for final presentation.
  • Coding and debugging.
  • Preparing for final presentation.

Lecture 14 (2019/01/21): Capstone Presentation


  • Give a final presentation.
Lecture 7 (20171107/1108): Understand Front-end and Team UpSELRES_5b426989-6014-4a54-a270-34da1a0f63f1SELRES_1b4da6ef-7dff-4259-a1a4-29277e6dbffbSELRES_366e490f-f958-4abf-b84c-fac5fd245c56SELRES_5523432c-7b3e-4185-a32f-c3034b0428c3

Tutorial: Uster Interface & Data Visualization
Hands-on: Customize UI


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: