Web SQL'den SQLite Wasm'a: Veritabanı taşıma kılavuzu

Kaynak özel dosya sistemi tarafından desteklenen SQLite Wasm ile, desteği sonlandırılan Web SQL veritabanı teknolojisinin yerine çok yönlü bir alternatif sunulur. Bu makale, verilerinizi Web SQL'den SQLite Wasm'ye taşıma konusunda size yol gösterecek bir rehberdir.

Thomas Steiner

Gerekli arka plan

Web SQL desteğini sonlandırma ve Web SQL'i kaldırma başlıklı yayında Web SQL veritabanı teknolojisinin desteğinin sonlandırıldığı duyurulmuştu. Teknolojinin kendisi kullanımdan kaldırılmış olsa da bu teknolojinin ele aldığı kullanım alanları geçerliliğini korumaya devam ediyor. Bu nedenle, SQLite Wasm in the browser backed by the Origin Private File System başlıklı takip gönderisinde, SQLite veritabanına dayalı, Web Assembly'ye derlenmiş (Wasm) ve origin private file system tarafından desteklenen bir dizi yedek teknoloji açıklanıyor. Bu makalede, Web SQL'den SQLite Wasm'ye veritabanı taşıma işlemi gösterilmektedir.

Veritabanlarınızı taşıma

Aşağıdaki dört adım, Web SQL veritabanını SQLite Wasm'ye taşıma konseptini gösterir. Bu işlemde, SQLite veritabanı, kaynak özel dosya sistemi tarafından desteklenir. Bu, Web SQL taşıma ihtiyaçlarınıza göre özelleştirilmiş kendi kodunuzun temelini oluşturabilir.

Taşınacak Web SQL veritabanları

Bu taşıma kılavuzunun temel varsayımı, uygulamanızla alakalı verileri tutan bir (veya birkaç) mevcut Web SQL veritabanınızın olduğudur. Aşağıdaki ekran görüntüsünde, ruh hallerini şiddet düzeyleriyle eşleyen bir yağmur fırtınaları tablosu içeren mydatabase adlı örnek bir veritabanı gösterilmektedir. Chrome Geliştirici Araçları, aşağıdaki ekran görüntüsünde gösterildiği gibi hata ayıklama için Web SQL veritabanlarını görüntülemenize olanak tanır.

Web SQL veritabanını SQL ifadelerine çevirme

Verileri kullanıcı için şeffaf bir şekilde (yani kullanıcının taşıma adımlarını kendi başına gerçekleştirmesini gerektirmeden) taşımak için veritabanındaki veri parçalarının, ilk başta oluşturuldukları orijinal SQL ifadelerine geri çevrilmesi gerekir. Bu sorun daha önce de yaşanmıştı. Bu makalede kullanılan taşıma komut dosyası (mywebsqldump.js), websqldump.js adlı topluluk kitaplığına dayanmaktadır ve bazı küçük düzenlemeler yapılmıştır. Aşağıdaki kod örneğinde, mydatabase adlı Web SQL veritabanını bir dizi SQL ifadesine çevirmek için gereken kod gösterilmektedir.

websqldump.export({
  database: 'mydatabase',
  version: '1.0',
  success: function(sql) {
    // The SQL statements.
  },
  error: function(err) {
    // Handle the error.
  }
});

Bu kodu çalıştırmak, aşağıdaki SQL ifadeleri dizesiyle sonuçlanır.

CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');

Verileri SQLite Wasm'ye aktarma

Geriye sadece bu SQL komutlarını SQLite Wasm bağlamında yürütmek kalıyor. SQLite Wasm'ı ayarlamayla ilgili tüm ayrıntılar için SQLite Wasm in the browser backed by the Origin Private File System (Tarayıcıda, Origin Private File System tarafından desteklenen SQLite Wasm) başlıklı makaleyi inceleyebilirsiniz. Ancak özetini aşağıda bulabilirsiniz. Bu kodun, kitaplığın sizin için otomatik olarak oluşturduğu bir Worker'da gerekli HTTP üstbilgileri doğru şekilde ayarlanmış olarak çalışması gerektiğini unutmayın. @sqlite.org/sqlite-wasm paketini npm'den yükleyebilirsiniz.

import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';

(async () => {
  try {
    const promiser = await new Promise((resolve) => {
      const _promiser = sqlite3Worker1Promiser({
        onready: () => {
          resolve(_promiser);
        },
      });
    });

    let response;

    response = await promiser('open', {
      filename: 'file:mydatabase.db?vfs=opfs',
    });
    const { dbId } = response;

    const sql = `
      CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
      INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
      INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
      INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');`
    await promiser('exec', { dbId, sql });

    await promiser('close', { dbId });
  } catch (err) {
    if (!(err instanceof Error)) {
      err = new Error(err.result.message);
    }
    console.error(err.name, err.message);
  }
})();

Bu kodu çalıştırdıktan sonra, içe aktarılan veritabanı dosyasını OPFS Explorer Chrome Geliştirici Araçları uzantısıyla inceleyin. Artık biri gerçek veritabanını, diğeri ise günlük kaydı bilgilerini içeren iki dosya var. Bu iki dosyanın, kaynak özel dosya sisteminde bulunduğunu ve bunları görmek için OPFS Explorer uzantısını kullanmanız gerektiğini unutmayın.

İçe aktarılan verilerin ilk Web SQL verileriyle aynı olduğunu doğrulamak için dosyayı tıklayın mydatabase.db. OPFS Explorer uzantısı, dosyayı kullanıcı tarafından görülebilen dosya sistemine kaydetmenize olanak tanıyan bir Dosyayı Kaydet iletişim kutusu gösterir. Veritabanı dosyası kaydedildikten sonra verileri incelemek için bir SQLite görüntüleyici uygulaması kullanın. Project Fugu API Showcase'te tarayıcıda SQLite ile çalışmaya yönelik çeşitli uygulamalar yer almaktadır. Örneğin, Sqlime — SQLite Playground, sabit diskinizden bir SQLite veritabanı dosyası açmanıza ve veritabanında sorgu çalıştırmanıza olanak tanır. Aşağıdaki ekran görüntüsünde gördüğünüz gibi, yağmur fırtınası tablosu SQLite'e doğru şekilde aktarılmıştır.

Web SQL depolama alanını boşaltma

Web SQL veritabanını silmek mümkün olmasa da (belki şaşırtıcı bir şekilde), verileri SQLite Wasm'ye taşıdıktan sonra artık kullanılmayan Web SQL tablolarını bırakarak yine de biraz depolama alanı boşaltmanız gerekir. Web SQL veritabanındaki tüm tabloları listelemek ve JavaScript kullanarak silmek için aşağıdaki snippet'teki gibi bir kod kullanın:

const dropAllTables = () => {
  try {
    db.transaction(function (tx) {
      tx.executeSql(
        "SELECT name FROM sqlite_master WHERE type='table' AND name !='__WebKitDatabaseInfoTable__'",
        [],
        function (tx, result) {
          const len = result.rows.length;
          const tableNames = [];
          for (let i = 0; i < len; i++) {
            const tableName = result.rows.item(i).name;
            tableNames.push(`'${tableName}'`);
            db.transaction(function (tx) {
              tx.executeSql('DROP TABLE ' + tableName);
            });
          }
          console.log(`Dropped table${tableNames.length > 1 ? 's' : ''}: ${tableNames.join(', ')}.`);
        }
      );
    });
  } catch (err) {
    console.error(err.name, err.message);
  }
};

Taşımadan sonra verilerle çalışma

Verileri taşıdıktan sonra, bu Başlangıç kodu örneğinde belirtildiği şekilde verilerle çalışın. Ayrıntılar için SQLite Wasm API referansına bakın. Depolama arka ucu olarak kaynak özel dosya sistemini kullanıyorsanız SQLite Wasm'a bir Worker'dan erişmeniz gerektiğini tekrar hatırlatırız.

Sonuçlar

Web SQL veritabanlarınızı, kaynak özel dosya sistemi tarafından desteklenen SQLite Wasm'ye kullanıcılarınız için şeffaf bir şekilde taşıyabilirsiniz. Verilerinin artık SQLite veritabanında, kaynağa özel dosya sisteminde barındırıldığını ve Web SQL'de bulunmadığını fark etmezler. Genel olarak, Web SQL'den SQLite'a geçiş, uygulamalarının uzun vadeli kararlılığını ve ölçeklenebilirliğini sağlamak isteyen web geliştiriciler için gerekli bir adımdır. Bu süreç başlangıçta biraz çaba gerektirebilir ancak daha sağlam, esnek ve her şeyden önemlisi geleceğe hazır bir veritabanı çözümünün avantajları, bu yatırımı yapmaya değer kılar.