จาก Web SQL ไปยัง SQLite Wasm: คำแนะนำในการย้ายข้อมูลฐานข้อมูล

SQLite Wasm ที่ได้รับการสนับสนุนโดยระบบไฟล์ส่วนตัวที่เป็นต้นทางทำให้สามารถแทนที่เทคโนโลยีฐานข้อมูล Web SQL ที่เลิกใช้งานไปได้อย่างยืดหยุ่น บทความนี้เป็นคำแนะนำในการย้ายข้อมูลจาก Web SQL ไปยัง SQLite Wasm

Thomas Steiner

ต้องระบุพื้นหลัง

โพสต์การเลิกใช้งานและการนำ Web SQL ออกได้ประกาศการเลิกใช้งานเทคโนโลยีฐานข้อมูล Web SQL แม้ว่าเทคโนโลยีนี้อาจเลิกใช้งานแล้ว แต่ Use Case ที่เทคโนโลยีนี้จัดการได้ยังคงอยู่ ดังนั้นโพสต์ติดตามผลเรื่อง SQLite Wasm ในเบราว์เซอร์ที่รองรับระบบไฟล์ส่วนตัวของต้นทางจะอธิบายชุดเทคโนโลยีที่จะมาแทนที่ซึ่งอิงตามฐานข้อมูล SQLite ที่คอมไพล์เป็น Web Assembly (Wasm) และรองรับโดยระบบไฟล์ส่วนตัวของต้นทาง บทความนี้จะแสดงวิธีย้ายข้อมูลฐานข้อมูลจาก Web SQL ไปยัง SQLite Wasm

การย้ายข้อมูลฐานข้อมูล

4 ขั้นตอนต่อไปนี้แสดงแนวคิดในการย้ายข้อมูลฐานข้อมูล Web SQL ไปยัง SQLite Wasm โดยที่ระบบไฟล์ส่วนตัวต้นทางสำรองข้อมูลฐานข้อมูล SQLite ซึ่งจะเป็นรากฐานสําหรับโค้ดของคุณเองที่ปรับแต่งตามความต้องการในการย้ายข้อมูล Web SQL ของคุณ

ฐานข้อมูล SQL ในเว็บที่จะย้าย

สมมติฐานพื้นฐานของคู่มือการย้ายข้อมูลนี้คือคุณมีฐานข้อมูล Web SQL ที่มีอยู่ 1 (หรือหลาย) รายการซึ่งเก็บข้อมูลที่เกี่ยวข้องกับแอปของคุณ ในภาพหน้าจอด้านล่าง คุณจะเห็นตัวอย่างฐานข้อมูลชื่อ mydatabase ที่มีตาราง rainstorms ซึ่งแมปอารมณ์กับความรุนแรง เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณดูฐานข้อมูล SQL ในเว็บสำหรับการแก้ไขข้อบกพร่องได้ดังที่แสดงในภาพหน้าจอต่อไปนี้

การแปลฐานข้อมูล SQL ในเว็บเป็นคำสั่ง SQL

หากต้องการย้ายข้อมูลในลักษณะที่ผู้ใช้เข้าใจได้ ซึ่งก็คือไม่ต้องให้ผู้ใช้ดำเนินการตามขั้นตอนการย้ายข้อมูลด้วยตนเอง จะต้องแปลข้อมูลบางส่วนในฐานข้อมูลกลับไปเป็นคำสั่ง SQL เดิมที่สร้างข้อมูลเหล่านั้นในตอนแรก ปัญหานี้เกิดขึ้นแล้วก่อนหน้านี้ และสคริปต์การย้ายข้อมูลที่ใช้ในบทความนี้อย่าง mywebsqldump.js นั้นอิงตามไลบรารีชุมชนชื่อ websqldump.js โดยมีการปรับเล็กน้อย ตัวอย่างโค้ดต่อไปนี้แสดงโค้ดที่จําเป็นสําหรับแปลฐานข้อมูล Web SQL mydatabase เป็นชุดคำสั่ง SQL

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

การรันโค้ดนี้จะแสดงสตริงคำสั่ง 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');

การนำเข้าข้อมูลไปยัง SQLite Wasm

สิ่งที่เหลืออยู่คือการเรียกใช้คำสั่ง SQL เหล่านี้ในบริบทของ SQLite Wasm โปรดดูรายละเอียดทั้งหมดเกี่ยวกับการตั้งค่า SQLite Wasm ในบทความ SQLite Wasm ในเบราว์เซอร์ที่รองรับระบบไฟล์ส่วนตัวของ Origin แต่สรุปสั้นๆ อยู่ด้านล่างนี้ โปรดทราบว่าโค้ดนี้ต้องทำงานใน Worker (ซึ่งไลบรารีจะสร้างให้คุณโดยอัตโนมัติ) โดยมีการตั้งค่าส่วนหัว HTTP ที่จําเป็นอย่างถูกต้อง คุณสามารถติดตั้งแพ็กเกจ @sqlite.org/sqlite-wasm ได้จาก 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);
  }
})();

หลังจากเรียกใช้โค้ดนี้แล้ว ให้ตรวจสอบไฟล์ฐานข้อมูลที่นำเข้าด้วยส่วนขยาย OPFS Explorer ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ปัจจุบันมี 2 ไฟล์ โดยไฟล์แรกมีฐานข้อมูลจริงและอีกไฟล์มีข้อมูลรายการบันทึก โปรดทราบว่าไฟล์ทั้ง 2 ไฟล์นี้อยู่ในระบบไฟล์ส่วนตัวต้นทาง คุณจึงต้องใช้ส่วนขยาย OPFS Explorer เพื่อดูไฟล์

หากต้องการยืนยันว่าข้อมูลที่นำเข้านั้นเหมือนกับข้อมูล Web SQL เริ่มต้น ให้คลิกไฟล์ mydatabase.db แล้วส่วนขยาย OPFS Explorer จะแสดงกล่องโต้ตอบบันทึกไฟล์เพื่อให้คุณบันทึกไฟล์ในระบบไฟล์ที่ผู้ใช้มองเห็นได้ เมื่อบันทึกไฟล์ฐานข้อมูลแล้ว ให้ใช้แอปโปรแกรมดู SQLite เพื่อสำรวจข้อมูล Project Fugu API Showcase มีแอปหลายรายการสําหรับการทํางานกับ SQLite ในเบราว์เซอร์ เช่น Sqlime — SQLite Playground ช่วยให้คุณเปิดไฟล์ฐานข้อมูล SQLite จากฮาร์ดดิสก์และเรียกใช้การค้นหาในฐานข้อมูลได้ ดังที่คุณเห็นในภาพหน้าจอด้านล่าง ระบบได้นําเข้าตารางพายุฝนลงใน SQLite อย่างถูกต้องแล้ว

การเพิ่มพื้นที่ว่างใน Web SQL

แม้ว่าจะลบฐานข้อมูล Web SQL ไม่ได้ (อาจเป็นเรื่องที่น่าประหลาดใจ) แต่คุณควรเพิ่มพื้นที่ว่างบางส่วนด้วยการทิ้งตาราง Web SQL ที่ล้าสมัยแล้วหลังจากที่ย้ายข้อมูลไปยัง SQLite Wasm แล้ว หากต้องการแสดงตารางทั้งหมดในฐานข้อมูล SQL ในเว็บ และวางโดยใช้ JavaScript ให้ใช้โค้ดดังตัวอย่างต่อไปนี้

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

การทำงานกับข้อมูลหลังจากการย้ายข้อมูล

หลังจากย้ายข้อมูลแล้ว ให้ทํางานกับข้อมูลตามที่ระบุไว้ในตัวอย่างโค้ดเริ่มต้นใช้งานนี้ ดูรายละเอียดได้ที่ข้อมูลอ้างอิง SQLite Wasm API โปรดทราบว่าคุณต้องเข้าถึง SQLite Wasm จาก Worker หากคุณใช้ระบบไฟล์ส่วนตัวต้นทางเป็นแบ็กเอนด์ของพื้นที่เก็บข้อมูล

ลองใช้

การสาธิตนี้ช่วยให้คุณป้อนข้อมูลตัวอย่างลงในฐานข้อมูล Web SQL จากนั้นส่งออกข้อมูล Web SQL เป็นคำสั่ง SQL ซึ่งจะนำเข้าไปยัง SQLite Wasm ที่ระบบไฟล์ส่วนตัวต้นทางรองรับในลำดับถัดไป สุดท้าย คุณเพิ่มพื้นที่เก็บข้อมูลได้ด้วยการลบข้อมูล SQL ในเว็บที่ล้าสมัย ตรวจสอบซอร์สโค้ดเพื่อดูการติดตั้งใช้งานอย่างเต็มรูปแบบ รวมถึงไฟล์ mywebsqldump.js ที่แพตช์แล้ว

สรุป

คุณสามารถย้ายข้อมูลฐานข้อมูล SQL ในเว็บไปยัง SQLite Wasm ที่ได้รับการสนับสนุนโดยระบบไฟล์ส่วนตัวของต้นทางได้ด้วยวิธีที่โปร่งใสแก่ผู้ใช้ ผู้ใช้จะไม่ทราบว่าตอนนี้ข้อมูลของตนโฮสต์อยู่ในระบบไฟล์ส่วนตัวของต้นทางในฐานข้อมูล SQLite และไม่ได้อยู่ใน Web SQL อีกต่อไป โดยรวมแล้ว การย้ายข้อมูลจาก Web SQL ไปยัง SQLite เป็นขั้นตอนที่จําเป็นสําหรับนักพัฒนาเว็บที่ต้องการความเสถียรและความสามารถในการปรับขนาดของแอปพลิเคชันในระยะยาว แม้ว่ากระบวนการนี้อาจต้องใช้ความพยายามเล็กน้อย แต่การใช้โซลูชันฐานข้อมูลที่มีประสิทธิภาพ มีความยืดหยุ่น และเหนือสิ่งอื่นใดคือโซลูชันฐานข้อมูลที่ประสบความสำเร็จในระยะยาว ทำให้คุ้มค่าต่อการลงทุน