1. ভূমিকা এবং সেটআপ
ওয়েব ক্ষমতা
আমরা ওয়েব এবং নেটিভের মধ্যে সক্ষমতার ব্যবধান বন্ধ করতে চাই এবং বিকাশকারীদের জন্য উন্মুক্ত ওয়েবে দুর্দান্ত অভিজ্ঞতা তৈরি করা সহজ করতে চাই। আমরা দৃঢ়ভাবে বিশ্বাস করি যে প্রতিটি বিকাশকারীর একটি দুর্দান্ত ওয়েব অভিজ্ঞতা তৈরি করতে তাদের প্রয়োজনীয় ক্ষমতাগুলিতে অ্যাক্সেস থাকা উচিত এবং আমরা আরও সক্ষম ওয়েবের জন্য প্রতিশ্রুতিবদ্ধ।
যাইহোক, কিছু ক্ষমতা আছে—যেমন ফাইল সিস্টেম অ্যাক্সেস এবং নিষ্ক্রিয় সনাক্তকরণ—যা নেটিভের জন্য উপলব্ধ কিন্তু ওয়েবে উপলব্ধ নয়। এই অনুপস্থিত ক্ষমতার অর্থ হল কিছু ধরণের অ্যাপ ওয়েবে বিতরণ করা যাবে না বা কম দরকারী।
আমরা এই নতুন ক্ষমতাগুলিকে একটি উন্মুক্ত এবং স্বচ্ছ উপায়ে ডিজাইন এবং বিকাশ করব, বিদ্যমান ওপেন ওয়েব প্ল্যাটফর্ম মান প্রক্রিয়াগুলি ব্যবহার করে বিকাশকারী এবং অন্যান্য ব্রাউজার বিক্রেতাদের কাছ থেকে প্রাথমিক প্রতিক্রিয়া পাওয়ার সাথে সাথে একটি আন্তঃপরিচালনযোগ্য ডিজাইন নিশ্চিত করার জন্য আমরা ডিজাইনের উপর পুনরাবৃত্তি করব।
আপনি কি নির্মাণ করবেন
এই কোডল্যাবে, আপনি অনেকগুলি ওয়েব API নিয়ে খেলবেন যেগুলি একেবারে নতুন বা শুধুমাত্র একটি পতাকার পিছনে উপলব্ধ৷ সুতরাং, এই কোডল্যাবটি একটি নির্দিষ্ট চূড়ান্ত পণ্য তৈরি করার পরিবর্তে API গুলিকে এবং এই APIগুলি আনলক করার ক্ষেত্রে ব্যবহার করার ক্ষেত্রে ফোকাস করে৷
আপনি কি শিখবেন
এই কোডল্যাবটি আপনাকে বেশ কয়েকটি ব্লিডিং-এজ API-এর প্রাথমিক মেকানিক্স শেখাবে। মনে রাখবেন যে এই মেকানিক্সগুলি এখনও পাথরে সেট করা হয়নি, এবং আমরা বিকাশকারী প্রবাহ সম্পর্কে আপনার প্রতিক্রিয়ার খুব প্রশংসা করি।
আপনি কি প্রয়োজন হবে
যেহেতু এই কোডল্যাবে বৈশিষ্ট্যযুক্ত APIগুলি সত্যিই রক্তপাতের প্রান্তে রয়েছে, তাই প্রতিটি API-এর প্রয়োজনীয়তা পরিবর্তিত হয়। প্রতিটি বিভাগের শুরুতে সামঞ্জস্যপূর্ণ তথ্য সাবধানে পড়া নিশ্চিত করুন.
কোডল্যাবের সাথে কীভাবে যোগাযোগ করবেন
কোডল্যাব অগত্যা ক্রমানুসারে কাজ করার জন্য বোঝানো হয় না। প্রতিটি বিভাগ একটি স্বাধীন API প্রতিনিধিত্ব করে, তাই আপনার সবচেয়ে বেশি আগ্রহের বিষয়গুলি বেছে নিন।
2. ব্যাজিং API
ব্যাজিং এপিআই-এর লক্ষ্য হল ব্যাকগ্রাউন্ডে ঘটে যাওয়া জিনিসগুলির প্রতি ব্যবহারকারীদের দৃষ্টি আকর্ষণ করা। এই কোডল্যাবে ডেমোর সরলতার জন্য, ফোরগ্রাউন্ডে ঘটছে এমন কিছুর প্রতি ব্যবহারকারীদের দৃষ্টি আকর্ষণ করতে API ব্যবহার করা যাক। তারপরে আপনি পটভূমিতে ঘটে যাওয়া জিনিসগুলিতে মানসিক স্থানান্তর করতে পারেন।
এয়ারহর্নার ইনস্টল করুন
এই API কাজ করার জন্য, আপনার একটি PWA প্রয়োজন যা হোম স্ক্রিনে ইনস্টল করা আছে, তাই প্রথম ধাপ হল একটি PWA ইনস্টল করা, যেমন কুখ্যাত, বিশ্ব-বিখ্যাত airhorner.com । উপরে-ডান কোণায় ইনস্টল বোতাম টিপুন বা ম্যানুয়ালি ইনস্টল করতে তিন-বিন্দু মেনু ব্যবহার করুন।
এটি একটি নিশ্চিতকরণ প্রম্পট দেখাবে, ইনস্টল করুন ক্লিক করুন।
এখন আপনার অপারেটিং সিস্টেমের ডকে একটি নতুন আইকন রয়েছে৷ PWA চালু করতে এটিতে ক্লিক করুন। এটির নিজস্ব অ্যাপ উইন্ডো থাকবে এবং স্বতন্ত্র মোডে চলবে।
|
|
একটি ব্যাজ সেট করা হচ্ছে
এখন আপনার একটি PWA ইনস্টল করা আছে, একটি ব্যাজে প্রদর্শন করার জন্য আপনার কিছু সংখ্যাসূচক ডেটা (ব্যাজে শুধুমাত্র সংখ্যা থাকতে পারে) প্রয়োজন। দ্য এয়ার হর্নারে গণনা করার মতো একটি সহজ জিনিস হল, দীর্ঘশ্বাস , এটি কতবার হর্ন করা হয়েছে। আসলে, ইনস্টল করা Airhorner অ্যাপ দিয়ে, হর্ন বাজাতে চেষ্টা করুন এবং ব্যাজ চেক করুন। আপনি যখনই হর্ন করেন তখন এটি এক আপ গণনা করে।
সুতরাং, কিভাবে এই কাজ করে? মূলত, কোডটি হল:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
কয়েকবার এয়ারহর্ন বাজান এবং PWA এর আইকন চেক করুন: এটি প্রতিবার আপডেট হবে। একক সময় এয়ারহর্ন শব্দ যে হিসাবে সহজ.
একটি ব্যাজ সাফ করা হচ্ছে
কাউন্টারটি 99 পর্যন্ত যায় এবং তারপর শুরু হয়। এছাড়াও আপনি ম্যানুয়ালি রিসেট করতে পারেন। DevTools কনসোল ট্যাবটি খুলুন, নীচের লাইনটি পেস্ট করুন এবং এন্টার টিপুন।
navigator.setExperimentalAppBadge(0);
বিকল্পভাবে, আপনি নীচের স্নিপেটে দেখানো হিসাবে স্পষ্টভাবে সাফ করে ব্যাজ থেকে মুক্তি পেতে পারেন। আপনার PWA এর আইকনটি এখন আবার শুরুর মতো দেখতে হবে, পরিষ্কার এবং ব্যাজ ছাড়াই।
navigator.clearExperimentalAppBadge();
প্রতিক্রিয়া
আপনি এই API সম্পর্কে কি মনে করেন? অনুগ্রহ করে এই সমীক্ষায় সংক্ষিপ্ত প্রতিক্রিয়া জানিয়ে আমাদের সাহায্য করুন:
এই API ব্যবহার স্বজ্ঞাত ছিল?
আপনি চালানোর উদাহরণ পেয়েছেন?
আরো বলার আছে? অনুপস্থিত বৈশিষ্ট্য ছিল? এই সমীক্ষায় দ্রুত প্রতিক্রিয়া প্রদান করুন. ধন্যবাদ!
3. নেটিভ ফাইল সিস্টেম 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 ব্যবহার স্বজ্ঞাত ছিল?
আপনি চালানোর উদাহরণ পেয়েছেন?
আরো বলার আছে? অনুপস্থিত বৈশিষ্ট্য ছিল? এই সমীক্ষায় দ্রুত প্রতিক্রিয়া প্রদান করুন. ধন্যবাদ!
4. আকৃতি সনাক্তকরণ API
শেপ ডিটেকশন এপিআই ত্বরিত শেপ ডিটেক্টরে অ্যাক্সেস প্রদান করে (যেমন, মানুষের মুখের জন্য) এবং স্থির চিত্র এবং/অথবা লাইভ ইমেজ ফিডে কাজ করে। অপারেটিং সিস্টেমে পারফরম্যান্স এবং অত্যন্ত অপ্টিমাইজ করা ফিচার ডিটেক্টর যেমন অ্যান্ড্রয়েড ফেসডিটেক্টর রয়েছে। শেপ ডিটেকশন এপিআই এই নেটিভ ইমপ্লিমেন্টেশন ওপেন করে এবং জাভাস্ক্রিপ্ট ইন্টারফেসের একটি সেটের মাধ্যমে তাদের প্রকাশ করে।
বর্তমানে, সমর্থিত বৈশিষ্ট্যগুলি হল FaceDetector ইন্টারফেসের মাধ্যমে মুখ সনাক্তকরণ, BarcodeDetector ইন্টারফেসের মাধ্যমে বারকোড সনাক্তকরণ, এবং TextDetector ইন্টারফেসের মাধ্যমে পাঠ্য সনাক্তকরণ (অপটিক্যাল ক্যারেক্টার রিকগনিশন)।
ফেস ডিটেকশন
আকৃতি সনাক্তকরণ API-এর একটি আকর্ষণীয় বৈশিষ্ট্য হল মুখ সনাক্তকরণ। এটি পরীক্ষা করার জন্য, আমাদের মুখ সহ একটি পৃষ্ঠা প্রয়োজন। লেখকের মুখের সাথে এই পৃষ্ঠাটি একটি ভাল শুরু। এটি নীচের স্ক্রিনশটের মত কিছু দেখাবে। একটি সমর্থিত ব্রাউজারে, মুখের সীমানা বাক্স এবং মুখের ল্যান্ডমার্কগুলি স্বীকৃত হবে৷
আপনি দেখতে পাচ্ছেন যে এটি ঘটানোর জন্য কত কম কোডের প্রয়োজন হয়েছিল গ্লিচ প্রজেক্ট , বিশেষ করে script.js ফাইলটি রিমিক্স বা সম্পাদনা করে।
আপনি যদি সম্পূর্ণ গতিশীল হতে চান এবং শুধুমাত্র লেখকের মুখের সাথে কাজ না করে, তাহলে একটি ব্যক্তিগত ট্যাবে বা অতিথি মোডে মুখ দিয়ে পূর্ণ এই Google অনুসন্ধান ফলাফল পৃষ্ঠাতে যান৷ এখন সেই পৃষ্ঠায়, যেকোনো জায়গায় ডান-ক্লিক করে এবং তারপর পরিদর্শন ক্লিক করে Chrome ডেভেলপার টুল খুলুন। এরপর, কনসোল ট্যাবে, নীচের স্নিপেটে পেস্ট করুন। কোডটি একটি আধা-স্বচ্ছ লাল বাক্সের সাথে সনাক্ত করা মুখগুলিকে হাইলাইট করবে।
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 বার্তা রয়েছে এবং সমস্ত চিত্র প্রক্রিয়া করা হচ্ছে না। এর কারণ হল উপরের-ভাঁজ চিত্রগুলি ডেটা URI হিসাবে ইনলাইনযুক্ত এবং এইভাবে অ্যাক্সেস করা যেতে পারে, যেখানে নীচের-ভাঁজ চিত্রগুলি একটি ভিন্ন ডোমেন থেকে আসে যা CORS সমর্থন করার জন্য কনফিগার করা হয়নি। ডেমোর জন্য, আমাদের এই বিষয়ে চিন্তা করার দরকার নেই।
মুখের ল্যান্ডমার্ক সনাক্তকরণ
শুধু মুখের পাশাপাশি, ম্যাকওএস মুখের ল্যান্ডমার্ক সনাক্তকরণকেও সমর্থন করে। মুখের ল্যান্ডমার্ক সনাক্তকরণ পরীক্ষা করতে, নিম্নলিখিত স্নিপেটটি কনসোলে আটকান৷ অনুস্মারক: 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 চিত্র অনুসন্ধান ব্যবহার করতে পারি। এইবার, আপনার ব্রাউজারে একটি ব্যক্তিগত ট্যাবে বা অতিথি মোডে এই Google অনুসন্ধান ফলাফল পৃষ্ঠাতে নেভিগেট করুন৷ এখন Chrome DevTools কনসোল ট্যাবে নিচের স্নিপেটটি পেস্ট করুন। অল্প সময়ের পরে, স্বীকৃত বারকোডগুলি কাঁচা মান এবং বারকোডের প্রকারের সাথে টীকা করা হবে।
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-এর চূড়ান্ত বৈশিষ্ট্য হল পাঠ্য সনাক্তকরণ। এতক্ষণে আপনি ড্রিলটি জানেন: আমাদের এমন একটি পৃষ্ঠা দরকার যাতে পাঠ্য থাকে, যেমন Google Books স্ক্যান ফলাফল সহ। সমর্থিত ব্রাউজারগুলিতে, আপনি স্বীকৃত পাঠ্য এবং পাঠ্য প্যাসেজের চারপাশে একটি বাউন্ডিং বক্স দেখতে পাবেন। Glitch প্রজেক্ট রিমিক্স করুন বা সম্পাদনা করুন, বিশেষ করে 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 ব্যবহার স্বজ্ঞাত ছিল?
আপনি চালানোর উদাহরণ পেয়েছেন?
আরো বলার আছে? অনুপস্থিত বৈশিষ্ট্য ছিল? এই সমীক্ষায় দ্রুত প্রতিক্রিয়া প্রদান করুন. ধন্যবাদ!
5. ওয়েব শেয়ার টার্গেট API
ওয়েব শেয়ার টার্গেট এপিআই ইনস্টল করা ওয়েব অ্যাপগুলিকে অন্তর্নিহিত অপারেটিং সিস্টেমের সাথে শেয়ার টার্গেট হিসাবে নিবন্ধন করার অনুমতি দেয় ওয়েব শেয়ার এপিআই বা সিস্টেম ইভেন্ট থেকে শেয়ার করা বিষয়বস্তু, যেমন অপারেটিং-সিস্টেম-লেভেল শেয়ার বোতাম থেকে।
শেয়ার করার জন্য একটি PWA ইনস্টল করুন
প্রথম ধাপ হিসেবে, আপনার একটি PWA প্রয়োজন যা আপনি শেয়ার করতে পারেন। এইবার, Airhorner (সৌভাগ্যক্রমে) কাজটি করবে না, কিন্তু ওয়েব শেয়ার টার্গেট ডেমো অ্যাপটি আপনার পিছনে রয়েছে। আপনার ডিভাইসের হোম স্ক্রিনে অ্যাপটি ইনস্টল করুন।
PWA কে কিছু শেয়ার করুন
এর পরে, আপনার শেয়ার করার জন্য কিছু প্রয়োজন, যেমন Google ফটো থেকে একটি ফটো৷ শেয়ার বোতাম ব্যবহার করুন এবং শেয়ার টার্গেট হিসাবে স্ক্র্যাপবুক PWA নির্বাচন করুন।
আপনি যখন অ্যাপ আইকনটি আলতো চাপবেন, তখন আপনি সরাসরি স্ক্র্যাপবুক পিডব্লিউএ-তে অবতরণ করবেন এবং ফটোটি সেখানেই রয়েছে।
সুতরাং, কিভাবে এই কাজ করে? খুঁজে বের করতে, স্ক্র্যাপবুক PWA এর ওয়েব অ্যাপ ম্যানিফেস্টটি অন্বেষণ করুন। ওয়েব শেয়ার টার্গেট API কে কাজ করার জন্য কনফিগারেশনটি ম্যানিফেস্টের "share_target" বৈশিষ্ট্যে অবস্থিত যা এর "action" ক্ষেত্রে একটি URL নির্দেশ করে যা "params" -এ তালিকাভুক্ত প্যারামিটার দিয়ে সজ্জিত হয়।
শেয়ারিং সাইড তারপর সেই অনুযায়ী এই ইউআরএল টেমপ্লেটটি পপুলেট করে (হয় একটি শেয়ার অ্যাকশনের মাধ্যমে, অথবা ওয়েব শেয়ার এপিআই ব্যবহার করে ডেভেলপার দ্বারা প্রোগ্রাম্যাটিকভাবে নিয়ন্ত্রিত), যাতে গ্রহীতা পক্ষ পরামিতিগুলি বের করতে পারে এবং তাদের সাথে কিছু করতে পারে, যেমন সেগুলি প্রদর্শন করা .
{
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": ["audio/*", "image/*", "video/*"]
}]
}
}
প্রতিক্রিয়া
আপনি এই API সম্পর্কে কি মনে করেন? অনুগ্রহ করে এই সমীক্ষায় সংক্ষিপ্ত প্রতিক্রিয়া জানিয়ে আমাদের সাহায্য করুন:
এই API ব্যবহার স্বজ্ঞাত ছিল?
আপনি চালানোর উদাহরণ পেয়েছেন?
আরো বলার আছে? অনুপস্থিত বৈশিষ্ট্য ছিল? এই সমীক্ষায় দ্রুত প্রতিক্রিয়া প্রদান করুন. ধন্যবাদ!
6. ওয়েক লক এপিআই
ব্যাটারি নিষ্কাশন এড়াতে, নিষ্ক্রিয় অবস্থায় থাকলে বেশিরভাগ ডিভাইস দ্রুত ঘুমাতে যায়। যদিও এটি বেশিরভাগ সময় ঠিক থাকে, কিছু অ্যাপ্লিকেশনকে তাদের কাজ সম্পূর্ণ করার জন্য স্ক্রীন বা ডিভাইসটিকে জাগ্রত রাখতে হবে। ওয়েক লক এপিআই ডিভাইসটিকে স্ক্রীনটি ম্লান হওয়া এবং লক করা বা ডিভাইসটিকে ঘুমাতে যাওয়া থেকে আটকানোর একটি উপায় প্রদান করে৷ এই ক্ষমতা নতুন অভিজ্ঞতা সক্ষম করে যে, এখন পর্যন্ত, একটি নেটিভ অ্যাপের প্রয়োজন।
একটি স্ক্রিনসেভার সেট আপ করুন
ওয়েক লক এপিআই পরীক্ষা করার জন্য, আপনাকে প্রথমে নিশ্চিত করতে হবে যে আপনার ডিভাইসটি ঘুমাতে যাবে । অতএব, আপনার অপারেটিং সিস্টেমের পছন্দ ফলকে, আপনার পছন্দের একটি স্ক্রিনসেভার সক্রিয় করুন এবং নিশ্চিত করুন যে এটি 1 মিনিট পরে শুরু হয়৷ নিশ্চিত করুন যে এটি ঠিক সেই সময়ের জন্য আপনার ডিভাইসটিকে একা রেখে কাজ করে (হ্যাঁ, আমি জানি, এটি বেদনাদায়ক)। নীচের স্ক্রিনশটগুলি macOS দেখায়, তবে আপনি অবশ্যই এটি আপনার মোবাইল অ্যান্ড্রয়েড ডিভাইস বা যেকোনো সমর্থিত ডেস্কটপ প্ল্যাটফর্মে চেষ্টা করতে পারেন।
একটি স্ক্রীন ওয়েক লক সেট করুন
এখন যেহেতু আপনি জানেন যে আপনার স্ক্রিনসেভার কাজ করছে, আপনি স্ক্রিনসেভারটিকে তার কাজ করতে বাধা দিতে "screen" টাইপের একটি ওয়েক লক ব্যবহার করবেন৷ ওয়েক লক ডেমো অ্যাপে যান এবং অ্যাক্টিভেটে ক্লিক করুন
screen ওয়েক লক চেকবক্স।
সেই মুহূর্ত থেকে শুরু করে, একটি ওয়েক লক সক্রিয়। আপনি যদি আপনার ডিভাইসটিকে এক মিনিটের জন্য স্পর্শ না করে রাখার জন্য যথেষ্ট ধৈর্যশীল হন তবে আপনি এখন দেখতে পাবেন যে স্ক্রিনসেভারটি আসলেই শুরু হয়নি।
তাই কিভাবে এই কাজ করে? খুঁজে বের করতে, ওয়েক লক ডেমো অ্যাপের জন্য গ্লিচ প্রকল্পে যান এবং script.js দেখুন। কোডের সারাংশ নীচের স্নিপেটে রয়েছে। একটি নতুন ট্যাব খুলুন (অথবা আপনি যে কোনো ট্যাব খুলেছেন তা ব্যবহার করুন) এবং একটি Chrome ডেভেলপার টুলস কনসোলে নিচের কোডটি পেস্ট করুন। আপনি যখন উইন্ডোতে ক্লিক করেন, তখন আপনি একটি ওয়েক লক দেখতে পাবেন যা ঠিক 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 ব্যবহার স্বজ্ঞাত ছিল?
আপনি চালানোর উদাহরণ পেয়েছেন?
আরো বলার আছে? অনুপস্থিত বৈশিষ্ট্য ছিল? এই সমীক্ষায় দ্রুত প্রতিক্রিয়া প্রদান করুন. ধন্যবাদ!
7. যোগাযোগ পিকার API
একটি API যা সম্পর্কে আমরা খুব উত্তেজিত তা হল কন্টাক্ট পিকার API। এটি একটি ওয়েব অ্যাপকে ডিভাইসের নেটিভ কনট্যাক্ট ম্যানেজার থেকে পরিচিতিগুলি অ্যাক্সেস করার অনুমতি দেয়, তাই আপনার ওয়েব অ্যাপটি আপনার পরিচিতিগুলির নাম, ইমেল ঠিকানা এবং টেলিফোন নম্বরগুলিতে অ্যাক্সেস করতে পারে৷ আপনি শুধুমাত্র একটি বা একাধিক পরিচিতি চান কিনা এবং আপনি সমস্ত ক্ষেত্র বা নাম, ইমেল ঠিকানা এবং টেলিফোন নম্বরগুলির একটি উপসেট চান কিনা তা নির্দিষ্ট করতে পারেন।
গোপনীয়তা বিবেচনা
একবার পিকার খোলে, আপনি যে পরিচিতিগুলি ভাগ করতে চান তা নির্বাচন করতে পারেন৷ আপনি লক্ষ্য করবেন যে "সমস্ত নির্বাচন করুন" বিকল্প নেই, যা ইচ্ছাকৃত: আমরা একটি সচেতন সিদ্ধান্ত হতে শেয়ার করতে চাই। একইভাবে, অ্যাক্সেস ক্রমাগত নয়, বরং এককালীন সিদ্ধান্ত।
পরিচিতি অ্যাক্সেস করা হচ্ছে
পরিচিতিগুলি অ্যাক্সেস করা একটি সহজ কাজ। পিকার খোলার আগে, আপনি কোন ক্ষেত্রগুলি চান তা নির্দিষ্ট করতে পারেন (অপশন হল name , email এবং telephone ), এবং আপনি একাধিক বা শুধুমাত্র একটি পরিচিতি অ্যাক্সেস করতে চান কিনা। আপনি ডেমো অ্যাপ্লিকেশনটি খোলার মাধ্যমে একটি Android ডিভাইসে এই 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);
});
8. Async ক্লিপবোর্ড API
টেক্সট কপি এবং পেস্ট করা হচ্ছে
এখন অবধি, সিস্টেমের ক্লিপবোর্ডে চিত্রগুলিকে প্রোগ্রাম্যাটিকভাবে কপি এবং পেস্ট করার কোনও উপায় ছিল না। সম্প্রতি, আমরা Async ক্লিপবোর্ড 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);
}
}
আপনি একটি ডেমো অ্যাপে এই এপিআইকে কাজ করতে দেখতে পারেন, এর সোর্স কোড থেকে প্রাসঙ্গিক স্নিপেটগুলি উপরে এম্বেড করা আছে। ক্লিপবোর্ডে ছবি অনুলিপি করা অনুমতি ছাড়াই করা যেতে পারে, তবে আপনাকে ক্লিপবোর্ড থেকে পেস্ট করার অ্যাক্সেস দিতে হবে।
অ্যাক্সেস মঞ্জুর করার পরে, আপনি তারপর ক্লিপবোর্ড থেকে ছবিটি পড়তে পারেন এবং অ্যাপ্লিকেশনটিতে পেস্ট করতে পারেন:
9. আপনি এটা করেছেন!
অভিনন্দন, আপনি কোডল্যাবের শেষে এটি তৈরি করেছেন। আবার, এটি একটি অনুস্মারক যে বেশিরভাগ API এখনও প্রবাহে রয়েছে এবং সক্রিয়ভাবে কাজ করা হচ্ছে। অতএব, টিম সত্যিই আপনার প্রতিক্রিয়ার প্রশংসা করে, কারণ শুধুমাত্র আপনার মত লোকেদের সাথে মিথস্ক্রিয়াই আমাদের এই APIগুলিকে সঠিক পেতে সাহায্য করবে৷
এছাড়াও আমরা আপনাকে আমাদের সক্ষমতা ল্যান্ডিং পৃষ্ঠাটি ঘন ঘন দেখার জন্য উত্সাহিত করি। আমরা এটিকে আপ টু ডেট রাখব, এবং এতে আমরা যে APIগুলিতে কাজ করি তার সমস্ত গভীর নিবন্ধের নির্দেশক রয়েছে৷ দোলাতে থাকো!
টম এবং পুরো ক্যাপাবিলিটিস টিম 🐡