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

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

Thomas Steiner

רקע נדרש

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

מסקנות

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