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

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

Jorik Tangelder

Thomas Steiner

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

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

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

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

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 প্রকারগুলি ব্যবহার করার সময়, আপনি জেনেরিক থিং টাইপ দিয়ে শুরু করতে পারেন, অথবা আপনার ব্যবহারের ক্ষেত্রের কাছাকাছি কিছু ব্যবহার করতে পারেন যেমন Event , Person , MediaObject , Place , বা প্রয়োজনে MedicalEntity-এর মতো উচ্চ-নির্দিষ্ট প্রকার। আপনি যখন টাইপস্ক্রিপ্ট ব্যবহার করেন, তখন আপনি স্কিমা-ডিটিএস টাইপ সংজ্ঞা থেকে ইন্টারফেস সংজ্ঞা ব্যবহার করতে পারেন।

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

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

উদ্বেগ

যদিও ডেটা ট্রান্সফার API আজ উপলব্ধ, একীভূত করার আগে কিছু বিষয় সচেতন হতে হবে।

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

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

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

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

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

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

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

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

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

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

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

আপনি কি আপনার অ্যাপ্লিকেশনে ডেটা ট্রান্সফার API ব্যবহার করার বিষয়ে উত্তেজিত? GitHub-এ ট্রান্সম্যাট লাইব্রেরিটি একবার দেখার কথা বিবেচনা করুন। এই ওপেন-সোর্স লাইব্রেরি ব্রাউজার পার্থক্যগুলিকে সারিবদ্ধ করে, 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);

স্বীকৃতি

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