Fitbit api integration and concentration judgment (PHP, Javascript)

Sep 8, 2020 PHP JavaScript api fitbit

#Article summary

This is a description of the created portfolio. The following is summarized.

• -Background
• -Main functions
• -Development procedure
• -Ingenuity
• Task

#background The time management technique called “Pomodoro technique” has become a hot topic, and there are apps for that purpose, but it is difficult to judge whether or not you are actually concentrating with a simple Pomodoro timer. This time, we focused on the relationship between heart rate and concentration, and created an app to judge concentration.

#spec

Language

PHP 7.4.2

javascript

DBMS

MySQL 5.7.26

Development environment

MacOS Catalina 10.15.5

MAMP 5.7

Library

jquery

framework

Bootstrap 4.2

Version control

Git 2.24.3

Production environment

xserver

Wearable device

fitbit inspire HR

#Main functions

Pomodoro Timer

·Home Screen Press Start to activate the 25-minute timer. Below the timer you will see work records for today and this week. ・ After 25 minutes “Thank you for your hard work. Let’s take a break for 5 minutes!” Is displayed. ###data ・ Data screen “Changes in the number of pomodoros per week” and “Changes in the heart rate of the latest work” are displayed.

#Development procedure

1. Requirements definition
2. Preferences
3. Database design
4. Coding
5. xserver deployment

1. Message definition

Functions required for the application created this time ・ Timer function ・ Data recording ·Data display ・ Chart display ・ Data acquisition from fitbit API

Develop with php and Javascript.

2. Environment selection

In the production environment, use the well-known “xserver”. Use Git and GitHub as a practice.

3. Database design

Column is simple ・ ID ・ Start_at (work start time) ・ Stop_at (work end time)

4. Coding

Coding

4.1 Database creation

Create a database using MAMP’s phpMyAdmin.

4.2 Home screen

The timer count display is dynamically implemented in Javascipt. Implemented the processing when the “START”, “STOP”, and “RESET” buttons are pressed. When the work is completed, it is automatically registered in the DB. (Ajax) Screen design uses Bootstrap to save time.

4.3 Data screen

Graphs are created with a js library called chartist. Work records are obtained from the MAMP DB as well as the home screen.

Heart rate records are obtained from the fitbit API. Customize with reference to the following site https://qiita.com/RINYU_DRVO/items/6607a0aa7ca3294f8e47

By extracting the latest data from the MAMP DB and passing it to the API Get the change in heart rate per most recent working time. (This was the hardest part …)

Based on the acquired heart rate data Performed average heart rate and concentration judgment.

Concentration judgment is created based on the following.

1. High concentration: High average heart rate and low heart rate variance (hereinafter referred to as variance)
2. High stress: high average heart rate and high variance
3. Stable concentration: low average heart rate, low variance
4. Not focused: low average heart rate, high variance

• The threshold will be adjusted in the future.

5.xserver deployment

Use xserver in production environment. Set up a DB on xserver and modify the DB connection part of the program.

#Ingenuity ・ I thought about a function that is not in the world and brought it to the implementation ・ I was able to create an app that I wanted to use

#Future tasks It was completed when all the operations were completed. The main issues are as follows.

• -Addition of charts (weekly comparison, etc.)
• -Record of work contents (to evaluate what kind of work and what kind of concentration state)

#References Get your heart rate with Fitbit Web API and PHP7

#GitHub account freedog1 https://github.com/freedog1/pomodoro