Tutorial Praktis
Tutorial Langkah demi Langkah Lengkap
Tutorial end-to-end mencakup Apps Script, GCP Console, dan Admin Portal Nuxt.
Tutorial langkah demi langkah tentang cara mengatur Google Sheets, me-deploy Apps Script, mengonfigurasi kredensial GCP, dan membangun Portal Direktori Siswa & Manajemen Admin full-stack dengan Nuxt 3/4.
Langkah 1: Buat Google Sheet & Apps Script
- Buka Google Sheets -> Buat spreadsheet baru Portal Siswa -> Tab sheet
students. - Buat header di baris 1:
id,name,email,grade. - Buka Extensions -> Apps Script -> Tempelkan skrip backend berikut:
Code.gs
function doGet(e) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(e.parameter.sheet || 'students');
const values = sheet.getRange(e.parameter.range || 'A1:Z100').getValues();
return ContentService.createTextOutput(JSON.stringify(values)).setMimeType(ContentService.MimeType.JSON);
}
function doPost(e) {
const data = JSON.parse(e.postData.contents);
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(data.sheet || 'students');
if (data.values) data.values.forEach(r => sheet.appendRow(r));
return ContentService.createTextOutput(JSON.stringify({ success: true })).setMimeType(ContentService.MimeType.JSON);
}
- Klik Deploy -> New Deployment -> Web App (Execute as: Me, Access: Anyone).
- Salin URL ke
.env:
.env
GSHEET_APPSCRIPT_URL=https://script.google.com/macros/s/.../exec
ADMIN_PASSWORD=passwordrahasia
Langkah 2: Bangun Halaman Aplikasi Nuxt
Direktori Publik (pages/index.vue)
pages/index.vue
<script setup lang="ts">
interface Student { id: string; name: string; email: string; grade: string }
const { data: students, pending } = await useGSheetAsObject<Student[]>('A1:D50', { sheet: 'students' })
</script>
<template>
<div>
<h1>Direktori Siswa</h1>
<div v-if="pending">Memuat data...</div>
<ul v-else>
<li v-for="student in students" :key="student.id">
{{ student.name }} ({{ student.grade }}) - {{ student.email }}
</li>
</ul>
</div>
</template>
Portal Admin (pages/admin.vue)
pages/admin.vue
<script setup lang="ts">
const isAuthenticated = ref(false)
const password = ref('')
const name = ref('')
const email = ref('')
const { append } = useGSheetWrite({ sheet: 'students' })
const addStudent = async () => {
await append('A1:D1', [[String(Date.now()).slice(-4), name.value, email.value, 'Kelas 10']])
alert('Siswa berhasil ditambahkan ke Google Sheet!')
}
</script>
<template>
<div>
<form v-if="!isAuthenticated" @submit.prevent="isAuthenticated = true">
<input v-model="password" type="password" placeholder="Password Admin" required>
<button type="submit">Login</button>
</form>
<form v-else @submit.prevent="addStudent">
<input v-model="name" placeholder="Nama Siswa" required>
<input v-model="email" type="email" placeholder="Email" required>
<button type="submit">Tambah Siswa</button>
</form>
</div>
</template>