Secara garis besar, aplikasi ini dibangun di atas tumpukan teknologi modern yang berbasis JavaScript/TypeScript, yaitu:

1. Next.js (React Framework):

Ini adalah kerangka kerja utama untuk membangun keseluruhan aplikasi. Next.js menyediakan struktur yang kuat untuk antarmuka pengguna (UI), perutean halaman (navigasi), dan optimalisasi kinerja.

• Firebase:

Ini adalah platform dari Google yang berfungsi sebagai “backend” atau sisi server aplikasi. Kita menggunakan beberapa layanannya:

• Firestore: Sebagai database untuk menyimpan semua data, seperti laporan perundungan, materi edukasi, dan data pengguna.
• Firebase Authentication: Untuk menangani proses login dan pendaftaran pengguna secara aman.
• ShadCN UI & Tailwind CSS:

Ini adalah teknologi yang bertanggung jawab atas tampilan dan nuansa (desain) aplikasi.

• Tailwind CSS adalah kerangka kerja CSS yang memungkinkan styling cepat dan konsisten.
• ShadCN UI menyediakan kumpulan komponen UI yang sudah jadi dan siap pakai (seperti tombol, kartu, dialog) yang dibangun di atas Tailwind, sehingga mempercepat pengembangan.
• Genkit (dari Google AI):

Ini adalah platform yang digunakan untuk fitur-fitur kecerdasan buatan (AI) di dalam aplikasi, seperti fitur “Analisis Sosiometri”. Genkit memungkinkan aplikasi untuk berkomunikasi dengan model AI (seperti Gemini) untuk menganalisis teks dan memberikan hasil cerdas.

• TypeScript:

Ini adalah bahasa pemrograman utama yang digunakan. TypeScript adalah “superset” dari JavaScript yang menambahkan fitur keamanan tipe, membantu mengurangi bug, dan membuat kode lebih mudah dikelola seiring pertumbuhan aplikasi.

Singkatnya, aplikasi ini adalah kombinasi dari Next.js untuk antarmuka, Firebase untuk backend dan database, ShadCN/Tailwind untuk desain, dan Genkit untuk fitur AI.

Proses pembuatan aplikasi ini mengikuti pendekatan modular, di mana setiap bagian fungsionalitas dibangun secara bertahap. Berikut adalah langkah-langkah utamanya:

• Pemilihan Teknologi: Proyek dimulai dengan memilih Next.js sebagai kerangka kerja utama. Next.js dipilih karena kemampuannya dalam membangun aplikasi React yang modern, cepat, dan terstruktur dengan baik.
• Penyiapan Antarmuka (UI): Untuk mempercepat pengembangan desain, Tailwind CSS diintegrasikan untuk styling, dan ShadCN UI digunakan untuk menyediakan komponen antarmuka yang siap pakai (seperti tombol, kartu, formulir). Ini memastikan tampilan yang konsisten dan modern di seluruh aplikasi.
• Struktur Proyek: Dibuatlah struktur folder dasar untuk aplikasi, memisahkan halaman (app), komponen (components), logika bisnis (lib), dan hook kustom (hooks).

• Integrasi Firebase: Aplikasi ini dihubungkan ke proyek Firebase. Sebuah file konfigurasi khusus (src/lib/firebase.ts) dibuat untuk menyimpan kunci API dan detail koneksi ke Firebase.
• Autentikasi Pengguna: Firebase Authentication diaktifkan untuk mengelola pendaftaran dan login pengguna. Ini menangani keamanan kata sandi dan manajemen sesi pengguna.
• Database: Firestore dipilih sebagai database NoSQL untuk menyimpan semua data aplikasi. Dibuatlah struktur data untuk koleksi utama seperti reports (laporan perundungan), users (pengguna), dan educational_resources (materi edukasi).

• Sistem Login & Peran: Dibuat halaman login dan sistem untuk membedakan peran pengguna (admin vs user). Sebuah hook kustom (useAuth) dibuat untuk memeriksa status login dan peran pengguna di seluruh aplikasi, yang kemudian digunakan untuk menampilkan menu atau halaman yang sesuai.
• Formulir Laporan: Halaman untuk membuat laporan perundungan (/dashboard/report) dibuat menggunakan react-hook-form dan zod untuk validasi input, memastikan data yang dikirim akurat.
• Pelacakan Laporan: Halaman “Laporan Saya” dibuat agar pengguna anonim dapat melacak status laporan mereka.
• Tombol Darurat: Fitur ini diimplementasikan di dashboard. Awalnya hanya untuk membuat catatan darurat, kemudian ditingkatkan untuk membuka dialog yang terhubung ke beberapa nomor WhatsApp admin, memberikan respons cepat dalam situasi genting.

• Dashboard Admin: Dashboard utama dimodifikasi untuk menampilkan ringkasan statistik laporan (total, baru, diproses, selesai) yang hanya bisa dilihat oleh admin.
• Manajemen Laporan (/dashboard/summaries): Dibuat sebuah tabel lengkap bagi admin untuk melihat semua laporan yang masuk, dengan fitur pencarian, melihat detail, mengubah status (Baru -> Diproses -> Selesai), dan menghapus laporan.
• Manajemen Materi Edukasi: Halaman “Materi Edukasi” dilengkapi dengan fungsionalitas CRUD (Create, Read, Update, Delete) khusus admin, memungkinkan mereka menambah, mengedit, dan menghapus artikel langsung dari antarmuka aplikasi.
• Analisis Sosiometri: Fitur ini dibangun menggunakan Genkit, sebuah toolkit AI dari Google.
• Sebuah flow AI (sociometricAnalysisFlow) didefinisikan untuk menerima data laporan perundungan sebagai input.
• Dibuat prompt (perintah) yang sangat detail untuk menginstruksikan model AI (Gemini) agar berperan sebagai psikolog sekolah, menganalisis teks laporan, mengidentifikasi pelaku, korban, dan memetakan hubungan sosial di antara mereka.
• Skema output didefinisikan dengan zod untuk memastikan AI mengembalikan data dalam format JSON yang terstruktur dan konsisten.
• Hasil analisis ini kemudian disimpan ke dalam riwayat analisis untuk referensi di masa depan.

• Navigasi dan Tata Letak: Dibuat tata letak utama (layout.tsx), header, dan sidebar yang dinamis, yang menampilkan menu berbeda tergantung pada peran pengguna (admin atau pengguna biasa).
• Perbaikan Berulang: Sepanjang proses, dilakukan banyak perbaikan berdasarkan permintaan, seperti memperbaiki masalah URL gambar (dengan menambahkan domain ke next.config.js dan menjelaskan perbedaan antara tautan langsung dan tautan halaman), serta menyempurnakan alur tombol darurat.
• Penjelasan dan Dokumentasi: Dibuat file-file seperti admin-contacts.ts untuk memudahkan pengelolaan, dan diberikan penjelasan langsung (seperti yang sedang saya lakukan) untuk mendokumentasikan cara kerja dan pengembangan aplikasi.

Secara keseluruhan, aplikasi ini dibangun dengan pendekatan modern dan terukur, memadukan frontend yang interaktif, backend yang andal dari Firebase, dan kekuatan AI untuk menghasilkan fitur analisis yang canggih.