.gif)
Discover how to integrate Lovable with Google Fit using our step-by-step guide. Sync your fitness data and track progress seamlessly—all in one simple setup!
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
.png)
.png)
package.json file in the project.dependencies section, add the following entry to include the Google APIs client library:
{
"dependencies": {
"googleapis": "^111.0.0"
// ... other dependencies
}
}
googleFitService.ts (you can place it in a folder like services if you prefer organization).
import { google } from 'googleapis';
const oauth2Client = new google.auth.OAuth2(
'YOURCLIENTID', // Replace with your Google API client ID
'YOURCLIENTSECRET', // Replace with your Google API client secret
'YOURREDIRECTURI' // Replace with your OAuth2 redirect URI
);
// Generate the url that will be used for the consent dialog.
export const getAuthUrl = (): string => {
const scopes = [
'https://www.googleapis.com/auth/fitness.activity.read',
'https://www.googleapis.com/auth/fitness.location.read'
];
return oauth2Client.generateAuthUrl({
access_type: 'offline',
scope: scopes
});
};
// Function to set tokens once user grants permission
export const setTokens = (code: string): Promise => {
return oauth2Client.getToken(code).then(response => {
oauth2Client.setCredentials(response.tokens);
});
};
// Function to access user's step count data from Google Fit
export const getDailySteps = async (userId: string, startTimeMillis: number, endTimeMillis: number): Promise => {
const fitness = google.fitness({ version: 'v1', auth: oauth2Client });
const requestBody = {
aggregateBy: [{
dataTypeName: 'com.google.step_count.delta'
}],
bucketByTime: { durationMillis: (endTimeMillis - startTimeMillis) },
startTimeMillis,
endTimeMillis
};
const response = await fitness.users.dataset.aggregate({
userId: 'me',
requestBody
});
return response.data;
};
YOURCLIENTID, YOURCLIENTSECRET, and YOURREDIRECTURI with your actual credentials from the Google Developer Console.
main.ts or index.ts).googleFitService.ts by adding the following code at the top of your file:
import { getAuthUrl, setTokens, getDailySteps } from './googleFitService';
// Example function to redirect user to Google authorization
export const redirectToGoogleFitAuth = (): void => {
const url = getAuthUrl();
window.location.href = url;
};
// Example callback function to handle the OAuth2 callback and display steps
export const handleGoogleFitCallback = async (): Promise => {
// Assume the URL contains the ?code= parameter after redirection
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
if (code) {
await setTokens(code);
// Define the time window (e.g., for today's steps)
const startTime = new Date();
startTime.setHours(0, 0, 0, 0);
const endTime = Date.now();
// Call the Google Fit API to get step count data
const stepsData = await getDailySteps('me', startTime.getTime(), endTime);
console.log('Steps Data:', stepsData);
// Process and display the data as needed in your Lovable project.
}
};
redirectToGoogleFitAuth():
<button onclick="redirectToGoogleFitAuth()">Connect Google Fit</button>
handleGoogleFitCallback() function after redirection by checking the URL for the OAuth code parameter.
handleGoogleFitCallback() processes the returned code and fetches your step data.This prompt helps an AI assistant understand your setup and guide you through the fix step by step, without assuming technical knowledge.
Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!
.svg)
When it comes to serving you, we sweat the little things. That’s why our work makes a big impact.
Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.
CPO, Praction - Arkady Sokolov
May 2, 2023
Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!
Co-Founder, Arc - Donald Muir
Dec 27, 2022
Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.
Co-CEO, Grantify - Mat Westergreen-Thorne
Oct 15, 2022
Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.
Co-Founder, Church Real Estate Marketplace - Emmanuel Brown
May 1, 2024
Matt’s dedication to executing our vision and his commitment to the project deadline were impressive.
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!
Production Manager, Media Production Company - Samantha Fekete
Sep 23, 2022