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 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 tidak digunakan lagi, kasus penggunaan yang ditangani oleh teknologi tersebut masih sangat banyak, sehingga postingan lanjutan SQLite Wasm di browser yang didukung oleh Sistem File Pribadi Origin, menguraikan kumpulan teknologi pengganti berdasarkan database SQLite, dikompilasi ke Web Assembly (Wasm), dan didukung oleh sistem file pribadi origin. Untuk menutup lingkaran, 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. 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 ada yang menyimpan data yang relevan dengan aplikasi Anda. Pada screenshot di bawah, Anda melihat contoh database bernama mydatabase dengan tabel hujan deras yang memetakan suasana hati ke tingkat keparahan. Chrome DevTools memungkinkan Anda melihat database Web SQL untuk proses debug, seperti yang ditunjukkan pada screenshot berikut.

Menerjemahkan database Web SQL ke pernyataan SQL

Untuk memigrasikan data dengan cara yang transparan bagi pengguna, yaitu, tanpa mengharuskan pengguna untuk melakukan langkah migrasi apa pun sendiri, potongan data dalam database perlu diterjemahkan kembali ke pernyataan SQL asli yang dibuat terlebih dahulu. Tantangan ini telah 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 kumpulan 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 Wasm SQLite

Yang tersisa hanyalah menjalankan perintah SQL ini dalam konteks SQLite Wasm. Untuk mengetahui semua detail tentang cara menyetel SQLite Wasm up, baca artikel SQLite Wasm in the browser yang didukung oleh Origin Private File System. Namun, intinya ada lagi di bawah ini. Ingat bahwa kode ini harus berjalan di Pekerja (yang dibuat secara otomatis oleh library untuk Anda), dengan header HTTP yang diperlukan ditetapkan 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 yang sebenarnya, dan satu lagi dengan informasi pencatatan jurnal. Perhatikan bahwa kedua file ini berada di sistem file pribadi asal, sehingga Anda perlu menggunakan ekstensi OPFS Explorer untuk melihatnya.

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 agar Anda dapat menyimpan file di sistem file yang terlihat oleh pengguna. Dengan file database yang disimpan, gunakan aplikasi penampil SQLite untuk mengeksplorasi data. Project Fugu API Showcase menampilkan beberapa aplikasi untuk menggunakan SQLite di browser. Misalnya, Sqlime — SQLite Playground memungkinkan Anda membuka file database SQLite dari hard disk dan menjalankan kueri di database. Seperti yang Anda lihat pada screenshot di bawah, tabel hujan badai telah diimpor dengan benar ke SQLite.

Mengosongkan penyimpanan Web SQL

Meskipun (mungkin mengejutkan) tidak mungkin menghapus database Web SQL, Anda tetap harus mengosongkan beberapa penyimpanan dengan menghapus tabel Web SQL yang sekarang 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 memigrasikan data, gunakan data tersebut seperti yang diuraikan dalam Contoh kode memulai ini. Lihat referensi SQLite Wasm API untuk mengetahui detailnya. Sekali lagi, perlu diingat bahwa Anda perlu mengakses SQLite Wasm dari Pekerja jika menggunakan sistem file pribadi asal sebagai backend penyimpanan.

Melakukan pengujian

Demo ini memungkinkan Anda mengisi database Web SQL dengan data contoh, lalu membuang data Web SQL sebagai pernyataan SQL, yang selanjutnya akan diimpor ke SQLite Wasm yang didukung oleh sistem file pribadi asal. Terakhir, Anda mengosongkan penyimpanan dengan menghapus data Web SQL yang sudah tidak digunakan. Periksa kode sumber untuk implementasi lengkap, termasuk file mywebsqldump.js yang di-patch.

Kesimpulan

Memigrasikan database Web SQL ke SQLite Wasm yang didukung oleh sistem file pribadi asal dapat dilakukan dengan cara yang transparan bagi pengguna. 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, migrasi dari Web SQL ke SQLite merupakan langkah penting bagi developer web yang ingin memastikan stabilitas dan skalabilitas jangka panjang aplikasi mereka. Meskipun prosesnya mungkin memerlukan beberapa upaya awal, manfaat dari solusi database yang lebih andal, fleksibel, dan, yang terpenting, siap untuk masa depan, membuat investasi ini sangat berharga.