bible-app/GOOGLE_DRIVE_API_SETUP.md

🔗 Google Drive API Setup Guide

To enable real file loading in your Bible App's media tab, you need to set up Google Drive API credentials. This will allow the app to fetch and display your actual Google Drive files as thumbnails.

📋 Step-by-Step Setup

1. Create a Google Cloud Project

1. Go to Google Cloud Console
2. Click "New Project" or select an existing project
3. Give your project a name (e.g., "Bible App Media Integration")
4. Click "Create"

2. Enable Google Drive API

1. In your Google Cloud Console, go to APIs & Services > Library
2. Search for "Google Drive API"
3. Click on it and press "Enable"

3. Create API Credentials

A. Create an API Key:

1. Go to APIs & Services > Credentials
2. Click "+ CREATE CREDENTIALS" → "API key"
3. Copy the generated API key
4. Click "Restrict Key" for security:
   • Under "API restrictions", select "Restrict key"
   • Choose "Google Drive API"
   • Under "Website restrictions", add your domain (e.g., 192.168.1.126:8080 or your domain)

B. Create OAuth 2.0 Client ID:

1. Still in Credentials, click "+ CREATE CREDENTIALS" → "OAuth client ID"
2. If prompted, configure the OAuth consent screen:
   • Choose "External" (unless you have a Google Workspace)
   • Fill in required fields:
     • App name: "Bible App Media"
     • User support email: Your email
     • Developer contact: Your email
   • Add scopes: https://www.googleapis.com/auth/drive.readonly
3. Choose "Web application"
4. Add authorized origins: http://192.168.1.126:8080 (your app's URL)
5. Copy the Client ID

4. Update Your App Code

Open bible-app/app.js and find this section around line 1140:

await gapi.client.init({
    apiKey: 'YOUR_API_KEY', // Replace with your actual API key
    clientId: 'YOUR_CLIENT_ID.apps.googleusercontent.com', // Replace with your Client ID
    discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'],
    scope: 'https://www.googleapis.com/auth/drive.readonly'
});

Replace:

• YOUR_API_KEY with your actual API key
• YOUR_CLIENT_ID.apps.googleusercontent.com with your actual Client ID

5. Set Folder Permissions

Make sure your Google Drive folder is accessible:

1. Right-click your Google Drive folder
2. Choose "Share"
3. Either:
   • Option A: Make it "Anyone with the link can view" (easiest)
   • Option B: Add your Google account email with "Viewer" permissions

6. Test the Integration

1. Save your changes to app.js
2. Refresh your Bible app
3. Switch to a media tab
4. Click the gear icon (⚙️) "Media Source" card
5. Paste your Google Drive folder link
6. Click "Save & Load Media Thumbnails"

The app should now:

• ✅ Prompt you to sign in to Google (if not already signed in)
• ✅ Load and display your real files as thumbnails
• ✅ Show file types, names, and sizes
• ✅ Allow drag-and-drop of real files to the canvas

🔧 Troubleshooting

"Failed to initialize Google Drive API"

• Check that your API key and Client ID are correct
• Verify that Google Drive API is enabled in Google Cloud Console
• Make sure your domain is added to authorized origins

"Authentication Required"

• Click the authentication card to sign in
• Make sure the OAuth consent screen is properly configured
• Check that the scope https://www.googleapis.com/auth/drive.readonly is added

"Error Loading Files"

• Verify that the folder ID is correct
• Check folder permissions (make sure it's shared properly)
• Try refreshing the page and re-authenticating

No Files Showing

• Make sure there are actually files in the folder
• Check that files aren't in the trash
• Verify folder permissions

🔐 Security Notes

• Never commit your API credentials to version control
• Consider using environment variables for production
• The drive.readonly scope only allows reading files, not modifying them
• API keys should be restricted to specific APIs and domains

🎉 Success!

Once set up correctly, your media tab will show real thumbnails of your Google Drive files, complete with:

• 🖼️ Actual image thumbnails
• 📁 Proper file type icons
• 📊 File sizes and names
• 🔄 Drag-and-drop functionality with real files

Your Bible app now has full Google Drive integration! 🎊