water goal on clock face

[mlikes]

Hi all,

I am new to this but I am looking to create a watch face on an ionic that displays the water goal and how much water has been drunk in a day (using the data in the fitbit app / today data). Something similar to the goal for steps. Has anyone done this you would anyone know if this is even possible?

Michael

[JonFitbit]

That data is available in the Food Logging Web API:

https://dev.fitbit.com/build/reference/web-api/food-logging/

You can see an example of fetching data from the Web APIs here:

https://github.com/Fitbit/sdk-oauth

[mlikes]

Thanks for pointing me in the right direction.

Have you or anyone else seen a working example of this on a clock face?

[JonFitbit]

You can take a look at the Water Logged app for ideas - https://github.com/TylerLeonhardt/Water-Logged

[paulera888]

I am also interested in making a watch face that shows the amount of water done for the day and goal, I expected it to be part of the activity info, to be honest.

Checking WaterLogged's source code I understand that it relies on the companion mobile app. The watch app uses the `messaging` package to request data to the companion app, which then uses the `request` package to communicate with the WebAPI.

Is it possible to read water data without needing to develop a companion app as an intermediate?

[Gondwana]

Unfortunately not. The companion app is the only code with which the watch can communicate directly.

[paulera888]

Got it, thanks for your prompt response @Gondwana. So the companion app would be making requests for water data directly to fitbit's WebAPI.

I am quite new to FitBit development and have a question about authentication. Do I still need to register an App? If so, since the companion will make requests directly to fitbit WebAPI without an intermediate server, how should I go about the Callback URL?

Cheers

[Gondwana]

I think you're talking about a Web API App. You don't need one for what you're describing: you can get data from the Web API directly into your companion app using the oath settings component.

Here's another repo that pulls data from Web API into companion. It does use a separate server, but not to get the data.

[paulera888]

@Gondwana thanks for the suggestion, I checked ou the repos fitbit-rhr-fetcher, sdk-oauth and the documentation. I created a settings page with an OAuth Button, just to log the token for now (code below). When I hit the button, I get redirected to an error page with the following message:

The app you're trying to connect did not provide valid information to Fitbit. Please report this issue to them.

Developer information: invalid_request - Invalid redirect_uri parameter value

I used a valid HTTPS URL as Callback in my test app, and I noticed that no request was made to it.

App configuration

• OAuth 2.0 Application Type = Client
• Default Access Type = read-only
• Callback URL = I used a server of my own (HTTPS enabled) and tried a requestbin.com endpoint. None worked. 😥
• No subscriber

settings/index.jsx

function mySettings(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center">Fitbit Account</Text>}>
        <Oauth
          settingsKey="oauth"
          title="Login"
          label="Fitbit"
          status="Login"
          authorizeUrl="https://www.fitbit.com/oauth2/authorize"
          requestTokenUrl="https://api.fitbit.com/oauth2/token"
          clientId="XXXXXXXXXXXX"
          clientSecret="XXXXXXXXXXXXX"
          scope="nutrition"
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(mySettings);

companion/index.js

import { settingsStorage } from "settings"

// A user changes Settings
settingsStorage.onchange = evt => {
  if (evt.key === "oauth") {
    // Settings page sent us an oAuth token
    console.log(evt.newValue)
  }
};

Any idea of what I am doing wrong here?

Thanks!

[paulera888]

The error above was solved by using https://app-settings.fitbitdevelopercontent.com/simple-redirect.html as Callback URL. Yay \o/