[[ 001 // PUBLIKASI EDITORIAL & LABORATORIUM REKAYASA ]] DUAL-PILLAR: AI AGENTS & WEBSITE DEVELOPMENT

JANGAN SEKADAR MEMBACA teknologi,
PAHAMI ARSITEKTURNYA & BANGUN SISTEM NYATA.

[[ DUA PILAR PENGETAHUAN ]]

Platform pembelajaran praktis Z-Automation memadukan dua kompetensi inti rekayasa modern: Pilar A — AI Agents (Sistem Otonom, Hermes & OpenClaw) dan Pilar B — Website Development (Next.js 16, 3D WebGL & REST API).

Di era perangkat lunak modern, Website adalah antarmuka pengalaman manusia, sedangkan AI Agent adalah mesin eksekusi otonom di balik layar. Menguasai keduanya memberi Anda kapabilitas penuh untuk menciptakan produk digital masa depan.

Setiap modul dirancang dari prinsip pertama (First Principles), dilengkapi esai teknis mendalam, diagram SVG interaktif, tutorial praktis dengan kode lengkap yang telah diverifikasi, serta rubrik evaluasi kompetensi 100 poin.

Katalog 24 Modul Mandiri ↓ Ruang Kerja 3D WebGL Modul Unggulan: Tool Calling →
STATUS KOMPETENSI ANDA: 0 / 24 MODUL TERVERIFIKASI
[[ 01 ]] 2 Pilar AI Agents + Web Dev
[[ 02 ]] 6 Jalur Kurikulum Terstruktur
[[ 03 ]] 24 Modul URL Mandiri & Shareable
[[ 04 ]] 100 Poin Rubrik Verifikasi Kompetensi
[[ 002 // MATRIKS PARADIGMA SISTEM ]]

Evolusi Paradigma: Dari Pasif Menuju Otonom

Pilih tab di bawah untuk melihat bagaimana sistem kecerdasan buatan dan arsitektur website bertransformasi menuju standar rekayasa modern.

[[ TIPE A // MODEL BAHASA BIASA ]] PASIF / STATELESS

Chatbot AI Konvensional

Hanya merespons saat ditanya dan tidak memiliki akses ke lingkungan sistem. Membutuhkan manusia untuk mengeksekusi setiap rekomendasi.

CARA KERJA Single-Turn HTTP POST request yang memprediksi token teks berikutnya lalu selesai.
KETERBATASAN Tidak bisa memeriksa database internal, tidak bisa memvalidasi harga real-time, tidak bisa memicu webhook.
[[ TIPE B // SISTEM OTONOM ]] STATEFUL / TOOL-ENABLED

AI Agent (Hermes + OpenClaw)

Memiliki loop otonom: Perceive → Plan → Act → Observe → Reflect. Terhubung ke alat kerja dan database bisnis Anda.

CARA KERJA Mengeluarkan sinyal tool_calls dengan parameter JSON Schema, dieksekusi oleh worker, dan mengevaluasi hasil secara mandiri.
KAPABILITAS Mengelola stok, memeriksa katalog secara akurat, mencatat pesanan, dan berinteraksi via WhatsApp/CRM 24/7.
[[ 003 // ANATOMI DUA KOMPONEN UTAMA ]]

Mengenal Hermes & OpenClaw

Agar sebuah AI Agent bisa bekerja secara utuh seperti manusia, ia membutuhkan dua bagian yang saling melengkapi: Otak untuk berpikir (Hermes) dan Tangan untuk bertindak (OpenClaw).

H
[[ KOMPONEN 01 // SANG OTAK PERENCANA ]]

Hermes Agent

NOUS RESEARCH ARCHITECTURE // REASONING & PLANNING ENGINE

Apa itu Hermes? Hermes adalah model kecerdasan buatan yang dirancang khusus sebagai "manajer pemikir". Jika AI biasa sering menjawab bertele-tele atau mengarang bebas, Hermes dilatih untuk berpikir logis, mematuhi aturan kerja, dan tahu persis kapan harus menggunakan alat bantu.

01 /
Memecah Perintah Besar Jadi Langkah Kecil Saat diberi tugas rumit, Hermes otomatis menyusun daftar urutan kerja (Step 1, Step 2, Step 3) layaknya seorang manajer proyek.
02 /
Memori & Pemahaman Dokumen (RAG) Hermes bisa membaca buku panduan, katalog harga, atau SOP perusahaan Anda sehingga jawabannya selalu akurat sesuai fakta.
03 /
Kemampuan Memanggil Alat (Function Calling) Hermes tahu kapan harus menyuruh kalkulator menghitung angka, kapan harus mengecek kalender, dan kapan harus memanggil OpenClaw.
C
[[ KOMPONEN 02 // SANG TANGAN EKSEKUTOR ]]

OpenClaw

AUTONOMOUS ACTION FRAMEWORK // BROWSER, OS & MESSAGING CLAW

Apa itu OpenClaw? Sesuai namanya (Claw = Capit/Tangan Mekanis), OpenClaw adalah perangkat lunak open-source yang memberikan "tangan digital" kepada AI. Tanpa OpenClaw, otak secerdas Hermes hanya terkurung di dalam layar chat. Dengan OpenClaw, AI bisa mengoperasikan komputer dan aplikasi nyata.

01 /
Mengendalikan Browser & Website Otomatis OpenClaw bisa membuka halaman web, mengetik di kolom pencarian, mengklik tombol, mengisi formulir, dan mengambil data dari internet.
02 /
Terhubung ke WhatsApp, Telegram & Email Anda bisa menyuruh agen bekerja cukup dengan mengirim chat biasa dari HP Anda, dan OpenClaw akan membalasnya saat tugas selesai.
03 /
Mengelola File Kerja & Berjalan 24 Jam Mampu membaca/menulis file Excel, Word, atau PDF di komputer/server Anda serta menjalankan tugas rutin setiap pagi secara otomatis.
TAHAP 01 // INPUT
Anda Memberi Perintah
Cukup kirim pesan suara atau teks biasa lewat WhatsApp / Telegram.
TAHAP 02 // HERMES BERPIKIR
Otak Hermes Menyusun Rencana
Hermes memahami maksud Anda dan menentukan urutan langkah kerja.
TAHAP 03 // OPENCLAW BERTINDAK
Tangan OpenClaw Mengeksekusi
OpenClaw membuka browser, mengambil data, dan menyusun file laporan.
TAHAP 04 // OUTPUT TUNTAS
Hasil Masuk ke HP Anda
Pekerjaan beres dalam hitungan detik dan dilaporkan kembali kepada Anda.
[[ 004 // EKSPLORASI VISUAL 3D ]]

Ruang Kerja Virtual Hermes & OpenClaw

Klik nomor bab 01–05 di sisi kanan layar 3D atau ganti mode di bagian bawah untuk melihat secara visual bagaimana Hermes berpikir dan menyuruh OpenClaw bekerja di meja komputer.

WEBGL 3D LIVE STAGE // HERMES + OPENCLAW
BAB 01 / 05
PERKENALAN // SIAPA ITU HERMES?
[[ 01 // HERMES — SANG OTAK PERENCANA ]]

Halo! Saya Hermes. Berbeda dengan chatbot biasa yang hanya bisa membalas teks, saya adalah "Otak Manajer" AI Agent yang mampu menyusun rencana kerja dan mengingat aturan bisnis Anda.

[[ 005 // MANFAAT & KELEBIHAN UTAMA ]]

Mengapa Banyak Orang Beralih ke AI Agent?

Empat kelebihan nyata yang langsung dirasakan ketika Anda menyerahkan pekerjaan berulang kepada duet Hermes dan OpenClaw.

KELEBIHAN 01 A

Bekerja 24 Jam Tanpa Lelah & Lupa

Manusia butuh tidur dan bisa lupa menindaklanjuti chat pelanggan. AI Agent berjaga sepanjang malam untuk membalas pertanyaan pembeli, mencatat pesanan, atau memantau sistem tanpa henti.

SIAGA PENUH 24 / 7 / 365
KELEBIHAN 02 B

Bisa Pindah-Pindah Aplikasi Sendiri

Berkat tangan OpenClaw, Anda tidak perlu lagi menyalin data dari WhatsApp lalu menempelkannya satu per satu ke Excel. Agen bisa memindahkan data antar-aplikasi secara otomatis.

LINTAS APLIKASI ZERO COPY-PASTE
KELEBIHAN 03 C

Menghemat 70% Waktu Kerja Rutin

Tugas membosankan seperti merangkum ratusan email, mengecek harga kompetitor, atau membuat rekap mingguan selesai dalam hitungan detik—waktu Anda bisa dipakai untuk hal yang lebih penting.

EFISIENSI WAKTU +70% LEBIH CEPAT
KELEBIHAN 04 D

Aman & Tetap di Bawah Kendali Anda

AI Agent tidak bertindak liar. Anda bisa memasang aturan "Tanya Izin Dulu" sehingga sebelum mengirim email penting atau memproses transaksi, agen wajib meminta persetujuan Anda via chat.

HUMAN-IN-THE-LOOP 100% TERKENDALI
+ + + +
[[ 005 // DIAGNOSTIK PEMULA ]]

Cari Tahu Agen yang Cocok untuk Bisnis & Aktivitas Anda

Pilih bidang usaha dan pekerjaan yang paling banyak memakan waktu Anda di sebelah kiri. Sistem akan langsung memetakan arsitektur Otak Hermes + Tangan OpenClaw yang siap dipasang.

[[ 3 LANGKAH IDENTIFIKASI TUGAS ]]
Matriks Rekomendasi Agen Otomatis
STATUS: SIAP
[[ HASIL ANALISIS ARSITEKTUR ]]

Agent Customer Support & Order Processing

TUGAS OTAK HERMES:
Membaca niat chat pelanggan, mencocokkan varian produk di katalog, dan menyusun teks penawaran personal yang sopan.
TUGAS TANGAN OPENCLAW:
Memeriksa database stok gudang secara otomatis, memotong kuota sementara, dan mengirim link invoice via WhatsApp.
POTENSI PENGHEMATAN WAKTU:
~140 Jam Kerja / Bulan
[[ 006 // DIREKTORI 24 MODUL MANDIRI ]]

Kurikulum Rekayasa 6 Jalur Belajar

Setiap modul di bawah ini memiliki URL publik mandiri yang dapat dibagikan, lengkap dengan esai teknis mendalam, diagram SVG interaktif, kode sumber lengkap yang telah diuji, dan rubrik evaluasi kompetensi 100 poin.

PILAR:
LEVEL:
[A1-M1 // AI AGENTS] BELUM MULAI

Anatomi LLM & Siklus Hidup AI Agent

Membedah sifat stateless model inferensi dan siklus otonom 5 langkah (Perceive-Plan-Act-Observe-Reflect).

Artefak: Skrip Node.js minimal-agent-loop.mjs
Buka Modul →
[A1-M2 // AI AGENTS] BELUM MULAI

Rekayasa Konteks, System Prompt & JSON Schema

Memaksa model probabilistik mengeluarkan format data deterministik menggunakan JSON Schema ketat.

Artefak: Validator runtime schema-validator.mjs
Buka Modul →
[A1-M3 // AI AGENTS] BELUM MULAI

Mekanisme Tool Calling & Integrasi Fungsi Eksternal

Protokol pemanggilan fungsi dua arah: skema alat, sinyal tool_calls, dan pengembalian observasi.

Artefak: Agent Runner agent-tool-runner.mjs
Buka Modul →
[A1-M4 // AI AGENTS] BELUM MULAI

Manajemen Memori, State & Dasar RAG

Mengelola konteks panjang melalui sliding buffer window dan semantic retrieval vektor.

Artefak: Buffer Memori memory-buffer.mjs
Buka Modul →
[A2-M1 // AI AGENTS] BELUM MULAI

Arsitektur Penalaran Hermes: Tag <tool_call>

Spesifikasi format ChatML dan tag XML native keluarga model Nous Hermes untuk dekomposisi rencana.

Artefak: Parser Tag hermes-parser.mjs
Buka Modul →
[A2-M2 // AI AGENTS] BELUM MULAI

Runtime Eksekusi OpenClaw: Sandboxing & Timeout

Mengamankan aksi dunia nyata dengan AbortController, batas waktu, dan audit trail terstruktur.

Artefak: Worker openclaw-worker.mjs
Buka Modul →
[A2-M3 // AI AGENTS] BELUM MULAI

Orkestrasi End-to-End: Hermes + OpenClaw

Menghubungkan otak penalaran Hermes ke mesin eksekusi OpenClaw dalam pipeline terpadu.

Artefak: Pipeline pipeline.mjs
Buka Modul →
[A2-M4 // AI AGENTS] BELUM MULAI

Studi Kasus: Agen Triase Prospek & Penawaran

Mengkualifikasi kebutuhan klien WhatsApp dan menyusun draf penawaran resmi katalog Z-Automation.

Artefak: Agen Triase triage-agent.mjs
Buka Modul →
[A3-M1 // AI AGENTS] BELUM MULAI

Pola Desain Multi-Agen: Supervisor & Worker

Orkestrasi delegasi tugas terpisah (Periset, Analis, Verifikator) tanpa resiko infinite loop.

Artefak: Router supervisor.mjs
Buka Modul →
[A3-M2 // AI AGENTS] BELUM MULAI

Human-in-the-Loop & Guardrails Keamanan

Gerbang persetujuan manusia untuk aksi berisiko tinggi dan pertahanan prompt injection.

Artefak: Guardrail hitl-guard.mjs
Buka Modul →
[A3-M3 // AI AGENTS] BELUM MULAI

Evaluasi Reliabilitas & Audit Biaya Token

Membangun test harness benchmark otomatis untuk mengukur tool accuracy dan biaya per task.

Artefak: Benchmark eval-runner.mjs
Buka Modul →
[A3-M4 // AI AGENTS] BELUM MULAI

Deployment Agen Produksi: Antrean & Retry

Menerapkan exponential backoff retry dan kunci idempotensi untuk mencegah transaksi ganda.

Artefak: Retry Runner retry-runner.mjs
Buka Modul →
[B1-M1 // WEB DEV] BELUM MULAI

Cara Kerja Internet, HTTP & Siklus Render DOM

Critical Rendering Path: Dari paket byte TCP/TLS menuju Render Tree, Layout, dan GPU Paint.

Artefak: Diagnostik dom-perf.html
Buka Modul →
[B1-M2 // WEB DEV] BELUM MULAI

Arsitektur HTML5 Semantik & Aksesibilitas WCAG

Membangun dokumen bermakna bagi pembaca layar dan crawler sosial media.

Artefak: Template article.html
Buka Modul →
[B1-M3 // WEB DEV] BELUM MULAI

Sistem Layout CSS: Swiss Grid & clamp()

Grid responsif 12 kolom murni dengan garis kisi terekspos dan tipografi fluida.

Artefak: Halaman grid.html
Buka Modul →
[B1-M4 // WEB DEV] BELUM MULAI

JavaScript Runtime: Event Loop & Fetch Asinkron

Memahami Call Stack, Microtask Queue (Promise), dan penanganan request jaringan.

Artefak: Penguji event-loop.js
Buka Modul →
[B2-M1 // WEB DEV] BELUM MULAI

Model Mental React 19: State, Props & Re-render

Siklus Trigger-Render-Commit dan teknik mengisolasi re-render ke pulau komponen.

Artefak: Komponen IsolatedState.tsx
Buka Modul →
[B2-M2 // WEB DEV] BELUM MULAI

Next.js 16: Server Components & SSR Metadata

Batas arsitektur server vs client, penanganan async params, dan dynamic generateMetadata().

Artefak: Page & Client Island page.tsx
Buka Modul →
[B2-M3 // WEB DEV] BELUM MULAI

Koreografi Scroll & Motion GSAP + Lenis

Inersia scroll 60 FPS, paralaks bermakna, dan penanganan ketat prefers-reduced-motion.

Artefak: Skrip scroll.js
Buka Modul →
[B2-M4 // WEB DEV] BELUM MULAI

Pengantar 3D WebGL: Three.js & GLTF

Scene, PerspectiveCamera, pemuatan model GLB, dan teknik optimasi offscreen pause.

Artefak: Kanvas 3D three-scene.html
Buka Modul →
[B3-M1 // WEB DEV] BELUM MULAI

Merancang REST API & Validasi Route Handlers

Membangun endpoint HTTP idempoten, kode status RFC yang benar, dan penanganan error terstruktur.

Artefak: Route Handler route.ts
Buka Modul →
[B3-M2 // WEB DEV] BELUM MULAI

Persistensi Data, Pemodelan Skema & Transaksi

Prinsip ACID, pencegahan race conditions, dan teknik penulisan file atomik.

Artefak: Modul atomic-store.mjs
Buka Modul →
[B3-M3 // WEB DEV] BELUM MULAI

Autentikasi, Keamanan (XSS/CSRF) & Headers

Mengamankan aplikasi web dari serangan siber dengan cookie HttpOnly dan Content Security Policy.

Artefak: Middleware middleware.ts
Buka Modul →
[B3-M4 // WEB DEV] BELUM MULAI

Alur Kerja Git, Core Web Vitals & Deployment

Standar audit LCP < 2.5s, stabilitas CLS, manajemen rahasia env, dan rilis cloud.

Artefak: Checklist Deployment & Git Hook
Buka Modul →
[[ 007 // SIMULATOR PRAKTIK PEMULA ]]

Coba Beri Tugas ke Hermes & OpenClaw

Pilih salah satu skenario pekerjaan sehari-hari di sebelah kiri, lalu amati di layar kanan bagaimana Otak Hermes menyusun rencana dan Tangan OpenClaw mengeksekusinya.

[[ LANGKAH 1 // PILIH CONTOH TUGAS HARIAN ]]
Pasang Agen CS Ini di Bisnis Saya →
[[ ALUR KERJA HERMES + OPENCLAW ]] STATUS: SIAP
01 // PERINTAH DARI MANUSIA INPUT

Pesan WhatsApp masuk dari pelanggan: "Halo kak, sepatu lari seri Aero ukuran 42 warna hitam masih ada? Kalau ada saya mau pesan 1 pasang."

02 // OTAK HERMES (MENYUSUN RENCANA) REASONING ENGINE

1. Mengenali niat pembeli (Cek stok & order sepatu Aero ukuran 42 hitam). 2. Memeriksa tabel stok gudang: tersedia 4 pasang, harga Rp 450.000. 3. Menyusun balasan sopan beserta rincian pembayaran.

03 // TANGAN OPENCLAW (MENGGERAKKAN APLIKASI) ACTION CLAW

Membuka file Stok_Gudang.xlsx → mengurangi stok sementara 1 unit → membuat tautan invoice pembayaran → langsung mengirim balasan ke WhatsApp pembeli.

04 // HASIL AKHIR YANG ANDA TERIMA OUTPUT SELESAI

Pembeli terlayani dalam 8 detik tanpa Anda harus membuka laptop atau memeriksa tabel stok secara manual.

Peran: Admin CS Toko Sepatu. Tugas: Balas chat WhatsApp pelanggan yang menanyakan stok. Alat (OpenClaw): Baca file Stok_Gudang.xlsx dan kirim balasan WhatsApp. Aturan (Hermes): Jawab ramah, sebutkan sisa stok akurat, dan jangan mengarang harga di luar tabel. Mode Pengawasan: Eksekusi otomatis sampai tuntas.
Siap Membangun Asisten AI Agent Pertama Anda?
LANJUTKAN GULIR
LANJUTKAN GULIR
Terus Gulir
Untuk Melihat Karya
Portofolio
Halaman Berikutnya
0
0
0
0
0
0