จาก 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 ในเว็บสำหรับการแก้ไขข้อบกพร่องได้ดังที่แสดงในภาพหน้าจอต่อไปนี้

ฐานข้อมูล Web SQL ที่ตรวจสอบในเครื่องมือสําหรับนักพัฒนาเว็บของ Chrome ฐานข้อมูลนี้ชื่อว่า mydatabase และโฮสต์ตารางที่มี 3 คอลัมน์ ได้แก่ รหัสแถว อารมณ์ และความรุนแรง ข้อมูลตัวอย่างมี 3 แถว

การแปลฐานข้อมูล 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 เพื่อดูไฟล์

การตรวจสอบระบบไฟล์ส่วนตัวต้นทางด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ของ OPFS Explorer มี 2 ไฟล์ ไฟล์หนึ่งชื่อ mydatabase.db และอีกไฟล์หนึ่งชื่อ mydatabase.db-journal

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

สำรวจไฟล์ mydatabase.db ในเครื่องมือ Sqlime SQLite Playground แอปจะแสดงขึ้นพร้อมกับการเรียกใช้การค้นหา SQL ของ select star from rainstorms limit 10 ซึ่งแสดงผล 3 แถวจากข้อมูลตัวอย่างเริ่มต้นจาก Web SQL

การเพิ่มพื้นที่ว่างใน 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 ที่แพตช์แล้ว

แอปเดโมที่ web-sql-to-sqlite-wasm.glitch.me

สรุป

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