Delphi Guru

⭐ Belajar React #5 — Handling Events & Controlled Components

2025-12-11T09:38:00.004+07:00

Setelah mempelajari state, conditional rendering, dan list rendering, sekarang kita masuk ke bagian penting lain dari React:

Bagaimana cara menangani event (klik, input, submit) dan bagaimana mengontrol data dalam form melalui konsep Controlled Components.

Dua konsep ini adalah fondasi untuk membuat form, search bar, login form, dan hampir semua interaksi user.

🎯 Apa yang Akan Kamu Pelajari?

Cara menangani event di React
Perbedaan event handler React vs JavaScript biasa
Apa itu Controlled Component
Cara membuat input yang selalu sinkron dengan state
Form handling lengkap (input, textarea, select)
Contoh aplikasi: Form Login sederhana

🟦 1. Handling Events di React

React menggunakan event handler yang mirip seperti JavaScript, tetapi ada beberapa perbedaan:

✔ Penamaan event menggunakan camelCase

HTML biasa:


<button onclick="handleClick()">Klik</button>

React:


<button onClick={handleClick}>Klik</button>

✔ Event handler ditulis sebagai fungsi JavaScript, bukan string

HTML:


<button onclick="alert('hi')">Klik</button>

React:


<button onClick={() => alert("hi")}>Klik</button>

🔹 Contoh Event Handler


function ButtonExample() {
  function handleClick() {
    alert("Tombol ditekan!");
  }

  return <button onClick={handleClick}>Klik Saya</button>;
}

Atau versi arrow function:


<button onClick={() => alert("Klik")} />

🟦 2. Apa Itu Controlled Component?

Controlled Component adalah elemen form (input, textarea, select) yang nilai-nya dikontrol oleh state React.

Artinya:

User mengetik → React menangkap input → React memperbarui state → state mengubah UI

Alurnya menjadi:

UI → Event → State → UI

Inilah yang membuat React UI selalu konsisten dengan data aplikasi.

🔹 Contoh Controlled Input


import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Masukkan nama"
      />
      <p>Halo, {name}</p>
    </div>
  );
}

Di sini:

value={name} → UI dikontrol oleh state
onChange → mengubah state setiap kali user mengetik

🟦 3. Controlled Textarea


<textarea
  value={message}
  onChange={(e) => setMessage(e.target.value)}
/>

Pada React, textarea diperlakukan sama dengan input. Tidak lagi menggunakan innerText seperti HTML biasa.

🟦 4. Controlled Select (Dropdown)


<select value={selected} onChange={(e) => setSelected(e.target.value)}>
  <option value="">Pilih warna</option>
  <option value="red">Merah</option>
  <option value="blue">Biru</option>
</select>

🟩 Contoh Aplikasi: Form Login Sederhana


import { useState } from "react";

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function handleSubmit(e) {
    e.preventDefault(); // Mencegah reload halaman
    alert(`Email: ${email}\nPassword: ${password}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>Login</h2>

      <div>
        <label>Email</label>
        <input 
          type="email" 
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Masukkan email"
        />
      </div>

      <div>
        <label>Password</label>
        <input 
          type="password" 
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Masukkan password"
        />
      </div>

      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

Konsep controlled components sudah lengkap:

Setiap input dikontrol oleh state
Event onChange memperbarui nilai
Event onSubmit memproses form

Pada artikel ini kamu belajar:

✔ Cara menangani event di React
✔ Perbedaan event handler React vs HTML biasa
✔ Konsep Controlled Components
✔ Input, textarea, select dengan state
✔ Cara membuat form login sederhana

Konsep ini adalah pondasi dari semua form dan interaksi user di React.

⭐ Belajar React #4 — Conditional Rendering & List Rendering

2025-12-11T09:19:00.002+07:00

Pada artikel sebelumnya, kita sudah membahas tentang State dan bagaimana ia mengubah tampilan UI secara dinamis. Sekarang saatnya mempelajari dua konsep penting dalam React yang akan sangat sering digunakan di proyek nyata:

Conditional Rendering dan List Rendering.

Keduanya sangat erat kaitannya dengan bagaimana React menampilkan UI secara dinamis bergantung pada data atau kondisi tertentu.

🎯 Apa yang Akan Kita Pelajari?

Apa itu Conditional Rendering
Cara membuat kondisi dengan if, &&, dan ternary ?:
Apa itu List Rendering
Menggunakan .map() untuk merender daftar
Menangani key agar tidak muncul error
Contoh praktik: To-Do list sederhana

🟦 1. Apa Itu Conditional Rendering?

Conditional Rendering adalah teknik untuk menampilkan komponen/tampilan berdasarkan kondisi tertentu.

Analogi sederhana:

Jika user sudah login → tampilkan Dashboard
Jika belum login → tampilkan tombol Login

React tidak memiliki sintaks khusus untuk ini, cukup menggunakan ekspresi JavaScript biasa.

🔹 Metode Conditional Rendering

1. IF Statement

Biasanya digunakan untuk logika yang panjang.


function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Selamat datang kembali!</h1>;
  }
  return <h1>Silakan login</h1>;
}

2. Operator AND ( `&&` )

Digunakan untuk kondisi sederhana.


{isLoading && <p>Loading...</p>}

Jika isLoading = true → teks muncul.
Jika false → tidak muncul apa-apa.

3. Ternary Operator `condition ? a : b`

Paling sering dipakai, rapi, dan singkat.


{isLoggedIn ? <Dashboard /> : <LoginPage />}

🟦 2. Apa Itu List Rendering?

List Rendering adalah proses menampilkan banyak elemen berdasarkan sebuah array.
Caranya adalah menggunakan fungsi bawaan JavaScript:

`.map()`


const fruits = ["Apple", "Banana", "Orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li>{fruit}</li>
      ))}
    </ul>
  );
}

🔸 Penting! Setiap elemen list harus punya key

React butuh key untuk:

Mengidentifikasi elemen yang berubah
Meningkatkan performa rendering

Contoh yang benar:


{fruits.map((fruit, index) => (
  <li key={index}>{fruit}</li>
))}

Namun hindari penggunaan index sebagai key jika datanya bisa berubah posisi, tambah, hapus, dsb.
Lebih baik gunakan id unik:


const todos = [
  { id: 1, text: "Belajar React" },
  { id: 2, text: "Membaca dokumentasi" },
];

🟩 Contoh Praktik: To-Do List Sederhana


import { useState } from "react";

function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Belajar React" },
    { id: 2, text: "Ngopi dulu" },
  ]);

  const [input, setInput] = useState("");

  const addTodo = () => {
    setTodos([...todos, { id: Date.now(), text: input }]);
    setInput("");
  };

  return (
    <div>
      <h2>To-Do List</h2>

      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Tambah tugas..."
      />
      <button onClick={addTodo}>Tambah</button>

      <ul>
        {todos.length === 0 ? (
          <p>Tidak ada tugas</p>
        ) : (
          todos.map((todo) => <li key={todo.id}>{todo.text}</li>)
        )}
      </ul>
    </div>
  );
}

export default TodoApp;

Di contoh ini kita sudah menggunakan:
✔ State
✔ List Rendering
✔ Conditional Rendering
✔ Input handling

Pada artikel ini kamu telah mempelajari:

Cara menampilkan elemen berdasarkan kondisi
Cara merender list menggunakan .map()
Pentingnya penggunaan key
Aplikasi sederhana yang menggabungkan semua konsep

Dengan menguasai dua konsep ini, kamu sudah selangkah lebih dekat untuk membangun aplikasi React yang lebih kompleks. Pada artikel berikutnya kita akan belajar Handling Events & Controlled Components

Belajar React #3 — Memahami State & Event Handling (React Mulai Hidup!)

2025-12-10T13:21:00.005+07:00

Pada artikel sebelumnya saya sudah belajar membuat project React, memahami JSX, component, dan props. Pada tahap itu, UI masih bersifat statis.

Mulai artikel ini, React akan terasa semakin menarik karena saya mulai belajar bagian penting yang membuat UI menjadi dinamis: State & Event Handling.

1. Apa Itu State dalam React?

State adalah data internal yang disimpan oleh sebuah component. Berbeda dengan props yang dikirim dari luar, state dikelola di dalam component dan dapat berubah seiring interaksi.

Ketika state berubah → React otomatis me-render ulang tampilan terkait.

React menyediakan hook bernama useState untuk membuat state.

Contoh dasar:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default Counter;

Penjelasan singkat:

count → nilai state
setCount → fungsi untuk mengubah state
useState(0) → nilai awal state adalah 0

Ketika tombol diklik, angka akan bertambah.

2. Event Handling: Membuat UI Bereaksi

Event handling adalah cara React merespons aksi pengguna: klik, input, hover, submit, dll.

React menggunakan sintaks seperti HTML tetapi dengan gaya JavaScript:

onClick
onChange
onSubmit

Contoh sederhana:

<button onClick={handleClick}>Klik Saya</button>

Event handler adalah fungsi JavaScript biasa.

3. Studi Kasus Praktikal: Membuat Counter Interaktif

Mari praktik membuat component "Counter" untuk memahami konsep dengan jelas.

Langkah 1 — Buat file component

src/components/Counter.jsx

Isi file

import { useState } from "react";

function Counter() {
    const [value, setValue] = useState(0);

    function increment() {
        setValue(value + 1);
    }

    function decrement() {
        setValue(value - 1);
    }

    return (
        <div>
            <h2>Counter</h2>
            <p>Nilai: {value}</p>
            <button onClick={decrement}>-</button>
            <button onClick={increment}>+</button>
        </div>
    );
}

export default Counter;

Langkah 2 — Panggil di App.jsx

import Counter from "./components/Counter";


function App() {
  return (
    <div>
      <h1>Belajar State & Event Handling</h1>
      <Counter />
    </div>
  );
}


export default App;

Coba klik tombolnya — angka akan berubah.

4. Studi Kasus Tambahan: Input Form Sederhana

State juga digunakan untuk menangani form.

Buat file:

src/components/FormName.jsx

Isi file:

import { useState } from "react";

function FormName() {
    const [name, setName] = useState("");


    return (
        <div>
            <h2>Form Nama</h2>
            <input
            type="text"
            placeholder="Masukkan nama..."
            value={name}
            onChange={(e) => setName(e.target.value)}
            />


            <p>Halo, {name || "..."}</p>
        </div>
    );
}


export default FormName;

Penjelasan:

value={name} menjadikan input sebagai controlled component
onChange mengubah state berdasarkan input pengguna

Kemudian dipanggil di App.jsx seperti ini :

import FormName from "./components/FormName";


function App() {
  return (
    <div>
      <h1>Belajar State & Event Handling</h1>
      <FormName />
    </div>
  );
}


export default App;

Hasilnya seperti ini

5. Kesalahan yang Sering Saya Temui

❌ State tidak berubah padahal memanggil setState

Biasanya karena:

menggunakan variabel state lama tanpa memanggil fungsi updater
salah penempatan hook (useState harus di level teratas function)

❌ Event tidak berjalan

Biasanya karena:

lupa menulis onClick={}
salah penulisan nama event (harus camelCase)

❌ Error: Invalid hook call

Terjadi jika:

memanggil useState bukan di dalam component
menggunakan React versi ganda

6. Hasil Belajar Hari Ini

Di artikel ini saya sudah mempraktikkan:

Apa itu state dan kenapa penting
Cara menggunakan useState
Event handling (onClick, onChange)
Membuat Counter interaktif
Membuat input form dinamis

UI React sekarang tidak hanya tampil, tapi bereaksi terhadap tindakan pengguna.

Artikel Selanjutnya

Belajar React #4 — Conditional Rendering & List Rendering

Di artikel berikutnya saya akan belajar bagaimana menampilkan daftar data, memetakan array dengan .map(), dan menampilkan UI secara kondisional.

Sampai jumpa di artikel selanjutnya! 🚀

Belajar React #2 — Instalasi React + Dasar JSX, Component, dan Props (Praktikal)

2025-12-10T11:15:00.007+07:00

Pada artikel ini saya langsung memadukan dua hal penting dalam belajar React:

Setup project React menggunakan Vite
Belajar konsep fundamental React: JSX, Component, dan Props

Tujuannya sederhana: belajar konsep sambil langsung praktik.

1. Instalasi React Menggunakan Vite

Vite adalah tool modern dan sangat cepat untuk membuat project React. Langkah-langkahnya:

1) Persiapan Awal

Pastikan Node.js sudah terinstal. Periksa dengan perintah:

node -v

Pastikan versi Node 20.19.x atau lebih baru. Jika belum ada atau masih versi lama silakan download Node.js terbaru (LTS) di website resmi: https://nodejs.org Atau pilih versi:

Node 20.19.x atau lebih baru
Atau Node 22.x

2) Membuat Project Baru

Jalankan perintah berikut di terminal:

npm create vite@latest react-belajar --template react

3) Masuk ke folder project & install dependencies

cd react-belajar
npm install

4) Jalankan project

npm run dev

Jika berhasil, Anda akan melihat halaman React default di browser.

2. Memahami JSX (Dengan Contoh Langsung)

JSX adalah cara menulis HTML di dalam JavaScript. React menggunakan JSX untuk membuat UI yang dinamis.

Contoh dasar komponen React menggunakan JSX:

function Hello() {
  return (
    <h1>Hello React!</h1>
  );
}

export default Hello;

JSX memungkinkan kita mengembalikan struktur UI seperti HTML, tapi dengan kekuatan JavaScript.

3. Membuat Component Pertama Kita

Di React, component adalah potongan UI yang dapat digunakan kembali.

Buat file baru:

src/components/Greeting.jsx

Isi file:

function Greeting() {
  return <p>Selamat datang di perjalanan belajar React saya!</p>;
}

export default Greeting;

Lalu tampilkan di App.jsx:

import Greeting from "./components/Greeting";

function App() {
  return (
    <div>
      <h1>Belajar React</h1>
      <Greeting />
    </div>
  );
}

export default App;

Jika muncul teksnya, berarti komponen pertama Anda berhasil tampil.

4. Mengenal Props (Data yang Dikirim ke Component)

Props adalah cara mengirim data dari satu component ke component lainnya.

Buat component baru:

src/components/UserCard.jsx

Isi file:

function UserCard(props) {
  return (
    <div>
      <h3>Nama: {props.name}</h3>
      <p>Umur: {props.age}</p>
    </div>
  );
}

export default UserCard;

Panggil component ini dengan mengirim props:

import UserCard from "./components/UserCard";

function App() {
  return (
    <div>
      <h1>Contoh Props</h1>
      <UserCard name="Bagus Prasojo" age={28} />
    </div>
  );
}

export default App;

Props membuat UI Anda dinamis dan fleksibel.

5. Kesalahan Umum Pemula (Yang Saya Alami Juga)

Beberapa error yang mungkin muncul:

❌ "Unexpected token <" atau blank page

Biasanya karena JSX tidak diproses, pastikan file berekstensi .jsx.

❌ "Component is not defined"

Biasanya karena lupa melakukan import.

❌ Salah penamaan file (huruf kapital wajib)

React mengharuskan nama component diawali huruf besar: UserCard, bukan usercard.

6. Hasil Belajar Hari Ini

Di artikel ini saya belajar sekaligus mempraktikkan:

Membuat project React dengan Vite
Memahami apa itu JSX
Membuat component sederhana
Menggunakan props untuk mengirim data ke component

Dengan bekal ini, saya sudah siap masuk ke React yang lebih dinamis: State & Event Handling.

Artikel Selanjutnya

Belajar React #3 — State & Event Handling (Mulai Interaktif!)

Sampai ketemu di artikel berikutnya 🙌

Belajar React #1 — Memulai Perjalanan Belajar Saya

2025-12-05T10:02:00.003+07:00

Kenapa Saya Belajar React

React adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna modern. Banyak perusahaan besar menggunakannya, komunitasnya kuat, dokumentasinya lengkap, dan peluang kerja di bidang Front-End yang menggunakan React sangat luas.

Saya memutuskan untuk belajar React dari dasar, benar-benar dari level pemula, dengan tujuan:

Memahami konsep fundamental React, bukan hanya menghafal syntax.
Membangun aplikasi nyata menggunakan React.
Mendokumentasikan proses belajar saya agar bermanfaat bagi orang lain.
Menjadikan tulisan ini sebagai arsip pribadi untuk bahan evaluasi dan pengingat.

Cara Saya Belajar React

Saya mengikuti pendekatan belajar bertahap, berbasis praktik, dan berorientasi pada pemahaman konsep. Setiap topik yang saya pelajari akan saya dokumentasikan di blog ini lengkap dengan contoh kode, catatan kesalahan, dan hal-hal yang saya pelajari.

Setiap artikel akan terdiri dari:

Topik yang dipelajari
Kenapa topik tersebut penting
Pemahaman konsep dengan bahasa sederhana
Contoh kode atau implementasi kecil
Masalah yang saya temui dan solusinya
Hasil belajar di akhir artikel

Rencana Belajar React

Berikut roadmap belajar React yang saya buat untuk diri saya sendiri:

Minggu	Materi Belajar
1	Apa itu React? Kenapa React? Instalasi & Setup Project dengan Vite
2	JSX, Components, Props
3	State & Event Handling
4	List Rendering & Conditional Rendering
5	Hooks dasar (useState, useEffect)
6	Form & Controlled Components
7	Routing dengan React Router
8	Context API
9	Fetch API & Axios
10	Deploy ke Vercel/Netlify

Target Output dari Proses Belajar Ini

Di akhir pembelajaran ini, saya menargetkan untuk:

Membuat minimal satu aplikasi React dari awal sampai selesai
Memahami cara kerja React tanpa bergantung pada tutorial YouTube
Mendapatkan dokumentasi belajar yang bisa dibagikan ke developer lain
Memiliki portfolio nyata di GitHub dan blog

Komitmen Saya

Saya akan mempublikasikan satu artikel setiap minggu. Saya percaya bahwa konsistensi lebih penting daripada kecepatan—yang penting terus belajar dan terus bergerak.

Jika kamu mengikuti seri ini atau ingin belajar bersama, silakan tinggalkan komentar atau pertanyaan. Kita bisa berkembang bersama.

Sampai jumpa di artikel selanjutnya: Belajar React #2 — Mengenal JSX, Component, dan Props

Terima kasih sudah membaca 🙏

Disclaimer: Saya masih pemula. Jika ada kesalahan atau penjelasan yang kurang tepat, saya sangat terbuka untuk masukan.

Software Requirements Specification (SRS) Enterprise Resource Planning

2025-12-02T19:41:00.008+07:00

Software Requirements Specification (SRS)

Modul Akuntansi, Sales, dan Purchase Order

1. Pendahuluan

1.1 Tujuan Dokumen

Dokumen Software Requirements Specification (SRS) ini bertujuan untuk:

Mendefinisikan kebutuhan fungsional dan non-fungsional aplikasi web internal perusahaan yang mengacu pada konsep Odoo (accounting, sales, purchase order).
Menjadi acuan bagi tim pengembang, analis sistem, QA, dan stakeholder terkait dalam proses desain, implementasi, dan pengujian.
Menjadi dasar untuk pengukuran keberhasilan implementasi sistem.

1.2 Ruang Lingkup Sistem

Aplikasi ini adalah sistem ERP sederhana berbasis web dengan modul utama:

Sales (Penjualan)
Purchase Order (Pembelian)
Accounting (Akuntansi)

Karakteristik utama:

Aplikasi monolith, dibangun dengan Django (backend & frontend) dan MySQL sebagai database.
Styling menggunakan Bootstrap.
Fokus pada:
- Kemudahan penggunaan (usability).
- Keamanan aplikasi (security).
Digunakan secara internal oleh perusahaan untuk mengelola proses bisnis terkait penjualan, pembelian, dan akuntansi.

1.3 Definisi, Istilah, dan Singkatan

Sales Order (SO): Dokumen pemesanan dari customer.
Purchase Order (PO): Dokumen pemesanan barang/jasa ke vendor/supplier.
Invoice Penjualan: Tagihan ke customer.
Invoice Pembelian: Tagihan dari vendor.
Chart of Accounts (CoA): Daftar akun-akun dalam sistem akuntansi.
User: Pengguna yang terautentikasi.
Role: Peran pengguna (Admin, Finance, Sales, Purchasing, Auditor, dll.).
ERP: Enterprise Resource Planning.

1.4 Referensi

Konsep fungsional mengacu pada modul dasar Odoo (Sales, Purchase, Accounting) sebagai inspirasi alur dan fitur.
Standar keamanan web umum (OWASP Top 10).
Konsep dasar akuntansi: double entry, debit/kredit, jurnal umum, buku besar.

2. Gambaran Umum Sistem

2.1 Perspektif Produk

Sistem ini adalah aplikasi web internal berbasis browser, bekerja sebagai:

Portal terpusat untuk:
- Membuat dan mengelola Sales Order.
- Mengelola Purchase Order.
- Mencatat transaksi keuangan dan menghasilkan laporan akuntansi dasar.
Sistem monolith dengan arsitektur web biasa (Django MVC/MVT):
- Presentation Layer: Template Django + Bootstrap.
- Business Logic Layer: Django views, services, models.
- Data Layer: MySQL.

2.2 Fungsi Utama Sistem (Ringkasan)

Autentikasi & Otorisasi
- Login, logout, manajemen user & role.
Dashboard
- Ringkasan penjualan, pembelian, piutang, hutang, cashflow sederhana.
Modul Sales
- Master pelanggan, produk.
- Pembuatan penawaran (quotation) → konversi ke Sales Order → pengiriman (opsional) → invoice penjualan.
Modul Purchase
- Master vendor, produk.
- Purchase Requisition (opsional) → Purchase Order → penerimaan barang (goods receipt) → invoice pembelian.
Modul Accounting
- Chart of Accounts.
- Jurnal umum.
- Posting otomatis dari modul Sales & Purchase.
- Buku besar, neraca saldo, laporan laba rugi, neraca.
Audit Trail & Log Aktivitas
- Melacak perubahan data (create, update, delete) oleh user.
Keamanan Data
- Role-based access control (RBAC).
- Validasi input, proteksi terhadap serangan umum (SQL Injection, XSS, CSRF, dll).

2.3 Tipe Pengguna

Administrator Sistem
- Kelola user, role, parameter sistem.
User Sales
- Mengelola pelanggan, quotation, SO, invoice penjualan terbatas.
User Purchasing
- Mengelola vendor, PR (bila ada), PO, penerimaan barang, invoice pembelian terbatas.
User Finance/Accounting
- Mengelola CoA, jurnal, rekonsiliasi, laporan keuangan.
Manajemen (Director/Manager)
- Akses read-only ke laporan dan dashboard.
Auditor Internal
- Akses read-only ke log dan laporan tertentu.

2.4 Batasan

Sistem hanya diakses melalui browser modern.
Tidak ada mobile app khusus (hanya web responsive).
Tidak ada API publik ke sistem lain pada fase awal (monolith full).
Integrasi dengan sistem eksternal (mis. bank, e-faktur, payroll) tidak termasuk lingkup awal.

3. Kebutuhan Fungsional

3.1 Autentikasi & Otorisasi

FR-001 – Login Pengguna

Sistem harus menyediakan halaman login dengan input:
- Username / Email.
- Password.
Password diverifikasi dengan hash yang aman.
Jika login gagal > X kali, akun bisa:
- Di-lock sementara (configurable) atau
- Diminta captcha (opsional).

FR-002 – Logout Pengguna

Pengguna dapat melakukan logout secara eksplisit.
Session harus berakhir dan cookie terkait dihapus/invalid.

FR-003 – Manajemen Pengguna

Admin dapat:
- Membuat user baru.
- Mengubah data user (nama, email, role, status aktif/nonaktif).
- Reset password user (mengganti dengan password sementara).
Sistem harus menyimpan minimal:
- Nama lengkap.
- Username unik.
- Email.
- Role.
- Status (aktif/nonaktif).

FR-004 – Manajemen Role & Permission

Admin dapat mendefinisikan role dan mengatur permission terhadap:
- Menu (Sales, Purchase, Accounting, Settings).
- Aksi (create, read, update, delete, approve).
Mapping role → permission disimpan di database.

FR-005 – Password Policy

Password minimal X karakter (mis. 8).
Kombinasi huruf besar, huruf kecil, angka, dan simbol (opsional).
Sistem menyediakan fitur ubah password dan forgot password (opsional, jika pakai email).

3.2 Dashboard

FR-010 – Dashboard Umum

Setelah login, user melihat dashboard yang menampilkan:
- Total SO bulan berjalan (jumlah & nilai).
- Total PO bulan berjalan.
- Piutang dan Hutang outstanding (ringkasan).
- Notifikasi dokumen yang menunggu approval (jika user adalah approver).
Tampilan menyesuaikan role:
- Sales: fokus pada penjualan.
- Purchasing: fokus pada pembelian.
- Finance: fokus pada piutang, hutang, cash/bank.

3.3 Modul Sales

3.3.1 Master Data Sales

FR-020 – Master Customer

User Sales / Admin dapat:
- Menambahkan customer baru.
- Mengubah data customer.
- Menonaktifkan customer.
Data minimal customer:
- Kode customer (unik).
- Nama.
- Alamat.
- No. telepon.
- Email.
- NPWP (opsional).
- Term pembayaran (Net 7, Net 30, dll).
- Status (aktif/nonaktif).

FR-021 – Master Produk (Sales)

Sistem menyimpan master produk yang digunakan di Sales & Purchase.
Data minimal:
- Kode produk (unik).
- Nama produk.
- Kategori produk.
- Satuan (unit).
- Harga jual default.
- Harga beli default (opsional).
- Status (aktif/nonaktif).

3.3.2 Proses Sales

FR-030 – Penawaran (Quotation)

User Sales dapat membuat quotation:
- Memilih customer.
- Menambahkan item produk (qty, harga, diskon).
- Menambahkan syarat & ketentuan.
Sistem menghitung:
- Subtotal per item.
- Diskon.
- PPN (jika diperlukan).
- Total nilai penawaran.
Status quotation:
- Draft → Sent → Won (menjadi SO) / Lost (gagal).

FR-031 – Konversi Quotation ke Sales Order

Quotation dengan status “Won” dapat dikonversi menjadi Sales Order.
Data yang diturunkan:
- Customer, daftar item, harga, syarat pembayaran.
Nomor SO di-generate otomatis dengan format tertentu (configurable).

FR-032 – Sales Order (SO) Management

User Sales dapat:
- Membuat SO langsung (tanpa quotation) jika diperlukan.
- Mengubah SO selama status masih Draft.
- Melihat histori SO per customer.
Status SO:
- Draft → Confirmed → Partially Delivered (opsional) → Fully Delivered → Invoiced (parsial/ penuh) → Paid (diatur oleh modul accounting).
SO yang sudah Confirmed tidak dapat dihapus, hanya dapat dibatalkan (void) dengan log alasan.

FR-033 – Pengiriman Barang (Delivery Order) (opsional)

Sistem dapat mencatat pengiriman:
- Mengacu pada SO.
- User memilih item dan qty yang dikirim.
Status pengiriman mempengaruhi status SO (Partial/Fully Delivered).

FR-034 – Invoice Penjualan Otomatis

Dari SO yang sudah Confirmed (atau dari Delivery Order), sistem dapat membuat invoice penjualan.
Data invoice:
- Customer, alamat penagihan.
- Daftar item & harga.
- Pajak (PPN).
- Terms & due date.
Status invoice:
- Draft → Posted → Paid / Partially Paid / Cancelled.
Saat Invoice berstatus Posted:
- Sistem harus membuat jurnal akuntansi otomatis (Piutang Dagang, Penjualan, PPN Keluaran).

3.4 Modul Purchase Order

3.4.1 Master Data Purchase

FR-040 – Master Vendor

User Purchasing / Admin dapat:
- Menambahkan vendor.
- Mengubah data vendor.
- Menonaktifkan vendor.
Data minimal:
- Kode vendor (unik).
- Nama.
- Alamat.
- Kontak person.
- No. telepon.
- Email.
- NPWP (opsional).
- Term pembayaran.
- Status.

3.4.2 Proses Purchase

FR-050 – Purchase Requisition (Opsional)

User non-purchasing dapat membuat request pembelian:
- Menginput barang yang dibutuhkan, qty, alasan.
Purchasing dapat meng-approve dan mengkonversi ke PO.

FR-051 – Purchase Order (PO)

User Purchasing dapat membuat PO:
- Pilih vendor.
- Daftar item (produk), qty, harga.
- syarat pembayaran, delivery address.
sistem menghitung:
- Subtotal.
- Pajak (PPN masukan).
- Total PO.
Status PO:
- Draft → Confirmed → Received (partial/full) → Invoiced → Paid.
PO yang Confirmed tidak bisa dihapus, hanya dibatalkan.

FR-052 – Penerimaan Barang (Goods Receipt)

Dari PO, user mencatat penerimaan barang:
- Qty yang diterima per item.
- Batch/serial number (opsional).
Status penerimaan mempengaruhi:
- Status PO (Partial/Full).
- Stok barang jika nanti ada modul Inventory (future).

FR-053 – Invoice Pembelian Otomatis

Dari PO (Confirmed/Received) user dapat membuat invoice pembelian.
Data invoice:
- Vendor, alamat, terms, due date.
- Item & harga, pajak (PPN masukan).
Status invoice:
- Draft → Posted → Paid / Partially Paid / Cancelled.
Saat Posted, sistem membuat jurnal otomatis (Hutang Dagang, Persediaan/Beban, PPN Masukan).

3.5 Modul Accounting

3.5.1 Master Data Akuntansi

FR-060 – Chart of Accounts (CoA)

User Finance / Admin dapat:
- Definisikan akun-akun (kode, nama, tipe).
- Menandai akun sebagai:
  - Asset, Liability, Equity, Revenue, Expense.
- Menonaktifkan akun (tidak bisa dipakai untuk transaksi baru).
Sistem harus mencegah penghapusan akun yang sudah dipakai di jurnal.

FR-061 – Journal Configuration

Sistem memberikan template jurnal untuk:
- Penjualan (Sales Journal).
- Pembelian (Purchase Journal).
- Kas/Bank (Cash/Bank Journal).
- Jurnal Umum.
Masing-masing jurnal menentukan default akun yang digunakan untuk posting otomatis.

3.5.2 Transaksi Akuntansi

FR-070 – Jurnal Otomatis

Dari Invoice Penjualan & Pembelian, sistem:
- Membuat jurnal double-entry otomatis.
- Menandai jurnal sebagai “Auto Generated”.
Contoh (Penjualan):
- Dr Piutang Dagang
- Cr Penjualan
- Cr PPN Keluaran

FR-071 – Jurnal Umum Manual

User Finance dapat membuat jurnal manual:
- Memilih jurnal (General).
- Menginput tanggal, deskripsi.
- Daftar akun dengan debit/kredit.
Sistem memvalidasi:
- Total debit = total kredit.
Jurnal manual diberi status:
- Draft → Posted.

FR-072 – Rekonsiliasi Pembayaran

Pembayaran piutang:
- Menghubungkan pembayaran dengan invoice penjualan.
- Mengurangi saldo piutang.
Pembayaran hutang:
- Menghubungkan dengan invoice pembelian.
- Mengurangi saldo hutang.
Sistem harus menampilkan status invoice (Paid, Partially Paid, Outstanding).

3.5.3 Laporan Keuangan

FR-080 – Laporan Buku Besar (General Ledger)

User Finance dapat melihat laporan:
- Per akun.
- Per periode (filter tanggal).
Menampilkan:
- Saldo awal.
- Daftar transaksi (debit/kredit).
- Saldo akhir.

FR-081 – Trial Balance (Neraca Saldo)

Sistem menampilkan:
- Daftar akun dengan total debit/kredit dan saldo.
- Periode tertentu.

FR-082 – Laporan Laba Rugi

Sistem menyusun laporan:
- Pendapatan.
- Beban.
- Laba/rugi bersih.

FR-083 – Neraca (Balance Sheet)

Sistem menyusun:
- Aset.
- Kewajiban.
- Ekuitas.

3.6 Audit Trail & Logging

FR-090 – Audit Log

Sistem mencatat setiap operasi penting:
- Login/Logout.
- Create/Update/Delete pada master dan transaksi (Customer, Vendor, SO, PO, Invoice, Jurnal).
Informasi log:
- Timestamp.
- User.
- Jenis operasi.
- Objek (jenis & ID).
- Ringkasan perubahan (sebelum / sesudah, minimal field penting).

FR-091 – History Per Dokumen

Di layar detail dokumen (SO, PO, Invoice) terdapat tab “History” yang menampilkan:
- Perubahan status.
- User yang melakukan.
- Tanggal & waktu.

3.7 Pengaturan Sistem

FR-100 – Konfigurasi Umum

Admin dapat mengatur:
- Nama perusahaan.
- Logo perusahaan.
- Mata uang default.
- Format penomoran dokumen (prefix, running number).
- Pajak default (persentase PPN).
- Kebijakan keamanan (expired password, lock account, dsb).

4. Kebutuhan Non-Fungsional

4.1 Usability

NFR-001 – UI Konsisten

UI menggunakan komponen Bootstrap secara konsisten:
- Navbar, card, table, form, button, modal.
Warna dan tipografi mengikuti tema perusahaan (bisa diatur via CSS custom).

NFR-002 – Responsive Design

Tampilan bisa diakses dengan nyaman dari desktop/laptop dan tablet.
Minimal resolusi desktop 1366x768 didukung penuh.

NFR-003 – Navigasi Sederhana

Menu utama:
- Dashboard
- Sales
- Purchase
- Accounting
- Settings
Breadcrumbs untuk membantu user memahami posisi di dalam sistem.

NFR-004 – Validasi Form yang Jelas

Validasi front-end (HTML5 + JS) dan back-end (Django forms).
Pesan error jelas dan dekat dengan field terkait.
Field wajib diisi ditandai (mis. tanda *).

4.2 Keamanan

NFR-010 – Autentikasi Aman

Password disimpan menggunakan algoritma hash yang kuat (mis. PBKDF2, Argon2 atau bcrypt via Django).
Wajib gunakan HTTPS pada lingkungan produksi (config di server).

NFR-011 – Proteksi CSRF

Setiap form yang memodifikasi data harus menggunakan CSRF token (built-in Django CSRF protection).

NFR-012 – Proteksi XSS & SQL Injection

Semua input user divalidasi dan disanitasi.
Mengandalkan:
- ORM Django untuk query database (menghindari raw SQL unescaped).
- Auto-escaping pada template.
Tidak mem-parse input sebagai HTML kecuali betul-betul diperlukan dan aman.

NFR-013 – Role-Based Access Control

Setiap request dicek permission-nya berdasarkan role.
Endpoint dan view yang tidak berhak harus memunculkan error 403 atau redirect ke halaman lain.

NFR-014 – Session Management

Session timeout setelah X menit tidak aktif (configurable).
Cookie session diberi flag:
- HttpOnly.
- Secure (di produksi).
Jika user logout atau password direset, session yang berjalan dapat diinvalidasi (opsional).

NFR-015 – Audit & Logging Keamanan

Pencatatan:
- Percobaan login gagal.
- Perubahan konfigurasi keamanan.
Log disimpan di table khusus dan/atau file log.

4.3 Kinerja (Performance)

NFR-020 – Respons Wajar

Untuk beban normal (mis. hingga 50 user konkuren internal):
- 95% request halaman utama dan form harus merespon < 3 detik.
Query database dioptimasi melalui index pada kolom-kolom kunci (id, tanggal dokumen, customer/vendor, dll).

4.4 Reliabilitas & Ketersediaan

NFR-030 – Backup

Sistem harus memiliki mekanisme backup database (di level infrastruktur/prosedur):
- Backup harian (minimal) dengan retensi sejumlah hari tertentu.
Dokumentasi prosedur restore database.

NFR-031 – Integritas Data

Transaksi penting (invoice, jurnal, posting) harus menggunakan transaction/atomic di Django:
- Jika satu bagian gagal, seluruh transaksi dibatalkan.

4.5 Maintainability & Extensibility

NFR-040 – Struktur Kode Jelas

Kode Django mengikuti:
- Konsep apps per modul (sales, purchase, accounting, core/settings).
- Pemisahan models, views, forms, templates, urls, services.

NFR-041 – Dokumentasi

Disediakan dokumentasi:
- Struktur database utama.
- Flow utama modul (Sales, Purchase, Accounting).
- Cara deploy & konfigurasi.

4.6 Portabilitas

NFR-050 – Platform

Aplikasi dapat berjalan di:
- Server Linux (disarankan).
- Web server: gunicorn/uwsgi + Nginx/Apache.
MySQL 5.7+ / MariaDB 10.3+.

5. Model Data (Ringkasan)

Ini ringkasan entitas utama (tidak full ERD, tapi cukup sebagai acuan awal).

5.1 Entitas Utama

User
- id, username, password_hash, email, role_id, is_active, created_at, updated_at
Role
- id, name, description
Customer
- id, kode, nama, alamat, phone, email, npwp, term_payment, status
Vendor
- id, kode, nama, alamat, phone, email, npwp, term_payment, status
Product
- id, kode, nama, kategori, satuan, harga_jual_default, harga_beli_default, status
Quotation
- id, nomor, customer_id, tanggal, status, total, user_id, terms
QuotationLine
- id, quotation_id, product_id, qty, harga, diskon, pajak
SalesOrder (SO)
- id, nomor, customer_id, tanggal, status, total, user_id, terms, referensi_quotation
SalesOrderLine
- id, so_id, product_id, qty, harga, diskon, pajak
PurchaseOrder (PO)
- id, nomor, vendor_id, tanggal, status, total, user_id, terms
PurchaseOrderLine
- id, po_id, product_id, qty, harga, diskon, pajak
Invoice
- id, nomor, tipe (sales/purchase), partner_type (customer/vendor), partner_id, tanggal, due_date, status, total, journal_id
InvoiceLine
- id, invoice_id, product_id, qty, harga, pajak, akun_pendapatan/akun_beban
Account (CoA)
- id, kode, nama, tipe, is_active
Journal
- id, kode, nama, tipe, akun_debit_default, akun_kredit_default
JournalEntry (Header)
- id, nomor, tanggal, journal_id, ref, status (draft/posted), created_by
JournalItem (Line)
- id, journal_entry_id, account_id, debit, kredit, keterangan
Payment
- id, nomor, tanggal, tipe (inbound/outbound), amount, metode, rekening, partner_id, invoice_id
AuditLog
- id, user_id, timestamp, action, object_type, object_id, before_data, after_data, ip_address

6. Antarmuka Pengguna (High-Level)

6.1 Layout Global

Top Navbar:
- Logo perusahaan.
- Nama aplikasi.
- Menu user (profil, ubah password, logout).
Sidebar Menu:
- Dashboard
- Sales
  - Customers
  - Products
  - Quotations
  - Sales Orders
  - Invoices
- Purchase
  - Vendors
  - Purchase Orders
  - Invoices
- Accounting
  - Chart of Accounts
  - Journals
  - Journal Entries
  - Reports (GL, Trial Balance, P&L, Balance Sheet)
- Settings
  - Users
  - Roles & Permissions
  - Company Settings

6.2 Desain Form & Tabel

Tabel data menggunakan:
- Paginasi.
- Pencarian (filter).
- Sorting kolom.
Form input:
- Menggunakan grid bootstrap (col-*) untuk rapi.
- Tombol utama (Save, Cancel) selalu di bawah.

7. Aturan Bisnis (Ringkasan)

Dokumen dengan status “Posted” atau “Confirmed” tidak boleh dihapus, hanya boleh:
- Dibatalkan (void) dengan alasan.
- Dibuat jurnal pembalik (untuk akuntansi, opsional).
Tidak boleh ada jurnal dengan debit ≠ kredit.
Tidak boleh mengubah CoA yang sudah digunakan di jurnal (hanya boleh nonaktif).
Penomoran dokumen (SO, PO, Invoice, Journal) unik per tipe dan per tahun (misal: SO/2025/0001).

8. Kriteria Penerimaan (Acceptance Criteria) Tingkat Tinggi

User Sales dapat:
- Membuat Quotation, mengkonversi ke SO, membuat Invoice, dan melihat status pembayaran.
User Purchasing dapat:
- Membuat PO, mencatat penerimaan, membuat Invoice pembelian.
User Finance dapat:
- Melihat daftar invoice, melakukan pencatatan pembayaran, membuat jurnal manual, dan menghasilkan laporan keuangan dasar.
Manajemen dapat:
- Login, melihat dashboard dan laporan tanpa bisa mengubah data transaksi.
Sistem:
- Mencatat semua audit log penting.
- Melindungi dari akses tanpa otorisasi (role-based).
- Dapat berjalan stabil dalam penggunaan harian internal.

Seri 10 — Membuat Dashboard Visual dari Data Spreadsheet

2025-11-06T05:02:00.007+07:00

📊 Menampilkan Data dalam Grafik & UI Interaktif

Di seri sebelumnya, kita sudah membuat Web App sederhana menggunakan Google Apps Script (GAS).
Sekarang, kita akan melangkah lebih jauh: membuat dashboard visual berbasis web yang menampilkan data dari Google Sheets dalam bentuk tabel dan grafik.

Dashboard seperti ini bisa kita gunakan untuk:
✅ Laporan penjualan
✅ Statistik kehadiran
✅ Monitoring stok barang
✅ Rekap kinerja

GAS + Sheets + HTML + Chart = solusi lengkap tanpa server tambahan!

🎯 Tujuan Seri Ini

Di seri kali ini, kita akan:

Membaca data dari Google Sheets
Mengirim data ke halaman HTML
Menampilkan data dalam tabel
Membuat grafik menggunakan Google Charts
Men-deploy sebagai Web App

✅ 1. Source Data

Misal kita punya data penjualan di Sheet “Penjualan”:

Tanggal	Produk	Jumlah
2025-01-01	A	10
2025-01-02	B	12
2025-01-02	A	7

Kita akan membuat grafik jumlah penjualan by tanggal.

✅ 2. Code.gs — Ambil Data dari Sheet

Buat file Code.gs:


function doGet() {
  const template = HtmlService.createTemplateFromFile('index');
  template.data = getData();
  return template.evaluate();
}

function getData() {
  const sheet = SpreadsheetApp.getActive().getSheetByName('Penjualan');
  const values = sheet.getDataRange().getValues();

  // Buang header
  const data = values.slice(1);

  // Format ulang data ke array: [Tanggal, Jumlah]
  const formatted = data.map(row => [row[0], row[2]]);

  return formatted;
}

// Util untuk include HTML terpisah
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Penjelasan:

getData() mengambil data dan hanya menyisakan kolom tanggal + jumlah
Data akan dikirim ke HTML via templating template.data

✅ 3. index.html — Dashboard UI

Buat file baru index.html:


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- Load Google Charts -->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
  </head>

  <body class="container">
    <h2>Dashboard Penjualan</h2>
    <div id="chart" style="width: 100%; height: 400px;"></div>
    <div id="table" style="margin-top: 30px;"></div>

    <?!= include('script'); ?>
  </body>
</html>

✅ 4. script.html — Script Grafik

Buat file HTML baru script.html:


<script>
  const dataFromServer = <?= JSON.stringify(data) ?>;

  google.charts.load("current", { packages: ["corechart", "table"] });
  google.charts.setOnLoadCallback(drawAll);

  function drawAll() {
    drawChart();
    drawTable();
  }

  function drawChart() {
    const tableData = new google.visualization.DataTable();
    tableData.addColumn("date", "Tanggal");
    tableData.addColumn("number", "Jumlah");

    const rows = dataFromServer.map(row => {
      return [new Date(row[0]), Number(row[1])];
    });

    tableData.addRows(rows);

    const options = {
      title: "Penjualan per Hari",
      legend: { position: "bottom" }
    };

    const chart = new google.visualization.LineChart(document.getElementById("chart"));
    chart.draw(tableData, options);
  }

  function drawTable() {
    const tableData = new google.visualization.DataTable();
    tableData.addColumn("date", "Tanggal");
    tableData.addColumn("number", "Jumlah");

    const rows = dataFromServer.map(row => {
      return [new Date(row[0]), Number(row[1])];
    });

    tableData.addRows(rows);

    const table = new google.visualization.Table(document.getElementById("table"));
    table.draw(tableData);
  }
</script>

Penjelasan:

dataFromServer berisi array data yang berasal dari GAS
Kita buat 2 visualisasi: line chart + table
Google Charts memudahkan pembuatan grafik interaktif

✅ 5. Deploy Web App

Klik Deploy → New Deployment
Pilih Web App
Set:

Execute as: Me
Who has access: Anyone

Klik Deploy

Copy URL → buka di browser → Dashboard siap digunakan ✅

✅ 6. Penjelasan Alur Utama

getData() ambil data dari Sheets → berikan ke doGet()
doGet() kirim data ke index.html
script.html menerima data via templating
Google Charts mengubah data menjadi grafik
Hasil tampil di Web App

Alurnya visual dan otomatis!

✅ 7. Kustomisasi Dashboard

Kita bisa menambahkan:

Filter per produk
Pilihan range tanggal
Grafik bar / pie / area
Data summary (total, rata-rata)

Contoh tambahan summary:


function getSummary() {
  const data = getData();
  const total = data.reduce((acc, row) => acc + row[1], 0);
  const avg = total / data.length;
  return { total, avg };
}

✅ 8. Tips Styling

Jika ingin tampilan lebih cantik:

Tambahkan CSS
Gunakan framework seperti Bootstrap / Tailwind
Pisahkan logic JS agar rapi

Contoh include CSS:


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

✅ 9. Apa yang Sudah Kita Pelajari?

✔ Membaca data dari Google Sheets
✔ Mengirim data ke halaman web
✔ Menampilkan data dalam tabel
✔ Menampilkan grafik interaktif
✔ Menggunakan Google Charts
✔ Deploy sebagai Web App

Kita sekarang bisa membangun dashboard monitoring tanpa server dan tanpa biaya tambahan ✅

🧩 Use Case Lanjut

Beberapa ide pengembangan:
✅ Dashboard penjualan per produk
✅ Monitoring absensi siswa
✅ Stok barang & alert jika minimum
✅ Dashboard survey
✅ Laporan bulanan otomatis

Kita bisa membuat sistem reporting internal yang cukup lengkap dengan biaya nol!

🔜 Seri Selanjutnya

Seri 11 — Database Mini: CRUD (Create, Read, Update, Delete) di Google Sheets

Kita akan membangun form + tabel yang mendukung:
✅ tambah data
✅ lihat data
✅ edit data
✅ hapus data

Kayak aplikasi database beneran!

Seri 9 — Membuat Web App dengan Google Apps Script

2025-11-05T05:21:00.003+07:00

Pada seri sebelumnya, kita telah belajar Menghubungkan Google Apps Script dengan API Eksternal. Pada seri ini, kita akan belajar membuat Web App menggunakan Google Apps Script (GAS).
Dengan Web App, kita bisa membuat aplikasi berbasis web yang berjalan di server Google — tanpa harus menyewa hosting, tanpa backend kompleks, dan dapat diakses lewat URL!

Kita akan membahas:

Apa itu Web App di GAS
Bagaimana Web App bekerja
Struktur fungsi doGet() dan doPost()
Membuat Web App sederhana
Men-deploy Web App
Mengirim data dari HTML ke GAS
Contoh Web App mini (form input → Spreadsheet)

✅ 1. Apa Itu Web App di GAS?

Web App di Google Apps Script adalah aplikasi web yang berjalan di server Google, dapat diakses melalui URL publik/privat, serta dapat menerima HTTP request (GET/POST).

Dengan Web App, kita dapat:
✅ Membuat form custom
✅ Membaca/menulis data ke Google Sheets
✅ Membuat dashboard sederhana
✅ Integrasi API

✅ 2. Cara Kerja Web App

Web App bekerja menggunakan dua fungsi utama:

Fungsi	Tujuan
`doGet(e)`	Menangani permintaan GET (misal halaman utama)
`doPost(e)`	Menangani permintaan POST (misal submit form)

Masing-masing fungsi akan mengembalikan response berupa:

HTML
JSON
Text

✅ 3. Struktur Dasar Web App

Fungsi `doGet()`


function doGet(e) {
  return ContentService.createTextOutput("Hello Web App!");
}

Akses URL → browser akan menampilkan:

Hello Web App!

Fungsi `doPost()`


function doPost(e) {
  return ContentService.createTextOutput("POST response");
}

doPost() biasanya dipakai untuk menerima data form.

✅ 4. Membuat Web App Sederhana (HTML Output)


function doGet() {
  const html = HtmlService.createHtmlOutput(`
    <h1>Selamat Datang di Web App Kita!</h1>
    <p>Dibuat dengan Google Apps Script ✨</p>
  `);
  return html;
}

✅ 5. Deploy Web App

Klik Deploy → New deployment
Pilih type: Web app
Isi nama
Set:

Execute as: Me
Who has access: Anyone / Anyone with link

Klik Deploy

GAS akan memberikan URL. Itulah alamat Web App kita!

✅ 6. Menambahkan HTML Terpisah

Daripada menulis HTML dalam string, kita bisa pisahkan:

File Code.gs


function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

File index.html


<!DOCTYPE html>
<html>
  <body>
    <h2>Halo dunia dari index.html!</h2>
  </body>
</html>

✅ 7. Komunikasi HTML → GAS (google.script.run)

HTML dapat memanggil fungsi GAS menggunakan google.script.run.

Code.gs


function hello(name) {
  return `Halo, ${name}!`;
}

index.html


<!DOCTYPE html>
<html>
  <body>
    <input id="nama" placeholder="Nama">
    <button onclick="send()">Kirim</button>

    <p id="result"></p>

    <script>
      function send() {
        const nama = document.getElementById("nama").value;

        google.script.run
          .withSuccessHandler(function(res){
            document.getElementById("result").innerHTML = res;
          })
          .hello(nama);
      }
    </script>
  </body>
</html>

Sekarang kita sudah bisa memanggil fungsi GAS dari halaman web!

✅ 8. Contoh Web App Mini

Form input → simpan ke Spreadsheet

✅ Code.gs


const SHEET = SpreadsheetApp.getActive().getSheetByName("Data");

function doGet() {
  return HtmlService.createTemplateFromFile("form").evaluate();
}

function simpan(data) {
  SHEET.appendRow([new Date(), data.nama, data.email]);
  return "Data tersimpan!";
}

✅ form.html


<!DOCTYPE html>
<html>
  <body>
    <h2>Form Input</h2>

    <label>Nama:</label>
    <input id="nama"><br><br>

    <label>Email:</label>
    <input id="email"><br><br>

    <button onclick="submit()">Simpan</button>

    <p id="res"></p>

    <script>
      function submit() {
        const data = {
          nama: document.getElementById("nama").value,
          email: document.getElementById("email").value
        };

        google.script.run
          .withSuccessHandler(res => {
            document.getElementById("res").innerHTML = res;
          })
          .simpan(data);
      }
    </script>
  </body>
</html>

✅ Hasil: Data dari form akan otomatis masuk ke Google Sheets.

✅ 9. Mengembalikan JSON Response


function doGet(e) {
  const data = { pesan: "Halo JSON", tanggal: new Date() };
  return ContentService.createTextOutput(JSON.stringify(data))
       .setMimeType(ContentService.MimeType.JSON);
}

✅ 10. Tips Penting

Tips
Gunakan `HtmlService` untuk HTML
Pisahkan HTML & GS agar rapi
Gunakan `google.script.run` untuk komunikasi
Log pakai `console.log()`

✅ Catatan Keamanan

Jika data sensitif → gunakan:

Limited access (domain-only)
Validation
Jangan expose fungsi sensitif di HTML

Di seri ini kita belajar membuat aplikasi web sederhana menggunakan Google Apps Script:

✔ Konsep Web App (GET/POST)
✔ Fungsi dasar doGet() dan doPost()
✔ Output HTML
✔ File HTML terpisah
✔ Komunikasi HTML ↔ GAS
✔ Example: Form → Sheet

Dengan kemampuan ini, kita bisa mulai membangun berbagai solusi:
✅ Form internal
✅ Portal mini
✅ Dashboard
✅ Integrasi API

Mulai dari administrasi kantor, sekolah, hingga workflow bisnis!

Pada artikel berikutnya kita akan belajar Membuat Dashboard Visual dari Data Spreadsheet

Seri 8: Menghubungkan Google Apps Script dengan API Eksternal

2025-11-04T13:49:00.005+07:00

Pada seri sebelumnya, kita sudah belajar Membuat Add-on Sederhana untuk Google Sheets. Pada seri ini kita akan belajar:

Apa itu API dan bagaimana cara kerja HTTP Request.
Cara menggunakan UrlFetchApp di Google Apps Script.
Mengambil data dari API publik (contoh: cuaca).
Mengirim data ke API eksternal (contoh: webhook).
Menampilkan hasilnya di Google Spreadsheet.

⚙️ 1. Apa Itu API?

API (Application Programming Interface) adalah jembatan yang memungkinkan satu aplikasi berbicara dengan aplikasi lain.

Misalnya:

Kita bisa mengambil data cuaca dari OpenWeatherMap API.
Mengirim pesan ke Telegram atau WhatsApp Business API.
Mengirim data penjualan ke sistem internal perusahaan.

API bekerja dengan cara mengirim permintaan HTTP (request) dan menerima balasan (response) dalam format seperti JSON.

🔧 2. Fungsi Dasar `UrlFetchApp`

Google Apps Script menyediakan objek bernama UrlFetchApp untuk berkomunikasi dengan API eksternal.

Sintaks dasarnya:


const response = UrlFetchApp.fetch(url, options);

url → alamat API yang ingin diakses.
options → pengaturan request seperti metode, header, dan payload (jika perlu).
response → hasil dari server (bisa berupa JSON, teks, atau HTML).

☀️ 3. Contoh 1: Mengambil Data Cuaca (GET Request)

Mari kita ambil contoh API publik dari OpenWeatherMap.
Kita akan ambil data suhu terkini di Jakarta.


function ambilDataCuaca() {
  const apiKey = 'ISI_API_KEY_ANDA';
  const city = 'Jakarta';
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

  const response = UrlFetchApp.fetch(url);
  const data = JSON.parse(response.getContentText());

  const suhu = data.main.temp;
  const kondisi = data.weather[0].description;

  Logger.log(`Suhu di ${city}: ${suhu}°C, kondisi: ${kondisi}`);
}

📘 Penjelasan:

UrlFetchApp.fetch() → mengirim permintaan ke API.
JSON.parse() → mengubah teks JSON menjadi objek JavaScript.
data.main.temp dan data.weather[0].description → mengekstrak data cuaca.

Kita bisa menulis hasilnya ke spreadsheet juga:


const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Cuaca');
sheet.appendRow([new Date(), city, suhu, kondisi]);

📮 4. Contoh 2: Mengirim Data ke API (POST Request)

Sekarang, kita akan belajar mengirim data ke API eksternal menggunakan metode POST.

Contoh kasus: kita ingin mengirim data ke webhook (misalnya untuk sistem internal atau Discord, Notion, atau Zapier).


function kirimDataKeAPI() {
  const url = 'https://webhook.site/xxxxxx'; // Ganti dengan URL webhook Anda
  
  const data = {
    nama: 'Bagus Prasojo',
    waktu: new Date().toISOString(),
    pesan: 'Percobaan kirim data dari Google Apps Script!'
  };

  const options = {
    method: 'POST',
    contentType: 'application/json',
    payload: JSON.stringify(data)
  };

  const response = UrlFetchApp.fetch(url, options);
  Logger.log('Response server: ' + response.getContentText());
}

📘 Penjelasan:

method: 'POST' → menentukan jenis request.
contentType: 'application/json' → memberitahu server format datanya.
payload → isi body yang kita kirim ke API.

Dengan ini, setiap kali fungsi dijalankan, data JSON akan dikirim ke URL tujuan.

🔐 5. Menggunakan Header Otorisasi (API Key / Token)

Beberapa API membutuhkan autentikasi, misalnya API cuaca, WhatsApp API, atau Telegram Bot.
Biasanya kita perlu menambahkan header Authorization.

Contoh:


function ambilDataDenganToken() {
  const url = 'https://api.example.com/data';
  const token = 'Bearer 1234567890abcdef';

  const options = {
    method: 'GET',
    headers: {
      'Authorization': token
    }
  };

  const response = UrlFetchApp.fetch(url, options);
  const result = JSON.parse(response.getContentText());

  Logger.log(result);
}

🧩 6. Contoh Kasus Nyata: Menampilkan Data Cuaca dari BMKG menggunakan API

Kita bisa ambil data dari API publik seperti milik BMKG


function ambilDataCuacaBMKG() {
  const url = `https://api.bmkg.go.id/publik/prakiraan-cuaca?adm4=31.71.03.1001`;

  const response = UrlFetchApp.fetch(url);
  const data = JSON.parse(response.getContentText());
  Logger.log('Provinsi : ' + data.lokasi.provinsi);
  Logger.log('Kota/Kab : ' + data.lokasi.kotkab);
  Logger.log('Kecamatan : ' + data.lokasi.kecamatan);
  Logger.log('Desa : ' + data.lokasi.desa);
  Logger.log('------------------------------ C U A C A -------------------------------');
  Logger.log(data.data[0].cuaca[0][0]);
  
}

Script di atas akan menampilkan data cuaca yang diambil dari data BMKG ke dalam log

🧠 7. Tips dan Praktik Terbaik

✅ Gunakan try...catch untuk menangani error API:


try {
  const res = UrlFetchApp.fetch(url);
} catch (e) {
  Logger.log('Terjadi error: ' + e);
}

✅ Gunakan PropertiesService untuk menyimpan API key agar lebih aman:


const props = PropertiesService.getScriptProperties();
props.setProperty('API_KEY', '12345ABCDE');
const apiKey = props.getProperty('API_KEY');

✅ Gunakan JSON.parse() hanya untuk data dalam format JSON.

✅ Gunakan Logger.log(response.getResponseCode()) untuk memeriksa status request.

📚 Kesimpulan

Di seri ini kita sudah belajar:

Dasar komunikasi antar sistem melalui API.
Mengambil data dari API (GET).
Mengirim data ke API (POST).
Menambahkan header otorisasi/token.
Menyimpan hasil ke Google Spreadsheet.

Dengan kemampuan ini, Google Apps Script bisa menjadi hub integrasi otomatis antara Google Workspace dan layanan eksternal — dari laporan keuangan, notifikasi, chatbot, hingga sistem bisnis internal.

🔜 Seri Selanjutnya

➡️ Seri 9: Membuat Web App dengan Google Apps Script

Kita akan membuat aplikasi web mini berbasis GAS, lengkap dengan tampilan HTML, form input, dan penyimpanan data ke Spreadsheet.
Ini adalah langkah besar menuju pembuatan aplikasi internal berbasis cloud yang mudah diakses oleh tim.

Seri 7: Membuat Add-on Sederhana untuk Google Sheets

2025-10-27T04:45:00.000+07:00

Pada seri sebelumnya kita telah belajar tentang Mengelola File dan Folder di Google Drive Secara Otomatis. Pada seri ini kita akan belajar cara:

Membuat menu khusus di Google Sheets (misalnya “Menu Otomasi Kita”).
Menjalankan fungsi script langsung dari menu tersebut.
(Opsional) Membuat custom dialog atau sidebar untuk interaksi pengguna.

Dengan begitu, script kita tidak lagi harus dijalankan lewat editor, tapi bisa dipakai layaknya fitur bawaan Google Sheets.

⚙️ 1. Konsep Dasar Add-on di GAS

Add-on pada dasarnya hanyalah Google Apps Script yang dihubungkan ke dokumen Google (Spreadsheet, Docs, atau Slides), dengan:

Fungsi yang dijalankan oleh pengguna.
Menu tambahan di toolbar.
(Kadang) tampilan UI tambahan seperti dialog dan sidebar.

🧱 2. Membuat Menu Kustom di Spreadsheet

Langkah pertama: kita buat menu baru di Spreadsheet.


function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('🔧 Otomasi Kita')
    .addItem('Kirim Email Otomatis', 'kirimEmailOtomatis')
    .addItem('Backup File Drive', 'salinFileKeBackup')
    .addSeparator()
    .addItem('Tentang Add-on Ini', 'tampilkanTentang')
    .addToUi();
}

📘 Penjelasan:

Fungsi onOpen() adalah simple trigger — akan berjalan otomatis saat file dibuka.
createMenu() membuat menu baru dengan nama “🔧 Otomasi Kita”.
addItem(label, functionName) menautkan menu ke fungsi.
addToUi() menambahkan menu ke bar Google Sheets.

Setelah disimpan, menu baru akan muncul otomatis setelah kita refresh spreadsheet.

📬 3. Menambahkan Fungsi dari Seri Sebelumnya

Agar menu tersebut berfungsi, kita bisa memanggil fungsi dari seri sebelumnya, misalnya kirimEmailOtomatis() atau salinFileKeBackup().

Misalnya, tambahkan:


function tampilkanTentang() {
  SpreadsheetApp.getUi().alert(
    'Add-on Otomasi Kita\n\nDibuat menggunakan Google Apps Script.\nVersi: 1.0'
  );
}

Sekarang menu “Tentang Add-on Ini” akan menampilkan pesan pop-up sederhana.

🪟 4. Membuat Custom Dialog

Kita bisa menampilkan jendela kecil dengan HTML sederhana untuk pengalaman yang lebih interaktif.

Buat file baru di editor script: File → New → HTML file → beri nama tentang.html

Isi dengan HTML berikut:


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body style="font-family: Arial, sans-serif;">
    <h3>🧩 Otomasi Kita</h3>
    <p>Add-on ini membantu kita mengotomatisasi tugas di Google Workspace.</p>
    <p><b>Versi:</b> 1.0</p>
    <button onclick="google.script.host.close()">Tutup</button>
  </body>
</html>

Lalu tampilkan dialog ini lewat fungsi:


function tampilkanTentang() {
  const html = HtmlService.createHtmlOutputFromFile('tentang')
    .setWidth(350)
    .setHeight(200);
  SpreadsheetApp.getUi().showModalDialog(html, 'Tentang Add-on Ini');
}

✨ Kini saat kita klik menu “Tentang Add-on Ini”, dialog cantik akan muncul langsung di dalam spreadsheet.

🧠 5. Membuat Sidebar (Lebih Lanjut)

Kalau ingin tampilan lebih besar di sisi kanan, kita bisa buat sidebar:


function tampilkanSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('tentang')
    .setTitle('Otomasi Kita');
  SpreadsheetApp.getUi().showSidebar(html);
}

Sidebar ini bisa digunakan untuk:

Form input (misal: nama, email, tanggal).
Log aktivitas.
Pengaturan add-on kita.

🪄 6. Tips: Menghubungkan HTML dan Script

Kita bisa kirim data dari HTML ke Script (dua arah):

Dari HTML → Script: google.script.run.namaFungsi()
Dari Script → HTML: HtmlService dan Template.

Contoh:


<button onclick="google.script.run.kirimEmailOtomatis()">Kirim Email</button>

Jika fungsi kirimEmailOtomatis() sudah ada di Script, tombol ini akan memanggilnya langsung!

🧩 7. (Opsional) Men-deploy Sebagai Add-on Publik

Jika add-on ini ingin dibagikan ke orang lain:

Buka menu Deploy → Test deployments → Install add-on in this document.
Untuk publikasi ke Marketplace, pilih Deploy → New deployment → Add-on.
Lengkapi informasi deskripsi, logo, dan izin.

Namun, untuk penggunaan internal (misalnya di tim sendiri), cukup gunakan script ini di Spreadsheet dan bagikan akses editornya.

📚 Kesimpulan

Di seri ini kita sudah belajar:

Membuat menu kustom di Google Sheets.
Menjalankan fungsi dari menu.
Menampilkan pop-up dan sidebar HTML.
(Opsional) Cara men-deploy add-on ke tim atau publik.

Dengan ini, script kita sudah naik level menjadi fitur tambahan langsung di dalam Google Sheets, lengkap dengan UI dan menu sendiri.

🔜 Seri Selanjutnya

➡️ Seri 8: Menghubungkan Google Apps Script dengan API Eksternal

Kita akan belajar bagaimana cara berkomunikasi dengan layanan luar (misalnya API cuaca, sistem internal, atau chatbot) menggunakan UrlFetchApp.
Ini adalah langkah besar untuk membuat integrasi dan otomatisasi yang lebih canggih.

Seri 6: Mengelola File dan Folder di Google Drive Secara Otomatis

2025-10-26T15:44:00.003+07:00

Pada seri sebelumnya, kita telah belajar mengirim email otomatis dengan template dinamis, pada seri ini kita akan belajar:

Mengakses dan menelusuri file di Google Drive.
Membuat, menyalin, dan memindahkan file/folder.
Menghapus file lama secara otomatis.
Menggabungkannya dengan trigger waktu untuk backup rutin.

⚙️ 1. Pengenalan `DriveApp`

Google Apps Script menyediakan layanan bernama DriveApp untuk berinteraksi dengan file dan folder di Google Drive.
Kita bisa menggunakannya untuk melakukan hampir semua hal yang bisa kita lakukan di antarmuka web Google Drive.

Beberapa metode penting:

DriveApp.getFiles() → Ambil semua file.
DriveApp.getFolderById(id) → Akses folder berdasarkan ID.
DriveApp.createFolder(nama) → Buat folder baru.
file.makeCopy() → Salin file.
file.moveTo(folder) → Pindahkan file.

📁 2. Membuat Folder Otomatis

Kita mulai dengan hal paling dasar — membuat folder baru di Drive:


function buatFolderBaru() {
  const folderBaru = DriveApp.createFolder('Backup Mingguan');
  Logger.log('Folder dibuat: ' + folderBaru.getName());
}

Setelah dijalankan, folder bernama “Backup Mingguan” akan muncul di Drive kita.

📂 3. Menemukan Folder Berdasarkan Nama

Jika kita ingin mencari folder yang sudah ada:


function cariFolder() {
  const folders = DriveApp.getFoldersByName('Backup Mingguan');
  if (folders.hasNext()) {
    const folder = folders.next();
    Logger.log('Folder ditemukan: ' + folder.getName());
  } else {
    Logger.log('Folder tidak ditemukan.');
  }
}

💡 getFoldersByName() mengembalikan iterator — artinya bisa ada lebih dari satu folder dengan nama sama, jadi kita perlu hasNext() dan next() untuk mengambilnya.

🧾 4. Menyalin File ke Folder Lain

Misalnya kita ingin menyalin file laporan dari folder utama ke folder backup otomatis.


function salinFileKeBackup() {
  const fileId = 'ID_FILE_ASLI'; // Ganti dengan ID file nyata
  const folderBackup = DriveApp.getFoldersByName('Backup Mingguan').next();
  
  const fileAsli = DriveApp.getFileById(fileId);
  const fileSalinan = fileAsli.makeCopy(`Backup - ${new Date().toISOString()}`, folderBackup);
  
  Logger.log(`File berhasil disalin: ${fileSalinan.getName()}`);
}

👉 ID file bisa kita ambil dari URL Google Drive:
contohnya


https://drive.google.com/file/d/1abcXYZ123/view?usp=sharing  
→ ID-nya: 1abcXYZ123

🗃️ 5. Memindahkan File

Kita juga bisa memindahkan file dari satu folder ke folder lain:


function pindahkanFile() {
  const file = DriveApp.getFileById('ID_FILE_ASLI');
  const folderTujuan = DriveApp.getFoldersByName('Arsip').next();
  
  file.moveTo(folderTujuan);
  Logger.log('File berhasil dipindahkan ke folder Arsip');
}

⚠️ Catatan:
File yang dipindahkan akan hilang dari folder asal (bukan disalin).

🧹 6. Menghapus File Lama Otomatis

Kita bisa membuat sistem pembersihan otomatis — misalnya menghapus file backup yang lebih tua dari 7 hari.


function hapusFileLama() {
  const folderBackup = DriveApp.getFoldersByName('Backup Mingguan').next();
  const files = folderBackup.getFiles();
  const batasWaktu = new Date();
  batasWaktu.setDate(batasWaktu.getDate() - 7);
  
  while (files.hasNext()) {
    const file = files.next();
    const tanggalBuat = file.getDateCreated();
    if (tanggalBuat < batasWaktu) {
      Logger.log(`Menghapus file lama: ${file.getName()}`);
      file.setTrashed(true); // Mengirim ke “Trash”
    }
  }
}

Dengan begini, setiap minggu kita bisa bersihkan backup lama agar Drive tidak penuh.

🕐 7. Otomasi Backup dengan Trigger Waktu

Kita bisa gabungkan semua logika di atas dengan trigger waktu agar berjalan otomatis tiap minggu.


function buatTriggerBackupMingguan() {
  ScriptApp.newTrigger('salinFileKeBackup')
    .timeBased()
    .everyWeeks(1)
    .onWeekDay(ScriptApp.WeekDay.MONDAY)
    .atHour(8)
    .create();
}

Dengan script ini, file kita akan otomatis dibackup ke folder “Backup Mingguan” setiap Senin pagi jam 8.

🧠 8. Tips Praktis

Gunakan Logger.log() atau console.log() (jika pakai V8 engine) untuk melihat hasil proses.
Jangan lupa periksa kuota Drive — script tidak akan bisa membuat salinan jika penyimpanan penuh.
Gunakan file.getUrl() untuk mendapatkan link ke file hasil proses.

Di seri ini kita sudah belajar:

Menggunakan DriveApp untuk membuat dan mencari folder.
Menyalin dan memindahkan file antar folder.
Menghapus file lama secara otomatis.
Menjadwalkan backup mingguan dengan trigger waktu.

Dengan kemampuan ini, kita bisa membuat sistem backup, arsip, dan manajemen dokumen otomatis yang sepenuhnya berjalan di cloud.

🔜 Seri Selanjutnya

➡️ Seri 7: Membuat Add-on Sederhana untuk Google Sheets

Kita akan belajar bagaimana membuat menu khusus di Google Sheets, lalu menambahkan tombol atau fungsi yang bisa dipakai langsung oleh pengguna — seolah kita membuat aplikasi mini di dalam Spreadsheet.

Seri 5: Mengirim Email Otomatis dengan Template Dinamis

2025-10-24T05:58:00.004+07:00

Pada seri sebelumnya, kita telah mempelajari Trigger dan Event Otomatis di Google Apps Script, pada seri ini kita akan belajar cara:

Mengambil data dari Google Spreadsheet.
Membuat template email dengan variabel dinamis (misalnya nama, tanggal, status, dll).
Mengirim email otomatis ke setiap penerima menggunakan GmailApp.

Dengan pendekatan ini, kita bisa membuat sistem seperti:

Pengiriman notifikasi otomatis ke pelanggan.
Reminder tugas mingguan.
Atau laporan rutin ke tim — semuanya tanpa perlu dikirim manual.

📊 1. Struktur Spreadsheet

Sebagai contoh, kita buat Spreadsheet dengan struktur seperti ini:

Nama	Email	Status	Tanggal Kirim
Umi	rumahbajuumi@gmail.com	Belum Dikirim
Rufaidah	rufaidahcantik2022@gmail.com	Belum Dikirim

Simpan sheet dengan nama misalnya DataEmail.

🧱 2. Template Email

Kita bisa menyiapkan template langsung di kode, misalnya seperti ini:


const TEMPLATE_EMAIL = `
Halo {{nama}},

Kami ingin mengingatkan bahwa status Anda saat ini adalah: {{status}}.

Terima kasih atas perhatian dan kerja samanya.
Salam hangat,
Tim Otomasi Kita
`;

Kita akan mengganti {{nama}} dan {{status}} dengan data dari spreadsheet menggunakan JavaScript.

⚙️ 3. Membaca Data dari Spreadsheet

Sekarang kita buat fungsi untuk membaca data dari sheet dan mengirim emailnya satu per satu.


function kirimEmailOtomatis() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('DataEmail');
  const data = sheet.getDataRange().getValues();
  
  // Lewati baris pertama (header)
  for (let i = 1; i < data.length; i++) {
    const [nama, email, status, tanggalKirim] = data[i];
    
    // Hanya kirim jika belum dikirim
    if (status === "Belum Dikirim" && email) {
      
      // Ganti placeholder dengan data nyata
      let isiEmail = TEMPLATE_EMAIL
        .replace('{{nama}}', nama)
        .replace('{{status}}', status);
      
      // Kirim email
      GmailApp.sendEmail(email, "Notifikasi Status Anda", isiEmail);
      
      // Update status dan tanggal kirim di sheet
      sheet.getRange(i + 1, 3).setValue('Sudah Dikirim');
      sheet.getRange(i + 1, 4).setValue(new Date());
      
      Logger.log(`Email terkirim ke ${nama} (${email})`);
    }
  }
}

🧠 4. Penjelasan Kode

Mari kita uraikan sedikit:

getActiveSpreadsheet() → Mengambil spreadsheet yang sedang aktif.
getDataRange().getValues() → Mengambil semua data dalam bentuk array dua dimensi.
for (let i = 1; i < data.length; i++) → Melompati baris header.
GmailApp.sendEmail() → Fungsi bawaan Google Apps Script untuk mengirim email.
sheet.getRange().setValue() → Menulis ulang data ke spreadsheet (untuk menandai status pengiriman).

Dengan cara ini, setiap baris hanya akan dikirim sekali saja.

💡 5. Menambahkan Fitur CC, Lampiran, atau Format HTML

Kalau kita ingin membuat email yang lebih cantik, kita bisa gunakan HTML body:


function kirimEmailHTML() {
  const htmlBody = `
  <p>Halo <b>{{nama}}</b>,</p>
  <p>Status Anda saat ini: <b>{{status}}</b>.</p>
  <p>Terima kasih,<br>Tim Otomasi Kita</p>
  `;
  
  const isiEmail = htmlBody
    .replace('{{nama}}', 'Andi')
    .replace('{{status}}', 'Aktif');
  
  GmailApp.sendEmail('andi@example.com', 'Contoh Email HTML', '', {
    htmlBody: isiEmail
  });
}

Kita bisa juga menambahkan:

Lampiran → dengan attachments: [fileBlob]
CC / BCC → dengan cc: atau bcc: di parameter opsional.

🕐 6. Menjadwalkan Email Otomatis

Jika kita ingin fungsi kirimEmailOtomatis() berjalan otomatis setiap hari, tinggal tambahkan Trigger waktu seperti yang sudah kita bahas di Seri 4:


function buatTriggerEmailHarian() {
  ScriptApp.newTrigger('kirimEmailOtomatis')
    .timeBased()
    .everyDays(1)
    .atHour(8)
    .create();
}

Setelah dijalankan sekali, GAS akan mengirim email otomatis setiap jam 8 pagi sesuai data terbaru di sheet.

🧩 7. Tips Praktis

Tambahkan try...catch agar script tetap aman meski ada error email.
Gunakan Logger.log() untuk memantau hasil di Execution log.
Jika ingin mengirim ribuan email, perhatikan batas kuota Gmail (biasanya 100–150 email per hari untuk akun biasa).

Contoh error handling:


try {
  GmailApp.sendEmail(email, subject, body);
} catch (err) {
  Logger.log("Gagal mengirim ke " + email + ": " + err);
}

Pada seri ini kita sudah belajar:

Membuat template email dengan placeholder dinamis.
Mengambil data dari Spreadsheet.
Mengirim email otomatis dan memperbarui status.
Menjadwalkan pengiriman dengan trigger waktu.

Sekarang kita sudah bisa membuat sistem notifikasi email otomatis tanpa perlu server atau aplikasi tambahan — hanya dengan kekuatan Google Apps Script.

🔜 Seri Selanjutnya

➡️ Seri 6: Mengelola File dan Folder di Google Drive Secara Otomatis

Kita akan belajar bagaimana membuat, menyalin, memindahkan, dan menghapus file di Google Drive menggunakan script — sangat berguna untuk backup otomatis dan pengelolaan dokumen digital.

Seri 4: Trigger dan Event Otomatis di Google Apps Script

2025-10-23T05:02:00.005+07:00

Setelah kita belajar mengotomasi Google sheets menggunakan script, pada seri ini, kita akan mempelajari bagaimana cara membuat script yang berjalan otomatis menggunakan Trigger di Google Apps Script (GAS). Kita juga akan mempraktikkan contoh nyata — misalnya mengirim email otomatis ketika spreadsheet diubah, atau menjalankan tugas rutin setiap jam.

🔍 Apa Itu Trigger?

Trigger adalah pemicu yang membuat fungsi tertentu berjalan secara otomatis berdasarkan event tertentu.
Dengan trigger, kita tidak perlu klik tombol Run setiap kali ingin menjalankan script.

Secara umum, ada dua jenis trigger di GAS:

Simple Trigger (Trigger Sederhana)
Contoh: onOpen(), onEdit(), onInstall()
→ Tidak perlu diset di menu mana pun, otomatis aktif.
Installable Trigger (Trigger yang Diinstal)
→ Bisa diatur waktu, event, atau sumber dokumen tertentu.
→ Dibuat melalui editor atau script.

⚙️ 1. Simple Trigger: `onOpen()` dan `onEdit()`

Simple trigger dijalankan otomatis ketika peristiwa tertentu terjadi.

Misalnya, kita ingin menampilkan pesan selamat datang saat file Spreadsheet dibuka.


function onOpen() {
  SpreadsheetApp.getUi()
    .alert('Selamat datang di spreadsheet otomatis kita!');
}

💡 Fungsi ini harus bernama tepat onOpen(), tidak bisa diganti nama lain.

Begitu juga dengan onEdit(), yang akan otomatis berjalan setiap kali ada sel yang diubah:


function onEdit(e) {
  const range = e.range;
  const value = e.value;
  
  Logger.log(`Sel ${range.getA1Notation()} diubah menjadi: ${value}`);
}

📘 Catatan penting:

Simple trigger tidak bisa mengakses layanan berhak istimewa (seperti Gmail, Calendar, atau Drive dengan izin penuh).
Jika kita butuh itu, gunakan Installable Trigger.

🕐 2. Installable Trigger: Mengatur Waktu atau Event

Installable trigger bisa kita atur agar fungsi berjalan otomatis pada interval waktu tertentu, atau ketika event spesifik terjadi.

📅 Contoh: Menjalankan Script Setiap Hari

Misalnya kita ingin mengirim laporan otomatis setiap pagi pukul 7.


function kirimLaporanHarian() {
  MailApp.sendEmail(
    "tim@perusahaan.com",
    "Laporan Harian",
    "Halo tim, ini laporan otomatis dari Google Apps Script kita."
  );
}

Sekarang kita tambahkan trigger-nya:

Buka menu Triggers di Apps Script (Ikon jam ⏰ di toolbar kiri).
Klik + Add Trigger.
Pilih fungsi kirimLaporanHarian.
Pilih event type: Time-driven.
Atur agar berjalan Setiap hari – 7 pagi.
Klik Save.

Setelah itu, GAS akan menjalankan fungsi ini otomatis setiap hari pukul 07.00!

✨ 3. Trigger Berbasis Event Spreadsheet

Kita juga bisa membuat trigger yang berjalan saat Spreadsheet diubah oleh siapa pun.

Misalnya kita ingin otomatis menandai baris sebagai “Sudah Diperbarui” saat kolom tertentu diubah:


function onEdit(e) {
  const sheet = e.source.getActiveSheet();
  const range = e.range;
  
  if (range.getColumn() === 2) { // Jika kolom B diubah
    sheet.getRange(range.getRow(), 3).setValue('Sudah Diperbarui');
  }
}

Setiap kali kolom B berubah, kolom C akan otomatis terisi teks "Sudah Diperbarui".
Sederhana tapi sangat berguna untuk otomatisasi pelacakan data.

🚀 4. Membuat Trigger Melalui Script

Kita juga bisa membuat installable trigger langsung lewat kode, bukan manual dari UI.


function buatTriggerOtomatis() {
  ScriptApp.newTrigger('kirimLaporanHarian')
    .timeBased()
    .everyDays(1)
    .atHour(7)
    .create();
}

💡 Jalankan buatTriggerOtomatis() sekali saja, dan Google akan menjadwalkan trigger otomatis harian untuk kita.

🧠 Tips Praktis

Gunakan Logger.log() untuk debugging fungsi yang dijalankan oleh trigger.
Untuk fungsi onEdit(e), parameter e menyimpan info seperti range, value, dan user.
Gunakan try...catch untuk menangani error agar script tidak berhenti mendadak.

Contoh:


function onEdit(e) {
  try {
    const value = e.value;
    Logger.log('Nilai baru:', value);
  } catch (error) {
    Logger.log('Terjadi kesalahan: ' + error);
  }
}

Pada seri ini kita telah belajar:

Apa itu trigger dan jenis-jenisnya.
Cara membuat onOpen() dan onEdit().
Cara menjadwalkan fungsi otomatis harian.
Dan cara membuat trigger lewat script.

Dengan trigger, kita bisa membuat Spreadsheet atau Dokumen yang “hidup”, bereaksi otomatis tanpa kita jalankan manual — inilah salah satu kekuatan utama Google Apps Script.

🔜 Seri Selanjutnya

➡️ Seri 5: Mengirim Email Otomatis dengan Template Dinamis

Kita akan belajar membuat sistem pengiriman email otomatis menggunakan GmailApp, lengkap dengan variabel dinamis dari Spreadsheet.

Seri 3: Mengotomasi Google Sheets Menggunakan Script

2025-10-22T05:35:00.002+07:00

Membaca, Menulis, dan Memformat Data Secara Otomatis

Di dua seri sebelumnya, kita sudah mengenal dasar Google Apps Script (GAS) dan belajar menulis serta menjalankan fungsi sederhana.

Sekarang saatnya kita melangkah lebih jauh — menghubungkan Apps Script langsung dengan data di Google Sheets.

Melalui seri ini, kita akan belajar:

Membaca dan menulis data di sel spreadsheet,
Menambahkan baris secara otomatis,
Membuat format tabel otomatis,
Serta membuat fungsi auto timestamp agar setiap perubahan data bisa terekam otomatis.

Dengan memahami ini, kita sudah bisa mengotomatiskan banyak pekerjaan administratif hanya dengan beberapa baris kode.

⚙️ 1. Mengenal Objek SpreadsheetApp dan Sheet

Untuk berinteraksi dengan Google Sheets, Apps Script menyediakan objek utama bernama SpreadsheetApp.

Dari objek ini, kita bisa mengakses dokumen yang sedang aktif, lalu memilih lembar kerja (sheet) di dalamnya.

Contoh dasar:


function contohSpreadsheetApp() {
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = spreadsheet.getActiveSheet();
  Logger.log(sheet.getName());
}

Kode di atas akan menampilkan nama sheet aktif di log.
SpreadsheetApp adalah pintu utama, dan sheet adalah halaman tempat kita berinteraksi dengan data.

📖 2. Membaca Data dari Sel dan Range

Kita bisa mengambil data dari sel tertentu menggunakan getRange() dan getValue().

Contoh:


function bacaSatuSel() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getRange("A1").getValue();
  Logger.log("Isi sel A1 adalah: " + data);
}

Kalau kita ingin membaca banyak data sekaligus, gunakan getValues():


function bacaBeberapaSel() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getRange("A1:B5").getValues();
  Logger.log(data);
}

getValues() akan mengembalikan array dua dimensi, di mana setiap baris adalah array dari nilai di kolom.

✍️ 3. Menulis Data ke Spreadsheet

Untuk menulis data, kita menggunakan fungsi kebalikannya — setValue() dan setValues().

Contoh sederhana:


function tulisData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.getRange("A1").setValue("Halo dari Apps Script!");
}

Jika kita ingin menulis banyak nilai sekaligus:


function tulisBeberapaData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = [
    ["Nama", "Kota"],
    ["Bagus", "Yogyakarta"],
    ["Rina", "Bandung"],
    ["Dewi", "Jakarta"]
  ];
  sheet.getRange("A1:B4").setValues(data);
}

➕ 4. Menambahkan Baris Baru Otomatis

Kita bisa menambahkan data baru ke baris terakhir yang berisi data, menggunakan getLastRow():


function tambahBarisBaru() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const barisBaru = sheet.getLastRow() + 1;
  sheet.getRange(barisBaru, 1).setValue("Data baru otomatis");
}

Setiap kali fungsi dijalankan, data baru akan ditulis di baris paling bawah, tanpa menimpa data sebelumnya.

🎨 5. Membuat Format Otomatis

Apps Script juga bisa membantu kita mengatur format sel, warna, dan ukuran kolom secara otomatis.

Contoh:


function formatTabel() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const range = sheet.getRange("A1:B1");
  
  range.setFontWeight("bold");
  range.setBackground("#f2f2f2");
  sheet.autoResizeColumns(1, 2);
}

Hasilnya, baris pertama akan diformat dengan huruf tebal, latar belakang abu-abu muda, dan lebar kolom disesuaikan otomatis.

🧮 6. Latihan Mini: Membuat Log Aktivitas Sederhana

Kita buat contoh sederhana yang akan:

Menambahkan baris baru,
Menulis nama dan waktu eksekusi otomatis.


function logAktivitas() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const baris = sheet.getLastRow() + 1;
  const waktu = new Date();
  
  sheet.getRange(baris, 1).setValue("Aktivitas otomatis");
  sheet.getRange(baris, 2).setValue(waktu);
}

Setiap kali dijalankan, fungsi ini akan menambahkan log baru di bawah data lama.

⏰ 7. Membuat Fungsi Auto Timestamp (Otomatis Saat Diedit)

Kadang kita ingin menambahkan tanggal/waktu otomatis setiap kali isi sel berubah.
Kita bisa membuat fungsi trigger onEdit() untuk itu:


function onEdit(e) {
  const sheet = e.source.getActiveSheet();
  const range = e.range;

  if (range.getColumn() === 1 && range.getRow() > 1) { 
    sheet.getRange(range.getRow(), 2).setValue(new Date());
  }
}

Penjelasan:

Fungsi ini berjalan otomatis setiap kali kita mengedit sesuatu di spreadsheet.
Jika perubahan terjadi di kolom A, maka kolom B akan diisi dengan waktu edit.
Ini sangat berguna untuk membuat log aktivitas, tracking update, atau absensi otomatis.

Pada seri ini kita sudah belajar banyak hal penting:

Mengenal objek SpreadsheetApp dan Sheet,
Membaca dan menulis data ke spreadsheet,
Menambah baris otomatis,
Membuat format otomatis,
Dan menambahkan fungsi auto timestamp saat data berubah.

Dengan kemampuan ini, kita sudah bisa membuat berbagai otomatisasi kecil yang mempercepat pekerjaan sehari-hari — mulai dari mencatat transaksi otomatis, log aktivitas, hingga format laporan mingguan.

📅 Seri Selanjutnya:

➡️ Seri 4 — Trigger dan Event Otomatis di Google Apps Script
Kita akan mempelajari cara menjalankan script tanpa harus menekan tombol Run lagi.
Script bisa berjalan otomatis saat waktu tertentu, saat dokumen dibuka, atau saat data diubah — semuanya bisa diatur dengan trigger.

Seri 2: Dasar Pemrograman di Google Apps Script

2025-10-20T06:18:00.033+07:00

Mengenal Editor, Fungsi, dan Eksekusi Script

Di seri sebelumnya, kita sudah mengenal apa itu Google Apps Script (GAS) dan mengapa ia bisa menjadi alat yang sangat membantu untuk mengotomasi pekerjaan di ekosistem Google Workspace.

Nah, di seri kedua ini kita akan mulai menulis kode pertamanya. Kita akan berkenalan dengan editor Apps Script, memahami struktur fungsi, menjalankan script, hingga mempelajari cara membaca log dan pesan error.

Tujuannya sederhana: setelah membaca artikel ini, kita sudah bisa menulis dan menjalankan program kecil di GAS dengan benar.

💻 1. Membuka Google Apps Script Editor

Ada dua cara utama untuk membuka editor Google Apps Script:

A. Dari Google Sheets (Container-bound Script)

Buka dokumen Google Sheets baru.
Pilih menu Extensions → Apps Script.
Sebuah tab baru akan terbuka berisi editor dengan file bernama Code.gs.
Inilah tempat kita menulis script yang menempel pada file spreadsheet tersebut.

B. Dari Halaman Utama Apps Script

Buka https://script.google.com/.
Klik New Project.
Beri nama proyeknya, misalnya “Latihan GAS Seri 2”.

Kedua cara ini menghasilkan editor yang sama, hanya saja script dari Sheets terikat pada dokumen tertentu, sedangkan proyek baru berdiri sendiri (standalone).

🧠 2. Struktur Dasar Fungsi di GAS

Semua kode di Google Apps Script berbentuk fungsi JavaScript.
Bentuk dasarnya seperti ini:


function namaFungsi() {
  // blok perintah di sini
}

Setiap fungsi akan dijalankan secara manual atau otomatis tergantung cara pemanggilannya.
Mari kita buat fungsi sederhana:


function haloDunia() {
  Logger.log("Halo dari Google Apps Script!");
}

Untuk menjalankannya:

Klik tombol ▶️ Run di atas editor.
Tunggu hingga proses selesai.
Pada bagian bawah akan muncul execution log

Kita akan melihat pesan:


[INFO] Halo dari Google Apps Script!

🚀 3. Menjalankan Script Pertama Kali dan Memberi Izin

Saat pertama kali menjalankan script, Google akan meminta izin untuk mengakses data di akun kita.
Langkahnya:

Klik tombol Run.
Muncul dialog Authorization required → klik Review permissions.
Pilih akun Google kita.
Klik Allow jika script berasal dari proyek kita sendiri.

Proses ini penting karena setiap script yang berinteraksi dengan data pengguna (misalnya Sheets, Gmail, Drive) harus mendapat izin eksplisit.

🧾 4. Melihat Hasil Eksekusi & Log

GAS menyediakan cara mudah untuk melihat hasil eksekusi dengan fungsi:


Logger.log("Teks apapun bisa kita tampilkan di sini");

Hasil log bisa kita lihat dengan:

Menu View → Logs, atau
Shortcut Ctrl + Enter

Selain Logger.log, kita juga bisa memakai:


console.log("Pesan debug");

untuk hasil yang muncul di Execution log yang lebih lengkap.

⚠️ 5. Menangani Error Dasar

Saat menulis kode, error adalah hal biasa. Beberapa kesalahan umum di Apps Script antara lain:

Jenis Error	Penyebab	Solusi Singkat
ReferenceError	Salah penulisan nama variabel/fungsi	Cek kembali ejaan
TypeError	Memanggil method dari objek yang belum ada	Gunakan `Logger.log()` untuk debug nilai variabel
Authorization Error	Belum memberi izin akses	Jalankan ulang dan beri izin

Tips cepat:

Gunakan log untuk melacak nilai variabel.
Perhatikan baris yang ditunjukkan pesan error di editor.
Baca pesan error dari tab Executions untuk detail waktu dan penyebabnya.

🧮 6. Contoh Praktik Sederhana: Menulis ke Google Sheets

Sekarang kita buat contoh nyata: menulis data ke sel di Google Sheets.

Langkahnya:

Buka spreadsheet baru.
Pilih Extensions → Apps Script.
Ganti kode di editor dengan:


function tulisData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.getRange("A1").setValue("Halo, ini data dari Apps Script!");
}

Klik Run ▶️, beri izin jika diminta.
Kembali ke spreadsheet — di sel A1 akan muncul teks baru.

Dengan hanya tiga baris kode, kita sudah berhasil mengotomatiskan tugas di Google Sheets!

Pada seri ini, kita telah belajar hal-hal mendasar dalam Google Apps Script:

Cara membuka editor
Menulis fungsi sederhana
Menjalankan dan memberi izin script
Melihat hasil log
Menangani error dasar

Langkah kecil ini adalah pondasi penting sebelum kita beralih ke hal-hal yang lebih menarik seperti trigger otomatis, pengiriman email, dan integrasi API.

📅 Seri Selanjutnya:

➡️ Seri 3 — Mengotomasi Google Sheets Menggunakan Script
Kita akan mulai membuat otomasi nyata di spreadsheet: membaca dan menulis data secara dinamis, menambahkan baris otomatis, dan membuat format yang diatur lewat script.

Seri 1: Pengenalan Google Apps Script

2025-10-19T15:36:00.012+07:00

Sudah lama tidak menulis di blog ini. Bukan karena tidak peduli dengan blog ini tapi karena memang banyak kesibukan dan kekurangan bahan postingan. Hal ini disebabkan karena blog ini memang khusus membahas delphi. Karena pertimbangan semakin jarang orang menggunakan Delphi, maka saya putuskan untuk menulis apapun yang bermanfaat bagi para pengunjung. Saya tidak membatasi hanya membahas pemrograman, saya akan menulis apapun. Pada kesempatan kali ini saya akan memulai sebuah tulisan berseri tentang Google Apps Script (GAS). Silakan mengikuti.

Langkah Pertama Menuju Otomasi di Google Workspace

🔍 Apa Itu Google Apps Script?

Bayangkan kita bisa membuat spreadsheet (google sheet) yang otomatis mengirim email, memformat data, atau bahkan berkomunikasi dengan API luar — tanpa server dan tanpa harus install apa pun.
Itulah kekuatan Google Apps Script (GAS).

Google Apps Script adalah platform serverless berbasis JavaScript yang disediakan oleh Google untuk mengotomasi, memperluas, dan mengintegrasikan layanan-layanan di ekosistem Google Workspace seperti:

Google Sheets
Google Docs
Google Drive
Gmail
Google Calendar
dan lainnya

Jadi, kita bisa menganggapnya sebagai “otak tambahan” di balik aplikasi-aplikasi Google yang biasa kita gunakan setiap hari.

⚙️ Mengapa Google Apps Script Penting?

Bagi pengguna biasa, GAS bisa membantu menghemat waktu dengan mengotomasi pekerjaan berulang.
Bagi programmer, GAS adalah pintu masuk cepat ke dunia otomasi cloud dan integrasi API.

Beberapa contoh kegunaannya:

Mengirim laporan otomatis setiap minggu lewat email
Membuat format data otomatis di spreadsheet
Mengambil data dari API eksternal dan menampilkannya di Google Sheets
Membuat dashboard mini berbasis web menggunakan Google Sheet sebagai database

🧠 Bahasa yang Digunakan

Google Apps Script menggunakan sintaks JavaScript modern (ECMAScript 5+).
Artinya, jika kita sudah familiar dengan JavaScript di web, kita bisa langsung menulis script-nya tanpa banyak belajar ulang.

Contoh paling sederhana:


function helloWorld() {
  Logger.log("Hello, Google Apps Script!");
}

Jika kita menjalankan kode ini, hasilnya akan muncul di tab Execution Log seperti berikut:


[INFO] Hello, Google Apps Script!

🚀 Dua Jenis Script: Container-bound vs Standalone

Google Apps Script bisa dibuat dalam dua bentuk:

Container-bound script
Script yang “menempel” pada dokumen seperti Google Sheet, Google Form, atau Google Doc.
Biasanya dibuat langsung dari menu:
```
Extensions → Apps Script
```
Standalone script
Script yang berdiri sendiri, bisa diakses lewat:
https://script.google.com/
Jenis ini cocok untuk proyek besar atau integrasi API eksternal.

🧩 Contoh: Hello World di Google Sheet

Coba langkah sederhana ini:

Buka Google Sheets baru.
Klik Extensions → Apps Script.
Hapus isi editor dan ganti dengan:


function onOpen() {
  SpreadsheetApp.getUi().alert("Halo dari Google Apps Script!");
}

Klik tombol Run ▶️, lalu berikan izin akses.
Kembali ke Google Sheets, reload halaman.
Kita akan melihat pesan pop-up muncul:
“Halo dari Google Apps Script!”

🎉 Selamat! Kita baru saja menulis script pertama kita.

🧭 Kapan Sebaiknya Menggunakan Apps Script?

Gunakan Apps Script ketika kita ingin:

Mengotomasi pekerjaan berulang di Google Workspace
Menghubungkan beberapa layanan Google secara otomatis
Membuat aplikasi ringan tanpa perlu hosting atau server
Mengembangkan solusi cepat tanpa kompleksitas backend

Demikian tadi pengantar tentang google apps script. Semoga dengan pengantar ini bisa menjadi modal awal kita untuk mempelajarai tools keren ini.

📅 Seri Selanjutnya:

➡️ Seri 2 — Dasar Pemrograman di Google Apps Script
Kita akan belajar struktur kode, fungsi, dan cara mengeksekusi script dengan benar, termasuk mengenal authorization scope serta error yang sering muncul.

Menjadi Programmer Polyglot: Menguasai Beberapa Bahasa Pemrograman untuk Sukses yang Lebih Luar Biasa

2023-07-09T13:09:00.016+07:00

Dalam era teknologi saat ini, menjadi seorang programmer yang mahir dalam satu bahasa pemrograman saja tidak lagi cukup untuk mencapai kesuksesan di dunia pengembangan perangkat lunak. Kebutuhan industri yang terus berkembang dan tuntutan proyek yang semakin kompleks membutuhkan kemampuan untuk menguasai beberapa bahasa pemrograman secara bersamaan. Kemampuan ini dikenal sebagai "polyglot programming" atau menjadi programmer polyglot

1. Mengapa Menjadi Programmer Polyglot Penting?

Dalam dunia pemrograman, setiap bahasa pemrograman memiliki kelebihan dan kekurangannya masing-masing. Tidak ada bahasa pemrograman yang sempurna untuk semua jenis proyek. Oleh karena itu, sebagai seorang programmer, memiliki kemampuan untuk menggunakan beberapa bahasa pemrograman memberikan fleksibilitas dan keleluasaan dalam memilih bahasa yang paling sesuai dengan tuntutan proyek yang sedang dikerjakan.

Selain itu, menjadi programmer polyglot juga membantu meningkatkan pemahaman dan wawasan Anda tentang konsep pemrograman secara keseluruhan. Setiap bahasa pemrograman memiliki paradigma dan gaya pemrograman yang berbeda, dan dengan menguasai beberapa bahasa, Anda akan terpapar pada berbagai paradigma dan teknik pemrograman. Hal ini membantu dalam mengembangkan pola pikir yang lebih luas dan memungkinkan Anda melihat masalah dari berbagai perspektif, yang dapat memunculkan solusi yang lebih inovatif.

2. Manfaat Menjadi Programmer Polyglot

a. Fleksibilitas dalam Memilih Bahasa yang Tepat

Dengan menguasai beberapa bahasa pemrograman, Anda memiliki fleksibilitas untuk memilih bahasa yang paling sesuai dengan tuntutan proyek yang sedang Anda kerjakan. Jika proyek membutuhkan performa tinggi, Anda dapat memilih bahasa pemrograman yang terkenal karena kecepatan eksekusinya, seperti C++ atau Go. Sementara untuk pengembangan web, Anda dapat memilih bahasa seperti JavaScript atau Python yang populer untuk backend dan frontend.

b. Peningkatan Produktivitas

Menguasai beberapa bahasa pemrograman memungkinkan Anda untuk memilih alat terbaik untuk pekerjaan tertentu. Setiap bahasa pemrograman memiliki library dan framework yang dikembangkan oleh komunitas yang menggunakannya. Dengan memiliki pengetahuan tentang beberapa bahasa, Anda dapat memanfaatkan kekuatan masing-masing bahasa dan ekosistemnya untuk meningkatkan produktivitas Anda. Anda dapat menggabungkan alat-alat dan bahasa yang berbeda untuk membuat solusi yang lebih efisien dan cepat.

c. Kesempatan Karir yang Lebih Luas

Kemampuan menjadi programmer polyglot membuka pintu kesempatan karir yang lebih luas. Banyak perusahaan mencari programmer yang dapat bekerja dengan beberapa bahasa pemrograman, terutama dalam proyek yang melibatkan teknologi yang beragam. Menjadi programmer polyglot menunjukkan fleksibilitas dan adaptabilitas Anda dalam menghadapi tantangan yang berbeda. Hal ini dapat meningkatkan daya saing Anda di pasar tenaga kerja dan memberikan Anda akses ke proyek-proyek yang menarik dan menantang.

3. Bagaimana Memulai Perjalanan Anda menjadi Programmer Polyglot?

a. Pilih Bahasa Pemrograman Utama

Langkah pertama untuk menjadi programmer polyglot adalah memilih satu bahasa pemrograman sebagai fokus utama Anda. Pilihlah bahasa yang paling relevan dengan minat dan tujuan karir Anda. Ini akan menjadi dasar bagi Anda untuk mempelajari bahasa-bahasa pemrograman lainnya.

b. Eksplorasi Bahasa-Bahasa Pemrograman Lainnya

Setelah Anda memiliki pemahaman yang kuat tentang bahasa pemrograman utama Anda, mulailah menjelajahi bahasa-bahasa pemrograman lainnya. Pelajari sintaksis, paradigma, dan konsep dasar masing-masing bahasa. Pilihlah bahasa yang berbeda dari bahasa utama Anda untuk mendapatkan perspektif yang lebih luas tentang pemrograman.

c. Terapkan dalam Proyek Nyata

Penting untuk menguji pengetahuan Anda dengan mengimplementasikan bahasa-bahasa pemrograman yang telah Anda pelajari dalam proyek-proyek nyata. Ini akan membantu Anda memahami kekuatan dan kelemahan masing-masing bahasa, serta meningkatkan pemahaman Anda tentang konsep pemrograman secara keseluruhan.

d. Terus Belajar dan Beradaptasi

Tantangan utama dalam menjadi programmer polyglot adalah menjaga kecepatan dengan perkembangan teknologi. Bahasa pemrograman baru terus muncul dan tren dapat berubah seiring waktu. Oleh karena itu, penting untuk terus belajar dan mengikuti perkembangan terbaru dalam dunia pemrograman. Teruslah beradaptasi dengan teknologi baru dan berusaha untuk menguasai bahasa-bahasa pemrograman yang relevan dengan perkembangan industri.

Kesimpulan

Menjadi programmer polyglot adalah keterampilan yang sangat berharga dalam dunia pengembangan perangkat lunak yang terus berkembang. Dengan menguasai beberapa bahasa pemrograman, Anda memperluas pilihan Anda, meningkatkan produktivitas, dan membuka peluang karir yang lebih luas. Mulailah dengan memilih bahasa pemrograman utama dan eksplorasi bahasa-bahasa lainnya secara bertahap. Ingatlah untuk selalu terus belajar dan beradaptasi dengan perkembangan teknologi. Dengan dedikasi dan kerja keras, Anda bisa menjadi seorang legenda programmer polyglot.

Referensi:

[1] "Becoming a Legend: Polyglot Programmer" oleh Alexander Kallaway, Medium, 13 Desember 2019, [https://levelup.gitconnected.com/becoming

Memanfaatkan GitHub Copilot dalam Pemrograman: Meningkatkan Produktivitas dengan Kecerdasan Buatan

2023-07-09T06:23:00.009+07:00

Dalam dunia pemrograman yang terus berkembang, teknologi kecerdasan buatan (AI) telah memberikan dampak yang signifikan dalam meningkatkan produktivitas pengembang perangkat lunak. Pada artikel sebelumnya telah dibahas secara singkat beberapa tools pemrograman yang memanfaatkan AI. Salah satu alat terbaru yang menggunakan kecerdasan buatan adalah GitHub Copilot. Dalam artikel ini, kita akan menjelajahi bagaimana GitHub Copilot dapat memanfaatkan AI untuk membantu programmer dalam menulis kode, memberikan contoh penggunaan dalam beberapa bahasa pemrograman, dan memberikan arahan bagi programmer untuk memanfaatkan dengan bijaksana alat ini.

GitHub Copilot adalah sebuah extension yang dikembangkan oleh GitHub dan OpenAI. Menggunakan teknologi ChatGPT, GitHub Copilot mampu menghasilkan saran kode secara otomatis saat programmer sedang menulis kode. Alat ini menggunakan model bahasa yang dilatih dengan jutaan baris kode dari berbagai sumber untuk menghasilkan saran yang relevan dan akurat.

Salah satu keunggulan utama GitHub Copilot adalah kemampuannya untuk mendukung berbagai bahasa pemrograman. Alat ini telah dilatih menggunakan berbagai bahasa pemrograman populer seperti Python, JavaScript, Java, C++, dan masih banyak lagi. Ini memungkinkan pengembang untuk mendapatkan saran kode yang spesifik sesuai dengan bahasa pemrograman yang sedang mereka gunakan.

Berikut ini adalah contoh penggunaan GitHub Copilot dalam beberapa bahasa pemrograman:Python:

python
def calculate_average(numbers):
    total = sum(numbers)
    average = total / len(numbers)
    return average

JavaScript:

javascript
function capitalizeString(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

Java:

java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Dalam penggunaan GitHub Copilot, penting bagi programmer untuk memahami bahwa alat ini hanyalah asisten. Meskipun dapat memberikan saran dan contoh kode yang baik, programmer tetap bertanggung jawab untuk memastikan kode yang dihasilkan sesuai dengan kebutuhan dan standar proyek yang sedang dikerjakan. Oleh karena itu, sangat penting untuk selalu mempelajari dan memahami kode sumber yang disarankan oleh GitHub Copilot sebelum mengimplementasikannya ke dalam proyek.

Adapun arahan bagi programmer yang menggunakan GitHub Copilot:

Pelajari dan Pahami Kode Sumber: Meskipun GitHub Copilot dapat memberikan kode yang lengkap, penting bagi programmer untuk memahami kode tersebut. Lakukan analisis dan verifikasi kode yang disarankan untuk memastikan kecocokan dengan kebutuhan proyek dan praktik pemrograman terbaik.

Gunakan dengan Bijaksana: Meskipun GitHub Copilot dapat mempercepat proses penulisan kode, ingatlah bahwa alat ini hanya memberikan saran dan tidak selalu menghasilkan solusi yang sempurna. Gunakan kebijaksanaan dalam memilih dan menerapkan saran yang diberikan oleh GitHub Copilot.

Teruslah Belajar: Teknologi pemrograman terus berkembang, dan GitHub Copilot merupakan salah satu contohnya. Jangan bergantung sepenuhnya pada alat ini, tetapi tetaplah belajar dan mengasah keterampilan pemrograman Anda. Perluas pengetahuan Anda tentang bahasa pemrograman, paradigma pemrograman, dan praktik terbaik dalam industri.

Dalam kesimpulannya, penggunaan GitHub Copilot dapat memberikan manfaat yang signifikan dalam meningkatkan produktivitas dan efisiensi programmer dalam menulis kode. Dengan kemampuan AI yang cerdas, alat ini dapat memberikan saran kode yang relevan dalam berbagai bahasa pemrograman. Namun, penting bagi programmer untuk tetap mempelajari dan memahami kode yang disarankan, serta menggunakan GitHub Copilot dengan bijaksana. Dengan kombinasi keahlian manusia dan kecerdasan buatan, programmer dapat memanfaatkan GitHub Copilot sebagai asisten yang berharga dalam pengembangan perangkat lunak.

Meningkatkan Produktivitas dalam Pengembangan Perangkat Lunak dengan ChatGPT

2023-07-09T05:44:00.023+07:00

Dalam dunia pemrograman, terus berkembangnya teknologi membawa kemudahan dan efisiensi dalam proses pengembangan perangkat lunak. Salah satu kemajuan terbaru adalah penggunaan ChatGPT dalam bentuk library dan framework yang dapat membantu kerja programmer. Artikel ini akan membahas beberapa contoh library dan framework yang memanfaatkan ChatGPT dan bagaimana penggunaannya dapat meningkatkan produktivitas dalam pengembangan perangkat lunak.

OpenAI API

OpenAI menyediakan API yang memungkinkan pengembang untuk mengakses model bahasa GPT-3, termasuk ChatGPT. Dengan menggunakan API ini, programmer dapat memanfaatkan kemampuan ChatGPT untuk memberikan saran dan solusi kode secara otomatis dalam aplikasi mereka. Hal ini dapat menghemat waktu dan usaha dalam mencari solusi kode, mempercepat proses pengembangan, dan meningkatkan efisiensi kerja.

GitHub Copilot

GitHub Copilot adalah sebuah extension yang dikembangkan oleh GitHub dan OpenAI. Menggunakan teknologi ChatGPT, extension ini dapat menghasilkan saran kode secara otomatis saat programmer sedang menulis kode. GitHub Copilot dapat memberikan kode lengkap, mengisi celah kode, dan mengusulkan solusi untuk berbagai masalah pemrograman. Hal ini memungkinkan programmer untuk lebih fokus pada pemecahan masalah dan mengurangi waktu yang dihabiskan untuk menulis kode rutin.

Kite

Kite adalah sebuah plugin untuk editor kode yang memanfaatkan teknologi pembelajaran mesin, termasuk ChatGPT. Plugin ini menyediakan fitur-fitur seperti autocompletion, dokumentasi, dan saran kode yang cerdas berdasarkan konteks kode yang sedang ditulis. Kite membantu programmer dalam menulis kode dengan lebih cepat dan akurat, serta memberikan saran yang relevan untuk meningkatkan kualitas kode.

Tabnine

Tabnine adalah sebuah plugin kecerdasan buatan (AI) yang memanfaatkan model bahasa berbasis transformer, termasuk ChatGPT. Plugin ini memberikan saran kode secara real-time berdasarkan konteks kode yang ditulis oleh programmer. Dengan kemampuan autocomplete yang cerdas, Tabnine membantu meningkatkan efisiensi penulisan kode, mengurangi kesalahan, dan mempercepat proses pengembangan.

DeepCode

DeepCode adalah sebuah platform analisis kode yang menggunakan teknologi pembelajaran mesin, termasuk ChatGPT, untuk mendeteksi bug dan memberikan saran perbaikan pada kode. Platform ini membantu pengembang dalam meningkatkan kualitas dan keamanan kode mereka. Dengan mendapatkan saran dan analisis dari DeepCode, programmer dapat mengidentifikasi potensi masalah dalam kode mereka dan mengambil langkah-langkah perbaikan yang diperlukan.

CodeGuru

CodeGuru adalah sebuah layanan dari AWS yang memanfaatkan teknologi machine learning, termasuk ChatGPT, untuk memberikan saran dan analisis kode. Layanan ini membantu pengembang dalam mengidentifikasi bug, memperbaiki kinerja, dan meningkatkan praktik pemrograman terbaik. Dengan bantuan CodeGuru, programmer dapat mengoptimalkan kode mereka untuk kinerja yang lebih baik dan meningkatkan kualitas aplikasi.

Memanfaatkan library dan framework yang memanfaatkan ChatGPT, seperti yang disebutkan di atas, dapat memberikan banyak manfaat dalam pengembangan perangkat lunak. Dengan saran, solusi, dan analisis yang cerdas, programmer dapat meningkatkan produktivitas, menghemat waktu, dan meningkatkan kualitas kode mereka. Penggunaan teknologi ini juga membuka peluang untuk eksplorasi lebih lanjut dalam pengembangan alat dan metode baru yang dapat mempercepat proses pengembangan perangkat lunak di masa depan.

Menggunakan ChatGPT untuk Menulis Kode

2023-07-09T05:37:00.011+07:00

ChatGPT, sebuah model bahasa yang dikembangkan oleh OpenAI, telah menjadi alat yang berguna bagi pengembang perangkat lunak untuk menulis kode. Dalam artikel ini, kita akan melihat beberapa cara untuk menggunakan ChatGPT dalam proses pengembangan perangkat lunak.

Salah satu cara penggunaan ChatGPT adalah sebagai asisten yang membantu dalam menyelesaikan kode. Dalam pengembangan perangkat lunak, seringkali kita menghadapi masalah atau tantangan yang memerlukan solusi kode tertentu. Dengan menggunakan ChatGPT, kita dapat mengajukan pertanyaan atau menggambarkan masalah yang kita hadapi, dan model bahasa ini dapat memberikan saran atau bahkan menuliskan potongan kode yang relevan. Ini dapat membantu menghemat waktu dan usaha dalam mencari solusi.

Selain itu, ChatGPT juga dapat digunakan untuk membantu menjelaskan atau mengkomunikasikan konsep pemrograman kepada orang lain. Misalnya, jika kita perlu menjelaskan logika atau algoritma tertentu kepada kolega yang tidak begitu akrab dengan bahasa pemrograman yang digunakan, kita dapat menggunakan ChatGPT untuk memformulasikan penjelasan yang lebih mudah dipahami. Model ini dapat memecah konsep yang kompleks menjadi bahasa yang lebih sederhana dan terstruktur.

Namun, saat menggunakan ChatGPT dalam pengembangan perangkat lunak, ada beberapa hal yang perlu diperhatikan. Pertama, model ini merupakan model bahasa yang dilatih berdasarkan data sejarah, dan tidak memiliki pemahaman tentang spesifikasiperangkat lunak atau pemrograman yang mendalam. Oleh karena itu, penting untuk memverifikasi dan menguji ulang kode yang dihasilkan oleh ChatGPT sebelum diimplementasikan secara langsung ke dalam proyek.

Selain itu, penting juga untuk memahami bahwa ChatGPT hanya merupakan alat bantu, dan bukan pengganti bagi pengembang perangkat lunak. Model ini dapat memberikan saran dan membantu dalam menulis kode, tetapi tetap diperlukan keahlian dan penilaian manusia dalam mengambil keputusan akhir terkait dengan implementasi dan kualitas kode.

Dalam penggunaan ChatGPT, terus terang ada beberapa kendala dan batasan yang perlu diingat. Model ini mungkin tidak selalu menghasilkan solusi yang sempurna atau benar. Terkadang, jawaban atau kode yang dihasilkan mungkin tidak sesuai dengan harapan atau tidak optimal. Oleh karena itu, penting untuk tetap kritis dan menggunakan kebijaksanaan dalam mengambil keputusan terkait kode yang dihasilkan oleh ChatGPT.

Dalam kesimpulannya, penggunaan ChatGPT dalam pengembangan perangkat lunak dapat menjadi alat yang berguna dalam membantu menulis kode, memberikan saran, dan menjelaskan konsep pemrograman. Namun, perlu diingat bahwa model ini tidak sempurna dan memerlukan kebijaksanaan manusia. Dengan memahami batasannya, pengembang perangkat lunak dapat memanfaatkan potensi ChatGPT untuk meningkatkan produktivitas dan efisiensi dalam pekerjaan mereka.

Tanda-tanda programmer buruk

2023-07-09T05:21:00.005+07:00

Dalam dunia pekerjaan, ada berbagai cara untuk menjadi tidak efektif. Berikut adalah beberapa perilaku yang sering terjadi pada beberapa programmer yang pernah saya kerjakan selama bertahun-tahun:

"Saya Seorang Insinyur Perangkat Lunak, Bukan Programmer"

Anda tahu seperti apa mereka. Mereka membawa keyboard mekanis ke kantor? Mereka tidak bisa ikut dalam pertemuan harian karena terlalu sibuk memikirkan masalah tersebut (hanya butuh 5 menit untuk menyampaikan apa yang Anda pikirkan). Berapa lama waktu yang dibutuhkan untuk mendapatkan latte?

Saya tidak begitu yakin bagaimana seseorang bisa menjadi begitu sombong dengan pengalaman 3 tahun, tapi begitulah adanya.

Saya suka mengesankan orang dengan gelar pekerjaan saya. Siapa? Apa maksud Anda, tidak ada yang peduli.

Mungkin sebaiknya Anda menghabiskan lebih banyak waktu untuk bekerja dan sedikit waktu untuk memikirkan status Anda?

Papan Tulis di Belakang

Beberapa orang di industri ini memiliki gelar. Saya pernah bekerja dengan orang-orang yang memiliki gelar doktor (bukan yang berhubungan dengan kedokteran, OK). Mereka yang memiliki kualifikasi di industri sering memilih untuk tidak menyebutkannya, karena dalam banyak organisasi terdapat sikap meremehkan terhadap pendidikan.

Namun, ada juga yang menggunakan kacamata tanpa alasan medis (ini benar-benar terjadi) dan berdiri di depan papan tulis saat panggilan video.

Saya akan lebih terkesan jika papan tulis Anda berisi lebih dari sekadar daftar poin. Artinya, saya tahu Anda tidak memahami arsitektur aplikasi secara keseluruhan. Papan tulis Anda seperti memberi make-up pada babi.

Eits.

Namun, ada juga yang menuliskan informasi menarik di papan tulis tersebut.

Menghapus Proyek Saat Ini

Anda bergabung dalam proyek baru dan melihat seseorang di Twitter merekomendasikan untuk menghapus semuanya dan memulai dari awal.

Apakah anggota tim saat ini tidak merasa keberatan dengan saran ini? Apa maksud Anda, kerjasama tim bisa terganggu?

Hanya hapus saja.

Oke, terserah.

Michael Jackson (Hitam atau Putih)

Seorang programmer hanya dapat berpikir dalam konsep benar dan salah daripada dalam nuansa abu-abu. Hampir dalam setiap situasi, tidak ada keputusan yang benar-salah, melainkan hanya beragam nuansa abu-abu. Kecuali dalam beberapa hal. Jadi, jangan sampai bingung. Ketika seorang programmer menyatakan bahwa sesuatu seharusnya "hanya" dilakukan dengan cara tertentu, mereka seringkali berpikir tentang "cara mereka" melakukan sesuatu.

Terkadang tidak perlu dilakukan dengan caranya, atau tidak dilakukan sama sekali.

Mungkin perlu memperkenalkan pemikiran "itu tergantung" dalam praktik pengembangan perangkat lunak Anda.

Prinsip Peter, Jalan Menurun yang Lebih Cepat

Beberapa programmer memang pantas mendapatkan promosi setelah 12 atau bahkan 6 bulan. Namun, banyak programmer merasa berhak mendapatkan kenaikan gaji dan gelar pekerjaan baru setelah beberapa bulan bekerja. Standar kepemimpinan tim di perusahaan teknologi memang terlihat sangat rendah. Pengembang baru dengan cepat naik pangkat tanpa pengetahuan teknis yang memadai untuk posisi baru yang lebih tinggi, dan tentu saja kurang memiliki pengetahuan tentang orang untuk menjadi seorang pemimpin tim yang efektif.

Pemrograman melibatkan manusia. Itu butuh waktu untuk berkembang.

Copy-Pasta

Hanya menyalin kode dari Stack Overflow. Sepertinya berhasil! Ayo lakukan.

Beberapa hari kemudian:

Bisakah Anda memperbaiki error ini?

Tebak saja. Perbaikan tidak segera datang.Kurangnya Rasa Ingin Tahu Tidak apa-apa jika Anda bekerja demi uang. Sampai batas tertentu, setiap pekerjaan adalah tentang penghasilan yang Anda dapatkan darinya. Namun, jika Anda benar-benar memiliki gairah dan mencintai pekerjaan Anda, itu berarti Anda bisa mendapatkan lebih banyak dari pekerjaan tersebut dan menjadi kolega yang lebih berharga.

Anda ingin pensiun di usia 40? Tidak begitu banyak. Mungkin itulah mengapa Anda tidak begitu tertarik untuk mencari tahu asal-usul bug tersebut setelah semua.

Tapi mengapa?

Jika Anda tidak menikmati pekerjaan Anda dan ingin meningkatkan diri dan proyek saat ini, mungkin sudah saatnya untuk mencari karier baru.

Artikel ini merupakan tinjauan yang santai tentang perilaku merusak berikut ini:

"Saya Seorang Insinyur Perangkat Lunak, Bukan Programmer"

Mereka yang fokus pada status, bukan menyelesaikan pekerjaan.

Papan Tulis di Belakang

Mereka yang berusaha memamerkan kredensial mereka kepada programmer lain.

Menghapus Proyek Saat Ini

Mereka yang ingin menyalahkan orang lain atas situasi saat ini.

Michael Jackson (Hitam atau Putih)

Mereka yang tidak berpikir dalam konsep klasik "tergantung pada situasi", dan malah berpikir dalam istilah biner hanya untuk situasi kompleks.

Prinsip Peter, Jalan Menurun yang Lebih Cepat

Mereka yang mendapatkan manfaat dari Prinsip Peter, dipromosikan dari peran mereka saat ini tanpa mendapatkan kompetensi yang diperlukan.

Copy-Paste

Menyalin kode dari Stack Overflow tanpa memahaminya dapat menghasilkan kode produksi yang bermasalah dan sulit dipahami.

Kurangnya Rasa Ingin Tahu

Mereka yang tidak ingin tahu lebih dari yang mereka ketahui saat ini, tidak maju dalam pengetahuan mereka, dan akibatnya, tidak memajukan proyek.

Kesimpulan

Jika Anda menampilkan salah satu dari tanda-tanda ini, itu tidak berarti Anda adalah programmer yang buruk. Menampilkan semua 7? Anda mungkin bukan pengembang fantastis seperti yang Anda pikirkan.

Diterjemahkan secara bebas dari :

https://medium.com/@tsecretdeveloper/the-7-signs-of-a-bad-programmer-a624204f7222

Apa sebenarnya yang dimaksud sender pada event handler

2012-11-13T12:56:00.000+07:00

Event Handlers Dan Sender

Perhatikan potongan kode event handler event OnClick event pada sebuah button (bernama "Button1"):

procedure TForm1.Button1Click(Sender: TObject) ;
begin
...
end;

Method Button1Click mempunyai parameter yang bertipe TObject yang disebut Sender. Setiap event handler, pada Delphi, minimal akan memiliki sebuah parameter bernama Sender. Ketika button di-click , event handler (Button1Click) untuk event OnClick dipanggil.

Parameter "Sender" mengacu pada sebuah komponen yang dipakai untuk memanggil method tersebut.Jika anda meng-click Button1, maka akan menyebabkan method Button1Click dipanggil, sebuah referensi atau pointer yang mengacu pada Button1 akan dikirim ke Button1Click pada bagian parameter yang disebut Sender.

Perhatikan Kode Berikut

Parameter Sender , jika digunakan dengan benar, maka akan memberikan fleksibilatas yang luar biasa pada kode kita. Dengan parameter sender ini kita bisa mengetahui komponen apa yang memicu terksekusinya suatu event. Hal ini memudahkan kita untuk menggunakan event handler yang sama untuk dua komponen yang berbeda.

Sebagai contoh, misal kita menginginkan sebuah button dan menuitem melakukan satu task yang sama. Akan aneh jika kita harus menuliskan kode yang sama persis untuk button dan menuitem tersebut.

Agar button dan menuitem tersebut bisa menggunakan event handler yang sama, ikut langkah-langkah di bawah ini :

- Tulis event handler untuk komponen pertama (mis button )
- Pilih komponen kedua (mis MenuItem1)
- Beralih ke tab Event pada Object Inspector (F11).
- Klik panah ke bawah untuk mengambil event yang pernah ditulis. (Delphi akan memberikan daftar event yang kompatible untuk kedua komponen terpilih)
- Pilih event dari drop-down list. (mis Button1Click)

Apa yang kita lakukan di atas adalah membuat sebuah method event-handler yang menangani event OnClick dari komponen button dan menu item sekaligus. Sekarang, yang harus kita lakukan di event handler yang dipakai beberapa komponen (button dan menuitem) adalah membedakan komponen mana yang memicu tereksekusinya method ini. Sebagai contoh, kita mempunyai kode seperti bawah ini :

procedure TForm1.Button1Click(Sender: TObject) ;
begin
  {code for both a button and a menu item}
  ...
  {some specific code:}
  if Sender = Button1 then
    ShowMessage('Button1 clicked!')
  else if Sender = MenuItem1 then
    ShowMessage('MenuItem1 clicked!')
  else
    ShowMessage('??? clicked!') ;
end;

Perhatikan, pada bagian else in the if-then-else yang kedua menangani situasi dimana sendernya <> button1 maupun menuitem1. Hal ini akan kelihatan hasilnya dengan kode berikut :

procedure TForm1.Button2Click(Sender: TObject) ;
begin
  Button1Click(Button2) ;
  {this will result in: '??? clicked!'}
end;

IS and AS

Karena Sender bertipe TObject, semua object bisa dijadikan Sender. Nilai Sender selalu sebuah komponen yang merespon event. Kita bisa melakukan pengecekan unntuk mencari tipe dari sender dengan menggunakan reserved word "is". Perhatikan contoh di bawah ini !

if Sender is TButton then
  DoSomething
else
  DoSomethingElse;

Untuk mengetahui penggunaan "is" dan "as" , tambahkan sebuah Edit box pada form (berinama Edit1) dan tulis kode berikut ini pada event handler OnExit :

procedure TForm1.Edit1Exit(Sender: TObject) ;
begin
  Button1Click(Edit1) ;
end;

Sekarang ubah ShowMessage('??? clicked!') ; pada event handler Button1 OnClick menjadi:

{... else}
begin
  if Sender is TButton then
    ShowMessage('Some other button triggered this event!')
  else if Sender is TEdit then
    with Sender as TEdit do
    begin
      Text := 'Edit1Exit has happened';
      Width := Width * 2;
      Height := Height * 2;
    end {begin with}
  end;
end;

Ok, sekarang kita lihat hasilnya: Jika kita klik pada Button1 makan pesan 'Button1 clicked!' akan muncul, kita klik MenuItem1 maka 'MenuItem1 clicked!' akan mencul. Jika kita klik pada Buton2 maka pesan 'Some other button triggered this event!' akan muncul, namun jika kita klik Edit1 kemudia klik komponen lan (agar event OnExit terpicu), apa yang akan terjadi?
Kesimpulan

Seperti yang kita lihat tadi, parameter Sender bisa sangat bermanfaat jika digunakan dengan benar
Diterjemahkan dengan sangat bebas dari : http://delphi.about.com/od/objectpascalide/a/sender.htm

Singleton Pattern

2012-10-31T12:41:00.001+07:00

Motivasi
Kadang ada keadaan di mana kita hanya boleh memiliki satu instan dari suatu kelas. Sebagai contoh, kita hanya boleh memiliki satu window manager (atau satu sistem file atau satu spooler printer) pada satu aplikasi. Biasanya singleton digunakan untuk managemen sumber daya internal maupun eksternal secara terpusat dan bisa diakses dimanapun.

Singleton merupkan salah satu design pattern yang paling sederhana. Singleton hanya melibatkan satu kelas yang bertanggung jawab untuk menginstansiasi dirinya sendiri dan pada saat yang bersamaan menyediakan akses secara global terhadap instan tersebut. Pada pattern singleton, instan bisa diakses dari manapun tanpa harus memanggil contructor dari kelas instan tersebut

Tujuan

• Memastikan bahwa satu kelas hanya bisa dibuat instannya sekali.
• Menyediakan akses secara global terhadap instan singleton tersebut.

Implementasi

Pada bahasa pemrograman Java, implementasi dari singleton adalah dengan membuat sebuah atribut static pada kelas "Singleton" , constructor dengan akses private, dan sebuah method static dengan akses public yang mengembalikan nilai yang mengacu pada atribut static.

Pattern Singleton mendefinisikan sebuah operasi yang bernama getInstance. Getinstance ini bertugas mengembalikan instan yang unik yang diakses oleh klien. GetInstance() adalah sebuah method yang bertanggung jawab untuk menciptakan sebuah instant dari kelas itu sendiri jika instan tersebut belum diciptakan. Jika sudah, method getinstant tinggal mengembalikan instan tersebut.

Sedangkan implementasi pada Delphi sedikit berbeda. Hal ini karena beberapa hal :
1. Pada Delphi versi lama, static field tidak didukung
2. AFAIK, Delphi tidak mengijinkan private constructor.

Untuk mengakali kekurangan tersebut, implementasi Singleton pada Delphi bisa dilakukan seperti di bawah ini :

unit Singletn;

interface

uses
  SysUtils, WinTypes, WinProcs, Messages, Classes, Graphics, Controls,
  Forms, Dialogs;

type

  TOSingleton = class(TObject)
  public
    constructor Create;
    destructor Destroy; override;
  end;

var

  Global_OSingleton: TOSingleton;

constructor TOSingleton.Create;
begin
  if Global_OSingleton <> nil then
    {NB could show a message or raise a different exception here}
    Abort
  else
    Global_OSingleton := Self;
end;

destructor TOSingleton.Destroy;
begin
  if Global_OSingleton = Self then
    Global_OSingleton := nil;
  
  inherited Destroy;
end;

procedure FreeGlobalObjects; far;
begin  
  if Global_OSingleton <> nil then
    Global_OSingleton.Free;
end;

Coba anda perhatikan baris kode pada contructor. Disitu tertulis, jika variable

Global_OSingleton <> nil

maka method Abort akan dieksekusi, atau bisa juga diganti dengan melemparkan eksepsi. Jika

Global_OSingleton  = nil

maka akan dicreate sebuah instan dari kelas TOSingleton.

Penerapan Contoh

Sesuai dengan definisi, pattern singleton digunakan ketika dibutuhkan hanya ada satu instan dari suatu kelas, dan ketika instan tersebut harus bisa diakses dari manapun. Berikut ini contoh real dimana pattern singleton diterapkan :

Contoh 1 – Kelas Log

Pattern singleton digunakan untuk kelas log. Kelas ini biasanya diimplementasikan sebagai sebuah singleton, dan menyediakan akses secara global dari manapun tanpa harus mengistansiasi kelas tersebut tiap kali melakukan operasi log.

Contoh 2 –Kelas Konfigurasi

Pattern singleton digunakan untuk kelas yang mengatur kofigurasi sebuah aplikasi. Dengan mengimplementasi kelas konfigurasi sebagai singleton, bukan hanya menyediakan akses global , tapi juga menjadikan instan dari kelas konfigurasi tersebut sebagai cache objek. Ketika kelas konfigurasi dinstansiasi, singleton akan menyimpan data konfigurasi tersebut sesuai struktur kelas tersebut. Jika data konfigurasi diambil dari database atau file, singleton memungkinkan kita bisa mengakses data tersebut tanpa melakukan pengambilan ulang dari database atau file tiap kali kita membutuhkan.

Contoh3 - Dipakai Untuk Mengakses sumberdaya yang dipakai bersama

Singleton bisa digunakan pada aplikasi yang membutuhkan akses ke port serial. Misal, ada banyak kelas dalam aplikasi, berada pada lingkungan multithreading , yang harus mengerjakan sesuatu pada port serial.Pada kasus ini singleton dengan method harus digunakan untuk mengatur semua operasi pada port serial tersebut.

Demikianlah sekilas tentang pattern singleton. Semoga bermanfaat dan tetap semangat !

Mari Bergabung Milis IT

2012-08-31T16:38:00.000+07:00

Programmer dituntut untuk selalu mengikuti perkembangan Teknologi Infomasi (TI). Pada masa sekarang ini, perubahan TI bukan hanya terjadi pada setiap minggu atau bulan. Setiap hari selalu ada perubahan, bahkan bisa jadi setiap jam selalu ada perubahan TI. Salah satu cara agar selalu bisa mengikuti mengikuti perkembangan adalah dengan bergabung dengan mailing list (milis) TI. Saya, sejak bayi orok (baca : sejak awal mengenal pemrograman) selalu berkutat dengan pascal/delphi. Tidak aneh jika saya bergabung dengan milis delphido (delphi indonesia).

Selain milis delphindo, saya juga bergabung dengan milis IT lainnya. Pada sebagian besar milis yang saya ikuti, saya banyak menjadi pasive member. Lalu apa untung nya kalau hanya menjadi pasive member? Tetap ada untungnya. Dengan bergabung dengan milis tadi, setidaknya kita bisa tahu topik apa yang lagi hangat di milis tersebut. Selalin itu, kita juga bisa mengetahui teknologi , framework, atau bahkan kita bisa mendapatkan pekerjaan dari milist tersebut : ). Berikut ini milis yang saya ikuti :

Nama

Keterangan

Liferay User Group Indonesia

liferay User Group Indonesia, Jakarta

Manajemen Proyek IT

Diskusi tentang berbagai aspek manajemen proyek IT seperti estimasi biaya, manajemen resource, resiko, planning, tracking, dsb. Sharing tentang metodologi, tips dan trik, contoh dokumen, dll.

Pentaho User Group Indonesia

Pentaho User Group ini merupakan tempat diskusi mengenai pemanfaatan dan pengembangan Pentaho - kumpulan aplikasi Business Intelligence (BI) Open Source. Info lebih lanjut mengenai Pentaho dapat dilihat di : - http://pentaho.phi-integration.com

Scrum Indonesia

Discussion group to talk about Scrum and Agile in Bahasa Indonesia but not limited to other process that complement with Scrum like XP and Lean.

[id-android-Dev] Indonesian Android Developers

Milis Indonesian Android Developers bagian dari milis ID-Android http://groups.google.com/group/id-android/ dan http://android.or.id mari bergabung/join bersama Forum ID-Android http://forum.android.or.id

codeigniter-id

Milis CodeIgniter Indonesia

id-python

Milis Python Indonesia

jug-indonesia

Selain membahas Java, milis ini juga membahas framework-framework dan tools populer di dunia Java seperti JBoss Seam, Spring, Hibernate, dsb. JUG memiliki pertemuan bulanan yang dinamakan JaMU (Java Meet Up) dimana di pertemuan ini para member bertemu di darat serta membahas topik-topik yang sedang hangat di Java dengan Pembicara yang pakar pada topik tersebut. Untuk mengetahui jadwal dan lokasi tempat pertemuan JUG, bergabunglah bersama kami sekarang dan jadi bagian dari

phpug

Kelompok Pengguna PHP Indonesia (PHPUG) dibuat untuk bertukar ilmu dan pengalaman antar para pemakai PHP di Indonesia.

sqlserver-indo

Diskusi dan tukar informasi seputar database Microsoft SQL Server. Topik-topik meliputi:

Design / perancangan database

Instalasi-Konfigurasi

Administrasi Database

Pemrograman dengan SQL Server

Database Security

Data Warehouse/ OLAP

Replication

Selain bergabung dengan milis, kita juga bisa update pengatahuan TI kita dengan bergabung dengan berbagai forum IT. Kita juga bisa bergabung dengan situs tanya jawab TI yang paling populer yaitu

http://www.stackoverflow.com

Belajar Delphi Melalui Video

2012-08-02T10:52:00.000+07:00

Video kadang lebih bermakna dibanding tutorial berbentuk tulisan. Dari sebuah video terkandung begitu banyak hal. Demikian juga dengan belajar delphi. Kita dengan mudah bisa mendapatkan video tutorial delphi. Di bawah ini adalah daftar video tutorial delphi yang bisa didownload secara gratis

More Articles...

Delphi Guru

⭐ Belajar React #5 — Handling Events & Controlled Components

🎯 Apa yang Akan Kamu Pelajari?

🟦 1. Handling Events di React

✔ Penamaan event menggunakan camelCase

✔ Event handler ditulis sebagai fungsi JavaScript, bukan string

🔹 Contoh Event Handler

🟦 2. Apa Itu Controlled Component?

🔹 Contoh Controlled Input

🟦 3. Controlled Textarea

🟦 4. Controlled Select (Dropdown)

🟩 Contoh Aplikasi: Form Login Sederhana

⭐ Belajar React #4 — Conditional Rendering & List Rendering

🎯 Apa yang Akan Kita Pelajari?

🟦 1. Apa Itu Conditional Rendering?

🔹 Metode Conditional Rendering

1. IF Statement

2. Operator AND ( && )

3. Ternary Operator condition ? a : b

🟦 2. Apa Itu List Rendering?

.map()

🔸 Penting! Setiap elemen list harus punya key

🟩 Contoh Praktik: To-Do List Sederhana

Belajar React #3 — Memahami State & Event Handling (React Mulai Hidup!)

1. Apa Itu State dalam React?

2. Event Handling: Membuat UI Bereaksi

3. Studi Kasus Praktikal: Membuat Counter Interaktif

Langkah 1 — Buat file component

Isi file

Langkah 2 — Panggil di App.jsx

4. Studi Kasus Tambahan: Input Form Sederhana

5. Kesalahan yang Sering Saya Temui

❌ State tidak berubah padahal memanggil setState

❌ Event tidak berjalan

❌ Error: Invalid hook call

6. Hasil Belajar Hari Ini

Artikel Selanjutnya

Belajar React #2 — Instalasi React + Dasar JSX, Component, dan Props (Praktikal)

1. Instalasi React Menggunakan Vite

1) Persiapan Awal

2) Membuat Project Baru

3) Masuk ke folder project & install dependencies

4) Jalankan project

2. Memahami JSX (Dengan Contoh Langsung)

3. Membuat Component Pertama Kita

4. Mengenal Props (Data yang Dikirim ke Component)

5. Kesalahan Umum Pemula (Yang Saya Alami Juga)

❌ "Unexpected token <" atau blank page

❌ "Component is not defined"

❌ Salah penamaan file (huruf kapital wajib)

6. Hasil Belajar Hari Ini

Artikel Selanjutnya

Belajar React #1 — Memulai Perjalanan Belajar Saya

Kenapa Saya Belajar React

Cara Saya Belajar React

Rencana Belajar React

Target Output dari Proses Belajar Ini

Komitmen Saya

Software Requirements Specification (SRS) Enterprise Resource Planning

Software Requirements Specification (SRS)

Modul Akuntansi, Sales, dan Purchase Order

1. Pendahuluan

1.1 Tujuan Dokumen

1.2 Ruang Lingkup Sistem

1.3 Definisi, Istilah, dan Singkatan

1.4 Referensi

2. Gambaran Umum Sistem

2.1 Perspektif Produk

2.2 Fungsi Utama Sistem (Ringkasan)

2.3 Tipe Pengguna

2.4 Batasan

3. Kebutuhan Fungsional

3.1 Autentikasi & Otorisasi

FR-001 – Login Pengguna

FR-002 – Logout Pengguna

FR-003 – Manajemen Pengguna

FR-004 – Manajemen Role & Permission

FR-005 – Password Policy

3.2 Dashboard

FR-010 – Dashboard Umum

2. Operator AND ( `&&` )

3. Ternary Operator `condition ? a : b`

`.map()`