Panduan Lengkap Membuat Galeri Foto Cloud dengan Google Apps Script

Pendahuluan

Membangun sebuah web galeri foto cloud sendiri kini menjadi sangat mungkin tanpa perlu mengeluarkan biaya untuk hosting atau server. Dengan memanfaatkan layanan gratis dari Google, yaitu Google Apps Script, Anda dapat membuat sebuah sistem penyimpanan dan tampilan foto yang powerful. Artikel ini akan memandu Anda langkah demi langkah untuk membuat galeri foto cloud dengan Google Apps Script yang dapat diintegrasikan ke dalam blog atau website Anda. Sistem ini memungkinkan pengunjung untuk mengunggah foto dan melihat galeri tanpa perlu login, sangat cocok untuk blog pribadi, portofolio komunitas, atau proyek open source. Pengalaman langsung dalam mengimplementasikan kode ini menunjukkan bahwa solusi ini tidak hanya gratis tetapi juga handal dan mudah disesuaikan.

Demo Langsung: Anda bisa melihat hasil akhir dari tutorial ini di halaman demo galeri foto (klik disini). Source code ini bersifat open source, dapat digunakan di mana saja (Blogspot, WordPress, HTML statis, dll).

Source Code Lengkap - Klik untuk tampilkan/sembunyikan

Berikut adalah kode lengkap yang dapat Anda salin dan gunakan:

1. Kode Backend Google Apps Script (GAS):

const FOLDER_ID = 'MASUKKAN_ID_FOLDER_ANDA_DISINI'; 

function doGet(e) {
  if (e && e.parameter && e.parameter.action === 'getAllFoto') {
    return handleGetAllFoto();
  }
  return ContentService.createTextOutput(JSON.stringify({ error: 'Invalid request' }))
    .setMimeType(ContentService.MimeType.JSON);
}

function doPost(e) {
  const action = e.parameter.action;
  if (action === 'upload') {
    return handleUpload(e);
  } else if (action === 'tambahView') {
    return handleTambahView(e);
  }
  return ContentService.createTextOutput(JSON.stringify({ error: 'Invalid action' }))
    .setMimeType(ContentService.MimeType.JSON);
}

function getOrCreateSheet() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  let sheet = ss.getSheetByName('foto');
  if (!sheet) {
    sheet = ss.insertSheet('foto');
    sheet.appendRow(['id', 'nama_file', 'drive_id', 'link_foto', 'ukuran', 'tanggal', 'viewer_count']);
  }
  return sheet;
}

function handleUpload(e) {
  try {
    const base64Full = e.parameter.foto;
    const fileName = e.parameter.nama;
    
    const splitData = base64Full.split(',');
    const contentType = splitData[0].match(/:(.*?);/)[1];
    const base64Data = splitData[1];
    
    const folder = DriveApp.getFolderById(FOLDER_ID);
    const decodedFile = Utilities.base64Decode(base64Data);
    const blob = Utilities.newBlob(decodedFile, contentType, fileName);
    const file = folder.createFile(blob);
    
    file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
    
    const driveId = file.getId();
    const viewUrl = `https://lh3.googleusercontent.com/u/0/d/${driveId}`;
    
    const sizeInBytes = Math.ceil((base64Data.length * 3) / 4);
    const sizeInKB = Math.round(sizeInBytes / 1024);
    const sheet = getOrCreateSheet();
    const date = new Date();
    const id = Utilities.getUuid();
    
    sheet.appendRow([id, fileName, driveId, viewUrl, sizeInKB, date, 0]);
    
    return ContentService.createTextOutput(JSON.stringify({ 
      success: true, 
      id: id,
      url: viewUrl
    })).setMimeType(ContentService.MimeType.JSON);
    
  } catch(err) {
    return ContentService.createTextOutput(JSON.stringify({ 
      success: false, 
      error: err.toString() 
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

function handleGetAllFoto() {
  const sheet = getOrCreateSheet();
  const data = sheet.getDataRange().getValues();
  const fotoList = [];
  
  for (let i = 1; i < data.length; i++) {
    if (data[i][0]) {
      fotoList.push({
        id: data[i][0],
        nama: data[i][1],
        driveId: data[i][2],
        url: data[i][3],
        ukuran: data[i][4],
        tanggal: data[i][5],
        views: data[i][6] || 0
      });
    }
  }
  
  return ContentService.createTextOutput(JSON.stringify({ 
    success: true, 
    data: fotoList.reverse() 
  })).setMimeType(ContentService.MimeType.JSON);
}

function handleTambahView(e) {
  try {
    const id = e.parameter.id;
    const sheet = getOrCreateSheet();
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === id) {
        const currentViews = data[i][6] || 0;
        sheet.getRange(i + 1, 7).setValue(currentViews + 1);
        break;
      }
    }
    return ContentService.createTextOutput(JSON.stringify({ success: true }));
  } catch(e) {
    return ContentService.createTextOutput(JSON.stringify({ success: false }));
  }
}

2. Kode Frontend (HTML/JS/CSS):

    https://github.com/xiagame/upload/blob/main/Source%20Code <=== Ambil Frontend Disini ya

Catatan: Jangan lupa mengganti YOUR_SCRIPT_ID dan FOLDER_ID dengan milik Anda sendiri setelah deploy Web App!

Daftar Isi

• Pendahuluan
• Mengapa Memilih Google Apps Script?
• Persiapan Awal
• Langkah Deploy Web App
• Fitur Lengkap
• Kesimpulan
• Pertanyaan Umum (FAQ)

Mengapa Memilih Google Apps Script untuk Galeri Cloud?

Google Apps Script (GAS) adalah platform pengembangan kode berbasis cloud yang sangat terintegrasi dengan ekosistem Google. Keahlian dalam memanfaatkan GAS dapat menghemat biaya infrastruktur secara signifikan. Berikut adalah beberapa alasan mengapa membuat galeri foto cloud dengan Google Apps Script menjadi pilihan tepat:

• Gratis Sepenuhnya: Tidak ada biaya untuk hosting, database, atau bandwidth hingga batas tertentu (cocok untuk skala kecil hingga menengah).
• Tanpa Login: Web app yang dideploy bisa diakses publik, sehingga siapa pun bisa upload dan melihat galeri.
• Mudah Diintegrasikan: Kode frontend dapat dengan mudah ditempelkan ke Blogspot, WordPress, atau halaman HTML statis mana pun.
• Otomatisasi WebP: Foto otomatis dikonversi ke format WebP untuk loading lebih cepat dan hemat bandwidth.
• Open Source & Modifiable: Seluruh kode dapat Anda ubah sesuai kebutuhan.

Persiapan Awal

Sebelum memulai coding, Anda perlu menyiapkan dua komponen utama:

1. Google Spreadsheet: Akan bertindak sebagai database metadata foto. Buat spreadsheet baru di drive.google.com.
2. Folder di Google Drive: Tempat penyimpanan semua file foto. Buat folder baru, lalu catat ID folder tersebut (ID adalah bagian dari URL setelah `folders/`). Contoh: `1Ziag5udepH5KcnJhytt0A41zb620-b_a`.

Kedua komponen ini akan dihubungkan oleh kode Google Apps Script yang akan kita buat. Anda bebas mengganti nama folder dan spreadsheet sesuai keinginan.

Langkah Deploy Web App

Setelah kode GAS siap, lakukan deploy:

1. Klik tombol Deploy > New deployment.
2. Pilih type: Web app.
3. Execute as: Me (atas nama Anda).
4. Who has access: Anyone (agar bisa diakses publik tanpa login).
5. Klik Deploy dan izinkan akses jika diminta.
6. Copy URL yang dihasilkan (contoh: `https://script.google.com/macros/s/AKfycb.../exec`). URL ini akan digunakan di kode frontend.

Fitur Lengkap Galeri Foto Cloud (Open Source)

Setelah berhasil dipasang, web galeri foto cloud dengan Google Apps Script Anda akan memiliki fitur-fitur canggih berikut yang dapat Anda modifikasi sesuai kebutuhan:

• Upload Drag & Drop: Pengunjung bisa upload dengan mudah.
• Konversi Otomatis ke WebP: Menghemat bandwidth dan mempercepat loading.
• Dark Mode: Nyaman digunakan di malam hari.
• Grid / List View: Pengguna bisa memilih tampilan sesuai selera.
• Paginasi: 8 foto per halaman untuk performa optimal.
• Share ke Media Sosial: WhatsApp, Facebook, Twitter.
• Copy Link & HD View: Fleksibilitas membagikan foto.
• View Counter: Melihat popularitas foto.
• Fully Open Source: Seluruh kode dapat diubah dan didistribusikan ulang.

Kesimpulan

Dengan mengikuti panduan lengkap ini, Anda sekarang memiliki sistem galeri foto cloud dengan Google Apps Script yang berfungsi penuh dan bersifat open source. Solusi ini memanfaatkan infrastruktur gratis Google Drive dan Spreadsheet sebagai backend yang handal. Ke depannya, Anda dapat mengembangkan lebih lanjut, misalnya dengan menambahkan fitur komentar, like, album kategori, atau bahkan sistem login sederhana. Keahlian dalam memanfaatkan Google Apps Script adalah aset berharga untuk berbagai proyek web gratis lainnya. Selamat mencoba, berkreasilah, dan jangan ragu untuk membagikan hasil modifikasi Anda kepada komunitas.

Mulai Buat Galeri Anda Sekarang

Pertanyaan Umum (FAQ)

Apakah benar-benar gratis?

Ya, Google Apps Script, Google Drive, dan Spreadsheet memiliki kuota gratis yang sangat besar untuk penggunaan pribadi hingga skala kecil-menengah (hingga ribuan foto).

Bisakah saya mengganti judul dan gaya tampilan?

Tentu. Seluruh kode HTML/CSS dapat Anda ubah sesuai keinginan. Ini adalah proyek open source.

Apa yang terjadi jika kuota Google Drive penuh?

Anda tidak bisa upload foto baru. Solusinya adalah menghapus foto lama di folder Drive atau menggunakan akun Google lain.

Apakah pengunjung perlu login Google untuk upload?

Tidak. Saat deploy Web App, pilih opsi "Anyone" agar siapa pun bisa upload tanpa login.

Bisakah saya memasang ini di WordPress atau hosting sendiri?

Ya, kode frontend (HTML/JS) dapat dipasang di platform mana pun yang mendukung HTML dan JavaScript.

Tutorial Galeri Foto Cloud dengan Google Apps Script | Open Source | Dapat dimodifikasi dan didistribusikan ulang

Dibagikan untuk pembelajaran dan pengembangan komunitas.

Artikel Terkait

Panduan Lengkap Membuat Galeri Foto Cloud dengan Google Apps Script

4/ 5

Oleh admin ganteng

April 03, 2026 2 Komentar