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 dt>
- PHP 7.4.2 dd>
- javascript dd>
- DBMS dt>
- MySQL 5.7.26 dd>
- Development environment dt>
- MacOS Catalina 10.15.5 dd>
- MAMP 5.7 dd>
- Library dt>
- jquery dd>
- framework dt>
- Bootstrap 4.2 dd>
- Version control dt>
- Git 2.24.3 dd>
- Production environment dt>
- xserver dd>
- Wearable device dt>
- fitbit inspire HR dd>
dl>
#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
- Requirements definition
- Preferences
- Database design
- Coding
- 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.
- High concentration: High average heart rate and low heart rate variance (hereinafter referred to as variance)
- High stress: high average heart rate and high variance
- Stable concentration: low average heart rate, low variance
- 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