SchemaFlow: Aplikasi Pembuat ERD Otomatis
Ringkasan Eksekutif
Ringkasan Eksekutif
SchemaFlow adalah aplikasi web yang memungkinkan pengguna untuk membuat Entity Relationship Diagram (ERD) secara otomatis hanya dengan memberikan deskripsi teks. Aplikasi ini akan memproses deskripsi tersebut, menghasilkan struktur database, dan memvisualisasikannya secara interaktif di kanvas.
Tujuan Utama:
- Membantu pengembang dan pengguna non-teknis dalam membuat struktur database yang akurat dan efisien.
- Meningkatkan produktivitas dan mengurangi kesalahan dalam pembuatan struktur database.
Fitur Utama:
- Input AI: Memungkinkan pengguna untuk memasukkan deskripsi teks dan menghasilkan struktur database yang akurat.
- Visualisasi Interaktif: Memvisualisasikan struktur database secara interaktif di kanvas, sehingga pengguna dapat dengan mudah memahami dan mengedit struktur database.
- Ekspor: Memungkinkan pengguna untuk mengekspor struktur database ke dalam format SQL atau Prisma Schema.
Manfaat:
- Membantu pengembang dalam membuat struktur database yang akurat dan efisien, sehingga meningkatkan produktivitas dan mengurangi kesalahan.
- Memungkinkan pengguna non-teknis untuk membuat struktur database tanpa perlu memiliki pengetahuan teknis yang mendalam.
- Meningkatkan kolaborasi tim dalam membuat struktur database.
Teknologi:
- Next.js: Sebagai framework untuk membangun aplikasi web yang cepat dan scalable.
- AI SDK: Sebagai library untuk memproses deskripsi teks dan menghasilkan struktur database yang akurat.
- React Flow: Sebagai library untuk memvisualisasikan struktur database secara interaktif di kanvas.
Alur Kerja:
1. Pengguna memasukkan deskripsi teks untuk membuat struktur database.
2. Aplikasi memproses deskripsi teks dan menghasilkan struktur database.
3. Pengguna dapat memvisualisasikan struktur database secara interaktif di kanvas.
4. Pengguna dapat mengedit struktur database yang dihasilkan.
5. Pengguna dapat mengekspor struktur database ke dalam format SQL atau Prisma Schema.
Dengan demikian, SchemaFlow menjadi solusi yang efektif dan efisien untuk membuat struktur database yang akurat dan efisien, sehingga membantu pengembang dan pengguna non-teknis dalam meningkatkan produktivitas dan mengurangi kesalahan.
Gambaran Umum Produk
Visi
SchemaFlow bertujuan untuk menjadi aplikasi utama dalam pembuatan ERD secara otomatis, memudahkan pengguna untuk membuat struktur database yang akurat dan efisien.
Tujuan
Tujuan dari aplikasi ini adalah untuk membantu pengembang dan pengguna non-teknis dalam membuat struktur database yang akurat dan efisien, sehingga meningkatkan produktivitas dan mengurangi kesalahan.
Target Audiens
Target audiens utama untuk aplikasi SchemaFlow adalah pengembang, pengguna non-teknis, dan bisnis yang memerlukan struktur database yang akurat dan efisien.
Cerita Pengguna
Berikut beberapa contoh cerita pengguna untuk aplikasi SchemaFlow:
- Sebagai pengembang, saya ingin bisa membuat ERD secara otomatis dari deskripsi teks, sehingga saya dapat fokus pada pengembangan aplikasi.
- Sebagai pengguna non-teknis, saya ingin bisa membuat struktur database yang akurat dan efisien, tanpa perlu memiliki pengetahuan teknis yang mendalam.
- Sebagai bisnis, saya ingin bisa menggunakan aplikasi SchemaFlow untuk membuat struktur database yang akurat dan efisien, sehingga meningkatkan produktivitas dan mengurangi kesalahan.
- Sebagai pengembang, saya ingin bisa mengedit hasil generate AI secara manual, sehingga saya dapat memastikan bahwa struktur database yang dihasilkan akurat dan sesuai dengan kebutuhan.
- Sebagai pengguna, saya ingin bisa mengekspor struktur database ke dalam format SQL atau Prisma Schema, sehingga saya dapat menggunakan struktur database yang dihasilkan dalam aplikasi lain.
- Sebagai pengguna, saya ingin bisa memvisualisasikan struktur database secara interaktif di kanvas, sehingga saya dapat memahami struktur database dengan lebih baik.
Kebutuhan Fungsional
Kebutuhan Fungsional
Berikut adalah rincian kebutuhan fungsional SchemaFlow yang lebih jelas dan terstruktur, mencakup masing-masing fitur utama beserta kriteria penerimaan, interaksi pengguna, dan pertimbangan edge case.
#### 1. Fitur Input AI (Natural Language to Schema)
- Input teks bebas: Pengguna dapat mengetik atau menempel deskripsi dalam bahasa Indonesia atau Inggris (misal: "Buat sistem e-commerce dengan user, product, order, dan inventory").
- Validasi input: Sistem memeriksa panjang minimal 5 karakter dan memberikan pesan peringatan jika input terlalu pendek atau mengandung hanya karakter spesial.
- Ekstraksi entitas dan atribut: AI SDK mengidentifikasi noun sebagai entitas (User, Product, Order) dan menentukan atribut berdasarkan kata sifat atau frasa yang menunjukkan properti (misal: "nama", "harga", "jumlah").
- Deteksi relasi: Sistem mengidentifikasi kata hubung seperti "memiliki", "berelasi dengan", "milik" untuk menentukan hubungan one‑to‑one, one‑to‑many, atau many‑to‑many.
- Output skema awal: Hasil berupa JSON yang mencantumkan tabel, kolom, tipe data (string, integer, date, boolean, foreign key), dan constraints dasar (NOT NULL, UNIQUE).
- Konfirmasi dan koreksi: Setelah hasil ditampilkan, pengguna dapat menyetujui atau mengajukan permintaan revisi melalui chatbot atau tombol "Re‑generate with clarification".
#### 2. Fitur Visualisasi dan Interaksi (Drag‑and‑Drop, Edit, Delete)
- Render otomatis: Struktur database yang dihasilkan langsung dirender di kanvas React Flow sebagai node (tabel) dan edge (relasi).
- Interaksi node:
- Klik node untuk membuka panel edit tabel (nama tabel, daftar kolom, tipe data, nullable, default value, primary key).
- Drag node untuk mengubah posisinya di kanvas; posisi disimpan secara lokal untuk sesi pengguna.
- Double‑click pada kolom untuk mengedit nama, tipe data, atau menambahkan constraint.
- Manajemen edge:
- Klik edge untuk melihat detail relasi (jenis kardinalitas, foreign key yang terlibat).
- Pengguna dapat mengubah jenis relasi (misal dari one‑to‑many menjadi many‑to‑many) melalui dropdown yang muncul.
- Tombol hapus edge muncul saat edge sedang dipilih.
- Operasi massal:
- Pilih beberapa node/edge (shift‑klik atau drag selection) lalu lakukan aksi hapus atau duplikasi.
- Tombol "Undo" dan "Redo" tersedia untuk perubahan visual.
- Validasi visual: Sistem mencegah pembuatan siklus yang tidak diizinkan (misal many‑to‑many tanpa tabel join) dan memberikan notifikasi inline.
#### 3. Fitur Ekspor (SQL, Prisma Schema)
- Pilihan format: Dropdown ekspor menyediakan dua opsi:
1. SQL DDL (MySQL, PostgreSQL, SQLite) dengan sintaks CREATE TABLE, PRIMARY KEY, FOREIGN KEY, dan optional indexes.
2. Prisma Schema (file schema.prisma) yang termasuk model, tipe data Prisma, dan relation fields.
- Pengaturan ekspor: Sebelum mengunduh, pengguna dapat memilih:
- Target database (untuk SQL) untuk menyesuaikan tipe data (misal
VARCHARvsTEXT). - Apakah ingin menambahkan komentar dokumentasi berdasarkan deskripsi asli.
- Apakah menyertakan migrasi awal (misal
migrate devscript untuk Prisma). - Proses unduh: Setelah diklik "Export", file dibuat secara client‑side menggunakan Blob dan langsung diunduh; tidak ada penyimpanan di server kecuali pengguna memilih opsi "Simpan ke akun".
- Verifikasi output: Sistem melakukan quick‑lint pada hasil SQL (memastikan tidak ada syntax error) dan pada Prisma schema (memastikan semua relasi terdefinisi) sebelum menampilkan pesan sukses.
#### Kriteria Penerimaan
1. Kualitas Input: Sistem harus dapat memproses deskripsi teks yang diberikan oleh pengguna dan menghasilkan struktur database yang akurat.
2. Kualitas Visualisasi: Sistem harus dapat memvisualisasikan struktur database yang dihasilkan secara interaktif di kanvas.
3. Kualitas Ekspor: Sistem harus dapat mengekspor struktur database ke dalam format SQL atau Prisma Schema yang valid.
Dengan perincian di atas, kebutuhan fungsional SchemaFlow kini lebih jelas, mencakup aspek input, proses, interaksi, dan output, serta memberikan kriteria penerimaan yang dapat digunakan tim pengembangan dan QA untuk pengujian dan pelacakan progres.
Detail Kebutuhan Fungsional
Berikut adalah detail kebutuhan fungsional SchemaFlow:
- Fitur Input AI: Sistem harus dapat memproses deskripsi teks yang diberikan oleh pengguna dan menghasilkan struktur database yang akurat.
- Fitur Visualisasi: Sistem harus dapat memvisualisasikan struktur database yang dihasilkan secara interaktif di kanvas.
- Fitur Ekspor: Sistem harus dapat mengekspor struktur database ke dalam format SQL atau Prisma Schema yang valid.
- Kriteria Penerimaan: Sistem harus memenuhi kriteria penerimaan yang telah ditentukan, yaitu kualitas input, kualitas visualisasi, dan kualitas ekspor.
Contoh Kebutuhan Fungsional
Berikut adalah contoh kebutuhan fungsional SchemaFlow:
- Contoh 1: Pengguna ingin membuat struktur database untuk aplikasi e-commerce. Pengguna memasukkan deskripsi teks "Buat sistem e-commerce dengan user, product, order, dan inventory". Sistem menghasilkan struktur database yang akurat dan memvisualisasikannya secara interaktif di kanvas. Pengguna dapat mengedit struktur database dan mengekspor ke dalam format SQL atau Prisma Schema.
- Contoh 2: Pengguna ingin membuat struktur database untuk aplikasi blog. Pengguna memasukkan deskripsi teks "Buat sistem blog dengan user, post, comment, dan category". Sistem menghasilkan struktur database yang akurat dan memvisualisasikannya secara interaktif di kanvas. Pengguna dapat mengedit struktur database dan mengekspor ke dalam format SQL atau Prisma Schema.
Dengan contoh di atas, kebutuhan fungsional SchemaFlow kini lebih jelas dan dapat digunakan sebagai acuan untuk pengembangan aplikasi.
Kebutuhan Teknis
Kebutuhan Teknis
Aplikasi SchemaFlow memiliki beberapa kebutuhan teknis yang harus dipenuhi untuk memastikan kinerja yang optimal dan efisien.
Tech Stack
Aplikasi SchemaFlow dapat dibangun menggunakan tech stack seperti:
- Next.js: Sebagai framework untuk membangun aplikasi web yang cepat dan scalable.
- AI SDK: Sebagai library untuk memproses deskripsi teks dan menghasilkan struktur database yang akurat.
- React Flow: Sebagai library untuk memvisualisasikan struktur database secara interaktif di kanvas.
Alur Logika Data
Aplikasi SchemaFlow harus memiliki alur logika data yang memungkinkan pengguna untuk memasukkan deskripsi teks, memproses deskripsi teks, menghasilkan struktur database, dan memvisualisasikan struktur database secara interaktif di kanvas. Berikut adalah beberapa halaman yang dibutuhkan:
- Halaman Input: Pengguna memasukkan deskripsi teks untuk membuat struktur database.
- Halaman Proses: Aplikasi memproses deskripsi teks dan menghasilkan struktur database.
- Halaman Visualisasi: Pengguna dapat memvisualisasikan struktur database secara interaktif di kanvas.
- Halaman Edit: Pengguna dapat mengedit struktur database yang dihasilkan.
- Halaman Ekspor: Pengguna dapat mengekspor struktur database ke dalam format SQL atau Prisma Schema.
Kebutuhan Infrastruktur
Aplikasi SchemaFlow juga membutuhkan infrastruktur yang memadai untuk menjamin kinerja yang optimal, seperti:
- Server: Untuk menyimpan dan mengelola data pengguna.
- Database: Untuk menyimpan struktur database yang dihasilkan.
- API: Untuk menghubungkan aplikasi dengan library AI SDK dan React Flow.
Pedoman UX/UI
Alur Kerja
Aplikasi SchemaFlow harus memiliki alur kerja yang sederhana dan mudah digunakan, sehingga pengguna dapat dengan mudah membuat struktur database yang akurat dan efisien.
Desain Antarmuka
Aplikasi SchemaFlow harus memiliki desain antarmuka yang intuitif dan mudah digunakan, sehingga pengguna dapat dengan mudah memahami dan menggunakan aplikasi.
Peta Jalan Masa Depan
Fitur Kolaborasi Tim
Aplikasi SchemaFlow dapat dikembangkan untuk memiliki fitur kolaborasi tim, sehingga pengguna dapat bekerja sama dalam membuat struktur database.
Integrasi Migrasi Database
Aplikasi SchemaFlow dapat dikembangkan untuk memiliki integrasi migrasi database, sehingga pengguna dapat dengan mudah memigrasikan struktur database ke dalam aplikasi lain.