Tutorial Svelte dan SQLite3 untuk Aplikasi Fullstack

Dalam dunia pengembangan web, penggunaan framework modern dan database yang efisien sangat penting untuk membangun aplikasi yang responsif dan cepat. Salah satu kombinasi yang menarik adalah menggunakan Svelte, sebuah framework JavaScript yang inovatif, bersama dengan SQLite3, sebuah database relasional yang ringan. Artikel ini akan memberikan tutorial svelte sqlite3 yang komprehensif, membahas langkah demi langkah cara membangun aplikasi fullstack sederhana menggunakan kedua teknologi ini.

Svelte menawarkan pendekatan yang berbeda dibandingkan dengan framework JavaScript lainnya seperti React atau Vue. Dengan Svelte, Anda menulis komponen yang lebih bersih dan lebih mudah dipahami, dan Svelte akan mengurus pengoptimalan di belakang layar. Di sisi lain, SQLite3 adalah pilihan yang tepat untuk aplikasi yang memerlukan database ringan dan mudah digunakan, tanpa memerlukan server database yang kompleks. Mari kita mulai dengan memahami lebih dalam tentang Svelte dan SQLite3.

Baca Juga: CRUD dengan Sequelize Database SQLite3

Pengenalan Svelte dan SQLite3

Svelte adalah framework JavaScript yang memungkinkan pengembang untuk membangun antarmuka pengguna dengan cara yang lebih intuitif. Berbeda dengan framework lain yang melakukan rendering di browser, Svelte melakukan sebagian besar pekerjaan di saat build time, menghasilkan kode JavaScript yang sangat efisien. Ini berarti aplikasi Svelte cenderung lebih cepat dan lebih responsif.

SQLite3, di sisi lain, adalah database relasional yang sangat ringan dan mudah digunakan. Ini ideal untuk aplikasi yang tidak memerlukan server database yang kompleks. SQLite3 menyimpan data dalam file tunggal, membuatnya mudah untuk diintegrasikan ke dalam aplikasi. Anda dapat membaca lebih lanjut tentang Svelte di Svelte Official Documentation dan SQLite3 di SQLite Official Documentation.

Baca Juga: Panduan Lengkap Framework Java GUI untuk Desktop

Membuat Proyek Svelte Baru

Langkah pertama dalam tutorial ini adalah membuat proyek Svelte baru. Anda dapat menggunakan template Svelte yang sudah ada untuk memulai dengan cepat. Berikut adalah langkah-langkah untuk membuat proyek baru:

1. Instal Node.js: Pastikan Anda telah menginstal Node.js di sistem Anda. Anda dapat mengunduhnya dari Node.js Official Website.
2. Buat Proyek Svelte: Buka terminal dan jalankan perintah berikut untuk membuat proyek baru:

   npx degit sveltejs/template svelte-sqlite-app
   cd svelte-sqlite-app
   npm install

3. Jalankan Proyek: Setelah instalasi selesai, jalankan proyek dengan perintah:

   npm run dev

Proyek Anda sekarang berjalan di http://localhost:5000. Anda dapat membuka URL ini di browser untuk melihat aplikasi Svelte yang baru saja Anda buat.

Menghubungkan Svelte dengan SQLite3

Setelah proyek Svelte Anda siap, langkah selanjutnya adalah menghubungkannya dengan SQLite3. Untuk melakukan ini, kita perlu menyiapkan backend yang akan menangani permintaan dari frontend Svelte dan berinteraksi dengan database SQLite3.

1. Instal SQLite3: Pertama, kita perlu menginstal SQLite3 di proyek kita. Jalankan perintah berikut di terminal:

   npm install sqlite3

2. Buat File Database: Buat file baru bernama database.js di direktori proyek Anda. Di dalam file ini, kita akan mengatur koneksi ke database SQLite3 dan membuat tabel yang diperlukan. Berikut adalah contoh kode untuk database.js:

   const sqlite3 = require('sqlite3').verbose();
   const db = new sqlite3.Database('./database.db');

db.serialize(() => {
       db.run("CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, email TEXT)");
   });

module.exports = db;

Kode di atas membuat database baru bernama database.db dan tabel users jika belum ada.

3. Membuat API untuk Mengakses Database: Selanjutnya, kita perlu membuat API untuk mengakses database. Buat file baru bernama server.js dan tambahkan kode berikut:

   const express = require('express');
   const bodyParser = require('body-parser');
   const db = require('./database');

const app = express();
   app.use(bodyParser.json());

app.get('/api/users', (req, res) => {
       db.all("SELECT * FROM users", [], (err, rows) => {
           if (err) {
               res.status(500).json({ error: err.message });
               return;
           }
           res.json({ users: rows });
       });
   });

app.post('/api/users', (req, res) => {
       const { name, email } = req.body;
       db.run("INSERT INTO users (name, email) VALUES (?, ?)", [name, email], function(err) {
           if (err) {
               res.status(500).json({ error: err.message });
               return;
           }
           res.json({ id: this.lastID });
       });
   });

const PORT = process.env.PORT || 3000;
   app.listen(PORT, () => {
       console.log(`Server is running on port ${PORT}`);
   });

Kode di atas menggunakan Express untuk membuat server yang dapat menangani permintaan GET dan POST untuk tabel users.

Baca Juga: Optimasi Caching Redis di Nodejs untuk Database Real Time

Membangun Antarmuka Pengguna

Setelah backend siap, kita perlu membangun antarmuka pengguna di Svelte untuk berinteraksi dengan API yang telah kita buat. Mari kita buat komponen untuk menampilkan dan menambahkan pengguna.

1. Membuat Komponen Pengguna: Di dalam folder src, buat file baru bernama User.svelte dan tambahkan kode berikut:

   <script>
       import { onMount } from 'svelte';
       let users = [];
       let name = '';
       let email = '';

onMount(async () => {
           const response = await fetch('/api/users');
           const data = await response.json();
           users = data.users;
       });

const addUser = async () => {
           const response = await fetch('/api/users', {
               method: 'POST',
               headers: {
                   'Content-Type': 'application/json'
               },
               body: JSON.stringify({ name, email })
           });
           const newUser = await response.json();
           users.push({ id: newUser.id, name, email });
           name = '';
           email = '';
       };
   </script>

<h1>Daftar Pengguna</h1>
   <ul>
       {#each users as user}
           <li>{user.name} - {user.email}</li>
       {/each}
   </ul>

<h2>Tambah Pengguna</h2>
   <input type="text" bind:value={name} placeholder="Nama" />
   <input type="email" bind:value={email} placeholder="Email" />
   <button on:click={addUser}>Tambah</button>

Komponen ini akan menampilkan daftar pengguna dan memungkinkan pengguna untuk menambahkan pengguna baru.

2. Menggunakan Komponen di App.svelte: Terakhir, kita perlu menggunakan komponen User di file App.svelte:

   <script>
       import User from './User.svelte';
   </script>

<main>
       <User />
   </main>

Baca Juga: Otomatisasi Pengumpulan Data dengan Puppeteer

Menjalankan Aplikasi Fullstack

Setelah semua langkah di atas selesai, Anda dapat menjalankan aplikasi fullstack sederhana Anda. Pastikan untuk menjalankan server Express dengan perintah:

node server.js

Kemudian, buka aplikasi Svelte di http://localhost:5000. Anda sekarang dapat melihat daftar pengguna dan menambahkan pengguna baru melalui antarmuka pengguna yang telah Anda buat.

Baca Juga: Tugas Latihan Pemrograman Java: Tipe dan Struktur Data #1

Dalam artikel ini, kita telah membahas cara membangun aplikasi fullstack sederhana menggunakan Svelte dan SQLite3. Dengan mengikuti tutorial svelte sqlite3 ini, Anda telah belajar cara membuat proyek Svelte, menghubungkannya dengan database SQLite3, dan membangun antarmuka pengguna yang interaktif. Kombinasi Svelte dan SQLite3 sangat cocok untuk pengembangan aplikasi web yang cepat dan efisien, memungkinkan Anda untuk fokus pada logika bisnis dan pengalaman pengguna. Dengan pengetahuan ini, Anda dapat mulai mengembangkan aplikasi fullstack sederhana yang memenuhi kebutuhan Anda.