Master charting dan visualisasi database dengan ChartDB – Beragampengetahuan

Di era big data ini, memvisualisasikan dan menafsirkan data secara efektif sangat penting untuk membuat keputusan yang tepat dan mendapatkan wawasan yang dapat ditindaklanjuti. Memvisualisasikan data melalui bagan tidak hanya membantu menjelaskan kumpulan data yang kompleks namun juga membantu mengomunikasikan wawasan ini secara efektif kepada khalayak yang lebih luas.

ChartDB adalah alat canggih yang dirancang untuk menyederhanakan dan meningkatkan proses visualisasi database yang kompleks. Dalam artikel ini, kita akan mempelajari cara memulai ChartDB, berlatih membuat bagan database pertama Anda, dan memberi Anda tips praktis untuk meningkatkan keterampilan bercerita data Anda.

Apa itu ChartDB?

ChartDB adalah editor bagan basis data sumber terbuka dan berbasis web yang memungkinkan Anda memvisualisasikan dan mengelola skema basis data melalui bagan interaktif.

Meskipun banyak alat di ekosistem yang memiliki fitur serupa, ChartDB menonjol karena kemudahan penggunaan dan kemampuannya membuat visualisasi database menjadi mudah. Salah satu fitur tersebut adalah visualisasi skema instan menggunakan satu kueri, Smart Query, yang memungkinkan Anda mengimpor skema secara langsung sebagai file JSON, sehingga membuat visualisasi database menjadi sangat cepat. Ini berguna untuk dokumentasi, kolaborasi, atau pemahaman struktur database.

Fitur utama lainnya dari ChartDB meliputi:

• Ekspor SQL yang didukung AI — Hasilkan skrip migrasi basis data untuk MySQL, PostgreSQL, SQLite, dan platform lainnya
• Pengeditan interaktif — Ubah dan beri anotasi pola langsung di alat
• Platform agnostik — Tidak diperlukan instalasi atau kredensial basis data

ChartDB mendukung database populer seperti PostgreSQL, MySQL, SQL Server, MariaDB dan ClickHouse.

Memulai dengan ChartDB

Fitur luar biasa lainnya dari ChartDB adalah fleksibilitas opsi penggunaannya. Anda dapat menggunakan aplikasi web yang dihosting di situs web resmi atau menghostingnya sendiri secara lokal menggunakan Docker atau Node.js.

Aplikasi web adalah cara tercepat untuk mulai menggunakan ChartDB. Cukup masuk dengan akun GitHub atau Google Anda untuk memulai. Jika Anda lebih suka menggunakan metode ini, Anda dapat melompat ke bagian berikutnya.

ChartDB yang dihosting sendiri

Untuk menginstal ChartDB secara lokal, pastikan Node diinstal di komputer Anda. Anda dapat memilih untuk menggunakan Docker jika Anda mau. Setelah persyaratan ini terpenuhi, kloning repositori menggunakan perintah berikut:

git clone 

Repositorinya berukuran beberapa megabyte, jadi kloning mungkin memerlukan waktu satu atau dua menit pada jaringan yang lebih lambat. Tapi setelah selesai, navigasikan ke chartDB folder dan instal dependensi yang diperlukan:

cd chartDB
npm install

Setelah instalasi, mulai server pengembangan menggunakan perintah berikut:

npm run dev

Setelah server berjalan, buka browser dan buka localhost:5173 Akses ChartDB.
Untuk build produksi, gunakan perintah berikut:

npm run build

ChartDB memungkinkan Anda menambahkan fungsionalitas AI ke cabang yang diterapkan secara lokal. Untuk mengaktifkan fitur ini, Anda memerlukan kunci OpenAI yang valid. Jika sudah, gunakan perintah berikut untuk membangun aplikasi:

VITE_OPENAI_API_KEY=<YOUR_OPEN_AI_KEY> npm run build

Catatan: Penggantian <YOUR_OPEN_AI_KEY> Gunakan kunci OpenAI Anda yang sebenarnya.

Hosting mandiri menggunakan Docker (opsional)

Bagi mereka yang lebih menyukai Docker, Anda dapat membangun dan menjalankan ChartDB menggunakan perintah berikut:

docker build -t chartdb.
docker run -e OPENAI_API_KEY=YOUR_OPEN_AI_KEY -p 8080:80 chartdb

Ganti lagi <YOUR_OPEN_AI_KEY> Gunakan kunci OpenAI Anda. Setelah proses pembangunan selesai, akses ChartDB dengan menavigasi ke localhost:8080 di peramban Anda.

Jika semuanya sudah diatur dengan benar, Anda akan melihat layar berikut saat memulai server lokal Anda:

Di bagian selanjutnya, kita akan melihat cara membuat diagram database pertama kita.

Buat bagan pertama Anda

Saat pertama kali Anda mengakses aplikasi web ChartDB, Anda akan melihat modal yang meminta Anda untuk memilih jenis database dari daftar opsi yang didukung, seperti yang ditunjukkan pada gambar di bagian sebelumnya. Setelah mengklik ikon database, Anda akan dibawa ke layar seperti berikut:

Di layar ini Anda akan mendapatkan skrip “magic query” yang dapat Anda jalankan terhadap database untuk mengambil skema dalam format JSON. Setelah Anda menghasilkan JSON, Anda perlu menyalin dan menempelkannya ke bidang kosong. ChartDB akan menggunakan masukan ini untuk menghasilkan representasi visual dari database.

Namun, sebelum menyalin skrip, Anda harus memilih versi database. Dalam tutorial ini, kita akan menggunakan database PostgreSQL, yang tersedia dalam tiga versi: Regular, SupabaseDan Timescale. kami akan melanjutkan Regular versi, tetapi Anda harus memilih versi yang cocok dengan tipe database Anda.

Selanjutnya, putuskan cara menjalankan skrip. Anda dapat menggunakan antarmuka klien database seperti pgAdmin atau alat baris perintah Postgres. Untuk mempermudah, kami akan menggunakan pgAdmin.

Jika Anda belum menyiapkan database Postgres, Anda dapat dengan cepat menyiapkannya dengan mengunduh dan menginstal Postgres dari situs resminya. Biasanya lebih cepat untuk menginstal paket, menyiapkan database, dan menggunakan pgAdmin untuk menanyakan database.

Namun, PostgreSQL di Windows terkadang rawan kesalahan. Jika Anda mengalami masalah dengan proses instalasi standar, pertimbangkan untuk menyiapkan Postgres menggunakan Docker.

Setelah mengatur PostgreSQL, sambungkan ke pgAdmin menggunakan nama host dan port. Karena PostgreSQL berjalan secara lokal, host biasanya adalah alamat IP dan port Anda, 5432.

Setelah berhasil terhubung ke pgAdmin, klik kanan basis data menu dan pilih Buat> Basis Data Dari menu konteks:

Pada skema yang muncul, masukkan nama database basis data bidang dan klik menyimpan Tombol untuk membuat database:

Setelah database dibuat, maka akan muncul di basis data Menu tarik-turun. Temukan database yang baru dibuat (dalam hal ini, perdagangan elektronik), Klik kanan padanya dan pilih alat kueri Opsi dalam menu konteks:

Ini akan membuka tab baru yang berisi Query Anda dapat memasukkan kolom dan menjalankan skrip menggunakan Bermain ikon atau tekan F5 Kueri database:

Silakan ikuti langkah-langkah di bawah ini untuk menambahkan tabel dan contoh data ke database yang baru dibuat:

1. Buat tabel:

CREATE TABLE users (
userid SERIAL PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
email VARCHAR(100) NOT NULL UNIQUE,
passwordhash VARCHAR(255) NOT NULL,
createdat TIMESTAMP DEFAULT CURRENTTIMESTAMP
);CREATE TABLE products (
productid SERIAL PRIMARY KEY,
name VARCHAR(100) NOT NULL,
description TEXT,
price DECIMAL(10, 2) NOT NULL,
stockquantity INT DEFAULT 0,
createdat TIMESTAMP DEFAULT CURRENTTIMESTAMP
);CREATE TABLE orders (
orderid SERIAL PRIMARY KEY,
userid INT REFERENCES users(userid),
orderdate TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
status VARCHAR(20) DEFAULT 'pending'
);CREATE TABLE orderitems (
orderitemid SERIAL PRIMARY KEY,
orderid INT REFERENCES orders(orderid),
productid INT REFERENCES products(product_id),
quantity INT NOT NULL,
price DECIMAL(10, 2) NOT NULL
);

2. Buat indeks:

CREATE INDEX idxusersusername ON users(username);
CREATE INDEX idxproductsname ON products(name);
CREATE INDEX idxordersuserid ON orders(userid);
CREATE INDEX idxorderitemsorderid ON orderitems(orderid);

3. Tambahkan data sampel:

INSERT INTO users (username, email, passwordhash) VALUES
('johndoe', '[email protected]', 'hashedpassword1'),
('janesmith', '[email protected]', 'hashed_password2');INSERT INTO products (name, description, price, stock_quantity) VALUES
('Laptop', 'High-performance laptop', 1200.00, 10),
('Smartphone', 'Latest model smartphone', 800.00, 25);INSERT INTO orders (user_id, status) VALUES
(1, 'completed'),
(2, 'pending');INSERT INTO orderitems (orderid, product_id, quantity, price) VALUES
(1, 1, 1, 1200.00),
(2, 2, 2, 1600.00);

Skrip ini akan membuat database untuk platform e-commerce fiktif yang mencakup tabel untuk pengguna, produk, pesanan, dan item pesanan, serta beberapa hubungan antar tabel.

Setelah database berhasil dibuat dan diisi tabel dan data, clear bertanya bidang, salin dan tempel kueri ajaib dari ChartDB, lalu jalankan. Jika semuanya sudah diatur dengan benar, keluaran data di bawah tab bertanya Bidang tersebut akan menampilkan hasil yang mirip dengan contoh berikut:

Ini adalah skema database yang baru saja kita buat dalam format JSON. Untuk menyalinnya, klik keluaran JSON untuk menyorot ikon salin, lalu klik ikon untuk menyalin keluaran ke clipboard:

Selanjutnya, kembali ke aplikasi web ChartDB, tempelkan output JSON ke kolom kosong di skema ChartDB, dan klik Periksa hasil skrip tombol untuk memverifikasi output skrip:

Setelah memvalidasi skema JSON, klik imporChartDB akan menghasilkan grafik darinya:

Selamat! Anda telah berhasil membuat grafik pertama Anda di ChartDB. Selanjutnya, kita akan menjelajahi editor dan memeriksa bagaimana komponen-komponennya bekerja sama.

Jelajahi editornya

Sekarang setelah database Anda divisualisasikan, mari kita lihat bagaimana Anda dapat menggunakan editor untuk meningkatkan visualisasi Anda dan menjelajahi fitur tambahan yang ditawarkan ChartDB.

Sekilas, editor dibagi menjadi dua bagian intuitif:

Panel kiri (browser skema)

Bagian ini berisi daftar semua tabel yang tersedia dalam skema database. Anda dapat menambahkan tabel baru, mengubah tabel yang sudah ada, dan membuat atau mengedit hubungan antar tabel secara langsung di editor:

Tabel ditampilkan dalam tampilan hierarki yang dapat diperluas, memungkinkan Anda menelusuri setiap tabel untuk melihat, mengedit, atau menambahkan kolom dan indeks. Anda juga dapat menambahkan komentar, yang sangat berguna untuk tujuan kolaborasi dan dokumentasi:

Bilah pencarian di bagian atas panel secara dinamis memfilter daftar tabel untuk menemukan tabel atau kolom tertentu dengan cepat:

Panel kanan (ruang kerja utama)

Di sinilah keajaiban terjadi. Ruang kerja utama adalah panel kisi yang menampilkan tabel database sebagai kotak yang dapat dipindahkan, dengan kolom dan kunci tercantum dengan jelas di dalam setiap kotak:

Garis-garis yang menghubungkan kotak-kotak tersebut mewakili hubungan (kunci asing) antar tabel. Mereka mengilustrasikan bagaimana kotak-kotak ini berinteraksi dan memberikan visualisasi yang jelas tentang hubungan tabel:

Kotak-kotak ini mendukung pengeditan interaktif, yang berarti Anda dapat mengklik ikon edit untuk memperluas tampilan hierarki tabel di panel kiri, tempat Anda dapat menambahkan properti baru atau mengubah properti yang sudah ada.

Anda juga dapat membuat hubungan langsung di papan menggunakan titik koneksi (atau titik jangkar) yang muncul saat Anda mengklik kotak:

Titik koneksi ini menunjukkan di mana hubungan dapat dibuat atau sudah ada pada kotak. Anda dapat membuat hubungan kunci asing dengan menyeret titik gabungan ke titik gabungan tabel lain. Namun, penting untuk dicatat bahwa koneksi hanya dapat dibuat antar bidang terkait.

Pada contoh di bawah ini, kesalahan terjadi saat kami mencoba menggabungkan dua kolom yang tidak terkait, namun berhasil saat kami mengonversinya menjadi kolom terkait:

Di bagian bawah papan terdapat kontrol papan. Kontrol ini memungkinkan Anda memperbesar dan memperkecil tampilan skema dan menggeser ruang kerja untuk fokus pada bagian berbeda dari struktur database.

Ekspor SQL yang didukung AI

Ekspor SQL yang didukung AI dari ChartDB menyederhanakan migrasi database antar sistem yang berbeda. Secara otomatis menghasilkan skrip bahasa definisi data (DDL) yang cocok untuk platform database tertentu. Artinya, AI menyesuaikan tipe data, batasan, dan elemen skema lainnya agar sesuai dengan konvensi dan persyaratan database target.

Misalnya, dapat mengkonversi AUTO_INCREMENT Di MySQL SERIAL Di PostgreSQL atau tangani perbedaan dalam definisi kunci utama dan indeks.

Untuk menggunakan fitur ini, klik dokumen Pilihan menu pada bilah navigasi editor, dari Ekspor SQL daftar, dan menghasilkan keluaran DDL yang dapat disesuaikan:

Dalam contoh ini, kami berhasil memigrasikan database PostgreSQL ke MariaDB tanpa memerlukan pengetahuan ahli tentang sistem mana pun. Dengan cara ini, kami menghilangkan kebutuhan akan penulisan ulang manual, meminimalkan kesalahan, dan menghemat waktu.

Perlu diperhatikan bahwa untuk menggunakan fitur ini secara lokal, Anda harus menyetel variabel lingkungan menggunakan kunci OpenAI saat membuat aplikasi. Tanpa kunci ini, fungsi ekspor AI SQL tidak akan berfungsi.

Jika Anda tidak memiliki kunci OpenAI tetapi ingin mengakses fitur-fitur ini, pertimbangkan untuk menggunakan aplikasi web, di mana fitur AI langsung tersedia.

Sematkan dan bagikan bagan

ChartDB memudahkan berbagi bagan dan menyematkan skema database. Anda dapat menyimpan grafik sebagai file gambar (seperti PNG atau SVG) untuk digunakan dalam tayangan slide atau lampiran email. Selain itu, Anda dapat mengekspornya sebagai file JSON untuk menyematkan bagan ke halaman web eksternal atau berbagi alur kerja ChartDB langsung dengan tim atau klien Anda.

Untuk membagikan bagan, klik dokumen Menu di bilah navigasi. di bawah Ekspor SQL pilihan di menu drop-down, Anda akan menemukannya Ekspor sebagai pilihan. Klik dan pilih jenis file gambar pilihan Anda untuk mengekspor grafik:

Untuk mengekspor bagan ke JSON, gunakan membagikan menu di bilah navigasi dan pilih Ekspor grafik:

Anda juga akan memperhatikan Impor diagram pilihan di bawah ini KELUAR pilihan. Hal ini memungkinkan Anda mengimpor bagan bersama dalam format JSON dari pengguna ChartDB lain atau dari file JSON tervalidasi yang kompatibel dengan ChartDB:

sebagai kesimpulan

ChartDB relatif baru dalam ekosistem pembuatan bagan basis data dan mungkin belum setara dengan alat seperti DBeaver dan dbdiagram dalam hal kedalaman fitur dan ukuran komunitas. Namun, ChartDB menawarkan pendekatan yang menyegarkan dengan visualisasi database sederhana dan antarmuka pengguna yang intuitif.

Baik Anda seorang analis data, profesional bisnis, atau pengembang, menguasai ChartDB dapat membantu Anda mengubah data mentah menjadi visual yang jelas dan bermakna.