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

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

Thomas Steiner

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

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

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

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

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

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

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

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

ในการย้ายข้อมูลในลักษณะที่แสดงต่อผู้ใช้อย่างโปร่งใส กล่าวคือ ผู้ใช้ไม่ต้องทำขั้นตอนการย้ายข้อมูลด้วยตนเอง ส่วนของข้อมูลในฐานข้อมูลจะต้องได้รับการแปลกลับไปเป็นคำสั่ง SQL เดิมที่สร้างข้อมูลดังกล่าวไว้ตั้งแต่แรก ความท้าทายนี้เกิดขึ้นแล้ว และสคริปต์การย้ายข้อมูลที่ใช้ในบทความนี้ mywebsqldump.js อิงตามไลบรารีชุมชนที่ชื่อ websqldump.js ซึ่งมีการปรับเปลี่ยนเล็กน้อย ตัวอย่างโค้ดต่อไปนี้แสดงโค้ดที่จำเป็นในการแปลฐานข้อมูล 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 up เราขอแนะนำให้อ่านบทความ SQLite Wasm ในเบราว์เซอร์ที่สนับสนุนโดยระบบไฟล์ส่วนตัวดั้งเดิม แต่คำอธิบายอยู่ที่ด้านล่างอีกครั้ง โปรดทราบว่าโค้ดนี้ต้องทำงานใน 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 DevTools ปัจจุบันมี 2 ไฟล์ โดยไฟล์แรกมีฐานข้อมูลจริงและอีกไฟล์มีข้อมูลรายการบันทึก โปรดทราบว่าทั้งสองไฟล์นี้อยู่ในระบบไฟล์ส่วนตัวที่เป็นต้นทาง คุณจึงต้องใช้ส่วนขยาย OPFS Explorer เพื่อดูไฟล์ดังกล่าว

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

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

สำรวจไฟล์ mydatabase.db ในเครื่องมือ Sqlime SQLite Playground แอปจะแสดงด้วยดาวการเลือกคำสั่ง SQL จากพายุฝนซึ่งจำกัดการทำงานอยู่ที่ 10 แถว ทำให้มี 3 แถวจากข้อมูลตัวอย่างเริ่มต้นจาก SQL ในเว็บ

เพิ่มพื้นที่ว่างในพื้นที่เก็บข้อมูล SQL ในเว็บ

แม้จะ (ไม่น่าแปลกใจเลย) ที่จะลบฐานข้อมูล SQL ในเว็บได้ แต่คุณยังควรเพิ่มพื้นที่ว่างได้โดยทิ้งตาราง 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 จากผู้ปฏิบัติงานหากใช้ระบบไฟล์ส่วนตัวต้นทางเป็นแบ็กเอนด์พื้นที่เก็บข้อมูล

ทดลองใช้

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

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

บทสรุป

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