מ-Web SQL ל-SQLite Wasm: המדריך להעברת מסדי נתונים

SQLite Wasm מגובה על ידי מערכת הקבצים הפרטית של המקור, כך שיש תחליף גמיש לטכנולוגיית מסד הנתונים Web SQL שהוצאה משימוש. המאמר הזה הוא מדריך להעברת הנתונים מ-Web SQL ל-SQLite Wasm.

רקע נדרש

בפוסט הוצאה משימוש והסרה של Web SQL הודענו על הוצאה משימוש של טכנולוגיית מסד הנתונים Web SQL. יכול להיות שהטכנולוגיה עצמה הוצאה משימוש, אבל תרחישים לדוגמה שהטכנולוגיה מטפלת בהם לא הוצאו משימוש. לכן, בפוסט העוקב SQLite Wasm בדפדפן שמגובים על ידי מערכת הקבצים הפרטית של המקור מתוארת קבוצת טכנולוגיות חלופיות שמבוססות על מסד הנתונים SQLite, שעבר הידור ל-Web Assembly (Wasm) ומגובים על ידי מערכת הקבצים הפרטית של המקור. לסיום, במאמר הזה נסביר איך להעביר מסדי נתונים מ-Web SQL ל-SQLite Wasm.

העברת מסדי הנתונים

בארבעת השלבים הבאים מוצגת הרעיון הרעיוני של העברת מסד נתונים של Web SQL ל-SQLite Wasm, כאשר מסד הנתונים של SQLite מגובה במערכת הקבצים הפרטית של המקור. הקוד הזה יכול לשמש כבסיס לקוד שלכם, מותאם אישית לצרכים של אתם בהעברת Web SQL.

מסדי הנתונים של Web SQL שרוצים להעביר

ההנחה הבסיסית במדריך ההעברה הזה היא שיש לכם מסד נתונים אחד (או כמה) קיים של Web SQL שמכיל נתונים שרלוונטיים לאפליקציה שלכם. בצילום המסך שבהמשך מוצג מסד נתונים לדוגמה שנקרא mydatabase עם טבלה של סופות רעמים שממפה מצבי רוח לרמות חומרה. כלי הפיתוח של Chrome מאפשרים להציג מסדי נתונים של Web SQL לצורך ניפוי באגים, כפי שמוצג בצילום המסך הבא.

מסד נתונים של Web SQL שנבדק בכלי הפיתוח של Chrome. מסד הנתונים נקרא mydatabase ומכיל טבלה עם שלוש עמודות: מזהה שורה, מצב רוח וחומרה. יש שלוש שורות של נתונים לדוגמה.

תרגום מסד הנתונים של Web 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 בדפדפן שמגובל על ידי מערכת הקבצים הפרטית של המקור, אבל גם כאן נספק סקירה כללית. חשוב לזכור שהקוד הזה צריך לפעול ב-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. עכשיו יש שני קבצים, אחד עם מסד הנתונים בפועל ואחד עם פרטי היומן. חשוב לזכור ששני הקבצים האלה נמצאים במערכת הקבצים הפרטית של המקור, ולכן צריך להשתמש בתוסף OPFS Explorer כדי לראות אותם.

בדיקה של מערכת הקבצים הפרטית של המקור באמצעות כלי הפיתוח ל-Chrome של OPFS Explorer. יש שני קבצים, אחד שנקרא mydatabase.db והשני שנקרא mydatabase.db-journal.

כדי לוודא שהנתונים המיובאים זהים לנתוני Web SQL הראשוניים, לוחצים על הקובץ mydatabase.db ובתוסף OPFS Explorer תוצג תיבת הדו-שיח Save File (שמירה של הקובץ), שמאפשרת לשמור את הקובץ במערכת הקבצים שגלויה למשתמש. אחרי שמירת קובץ מסד הנתונים, אפשר להשתמש באפליקציית צפייה ב-SQLite כדי לבחון את הנתונים. בProject Fugu API Showcase יש כמה אפליקציות לעבודה עם SQLite בדפדפן. לדוגמה, Sqlime — SQLite Playground מאפשר לכם לפתוח קובץ של מסד נתונים ב-SQLite מהדיסק הקשיח ולהריץ שאילתות במסד הנתונים. כפי שרואים בצילום המסך שלמטה, טבלת הגשם הוגדר בצורה נכונה ב-SQLite.

חקירה של הקובץ mydatabase.db בכלי Sqlime SQLite Playground. האפליקציה מוצגת עם שאילתת ה-SQL select star from rainstorms limit 10 שפועלת, וכתוצאה מכך מוצגות שלוש השורות מנתוני המדגם הראשוני מ-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 שמגובות על ידי מערכת הקבצים הפרטית של המקור. לבסוף, תוכלו למחוק את נתוני Web SQL הלא רלוונטיים כדי לפנות מקום באחסון. בודקים את קוד המקור כדי לראות את ההטמעה המלאה, כולל הקובץ mywebsqldump.js עם התיקון.

אפליקציית ההדגמה בכתובת web-sql-to-sqlite-wasm.glitch.me.

מסקנות

אפשר להעביר את מסדי הנתונים של Web SQL ל-SQLite Wasm שמגובים על ידי מערכת הקבצים הפרטית של המקור, באופן שקוף למשתמשים. הם לא יבחינו בכך שהנתונים שלהם מתארחים עכשיו במערכת הקבצים הפרטית של המקור במסד נתונים של SQLite, ולא נמצאים יותר ב-Web SQL. באופן כללי, מעבר מ-Web SQL ל-SQLite הוא שלב הכרחי למפתחי אתרים שרוצים להבטיח את היציבות והתאימות לטווח ארוך של האפליקציות שלהם. יכול להיות שהתהליך ידרוש מאמץ ראשוני מסוים, אבל היתרונות של פתרון יעיל, גמיש ועמיד יותר לטווח הארוך של מסדי נתונים, שווים את ההשקעה.