एक्सकैलिड्रॉ और फुगु: उपयोगकर्ताओं के मुख्य अनुभवों को बेहतर बनाना

किसी भी ज़रूरत के हिसाब से ऐडवांस टेक्नोलॉजी को जादू से नहीं पहचाना जा सकता. जब तक कि आप इसे न समझ लें. मेरा नाम थॉमस स्टाइनर है, मैं Google में डेवलपर रिलेशन में काम करता/करती हूं और Google I/O से जुड़ी अपनी बातचीत के इस लेख में, मैं कुछ नए Fugu API के बारे में जानकारी पाऊंगा. साथ ही, मैं यह भी बताऊंगा कि कैसे ये Excalidraw PWA में, उपयोगकर्ता के मुख्य अनुभवों को बेहतर बनाती हैं, ताकि आप इन आइडिया से प्रेरणा ले सकें और उन्हें अपने ऐप्लिकेशन पर लागू कर सकें.

Thomas Steiner

ध्यान दें: यह मेरी Google I/O बातचीत का लेख है. अगर आपको इसे देखना है, तो यह वीडियो देखें.

मैं एक्सालिड्रावा पर कैसे आया

मैं एक कहानी से शुरू करना चाहता हूँ. 1 जनवरी, 2020 को, क्रिस्टोफ़र शेडो, Facebook के सॉफ़्टवेयर इंजीनियर, अपने एक छोटे ड्रॉइंग ऐप्लिकेशन के बारे में ट्वीट किया पर काम करना शुरू कर दिया है. इस टूल की मदद से, कार्टून जैसे दिखने वाले बॉक्स और ऐरो बनाए जा सकते हैं और हाथ से बनाई हुई तस्वीरें. अगले दिन, आपके पास एलिप्स और टेक्स्ट बनाने के साथ-साथ ऑब्जेक्ट चुनने और उन्हें हिलाने-डुलाने में भी मदद मिलती है आस-पास रखें. 3 जनवरी को, इस ऐप्लिकेशन का नाम Excalidraw रखा गया है. साथ ही, यह ऐप्लिकेशन हर अच्छी चीज़ के साथ भी काम करता है प्रोजेक्ट के लिए, डोमेन नेम खरीदना क्रिस्टोफ़र के शुरुआती कामों में से एक था. इन्होंने बदलाव किया है अब, रंगों का इस्तेमाल किया जा सकता है और पूरी ड्रॉइंग को PNG फ़ॉर्मैट में एक्सपोर्ट किया जा सकता है.

15 जनवरी को, क्रिस्टोफ़र ने एक ब्लॉग पोस्ट को मेरे साथ-साथ Twitter पर बहुत ध्यान दिया है. पोस्ट की शुरुआत कुछ शानदार आंकड़ों से हुई थी:

• 12 हज़ार यूनीक सक्रिय उपयोगकर्ता
• GitHub पर 1.5 हज़ार स्टार
• योगदान देने वाले 26 लोग

सिर्फ़ दो हफ़्ते पहले शुरू हुए प्रोजेक्ट के लिए, कोई खतरा नहीं है. हालांकि, जो चीज़ दरअसल पोस्ट में मेरी रुचि और कम हो गई. क्रिस्टोफ़र ने लिखा कि उन्होंने इसे कुछ नया करने की कोशिश की समय: जिन लोगों ने पुल का अनुरोध किया है उन्हें बिना किसी शर्त के ऐक्सेस देना. इवेंट वाले दिन ब्लॉग पोस्ट को पढ़ते हुए, मेरा एक अनुरोध था इसने Excalidraw में, File System Access API को जोड़ा है, किसी सुविधा का अनुरोध सबमिट किया हो.

पुल करने के मेरे अनुरोध को एक दिन बाद मर्ज कर दिया गया था. इसके बाद, मेरे पास इसका पूरा ऐक्सेस था. कहने की ज़रूरत नहीं है कि मैंने अपनी ताकत का गलत इस्तेमाल नहीं किया है. साथ ही, योगदान देने वाले 149 लोगों में से अब तक किसी ने ऐसा नहीं किया है.

आज, Excalidraw एक ऐसा प्रोग्रेसिव वेब ऐप्लिकेशन है जिसे इंस्टॉल किया जा सकता है और ऑफ़लाइन सहायता, शानदार डार्क मोड, और हां, फ़ाइलों को खोलने और सेव करने की सुविधा, फ़ाइल सिस्टम ऐक्सेस एपीआई.

लिपिस इस बारे में बताती हैं कि वे अपना इतना समय एक्सकालिड्रावा पर क्यों लगाते हैं

इसलिए, यह मेरे "मैं एक्सकालिड्रावा कैसे आया" का अंत है लेकिन इससे पहले कि मैं कुछ चीज़ों के बारे में सोचूं Excalidraw की शानदार विशेषताएं, मुझे Panayiotis के बारे में बताने में खुशी हो रही है. पानायोटिस लिपिरिडिस, चालू इंटरनेट को लिपि के नाम से जाना जाता है. इसका सबसे ज़्यादा योगदान है एक्सकैलिड्रा. मैंने लिपिस से पूछा कि उन्हें ऐसा क्या था जो एक्सालिड्रा के लिए अपना बहुत समय बिताने के लिए प्रेरित करता है:

क्रिस्टोफ़र के ट्वीट से, मुझे बाकी सभी लोगों की तरह ही इस प्रोजेक्ट के बारे में पता चला. मेरा पहला योगदान खुली रंग लाइब्रेरी को जोड़ना था, जो रंग अब भी मौजूद हैं का हिस्सा है. जैसे-जैसे प्रोजेक्ट आगे बढ़ता गया और हमें काफ़ी अनुरोध मिलने लगे, मेरी अगली कमाई योगदान, ड्रॉइंग को सेव करने के लिए बैकएंड बनाने में था, ताकि उपयोगकर्ता उन्हें शेयर कर सकें. हालांकि, क्या मुझे यह फ़ैसला लेने में मदद मिलती है कि जिसने भी Excalidraw की कोशिश की है वह इसे इस्तेमाल करने के लिए बहाना ढूंढता है फिर से करेंगे.

मैं लिपिस से पूरी तरह सहमत हूं. जिसने भी Excalidraw को आज़माया है, वह इसे फिर से इस्तेमाल करने के लिए बहाने ढूंढ रहा है.

एक्सकैलिड्रॉ काम कर रहा है

मैं आपको अब दिखाना चाहती हूँ कि Excalidraw का इस्तेमाल कैसे किया जा सकता है. मैं बहुत अच्छा कलाकार नहीं हूँ, लेकिन Google I/O का लोगो इस्तेमाल करना आसान है. इसलिए, मैं इसे आज़माकर देख सकती हूं. बॉक्स "i" होता है, लाइन कोई स्लैश और "o" एक सर्कल है. मैंने शिफ़्ट को दबाकर रखा है, इसलिए मुझे एक परफ़ेक्ट सर्कल मिल रहा है. मुझे चलने दें तो यह बेहतर दिखता है. अब "i" के लिए कुछ रंग और "o" शामिल हों. नीला अच्छा है. शायद क्या आपको फ़िल की अलग स्टाइल दिखानी है? क्या सभी तरह के हैं या एक-दूसरे से अलग हैं? नहीं, हचुर बढ़िया लग रहा है. यह सही नहीं है, लेकिन यह Excalidraw का आइडिया है, इसलिए मुझे इसे सेव करने दें.

'सेव करें' आइकॉन पर क्लिक करें और 'फ़ाइल सेव करें' डायलॉग में फ़ाइल का नाम डालें. Chrome में, एक ऐसा ब्राउज़र जो फ़ाइल सिस्टम ऐक्सेस API का समर्थन करता है, यह कोई डाउनलोड नहीं है, बल्कि एक वास्तविक सेव कार्रवाई है, जहां मैं फ़ाइल की जगह और नाम चुनने की सुविधा मिलती है. साथ ही, अगर मैं बदलाव करता/करती हूं, तो उन्हें कहां सेव किया जा सकता है से लिंक है.

मुझे लोगो बदलने और "i" बनाने दो लाल. अगर अब मैं सेव करें को दोबारा क्लिक करता/करती हूं, तो मेरे बदलाव को उसी फ़ाइल से मेल नहीं खाता. सबूत के तौर पर, मुझे कैनवस साफ़ करके फिर से फ़ाइल खोलने दें. जैसा कि आपको दिख रहा है, बदला हुआ लाल-नीला लोगो फिर से दिखने लगा.

फ़ाइलों के साथ काम करना

जो ब्राउज़र अभी फ़ाइल सिस्टम ऐक्सेस एपीआई के साथ काम नहीं करते उन पर सेव की गई हर कार्रवाई डाउनलोड की सुविधा देता है, इसलिए जब मैं परिवर्तन करता/करती हूं, तो मेरे पास ऐसी कई फ़ाइलें होती हैं जो जो मेरे डाउनलोड फ़ोल्डर को भरता है. लेकिन इसके बावजूद, मेरे पास फ़ाइल को सेव करने का विकल्प है.

फ़ाइलें खोलना

इसका राज़ क्या है? काम को अलग-अलग ब्राउज़र पर कैसे खोला और सेव किया जा सकता है, भले ही वे आपके ब्राउज़र पर हों या न हों क्या फ़ाइल सिस्टम ऐक्सेस एपीआई की सुविधा काम करती है? Excalidraw में एक फ़ाइल को नाम के एक फ़ंक्शन में खोला जाता है 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 जिसका इस्तेमाल हम एक्सकैलिड्रा. यह लाइब्रेरी, फ़ाइल सिस्टम का ऐक्सेस देती है लेगसी फ़ॉलबैक के साथ File System Access API, ताकि इसका इस्तेमाल किसी भी ब्राउज़र खोलें.

सबसे पहले हम आपको लागू करने का तरीका बताएंगे, ताकि यह बताया जा सके कि एपीआई काम करता है या नहीं. मोल-भाव करने के बाद स्वीकार किए जाने वाले MIME टाइप और फ़ाइल एक्सटेंशन को पूरा करने के लिए, मुख्य हिस्सा फ़ाइल सिस्टम ऐक्सेस 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;
  };
};

फ़ॉलबैक को लागू करने के लिए, "file" टाइप के input एलिमेंट का इस्तेमाल किया जाता है. मोल-भाव करने के बाद स्वीकार किए जाने वाले 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();
  });
};

फ़ाइलें सेव की जा रही हैं

अब सेव करें. Excalidraw में, 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 };
};

आइए, सबसे पहले फ़ाइल सिस्टम ऐक्सेस एपीआई वाले ब्राउज़र को लागू करने के तरीके पर नज़र डालते हैं. कॉन्टेंट बनाने पहली कुछ लाइनें ज़्यादा काम की लगती हैं, लेकिन उनमें सिर्फ़ 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 एट्रिब्यूट के साथ एक ऐंकर एलिमेंट बनाता है, जिसकी वैल्यू मनचाहा फ़ाइल नाम है और 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();
};

इसके बाद, ऐंकर एलिमेंट को प्रोग्राम के हिसाब से क्लिक किया जाता है. मेमोरी लीक होने से रोकने के लिए, ब्लॉब यूआरएल को जिन्हें इस्तेमाल करने के बाद रद्द किया जा सकता है. यह सिर्फ़ एक डाउनलोड है, इसलिए फ़ाइल सेव करने का कोई भी डायलॉग बॉक्स नहीं दिखाया जाता. फ़ाइलें, डिफ़ॉल्ट Downloads फ़ोल्डर में मिलेंगी.

खींचें और छोड़ें

डेस्कटॉप पर 'खींचें और छोड़ें' सुविधा मेरे पसंदीदा सिस्टम इंटिग्रेशन में से एक है. Excalidraw में, जब मैं किसी .excalidraw फ़ाइल को ऐप्लिकेशन में इंस्टॉल करता है, वह तुरंत खुल जाता है और मैं उसमें बदलाव कर सकता/सकती हूं. ब्राउज़र पर जो फ़ाइल सिस्टम ऐक्सेस एपीआई के साथ काम करते हैं, तो फिर मैं तुरंत अपने बदलाव सेव भी कर सकता/सकती हूं. जाने की ज़रूरत नहीं है एक फ़ाइल सेव करें डायलॉग बॉक्स के ज़रिए चुनी गई है, क्योंकि ज़रूरी फ़ाइल हैंडल को खींचकर छोड़ें और छोड़ें कार्रवाई.

ऐसा करने का राज़ यह है कि आप 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 पर काम करने वाला दूसरा सिस्टम इंटिग्रेशन, वेब शेयर टारगेट एपीआई. मैं यहां अपने Downloads फ़ोल्डर के Files ऐप्लिकेशन में हूं. मैं आपको दो फ़ाइलें दिख सकती हैं. इनमें से एक फ़ाइल का नाम untitled है और टाइमस्टैंप की जानकारी नहीं दी गई है. यह देखने के लिए कि क्या इसमें तीन बिंदुओं पर क्लिक करके शेयर करें. स्क्रीन पर दिखने वाले विकल्पों में से एक एक्सकैलिड्रा. आइकॉन पर टैप करने पर मुझे दिखेगा कि फ़ाइल में फिर से I/O लोगो है.

बंद किए जा चुके Electronicn वर्शन पर लिपि

आपने जिन फ़ाइलों के बारे में अभी तक बात नहीं की है उनके लिए, दो कार्रवाइयां की जा सकती हैं: आम तौर पर, यह तब होता है, जब आपने किसी फ़ाइल को doubleclick पर सेट किया हो, यानी वह ऐप्लिकेशन जो फ़ाइल के MIME टाइप से जुड़ा हो खोलें. उदाहरण के लिए, .docx के लिए यह Microsoft Word होगा.

Excalidraw का इस्तेमाल, ऐप्लिकेशन के इलेक्ट्रॉन वर्शन के साथ किया जाता है इस तरह के फ़ाइल टाइप असोसिएशन का इस्तेमाल करता है, इसलिए जब आप किसी .excalidraw फ़ाइल पर दो बार क्लिक करते हैं, तो Excalidraw Electron ऐप्लिकेशन खुल जाएगा. लिपिस, जिनसे आप पहले भी मिल चुकी हैं वे दोनों ही क्रिएटर थीं और एक्सकैलिड्रा इलेक्ट्रॉन के बहिष्कार कर रहे हैं. मैंने उनसे पूछा कि उन्हें लगता है कि इलेक्ट्रॉन वर्शन:

लोग शुरुआत से ही Electron ऐप्लिकेशन की मांग कर रहे हैं, क्योंकि वे चाहते थे कि दो बार क्लिक करके फ़ाइलें खोलें. हमारा मकसद, इस ऐप्लिकेशन को ऐप स्टोर पर भी उपलब्ध कराना था. साथ ही, किसी व्यक्ति ने के बजाय PWA बनाने का सुझाव दिया जाता है, इसलिए हमने दोनों काम किए. अच्छी बात यह है कि हमें प्रोजेक्ट फ़ुगु से रूबरू कराया गया एपीआई, जैसे कि फ़ाइल सिस्टम का ऐक्सेस, क्लिपबोर्ड का ऐक्सेस, फ़ाइल मैनेज करना वगैरह. सिर्फ़ एक क्लिक में ये काम किए जा सकते हैं इलेक्ट्रोन के अतिरिक्त वज़न के बिना, ऐप्लिकेशन को अपने डेस्कटॉप या मोबाइल पर इंस्टॉल करें. यह आसान था Electronicn वर्शन के उपयोग को रोकने, केवल वेब ऐप्लिकेशन पर ध्यान देने, और इसे ऐसा बनाने का निर्णय सबसे अच्छा PWA है. सबसे ऊपर, अब हम Play Store और Microsoft पर PWA पब्लिश कर सकते हैं स्टोर! यह शानदार है!

यह कहा जा सकता है कि इलेक्ट्रोन के लिए Excalidraw को बंद नहीं किया गया, क्योंकि इलेक्ट्रॉन एक खराब है, बिलकुल भी नहीं, क्योंकि वेब पर्याप्त रूप से अच्छा हो गया है. मुझे यह पसंद है!

फ़ाइल मैनेज करना

जब मैं कहता हूं कि "वेब बेहतर हो गया है", तो ऐसा आने वाली File जैसी सुविधाओं की वजह से होता है हैंडलिंग.

यह macOS Big Sur इंस्टॉल है. अब देखें कि किसी पेज पर दायां क्लिक करने पर क्या होता है Excalidraw फ़ाइल. मेरे पास इसे इंस्टॉल किए गए पीडब्ल्यूए की मदद से, Excalidraw की मदद से खोलने का विकल्प है. बिलकुल दो बार क्लिक करने से भी काम हो सकता है. हालांकि, स्क्रीनकास्ट में दिखाना और भी आसान होता है.

यह कैसे काम करता है? सबसे पहले, उन फ़ाइल टाइप को चुनें जिनके बारे में मेरे ऐप्लिकेशन को पता हो ऑपरेटिंग सिस्टम पर लागू होता है. मैं ऐसा वेब ऐप्लिकेशन मेनिफ़ेस्ट के file_handlers नाम के नए फ़ील्ड में करता/करती हूं. यह वैल्यू, ऑब्जेक्ट का कलेक्शन है. इसमें ऐक्शन और accept प्रॉपर्टी शामिल हैं. कार्रवाई से यूआरएल तय होता है वह पाथ जिस पर ऑपरेटिंग सिस्टम आपके ऐप्लिकेशन को लॉन्च करता है और स्वीकार करने के लिए ऑब्जेक्ट, 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 ऑब्जेक्ट इसमें फ़ाइलें नाम का एक फ़ील्ड है, जिससे मुझे काम करने के लिए फ़ाइल हैंडल की कलेक्शन मिलती है. मुझे सिर्फ़ इस बात की पहला वाला और इस फ़ाइल हैंडल से मुझे एक ब्लॉब मिलता है, जिसे फिर मैं अपने पुराने दोस्त को देता हूं 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 });
      });
    });
}

अगर यह तेज़ी से हुआ, तो फ़ाइल मैनेज करने वाले एपीआई के बारे में यहां ज़्यादा जानें मेरा लेख पढ़ें. एक्सपेरिमेंट के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म को सेट करके, फ़ाइल मैनेज करने की सुविधा चालू की जा सकती है फ़ीचर फ़्लैग. इसे इस साल के आखिर में Chrome में उपलब्ध कराने के लिए शेड्यूल किया गया है.

क्लिपबोर्ड इंटिग्रेशन

Excalidraw की एक और शानदार सुविधा क्लिपबोर्ड एकीकरण है. मैं अपनी पूरी ड्रॉइंग कॉपी कर सकता/सकती हूं या उसके कुछ हिस्सों को क्लिपबोर्ड पर रखें. अगर मेरा मन करे, तो वॉटरमार्क जोड़ें और फिर कोई दूसरा ऐप्लिकेशन. वैसे यह Windows 95 Paint ऐप का वेब वर्शन है.

इसके काम करने का तरीका अद्भुत आसान है. मुझे बस एक ब्लॉब की तरह कैनवस चाहिए, फिर मैं उसे लिखता हूं एक-एलिमेंट अरे को ClipboardItem के साथ, BLOB के साथ पास करके क्लिपबोर्ड पर navigator.clipboard.write() फ़ंक्शन. इस बारे में ज़्यादा जानने के लिए कि क्लिपबोर्ड की मदद से क्या-क्या किया जा सकता है एपीआई, जेसन और मेरा लेख देखें.

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);
    }
  });
};

अन्य लोगों के साथ मिलकर काम करें

सेशन का यूआरएल शेयर करना

क्या आपको पता है कि Excalidraw में भी एक सहयोगी मोड है? अलग-अलग लोग साथ मिलकर काम कर सकते हैं दस्तावेज़ नहीं माना जाएगा. नया सेशन शुरू करने के लिए, लाइव मिलकर काम करने के बटन पर क्लिक करें. इसके बाद, सत्र. मैं अपने सहयोगियों के साथ सेशन का यूआरएल आसानी से शेयर कर सकता हूं. इसके लिए, Web Share API जिसे Excalidraw से इंटिग्रेट किया गया है.

लाइव मिलकर काम करने की सुविधा

मैंने अपने Pixelbook पर Google I/O लोगो पर काम करके स्थानीय तौर पर, साथ मिलकर काम करने के सेशन को सिम्युलेट किया है, मेरा Pixel 3a फ़ोन और मेरा iPad Pro. आप देख सकते हैं कि मैंने एक डिवाइस पर जो बदलाव किए हैं वे अन्य सभी डिवाइस.

मुझे सभी कर्सर इधर-उधर मूव करते हुए भी दिख सकते हैं. Pixelbook का कर्सर लगातार मूव करता है, क्योंकि वह ट्रैकपैड से देख सकते हैं, लेकिन Pixel 3a फ़ोन का कर्सर और iPad Pro का टैबलेट कर्सर इधर-उधर घूम जाते हैं, क्योंकि मेरी उंगली से टैप करके इन डिवाइसों को कंट्रोल कर सकता हूँ.

सहयोगी के स्टेटस देखना

रीयलटाइम में साथ मिलकर काम करने के अनुभव को बेहतर बनाने के लिए, सिस्टम का पता लगाने के लिए सिस्टम का इस्तेमाल किया जा रहा है. iPad Pro का इस्तेमाल करने पर, कर्सर के ऊपर हरा बिंदु दिखता है. जब मैं एक ब्राउज़र टैब या ऐप. और जब मैं Excalidraw ऐप्लिकेशन में होती हूं, लेकिन कुछ भी नहीं कर रही होती, तो कर्सर मुझे निष्क्रिय के रूप में दिखाता है, जो तीन zZZs का प्रतीक है.

हमारे पब्लिकेशन के उत्साही पाठक यह महसूस कर सकते हैं कि लगातार काम न करने की सुविधा का इस्तेमाल करने पर, आइडल डिटेक्शन एपीआई एक शुरुआती चरण है, जिस पर काम जारी है प्रोजेक्ट फ़ूगू के बारे में बात करते हैं. स्पॉइलर अलर्ट: ऐसा नहीं है. हालांकि, हमने इस एपीआई के आधार पर लागू किया था आखिर में, हमने एक परंपरागत तरीका अपनाया है, जिसमें पॉइंटर की मूवमेंट और पेज विज़िबिलिटी.

हमने इस बात पर सुझाव दिया है कि कुछ समय से इस्तेमाल में न होने पर, डिटेक्शन एपीआई इस्तेमाल करने की वजह क्या है हमारे पास इस्तेमाल का उदाहरण हल नहीं किया जा रहा था. सभी Project Fugu API ओपन में डेवलप किए जा रहे हैं, इसलिए सभी अपनी बात रख सकते हैं और अपनी बात रख सकते हैं!

एक्सकालिड्रा को वापस पकड़े हुए पर लिपिस

इसी बारे में बात करते हुए, मैंने लिपि से इस बारे में एक आखिरी सवाल पूछा कि उन्हें वेब पर क्या नहीं मिल रहा है Excalidraw को वापस लाने वाला प्लैटफ़ॉर्म:

File System Access API एक शानदार टूल है, लेकिन आपको पता है कि क्या है? इन दिनों मेरी ज़्यादातर फ़ाइलें मेरे Dropbox या Google Drive में रहते हैं, मेरी हार्ड डिस्क पर नहीं. मेरी इच्छा है कि File System Access API इसमें Dropbox या Google जैसे रिमोट फ़ाइल सिस्टम की सेवा देने वाली कंपनियों के लिए एक ऐब्स्ट्रक्शन लेयर शामिल होती है, ताकि के लिए कोड बनाना होगा. इससे उपयोगकर्ता आराम कर सकते हैं और अपनी फ़ाइलें सुरक्षित रख सकते हैं उसके साथ काम करते हैं.

मैं लिपि से पूरी तरह सहमत हूं, मैं क्लाउड में भी रहती हूं. मुझे उम्मीद है कि इसे लागू किया जाएगा जल्द.

टैब वाला ऐप्लिकेशन मोड

वाह! हमने Excalidraw में, वाकई में काफ़ी बेहतरीन एपीआई इंटिग्रेशन देखे हैं. फ़ाइल सिस्टम, फ़ाइल मैनेज करना, क्लिपबोर्ड, वेब शेयर, और वेब शेयर टारगेट. हालांकि, यहां एक और बात है. अब तक, मैं केवल दिए गए समय में एक दस्तावेज़ में बदलाव करें. अब नहीं. कृपया पहली बार इसके शुरुआती वर्शन का आनंद लें Excalidraw में टैब वाला ऐप्लिकेशन मोड. यह ऐसा दिखता है.

मेरी एक फ़ाइल, इंस्टॉल किए गए Excalidraw PWA में खुली है जो स्टैंडअलोन मोड में चल रही है. अब तक का डेटा मैं स्टैंडअलोन विंडो में एक नया टैब खोलता हूं. यह सामान्य ब्राउज़र टैब नहीं है, बल्कि पीडब्ल्यूए टैब है. इसमें फिर नए टैब में दूसरी फ़ाइल खोली जा सकती है और उसी ऐप्लिकेशन विंडो से अलग उन पर काम किया जा सकता है.

टैब वाला ऐप्लिकेशन मोड अभी शुरुआती चरण में है. साथ ही, यह पूरी तरह से तैयार नहीं है. अगर आप: अगर आपको जानना है कि इस सुविधा की मौजूदा स्थिति क्या है, तो मेरा लेख पढ़ें.

आखिरी हिस्सा

इस और अन्य सुविधाओं के बारे में अप-टू-डेट रहने के लिए, Fugu API ट्रैकर. हम वेब को आगे बढ़ाने और इस प्लैटफ़ॉर्म पर आपको कई काम करने का मौका मिलता है. यहां हम Excalidraw के साथ, सभी शानदार ऐप्लिकेशन बनाने की सुविधा मिलती है. यहां से बनाएं excalidraw.com.

मुझे कुछ एपीआई के आपके ऐप्लिकेशन में पॉप-अप होने का बेसब्री से इंतज़ार है. मेरा नाम रमेश है, तो आप मुझे आम तौर पर Twitter और इंटरनेट पर @tomayac के तौर पर ढूंढ सकते हैं. देखने के लिए बहुत-बहुत धन्यवाद और Google I/O के बाकी बचे फ़ायदों का आनंद लें.