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



Notice 2017


Based on her work in this lecture, Lys Egholm Andersen submitted the following paper to the IEICE General Conference which will be held in Tokyo Denki University during 20-23 March 2018. WELL DONE!

Lys Egholm Andersen, Zilu Liang, Kumiko Morimura. A Web Application for Analyzing Stress Association Factors Among Students. IEICE General Conference 2018.

#We encourage all students to polish up your work into a paper or a biz plan.

2017/12/05 Some upcoming events of your interest

Biz Competitions/Events
Japan Business Model Competition (JBMC 2018) (Application deadline: 29 Jan 2018) (Japanese/English)
Microsoft Imagine Cup (Deadline: 18 Feb 2018 ) (Japanese/English)
SLUSH Tokyo 2018 (Mar 28-29) is looking for volunteers! (English)

Academic Conferences
IEICE Annual Conference 2018 (Mar 20-23) @ Tokyo (Submission due: 10 Jan 2018) (Japanese/English, 1 page)
IEEE Social Media 2018 (June 11-12) @ Scotland, UK (Submission due: 26 Jan 2018) (English)
ACM MobileHCI 2018 (Sep 3-6) @ Barcelona, Spain (submission due: 9 Feb 2018, SIGCHI Student Travel Grant)) (English)

All students in the lecture received a Fitbit this week. They can now use the gear to explore the patterns of their physical activities, heart rate, and sleep. In the second half of the semester, students will use the Fitbit and the collected data to test and debug the cloud-based web app that they are going to develop. Sounds like a lot of fun, doesn’t it? Happy tracking and coding!

Lecture Slides 2017 Fall

Part I: Deployment in Azure Cloud

Lecture 1 (20170927): Introduction

Course overview

Lecture 2 (20171003/04): Install Software and Setup Version Control

Tutorial: Setup repository on Visual Studio Team Service
Hands-on: Install Visual Studio and set up version control (Windows, MAC)

Lecture 3 (20171010/11): Understand Version Control and Deploy Sample App to Cloud

Tutorial: Version control basics
Hands-on: Deploy sample app to Azure cloud

Lecture 4 (20171017/18): Understand ASP.NET MVC Framework and Deploy Database

Tutorial: ASP.NET MVC framework basics
Hands-on: Deploy database (Windows, MAC)

Lecture 5 (20171025): Understand Fitbit API and Obtain Fitbit API Credential

Tutorial: Fitbit API basics
Hands-on:Configure API credential

Lecture 6 (20171031/1101): Understand Back-end and Make Changes to Database

Tutorial: Backend & Database
Hands-on: Deploy database and make changes (Windows, MAC)

SELRES_5523432c-7b3e-4185-a32f-c3034b0428c3SELRES_366e490f-f958-4abf-b84c-fac5fd245c56SELRES_1b4da6ef-7dff-4259-a1a4-29277e6dbffbSELRES_5b426989-6014-4a54-a270-34da1a0f63f1Lecture 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: User Interface & Data Visualization
Hands-on: Customize UI

Assignment 1: Submit Capstone Project Summary (Sample) (Due: 10 Nov 2017, 18:00 pm)

Assignment 2: Deploy sample app and customize UI (Due: 22 Nov 2017, 12:00 pm)

Part II: Capstone Project

Lecture 8 (20171121/22): Define Goal and Scope

Tutorial: Web app development & Scrum basics 
Hands-on: Revise app summary and plan for two sprints

Assignment 3: Submit Product Backlog and Sprint Backlog (Due: 29 Nov 2017, 12:00 pm)

Please add “test.u-tokyo@hotmail.com” as a team member in your repository and your Scrumdesk

Lecture 9 (20171128/29): Sprint-1

Hands-on: Work on Sprint-1 and deliver product version 1.0

Please make wise use of the Fitbit.NET library. It’s already used in the sample app, but you probably want to learn more about the library.

Lecture 10 (20171205/06): Sprint Review

Tutorial: Sprint Review Basics
Hands-on: Review Sprint-1 and revise Backlogs
Assignment 4: Submit Sprint Review Form and revised Product/Sprint Backlog (Due: Friday 8 Dec 2017, 18:00 pm)

Lecture 11 (20171212/13): Sprint-2

Hands-on: Work on Sprint-2 and deliver product version 2.0

Lecture 12 (20171219/20): Usability Testing

Tutorial: Usability Testing Basics
Hands-on: Conduct cross-team user test and obtain feedback

Toolkit: Informed Consent, SUS Questionnaire

Assignment 5: Conduct usability testing with 3 participants and submit usability testing report (Due: Tuesday 9 Jan 2018, 12:00 pm)

Lecture 13 (20180109/10): Polish-up

Hands-on: Create a revise plan and polish up the ap

Lecture 14 (20180116/17): Final Presentation (30% of final score)

Tutorial: Course Summary

Hands-on: final presentation (up to 10 min per team) EvaluationSheet Sample

All students are required to give feedback to other teams.

Please return your Fitbit device, charger and manual. 

Assignment 6: (30% of final score) Submit the documentations of your app (Due: 31 Jan 2018, 18:00 pm)  Sample

Bonus: One step further (not conducted in 2017)

Tutorial: Writing biz plan and research proposal
Hands-on: Create an elevator pitch for your app(optional)

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



Course Code:

Undergraduate: FEN-CO4902P2
Graduate: 3799-023

Course Outline

In this course students will gain rich hands-on experience with web app design, implementation, and deployment in a cloud environment. This course consists of two stages: tutorials and capstone projects. The details of each stage is described below.

  • Stage I (week 2 ~ 7): tutorials. The main task at this stage is to deploy a sample web app named SleepBeta on Microsoft Azure Cloud and to understand the implementation of the app. Students will gain basic knowledge on version controlASP.NET MVC framework and API. At the end of this stage, students will be able to set up version control using Git and host it on Visual Studio Team Service, to deploy an app on cloud, and to retrieve data through Fitbit API.
  • Stage II (week 8 ~ 14): capstone projects. At this stage, the students are encouraged to innovate the deployed web app using their creativity and the knowledge they have learned in Stage I. At least one major change should be made on the front end and on the back end respectively. Students will follow the standard web development process of brainstorming, conceptualizing, literature reviewing, planning, implementation, and revising. At the end of this stage, students will have completed a functional web app based on SleepBeta.

Course Policy


Bring your passion, creativity and laptop.


All teaching is done in English. Students are free to use whichever language that helps them get the job done efficiently during classes. However, students are required to give the final presentation of the capstone project in English.


Auditing students are welcome to join us and are strongly encouraged to participate actively in class.


  • Attendance (10%): Given to your attendance to the course and your involvement in discussions during the class.
  • Cloud Deployment (10%): Given to successful deployment of SleepBeta on Microsoft Azure Cloud Service.
  • Capstone Project (80%): Given to the design and implementation of new features and functions of the deployed app.
    • Individual Project Contributions (10%): individual contribution to the project based on Git/TFVS commit log.
    • Project Proposal (10%): paper-based prototyping of the proposal.
    • Project Presentation (30%): presentation on the proposal and implemented web app.
    • Project Final Report (30%): report and documentation of the implemented web app.


Part I: Tutorials

  • #1 (27th, September): Course Guidance
  • #2 (3/4th, October): Subscribe to Azure, Install Software & Set-up Repository
  • #3 (10/11th, October): Deploy Sample Web App to Microsoft Azure
  • #4 (17/18th, October): Understand the Code: ASP.NET MVC Framework
  • #5 (24/25th, October): Understand the Code: The Back-end
  • #6 (31, October/1st, November): Understand the Code: The Front-end
  • #7 (7/8th, November): Understand the Code: Fitbit API

Part II: Capstone Projects

  • #8 (14/15th, November): Brainstorm
  • #9 (21/22th, November): Implement the Back-end
  • #10 (28/29th, November): Implement the Front-end
  • #11 (5/6th, December): Conduct Usability Test
  • #12 (12/13th, December): Polish Up Your App
  • #13 (9/10th, January): Present Your Idea and Prototype
  • #14 (16/17th, January): Sell Your Idea

Capstone Project Evaluation

The capstone projects will be evaluated according to the criteria below.

  • Completeness: Is the proposed web app successfully implemented and functioning as expected? Note that trivial bugs are acceptable.
  • Usability: Is the web app user friendly?
  • Creativity: Is the idea that underlining the web app diverge from the mainstream?
  • Documentation: Is the web app well documented (manual, report, etc)?
  • Bonus: Will the outcomes of the project be extended into a business plan or an academic paper?

Tool and Help

Version Control Tools

Microsoft Azure Cloud Services

JavaScript,HTML,CSS, D3.js

Recommended Reading

Project Management

  • Jeff Sutherland & J. J. Sutherland. (2014) SCRUM: The art of doing twice the job in half the time. Crown Publishing Group. [Introduction]
  • Ken Schwaber and Jeff Sutherland. (2017) The Scrum Guide.

Microsoft Azure Cloud

  • Michael Washam & Rick Rainey. (2015) Implementing Microsoft Azure Infrastructure Solutions. Exam Ref 70-533.
  • Zoiner Tejada, Michele L. Bustamante, Ike Ellis. (2015) Developing Microsoft Azure Solutions. Exam Ref 70-532.
  • Yuri Diogenes, Thomas W. Shinder, Debra L. Shinder. (2016) Microsoft Azure Security Infrastructure.

  • Michael Washam, Rick Rainey. (2015) Implementing Microsoft Azure Infrastruture Solutions. Exam Ref 70-533.

Course Outline


– 対象(Target) 学部生・大学院生(Undergraduate and Graduate Students)
– 概要: マイクロソフトのAzureクラウド上のWebアプリケーションの展開と開発を習得する。活動量計FitbitのAPIでデータを取得し個人に役立つWebアプリケーションを設計、開発します。自分のアイディアを実装し、発表する。
– Abstract: learn how to deploy web apps on Microsoft Azure cloud. Design and develop a web app to work with Fitbit API. Implement your own idea and sell it.

初回授業(ガイダンス):9月27日(水)14:55-16:40 工学部8号館324号室


  • Microsoft Azureクラウド上のWebアプリケーションの展開と管理を学ぶ。To gain hands-on experience on web app deployment and management on the Microsoft Azure cloud.
  • MVCアーキテクチャとNET Webフレームワークに関する基礎知識を学ぶ。To gain basic knowledge on MVC architecture and ASP.NET web framework.
  • フロントエンド開発またはバックエンド開発を経験する。To gain hands-on experience on front-end or back-end development.
  • 活動量計FitbitのAPI を使ってデータを取得する方法を学ぶ。To gain basic knowledge and hands-on experience on retrieving data from consumer activity trackers such as Fitbit.
  • GITやSCRUMなどのプロジェクトやチーム管理の知識を学ぶ。To gain basic knowledge and hands-on experience on project and team management knowledge such as GIT and SCRUM
  • 英語のスキルとプレゼンテーションスキルを向上させる。To horn English skill and presentation skill.