מ-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.

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

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

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

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

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

תרגום מסד הנתונים Web SQL להצהרות SQL

כדי להעביר את הנתונים באופן שקוף למשתמש, כלומר בלי לחייב אותו לבצע את שלבי ההעברה בעצמו, צריך לתרגם את קטעי הנתונים במסד הנתונים חזרה לביטויי ה-SQL המקוריים שיצרו אותם מלכתחילה. האתגר הזה כבר צוין בעבר, וסקריפט ההעברה שמוצג במאמר הזה – mywebsqldump.js – מבוסס על ספרייה של קהילה שנקראת websqldump.js, עם כמה שינויים קלים. דוגמת הקוד הבאה מציגה את הקוד הנדרש לתרגום מסד הנתונים mydatabase של Web SQL לקבוצה של הצהרות 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');

אזהרה: השלבים המפורטים מתארים את הרעיון הרעיוני שנבדק במסד נתונים קטן. כדי להעביר מסדי נתונים בגודל ייצור, יכול להיות שיהיה צורך לבצע שלבים נוספים של כוונון ביצועים. לדוגמה, עיבוד מקדים של מחרוזת ההצהרות של SQL. אפשרות אחת לביצוע אופטימיזציה היא לקבץ את הצהרות INSERT: INSERT INTO rainstorms VALUES ('somber',6), ('rainy',8), ('stormy',2). יכול להיות שתצטרכו גם לתקן את mywebsqldump.js כדי לטפל בצורה נכונה בתרחישים קיצוניים שקיימים בנתוני Web SQL של כם.

ייבוא הנתונים ל-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 כדי לראות אותם.

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

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