Tipografi: Google Fonts (Poppins untuk judul, Inter untuk teks konten).
Framework: HTML5, Tailwind CSS (via CDN), Font Awesome untuk ikon.
Komponen Utama:
Navbar: Sticky dengan efek backdrop blur dan logo di kiri.
Hero Section: Layout 2 kolom (Teks besar di kiri, gambar grayscale dengan hover effect di kanan).
About Section: Layout minimalis dengan separator garis horizontal.
Loading State: Overlay putih dengan spinner animasi sebelum data termuat.
2. Arsitektur Sistem (Backend & Integrasi)
Teknologi: Google Apps Script (GAS).
Arsitektur: MPA (Multi-Page Application) sederhana menggunakan parameter URL (?p=admin).
Database: Google Sheets sebagai penyimpanan teks (Key-Value pair).
ID Spreadsheet:11UxnXyVTVnsAiwrnVccvscrjfLIQlgwaOESUXlfMVjE
Penyimpanan File: Google Drive untuk gambar/foto.
ID Folder:1IbPAgfnuH7BIwgj1e8Poq1lWDOhObj4e
Metode Komunikasi: Asynchronous menggunakan google.script.run dengan withSuccessHandler dan withFailureHandler.
3. Fitur Utama & Logika
CMS Dinamis: Admin dapat mengubah judul hero, subtitle, teks "About Us", dan mengganti gambar melalui dashboard khusus.
Fallback Mode: Kode memiliki logika deteksi lingkungan. Jika dijalankan di luar Google Apps Script (seperti pratinjau lokal), aplikasi akan menampilkan mock data agar UI tetap terlihat.
Setup Otomatis: Fungsi setupDatabase() di sisi server untuk menyiapkan struktur kolom dan data awal pada Google Sheets secara otomatis.
Image Direct Link: Konversi ID file Drive menjadi URL akses langsung (lh3.googleusercontent.com/d/ID) agar gambar bisa dirender langsung di tag <img>.
4. Struktur File
Code.gs: Menangani routing doGet, komunikasi database, upload file ke Drive, dan penyediaan URL script.
index.html: Halaman publik yang mengambil dan merender data secara dinamis.
admin.html: Dashboard untuk input teks dan upload file ke Drive.
5. Instruksi Deployment
Jalankan fungsi setupDatabase di Apps Script.
Deploy sebagai Web App.
Set akses ke "Anyone".
Gunakan URL hasil deploy untuk mengakses website dan tambahkan ?p=admin untuk masuk ke CMS.
Gunakan prompt ini untuk membangun kembali aplikasi serupa dengan spesifikasi lengkap:
Peran:
Bertindaklah sebagai Senior Full-stack Developer yang ahli dalam Google Apps Script (GAS).
Deskripsi Proyek:
Buatlah aplikasi web dashboard CRUD (Create, Read, Update, Delete) yang terhubung dengan Google Spreadsheet sebagai database dan Google Drive sebagai penyimpanan gambar.
Spesifikasi Teknis:
Backend (Code.gs):
Spreadsheet Integration: Kelola data pada sheet spesifik (misal: "Sheet1") dengan kolom: id, name, description, price, sizes, colors, category, images, isNew.
CRUD Functions: Implementasikan readData(), createData(obj), updateData(row, obj), dan deleteData(row).
Drive Upload: Buat fungsi uploadFileToDrive(base64, fileName) yang menyimpan file ke Folder ID tertentu, mengatur izin menjadi publik (view only), dan mengembalikan URL format https://lh3.googleusercontent.com/d/FILE_ID.
Setup Database: Fungsi untuk membuat header otomatis dan memformat baris pertama (bold & frozen).
Frontend (dashboard.html):
UI Framework: Tailwind CSS untuk desain modern dan responsif.
Icons & Alerts: Lucide Icons untuk tombol aksi dan SweetAlert2 untuk notifikasi/konfirmasi.
Kolom Images harus menampilkan thumbnail yang bisa diklik untuk membuka URL gambar asli.
Tombol "Tambah Produk" yang membuka modal dengan fitur Upload Gambar (mengonversi file ke Base64).
Tombol "Aksi" di setiap baris: View (Modal read-only detail), Edit (Modal form), dan Delete (Konfirmasi).
UX: Indikator loading spinner saat proses data, error handling yang ramah pengguna, dan mode simulasi (mocking) jika objek google.script.run tidak terdeteksi.
Manifest (appsscript.json):
Tambahkan oauthScopes yang diperlukan untuk drive, spreadsheets, dan script.external_request.
Instruksi Implementasi:
Berikan kode lengkap yang siap pakai (single file untuk frontend).
Sertakan komentar penjelasan pada bagian logika krusial seperti konversi Base64 dan manipulasi DOM dinamis.
Pastikan arsitekturnya ringan agar cepat diakses melalui URL Web App.
SIAPkerja merupakan portal induk dan ekosistem digital yang berfungsi sebagai platform layanan publik serta aktivitas di bidang ketenagakerjaan, baik untuk tingkat pusat maupun daerah. Aplikasi ini bertujuan untuk membangun ekosistem digital ketenagakerjaan yang terintegrasi dan memudahkan pemangku kepentingan (masyarakat, perusahaan, lembaga, dan K/L) dalam mengakses layanan.
2. Arsitektur dan Teknologi Utama
Microservices: Aplikasi dibangun menggunakan konsep micro services di mana setiap layanan saling terintegrasi namun tetap mewujudkan satu kesatuan data.
Single Sign On (SSO): Sistem menerapkan SSO yang memungkinkan pengguna hanya memerlukan satu akun dan satu kali login untuk mengakses seluruh layanan di dalam ekosistem.
3. Fitur Utama dan Alur Pengguna
A. Pendaftaran Akun (Verifikasi Identitas)
Integrasi Dukcapil: Sistem melakukan pengecekan data Nomor Induk Kependudukan (NIK) dan nama ibu kandung langsung ke database Dukcapil Pusat.
Validasi Kontak: Pengguna wajib menggunakan alamat email dan nomor handphone yang aktif untuk keperluan akun.
B. Manajemen Profil Ketenagakerjaan
Aplikasi menyediakan sembilan langkah pengisian profil yang berfungsi sebagai portofolio online bagi pengguna. Modul-modul tersebut meliputi:
Biodata dan Foto: Pengguna dapat mengunggah foto profil secara langsung atau melalui upload file. Data biodata mencakup NIK, tanggal lahir, jenis kelamin, status perkawinan, dan alamat sesuai KTP.
Pengalaman Kerja: Modul untuk mencatat riwayat pekerjaan yang dapat digunakan perusahaan untuk menilai kandidat.
Pelatihan: Modul pengisian riwayat pelatihan, mencakup nama lembaga, program pelatihan, kejuruan, sub-kejuruan, durasi, hingga unggah sertifikat pelatihan.
Pencapaian/Sertifikasi: Fitur untuk menambahkan sertifikasi atau prestasi guna memperkuat portofolio profil.
Keahlian dan Bahasa: Pengguna dapat menambahkan daftar keahlian (contoh: Backend Development, SQL) dan tingkat kemahiran bahasa untuk mendapatkan rekomendasi lowongan yang relevan.
4. Output Aplikasi
Kartu SIAPkerja (SIAPkerja-ID): Setelah profil lengkap, pengguna akan mendapatkan kartu keanggotaan digital yang dapat diakses melalui portal sebagai identitas ketenagakerjaan mereka.
Prompt Utama (System Role & Context)
"Bertindaklah sebagai Senior Software Architect dan Full-Stack Developer. Saya ingin membangun sebuah platform ekosistem digital ketenagakerjaan bernama 'SIAPkerja-ID' yang berbasis pada dokumen panduan resmi Kementerian Ketenagakerjaan.
Tujuan Aplikasi: Menjadi portal induk layanan publik ketenagakerjaan dengan sistem terintegrasi (Satu Data).
Spesifikasi Teknis Utama:
Arsitektur: Gunakan pendekatan Microservices yang saling terintegrasi.
Autentikasi: Terapkan Single Sign On (SSO) agar satu akun bisa mengakses semua layanan (Skillhub, Karirhub, dll).
Integrasi Data: Memerlukan modul validasi NIK yang terhubung dengan database kependudukan (mock API Dukcapil).
Fitur yang Harus Ada:
Multi-Step Profile Wizard (9 Langkah):
Biodata (Integrasi NIK), Foto Profil, Pengalaman Kerja, Pendidikan, Pelatihan, Sertifikasi, Pencapaian, Kemampuan Bahasa, dan Keahlian Teknis.
Digital Card Generator: Menghasilkan 'Kartu SIAPkerja' (ID Digital) secara dinamis setelah profil 100% lengkap.
Matchmaking Engine: Rekomendasi lowongan kerja berdasarkan input 'Keahlian' dan 'Bahasa' di langkah ke-8 dan 9.
Tugas Anda:
Buatlah Skema Database (ERD) yang mampu menangani data profil yang kompleks tersebut.
Susun Struktur Folder Project untuk arsitektur yang scalable.
Berikan contoh kode Backend (API) untuk proses validasi pendaftaran akun dan Frontend (UI) menggunakan Tailwind CSS untuk form wizard 9 langkah tersebut agar terlihat modern dan responsif.
Mari mulai dengan memberikan outline arsitektur dan skema database-nya terlebih dahulu."
Prompt Tambahan (Opsional - Jika ingin lebih spesifik)
Jika Anda ingin fokus pada bagian tertentu, gunakan prompt ini:
Untuk Desain UI/UX (Tailwind/Bootstrap):
"Buatkan kode HTML/CSS menggunakan Tailwind CSS untuk halaman 'Langkah 9: Keahlian'. Form harus memiliki fitur 'Tag Input' untuk memasukkan keahlian seperti 'SQL', 'DevOps', dan 'Backend Development' sesuai panduan SIAPkerja, lengkap dengan tombol 'Simpan dan Kirim' yang elegan."
Untuk Logika Backend (Node.js/Python/PHP):
"Buatkan fungsi validasi pendaftaran di backend. Fungsi ini harus menerima NIK dan Nama Ibu Kandung, lalu melakukan pengecekan ke mock API Dukcapil. Jika valid, buatkan sesi SSO untuk pengguna tersebut."
Untuk Fitur Kartu Digital:
"Buatkan komponen React atau fungsi JavaScript untuk mengenerate Kartu SIAPkerja-ID dalam format kartu digital yang menampilkan Nama, NIK, dan QR Code unik setelah pengguna menyelesaikan seluruh profilnya."
Tips: Karena Anda adalah seorang spesialis Google Apps Script (GAS), Anda bisa memodifikasi bagian teknologi di atas menjadi: "Gunakan Google Apps Script sebagai backend, Google Sheets sebagai database, dan Bootstrap untuk frontend (MPA/SPA)." sesuai dengan profil keahlian Anda.
.png)
