Website implementation noob

[NYCSavage]

I am creating a simple website that will eventually show some data from my own personal Fitbit.  The main reason is that I've not been sleeping much (COVid19) and my girlfriend keeps asking me how my heart-rate/sleep is from my Ionic.  I had a domain that was just sat there unused so figured I could use it and also teach myself some new API.

So I simply want to create a div that says:

• Last night I got # hours sleep
• My heart rate is currently ## bpm

I've created the div, and I have registered a dev account with Fitbit.  I've registered an app and got my OAuth 2.0 Client ID and Client Secret etc. but the rest is all gobbledygook.  You wouldn't believe that I have a 1st class degree in web systems development!!!

So how can I get my website to connect to my Ionic/fitbit account, and display the data that is required?

Thank you for any help/advice that you can give.

[JohnFitbit · Accepted solution]

Hi @NYCSavage,

Welcome to the forums!

You won't be able to display live heart rate data on your website using the Web API. You'll only be able to fetch data at rest from your account; this means that you have to sync the data from your Ionic to your app before you can fetch the data. With that in mind, you'll only be able to see your heart rate data up to the point you synced your device to the app.

If you want to be able to pull live heart rate data from your Ionic, you may need to develop an application in the Fitbit app gallery and request for assistance in the SDK forums.

Otherwise, the Web API can help display how many hours you've slept the night before using the GET Sleep Logs endpoint:

https://api.fitbit.com/1.2/user/-/sleep/date/2017-04-02.json

{
    "sleep": [
        {
            "dateOfSleep": "2017-04-02",
            "duration": <value in milliseconds>,
            "efficiency": <value>,
            "isMainSleep": true,
            "levels": {
                "summary": {
                    "deep": {
                        "count": <value>,
                        "minutes": <value>,
                        "thirtyDayAvgMinutes": <value>
                    },
                    "light": {
                        "count": <value>,
                        "minutes": <value>,
                        "thirtyDayAvgMinutes": <value>
                    },
                    "rem": {
                        "count": <value>,
                        "minutes": <value>,
                        "thirtyDayAvgMinutes": <value>
                    },
                    "wake": {
                        "count": <value>,
                        "minutes": <value>,
                        "thirtyDayAvgMinutes": <value>
                    }
                },
                "data": [
                    {
                        "datetime": "2017-04-01T23:58:30.000",
                        "level": "wake",
                        "seconds": <value>
                    },
                    {
                        "datetime": "2017-04-02T00:16:30.000",
                        "level": "rem",
                        "seconds": <value>
                    },
                    <...>
                ],
                "shortData": [
                    {
                        "datetime": "2017-04-02T05:58:30.000",
                        "level": "wake",
                        "seconds": <value>
                    },
                    <...>
                ]
            },
            "logId": <value>,
            "minutesAfterWakeup": <value>,
            "minutesAsleep": <value>,
            "minutesAwake": <value>,
            "minutesToFallAsleep": <value>, // this is generally 0 for autosleep created sleep logs
            "startTime": "2017-04-01T23:58:30.000",
            "timeInBed": <value in minutes>,
            "type": "stages"
        },
        {
            "dateOfSleep": "2017-04-02",
            "duration": <value in milliseconds>,
            "efficiency": <value>,
            "isMainSleep": false,
            "levels": {
                "data": [
                    {
                        "dateTime": "2017-04-02T12:06:00.000",
                        "level": "asleep",
                        "seconds": <value>
                    },
                    {
                        "dateTime": "2017-04-02T12:13:00.000",
                        "level": "restless",
                        "seconds": <value>
                    },
                    {
                        "dateTime": "2017-04-02T12:14:00.000",
                        "level": "awake",
                        "seconds": <value>
                    },
                    <...>
                ],
                "summary": {
                    "asleep": {
                        "count": 0, // this field should not be used for "asleep" summary info
                        "minutes": <value>
                    },
                    "awake": {
                        "count": <value>,
                        "minutes": <value>
                    },
                    "restless": {
                        "count": <value>,
                        "minutes": <value>
                    }
                }
            },
            "logId": <value>,
            "minutesAfterWakeup": <value>,
            "minutesAsleep": <value>,
            "minutesAwake": <value>,
            "minutesToFallAsleep": <value>, // this is generally 0 for autosleep created sleep logs
            "startTime": "2017-04-02T12:06:00.000",
            "timeInBed": <value in minutes>,
            "type": "classic"
        }
    ],
    "summary": {
        "totalMinutesAsleep": <value>,
        "totalSleepRecords": 2,
        "totalTimeInBed": <value in minutes>
    }
}

You can see how many minutes you've spent in each heart rate zone and your resting heart rate on a daily basis using the GET Heart Rate Time Series endpoints:

https://api.fitbit.com/1/user/-/activities/heart/date/today/1d.json

{
    "activities-heart": [
        {
            "dateTime": "2015-08-04",
            "value": {
                "customHeartRateZones": [],
                "heartRateZones": [
                    {
                        "caloriesOut": 740.15264,
                        "max": 94,
                        "min": 30,
                        "minutes": 593,
                        "name": "Out of Range"
                    },
                    {
                        "caloriesOut": 249.66204,
                        "max": 132,
                        "min": 94,
                        "minutes": 46,
                        "name": "Fat Burn"
                    },
                    {
                        "caloriesOut": 0,
                        "max": 160,
                        "min": 132,
                        "minutes": 0,
                        "name": "Cardio"
                    },
                    {
                        "caloriesOut": 0,
                        "max": 220,
                        "min": 160,
                        "minutes": 0,
                        "name": "Peak"
                    }
                ],
                "restingHeartRate": 68
            }
        }
    ]
}

1sec and 1min detail level heart rate data is available through the Get Heart Rate Intraday Time Series endpoints if your application type is set to "personal".

If you need assistance with registering your client to fetch sleep and heart rate data (at rest), please let me know and I can provide you with additional instructions.

I hope this helps. Let me know if you have any additional questions.

[NYCSavage]

Thank you so much for your reply.  I didn't need a live heartrate, but just something to give her an idea, so rest data would be fine.

That all makes sense to me, but the problem I am having is how to call the function.  Am I using JS?  If so, would I enter a simple:

<script>https://api.fitbit.com/1.2/user/-/sleep/date/2017-04-02.json</script>

 and then expand it?  And, how would I enter my secret key in this script?

[GordonFitbit]

Hi @NYCSavage 

We typically don't provide code examples because of the vast number of programming languages available.   However, we do have some Javascript code examples in our documentation you can look at.  If you can't figure it out from these, let me know and I'll try to give you a different example.

The client ID and client secret are used when you authorize your application.  Once a user consents to share their data with your application, you'll be provided with an access token.  The access token should be provided as a HTTP header when calling the endpoint.  

[Holmes1]

Hey, sorry for the bump, but I want to know if you made it because one of my friends is looking for such a site. By the way, I have noticed that while creating a site, many don't pay attention to the design, unfortunately. However, the design is very important because it can improve user experience which creates an emotional connection between the user and the product. Sometimes if I don't like the design, I will just not use the site and I am not the only one, especially nowadays when you look only for quality.

[BevisP]

I totally agree with what are you saying. When one of my friends was creating his site, he told me that he spent a lot of time just designing every page. At first, I couldn't understand why he put so much effort into it, but then he explained. He told me that a great design can improve the user experience which is a very important factor. This could make his customers stay longer on his site. He read many tips about how to have a good user experience that really helped him to build a good website.