✅ PROMPT KONVERSI GOOGLE SPREADSHEET → WEB HTML
Salin prompt berikut:
🎯 PROMPT
Bertindaklah sebagai Senior Web Developer dan System Architect.
Saya memiliki data di Google Spreadsheet yang ingin saya konversi menjadi website HTML statis/dinamis dengan file utama index.html.
Buatkan solusi lengkap dengan spesifikasi berikut:
🧩 TUJUAN
Mengubah Google Spreadsheet menjadi Web App berbasis HTML dengan:
-
Frontend: index.html
-
Backend: Google Apps Script
-
Database: Google Spreadsheet
-
Output: Website modern, responsive, clean UI
⚙️ SPESIFIKASI TEKNIS
-
Gunakan Google Apps Script sebagai REST API
-
Gunakan method doGet(e) untuk mengambil data
-
Gunakan JSON sebagai format pertukaran data
-
Gunakan fetch() di index.html untuk mengambil data
-
Data ditampilkan dalam bentuk:
-
Gunakan CSS modern (Flexbox/Grid)
-
Responsive (mobile friendly)
-
Tambahkan loading state
-
Tambahkan error handling
📊 STRUKTUR DATA DI GOOGLE SHEET
Contoh kolom:
| ID | Nama | Email | No HP | Status |
Spreadsheet ID: (isi di sini)
Sheet Name: (isi di sini)
🏗️ OUTPUT YANG DIHARAPKAN
-
Kode lengkap Google Apps Script (Code.gs)
-
Kode lengkap index.html
-
Penjelasan alur kerja
-
Cara deploy sebagai Web App
-
Struktur MVC jika diperlukan
-
Versi SPA tanpa reload
✨ FITUR TAMBAHAN (OPSIONAL)
📌 OUTPUT HARUS:
-
Clean code
-
Production ready
-
Aman (tidak expose API key)
-
Siap deploy di Google Sites
-
Tidak menggunakan framework berat (opsional vanilla JS)
Tampilkan seluruh kode secara lengkap dan rapi.
Gunakan best practice pengembangan web modern.
Arsitektur
Google Spreadsheet → Google Apps Script (API) → index.html (Frontend SPA)
BackEnd
Code.gs
// ===============================
// CONFIGURATION
// ===============================
const SPREADSHEET_ID = "ISI_SPREADSHEET_ID_DISINI";
const SHEET_NAME = "ISI_NAMA_SHEET_DISINI";
// ===============================
// ENTRY POINT - GET
// ===============================
function doGet(e) {
try {
const data = getSheetData();
return ContentService
.createTextOutput(JSON.stringify({
status: "success",
data: data
}))
.setMimeType(ContentService.MimeType.JSON);
} catch (error) {
return ContentService
.createTextOutput(JSON.stringify({
status: "error",
message: error.toString()
}))
.setMimeType(ContentService.MimeType.JSON);
}
}
// ===============================
// READ DATA FROM SHEET
// ===============================
function getSheetData() {
const sheet = SpreadsheetApp
.openById(SPREADSHEET_ID)
.getSheetByName(SHEET_NAME);
const values = sheet.getDataRange().getValues();
const headers = values.shift();
const result = values.map(row => {
let obj = {};
headers.forEach((header, i) => {
obj[header] = row[i];
});
return obj;
});
return result;
}
FrondEnd
Index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Viewer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #f4f6f9;
}
.container {
max-width: 1200px;
margin: auto;
}
h1 {
text-align: center;
}
.table-container {
overflow-x: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
border-bottom: 1px solid #ddd;
text-align: left;
}
th {
background: #2c3e50;
color: white;
}
tr:hover {
background: #f1f1f1;
}
.loading, .error {
text-align: center;
padding: 20px;
}
@media(max-width:768px){
table {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Data Google Spreadsheet</h1>
<div id="loading" class="loading">Loading data...</div>
<div id="error" class="error" style="display:none;color:red;"></div>
<div class="table-container">
<table id="dataTable">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>
<script>
const API_URL = "YOUR_WEB_APP_URL";
document.addEventListener("DOMContentLoaded", loadData);
async function loadData() {
const loading = document.getElementById("loading");
const errorDiv = document.getElementById("error");
try {
const response = await fetch(API_URL);
const result = await response.json();
if (result.status !== "success") {
throw new Error(result.message);
}
renderTable(result.data);
loading.style.display = "none";
} catch (error) {
loading.style.display = "none";
errorDiv.style.display = "block";
errorDiv.innerText = "Terjadi kesalahan: " + error.message;
}
}
function renderTable(data) {
const thead = document.querySelector("#dataTable thead");
const tbody = document.querySelector("#dataTable tbody");
if (data.length === 0) {
tbody.innerHTML = "<tr><td colspan='5'>Tidak ada data</td></tr>";
return;
}
const headers = Object.keys(data[0]);
// Header
thead.innerHTML = "<tr>" + headers.map(h => `<th>${h}</th>`).join("") + "</tr>";
// Body
tbody.innerHTML = data.map(row => {
return "<tr>" + headers.map(h => `<td>${row[h]}</td>`).join("") + "</tr>";
}).join("");
}
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar