ডেটাট্রান্সফার এপিআই ব্যবহার করে বাধাগুলি ভেঙে ফেলা

ব্যবহারকারীকে ব্রাউজার উইন্ডোর বাইরে ডেটা শেয়ার করতে সক্ষম করুন।

Jorik Tangelder

Thomas Steiner

আপনি হয়তো DataTransfer API সম্পর্কে শুনেছেন, যা HTML5 Drag and Drop API এবং Clipboard ইভেন্টের অংশ। এটি উৎস এবং গ্রহণকারী লক্ষ্যবস্তুর মধ্যে ডেটা স্থানান্তর করতে ব্যবহার করা যেতে পারে।

একটি পৃষ্ঠার মধ্যে সহজ টেক্সট A থেকে B তে স্থানান্তর করার জন্য প্রায়শই ড্র্যাগ-ড্রপ এবং কপি-পেস্ট ইন্টারঅ্যাকশন ব্যবহার করা হয়। কিন্তু প্রায়শই যা উপেক্ষা করা হয় তা হল ব্রাউজার উইন্ডোর বাইরে যাওয়ার জন্য এই একই ইন্টারঅ্যাকশনগুলি ব্যবহার করার ক্ষমতা।

ব্রাউজারের অন্তর্নির্মিত ড্র্যাগ-এন্ড-ড্রপ এবং কপি-পেস্ট ইন্টারঅ্যাকশন উভয়ই অন্যান্য অ্যাপ্লিকেশন, ওয়েব বা অন্য কোনও অ্যাপ্লিকেশনের সাথে যোগাযোগ করতে পারে এবং কোনও উৎসের সাথে আবদ্ধ নয়। API ডেটা কোথায় স্থানান্তরিত হয় তার উপর ভিত্তি করে বিভিন্ন আচরণ সহ একাধিক ডেটা এন্ট্রি সমর্থন করে। আপনার ওয়েব অ্যাপ্লিকেশন ইনকামিং ইভেন্টগুলি শোনার সময় স্থানান্তরিত ডেটা পাঠাতে এবং গ্রহণ করতে পারে।

এই ক্ষমতা ডেস্কটপে ওয়েব অ্যাপ্লিকেশনগুলিতে ভাগ করে নেওয়ার এবং আন্তঃকার্যক্ষমতা সম্পর্কে আমাদের চিন্তাভাবনা পরিবর্তন করতে পারে। অ্যাপ্লিকেশনগুলির মধ্যে ডেটা স্থানান্তর করার জন্য আর শক্তভাবে সংযুক্ত ইন্টিগ্রেশনের উপর নির্ভর করতে হবে না। পরিবর্তে আপনি ব্যবহারকারীদের যেখানে খুশি ডেটা স্থানান্তর করার জন্য সম্পূর্ণ নিয়ন্ত্রণ দিতে পারেন।

ডেটা স্থানান্তর করা হচ্ছে

শুরু করার জন্য, আপনাকে ড্র্যাগ-ড্রপ অথবা কপি-পেস্ট প্রয়োগ করতে হবে। নীচের উদাহরণগুলিতে ড্র্যাগ-ড্রপ ইন্টারঅ্যাকশন দেখানো হয়েছে, তবে কপি-পেস্টের প্রক্রিয়াটি একই রকম। যদি আপনি ড্র্যাগ অ্যান্ড ড্রপ API এর সাথে অপরিচিত থাকেন, তাহলে HTML5 ড্র্যাগ অ্যান্ড ড্রপ ব্যাখ্যা করার জন্য একটি দুর্দান্ত নিবন্ধ রয়েছে, যা এর সুবিধা এবং অসুবিধাগুলি ব্যাখ্যা করে।

MIME-টাইপ কীড ডেটা প্রদান করে, আপনি বহিরাগত অ্যাপ্লিকেশনগুলির সাথে অবাধে ইন্টারঅ্যাক্ট করতে সক্ষম হন। বেশিরভাগ WYSIWYG সম্পাদক, টেক্সট সম্পাদক এবং ব্রাউজার নীচের উদাহরণে ব্যবহৃত "আদিম" মাইম-টাইপগুলিতে সাড়া দেয়।

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Foo bar');
  event.dataTransfer.setData('text/html', '<h1>Foo bar</h1>');
  event.dataTransfer.setData('text/uri-list', 'https://example.com');
});

event.dataTransfer প্রোপার্টিটি লক্ষ্য করুন। এটি DataTransfer এর একটি ইনস্ট্যান্স রিটার্ন করে। আপনি দেখতে পাবেন, এই অবজেক্টটি কখনও কখনও অন্য নামের প্রোপার্টি দ্বারা রিটার্ন করা হয়।

ডেটা ট্রান্সফার গ্রহণ করা প্রায় একই কাজ করে যেমন এটি প্রদান করা হয়। রিসিভিং ইভেন্টগুলি শুনুন ( drop , অথবা paste ) এবং কীগুলি পড়ুন। কোনও এলিমেন্টের উপর টেনে আনার সময়, ব্রাউজার কেবল ডেটার type কীগুলিতে অ্যাক্সেস পায়। ডেটা নিজেই কেবল একটি ড্রপের পরে অ্যাক্সেস করা যেতে পারে।

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
  console.log(event.dataTransfer.types);
  // Without this, the drop event won't fire.
  event.preventDefault();
});

document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
  // Log all the transferred data items to the console.
  for (let type of event.dataTransfer.types) {
    console.log({ type, data: event.dataTransfer.getData(type) });
  }
  event.preventDefault();
});

তিনটি MIME-টাইপ অ্যাপ্লিকেশন জুড়ে ব্যাপকভাবে সমর্থিত:

• text/html : contentEditable এলিমেন্ট এবং রিচ টেক্সট (WYSIWYG) এডিটর যেমন গুগল ডক্স, মাইক্রোসফট ওয়ার্ড এবং অন্যান্যগুলিতে HTML পেলোড রেন্ডার করে।
• text/plain: ইনপুট উপাদানের মান, কোড এডিটরের বিষয়বস্তু এবং text/html থেকে ফলব্যাক সেট করে।
• text/uri-list : URL বার বা ব্রাউজার পৃষ্ঠায় ড্রপ করার সময় URL-এ নেভিগেট করে। ডিরেক্টরি বা ডেস্কটপে ড্রপ করার সময় একটি URL শর্টকাট তৈরি হবে।

WYSIWYG সম্পাদকদের দ্বারা text/html ব্যাপকভাবে গ্রহণের ফলে এটি খুবই কার্যকর হয়ে ওঠে। HTML ডকুমেন্টের মতো, আপনি ডেটা URL বা সর্বজনীনভাবে অ্যাক্সেসযোগ্য URL ব্যবহার করে রিসোর্স এম্বেড করতে পারেন। এটি গুগল ডক্সের মতো সম্পাদকদের কাছে ভিজ্যুয়াল (উদাহরণস্বরূপ ক্যানভাস থেকে) রপ্তানি করার ক্ষেত্রে ভাল কাজ করে।

const redPixel = 'data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=';
const html = '<img src="' + redPixel + '" width="100" height="100" alt="" />';
event.dataTransfer.setData('text/html', html);

কপি এবং পেস্ট ব্যবহার করে স্থানান্তর করুন

কপি-পেস্ট ইন্টারঅ্যাকশনের সাথে DataTransfer API ব্যবহার নিচে দেখানো হল। লক্ষ্য করুন যে DataTransfer অবজেক্টটি ক্লিপবোর্ড ইভেন্টের জন্য clipboardData নামক একটি প্রোপার্টি দ্বারা ফেরত পাঠানো হয়।

// Listen to copy-paste events on the document.
document.addEventListener('copy', (event) => {
  const copySource = document.querySelector('#copySource');
  // Only copy when the `activeElement` (i.e., focused element) is,
  // or is within, the `copySource` element.
  if (copySource.contains(document.activeElement)) {
    event.clipboardData.setData('text/plain', 'Foo bar');
    event.preventDefault();
  }
});

document.addEventListener('paste', (event) => {
  const pasteTarget = document.querySelector('#pasteTarget');
  if (pasteTarget.contains(document.activeElement)) {
    const data = event.clipboardData.getData('text/plain');
    console.log(data);
  }
});

কাস্টম ডেটা ফর্ম্যাট

আপনি কেবল আদিম MIME প্রকারের মধ্যেই সীমাবদ্ধ নন, তবে স্থানান্তরিত ডেটা সনাক্ত করতে যেকোনো কী ব্যবহার করতে পারেন। এটি আপনার অ্যাপ্লিকেশনের মধ্যে ক্রস-ব্রাউজার ইন্টারঅ্যাকশনের জন্য কার্যকর হতে পারে। নীচে দেখানো হয়েছে, আপনি JSON.stringify() এবং JSON.parse() ফাংশন ব্যবহার করে আরও জটিল ডেটা স্থানান্তর করতে পারেন।

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
  const data = { foo: 'bar' };
  event.dataTransfer.setData('my-custom-type', JSON.stringify(data));
});

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
  // Only allow dropping when our custom data is available.
  if (event.dataTransfer.types.includes('my-custom-type')) {
    event.preventDefault();
  }
});

document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
  if (event.dataTransfer.types.includes('my-custom-type')) {
    event.preventDefault();
    const dataString = event.dataTransfer.getData('my-custom-type');
    const data = JSON.parse(dataString);
    console.log(data);
  }
});

ওয়েব সংযোগ করা হচ্ছে

আপনার নিয়ন্ত্রণে থাকা অ্যাপ্লিকেশনগুলির মধ্যে যোগাযোগের জন্য কাস্টম ফর্ম্যাটগুলি দুর্দান্ত হলেও, এটি আপনার ফর্ম্যাট ব্যবহার করছে না এমন অ্যাপ্লিকেশনগুলিতে ডেটা স্থানান্তর করার সময় ব্যবহারকারীর উপরও প্রভাব ফেলে। আপনি যদি ওয়েব জুড়ে তৃতীয় পক্ষের অ্যাপ্লিকেশনগুলির সাথে সংযোগ স্থাপন করতে চান, তবে আপনার একটি সর্বজনীন ডেটা ফর্ম্যাট প্রয়োজন।

JSON-LD (লিঙ্কড ডেটা) স্ট্যান্ডার্ড এর জন্য একটি দুর্দান্ত প্রার্থী। এটি হালকা এবং জাভাস্ক্রিপ্টে পড়া এবং লেখা সহজ। Schema.org-এ অনেক পূর্বনির্ধারিত প্রকার রয়েছে যা ব্যবহার করা যেতে পারে এবং কাস্টম স্কিমা সংজ্ঞাও একটি বিকল্প।

const data = {
  '@context': 'https://schema.org',
  '@type': 'ImageObject',
  contentLocation: 'Venice, Italy',
  contentUrl: 'venice.jpg',
  datePublished: '2010-08-08',
  description: 'I took this picture during our honey moon.',
  name: 'Canal in Venice',
};
event.dataTransfer.setData('application/ld+json', JSON.stringify(data));

Schema.org টাইপ ব্যবহার করার সময়, আপনি জেনেরিক Thing টাইপ দিয়ে শুরু করতে পারেন, অথবা আপনার ব্যবহারের ক্ষেত্রের কাছাকাছি কিছু ব্যবহার করতে পারেন যেমন Event , Person , MediaObject , Place , অথবা প্রয়োজনে MedicalEntity এর মতো অত্যন্ত নির্দিষ্ট টাইপও ব্যবহার করতে পারেন। যখন আপনি TypeScript ব্যবহার করেন, তখন আপনি schema-dts টাইপের সংজ্ঞা থেকে ইন্টারফেস সংজ্ঞা ব্যবহার করতে পারেন।

JSON-LD ডেটা প্রেরণ এবং গ্রহণ করে, আপনি আরও সংযুক্ত এবং উন্মুক্ত ওয়েবকে সমর্থন করবেন। একই ভাষায় কথা বলার অ্যাপ্লিকেশনগুলির মাধ্যমে, আপনি বহিরাগত অ্যাপ্লিকেশনগুলির সাথে গভীর একীকরণ তৈরি করতে পারেন। জটিল API একীকরণের কোনও প্রয়োজন নেই; প্রয়োজনীয় সমস্ত তথ্য স্থানান্তরিত ডেটাতে অন্তর্ভুক্ত থাকে।

কোনও বিধিনিষেধ ছাড়াই যেকোনো (ওয়েব) অ্যাপ্লিকেশনের মধ্যে ডেটা স্থানান্তরের সমস্ত সম্ভাবনার কথা ভাবুন: ক্যালেন্ডার থেকে আপনার প্রিয় ToDo অ্যাপে ইভেন্ট শেয়ার করা, ইমেলে ভার্চুয়াল ফাইল সংযুক্ত করা, পরিচিতি শেয়ার করা। এটা দারুন হবে, তাই না? এটি আপনার সাথে শুরু হয়! 🙌

উদ্বেগ

যদিও DataTransfer API আজ উপলব্ধ, ইন্টিগ্রেট করার আগে কিছু বিষয় সম্পর্কে সচেতন থাকা উচিত।

ব্রাউজারের সামঞ্জস্য

উপরে বর্ণিত কৌশলটির জন্য ডেস্কটপ ব্রাউজারগুলি সকলের জন্য দুর্দান্ত সমর্থন প্রদান করে, যদিও মোবাইল ডিভাইসগুলিতে তা নেই। এই কৌশলটি সমস্ত প্রধান ব্রাউজার (Chrome, Edge, Firefox, Safari) এবং অপারেটিং সিস্টেমে (Android, ChromeOS, iOS, macOS, Ubuntu Linux এবং Windows) পরীক্ষা করা হয়েছে, কিন্তু দুর্ভাগ্যবশত Android এবং iOS পরীক্ষায় উত্তীর্ণ হয়নি। যদিও ব্রাউজারগুলি বিকাশ অব্যাহত রেখেছে, আপাতত এই কৌশলটি কেবল ডেস্কটপ ব্রাউজারগুলিতে সীমাবদ্ধ।

আবিষ্কারযোগ্যতা

ডেস্কটপ কম্পিউটারে কাজ করার সময় ড্র্যাগ-ড্রপ এবং কপি-পেস্ট হল সিস্টেম-স্তরের ইন্টারঅ্যাকশন, যার মূলগুলি 40 বছরেরও বেশি সময় আগে প্রথম GUI-তে ফিরে আসে। ফাইলগুলি সাজানোর জন্য আপনি কতবার এই ইন্টারঅ্যাকশনগুলি ব্যবহার করেছেন তা ভেবে দেখুন। ওয়েবে এটি এখনও খুব সাধারণ নয়।

আপনাকে এই নতুন মিথস্ক্রিয়া সম্পর্কে ব্যবহারকারীদের শিক্ষিত করতে হবে এবং এটিকে স্বীকৃত করার জন্য UX প্যাটার্ন তৈরি করতে হবে, বিশেষ করে যাদের কম্পিউটারের অভিজ্ঞতা এখন পর্যন্ত মোবাইল ডিভাইসের মধ্যে সীমাবদ্ধ তাদের জন্য।

অ্যাক্সেসযোগ্যতা

ড্র্যাগ-ড্রপ খুব একটা সহজলভ্য ইন্টারঅ্যাকশন নয়, তবে ডেটাট্রান্সফার এপিআই কপি-পেস্টের সাথেও কাজ করে। কপি-পেস্ট ইভেন্টগুলি শুনতে ভুলবেন না। এতে খুব বেশি অতিরিক্ত কাজ লাগে না এবং আপনার ব্যবহারকারীরা এটি যোগ করার জন্য আপনার প্রতি কৃতজ্ঞ থাকবে।

নিরাপত্তা এবং গোপনীয়তা

এই কৌশলটি ব্যবহার করার সময় আপনার কিছু নিরাপত্তা এবং গোপনীয়তার বিষয়গুলি সম্পর্কে সচেতন থাকা উচিত।

• ক্লিপবোর্ড ডেটা ব্যবহারকারীর ডিভাইসের অন্যান্য অ্যাপ্লিকেশনগুলিতে উপলব্ধ।
• আপনি যে ওয়েব অ্যাপ্লিকেশনগুলি টেনে আনছেন সেগুলি টাইপ কীগুলিতে অ্যাক্সেস পাবে, ডেটাতে নয়। ডেটা কেবল ড্রপ বা পেস্টের মাধ্যমে উপলব্ধ হবে।
• প্রাপ্ত তথ্য অন্যান্য ব্যবহারকারীর ইনপুটের মতোই বিবেচনা করা উচিত; ব্যবহারের আগে স্যানিটাইজ এবং যাচাই করুন।

ট্রান্সম্যাট হেল্পার লাইব্রেরি দিয়ে শুরু করা

আপনার অ্যাপ্লিকেশনে DataTransfer API ব্যবহার করার ব্যাপারে আপনি কি আগ্রহী? GitHub-এর Transmat লাইব্রেরিটি একবার দেখে নিন। এই ওপেন-সোর্স লাইব্রেরি ব্রাউজারের পার্থক্যগুলিকে সামঞ্জস্য করে, JSON-LD ইউটিলিটি প্রদান করে, ড্রপ-এরিয়া হাইলাইট করার জন্য ট্রান্সফার ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে একটি পর্যবেক্ষক ধারণ করে এবং আপনাকে বিদ্যমান ড্র্যাগ এবং ড্রপ বাস্তবায়নের মধ্যে ডেটা ট্রান্সফার অপারেশনগুলিকে একীভূত করতে দেয়।

import { Transmat, TransmatObserver, addListeners } from 'transmat';

// Send data on drag/copy.
addListeners(myElement, 'transmit', (event) => {
  const transmat = new Transmat(event);
  transmat.setData({
    'text/plain': 'Foobar',
    'application/json': { foo: 'bar' },
  });
});

// Receive data on drop/paste.
addListeners(myElement, 'receive', (event) => {
  const transmat = new Transmat(event);
  if (transmat.hasType('application/json') && transmat.accept()) {
    const data = JSON.parse(transmat.getData('application/json'));
  }
});

// Observe transfer events and highlight drop areas.
const obs = new TransmatObserver((entries) => {
  for (const entry of entries) {
    const transmat = new Transmat(entry.event);
    if (transmat.hasMimeType('application/json')) {
      entry.target.classList.toggle('drag-over', entry.isTarget);
      entry.target.classList.toggle('drag-active', entry.isActive);
    }
  }
});
obs.observe(myElement);

স্বীকৃতি

আনস্প্ল্যাশে লুবা এরটেলের হিরো ছবি।