จาก 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 ช่วยให้คุณดูฐานข้อมูล Web 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 แล้ว หากต้องการแสดงรายการตารางทั้งหมดในฐานข้อมูล Web 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

สรุป

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