Dari Web SQL ke SQLite Wasm: panduan migrasi database

Dengan SQLite Wasm yang didukung oleh sistem file pribadi asal, ada pengganti serbaguna untuk teknologi database Web SQL yang tidak digunakan lagi. Artikel ini adalah panduan untuk memigrasikan data Anda dari Web SQL ke SQLite Wasm.

Thomas Steiner

Latar belakang yang diperlukan

Postingan Penghentian penggunaan dan penghapusan Web SQL mengumumkan penghentian penggunaan teknologi database Web SQL. Meskipun teknologi itu sendiri mungkin sudah tidak digunakan lagi, kasus penggunaan yang ditangani oleh teknologi tersebut masih sangat relevan, sehingga postingan lanjutan SQLite Wasm di browser yang didukung oleh Origin Private File System menguraikan serangkaian teknologi pengganti berdasarkan database SQLite, yang dikompilasi ke Web Assembly (Wasm), dan didukung oleh origin private file system. Untuk melengkapi siklusnya, artikel ini menunjukkan cara memigrasikan database dari Web SQL ke SQLite Wasm.

Memigrasikan database

Empat langkah berikut menunjukkan ide konseptual untuk memigrasikan database Web SQL ke SQLite Wasm, dengan database SQLite yang didukung oleh sistem file pribadi asal. Kode ini dapat berfungsi sebagai dasar untuk kode Anda sendiri yang disesuaikan dengan kebutuhan migrasi Web SQL Anda.

Database Web SQL yang akan dimigrasikan

Asumsi dasar panduan migrasi ini adalah Anda memiliki satu (atau beberapa) database Web SQL yang sudah ada dan menyimpan data yang relevan dengan aplikasi Anda. Pada screenshot di bawah, Anda melihat contoh database bernama mydatabase dengan tabel badai hujan yang memetakan suasana hati ke tingkat keparahan. Chrome DevTools memungkinkan Anda melihat database Web SQL untuk proses debug, seperti yang ditunjukkan pada screenshot berikut.

Database Web SQL yang diperiksa di DevTools Chrome. Database ini bernama mydatabase dan menghosting tabel dengan tiga kolom: row ID, mood, dan severity. Ada tiga baris data sampel.

Menerjemahkan database Web SQL ke pernyataan SQL

Untuk memigrasikan data dengan cara yang transparan bagi pengguna, yaitu tanpa mengharuskan mereka melakukan langkah-langkah migrasi sendiri, potongan data dalam database harus diterjemahkan kembali ke pernyataan SQL asli yang membuatnya sejak awal. Tantangan ini pernah muncul sebelumnya, dan skrip migrasi yang digunakan dalam artikel ini—mywebsqldump.js—didasarkan pada library komunitas yang disebut websqldump.js, dengan beberapa penyesuaian kecil. Contoh kode berikut menunjukkan kode yang diperlukan untuk menerjemahkan database Web SQL mydatabase ke serangkaian pernyataan SQL.

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

Menjalankan kode ini akan menghasilkan string pernyataan SQL di bawah.

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');

Mengimpor data ke SQLite Wasm

Yang tersisa hanyalah menjalankan perintah SQL ini dalam konteks SQLite Wasm. Untuk mengetahui semua detail terkait penyiapan SQLite Wasm, lihat artikel SQLite Wasm in the browser backed by the Origin Private File System, tetapi intinya ada di bawah. Ingatlah bahwa kode ini perlu berjalan di Worker (yang dibuat secara otomatis oleh library untuk Anda), dengan header HTTP yang diperlukan disetel dengan benar. Anda dapat menginstal paket @sqlite.org/sqlite-wasm dari npm.

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);
  }
})();

Setelah menjalankan kode ini, periksa file database yang diimpor dengan ekstensi Chrome DevTools OPFS Explorer. Sekarang ada dua file, satu dengan database sebenarnya, dan satu dengan informasi penjurnalan. Perhatikan bahwa kedua file ini berada di sistem file pribadi origin, jadi Anda harus menggunakan ekstensi OPFS Explorer untuk melihatnya.

Memeriksa sistem file pribadi origin dengan Chrome DevTools OPFS Explorer. Ada dua file, satu bernama mydatabase.db dan satu lagi bernama mydatabase.db-journal.

Untuk benar-benar memverifikasi bahwa data yang diimpor sama dengan data Web SQL awal, klik file mydatabase.db dan ekstensi OPFS Explorer akan menampilkan dialog Save File untuk memungkinkan Anda menyimpan file di sistem file yang terlihat oleh pengguna. Setelah file database disimpan, gunakan aplikasi penampil SQLite untuk menjelajahi data. Project Fugu API Showcase menampilkan beberapa aplikasi untuk bekerja dengan SQLite di browser. Misalnya, Sqlime — SQLite Playground memungkinkan Anda membuka file database SQLite dari hard disk dan menjalankan kueri pada database. Seperti yang Anda lihat pada screenshot di bawah, tabel badai hujan telah diimpor dengan benar ke SQLite.

Mengeksplorasi file mydatabase.db di alat Sqlime SQLite Playground. Aplikasi ditampilkan dengan kueri SQL select star from rainstorms limit 10 yang sedang dijalankan, sehingga menghasilkan tiga baris dari data contoh awal dari Web SQL.

Mengosongkan penyimpanan Web SQL

Meskipun (mungkin mengejutkan) database Web SQL tidak dapat dihapus, Anda tetap harus mengosongkan beberapa penyimpanan dengan menghapus tabel Web SQL yang kini tidak digunakan lagi setelah memigrasikan data ke SQLite Wasm. Untuk mencantumkan semua tabel dalam database Web SQL dan menghapusnya menggunakan JavaScript, gunakan kode seperti dalam cuplikan berikut:

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);
  }
};

Menangani data setelah migrasi

Setelah Anda memigrasikan data, kerjakan data seperti yang diuraikan dalam contoh kode Memulai ini. Lihat referensi SQLite Wasm API untuk mengetahui detailnya. Sekali lagi, Anda perlu mengakses SQLite Wasm dari Worker jika menggunakan sistem file pribadi asal sebagai backend penyimpanan.

Kesimpulan

Memigrasikan database Web SQL Anda ke SQLite Wasm yang didukung oleh sistem file pribadi origin dapat dilakukan dengan cara yang transparan bagi pengguna Anda. Mereka tidak akan menyadari bahwa data mereka kini dihosting di sistem file pribadi asal dalam database SQLite, dan tidak lagi berada di Web SQL. Secara keseluruhan, bermigrasi dari Web SQL ke SQLite adalah langkah yang diperlukan bagi developer web yang ingin memastikan stabilitas dan skalabilitas jangka panjang aplikasi mereka. Meskipun prosesnya mungkin memerlukan upaya awal, manfaat dari solusi database yang lebih andal, fleksibel, dan yang terpenting, siap untuk masa depan, menjadikannya layak untuk diinvestasikan.