can i setup google drive api to host my data of my
app?
Yes—you can use the Google Drive API to host and serve your app’s data. At a high level you
will:
1. Create a Google Cloud project and enable the Drive API
2. Configure OAuth 2.0 credentials for your web app
3. Use the Drive API’s appDataFolder or a dedicated folder for storing JSON files
4. From your frontend (GitHub-Pages hosted), fetch/upload data via Drive API endpoints
Below are the concise steps:
1. Enable the Drive API
1. Go to Google Cloud Console → APIs & Services → Library
2. Search for Google Drive API, click Enable
2. Create OAuth 2.0 Credentials
1. In APIs & Services → OAuth consent screen, select “External”, fill in app name (“Traclass”)
and developer email.
2. In Credentials → Create credentials → OAuth client ID → Web application
Authorized JavaScript origins: https://<your-username>.github.io
Authorized redirect URIs: https://<your-
username>.github.io/traclass/oauth2callback.html (or your callback page)
3. Copy the Client ID and Client Secret
3. Pick a Storage Folder
Option A: appDataFolder (hidden, per-user)
Files stored here aren’t visible to users in Drive UI
Use scope https://www.googleapis.com/auth/drive.appdata
Option B: Public “data” folder
Create a folder in Drive, share it as “Anyone with link can view”
Store JSON files there
Use scope https://www.googleapis.com/auth/drive.readonly or broader
4. Frontend Integration (JavaScript)
Include Google API client library:
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://apis.google.com/js/api.js" async defer></script>
Initialize and authorize:
function initGapi() {
gapi.load('client:auth2', async () => {
await gapi.client.init({
apiKey: '<YOUR_API_KEY>',
clientId: '<YOUR_CLIENT_ID>',
discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'],
scope: 'https://www.googleapis.com/auth/drive.appdata'
});
});
}
window.onload = initGapi;
Sign in:
async function handleAuthClick() {
await gapi.auth2.getAuthInstance().signIn();
}
document.getElementById('loginBtn').onclick = handleAuthClick;
List files:
async function listDataFiles() {
const res = await gapi.client.drive.files.list({
spaces: 'appDataFolder',
fields: 'files(id, name)'
});
return res.result.files;
}
Read a JSON file:
async function readJsonFile(fileId) {
const res = await gapi.client.drive.files.get({
fileId,
alt: 'media'
});
return JSON.parse(res.body || res.result);
}
Write or update a JSON file:
async function writeJsonFile(fileId, jsonContent) {
const blob = new Blob([JSON.stringify(jsonContent)], {type: 'application/json'});
const metadata = {
name: 'data.json',
mimeType: 'application/json',
parents: ['appDataFolder']
};
const form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}
form.append('file', blob);
const res = await fetch('https://www.googleapis.com/upload/drive/v3/files' +
(fileId ? '/' + fileId : '') + '?uploadType=multipart&fields=id', {
method: fileId ? 'PATCH' : 'POST',
headers: {'Authorization': 'Bearer ' + gapi.auth2.getAuthInstance().currentUser.get()
body: form
});
return await res.json();
}
5. Deploy Your App
1. Push your static files (HTML/CSS/JS) to a GitHub repo
2. Enable GitHub Pages on the main branch, root folder
3. Your app will be served at https://<you>.github.io/<repo> and will fetch/store data via
Drive API
With this setup, Traclass will run entirely client-side on GitHub Pages, yet read and write its data
to Google Drive securely via OAuth and the Drive API.
⁂
