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, terdapat pengganti serbaguna untuk teknologi database Web SQL yang sudah 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 teknologi database Web SQL. Meskipun teknologi itu sendiri mungkin sudah tidak digunakan lagi, kasus penggunaan yang ditangani oleh teknologi tersebut sangat jarang terjadi. Oleh karena itu, postingan lanjutan SQLite Wasm di browser yang didukung oleh Origin Private File System menguraikan kumpulan teknologi pengganti berdasarkan database SQLite, yang 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 asal. Hal 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 dari panduan migrasi ini adalah Anda sudah memiliki satu (atau beberapa) database Web SQL yang menyimpan data yang relevan dengan aplikasi. Pada screenshot di bawah, Anda dapat melihat contoh database bernama mydatabase dengan tabel hujan yang memetakan mood terhadap tingkat keparahan. Chrome DevTools memungkinkan Anda melihat database Web SQL untuk proses debug, seperti yang ditunjukkan di screenshot berikut.

Database Web SQL diperiksa di DevTools Chrome. {i>Database<i} tersebut disebut mydatabase dan memiliki 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 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 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 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');

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

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 dijalankan di Worker (yang dibuat oleh library secara otomatis 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 {i>database<i} aktual, dan satu dengan informasi jurnal. Perhatikan bahwa kedua file ini berada di sistem file pribadi asal, sehingga Anda perlu menggunakan ekstensi OPFS Explorer untuk melihatnya.

Memeriksa sistem file pribadi asal dengan OPFS Explorer Chrome DevTools. Ada dua file, satu bernama {i>mydatabase.db<i} dan
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. 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 pada database. Seperti yang Anda lihat pada screenshot di bawah, tabel hujan telah diimpor dengan benar ke dalam SQLite.

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

Mengosongkan penyimpanan Web SQL

Meskipun (mungkin mengejutkan) database Web SQL tidak mungkin dihapus, Anda tetap harus mengosongkan 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 meletakkannya 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 data seperti 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 Anda menggunakan sistem file pribadi asal sebagai backend penyimpanan.

Melakukan pengujian

Demo ini memungkinkan Anda mengisi database Web SQL dengan data sampel, lalu menghapus data Web SQL sebagai pernyataan SQL, yang selanjutnya diimpor ke Wasm SQLite 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.

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

Kesimpulan

Memigrasikan database Web SQL ke SQLite Wasm yang didukung oleh sistem file pribadi asal dapat dilakukan dengan cara yang transparan kepada pengguna. Pengguna tidak akan menyadari bahwa data mereka kini dihosting di sistem file pribadi asal dalam database SQLite, dan tidak lagi ada 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 upaya awal, manfaat solusi database yang lebih tangguh, fleksibel, dan, yang terpenting, tetap siap menghadapi masa depan akan membuatnya sepadan dengan investasi.