Tutorial Praktis
Tutorial Inventaris API Key
Bangun sistem pelacak stok & inventaris publik menggunakan GCP API Key.
Pelajari cara menghubungkan nuxt-gsheet dengan Google Sheets API v4 standar menggunakan GCP API Key.
1. Setup Google Cloud Console
- Buka Google Cloud Console.
- Buat proyek baru -> Aktifkan Google Sheets API.
- Buka Credentials -> + Create Credentials -> API Key.
- Konfigurasikan file
.env:
.env
GSHEET_SPREADSHEET_ID=1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms
GSHEET_API_KEY=AIzaSyD-GOOGLE-API-KEY-KAMU
2. Implementasi Komponen Vue
pages/inventory.vue
<script setup lang="ts">
interface InventoryItem {
sku: string
name: string
stock: string
location: string
}
const { data: stockItems, pending, error } = await useGSheetAsObject<InventoryItem[]>('A1:D50', {
sheet: 'inventory'
})
</script>
<template>
<div class="inventory-container">
<h1>Pelacak Inventaris Gudang</h1>
<div v-if="error">
API Key Error: {{ error.message }}
</div>
<div v-else-if="pending">
Menghubungkan ke Google Sheets API v4...
</div>
<div v-else>
<div
v-for="item in stockItems"
:key="item.sku"
class="stock-card"
>
<h3>{{ item.name }} (SKU: {{ item.sku }})</h3>
<p>Stok Saat Ini: <strong>{{ item.stock }}</strong></p>
<span>Lokasi Rak: {{ item.location }}</span>
</div>
</div>
</div>
</template>