Halaman ini diterjemahkan oleh Cloud Translation API.

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 sudah tidak digunakan lagi. Artikel ini adalah panduan untuk memigrasikan data dari Web SQL ke SQLite Wasm.

Thomas Steiner

Twitter GitHub Glitch Mastodon Halaman beranda

Latar belakang wajib

Pasca-Penghentian penggunaan dan penghapusan Web SQL mengumumkan penghentian teknologi database Web SQL. Meskipun teknologi itu sendiri mungkin tidak digunakan lagi, kasus penggunaan yang ditangani oleh teknologi tersebut tidak banyak dibahas, sehingga postingan tindak lanjut SQLite Wasm di browser yang didukung oleh Origin Private File System menjelaskan rangkaian teknologi pengganti berdasarkan database SQLite, dikompilasi ke Web Assembly (Wasm), dan didukung oleh sistem file pribadi asal. 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 origin. Hal ini dapat berfungsi sebagai dasar untuk kode Anda sendiri yang disesuaikan dengan kebutuhan migrasi SQL Web Anda.

Database Web SQL yang akan dimigrasikan

Asumsi dasar dari panduan migrasi ini adalah Anda sudah memiliki satu (atau beberapa) database Web SQL yang menyimpan data relevan dengan aplikasi Anda. Pada screenshot di bawah ini, Anda akan melihat contoh database bernama mydatabase dengan tabel rainstorms 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 Chrome DevTools. {i>Database<i} itu disebut {i>mydatabase<i} dan menjadi {i>host<i} tabel dengan tiga kolom: ID baris, mood, dan tingkat keparahan. Ada tiga baris data sampel.

Menerjemahkan database Web SQL ke pernyataan SQL

Untuk memigrasikan data secara transparan bagi pengguna, yaitu, tanpa mengharuskan mereka melakukan langkah migrasi sendiri, potongan data dalam database perlu diterjemahkan kembali ke pernyataan SQL asli yang membuatnya. 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 mydatabase database Web SQL ke sekumpulan pernyataan SQL.

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

Menjalankan kode ini menghasilkan string pernyataan SQL di bawah ini.

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

Peringatan: Langkah-langkah yang diuraikan menunjukkan ide konseptual yang diuji di database kecil. Untuk memigrasikan database ukuran produksi, langkah penyesuaian performa tambahan mungkin diperlukan. Misalnya, melakukan pra-pemrosesan string pernyataan SQL. Satu pengoptimalan adalah dengan mengelompokkan pernyataan INSERT: INSERT INTO rainstorms VALUES ('somber',6), ('rainy',8), ('stormy',2). Anda mungkin juga harus menerapkan patch lebih lanjut pada mywebsqldump.js agar dapat menangani kasus sudut yang ada dalam data SQL Web Anda.

Mengimpor data ke SQLite Wasm

Yang tersisa adalah mengeksekusi perintah SQL ini dalam konteks SQLite Wasm. Untuk mengetahui semua detail terkait cara menyetel SQLite Wasm up, saya merujuk Anda ke artikel SQLite Wasm di browser yang didukung oleh Origin Private File System, tetapi intinya lagi di bawah. Ingat bahwa kode ini perlu dijalankan di Worker (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. Ada dua file sekarang, satu dengan database yang sebenarnya, dan satu lagi dengan informasi jurnal. Perhatikan bahwa kedua file ini berada di sistem file pribadi asal, jadi Anda perlu menggunakan ekstensi OPFS Explorer untuk melihatnya.

Memeriksa sistem file pribadi asal dengan OPFS Explorer di Chrome DevTools. Ada dua file, satu bernama {i>mydatabase.db<i} dan
yang satu lagi bernama {i>mydatabase.db-journal<i}.

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. Setelah file database disimpan, gunakan aplikasi penampil SQLite untuk menjelajahi data. Project Fugu API Menampilkan menampilkan beberapa aplikasi untuk menggunakan 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 rainstorm telah diimpor dengan benar ke SQLite.

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

Mengosongkan penyimpanan Web SQL

Meskipun (mungkin mengejutkan) database Web SQL tidak dapat dihapus, Anda masih harus mengosongkan sebagian penyimpanan dengan menghapus tabel Web SQL yang sudah tidak digunakan lagi setelah memigrasikan data ke SQLite Wasm. Untuk mencantumkan semua tabel dalam database Web SQL dan melepaskannya 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);
  }
};

Bekerja dengan data setelah migrasi

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

Melakukan pengujian

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

Aplikasi demo di web-sql-to-sqlite-wasm.glitch.me.

Kesimpulan

Migrasi database Web SQL ke SQLite Wasm yang didukung oleh sistem file pribadi origin dapat dilakukan secara transparan bagi pengguna. Pengguna tidak akan menyadari bahwa datanya kini dihosting di sistem file pribadi origin dalam database SQLite, dan tidak lagi berada di Web SQL. Secara keseluruhan, migrasi dari Web SQL ke SQLite adalah langkah penting 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 tangguh, fleksibel, dan, yang terpenting, siap menghadapi masa depan, membuat investasi ini sepadan.