Cara Membuat Aplikasi Kasir Toko Berbasis Google Apps Script untuk Pemula – Membuat aplikasi kasir tidak selalu membutuhkan software berbayar atau kemampuan pemrograman tingkat lanjut. Dengan memanfaatkan Google Sheets dan Google Apps Script, kita dapat membuat aplikasi kasir sederhana yang bisa digunakan untuk mencatat barang, transaksi penjualan, menghitung total belanja, hingga membuat laporan.
Menariknya, aplikasi kasir berbasis Google Apps Script dapat dijalankan melalui browser sehingga tidak harus memasang aplikasi khusus di komputer.
Pada artikel ini, kita akan membahas konsep dan langkah pembuatan aplikasi kasir toko berbasis Apps Script dari awal dengan bahasa yang mudah dipahami.
Apa Itu Aplikasi Kasir Berbasis Apps Script?
Aplikasi kasir adalah sistem yang digunakan untuk membantu proses transaksi penjualan. Dalam bentuk sederhana, sistem kasir dapat melakukan beberapa pekerjaan seperti:
- Menampilkan daftar barang.
- Mencari barang berdasarkan kode atau nama.
- Menambahkan barang ke keranjang.
- Menghitung jumlah dan harga.
- Menghitung subtotal.
- Menghitung total pembayaran.
- Menghitung uang kembalian.
- Menyimpan transaksi.
- Mengurangi stok barang.
- Membuat laporan penjualan.
Sementara itu, Google Apps Script adalah platform pemrograman dari Google yang dapat digunakan untuk mengotomatisasi dan mengembangkan berbagai layanan Google Workspace, termasuk Google Sheets.
Dengan menggabungkan Google Sheets sebagai database dan Apps Script sebagai program, kita bisa membuat aplikasi kasir sederhana.
Baca juga: Cara Belajar AI untuk OSN: Panduan Lengkap dari Nol Sampai Siap Bertanding di Olimpiade
Mengapa Menggunakan Google Sheets dan Apps Script?
Untuk pemula, kombinasi Google Sheets dan Apps Script cukup menarik karena tidak perlu langsung mempelajari database yang rumit.
Contohnya:
Google Sheets → tempat menyimpan data
Apps Script → otak aplikasi
HTML + CSS + JavaScript → tampilan aplikasi
Secara sederhana arsitekturnya dapat digambarkan seperti ini:
APLIKASI KASIR
│
▼
HTML + CSS + JavaScript
│
▼
GOOGLE APPS SCRIPT
│
┌─────────┴─────────┐
▼ ▼
GOOGLE SHEETS FUNGSI PROGRAM
sebagai database transaksi & laporan
│
┌──────┼────────┐
▼ ▼ ▼
Barang Transaksi Detail
Dengan struktur tersebut, pengguna cukup membuka aplikasi melalui browser.
Fitur yang Bisa Dibuat
Sebelum mulai membuat program, sebaiknya tentukan terlebih dahulu fitur yang diperlukan.
Untuk aplikasi kasir toko sederhana, kita dapat membuat menu:
1. Dashboard
Menampilkan informasi seperti:
- Total transaksi hari ini.
- Total penjualan hari ini.
- Jumlah barang.
- Stok menipis.
2. Data Barang
Digunakan untuk mengelola:
- Kode barang.
- Nama barang.
- Kategori.
- Harga beli.
- Harga jual.
- Stok.
- Satuan.
3. Transaksi Kasir
Digunakan untuk:
- Memilih barang.
- Memasukkan jumlah.
- Menambahkan ke keranjang.
- Menghapus barang.
- Mengubah jumlah.
- Menghitung total.
4. Pembayaran
Kasir memasukkan jumlah uang yang diberikan pelanggan.
Contoh:
Total : Rp75.000
Bayar : Rp100.000
Kembalian : Rp25.0005. Riwayat Transaksi
Menampilkan transaksi yang sudah dilakukan.
6. Laporan
Misalnya:
Laporan Penjualan
Tanggal: 17 September 2026
Total Transaksi : 25
Total Penjualan : Rp2.750.000Langkah 1 — Membuat Google Spreadsheet
Pertama, buat sebuah Google Spreadsheet baru.
Misalnya beri nama:
DATABASE KASIR TOKO
Kemudian buat beberapa sheet.
Contohnya:
BARANG
TRANSAKSI
DETAIL_TRANSAKSI
PENGGUNAStruktur tersebut sebenarnya masih dapat dikembangkan sesuai kebutuhan.
Langkah 2 — Membuat Sheet BARANG
Sheet BARANG digunakan untuk menyimpan seluruh data produk.
Buat kolom:
| ID | Kode Barang | Nama Barang | Kategori | Harga Beli | Harga Jual | Stok | Satuan |
|---|---|---|---|---|---|---|---|
| 1 | BRG001 | Beras 5 Kg | Sembako | 65000 | 75000 | 20 | Sak |
| 2 | BRG002 | Minyak 1 L | Sembako | 15000 | 18000 | 30 | Botol |
| 3 | BRG003 | Gula 1 Kg | Sembako | 15000 | 17000 | 25 | Kg |
Kolom Kode Barang sebaiknya dibuat unik.
Misalnya:
BRG001
BRG002
BRG003Kode inilah yang nantinya digunakan aplikasi untuk menemukan barang.
Langkah 3 — Membuat Sheet TRANSAKSI
Sheet ini menyimpan informasi utama setiap transaksi.
Contohnya:
| ID Transaksi | Tanggal | Jam | Kasir | Total | Bayar | Kembalian |
|---|---|---|---|---|---|---|
| TRX001 | 17/09/2026 | 16:20 | Admin | 75000 | 100000 | 25000 |
Satu baris mewakili satu transaksi.
Langkah 4 — Membuat Sheet DETAIL_TRANSAKSI
Sheet ini digunakan untuk menyimpan barang apa saja yang dibeli dalam suatu transaksi.
Contoh:
| ID Detail | ID Transaksi | Kode Barang | Nama Barang | Harga | Jumlah | Subtotal |
|---|---|---|---|---|---|---|
| 1 | TRX001 | BRG001 | Beras 5 Kg | 75000 | 1 | 75000 |
Mengapa transaksi dan detail transaksi dipisahkan?
Karena satu transaksi dapat memiliki banyak barang.
Contohnya:
TRX001
├── Beras
├── Minyak
├── Gula
└── TehDengan memisahkan tabel transaksi dan detail transaksi, struktur database menjadi lebih rapi.
Langkah 5 — Membuka Apps Script
Dari Google Spreadsheet:
Extensions → Apps Script
Kemudian akan muncul editor Apps Script.
Hapus kode awal jika diperlukan.
Kita dapat membuat struktur program seperti:
Code.gs
index.html
style.html
script.htmlUntuk aplikasi yang masih sederhana, sebenarnya cukup menggunakan:
Code.gs
index.htmlNamun ketika aplikasi semakin besar, sebaiknya kode dipisahkan agar lebih mudah dirawat.
Langkah 6 — Membuat Fungsi doGet()
File Code.gs menjadi penghubung antara halaman aplikasi dengan Google Sheets.
Contoh konsep dasarnya:
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setTitle('Aplikasi Kasir Toko');
}Fungsi tersebut digunakan untuk menampilkan halaman HTML ketika Web App dibuka.
Langkah 7 — Membuat Tampilan Kasir
Selanjutnya kita membuat file:
index.htmlTampilan sederhananya dapat dibuat seperti:
+------------------------------------------------+
| APLIKASI KASIR TOKO |
+------------------------------------------------+
| Cari Barang : [________________] [Cari] |
+------------------------------------------------+
| Kode | Nama Barang | Harga | Stok | Tambah |
|------|-------------|-------|------|------------|
| 001 | Beras 5 Kg |75000 | 20 | [+] |
| 002 | Minyak 1 L |18000 | 30 | [+] |
+------------------------------------------------+
KERANJANG BELANJA
Beras 5 Kg 1 x Rp75.000 = Rp75.000
Minyak 1 L 2 x Rp18.000 = Rp36.000
-----------------------------------------------
TOTAL Rp111.000
Bayar : [Rp120.000]
Kembalian Rp9.000
[ PROSES PEMBAYARAN ]Tampilan tersebut merupakan bagian frontend aplikasi.
Langkah 8 — Mengambil Data Barang dari Google Sheets
Apps Script dapat membaca data dari Google Sheets.
Contoh konsepnya:
function getBarang() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName('BARANG');
const data = sheet.getDataRange().getValues();
return data;
}Kemudian JavaScript pada halaman HTML dapat meminta data tersebut melalui:
google.script.run
.withSuccessHandler(function(data) {
console.log(data);
})
.getBarang();Alurnya:
HTML
│
│ meminta data
▼
Apps Script
│
│ membaca
▼
Google Sheets
│
│ mengembalikan data
▼
HTMLLangkah 9 — Membuat Keranjang Belanja
Ketika kasir memilih barang, barang tersebut dimasukkan ke keranjang.
Misalnya pelanggan membeli:
Beras 5 Kg
Minyak 1 L
Gula 1 KgKeranjang akan menjadi:
| Barang | Harga | Jumlah | Subtotal |
|---|---|---|---|
| Beras 5 Kg | 75.000 | 1 | 75.000 |
| Minyak 1 L | 18.000 | 2 | 36.000 |
| Gula 1 Kg | 17.000 | 1 | 17.000 |
| Total | 128.000 |
Perhitungan sederhananya:
Subtotal = Harga × JumlahSedangkan:
Total = Subtotal Barang 1
+ Subtotal Barang 2
+ Subtotal Barang 3Langkah 10 — Membuat Perhitungan Pembayaran
Misalnya total belanja:
Rp128.000Pelanggan memberikan:
Rp150.000Maka:
Kembalian = Bayar - Total
Kembalian = 150.000 - 128.000
Kembalian = 22.000Aplikasi dapat menampilkan:
TOTAL : Rp128.000
PEMBAYARAN : Rp150.000
KEMBALIAN : Rp22.000Jika uang yang diberikan kurang:
Total : Rp128.000
Bayar : Rp100.000maka aplikasi sebaiknya memberikan peringatan:
Uang pembayaran belum mencukupi.Langkah 11 — Menyimpan Transaksi
Setelah tombol Bayar ditekan, aplikasi melakukan beberapa proses.
Pertama:
Membuat ID transaksiMisalnya:
TRX-20260917-001Kemudian menyimpan data utama ke sheet TRANSAKSI.
Contohnya:
TRX-20260917-001
17/09/2026
16:30
Admin
128000
150000
22000Setelah itu aplikasi menyimpan setiap barang ke DETAIL_TRANSAKSI.
Langkah 12 — Mengurangi Stok Barang
Ini merupakan salah satu fungsi penting dalam aplikasi kasir.
Misalnya stok awal:
Beras = 20Kemudian pelanggan membeli:
2Maka stok baru:
20 - 2 = 18Aplikasi harus melakukan proses tersebut setelah transaksi berhasil.
Alurnya:
Transaksi berhasil
↓
Simpan transaksi
↓
Simpan detail transaksi
↓
Kurangi stok
↓
Tampilkan transaksi berhasilLangkah 13 — Membuat Nomor Transaksi Otomatis
Aplikasi kasir sebaiknya tidak menggunakan nomor transaksi yang diketik manual.
Contohnya:
TRX-20260917-001
TRX-20260917-002
TRX-20260917-003Format dapat disesuaikan.
Tujuannya agar setiap transaksi mempunyai identitas yang berbeda.
Langkah 14 — Membuat Dashboard
Setelah sistem transaksi selesai, kita dapat membuat dashboard.
Misalnya:
========================================
DASHBOARD KASIR
========================================
TRANSAKSI HARI INI
25
PENJUALAN HARI INI
Rp2.750.000
JUMLAH BARANG
425
STOK MENIPIS
8
========================================Dashboard dapat mengambil data dari Google Sheets menggunakan Apps Script.
Langkah 15 — Membuat Laporan Penjualan
Aplikasi dapat menyediakan menu:
Laporan Penjualan
Contohnya:
| Tanggal | Transaksi | Kasir | Total |
|---|---|---|---|
| 17/09/2026 | TRX001 | Admin | Rp75.000 |
| 17/09/2026 | TRX002 | Admin | Rp125.000 |
| 17/09/2026 | TRX003 | Budi | Rp85.000 |
Kemudian dapat dibuat filter:
Tanggal Awal : 01/09/2026
Tanggal Akhir: 17/09/2026
[ TAMPILKAN ]Sehingga pemilik toko dapat melihat penjualan berdasarkan periode tertentu.
Struktur Menu Aplikasi
Jika aplikasi dikembangkan lebih lanjut, struktur menunya dapat dibuat seperti berikut:
APLIKASI KASIR TOKO
│
├── Dashboard
│
├── Master Data
│ ├── Data Barang
│ ├── Kategori
│ └── Satuan
│
├── Transaksi
│ └── Kasir
│
├── Riwayat Transaksi
│
├── Laporan
│ ├── Penjualan Harian
│ ├── Penjualan Bulanan
│ └── Laporan Stok
│
└── Pengaturan
├── Pengguna
└── TokoKelebihan Aplikasi Kasir Apps Script
Ada beberapa keuntungan menggunakan metode ini.
Gratis untuk belajar
Google Sheets dan Apps Script dapat menjadi pilihan untuk membuat prototype atau aplikasi sederhana tanpa harus langsung menyewa server.
Berbasis web
Aplikasi dapat diakses melalui browser.
Database mudah dipahami
Bagi pemula, Google Sheets relatif mudah digunakan sebagai tempat penyimpanan data.
Mudah dikembangkan
Aplikasi dapat ditambahkan fitur seperti:
- Cetak struk.
- Barcode scanner.
- Login pengguna.
- Hak akses admin dan kasir.
- Laporan penjualan.
- Manajemen stok.
- Notifikasi.
- Backup data.
- Dashboard grafik.
Kekurangan yang Perlu Diperhatikan
Walaupun menarik untuk proyek kecil, Apps Script bukan berarti cocok untuk semua jenis toko.
Google Sheets sebagai database memiliki keterbatasan jika jumlah data dan pengguna sudah sangat besar.
Misalnya sebuah toko memiliki:
1–3 penggunadan transaksi masih relatif sedikit, sistem sederhana masih cukup masuk akal untuk dijadikan proyek.
Tetapi jika digunakan untuk jaringan toko dengan banyak kasir dan transaksi yang sangat besar, sebaiknya mempertimbangkan database yang memang dirancang untuk aplikasi produksi.
Tips Agar Aplikasi Kasir Tidak Mudah Bermasalah
Ada beberapa hal yang sebaiknya diperhatikan sejak awal.
1. Gunakan ID unik
Jangan menjadikan nomor baris Google Sheets sebagai ID utama.
Lebih baik menggunakan ID seperti:
BRG-00001
TRX-20260917-0012. Pisahkan data
Jangan menyimpan semua informasi dalam satu sheet.
Minimal pisahkan:
BARANG
TRANSAKSI
DETAIL_TRANSAKSI
PENGGUNA3. Validasi stok
Sebelum transaksi disimpan, sistem harus mengecek:
Stok tersedia?
│
┌───┴───┐
Ya Tidak
│ │
Lanjut Tolak4. Validasi pembayaran
Jangan izinkan transaksi selesai jika:
Bayar < Total5. Buat pencatatan error
Untuk aplikasi yang mulai besar, sebaiknya tersedia sistem log sehingga administrator dapat mengetahui jika terjadi kesalahan.
Alur Lengkap Aplikasi Kasir
Secara keseluruhan, alurnya dapat dibuat seperti berikut:
MULAI
│
▼
Buka Aplikasi
│
▼
Login Kasir
│
▼
Tampilkan Halaman
Kasir
│
▼
Cari/Pilih Barang
│
▼
Masukkan Jumlah
│
▼
Tambahkan Keranjang
│
▼
Hitung Subtotal
│
▼
Hitung Total
│
▼
Masukkan Pembayaran
│
▼
Bayar >= Total?
/ \
Tidak Ya
│ │
▼ ▼
Peringatan Simpan
Transaksi
│
▼
Kurangi
Stok
│
▼
Hitung Kembalian
│
▼
Cetak/Tampilkan
Struk
│
▼
SELESAI
Pengembangan Lebih Lanjut
Setelah aplikasi kasir dasar berhasil dibuat, sistem dapat dikembangkan menjadi aplikasi yang lebih lengkap.
Contohnya:
Level 1
Data Barang
Transaksi
Stok
LaporanLevel 2
Login
Hak Akses
Cetak Struk
Dashboard
Laporan PeriodeLevel 3
Barcode
Manajemen Supplier
Pembelian Barang
Retur
Laba/Rugi
Notifikasi
BackupDengan demikian, Google Apps Script tidak hanya dapat digunakan untuk membuat form sederhana, tetapi juga dapat menjadi dasar untuk membuat aplikasi kasir toko berbasis web.
Kode GS dan Kode HTML Aplikasi Kasir Toko
Untuk membuat sebuah program aplikasi kasir toko sederhana, silakan gunakan (download) kode di bawah ini, dan Anda tinggal Deploy saja:
Kesimpulan
Membuat aplikasi kasir toko menggunakan Google Apps Script dapat menjadi proyek yang menarik bagi pemula yang ingin belajar membuat aplikasi berbasis web.
Kombinasi Google Sheets sebagai database, Apps Script sebagai backend, serta HTML, CSS, dan JavaScript sebagai frontend sudah cukup untuk membuat aplikasi kasir sederhana.
Kunci utamanya bukan langsung membuat program yang sangat kompleks, tetapi membangun sistem secara bertahap:
Data Barang → Keranjang → Transaksi → Pembayaran → Stok → Laporan.
Setelah alur dasar berhasil, fitur lain seperti login, barcode, cetak struk, dashboard, dan laporan dapat ditambahkan secara bertahap.