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

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

תומאס סטיינר
תומאס סטיינר

רקע נדרש

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

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

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

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

סיור בקובץ mydatabase.db בכלי Sqlime SQLite Playground. האפליקציה מוצגת עם מגבלת 'בחירת כוכב' מתוך סופות גשמים ל-10 שאילתות SQL, וכתוצאה מכך מוצגות שלוש השורות מנתוני הדגימה הראשוניים מ-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 הוא שלב הכרחי למפתחי אתרים שרוצים להבטיח יציבות ויכולת התאמה לעומס (scaling) של האפליקציות שלהם בטווח הארוך. התהליך עשוי לדרוש מאמץ ראשוני מסוים, אבל היתרונות של פתרון מסד נתונים יציב, גמיש ומעל לכל מאפשר עמידה בעתיד מאפשר את ההשקעה.