{"id":2950,"date":"2024-11-04T17:15:12","date_gmt":"2024-11-04T14:15:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/tauri-2-0-ile-sqlite-veritabanini-react-uygulamanizda-kullanma\/"},"modified":"2024-11-04T17:15:12","modified_gmt":"2024-11-04T14:15:12","slug":"tauri-2-0-ile-sqlite-veritabanini-react-uygulamanizda-kullanma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/tauri-2-0-ile-sqlite-veritabanini-react-uygulamanizda-kullanma\/","title":{"rendered":"Tauri 2.0 ile SQLite Veritaban\u0131n\u0131 React Uygulaman\u0131zda Kullanma"},"content":{"rendered":"

Tauri 2.0 ile SQLite Veritaban\u0131n\u0131 React Uygulaman\u0131zda Kullanma<\/p>\n

Bu makalede, Tauri 2.0’\u0131 kullanarak React uygulaman\u0131zda SQLite veritaban\u0131n\u0131 nas\u0131l entegre edebilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Tauri, \u00e7apraz platform masa\u00fcst\u00fc uygulamalar\u0131 olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir framework’t\u00fcr ve SQLite, hafif ve yerle\u015fik bir veritaban\u0131 sistemidir. Bu ikiliyi birle\u015ftirerek, performansl\u0131 ve kullan\u0131m\u0131 kolay veritaban\u0131 i\u015flevselli\u011fini React uygulamalar\u0131n\u0131za ekleyebilirsiniz.<\/p>\n

Neden Tauri ve SQLite?<\/h2>\n

Tauri ve SQLite, masa\u00fcst\u00fc uygulamalar\u0131 i\u00e7in harika bir kombinasyondur. Tauri, geli\u015ftiricilere HTML, CSS ve JavaScript ile masa\u00fcst\u00fc uygulamalar\u0131 olu\u015fturma olana\u011f\u0131 sa\u011flarken, SQLite, verileri yerel olarak depolamak i\u00e7in h\u0131zl\u0131 ve g\u00fcvenilir bir yol sunar. Bu sayede, kullan\u0131c\u0131 verilerini \u00e7evrimd\u0131\u015f\u0131 olarak saklamak, performans\u0131 art\u0131rmak ve \u00fc\u00e7\u00fcnc\u00fc taraf hizmetlerine ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 azaltmak m\u00fcmk\u00fcn olur.\n<\/p>\n

Proje Kurulumu<\/h2>\n

\u0130lk ad\u0131m, Tauri ve React projenizi kurmakt\u0131r. Bu i\u015flem, Tauri’nin sa\u011flad\u0131\u011f\u0131 CLI arac\u0131l\u0131\u011f\u0131yla kolayca yap\u0131labilir. <\/p>\n

“`bash
\nnpx create-tauri-app my-tauri-app –template=react
\ncd my-tauri-app
\n“`<\/p>\n

Bu komutlar, “my-tauri-app” ad\u0131nda yeni bir Tauri projesi olu\u015fturacak ve React \u015fablonunu kullanacakt\u0131r. Proje olu\u015fturulduktan sonra, terminalde “npm install” komutunu \u00e7al\u0131\u015ft\u0131rarak gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyebilirsiniz. <\/p>\n

SQLite Ba\u011flant\u0131s\u0131 Kurma<\/h2>\n

Tauri’de SQLite ile etkile\u015fim kurmak i\u00e7in “sqlite” paketini kullanaca\u011f\u0131z. Bu paketi proje ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131za eklemek i\u00e7in “npm install sqlite” komutunu \u00e7al\u0131\u015ft\u0131r\u0131n.<\/p>\n

Ard\u0131ndan, veritaban\u0131 ile etkile\u015fim kurabilece\u011fimiz bir yard\u0131mc\u0131 fonksiyon tan\u0131mlayaca\u011f\u0131z:<\/p>\n

“`javascript
\n\/\/ src\/main.rs
\nuse tauri::Manager;
\nuse sqlite::{Connection, OpenFlags};<\/p>\n

#[tauri::command]
\nfn connect_db() -> Result {
\n let db_path = “my_database.db”;
\n let conn = Connection::open_with_flags(
\n db_path,
\n OpenFlags::SQLITE_OPEN_CREATE | OpenFlags::SQLITE_OPEN_READWRITE,
\n )
\n .map_err(|e| e.to_string())?;
\n Ok(conn)
\n}<\/p>\n

fn main() {
\n tauri::Builder::default()
\n .invoke_handler(tauri::generate_handler![connect_db])
\n .run(tauri::generate_context!())
\n .expect(“error while running tauri application”);
\n}
\n“`<\/p>\n

Bu kod, “my_database.db” ad\u0131nda bir veritaban\u0131 dosyas\u0131 olu\u015fturur veya var olan bir dosyay\u0131 a\u00e7ar. E\u011fer dosya yoksa, otomatik olarak olu\u015fturulur. “connect_db” fonksiyonu, Tauri’nin “invokeHandler” mekanizmas\u0131 arac\u0131l\u0131\u011f\u0131yla React uygulaman\u0131zdan \u00e7a\u011f\u0131r\u0131labilen bir Tauri komutudur.<\/p>\n

React Uygulaman\u0131zda Veritaban\u0131n\u0131 Kullanma<\/h2>\n

Art\u0131k veritaban\u0131na ba\u011flant\u0131 kurabildi\u011fimiz i\u00e7in, React uygulaman\u0131zda veritaban\u0131n\u0131 kullanmak i\u00e7in gerekli i\u015flemleri ger\u00e7ekle\u015ftirebiliriz. \u00d6rnek olarak, bir kullan\u0131c\u0131 listesi olu\u015fturup veritaban\u0131nda saklayaca\u011f\u0131z:<\/p>\n

“`javascript
\n\/\/ src\/App.jsx
\nimport React, { useState, useEffect } from ‘react’;
\nimport { invoke } from ‘@tauri-apps\/api\/tauri’;<\/p>\n

function App() {
\n const [users, setUsers] = useState([]);<\/p>\n

useEffect(() => {
\n const fetchUsers = async () => {
\n const conn = await invoke(‘connect_db’);
\n const stmt = conn.prepare(“SELECT * FROM users”).unwrap();
\n let users = [];
\n while let Some(row) = stmt.next().unwrap() {
\n users.push({
\n id: row.get(0).unwrap(),
\n name: row.get(1).unwrap(),
\n email: row.get(2).unwrap(),
\n });
\n }
\n setUsers(users);
\n };
\n fetchUsers();
\n }, []);<\/p>\n

const addUser = async (name, email) => {
\n const conn = await invoke(‘connect_db’);
\n conn.execute(“INSERT INTO users (name, email) VALUES (?, ?)”, &[name, email])
\n .unwrap();
\n const newUsers = […users, { id: users.length + 1, name, email }];
\n setUsers(newUsers);
\n };<\/p>\n

return (<\/p>\n

\n Kullan\u0131c\u0131 Listesi<\/p>\n