Jumat, 11 September 2026
Latex dan Antigravity
https://gist.github.com/K8theGreat99/1803979599cdbdafda4c2c8fde6740b7
PERTAHANKAN dalam Folder
Google Antigravity untuk Penulis Fiksi
Panduan Referensi
Apa itu Antigravity?
Google Antigravity adalah IDE (Integrated Development Environment) berbasis AI, yaitu platform pengembangan yang dirancang untuk pengembangan perangkat lunak. Namun, platform ini juga dapat dimanfaatkan secara kuat untuk analisis naskah, penyuntingan, dan pengelolaan story bible.
Kemampuan utama untuk penulis:
Pemrosesan multi-agen secara paralel — menjalankan beberapa tugas penyuntingan dan analisis secara bersamaan.
Basis pengetahuan persisten — agen mempelajari dunia cerita, gaya bicara karakter, dan pola penulisan Anda dari waktu ke waktu.
Sistem artefak — menghasilkan keluaran terstruktur seperti laporan, wiki, dan dokumen analisis, bukan hanya respons percakapan.
Komentar bergaya Google Docs — meninjau dan menyempurnakan saran agen secara langsung pada bagian tertentu.
Penyuntingan file secara langsung — menerima perubahan untuk memodifikasi file naskah secara langsung.
Keuntungan penyuntingan langsung ini antara lain:
Tidak perlu melakukan copy-paste dari percakapan ke naskah.
Tidak ada risiko prompt atau bagian tambahan dari respons AI, seperti "Berikut adalah dialog yang telah ditulis ulang", ikut masuk secara tidak sengaja ke dalam naskah.
Anda dapat memberikan komentar terhadap perubahan yang diusulkan. Berbeda dengan beberapa IDE lain yang hanya menyediakan pilihan menerima atau menolak perubahan, Antigravity memungkinkan Anda mengomentari perubahan tertentu dan meminta penyempurnaan lebih lanjut.
Keunggulan Utama bagi Penulis
✅ Mengotomatiskan tugas penyuntingan yang membosankan
✅ Membangun series bible secara otomatis — mengekstraksi informasi dunia cerita ketika Anda menulis.
✅ Menjaga konsistensi antar buku — agen dapat menggunakan pengetahuan bersama.
✅ Mempelajari gaya penulisan Anda — agen menjadi semakin baik dari waktu ke waktu berdasarkan umpan balik Anda.
✅ Pemrosesan paralel — menjalankan beberapa proses penyuntingan secara bersamaan.
✅ Modifikasi file secara langsung — menerima perubahan tanpa perlu menyalin dan menempelkan teks secara manual.
✅ Workspace persisten — basis pengetahuan terus berkembang pada setiap sesi.
✅ Terisolasi untuk setiap seri — dunia cerita yang berbeda tidak saling mengganggu.
Format File yang Didukung
Markdown (
.md)Microsoft Word (
.docx)PDF — hanya dapat dibaca untuk referensi dan analisis.
Model yang Didukung
Gemini 3 Pro — High & Low
Gemini 3 Flash
Claude Sonnet 4.5
Claude Opus 4.5
GPT-OSS 120B
Alur Kerja Praktis Agen AI untuk Penulis
Catatan: contoh-contoh berikut hanyalah ide. Anda dapat membuat jenis agen apa pun yang dapat Anda bayangkan.
1. Agen Konsistensi Gaya Bicara Karakter
Pengaturan
Latih agen menggunakan contoh dialog karakter.
Tentukan pola bicara, kosakata, dan idiom.
Catat tingkat formalitas dalam berbagai konteks.
Tugas Agen
Agen:
Memindai seluruh dialog karakter tertentu.
Menandai dialog yang tidak sesuai dengan karakter.
Menyarankan penulisan ulang yang sesuai dengan gaya bicara karakter.
Melacak perkembangan gaya bicara dari satu buku ke buku berikutnya, baik perubahan yang disengaja maupun tidak disengaja.
Tugas Anda
Meninjau perubahan yang disarankan melalui tampilan diff.
Memberikan komentar seperti:
"Terlalu tiba-tiba — tambahkan sedikit kehangatan."
"Sempurna — pertahankan."
Agen kemudian mempelajari preferensi Anda dari waktu ke waktu.
2. Pemindai Kelemahan Penulisan Pribadi
Pengaturan
Konfigurasikan agen berdasarkan kelemahan penulisan Anda sendiri.
Contohnya:
Terlalu sering menggunakan kata just.
Menggunakan kalimat pasif dalam adegan aksi.
Kesalahan comma splice.
Tugas Agen
Agen:
Mengategorikan penggunaan kata atau struktur tertentu berdasarkan konteks.
Menyarankan penghapusan atau penggantian.
Memberikan jumlah kemunculan dan lokasinya.
Melacak perkembangan kualitas tulisan dari satu draf ke draf berikutnya.
Contoh Output
Ditemukan 347 penggunaan kata "just"
- 89 berkaitan dengan waktu (diperlukan):
"just yesterday"
- 258 kandidat kata pengisi:
→ 127 dalam dialog (perlu ditinjau satu per satu)
→ 131 dalam narasi (kemungkinan dapat dihapus)
3. Pemeriksa Kontinuitas
Tugas Agen
Agen memeriksa:
Konsistensi timeline.
Detail karakter, seperti warna mata, usia, dan latar belakang.
Alur cerita, termasuk alur yang sudah diperkenalkan tetapi belum memiliki penyelesaian.
Kontradiksi dalam pembangunan dunia cerita.
Referensi Silang
Agen melakukan referensi silang terhadap:
Series bible dalam folder
shared/.Buku-buku sebelumnya dalam seri.
Aturan sihir atau aturan dunia yang telah ditetapkan.
4. Ekstraktor World-Building
Tugas Agen
Agen:
Membaca naskah.
Mengidentifikasi informasi pembangunan dunia, seperti:
aturan sihir,
geografi,
budaya,
politik.
Membuat wiki terstruktur di:
shared/world-building/
Menandai kontradiksi dengan lore yang telah ditetapkan.
Berguna untuk
Membangun series bible secara otomatis.
Memastikan konsistensi antar buku.
Membuat materi referensi.
5. Audit Dialog
Tugas Agen
Agen:
Melacak siapa yang berbicara pada setiap bagian.
Memastikan setiap karakter memiliki gaya bicara yang berbeda.
Menandai masalah pada dialogue tags.
Menganalisis pola bicara setiap karakter.
6. Analisis Kualitas Prosa
Agen Memeriksa
Keseimbangan detail sensorik — apakah terlalu banyak menggunakan penglihatan dan terlalu sedikit menggunakan sentuhan?
Analisis pacing — bagian yang terlalu lambat, terlalu cepat, atau panjang adegan yang tidak proporsional.
Pelacakan foreshadowing — memastikan elemen yang diperkenalkan memiliki hubungan dengan payoff.
Konsistensi POV — mendeteksi perpindahan sudut pandang yang tidak disengaja atau head-hopping.
Variasi dan ritme kalimat.
7. Manajemen Subplot
Agen Melacak
Subplot yang sedang aktif.
Subplot yang telah selesai.
Alur atau thread yang ditinggalkan.
Konsistensi subplot antar buku.
Struktur Workspace
Rekomendasi: Satu Workspace untuk Satu Seri Buku
Struktur yang direkomendasikan:
SeriesName-Workspace/
├── books/
│ ├── book1-title/
│ │ └── manuscript.md
│ ├── book2-title/
│ │ └── manuscript.md
│ └── book3-title/
│ └── manuscript.md
├── shared/
│ ├── world-building/
│ │ ├── magic-system.md
│ │ ├── political-structures.md
│ │ └── geography.md
│ ├── characters/
│ │ ├── character-profiles.md
│ │ └── character-relationships.md
│ └── series-bible/
│ ├── timeline.md
│ └── themes.md
├── artifacts/
│ └── (analisis yang dibuat oleh agen)
└── .antigravity/
└── workspace-specific-rules
Mengapa Struktur Ini Digunakan?
Setiap buku menjadi proyek terpisah dalam satu workspace.
Pengetahuan bersama dapat digunakan oleh seluruh buku dalam seri.
Seri yang berbeda memiliki workspace yang benar-benar terpisah sehingga tidak terjadi pencampuran informasi.
Agen dapat menggunakan informasi tingkat seri untuk menjaga konsistensi ketika bekerja pada buku tertentu.
Aturan Global vs. Aturan Khusus Workspace
Aturan Global
Aturan yang berlaku untuk seluruh tulisan Anda.
Contohnya:
"Tandai penggunaan 'just' yang berlebihan sebagai kata pengisi."
"Berikan peringatan terhadap penggunaan kalimat pasif dalam adegan aksi."
"Periksa comma splice."
Pola penulisan pribadi lain yang ingin Anda deteksi.
Aturan Khusus Workspace
Aturan yang hanya berlaku untuk seri tertentu.
Contohnya:
Profil gaya bicara karakter.
Aturan sistem sihir.
Aturan konsistensi world-building.
Struktur budaya dan politik dunia tersebut.
Konvensi penamaan yang digunakan dalam semesta cerita.
Cara Mengatur
Global: Settings → berlaku untuk semua proyek.
Workspace: Di dalam folder workspace tertentu → hanya berlaku pada workspace tersebut.
Sistem Artifact
Apa yang Dimaksud dengan Artifact?
Artifact adalah hasil kerja terstruktur yang dibuat oleh agen, bukan sekadar respons percakapan.
Contohnya:
Daftar tugas.
Rencana implementasi.
Laporan analisis.
Screenshot atau rekaman.
Wiki karakter.
Dokumen timeline.
Laporan plot hole.
Jenis Artifact yang Penting bagi Penulis
Implementation Plan
Pendekatan yang diusulkan agen sebelum pekerjaan dimulai.
Dapat ditinjau sebelum agen menjalankan tugas.
Anda dapat memberikan komentar untuk mengubah arah pekerjaan.
Task List
Berisi langkah konkret yang akan dilakukan agen.
Contoh:
Scan Book 2
↓
Extract world-building
↓
Cross-check Book 1
↓
Update shared wiki
Analysis Reports
Berisi temuan terstruktur.
Contohnya:
Analisis gaya bicara karakter.
Masalah kontinuitas.
Analisis pacing.
Review Changes / Diffs
Menampilkan:
TEKS LAMA
↓
TEKS BARU
↓
ALASAN PERUBAHAN
Anda dapat:
menerima,
menolak,
atau memberikan komentar untuk penyempurnaan.
Komentar Bergaya Google Docs
Cara Kerjanya
Agen menghasilkan artifact, seperti analisis atau saran.
Anda memilih teks tertentu dalam artifact.
Anda menambahkan komentar.
Agen membaca komentar dan menyesuaikan hasil pekerjaannya.
Proses berlangsung secara asynchronous sehingga agen dapat tetap bekerja ketika Anda melakukan review.
Contoh Penggunaan
Saran Gaya Bicara Karakter
USULAN:
"Let's try it."
Komentar Anda:
"Terlalu singkat. Elara percaya diri, tetapi tidak berbicara secara ketus kepada sekutunya. Tambahkan kehangatan."
Peringatan World-Building
INKONSISTENSI:
Bab 3 mengatakan bahwa sihir api dipelajari.
Bab 15 mengatakan bahwa kemampuan elemen diwariskan.
Komentar Anda:
"Ini bukan inkonsistensi. Kemampuan diwariskan, sedangkan tekniknya dipelajari."
Saran Prosa
HAPUS:
"She just wanted to help"
Komentar Anda:
"Pertahankan. Kata 'just' di sini sengaja digunakan untuk menekankan sifat rendah hatinya."
Learning Loop
Seiring waktu, agen mempelajari:
Preferensi spesifik Anda untuk setiap karakter.
Pengecualian terhadap aturan umum.
Kapan penggunaan kalimat pasif memang disengaja.
Pilihan gaya penulisan pribadi Anda.
Dengan demikian, umpan balik Anda menjadi bagian dari proses pembelajaran agen.
Alur Review Changes / Diffs
Apa yang Akan Anda Lihat?
Contoh:
PERUBAHAN 1 — Bab 3, Baris 145
──────────────────────────────
SEKARANG:
"Oh, um, I suppose we could try that approach."
USULAN:
"Let's try it."
ALASAN:
Menghilangkan keraguan; Elara percaya diri,
bukan tunduk atau terlalu deferensial.
Pilihan Anda
Accept All — menerapkan seluruh perubahan yang disarankan.
Reject All — mempertahankan seluruh teks seperti semula.
Review Changes — meninjau perubahan satu per satu.
Review Individual
Anda dapat:
Memilih kata atau frasa tertentu untuk diberi komentar.
Meminta penyempurnaan:
"Terlalu singkat — perlu lebih hangat."
Menyetujui perubahan:
"Sempurna — pertahankan."
Menolak dengan memberikan alasan:
"'Quite' memang disengaja — ini adalah gaya bicara formal ketika berbicara dengan bangsawan."
Apa yang Terjadi Selanjutnya?
Perubahan yang diterima akan secara otomatis memodifikasi file naskah Anda sehingga tidak perlu melakukan copy-paste secara manual.
Transfer Pengetahuan Selektif Antar Buku
Ketika Memulai Buku 2 dalam Sebuah Seri
PERTAHANKAN dalam Folder shared/
Lembar pengembangan karakter.
Detail world-building.
Aturan sistem sihir.
Alur cerita yang masih berlangsung.
Tema yang berlaku untuk seluruh seri.
JANGAN DIBAWA KE DEPAN
Subplot yang sudah selesai di Buku 1.
Perkembangan karakter yang sudah selesai.
Detail plot yang hanya berkaitan dengan Buku 1.
Caranya
Workspace Buku 1 menghasilkan artifact yang komprehensif.
Pilih secara manual artifact mana yang relevan untuk Buku 2.
Simpan informasi yang relevan dalam folder
shared/.Agen Buku 2 menggunakan pengetahuan bersama tersebut untuk menjaga konsistensi.
Informasi yang hanya berkaitan dengan Buku 1 dapat dibuang atau diarsipkan.
Planning Mode vs. Fast Mode
Planning Mode
Direkomendasikan untuk sebagian besar pekerjaan penulisan.
Agen membuat rencana terperinci sebelum bekerja.
Menghasilkan artifact berupa Implementation Plan.
Anda dapat meninjau dan menyetujui rencana sebelum eksekusi.
Cocok untuk:
analisis kompleks,
pekerjaan multi-langkah,
penyuntingan.
Fast Mode
Langsung menjalankan pekerjaan.
Tidak menghasilkan artifact berupa rencana.
Cocok untuk:
perbaikan cepat,
pertanyaan sederhana.
Rekomendasi untuk Pekerjaan Penulisan
Gunakan Planning Mode agar Anda tetap memiliki kendali dan dapat melakukan review sebelum perubahan diterapkan.
Menjalankan Banyak Agen Secara Bersamaan
Kekuatan Pemrosesan Paralel
Anda dapat menjalankan beberapa agen secara bersamaan pada naskah yang sama:
NASKAH
│
┌───────────┼───────────┐
│ │ │
▼ ▼ ▼
Agent A Agent B Agent C
│ │ │
Character Prose World-Building
Voice Quality Extraction
│ │ │
└───────────┼───────────┘
│
Agent D
Continuity
│
Agent E
Timeline
│
▼
ARTIFACTS
│
▼
REVIEW
Contoh Pembagian Agen
Agent A: Konsistensi gaya bicara karakter.
Agent B: Analisis kualitas prosa.
Agent C: Ekstraksi world-building.
Agent D: Pemeriksaan kontinuitas.
Agent E: Verifikasi timeline.
Setiap agen menghasilkan artifact tersendiri untuk Anda tinjau.
Manager View vs. Editor View
Manager View
Digunakan untuk:
Mengatur beberapa agen.
Mengorkestrasi pekerjaan.
Meninjau berbagai artifact.
Editor View
Digunakan untuk:
Penyuntingan file secara tradisional.
Menggunakan sidebar AI.
Anda dapat berpindah antara kedua tampilan tersebut sesuai kebutuhan.
Instalasi
Unduh:
antigravity.google/download
Pilih Versi
x64 — paling umum untuk prosesor Intel/AMD.
ARM64 — untuk perangkat berbasis Qualcomm/ARM.
Cara Memeriksa Jenis Prosesor di Windows
Tekan Windows + I.
Pilih System → About.
Cari bagian System type.
Jika tertulis x64-based processor, pilih versi x64.
Jika tertulis ARM-based processor, pilih versi ARM64.
Dokumen sumber menyatakan bahwa Antigravity tersedia secara gratis selama public preview dengan batas penggunaan yang cukup besar.
Checklist Memulai
Unduh dan instal Antigravity — x64 untuk sebagian besar laptop Windows.
Buat folder workspace untuk seri yang sedang dikerjakan.
Siapkan struktur folder:
books/shared/artifacts/
Konfigurasikan Planning Mode, bukan Fast Mode.
Atur Global Rules untuk kelemahan penulisan yang bersifat umum.
Atur Workspace Rules untuk pengetahuan khusus seri.
Mulai dengan satu agen sederhana, misalnya Personal Writing Weakness Scanner.
Berlatih meninjau artifact dan memberikan komentar.
Bereksperimen dengan workflow diff / accept / reject.
Secara bertahap tambahkan agen yang lebih kompleks setelah memahami sistem.
Hal-Hal Penting untuk Diingat
Satu workspace untuk satu seri buku, bukan satu workspace untuk setiap buku.
Gunakan Global Rules untuk pola penulisan umum dan Workspace Rules untuk pengetahuan khusus seri.
Tinjau artifact menggunakan komentar, bukan hanya melalui chat.
Workflow accept/reject dapat menghemat banyak waktu.
Agen belajar dari umpan balik Anda — semakin sering digunakan, semakin baik kemampuannya menyesuaikan diri.
File Markdown (
.md) sangat cocok untuk workflow penulisan Anda.
Ide Website
| No | Jenis Halaman | Tujuan Utama | Contoh |
|---|---|---|---|
| 1 | Landing Page | Mendorong satu tindakan/konversi | Promosi produk, pendaftaran webinar |
| 2 | Homepage | Menjadi halaman utama sebuah website | Beranda perusahaan |
| 3 | About Page | Menjelaskan profil organisasi/brand | Tentang Kami |
| 4 | Product Page | Menjelaskan satu produk | Detail laptop |
| 5 | Service Page | Menjelaskan layanan | Jasa konsultasi |
| 6 | Portfolio Page | Menampilkan karya/proyek | Portfolio mahasiswa/desainer |
| 7 | Blog Page | Menampilkan artikel/informasi | Blog teknologi |
| 8 | Article Page | Menampilkan satu artikel secara lengkap | Artikel ilmiah/populer |
| 9 | Contact Page | Menyediakan informasi kontak | Formulir kontak |
| 10 | FAQ Page | Menjawab pertanyaan umum | FAQ produk |
| 11 | Pricing Page | Menampilkan paket dan harga | Paket SaaS |
| 12 | Login Page | Autentikasi pengguna | Login aplikasi |
| 13 | Register/Sign Up Page | Pendaftaran pengguna | Registrasi akun |
| 14 | Dashboard | Menampilkan data dan kontrol pengguna | Dashboard admin |
| 15 | Profile Page | Menampilkan profil pengguna | Profil mahasiswa |
| 16 | Search Results Page | Menampilkan hasil pencarian | Hasil pencarian produk |
| 17 | E-commerce Product Listing | Menampilkan kumpulan produk | Katalog toko online |
| 18 | Shopping Cart | Mengelola barang yang akan dibeli | Keranjang belanja |
| 19 | Checkout Page | Menyelesaikan transaksi | Pembayaran online |
| 20 | Booking Page | Melakukan pemesanan | Booking hotel |
| 21 | Event Page | Informasi sebuah acara | Seminar/workshop |
| 22 | News Page | Menampilkan berita | Portal berita |
| 23 | Documentation Page | Menjelaskan penggunaan sistem/API | Dokumentasi software |
| 24 | Tutorial Page | Memberikan panduan langkah demi langkah | Tutorial pemrograman |
| 25 | Pricing/Subscription Page | Mengarahkan pengguna memilih paket | Paket membership |
| 26 | 404 Error Page | Memberi informasi halaman tidak ditemukan | "Page Not Found" |
| 27 | Coming Soon Page | Memberi informasi sebelum website diluncurkan | Website dalam pembangunan |
| 28 | Thank You Page | Konfirmasi setelah aksi pengguna | Setelah submit formulir |
| 29 | Confirmation Page | Mengonfirmasi transaksi/pendaftaran | Pesanan berhasil |
| 30 | Web Application Page | Menjalankan fungsi aplikasi | Sistem akademik |
Jika dikelompokkan berdasarkan fungsi
Lebih mudah untuk mahasiswa jika jenis halaman web dikelompokkan menjadi 7 kategori besar:
1. Informational
- Homepage
- About
- Service
- FAQ
- Contact
2. Marketing
- Landing Page
- Product Page
- Pricing Page
- Campaign Page
3. Content
- Blog
- Article
- News
- Tutorial
- Documentation
4. E-Commerce
- Product Listing
- Product Detail
- Cart
- Checkout
- Order Confirmation
5. User & Authentication
- Login
- Register
- Profile
- Forgot Password
6. Application
- Dashboard
- Admin Panel
- Analytics
- Settings
- Management System
7. Utility/System
- Search Results
- 404
- Coming Soon
- Maintenance
- Thank You
| Slash command | Fungsi |
|---|---|
/web | Merancang konsep website |
/website | Membuat spesifikasi website lengkap |
/landing | Merancang landing page |
/homepage | Merancang homepage |
/ecommerce | Merancang website e-commerce |
/portfolio | Merancang website portfolio |
/dashboard | Merancang dashboard web |
/admin | Merancang admin panel |
/blog | Merancang website/blog |
/company | Merancang company profile |
/saas | Merancang website SaaS |
/catalog | Merancang katalog produk |
/wireframe | Membuat wireframe |
/uiux | Membuat rancangan UI/UX |
/designsystem | Membuat design system |
/responsive | Merancang versi desktop/tablet/mobile |
/prototype | Merancang alur prototype/interaksi |
/prd | Membuat Product Requirements Document |
/sitemap | Membuat struktur/sitemap website |
/userflow | Membuat user flow |
/component | Merancang komponen UI |
/html | Mengubah desain menjadi HTML/CSS |
/frontend | Membuat implementasi frontend |
/sites | Membuat website dengan AI website builder |
/brief
↓
/prd
↓
/sitemap
↓
/userflow
↓
/wireframe
↓
/uiux
↓
/designsystem
↓
/prototype
↓
/html
↓
/frontend
↓
/responsive
/landing Buat landing page untuk brand "Kopi Kelapa". Target: mahasiswa dan pekerja muda. Gaya tropical, modern, fresh, premium.
| Pertemuan | Fokus | Project |
|---|---|---|
| 1 | Web & UI/UX Fundamentals | Brief |
| 2 | HTML Semantic | Landing Page |
| 3 | CSS & Layout | Landing Page |
| 4 | Responsive Design | Homepage |
| 5 | UI Components | About + Product |
| 6 | CSS Grid | Portfolio |
| 7 | Content Design | Blog |
| 8 | Form & Validation | Contact |
| 9 | UTS | Website Statis |
| 10 | JavaScript | Interactive Website |
| 11 | Login/Register | Authentication |
| 12 | Dashboard | User Dashboard |
| 13 | Database & CRUD | Product Management |
| 14 | E-Commerce | Cart + Checkout |
| 15 | Web Application | Customer + Admin |
| 16 | UAS | Final Web Application |
STUDI KASUS UTAMA
Saya sarankan satu brand/proyek dikembangkan sepanjang semester, sehingga mahasiswa melihat evolusi website secara nyata.
Studi Kasus: Kopi Kelapa
Kopi Kelapa — Tropical Coffee for Modern Lifestyle
Target:
- Mahasiswa
- Pekerja muda
- Komunitas kreatif
- Konsumen urban
Karakter:
Tropical + Modern + Fresh + Premium + Local
LEVEL 1 — LANDING PAGE
Tujuan
Mahasiswa belajar membuat halaman promosi dengan fokus pada conversion.
Materi
- HTML semantic
- CSS
- Typography
- Color
- Hero section
- CTA
- Image
- Layout
- Flexbox
Studi kasus
KOPI KELAPA Kopi Kelapa Rasa Tropis untuk Hari yang Lebih Baik Perpaduan kopi berkualitas dan kelapa pilihan. [ BELI SEKARANG ] [ LIHAT PRODUK ]
Output
1-page promotional landing page
LEVEL 2 — HOMEPAGE
Landing page dikembangkan menjadi website.
Struktur
HEADER ↓ HERO ↓ FEATURED PRODUCT ↓ ABOUT ↓ BENEFITS ↓ TESTIMONIAL ↓ CTA ↓ FOOTER
Kompetensi
Mahasiswa memahami:
- Navigation
- Section
- Component
- Website architecture
- Responsive layout
LEVEL 3 — ABOUT
Studi kasus
"Cerita di Balik Kopi Kelapa"
Konten:
- Brand story
- Vision
- Mission
- Values
- Team
- Sustainability
Struktur
ABOUT KOPI KELAPA ↓ OUR STORY ↓ OUR VALUES ↓ OUR TEAM ↓ OUR MISSION
Kompetensi
Web content + visual storytelling
LEVEL 4 — PRODUCT / SERVICE
Website mulai menjadi product-oriented website.
Product
Kopi Kelapa Original Kopi Kelapa Latte Kopi Kelapa Chocolate Kopi Kelapa Matcha
Product card:
┌──────────────────┐ │ │ │ PRODUCT IMG │ │ │ ├──────────────────┤ │ Kopi Kelapa │ │ Original │ │ │ │ Rp18.000 │ │ │ │ [ ADD TO CART ] │ └──────────────────┘
Kompetensi
- Card design
- Product grid
- Detail page
- CTA
- UI component
LEVEL 5 — PORTFOLIO
Untuk memperkenalkan konsep gallery/grid system.
Studi kasus
Kopi Kelapa Brand Portfolio
Isi:
- Product photography
- Packaging
- Café design
- Social media campaign
- Event
- Branding
PORTFOLIO ┌────────┬────────┬────────┐ │ │ │ │ │ Project│ Project│ Project│ │ 01 │ 02 │ 03 │ │ │ │ │ ├────────┼────────┼────────┤ │ Project│ Project│ Project│ │ 04 │ 05 │ 06 │ └────────┴────────┴────────┘
Kompetensi
CSS Grid + responsive gallery
LEVEL 6 — BLOG
Website berkembang menjadi content platform.
Studi kasus
KOPI KELAPA JOURNAL ☕ Tips Kopi 🌴 Lifestyle 📚 Edukasi 🌱 Sustainability
Contoh artikel:
5 Alasan Kopi dan Kelapa Menjadi Kombinasi Unik
Mahasiswa belajar:
- Article
- Category
- Author
- Date
- Thumbnail
- Detail article
- Related article
LEVEL 7 — CONTACT
Mahasiswa mulai mengenal form interaction.
Form
CONTACT US Nama [________________] Email [________________] Subjek [________________] Pesan [________________] [ KIRIM PESAN ]
Materi:
- Form
- Input
- Validation
- Button
- UX feedback
LEVEL 8 — LOGIN / REGISTER
Website berubah dari informational website → user-based website.
Login
┌─────────────────────┐ │ KOPI KELAPA │ │ │ │ Email │ │ [_______________] │ │ │ │ Password │ │ [_______________] │ │ │ │ [ LOGIN ] │ │ │ │ Belum punya akun? │ │ Register │ └─────────────────────┘
Register
Nama Email Password Confirm Password [ CREATE ACCOUNT ]
Materi:
- Authentication concept
- Form validation
- Session
- User state
- Security awareness
LEVEL 9 — DASHBOARD
Setelah login, mahasiswa membuat personal/customer dashboard.
┌──────────────┬─────────────────────────────┐ │ DASHBOARD │ Welcome, Fajar │ │ │ │ │ Dashboard │ ┌──────┐ ┌──────┐ │ │ Orders │ │Orders│ │Points│ │ │ Wishlist │ │ 12 │ │ 850 │ │ │ Profile │ └──────┘ └──────┘ │ │ Settings │ │ │ Logout │ Recent Orders │ │ │ ┌─────────────────────────┐ │ │ │ │ #001 Kopi Original │ │ │ │ │ #002 Kopi Latte │ │ │ │ └─────────────────────────┘ │ └──────────────┴─────────────────────────────┘
Materi:
- Dashboard
- Sidebar
- Table
- Cards
- Data visualization
- User state
LEVEL 10 — E-COMMERCE
Semua komponen sebelumnya mulai digabung.
Customer Journey
HOME ↓ PRODUCT ↓ PRODUCT DETAIL ↓ ADD TO CART ↓ SHOPPING CART ↓ CHECKOUT ↓ PAYMENT ↓ ORDER ↓ ORDER CONFIRMATION
Fitur
- Product catalog
- Search
- Filter
- Product detail
- Cart
- Quantity
- Checkout
- Order
- Customer account
Pada tahap ini mahasiswa mulai memahami:
Website bukan lagi sekumpulan halaman, tetapi sebuah sistem.
LEVEL 11 — WEB APPLICATION
Tahap terakhir adalah mengubah website menjadi aplikasi web yang memiliki business logic.
Contohnya:
Customer
REGISTER ↓ LOGIN ↓ BROWSE PRODUCT ↓ ADD CART ↓ CHECKOUT ↓ ORDER ↓ TRACK ORDER
Admin
ADMIN LOGIN ↓ DASHBOARD ↓ PRODUCT MANAGEMENT ↓ ORDER MANAGEMENT ↓ CUSTOMER MANAGEMENT ↓ REPORT
Arsitektur Akhir
KOPI KELAPA │ ┌───────────┴───────────┐ │ │ CUSTOMER ADMIN │ │ Homepage Dashboard │ │ Products Products CRUD │ │ Cart Order CRUD │ │ Checkout Customer Data │ │ Order Reports │ My Account
Roadmap Kompetensi
Kurikulum ini juga dapat dipetakan menjadi perjalanan teknologi:
LEVEL 1 HTML + CSS │ ▼ LEVEL 2 HTML + CSS + RESPONSIVE │ ▼ LEVEL 3 HTML + CSS + JAVASCRIPT │ ▼ LEVEL 4 UI COMPONENT + STATE │ ▼ LEVEL 5 FORM + VALIDATION │ ▼ LEVEL 6 AUTHENTICATION │ ▼ LEVEL 7 DATABASE + CRUD │ ▼ LEVEL 8 BUSINESS LOGIC │ ▼ LEVEL 9 E-COMMERCE │ ▼ WEB APPLICATION
Kamis, 10 September 2026
Membuat Virtual Lab
@Sites Buat virtual lab titrasi asam-basa yang interaktif. Tampilkan meja laboratorium dengan buret, statif, erlenmeyer, larutan titran, indikator, dan gelas kimia. User dapat memilih jenis asam, jenis basa, konsentrasi awal, volume sampel, serta menambahkan titran sedikit demi sedikit melalui kontrol volume. Visualisasikan perubahan warna larutan secara bertahap sesuai kondisi titrasi, tampilkan nilai pH secara real-time, volume titran yang sudah ditambahkan, titik ekuivalen, serta grafik kurva titrasi pH terhadap volume titran. Tambahkan tombol Teskan, Tambah 1 mL, Auto Titrate, Pause, dan Reset. Setelah eksperimen selesai, tampilkan ringkasan hasil dan interpretasi singkat. Buat sites menjadi file html yang bisa saya download.
Langganan:
Postingan (Atom)
-
https://www.youtube.com/watch?v=MDdT0WtRniE&list=PLjRBWix725xqEddhpGsg8_VmrIGoaFhs6 https://www.youtube.com/watch?v=FpwcfLHswUo&li...
-
https://chatgpt.com/c/6a977781-74a4-83ec-9398-d58d36d3d82a https://stratoflow.com/web-application-development/?utm_source=chatgpt.com -
https://www.geeksforgeeks.org/javascript/form-validation-using-javascript/ https://www.geeksforgeeks.org/html/javascript-application-for-e...
