החרגה ו-Fugu: שיפור התהליכים העיקריים שהמשתמשים עוברים

לא ניתן להבדיל בין טכנולוגיה מתקדמת מספיק לבין קסם. אלא אם הבנתם אותו. קוראים לי תומאס סטיינר ואני עובד בצוות קשרי מפתחים ב-Google. בכתיבת ההרצאה שלי על Google I/O, אבחן כמה מממשקי ה-API החדשים של Fugu ואיך הם משפרים את התהליכים העיקריים שעוברים המשתמשים ב-Expalidraw PWA. כך תוכלו לקבל השראה מהרעיונות האלה וליישם אותם באפליקציות משלכם.

Thomas Steiner

איך הגעתי ל-Excalidraw

אני רוצה להתחיל בסיפור. ב-1 בינואר 2020, כריסטופר שדו, מהנדס תוכנה ב-Facebook, ציוץ על אפליקציית ציור קטנה שהייתה לו התחיל לעבוד על. בעזרת הכלי הזה אפשר לצייר תיבות וחיצים שנראים כמו דמויות מצוירות בכתב יד. למחרת, תוכלו גם לשרטט אליפסות וטקסט, וגם לבחור אובייקטים ולהזיז בסביבה. ב-3 בינואר, האפליקציה קיבלה את שמה, Excalidraw, וכמו כל הדברים הטובים קניית שם הדומיין הייתה אחת מהמעשים הראשונים של כריסטופר. על ידי עכשיו תוכלו להשתמש בצבעים ולייצא את השרטוט כולו כקובץ PNG.

ב-15 בינואר, כריסטופר פרסם פוסט בבלוג שמשך תשומת לב רבה ב-Twitter, כולל שלי. הפוסט התחיל עם נתונים סטטיסטיים מרשימים:

• 12,000 משתמשים פעילים ייחודיים
• 1.5,000 כוכבים ב-GitHub
• 26 תורמי תוכן

בפרויקט שהתחיל לפני שבועיים בלבד, זה לא רע בכלל. אבל הדבר שבאמת העניין שלי היה גבוה יותר בפוסט. כריסטופר כתב שהוא ניסה משהו חדש זמן: מתן גישה ללא תנאי לכל מי שקיבל בקשת משיכה. אותו יום של לקרוא את הפוסט בבלוג, הייתה לי בקשת משיכה שהוסיפו תמיכה ב-File System Access API ל-Excalidraw, כדי לתקן בקשה לתכונה שמשתמש הגיש.

בקשת המשיכה שלי מוזגה יום לאחר מכן, ולאחר מכן הייתה לי גישת התחייבות מלאה. אין צורך לציין, לא השתמשתי לרעה בכוח שיש לי. עד כה, ולא אף אחד אחר מבין 149 תורמי התוכן.

כיום, Excalidraw היא אפליקציית Progressive Web App מלאה להתקנה, עם תמיכה במצב אופליין, מצב כהה מדהים וגם כן, יכולת לפתוח ולשמור קבצים File System Access API.

ליפיס שמסביר למה הוא מקדיש כל כך הרבה מזמנו ל-Excalidraw

זה סוף המשפט "איך הגעתי ל-Excalidraw" אבל לפני שאתעמק בחלק התכונות המדהימות של Excalidraw, אני שמח להציג לך את Panayiotis. פנאיוטיס ליפירידיס, מופעל האינטרנט, שנקרא פשוט lipis, הוא התורם הפגום ביותר Excalidraw. שאלתי את ליפיס מה גורם לו להקדיש כל כך הרבה מזמנו ל-excalidraw:

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

אני מסכים/ה לחלוטין עם lipis. מי שניסה את Excalidraw מנסה למצוא תירוצים להשתמש בו שוב.

אקסלידראו בפעולה

אני רוצה להראות לך עכשיו איך אפשר להשתמש ב-EXcalidraw בפועל. אני לא אמן מעולה, אבל הלוגו של Google I/O פשוט מספיק, אז בואו לנסות. תיבה היא ה-i, קו יכול להיות קו נטוי ו-o הוא מעגל. לוחצים לחיצה ארוכה על מקש Shift כדי ליצור עיגול מושלם. תנו לי לזוז את הקו הנטוי, כדי שזה ייראה טוב יותר. עכשיו נראה קצת צבע ל-i ו-o. כחול זה טוב. אולי סגנון מילוי אחר? הכול מוצק או מצולע? לא, האקר נראה נהדר. זה לא מושלם, אבל זה הרעיון של Excalidraw, אז תנו לי לשמור אותו.

לחצתי על סמל השמירה והזנתי שם קובץ בתיבת הדו-שיח של שמירת הקובץ. ב-Chrome, דפדפן תומך ב-File System Access API, זו אינה הורדה אלא פעולת שמירה אמיתית, שבה ניתן ולבחור את המיקום והשם של הקובץ, ואיפה אם אני עושה שינויים אותו קובץ.

אני רוצה לשנות את הלוגו וליצור את ה-i אדום. אם אלחץ על 'שמירה' שוב, השינוי יישמר ומאותו קובץ כמו קודם. כהוכחה, אני רוצה לנקות את אזור העריכה ולפתוח מחדש את הקובץ. כמו שאפשר לראות, סמל הלוגו הכחול האדום שהשתנה מוצג שוב.

עבודה עם קבצים

בדפדפנים שלא תומכים כרגע ב-File System Access API, כל פעולת שמירה כך שכאשר אני מבצע שינויים, בסוף יש לי כמה קבצים עם מספר גדל והולך שממלא את תיקיית ההורדות שלי. אך למרות החיסרון הזה, אני עדיין יכול לשמור את הקובץ.

פתיחת קבצים

אז מה הסוד? איך פתיחה ושמירה של פעולה בדפדפנים שונים שאולי לא יפעלו כמו שצריך לתמוך ב-File System Access API? פתיחת קובץ ב-Expalidraw מתבצעת בפונקציה שנקראת loadFromJSON)(), שקורא לפונקציה fileOpen().

export const loadFromJSON = async (localAppState: AppState) => {
  const blob = await fileOpen({
    description: 'Excalidraw files',
    extensions: ['.json', '.excalidraw', '.png', '.svg'],
    mimeTypes: ['application/json', 'image/png', 'image/svg+xml'],
  });
  return loadFromBlob(blob, localAppState);
};

הפונקציה fileOpen() שמגיעה מספרייה קטנה שכתבתי, שנקראת browser-fs-access שבו אנחנו משתמשים Excalidraw. הספרייה הזאת מספקת גישה למערכת הקבצים דרך ל-File System Access API עם חלופה מדור קודם, כך שאפשר להשתמש בו בכל בדפדפן.

קודם אראה לך איך לבצע את ההטמעה כאשר ה-API נתמך. לאחר ניהול המשא ומתן סוגי MIME וסיומות קבצים מקובלים, והחלק המרכזי קורא ל-File System Access API הפונקציה showOpenFilePicker(). הפונקציה מחזירה מערך של קבצים או קובץ יחיד, בהתאם שמציין אם לבחור מספר קבצים. כל מה שנשאר זה להוסיף את נקודת האחיזה לקובץ כדי שאפשר יהיה לאחזר אותו שוב.

export default async (options = {}) => {
  const accept = {};
  // Not shown: deal with extensions and MIME types.
  const handleOrHandles = await window.showOpenFilePicker({
    types: [
      {
        description: options.description || '',
        accept: accept,
      },
    ],
    multiple: options.multiple || false,
  });
  const files = await Promise.all(handleOrHandles.map(getFileWithHandle));
  if (options.multiple) return files;
  return files[0];
  const getFileWithHandle = async (handle) => {
    const file = await handle.getFile();
    file.handle = handle;
    return file;
  };
};

ההטמעה החלופית מסתמכת על רכיב input מסוג "file". לאחר משא ומתן סוגי ה-MIME והתוספים שבהם יש לאשר. השלב הבא הוא ללחוץ באופן פרוגרמטי על הקלט כך שתיבת הדו-שיח לפתיחת הקובץ תופיע. בשינוי, כלומר, כשהמשתמש בוחר באחת מהאפשרויות כמה קבצים, ההבטחה לפתור את הבעיה.

export default async (options = {}) => {
  return new Promise((resolve) => {
    const input = document.createElement('input');
    input.type = 'file';
    const accept = [
      ...(options.mimeTypes ? options.mimeTypes : []),
      options.extensions ? options.extensions : [],
    ].join();
    input.multiple = options.multiple || false;
    input.accept = accept || '*/*';
    input.addEventListener('change', () => {
      resolve(input.multiple ? Array.from(input.files) : input.files[0]);
    });
    input.click();
  });
};

מתבצעת שמירה של הקבצים

עכשיו כדאי לשמור. ב-Expalidraw, השמירה מתבצעת בפונקציה saveAsJSON(). קודם הופכת את מערך הרכיבים של Excalidraw ל-JSON, ממירה את ה-JSON ל-blob ואז קוראת לפונקציה בפונקציה fileSave(). באותה פונקציה, הפונקציה browser-fs-access.

export const saveAsJSON = async (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
) => {
  const serialized = serializeAsJSON(elements, appState);
  const blob = new Blob([serialized], {
    type: 'application/vnd.excalidraw+json',
  });
  const fileHandle = await fileSave(
    blob,
    {
      fileName: appState.name,
      description: 'Excalidraw file',
      extensions: ['.excalidraw'],
    },
    appState.fileHandle,
  );
  return { fileHandle };
};

קודם אעבור על ההטמעה של דפדפנים עם תמיכה ב-File System Access API. שתי השורות הראשונות נראות קצת מעורבות, אבל כל מה שעושים הוא לנהל משא ומתן על סוגי ה-MIME ועל הקובץ תוספים. אם שמרתי בעבר ויש לי כבר כינוי קבצים, לא צריך להיות תיבת דו-שיח לשמירה מוצגת. עם זאת, אם זו השמירה הראשונה, תוצג תיבת דו-שיח של קובץ והאפליקציה תקבל מזהה קובץ לשימוש עתידי. השאר הוא פשוט כותב לקובץ, וזה קורה באמצעות ניתן לכתיבה.

export default async (blob, options = {}, handle = null) => {
  options.fileName = options.fileName || 'Untitled';
  const accept = {};
  // Not shown: deal with extensions and MIME types.
  handle =
    handle ||
    (await window.showSaveFilePicker({
      suggestedName: options.fileName,
      types: [
        {
          description: options.description || '',
          accept: accept,
        },
      ],
    }));
  const writable = await handle.createWritable();
  await writable.write(blob);
  await writable.close();
  return handle;
};

האפשרות 'שמירה בשם' פיצ'ר

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

ההטמעה לדפדפנים שאינם תומכים ב-File System Access API היא קצרה, כי הוא יוצר רכיב עוגן עם מאפיין download שהערך שלו הוא שם הקובץ הרצוי כתובת URL של blob בתור ערך המאפיין href שלה.

export default async (blob, options = {}) => {
  const a = document.createElement('a');
  a.download = options.fileName || 'Untitled';
  a.href = URL.createObjectURL(blob);
  a.addEventListener('click', () => {
    setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
  });
  a.click();
};

לאחר מכן לוחצים על רכיב העוגן באופן פרוגרמטי. כדי למנוע דליפות זיכרון, כתובת ה-URL של ה-blob צריכה להיות מבוטלת לאחר השימוש. כיוון שזו רק הורדה, לא מוצגת תיבת דו-שיח לשמירת קבצים, הקבצים מועברים לתיקיית ברירת המחדל Downloads.

גרירה ושחרור

אחד משילובי המערכת המועדפים עליי במחשב הוא גרירה ושחרור. ב-Excalidraw, כאשר אני משחררים קובץ אחד (.excalidraw) באפליקציה, הוא נפתח מיד ואני יכול להתחיל לערוך. בדפדפנים שתומכים ב-File System Access API, אני יכול אפילו לשמור את השינויים שלי באופן מיידי. אין צורך להגיע לשם דרך תיבת דו-שיח לשמירת קובץ, כי נקודת האחיזה הדרושה לקובץ התקבלה באמצעות הגרירה והשחרור פעולה.

הסוד לכך הוא הפעלה של getAsFileSystemHandle() בטלפון פריט העברת נתונים כשיש תמיכה ב-File System Access API. לאחר מכן אני מעבירה ל-loadFromBlob(), שאותו אתם יכולים לזכור בכמה פסקאות למעלה. כל כך הרבה פעולות שאפשר לבצע בקבצים: פתיחה, שמירה, שמירת יתר, גרירה, שחרור. הקולגה שלי פיט תיעדתי את כל הטריקים האלה ועוד במאמר שלנו, כדי כדאי להתעדכן למקרה שהתהליך יתקדם מהר מדי.

const file = event.dataTransfer?.files[0];
if (file?.type === 'application/json' || file?.name.endsWith('.excalidraw')) {
  this.setState({ isLoading: true });
  // Provided by browser-fs-access.
  if (supported) {
    try {
      const item = event.dataTransfer.items[0];
      file as any.handle = await item as any
        .getAsFileSystemHandle();
    } catch (error) {
      console.warn(error.name, error.message);
    }
  }
  loadFromBlob(file, this.state).then(({ elements, appState }) =>
    // Load from blob
  ).catch((error) => {
    this.setState({ isLoading: false, errorMessage: error.message });
  });
}

שיתוף קבצים

שילוב אחר של המערכת שנמצא כרגע ב-Android, ב-ChromeOS וב-Windows מתבצע דרך Web Share Target API אני באפליקציה 'קבצים' בתיקייה Downloads. אני יכולים לראות שני קבצים, אחד מהם עם השם הלא-תיאורי untitled וחותמת זמן. כדי לבדוק הוא כולל לחיצה על שלוש הנקודות, ואז שיתוף, ואחת מהאפשרויות שמופיעות Excalidraw. כשמקישים על הסמל, רואים שהקובץ מכיל שוב את הלוגו של I/O.

Lipis בגרסת Electron שהוצאה משימוש

אחד הדברים שאפשר לעשות לגבי קבצים שעדיין לא דיברתי עליהם הוא doubleclick. מה בדרך כלל קורה כאשר מערכת doubleclick לקובץ היא שהאפליקציה שמשויכת לסוג ה-MIME של הקובץ נפתח. לדוגמה, עבור .docx זו תהיה Microsoft Word.

Excalidraw השתמשה בגרסת Electron של האפליקציה ש תומך בשיוכים של סוגי קבצים, כך שלחצתם פעמיים על קובץ .excalidraw, אפליקציית Excalidraw Electron תיפתח. ליפיס, שכבר פגשת בעבר, הייתה היוצרת והמוציא לאור של Excalidraw Electron. שאלתי אותו למה הוא חושב שאפשר להוציא משימוש את גרסת אלקטרונים:

אנשים ביקשו אפליקציית Electron מאז תחילת הדרך, בעיקר כי הם רצו לפתוח קבצים באמצעות לחיצה כפולה. רצינו גם לפרסם את האפליקציה בחנויות אפליקציות. במקביל, מישהו הציע ליצור PWA במקום זאת, אז פשוט עשינו את שתי הפעולות. למרבה המזל, הכרנו את פרויקט פוגו ממשקי API כמו גישה למערכת הקבצים, גישה ללוח, טיפול בקבצים ועוד. בלחיצה אחת בלבד אפשר להתקין את האפליקציה במחשב או בנייד, בלי המשקל הנוסף של Electron. זה היה קל להוציא משימוש את גרסת Electron, להתרכז רק באפליקציית האינטרנט ולהפוך אותה PWA הכי טובה שאפשר. למעלה, אנחנו יכולים עכשיו לפרסם אפליקציות PWA בחנות Play וב-Microsoft חנות! זה ענק!

אפשר לומר שתוכנית Excalidraw for Electron לא הוצאה משימוש כי Electron הוא לא רע, בכלל, אבל כי האינטרנט הפך למספיק טוב. אהבתי!

טיפול בקבצים

כשאני אומר "האינטרנט הפך טוב מספיק", הסיבה לכך היא תכונות כמו 'קובץ טיפול.

זו התקנה רגילה של macOS Big Sur. עכשיו תראו מה קורה כשלוחציםי לחיצה ימנית על קובץ Excalidraw. אפשר לפתוח אותו באמצעות Excalidraw, ה-PWA שמותקנת. כמובן שהם מורכבים יותר, אפשר גם ללחוץ לחיצה כפולה, אבל זה פשוט פחות דרמטי להדגים את השימוש בהקלטת מסך.

איך זה פועל? השלב הראשון הוא ליידע את סוגי הקבצים שהאפליקציה שלי יכולה להתמודד איתם במערכת ההפעלה. אני עושה את זה בשדה חדש בשם file_handlers במניפסט של אפליקציית האינטרנט. שלו value הוא מערך אובייקטים עם פעולה ומאפיין accept. הפעולה קובעת את כתובת ה-URL הנתיב שבו מערכת ההפעלה מפעילה את האפליקציה, והאובייקט המקבל הם צמדים של ערכי מפתח של MIME הסוגים וסיומות הקבצים המשויכות.

{
  "name": "Excalidraw",
  "description": "Excalidraw is a whiteboard tool...",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "file_handlers": [
    {
      "action": "/",
      "accept": {
        "application/vnd.excalidraw+json": [".excalidraw"]
      }
    }
  ]
}

השלב הבא הוא טיפול בקובץ כשהיישום מופעל. הפעולה הזו מתבצעת בlaunchQueue ממשק שבו אני צריך להגדיר לקוח באמצעות קריאה, ובכן, setConsumer(). הפרמטר היא פונקציה אסינכרונית שמקבלת את launchParams. אובייקט ה-launchParams הזה יש שדה בשם 'קבצים' שנותן לי מגוון של כינויים לקבצים לעבוד איתו. אכפת לי רק הראשון, ומכינוי הקובץ הזה, אני מקבל blob שאני מעבירה לחבר הוותיק שלנו loadFromBlob()

if ('launchQueue' in window && 'LaunchParams' in window) {
  window as any.launchQueue
    .setConsumer(async (launchParams: { files: any[] }) => {
      if (!launchParams.files.length) return;
      const fileHandle = launchParams.files[0];
      const blob: Blob = await fileHandle.getFile();
      blob.handle = fileHandle;
      loadFromBlob(blob, this.state).then(({ elements, appState }) =>
        // Initialize app state.
      ).catch((error) => {
        this.setState({ isLoading: false, errorMessage: error.message });
      });
    });
}

שוב, אם התהליך נמשך מהר מדי, אפשר לקרוא מידע נוסף על File Treatment API ב- המאמר שלי. כדי להפעיל טיפול בקבצים על ידי הגדרה של פלטפורמת האינטרנט הניסיונית דגל פיצ'רים. הוא מתוכנן להגיע ב-Chrome בהמשך השנה.

שילוב הלוח

תכונה מגניבה נוספת של Excalidraw היא שילוב הלוח. אפשר להעתיק את השרטוט כולו או רק חלקים ממנו בלוח העריכה, אולי להוסיף סימן מים אם נראה לי, ואז להדביק אותו לאפליקציה אחרת. דרך אגב, זוהי גרסת אינטרנט של אפליקציית Paint 95 Paint.

הדרך שבה זה עובד פשוטה להפליא. כל מה שצריך זה בד קנבס בתור blob, ואז לכתוב ללוח על ידי העברת מערך של רכיב אחד עם ClipboardItem עם ה-blob navigator.clipboard.write(). רוצה מידע נוסף על מה שאפשר לעשות עם הלוח? API, ראו את Jason והמאמר שלי.

export const copyCanvasToClipboardAsPng = async (canvas: HTMLCanvasElement) => {
  const blob = await canvasToBlob(canvas);
  await navigator.clipboard.write([
    new window.ClipboardItem({
      'image/png': blob,
    }),
  ]);
};

export const canvasToBlob = async (canvas: HTMLCanvasElement): Promise<Blob> => {
  return new Promise((resolve, reject) => {
    try {
      canvas.toBlob((blob) => {
        if (!blob) {
          return reject(new CanvasError(t('canvasError.canvasTooBig'), 'CANVAS_POSSIBLY_TOO_BIG'));
        }
        resolve(blob);
      });
    } catch (error) {
      reject(error);
    }
  });
};

שיתוף פעולה עם אחרים

שיתוף כתובת URL של סשן

ידעת שב-EXcalidraw יש גם מצב שיתוף פעולה? אנשים שונים יכולים לעבוד יחד ומאותו מסמך. כדי להתחיל סשן חדש, לוחצים על הלחצן של שיתוף הפעולה בזמן אמת ואז מתחילים סשן סשן. אני יכול לשתף בקלות את כתובת ה-URL של הסשן עם שותפי העריכה שלי, Web Share API שהוטמע בו על ידי Excalidraw.

שיתוף פעולה בזמן אמת

הדמייתי סשן שיתוף פעולה מקומי באמצעות עבודה על הלוגו של Google I/O ב-Pixelbook, טלפון Pixel 3a ו-iPad Pro. אפשר לראות שהשינויים שביצעתי במכשיר אחד משתקפים כל שאר המכשירים.

אני אפילו רואה את כל הסמנים זזים. הסמן של Pixelbook זז באופן קבוע, כי הוא נשלט ליד משטח מגע, אבל הסמן של טלפון Pixel 3a והסמן של הטאבלט של iPad Pro זזים ממקום למקום, כדי לשלוט במכשירים האלה בהקשה עם האצבע.

הצגת הסטטוסים של שותפי עריכה

כדי לשפר את חוויית שיתוף הפעולה בזמן אמת, פועלת אפילו מערכת זיהוי לא פעילה. בסמן של ה-iPad Pro מוצגת נקודה ירוקה כשאני משתמש בו. הנקודה הופכת לשחורה כשעוברים באמצעות כרטיסייה אחרת בדפדפן או באפליקציה אחרת. כשאני באפליקציית Excalidraw, אבל לא עושה כלום, הסמן מראה אותי כלא פעיל/ה, שמסומן בסמלי ה-zZZ.

קוראים נלהבים של הפרסומים שלנו עשויים להיות נוטים לחשוב שזיהוי של חוסר פעילות מתבצע בעזרת Idle Detection API, הצעה בשלב מוקדם שעובדה עליה ב- של פרויקט פוגו. התראת ספוילר: היא לא. אמנם היה לנו הטמעה שמבוססת על ה-API הזה בפרויקט Excalidraw, החלטנו בסופו של דבר לעבור לגישה מסורתית יותר המבוססת על מדידה תנועת הסמן ורמת החשיפה של הדף.

שלחנו משוב על הסיבה לשימוש ב-Idle Detection API לא פתרה את התרחיש לדוגמה שיצרנו. כל ממשקי ה-API של Project Fugu מפותחים לציבור הרחב, כולם יכולים להצטרף ולהשמיע את קולם!

ליפיס על מה שמעכב את Excalidraw

בהקשר הזה, שאלתי את ליפי שאלה אחת אחרונה לגבי מה שלדעתו חסר באינטרנט הפלטפורמה ששומרת את Excalidraw:

File System Access API מעולה, אבל אתם יודעים מה? רוב הקבצים שמעניינים אותי בימים האלה קיים ב-Dropbox או ב-Google Drive, לא על הדיסק הקשיח. אני רוצה ש-File System Access API כוללים שכבת הפשטה לשילוב של ספקי מערכות קבצים מרוחקים, כמו Dropbox או Google. ולפיהם מפתחים יכולים לתכנת. המשתמשים יכולים להירגע ולדעת שהקבצים שלהם בטוחים עם ספק שירותי הענן שהם סומכים עליו.

אני לגמרי מסכימה עם ליפיס, גם אני גרה בענן. אנחנו מקווים שהשינוי הזה ייושם בקרוב.

מצב אפליקציה עם כרטיסיות

וואו! ראינו הרבה שילובים נהדרים של API ב-Excalidraw. מערכת קבצים, טיפול בקבצים, לוח, שיתוף באינטרנט וגם יעד שיתוף באינטרנט. אבל יש עוד דבר אחד. עד עכשיו, יכולתי רק לערוך מסמך אחד בכל פעם. כבר לא. נא ליהנות בפעם הראשונה מגרסה מוקדמת של מצב אפליקציה עם כרטיסיות ב-EXcalidraw. כך זה נראה.

יש לי קובץ פתוח באפליקציית Excalidraw PWA שמותקנת במצב עצמאי. היום אני פותחת כרטיסייה חדשה בחלון הנפרד. זו לא כרטיסייה רגילה בדפדפן, אלא כרטיסיית PWA. כאן לאחר מכן אני יכול לפתוח קובץ משני ולעבוד עליהם בנפרד באותו חלון אפליקציה.

מצב האפליקציה באמצעות כרטיסיות נמצא עדיין בשלבי פיתוח מוקדמים ולא הכול מוכן. אם אתם מעניין אותך, אז כדאי לקרוא על הסטטוס הנוכחי של התכונה הזו המאמר שלי.

סגירה

כדי להתעדכן לגבי תכונה זו ותכונות אחרות, כדאי לצפות ב מעקב אחר API של Fuugu. אנחנו נרגשים לקדם את האינטרנט קדימה תאפשר לכם לעשות יותר בפלטפורמה. הנה אירוע Excalidraw המתפתח כל הזמן, ובמיוחד לכל כמה אפליקציות מדהימות שתפתחו. אפשר להתחיל ליצור ב- excalidraw.com.

אני מצפה לראות חלק מממשקי ה-API שהוצגו היום באפליקציות שלכם. קוראים לי בר, אפשר למצוא אותי בתור @tomayac ב-Twitter ובאינטרנט באופן כללי. תודה רבה על הצפייה, ותיהנה משאר ימי Google I/O.