Apps Script - Membuat Profil Perusahaan

 

https://script.google.com/macros/s/AKfycbxCJoz-FEQDRYC5gzfXtajjKyhKKzuiXL-RcRItCVkEZOlhorwf3ow3uB3KMwx6o7ll/exec?p=admin

https://docs.google.com/spreadsheets/d/11UxnXyVTVnsAiwrnVccvscrjfLIQlgwaOESUXlfMVjE/edit?gid=0#gid=0

https://script.google.com/u/0/home/projects/1LP1SMUNORKMr_fR9uJEy-tjz6ipldQFjVk3E0vlHAM437rBuX4wQXyBA/edit

Prompt: CMS Company Profile Liceria & Co.

Prompt ini merangkum seluruh spesifikasi aplikasi website Company Profile yang terintegrasi dengan Google Apps Script (GAS) sebagai CMS.

1. Identitas & Desain (Frontend)

• Nama Perusahaan: Liceria & Co.

• Tema Visual: Modern, minimalis, dan profesional.

• Palet Warna: Monokromatik (Hitam, Putih, Abu-abu).

• Tipografi: Google Fonts (Poppins untuk judul, Inter untuk teks konten).

• Framework: HTML5, Tailwind CSS (via CDN), Font Awesome untuk ikon.

• Komponen Utama:

  • Navbar: Sticky dengan efek backdrop blur dan logo di kiri.

  • Hero Section: Layout 2 kolom (Teks besar di kiri, gambar grayscale dengan hover effect di kanan).

  • About Section: Layout minimalis dengan separator garis horizontal.

  • Loading State: Overlay putih dengan spinner animasi sebelum data termuat.

2. Arsitektur Sistem (Backend & Integrasi)

• Teknologi: Google Apps Script (GAS).

• Arsitektur: MPA (Multi-Page Application) sederhana menggunakan parameter URL (?p=admin).

• Database: Google Sheets sebagai penyimpanan teks (Key-Value pair).

  • ID Spreadsheet: 11UxnXyVTVnsAiwrnVccvscrjfLIQlgwaOESUXlfMVjE

• Penyimpanan File: Google Drive untuk gambar/foto.

  • ID Folder: 1IbPAgfnuH7BIwgj1e8Poq1lWDOhObj4e

• Metode Komunikasi: Asynchronous menggunakan google.script.run dengan withSuccessHandler dan withFailureHandler.

3. Fitur Utama & Logika

• CMS Dinamis: Admin dapat mengubah judul hero, subtitle, teks "About Us", dan mengganti gambar melalui dashboard khusus.

• Fallback Mode: Kode memiliki logika deteksi lingkungan. Jika dijalankan di luar Google Apps Script (seperti pratinjau lokal), aplikasi akan menampilkan mock data agar UI tetap terlihat.

• Setup Otomatis: Fungsi setupDatabase() di sisi server untuk menyiapkan struktur kolom dan data awal pada Google Sheets secara otomatis.

• Image Direct Link: Konversi ID file Drive menjadi URL akses langsung (lh3.googleusercontent.com/d/ID) agar gambar bisa dirender langsung di tag <img>.

4. Struktur File

• Code.gs: Menangani routing doGet, komunikasi database, upload file ke Drive, dan penyediaan URL script.

• index.html: Halaman publik yang mengambil dan merender data secara dinamis.

• admin.html: Dashboard untuk input teks dan upload file ke Drive.

5. Instruksi Deployment

1. Jalankan fungsi setupDatabase di Apps Script.

2. Deploy sebagai Web App.

3. Set akses ke "Anyone".

4. Gunakan URL hasil deploy untuk mengakses website dan tambahkan ?p=admin untuk masuk ke CMS.