Bangun Aplikasi Full Stack dengan SvelteKit dan OceanBase
Bangun Aplikasi Full Stack dengan SvelteKit dan OceanBase
[ad_1]
Di postingan sebelumnya di seri kami tentang cara menggunakan OceanBase untuk memecahkan masalah dunia nyata, saya bicarakan cara menginstal OceanBase pada instans AWS EC2. Hari ini kita akan terjun ke dunia Node/JavaScript dan menunjukkan bagaimana mengimplementasikan OceanBase dalam aplikasi full-stack.
Untuk proyek ini, kami akan membuat aplikasi Todo yang memungkinkan pengguna membuat, membaca, memperbarui, dan menghapus tugas. Aplikasi akan menggunakan SvelteKit untuk front-end dan server dan OceanBase sebagai database.
Pada artikel ini, saya akan memandu Anda melalui proses penyiapan OceanBase dan SvelteKit serta mengintegrasikannya untuk membuat aplikasi todo. Kami akan membahas semuanya mulai dari membuat komponen dan rute yang diperlukan hingga menghubungkan ke database dan melakukan operasi CRUD.
Di akhir artikel ini, Anda akan memiliki aplikasi yang berfungsi penuh yang menggunakan database OceanBase dan kemudahan penggunaan SvelteKit. Jadi, mari selami dan mulai!
Tentang OceanBase dan SvelteKit
SvelteKit adalah kerangka kerja yang dibangun di atas Svelte (mirip dengan cara Next.js bereaksi). Ini dirancang untuk membangun aplikasi web dari berbagai ukuran dengan perutean berbasis sistem file yang fleksibel. Tidak seperti aplikasi satu halaman lainnya, SvelteKit tidak berkompromi pada SEO, peningkatan bertahap, atau pengalaman pemuatan awal – tetapi tidak seperti aplikasi yang dirender server tradisional, navigasi instan untuk nuansa aplikasi itu.
SvelteKit dan OceanBase membentuk duo yang dinamis. OceanBase adalah sistem manajemen basis data relasional terdistribusi yang dikembangkan oleh Ant Group. Ini dirancang untuk menangani data dalam jumlah yang sangat besar dan menyediakan ketersediaan dan skalabilitas yang tinggi.
OceanBase menyederhanakan proses membangun dan menerapkan aplikasi cloud-native, secara dramatis mengurangi waktu penerapan. Dengan kekuatan OceanBase arsitektur terdistribusi, Anda dapat membangun aplikasi lebih cepat dan lebih efisien sambil memastikan keandalan dan kinerja di berbagai wilayah.
Apa yang akan kita bangun: aplikasi Todo
Aplikasi Todo ini, dibangun dengan SvelteKit dan OceanBase, adalah contoh yang bagus untuk menggunakan OceanBase dalam sebuah proyek. Meskipun OceanBase biasanya digunakan dalam kasus penggunaan yang jauh lebih canggih, seperti perbankan, deteksi penipuan, dan asuransi, proyek ini memberikan ikhtisar tentang cara mengimplementasikan OceanBase dalam aplikasi lengkap yang dibuat dengan SvelteKit, sejak konfigurasi komponen dan rute yang diperlukan . untuk terhubung ke database dan melakukan operasi CRUD.
Data tugas akan disimpan dalam database OceanBase pada instans EC2 di AWS. Seperti inilah tampilan aplikasi terakhir. Saya juga akan memasukkan a GitLab repositori di akhir artikel sehingga Anda dapat mencobanya sendiri.
Teknologi yang digunakan dalam proyek ini meliputi:
- OceanBasedatabase relasional terdistribusi
- SvelteKitkerangka web full-stack berdasarkan Svelte
- CSS melawan arah anginkerangka utilitas CSS untuk menata komponen front-end
- MySQL2driver MySQL untuk Node.js
Menyiapkan OceanBase
Untuk menyiapkan proyek, pertama-tama Anda memerlukan kluster OceanBase yang sedang berjalan. Anda memiliki beberapa opsi untuk melakukan ini. Kamu bisa instal OceanBase di lingkungan lokal Anda, menjalankan mesin virtual di cloud menjalankan atau menggunakannya OceanBase Cloud di AWS Marketplace untuk mengonfigurasi cluster Anda dalam beberapa klik.
Dalam proyek ini, saya akan menggunakan pendekatan EC2 dan server demo untuk kesederhanaan. Dalam produksi, silakan lihat OceanBase panduan resmi tentang penyebaran di kluster Kubernetes.
Setelah menjalankan server demo, saya membuat pengguna demo dengan kata sandi “demo” yang hanya memiliki akses ke todos database yang saya buat untuk proyek ini.
Berikut adalah contoh skema untuk tabel tugas:
CREATE TABLE tasks (
id INT NOT NULL AUTO_INCREMENT,
text VARCHAR(255) NOT NULL,
completed BOOLEAN NOT NULL DEFAULT false,
PRIMARY KEY (id)
);
Ini membuat tabel tugas dengan tiga kolom: id (bilangan bulat yang bertambah sendiri), text (sebuah string hingga 255 karakter, yang merupakan nama elemen todo), dan completed (nilai boolean yang defaultnya adalah false). Kunci utama dari tabel tersebut adalah id kolom.
Mengonfigurasi SvelteKit
Untuk memulai SvelteKit, Anda harus menginstal Node.js di mesin Anda. Anda dapat mengunduh Node.js versi terbaru dari situs web resmi.
Setelah Node.js diinstal, Anda dapat membuat proyek SvelteKit baru menggunakan perintah berikut:
npx degit sveltejs/kit oceanbase-app
cd oceanbase-app
npm install
Ini akan membuat proyek SvelteKit baru di oceanbase-app direktori dan instal semua dependensi yang diperlukan.
Sekarang jalankan perintah berikut untuk memulai server pengembangan.
npm run dev
Ini akan memulai server dan memungkinkan Anda untuk melihat aplikasi Anda di browser di http://localhost:3000.
Antarmuka pengguna
Svelte adalah framework berbasis komponen, artinya kita perlu membuat beberapa komponen Svelte di src kasus. Dalam components folder, kita perlu membuat dua komponen Svelte: Todo.svelte, TodoForm.svelte. ITU Todo akan menampilkan daftar tugas, dan TodoForm akan memungkinkan pengguna untuk membuat dan memperbarui tugas.
di sini adalah Todo.svelte Cari muka. Ini bertanggung jawab untuk merender satu elemen tugas ke layar, termasuk kotak centang untuk menandai tugas sebagai selesai, teks tugas, dan tombol “Hapus” untuk menghapus tugas dari daftar.
Komponen menerima a todo objek sebagai penyangga, yang berisi informasi tentang tugas, seperti ID, teks, dan status penyelesaiannya. ITU toggleTodoCompleted Fungsi ini dipanggil saat pengguna mengklik kotak centang, dan deleteTodo Fungsi ini dipanggil saat pengguna mengklik tombol “Hapus”. Kedua fungsi tersebut diimpor dari todoStore.js file, yang menangani operasi CRUD untuk item todo di database OceanBase.
<script>
export let todo;
import {deleteTodo, toggleTodoCompleted} from '../stores/todoStore.js';
</script>
<li class="bg-white flex items-center shadow-sm border border-gray-200 rounded-lg my-2 py-2 px-4">
<input
name="completed"
type="checkbox"
checked={todo.completed}
on:change={() => toggleTodoCompleted(todo.id, todo.completed)}
class="mr-2 form-checkbox h-5 w-5"
/>
<span
class={`flex-1 text-gray-800 ${
todo.completed ? 'line-through' : ''
}`}
>
{todo.text}
</span>
<button
type="button"
class="text-sm bg-red-500 hover:bg-red-600 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
on:click={() => deleteTodo(todo.id)}
>
Delete
</button>di sini adalah TodoForm.svelte Cari muka. Itu penting a addTodo fungsi dari todoStore.js file, yang menangani operasi CRUD untuk item todo di database OceanBase. Formulir menyertakan label dan kolom input bagi pengguna untuk memasukkan teks tugas, dan tombol kirim untuk menambahkan tugas ke aplikasi.
<script>
import { addTodo } from '../stores/todoStore.js';
let todo = '';
const handleSubmit = () => {
addTodo(todo);
todo = '';
};
</script>
<form class="form my-6" on:submit|preventDefault={handleSubmit}>
<div class="flex flex-col text-sm mb-2">
<label for="todo" class="font-bold mb-2 text-gray-800 "> Todo </label>
<input
type="text"
name="todo"
bind:value={todo}
placeholder="ex. Learn about authentication in Next.js"
class="appearance-none shadow-sm border border-gray-200 p-2 focus:outline-none focus:border-gray-500 rounded-lg "
/>
</div>
<button
type="submit"
class=" w-full shadow-sm rounded bg-green-500 hover:bg-green-600 text-white py-2 px-4"
>
Submit
</button>
</form>Selanjutnya, kita perlu menampilkan semua tugas di halaman. Kami akan menggunakan halaman indeks default untuk melakukan ini. Dalam /src/route/index.svelte halaman, kita dapat menelusuri semua tugas dan menampilkannya.
<script>
import Todo from '../components/Todo.svelte';
import TodoForm from '../components/TodoForm.svelte';
import { todos } from '../stores/todoStore.js';
</script>
<main>
<h1 class="text-2xl font-bold text-center text-gray-800 md:text-3xl">
Todo App
</h1>
<TodoForm />
{#each $todos as todo (todo.id)}
<Todo {todo} />
{/each}
</main>Dalam src/stores/todoStore.js file, kami memiliki fungsi untuk menambah, menghapus, dan memperbarui tugas. Fungsi-fungsi ini terhubung ke database OceanBase dan melakukan operasi yang diperlukan untuk membuat, membaca, memperbarui, dan menghapus tugas.
ITU loadTodos memuat tugas basis data dan memperbarui todos simpan dengan data. ITU addTodo, deleteTodoDan toggleTodoCompleted terhubung ke database OceanBase dan melakukan operasi yang diperlukan untuk membuat, menghapus, dan memperbarui tugas. Dengan menggunakan fungsi ini, kita dapat melakukan operasi CRUD pada tugas melalui UI.
Perhatikan bahwa untuk alasan keamanan, fungsi ini berkomunikasi dengan /api/todos Rute API, tidak langsung dengan database. Dalam hal ini, kueri database berjalan dengan aman di sisi server. Saya akan menyelami rute API di bagian selanjutnya dari artikel ini.
import { writable } from 'svelte/store';
export const todos = writable([]);
export const loadTodos = async () => {
try {
const response = await fetch('/api/todos');
const data = await response.json();
todos.set(data);
} catch (error) {
console.error('Error fetching data:', error);
}
};
loadTodos();
export const addTodo = async (text) => {
try {
const response = await fetch('/api/todos', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: text, completed: false }),
});
const data = await response.json();
todos.update((currentTodos) => [...currentTodos, data]);
} catch (error) {
console.error('Error adding todo:', error);
}
};
export const deleteTodo = async (id) => {
try {
await fetch(`/api/todos/${id}`, {
method: 'DELETE',
});
todos.update((currentTodos) =>
currentTodos.filter((todo) => todo.id !== id)
);
} catch (error) {
console.error('Error deleting todo:', error);
}
};
export const toggleTodoCompleted = async (id, currentState) => {
try {
const response = await fetch(`/api/todos/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ completed: !currentState }),
});
const data = await response.json();
todos.update((currentTodos) =>
currentTodos.map((todo) => (todo.id === id ? data : todo))
);
} catch (error) {
console.error('Error toggling todo completed status:', error);
}Hubungkan SvelteKit dan OceanBase
Sekarang mari kita bicara tentang kode sisi server. Sisi server terdiri dari dua bagian: modul database yang membuat koneksi antara server dan instance OceanBase kami yang sedang berjalan dan rute API yang melakukan tindakan CRUD di database OceanBase dari server. .
Dalam lib/db/oceanbase.js file, kita dapat menggunakan klien MySQL2 untuk membuat koneksi ke OceanBase dan kemudian mengekspor koneksi untuk dikonsumsi oleh rute API kita. Selalu disarankan untuk menyimpan kredensial database Anda di a .env file dan menggunakan dotenv paket untuk mengakses nilai-nilai ini.
import mysql from 'mysql2/promise';
import * as dotenv from 'dotenv';
dotenv.config();
export const oceanbaseConnection = await mysql.createConnection({
host: process.env.HOST,
port: 2881,
user: process.env.USERNAME,
database: 'todos',Dalam src/routes/api mengajukan, kami memiliki index.js dan satu [id].js untuk mengajukan. File-file ini berisi titik akhir API yang akan digunakan aplikasi kita untuk berinteraksi dengan database OceanBase. ITU index.js menangani operasi CRUD untuk semua tugas, sedangkan [id].js File menangani operasi CRUD untuk satu tugas per ID.
Dalam index.js file, pertama-tama kita perlu mengimpor oceanbaseConnection objek modul basis data kami dan tulis fungsi permintaan GET dan POST. Kedua fungsi tersebut akan memungkinkan antarmuka untuk mendapatkan semua tugas dari database dan memasukkan item tugas baru ke dalam database.
import { oceanbaseConnection } from '../../../lib/db/oceanbase';Untuk permintaan GET, kita perlu melakukan query SQL SELECT everything pada tabel tugas database.
export async function get() {
let results = await oceanbaseConnection
.query('SELECT * FROM tasks')
.then(function ([rows, fields]) {
console.log(rows);
return rows;
});
return {
body: results,
};
}Untuk metode POST, kita perlu mendapatkan teks dan melengkapi properti dari kueri dan memasukkannya ke dalam pernyataan SQL INSERT yang menyisipkan baris ke dalam tabel tugas.
export async function post(request) {
console.log(request);
const { text, completed } = request.body;
let newTask = await oceanbaseConnection
.query('INSERT INTO tasks (text, completed) VALUES (?, ?)', [
text,
completed,
])
.then(function ([result]) {
return { id: result.insertId, text: text, completed: completed };
});
return {
body: newTask,
};Setelah menambahkan beberapa item tugas dari UI, kita dapat melihat baris berikut di database OceanBase kita:
Begitu juga di [id].js file, kita perlu mengonfigurasi fungsi DELETE dan fungsi PUT sehingga ujung depan dapat melakukan tindakan penghapusan atau mengubah status tugas yang telah selesai.
Pertama, mari kita impor juga oceanbaseConnection objek modul basis data.
import { oceanbaseConnection } from '../../../lib/db/oceanbase';Dalam [id].js file, metode DELETE diterapkan untuk menghapus item dari tabel tugas. Ini dicapai dengan menggunakan pernyataan DELETE FROM SQL menggunakan id parameter kueri.
export async function del(req) {
const { id } = req.params;
try {
await oceanbaseConnection.query('DELETE FROM tasks WHERE id = ?', [id]);
return {
status: 200,
body: { message: `Todo with id ${id} deleted successfully.` },
};
} catch (error) {
console.error('Error deleting todo:', error);
return {
status: 500,
body: { message: 'Error deleting todo. Please try again later.' },
};
}
}Metode PUT diimplementasikan untuk memperbarui status selesai item tugas di tabel tugas. Kami akan menggunakan pernyataan UPDATE untuk memperbarui item dalam database.
export async function put(req) {
const { id } = req.params;
const { completed } = req.body;
try {
await oceanbaseConnection.query(
'UPDATE tasks SET completed = ? WHERE id = ?',
[completed, id]
);
const [updatedTodo] = await oceanbaseConnection.query(
'SELECT * FROM tasks WHERE id = ?',
[id]
);
return {
status: 200,
body: JSON.stringify(updatedTodo),
};
} catch (error) {
console.error('Error toggling todo completed status:', error);
return {
status: 500,
body: {
message:
'Error toggling todo completed status. Please try again later.',
},
};
}
} Kesimpulan
Saya mengunggah proyek ke GitLab yang dapat Anda tiru dan gunakan untuk memulai proyek Anda sendiri menggunakan SvelteKit dan OceanBase. Anda dapat menemukan proyek Di Sini. Cukup tiru repositori dan ikuti petunjuk di file README untuk menyiapkan proyek di lingkungan lokal Anda.
Untuk menjalankan aplikasi, Anda harus memodifikasi .env.example file menggunakan kredensial database Anda sendiri dan ganti nama file menjadi satu .env untuk mengajukan.
Kesimpulannya, membangun aplikasi full-stack dengan SvelteKit dan OceanBase bisa menjadi cara yang bagus untuk mempelajari cara menggunakan OceanBase dalam sebuah proyek. Dengan mengonfigurasi komponen dan rute yang diperlukan, menghubungkan ke database, dan menjalankan operasi CRUD, Anda dapat lebih memahami cara menggunakan OceanBase dalam pengaturan praktis. Dengan bantuan aplikasi Todo ini, Anda dapat menjelajahi fitur OceanBase dan melihat cara kerjanya bersama dengan aplikasi Node Anda.
[ad_2]
