১. ভূমিকা এবং সেটআপ
ওয়েব ক্ষমতা
আমরা ওয়েব এবং নেটিভের মধ্যে সক্ষমতার ব্যবধান কমাতে চাই এবং ডেভেলপারদের জন্য উন্মুক্ত ওয়েবে দুর্দান্ত অভিজ্ঞতা তৈরি করা সহজ করে তুলতে চাই। আমরা দৃঢ়ভাবে বিশ্বাস করি যে প্রতিটি ডেভেলপারের একটি দুর্দান্ত ওয়েব অভিজ্ঞতা তৈরির জন্য প্রয়োজনীয় ক্ষমতাগুলিতে অ্যাক্সেস থাকা উচিত এবং আমরা আরও সক্ষম ওয়েবের জন্য প্রতিশ্রুতিবদ্ধ।
তবে, কিছু ক্ষমতা আছে—যেমন ফাইল সিস্টেম অ্যাক্সেস এবং নিষ্ক্রিয় সনাক্তকরণ—যা নেটিভের জন্য উপলব্ধ কিন্তু ওয়েবে উপলব্ধ নয়। এই অনুপস্থিত ক্ষমতাগুলির অর্থ হল কিছু ধরণের অ্যাপ ওয়েবে সরবরাহ করা যায় না, অথবা কম কার্যকর।
আমরা এই নতুন ক্ষমতাগুলি একটি উন্মুক্ত এবং স্বচ্ছ উপায়ে ডিজাইন এবং বিকাশ করব, বিদ্যমান ওপেন ওয়েব প্ল্যাটফর্ম স্ট্যান্ডার্ড প্রক্রিয়াগুলি ব্যবহার করে এবং ডিজাইনের পুনরাবৃত্তি করার সময় ডেভেলপার এবং অন্যান্য ব্রাউজার বিক্রেতাদের কাছ থেকে প্রাথমিক প্রতিক্রিয়া পাব, যাতে একটি আন্তঃব্যবহারযোগ্য নকশা নিশ্চিত করা যায়।
তুমি কী তৈরি করবে
এই কোডল্যাবে, আপনি বেশ কয়েকটি ওয়েব এপিআই নিয়ে খেলবেন যা একেবারে নতুন অথবা শুধুমাত্র একটি পতাকার পিছনে উপলব্ধ। সুতরাং, এই কোডল্যাবটি একটি নির্দিষ্ট চূড়ান্ত পণ্য তৈরির পরিবর্তে, এপিআইগুলির নিজস্ব এবং এই এপিআইগুলি আনলক করে এমন ব্যবহারের ক্ষেত্রে ফোকাস করে।
তুমি কি শিখবে
এই কোডল্যাবটি আপনাকে বেশ কয়েকটি ব্লিডিং-এজ API-এর মৌলিক মেকানিক্স শেখাবে। মনে রাখবেন যে এই মেকানিক্সগুলি এখনও পুরোপুরি তৈরি হয়নি, এবং ডেভেলপার ফ্লো সম্পর্কে আপনার প্রতিক্রিয়ার জন্য আমরা অত্যন্ত কৃতজ্ঞ।
তোমার যা লাগবে
যেহেতু এই কোডল্যাবে বৈশিষ্ট্যযুক্ত API গুলি সত্যিই শেষ পর্যায়ে, তাই প্রতিটি API এর জন্য প্রয়োজনীয়তা ভিন্ন। অনুগ্রহ করে প্রতিটি বিভাগের শুরুতে সামঞ্জস্যের তথ্য সাবধানে পড়তে ভুলবেন না।
কোডল্যাবের সাথে কীভাবে যোগাযোগ করবেন
কোডল্যাবটি ধারাবাহিকভাবে কাজ করার জন্য তৈরি নয়। প্রতিটি বিভাগ একটি স্বাধীন API উপস্থাপন করে, তাই আপনার সবচেয়ে বেশি আগ্রহের বিষয়গুলি বেছে নিতে দ্বিধা করবেন না।
2. ব্যাজিং API
ব্যাজিং API-এর লক্ষ্য হল ব্যাকগ্রাউন্ডে ঘটে যাওয়া জিনিসগুলির প্রতি ব্যবহারকারীদের দৃষ্টি আকর্ষণ করা। এই কোডল্যাবের ডেমোটি সহজ করার জন্য, আসুন API ব্যবহার করে ব্যবহারকারীদের মনোযোগ ফোরগ্রাউন্ডে ঘটছে এমন কিছুর প্রতি আকর্ষণ করি। এরপর আপনি ব্যাকগ্রাউন্ডে ঘটে যাওয়া জিনিসগুলিতে মানসিক স্থানান্তর করতে পারেন।
এয়ারহর্নার ইনস্টল করুন
এই API টি কাজ করার জন্য, আপনার হোম স্ক্রিনে ইনস্টল করা একটি PWA প্রয়োজন, তাই প্রথম ধাপ হল একটি PWA ইনস্টল করা, যেমন কুখ্যাত, বিশ্বখ্যাত airhorner.com । উপরের ডানদিকে কোণায় ইনস্টল বোতামটি টিপুন অথবা ম্যানুয়ালি ইনস্টল করতে তিন-ডট মেনু ব্যবহার করুন।
এটি একটি নিশ্চিতকরণ প্রম্পট দেখাবে, ইনস্টল করুন এ ক্লিক করুন।
আপনার অপারেটিং সিস্টেমের ডকে এখন একটি নতুন আইকন আছে। PWA চালু করতে এটিতে ক্লিক করুন। এর নিজস্ব অ্যাপ উইন্ডো থাকবে এবং এটি স্বতন্ত্র মোডে চলবে।
|
|
একটি ব্যাজ সেট করা হচ্ছে
এখন যেহেতু আপনার একটি PWA ইনস্টল করা আছে, তাই ব্যাজে কিছু সংখ্যাসূচক তথ্য (ব্যাজগুলিতে কেবল সংখ্যা থাকতে পারে) প্রদর্শনের প্রয়োজন। The Air Horner-এ গণনা করার একটি সহজ উপায় হল, এটি কতবার হর্ন বাজানো হয়েছে তার সংখ্যা। আসলে, ইনস্টল করা Airhorner অ্যাপ দিয়ে, হর্ন বাজানোর চেষ্টা করুন এবং ব্যাজটি পরীক্ষা করুন। আপনি যখনই হর্ন বাজান তখন এটি একটি গণনা করে।
তাহলে, এটি কিভাবে কাজ করে? মূলত, কোডটি হল:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
কয়েকবার এয়ারহর্ন বাজান এবং PWA এর আইকনটি পরীক্ষা করুন: এটি প্রতিবার আপডেট হবে। এয়ারহর্ন বাজবে। যতটা সহজ।
একটি ব্যাজ সাফ করা
কাউন্টারটি ৯৯ পর্যন্ত উঠে যায় এবং তারপর আবার শুরু হয়। আপনি এটি ম্যানুয়ালি রিসেটও করতে পারেন। DevTools Console ট্যাবটি খুলুন, নীচের লাইনটি পেস্ট করুন এবং Enter টিপুন।
navigator.setExperimentalAppBadge(0);
বিকল্পভাবে, আপনি নিম্নলিখিত স্নিপেটে দেখানো হিসাবে স্পষ্টভাবে মুছে ফেলার মাধ্যমে ব্যাজটি থেকে মুক্তি পেতে পারেন। আপনার PWA এর আইকনটি এখন আবার শুরুর মতো, পরিষ্কার এবং ব্যাজ ছাড়াই দেখাবে।
navigator.clearExperimentalAppBadge();
প্রতিক্রিয়া
এই API সম্পর্কে আপনার কী মনে হয়েছে? অনুগ্রহ করে এই জরিপের সংক্ষিপ্ত উত্তর দিয়ে আমাদের সাহায্য করুন:
এই API কি ব্যবহার করা সহজ ছিল?
দৌড়ানোর জন্য কি তুমি উদাহরণটা পেয়েছো?
আরও কিছু বলার আছে? কি কোনও বৈশিষ্ট্য অনুপস্থিত ছিল? এই জরিপে দ্রুত প্রতিক্রিয়া জানান। ধন্যবাদ!
৩. নেটিভ ফাইল সিস্টেম API
নেটিভ ফাইল সিস্টেম API ডেভেলপারদের এমন শক্তিশালী ওয়েব অ্যাপ তৈরি করতে সক্ষম করে যা ব্যবহারকারীর স্থানীয় ডিভাইসে ফাইলগুলির সাথে ইন্টারঅ্যাক্ট করে। ব্যবহারকারী যখন কোনও ওয়েব অ্যাপ অ্যাক্সেস দেয়, তখন এই API ওয়েব অ্যাপগুলিকে ব্যবহারকারীর ডিভাইসে ফাইল এবং ফোল্ডারগুলিতে সরাসরি পরিবর্তনগুলি পড়তে বা সংরক্ষণ করতে দেয়।
একটি ফাইল পড়া
নেটিভ ফাইল সিস্টেম API-এর "হ্যালো, ওয়ার্ল্ড" হল একটি স্থানীয় ফাইল পড়া এবং ফাইলের বিষয়বস্তু পাওয়া। একটি সাধারণ .txt ফাইল তৈরি করুন এবং কিছু টেক্সট লিখুন। এরপর, example.com-এর মতো যেকোনো নিরাপদ সাইটে (অর্থাৎ HTTP S এর মাধ্যমে পরিবেশিত একটি সাইট) নেভিগেট করুন এবং DevTools কনসোল খুলুন। নীচের কোড স্নিপেটটি কনসোলে পেস্ট করুন। যেহেতু নেটিভ ফাইল সিস্টেম API-এর জন্য একটি ব্যবহারকারীর অঙ্গভঙ্গি প্রয়োজন, আমরা ডকুমেন্টে একটি ডাবল-ক্লিক হ্যান্ডলার সংযুক্ত করি। আমাদের পরে ফাইল হ্যান্ডেলের প্রয়োজন হবে, তাই আমরা এটিকে একটি গ্লোবাল ভেরিয়েবল বানাই।
document.ondblclick = async () => {
window.handle = await window.chooseFileSystemEntries();
const file = await handle.getFile();
document.body.textContent = await file.text();
};
এরপর যখন আপনি example.com পৃষ্ঠার যেকোনো জায়গায় ডাবল-ক্লিক করবেন, তখন একটি ফাইল পিকার দেখাবে।
আপনার আগে তৈরি করা .txt ফাইলটি নির্বাচন করুন। ফাইলের বিষয়বস্তুগুলি example.com এর প্রকৃত body বিষয়বস্তুগুলিকে প্রতিস্থাপন করবে।
একটি ফাইল সংরক্ষণ করা হচ্ছে
এরপর, আমরা কিছু পরিবর্তন করতে চাই। অতএব, নীচের কোড স্নিপেটটি পেস্ট করে body সম্পাদনাযোগ্য করে তুলি। এখন, আপনি টেক্সটটি এমনভাবে সম্পাদনা করতে পারেন যেন ব্রাউজারটি একটি টেক্সট এডিটর।
document.body.contentEditable = true;
এখন, আমরা এই পরিবর্তনগুলি মূল ফাইলে আবার লিখতে চাই। অতএব, আমাদের ফাইল হ্যান্ডেলে একজন লেখকের প্রয়োজন, যা আমরা কনসোলে নীচের স্নিপেটটি পেস্ট করে পেতে পারি। আবার আমাদের একটি ব্যবহারকারীর অঙ্গভঙ্গির প্রয়োজন, তাই এবার আমরা মূল ডকুমেন্টে ক্লিকের জন্য অপেক্ষা করব।
document.onclick = async () => {
const writer = await handle.createWriter();
await writer.truncate(0);
await writer.write(0, document.body.textContent);
await writer.close();
};
এখন যখন আপনি ডকুমেন্টে ক্লিক করবেন (ডাবল-ক্লিক করবেন না), তখন একটি অনুমতি প্রম্পট প্রদর্শিত হবে। যখন আপনি অনুমতি দেবেন, তখন ফাইলের বিষয়বস্তুগুলি আপনার পূর্বে সম্পাদিত body যা থাকবে তাই হবে। একটি ভিন্ন এডিটরে ফাইলটি খুলে পরিবর্তনগুলি যাচাই করুন (অথবা ডকুমেন্টে আবার ডাবল-ক্লিক করে এবং আপনার ফাইলটি পুনরায় খোলার মাধ্যমে প্রক্রিয়াটি আবার শুরু করুন)।
অভিনন্দন! আপনি বিশ্বের সবচেয়ে ছোট টেক্সট এডিটর তৈরি করেছেন [citation needed] ।
প্রতিক্রিয়া
এই API সম্পর্কে আপনার কী মনে হয়েছে? অনুগ্রহ করে এই জরিপের সংক্ষিপ্ত উত্তর দিয়ে আমাদের সাহায্য করুন:
এই API কি ব্যবহার করা সহজ ছিল?
দৌড়ানোর জন্য কি তুমি উদাহরণটা পেয়েছো?
আরও কিছু বলার আছে? কি কোনও বৈশিষ্ট্য অনুপস্থিত ছিল? এই জরিপে দ্রুত প্রতিক্রিয়া জানান। ধন্যবাদ!
৪. আকৃতি সনাক্তকরণ API
শেপ ডিটেকশন এপিআই অ্যাক্সিলারেটেড শেপ ডিটেক্টর (যেমন, মানুষের মুখের জন্য) অ্যাক্সেস প্রদান করে এবং স্থির চিত্র এবং/অথবা লাইভ চিত্র ফিডে কাজ করে। অপারেটিং সিস্টেমগুলিতে অ্যান্ড্রয়েড ফেসডিটেক্টরের মতো পারফর্ম্যান্স এবং অত্যন্ত অপ্টিমাইজড ফিচার ডিটেক্টর রয়েছে। শেপ ডিটেকশন এপিআই এই নেটিভ বাস্তবায়নগুলি খুলে দেয় এবং জাভাস্ক্রিপ্ট ইন্টারফেসের একটি সেটের মাধ্যমে সেগুলি প্রকাশ করে।
বর্তমানে, সমর্থিত বৈশিষ্ট্যগুলি হল FaceDetector ইন্টারফেসের মাধ্যমে মুখ সনাক্তকরণ, BarcodeDetector ইন্টারফেসের মাধ্যমে বারকোড সনাক্তকরণ এবং TextDetector ইন্টারফেসের মাধ্যমে টেক্সট সনাক্তকরণ (অপটিক্যাল ক্যারেক্টার রিকগনিশন)।
মুখ সনাক্তকরণ
শেপ ডিটেকশন API-এর একটি আকর্ষণীয় বৈশিষ্ট্য হল ফেস ডিটেকশন। এটি পরীক্ষা করার জন্য, আমাদের ফেস সহ একটি পৃষ্ঠা প্রয়োজন। লেখকের ফেস সহ এই পৃষ্ঠাটি একটি ভালো শুরু। এটি নীচের স্ক্রিনশটের মতো দেখতে হবে। একটি সমর্থিত ব্রাউজারে, ফেসের সীমানা বাক্স এবং ফেস ল্যান্ডমার্কগুলি স্বীকৃত হবে।
গ্লিচ প্রজেক্ট , বিশেষ করে script.js ফাইলটি রিমিক্স বা সম্পাদনা করে আপনি দেখতে পাবেন যে এটি করার জন্য কতটা কম কোডের প্রয়োজন ছিল।
যদি আপনি সম্পূর্ণরূপে গতিশীল হতে চান এবং শুধুমাত্র লেখকের মুখ দিয়ে কাজ করতে চান না, তাহলে একটি ব্যক্তিগত ট্যাবে বা অতিথি মোডে মুখ দিয়ে ভরা এই Google অনুসন্ধান ফলাফল পৃষ্ঠায় যান। এখন সেই পৃষ্ঠায়, যেকোনো জায়গায় ডান-ক্লিক করে এবং তারপর Inspect এ ক্লিক করে Chrome Developer Tools খুলুন। এরপর, Console ট্যাবে, নীচের স্নিপেটটি পেস্ট করুন। কোডটি একটি আধা-স্বচ্ছ লাল বাক্স দিয়ে সনাক্ত করা মুখগুলি হাইলাইট করবে।
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const faces = await new FaceDetector().detect(img);
faces.forEach(face => {
const div = document.createElement('div');
const box = face.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left + left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
আপনি লক্ষ্য করবেন যে কিছু DOMException বার্তা রয়েছে, এবং সমস্ত ছবি প্রক্রিয়া করা হচ্ছে না। এর কারণ হল above-the-fold ছবিগুলি ডেটা URI হিসাবে ইনলাইন করা হয় এবং এইভাবে অ্যাক্সেস করা যেতে পারে, যেখানে below-the-fold ছবিগুলি একটি ভিন্ন ডোমেন থেকে আসে যা CORS সমর্থন করার জন্য কনফিগার করা হয়নি। ডেমোর জন্য, আমাদের এটি নিয়ে চিন্তা করার দরকার নেই।
মুখের ল্যান্ডমার্ক সনাক্তকরণ
শুধু মুখের পাশাপাশি, macOS মুখের ল্যান্ডমার্ক সনাক্তকরণকেও সমর্থন করে। মুখের ল্যান্ডমার্ক সনাক্তকরণ পরীক্ষা করার জন্য, নিম্নলিখিত স্নিপেটটি কনসোলে পেস্ট করুন। অনুস্মারক: crbug.com/914348 এর কারণে ল্যান্ডমার্কগুলির লাইন-আপ মোটেও নিখুঁত নয়, তবে আপনি দেখতে পাচ্ছেন এটি কোথায় যাচ্ছে এবং এই বৈশিষ্ট্যটি কতটা শক্তিশালী হতে পারে।
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const faces = await new FaceDetector().detect(img);
faces.forEach(face => {
const div = document.createElement('div');
const box = face.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left + left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
img.before(div);
const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
landmarkSVG.style.position = 'absolute';
landmarkSVG.classList.add('landmarks');
landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
landmarkSVG.style.width = `${img.width}px`;
landmarkSVG.style.height = `${img.height}px`;
face.landmarks.map((landmark) => {
landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
landmark.locations.map((point) => {
return `${scaleX * point.x},${scaleY * point.y} `;
}).join(' ')
}" /></svg>`;
});
div.before(landmarkSVG);
});
} catch(e) {
console.error(e);
}
});
বারকোড সনাক্তকরণ
শেপ ডিটেকশন API-এর দ্বিতীয় বৈশিষ্ট্য হল বারকোড ডিটেকশন। আগেরটির মতোই, আমাদের বারকোড সহ একটি পৃষ্ঠার প্রয়োজন, যেমন এটি । যখন আপনি এটি একটি ব্রাউজারে খুলবেন, তখন আপনি বিভিন্ন QR কোডের পাঠোদ্ধার দেখতে পাবেন। এটি কীভাবে করা হয়েছে তা দেখতে Glitch প্রকল্প , বিশেষ করে script.js ফাইলটি রিমিক্স বা সম্পাদনা করুন।
যদি আপনি আরও গতিশীল কিছু চান, তাহলে আমরা আবার Google Image Search ব্যবহার করতে পারি। এবার, আপনার ব্রাউজারে একটি ব্যক্তিগত ট্যাবে অথবা অতিথি মোডে এই Google Search ফলাফল পৃষ্ঠায় যান। এখন নীচের স্নিপেটটি Chrome DevTools Console ট্যাবে পেস্ট করুন। কিছুক্ষণ পরে, স্বীকৃত বারকোডগুলি raw মান এবং বারকোডের ধরণ সহ টীকাযুক্ত হবে।
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const barcodes = await new BarcodeDetector().detect(img);
barcodes.forEach(barcode => {
const div = document.createElement('div');
const box = barcode.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left - left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
div.style.color = 'black';
div.style.fontSize = '14px';
div.textContent = `${barcode.rawValue}`;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
টেক্সট সনাক্তকরণ
শেপ ডিটেকশন API-এর শেষ বৈশিষ্ট্য হল টেক্সট ডিটেকশন। এখন আপনি ড্রিলটি জানেন: আমাদের এমন একটি পৃষ্ঠা দরকার যাতে টেক্সট থাকে, যেমনটি গুগল বুকস স্ক্যান ফলাফল সহ। সমর্থিত ব্রাউজারগুলিতে, আপনি টেক্সটটি স্বীকৃত দেখতে পাবেন এবং টেক্সট প্যাসেজের চারপাশে একটি বাউন্ডিং বক্স আঁকা হবে। গ্লিচ প্রজেক্ট , বিশেষ করে script.js ফাইলটি রিমিক্স বা সম্পাদনা করুন যাতে এটি কীভাবে করা হয়েছে তা দেখা যায়।
এটি গতিশীলভাবে পরীক্ষা করার জন্য, একটি ব্যক্তিগত ট্যাবে অথবা অতিথি মোডে এই অনুসন্ধান ফলাফল পৃষ্ঠায় যান। এখন নীচের স্নিপেটটি Chrome DevTools কনসোল ট্যাবে পেস্ট করুন। একটু অপেক্ষা করার পরে, কিছু লেখা স্বীকৃত হবে।
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const texts = await new TextDetector().detect(img);
texts.forEach(text => {
const div = document.createElement('div');
const box = text.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left - left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
div.style.color = 'black';
div.style.fontSize = '14px';
div.innerHTML = text.rawValue;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
প্রতিক্রিয়া
এই API সম্পর্কে আপনার কী মনে হয়েছে? অনুগ্রহ করে এই জরিপের সংক্ষিপ্ত উত্তর দিয়ে আমাদের সাহায্য করুন:
এই API কি ব্যবহার করা সহজ ছিল?
দৌড়ানোর জন্য কি তুমি উদাহরণটা পেয়েছো?
আরও কিছু বলার আছে? কি কোনও বৈশিষ্ট্য অনুপস্থিত ছিল? এই জরিপে দ্রুত প্রতিক্রিয়া জানান। ধন্যবাদ!
৫. ওয়েব শেয়ার টার্গেট এপিআই
ওয়েব শেয়ার টার্গেট এপিআই ইনস্টল করা ওয়েব অ্যাপগুলিকে অন্তর্নিহিত অপারেটিং সিস্টেমের সাথে শেয়ার টার্গেট হিসেবে নিবন্ধন করার অনুমতি দেয় যাতে ওয়েব শেয়ার এপিআই বা সিস্টেম ইভেন্ট, যেমন অপারেটিং-সিস্টেম-লেভেল শেয়ার বোতাম থেকে শেয়ার করা কন্টেন্ট গ্রহণ করা যায়।
শেয়ার করার জন্য একটি PWA ইনস্টল করুন
প্রথম ধাপ হিসেবে, আপনার এমন একটি PWA দরকার যা আপনি শেয়ার করতে পারবেন। এবার, Airhorner (ভাগ্যক্রমে) কাজটি করবে না, তবে Web Share Target ডেমো অ্যাপটি আপনার পাশে আছে। আপনার ডিভাইসের হোম স্ক্রিনে অ্যাপটি ইনস্টল করুন।
PWA-তে কিছু শেয়ার করুন
এরপর, আপনার শেয়ার করার জন্য কিছু দরকার, যেমন Google Photos থেকে নেওয়া একটি ছবি। শেয়ার বোতামটি ব্যবহার করুন এবং শেয়ার লক্ষ্য হিসেবে স্ক্র্যাপবুক PWA নির্বাচন করুন।
যখন আপনি অ্যাপ আইকনে ট্যাপ করবেন, তখন আপনি সরাসরি স্ক্র্যাপবুক PWA-তে পৌঁছে যাবেন এবং ছবিটি ঠিক সেখানেই থাকবে।
তাহলে, এটি কীভাবে কাজ করে? জানতে, স্ক্র্যাপবুক PWA এর ওয়েব অ্যাপ ম্যানিফেস্টটি অন্বেষণ করুন। ওয়েব শেয়ার টার্গেট API কে কার্যকর করার জন্য কনফিগারেশনটি ম্যানিফেস্টের "share_target" সম্পত্তিতে অবস্থিত যা এর "action" ক্ষেত্রে একটি URL নির্দেশ করে যা "params" এ তালিকাভুক্ত প্যারামিটার দিয়ে সজ্জিত।
শেয়ারিং পক্ষটি তারপর সেই অনুযায়ী এই URL টেমপ্লেটটি পূরণ করে (হয় একটি শেয়ার অ্যাকশনের মাধ্যমে সহজতর করা হয়, অথবা ওয়েব শেয়ার API ব্যবহার করে ডেভেলপার দ্বারা প্রোগ্রাম্যাটিকভাবে নিয়ন্ত্রিত হয়), যাতে গ্রহণকারী পক্ষটি প্যারামিটারগুলি বের করতে পারে এবং সেগুলি দিয়ে কিছু করতে পারে, যেমন সেগুলি প্রদর্শন করা।
{
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": ["audio/*", "image/*", "video/*"]
}]
}
}
প্রতিক্রিয়া
এই API সম্পর্কে আপনার কী মনে হয়েছে? অনুগ্রহ করে এই জরিপের সংক্ষিপ্ত উত্তর দিয়ে আমাদের সাহায্য করুন:
এই API কি ব্যবহার করা সহজ ছিল?
দৌড়ানোর জন্য কি তুমি উদাহরণটা পেয়েছো?
আরও কিছু বলার আছে? কি কোনও বৈশিষ্ট্য অনুপস্থিত ছিল? এই জরিপে দ্রুত প্রতিক্রিয়া জানান। ধন্যবাদ!
৬. ওয়েক লক এপিআই
ব্যাটারির চার্জ শেষ না হওয়া এড়াতে, বেশিরভাগ ডিভাইসই যখন অলস অবস্থায় থাকে, তখন দ্রুত ঘুমিয়ে পড়ে। যদিও বেশিরভাগ সময় এটি ঠিক থাকে, কিছু অ্যাপ্লিকেশনের কাজ সম্পন্ন করার জন্য স্ক্রিন বা ডিভাইসকে জাগ্রত রাখতে হয়। ওয়েক লক এপিআই ডিভাইসটিকে ম্লান এবং স্ক্রিন লক হওয়া থেকে বা ডিভাইসটিকে ঘুমিয়ে পড়তে বাধা দেওয়ার একটি উপায় প্রদান করে। এই ক্ষমতা নতুন অভিজ্ঞতা প্রদান করে যা এখন পর্যন্ত একটি নেটিভ অ্যাপের প্রয়োজন ছিল।
একটি স্ক্রিনসেভার সেট আপ করুন
ওয়েক লক এপিআই পরীক্ষা করার জন্য, আপনাকে প্রথমে নিশ্চিত করতে হবে যে আপনার ডিভাইসটি স্লিপ মোডে যাচ্ছে । অতএব, আপনার অপারেটিং সিস্টেমের পছন্দের প্যানেলে, আপনার পছন্দের একটি স্ক্রিনসেভার সক্রিয় করুন এবং নিশ্চিত করুন যে এটি ১ মিনিট পরে শুরু হয়। নিশ্চিত করুন যে এটি ঠিক সেই সময়ের জন্য আপনার ডিভাইসটিকে একা রেখে কাজ করে (হ্যাঁ, আমি জানি, এটি বেদনাদায়ক)। নীচের স্ক্রিনশটগুলি ম্যাকওএস দেখায়, তবে আপনি অবশ্যই আপনার মোবাইল অ্যান্ড্রয়েড ডিভাইস বা যেকোনো সমর্থিত ডেস্কটপ প্ল্যাটফর্মে এটি চেষ্টা করতে পারেন।
স্ক্রিন ওয়েক লক সেট করুন
এখন যখন আপনি জানেন যে আপনার স্ক্রিনসেভার কাজ করছে, তখন স্ক্রিনসেভারটিকে তার কাজ করতে বাধা দেওয়ার জন্য আপনি "screen" ধরণের একটি ওয়েক লক ব্যবহার করবেন। ওয়েক লক ডেমো অ্যাপে যান এবং অ্যাক্টিভেট করুন এ ক্লিক করুন।
screen ওয়েক লক চেকবক্স।
সেই মুহূর্ত থেকে, একটি ওয়েক লক সক্রিয় থাকে। যদি আপনি যথেষ্ট ধৈর্য ধরে আপনার ডিভাইসটিকে এক মিনিটের জন্যও অক্ষত রাখেন, তাহলে আপনি এখন দেখতে পাবেন যে স্ক্রিনসেভারটি আসলেই শুরু হয়নি।
তাহলে এটা কিভাবে কাজ করে? জানতে, Wake Lock ডেমো অ্যাপের Glitch প্রজেক্টে যান এবং script.js দেখুন। কোডের সারাংশ নীচের স্নিপেটে রয়েছে। একটি নতুন ট্যাব খুলুন (অথবা আপনার খোলা যেকোনো ট্যাব ব্যবহার করুন) এবং নীচের কোডটি Chrome Developer Tools কনসোলে পেস্ট করুন। যখন আপনি উইন্ডোতে ক্লিক করবেন, তখন আপনি একটি ওয়েক লক দেখতে পাবেন যা ঠিক 10 সেকেন্ডের জন্য সক্রিয় থাকবে (কনসোল লগ দেখুন), এবং আপনার স্ক্রিনসেভার শুরু হবে না।
if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
let wakeLock = null;
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (e) {
console.error(`${e.name}, ${e.message}`);
}
};
requestWakeLock();
window.setTimeout(() => {
wakeLock.release();
}, 10 * 1000);
}
প্রতিক্রিয়া
এই API সম্পর্কে আপনার কী মনে হয়েছে? অনুগ্রহ করে এই জরিপের সংক্ষিপ্ত উত্তর দিয়ে আমাদের সাহায্য করুন:
এই API কি ব্যবহার করা সহজ ছিল?
দৌড়ানোর জন্য কি তুমি উদাহরণটা পেয়েছো?
আরও কিছু বলার আছে? কি কোনও বৈশিষ্ট্য অনুপস্থিত ছিল? এই জরিপে দ্রুত প্রতিক্রিয়া জানান। ধন্যবাদ!
৭. কন্টাক্ট পিকার এপিআই
আমরা যে APIটি নিয়ে খুবই আগ্রহী তা হল Contact Picker API। এটি একটি ওয়েব অ্যাপকে ডিভাইসের নেটিভ কন্টাক্ট ম্যানেজার থেকে কন্টাক্ট অ্যাক্সেস করার অনুমতি দেয়, যাতে আপনার ওয়েব অ্যাপ আপনার কন্টাক্টের নাম, ইমেল ঠিকানা এবং টেলিফোন নম্বরগুলিতে অ্যাক্সেস পায়। আপনি নির্দিষ্ট করতে পারেন যে আপনি কেবল একটি বা একাধিক কন্টাক্ট চান এবং আপনি সমস্ত ফিল্ড চান নাকি নাম, ইমেল ঠিকানা এবং টেলিফোন নম্বরের একটি উপসেট চান।
গোপনীয়তা বিবেচনা
পিকারটি খোলার পর, আপনি যে পরিচিতিগুলি ভাগ করতে চান তা নির্বাচন করতে পারেন। আপনি লক্ষ্য করবেন যে "সমস্ত নির্বাচন করুন" বিকল্পটি নেই, যা ইচ্ছাকৃত: আমরা ভাগ করে নেওয়া একটি সচেতন সিদ্ধান্ত হিসাবে চাই। একইভাবে, অ্যাক্সেস ক্রমাগত নয়, বরং এককালীন সিদ্ধান্ত।
পরিচিতি অ্যাক্সেস করা হচ্ছে
পরিচিতি অ্যাক্সেস করা একটি সহজ কাজ। পিকার খোলার আগে, আপনি কোন ক্ষেত্রগুলি চান তা নির্দিষ্ট করতে পারেন (বিকল্পগুলি হল name , email এবং telephone ), এবং আপনি একাধিক বা শুধুমাত্র একটি পরিচিতি অ্যাক্সেস করতে চান কিনা। আপনি ডেমো অ্যাপ্লিকেশনটি খোলার মাধ্যমে একটি অ্যান্ড্রয়েড ডিভাইসে এই API পরীক্ষা করতে পারেন। সোর্স কোডের প্রাসঙ্গিক অংশটি মূলত নীচের স্নিপেট:
getContactsButton.addEventListener('click', async () => {
const contacts = await navigator.contacts.select(
['name', 'email'],
{multiple: true});
if (!contacts.length) {
// No contacts were selected, or picker couldn't be opened.
return;
}
console.log(contacts);
});
৮. অ্যাসিঙ্ক ক্লিপবোর্ড এপিআই
টেক্সট কপি এবং পেস্ট করা হচ্ছে
এখন পর্যন্ত, সিস্টেমের ক্লিপবোর্ডে প্রোগ্রাম্যাটিকভাবে ছবি কপি এবং পেস্ট করার কোন উপায় ছিল না। সম্প্রতি, আমরা Async Clipboard API-তে ছবি সমর্থন যোগ করেছি,
যাতে এখন আপনি ছবিগুলি কপি এবং পেস্ট করতে পারেন। নতুন কী হল আপনি ক্লিপবোর্ডে ছবিগুলিও লিখতে পারেন। অ্যাসিঙ্ক্রোনাস ক্লিপবোর্ড API কিছু সময়ের জন্য টেক্সট কপি এবং পেস্ট করার সুবিধা প্রদান করে। আপনি navigator.clipboard.writeText() কল করে ক্লিপবোর্ডে টেক্সট কপি করতে পারেন এবং পরে navigator.clipboard.readText() কল করে সেই টেক্সটটি পেস্ট করতে পারেন।
ছবি কপি এবং পেস্ট করা হচ্ছে
এখন আপনি ক্লিপবোর্ডে ছবিও লিখতে পারেন। এটি কাজ করার জন্য, আপনার ছবির ডেটা একটি ব্লব হিসাবে প্রয়োজন যা আপনি ক্লিপবোর্ড আইটেম কনস্ট্রাক্টরে পাঠাবেন। অবশেষে, আপনি navigator.clipboard.write() কল করে এই ক্লিপবোর্ড আইটেমটি অনুলিপি করতে পারেন।
// Copy: Writing image to the clipboard
try {
const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem(Object.defineProperty({}, blob.type, {
value: blob,
enumerable: true
}))
]);
console.log('Image copied.');
} catch(e) {
console.error(e, e.message);
}
ক্লিপবোর্ড থেকে ছবিটি পেস্ট করা বেশ জটিল মনে হচ্ছে, কিন্তু আসলে এটি কেবল ক্লিপবোর্ড আইটেম থেকে ব্লবটি ফিরিয়ে আনার মধ্যে রয়েছে। যেহেতু একাধিক থাকতে পারে, তাই আপনার আগ্রহের একটি না পাওয়া পর্যন্ত আপনাকে সেগুলি লুপ করতে হবে। নিরাপত্তার কারণে, এখন এটি PNG ছবির মধ্যে সীমাবদ্ধ, তবে ভবিষ্যতে আরও ছবির ফর্ম্যাট সমর্থিত হতে পারে।
async function getClipboardContents() {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
try {
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type);
console.log(URL.createObjectURL(blob));
}
} catch (e) {
console.error(e, e.message);
}
}
} catch (e) {
console.error(e, e.message);
}
}
আপনি একটি ডেমো অ্যাপে এই API-এর কার্যকারিতা দেখতে পাবেন, এর সোর্স কোডের প্রাসঙ্গিক স্নিপেটগুলি উপরে এমবেড করা আছে। ক্লিপবোর্ডে ছবিগুলি অনুলিপি করা অনুমতি ছাড়াই করা যেতে পারে, তবে আপনাকে ক্লিপবোর্ড থেকে পেস্ট করার অ্যাক্সেস দিতে হবে।
অ্যাক্সেস দেওয়ার পরে, আপনি ক্লিপবোর্ড থেকে ছবিটি পড়তে পারেন এবং অ্যাপ্লিকেশনটিতে পেস্ট করতে পারেন:
৯. তুমি পেরেছো!
অভিনন্দন, আপনি কোডল্যাবের শেষ পর্যায়ে পৌঁছে গেছেন। আবারও, এটি আমাদের মনে করিয়ে দেয় যে বেশিরভাগ API এখনও চলমান এবং সক্রিয়ভাবে কাজ করা হচ্ছে। অতএব, টিম আপনার প্রতিক্রিয়ার জন্য সত্যিই কৃতজ্ঞ, কারণ আপনার মতো লোকেদের সাথে যোগাযোগ করলেই আমরা এই APIগুলি সঠিকভাবে পেতে পারি।
আমরা আপনাকে আমাদের Capabilities ল্যান্ডিং পৃষ্ঠাটি ঘন ঘন দেখার জন্য উৎসাহিত করছি। আমরা এটি আপডেট রাখব, এবং এতে আমরা যে API গুলিতে কাজ করি তার জন্য সমস্ত গভীর নিবন্ধের নির্দেশিকা রয়েছে। চালিয়ে যান!
টম এবং পুরো ক্যাপাবিলিটিস টিম 🐡