Google Appsheet: Data Integration & Sync challenge

We are using Google App Sheet for Data entry, which stores the images in Google Drive as jpg format or the format that we choose. Our actual Data Source is GitHub Repo - images folder. We need to move the uploaded image from Google Drive to GitHub Repo. We can't directly store the image in GitHub Repo via App Sheet. We need to use App Script and write code to push the image to required folder in GitHub Repo.

Data Integration & Sync challenge

If we don't align the "Storage" (Google Drive) with the "Hosting" (GitHub), we create a manual bottleneck where you'd have to download from Drive and upload to GitHub every time.

The "Single Source of Truth" Architecture

We will treat Google Drive as your "Input/Raw" layer and GitHub as your "Public/Optimized" layer.

Layer	Platform	Purpose
Data Entry	AppSheet	Your mobile UI for adding new data items and snapping photos.
Storage (Raw)	Google Drive	The default folder where AppSheet saves the .jpg files.
The Bridge	Apps Script	A script triggered by your AppSheet "Sync" that sends the image to GitHub.
Processing	GitHub Actions	Converts the JPG to WebP/AVIF and moves it to /images/dist/.
Hosting	GitHub Pages	Serves the optimized images to the website.

The Implementation Strategy

Step 1: The Apps Script Bridge (The "Trigger")

In your AppSheet app, when you save a new record, we use an AppSheet Automation (Web-hook) to call a Google Apps Script. This script will:

1. Grab the image file from the Google Drive folder.
2. Convert the image to a Base64 string.
3. Use the GitHub REST API (via UrlFetchApp) to "Push" that file directly into your GitHub /images/raw folder.

You are demonstrating an "Enterprise Integration" between Google Workspace and GitHub. This is a very high-value skill.

Step 2: The GitHub Action (The "Worker")

Once the Apps Script pushes the file to /images/raw, GitHub sees a new commit. The GitHub Action will:

1. See the new .jpg.
2. Run the conversion to .webp and .avif.
3. Save the results in /images/dist.
4. (Optional) Delete the file from /images/raw to keep the repo clean.

Step 3: The Data Sync

Your JSON file (which the website reads) needs to point to the GitHub URL, not the Google Drive URL.

• AppSheet Entry: IMG_2026_001.jpg
• Website JSON Result: https://yourname.github.io/repo/images/dist/IMG_2026_001.webp

How do we start?

Since this is a multi-step architecture, we should build it in order of "Data Flow."

1. First: We need to write the Google Apps Script that can talk to the GitHub API. This is the hardest part.
2. Second: We set up the GitHub Action to watch that folder.
3. Third: We update the Website's JS to read the new pathing.