এই ধাপে, আপনি শিখবেন:
- ম্যানিফেস্ট ফাইল এবং ব্যাকগ্রাউন্ড স্ক্রিপ্ট সহ একটি Chrome অ্যাপের মৌলিক বিল্ডিং ব্লক।
- কিভাবে একটি Chrome অ্যাপ ইনস্টল, রান এবং ডিবাগ করবেন।
এই ধাপটি সম্পূর্ণ করার আনুমানিক সময়: 10 মিনিট।
এই ধাপে আপনি যা সম্পূর্ণ করবেন তার পূর্বরূপ দেখতে, এই পৃষ্ঠার নীচে ঝাঁপ দাও ↓ ।
Chrome Apps এর সাথে পরিচিত হন
একটি Chrome অ্যাপে এই উপাদানগুলি রয়েছে:
- ম্যানিফেস্ট আপনার অ্যাপের মেটা তথ্য নির্দিষ্ট করে। ম্যানিফেস্ট ক্রোমকে আপনার অ্যাপ, কীভাবে এটি লঞ্চ করতে হয় এবং যেকোন অতিরিক্ত অনুমতির প্রয়োজন সম্পর্কে বলে।
- ইভেন্ট পৃষ্ঠা , যাকে ব্যাকগ্রাউন্ড স্ক্রিপ্টও বলা হয়, অ্যাপের জীবনচক্র পরিচালনার জন্য দায়ী। ব্যাকগ্রাউন্ড স্ক্রিপ্ট হল যেখানে আপনি নির্দিষ্ট অ্যাপ ইভেন্টের জন্য শ্রোতাদের নিবন্ধন করেন যেমন অ্যাপের উইন্ডো চালু করা এবং বন্ধ করা।
- সমস্ত কোড ফাইল ক্রোম অ্যাপে প্যাকেজ করা আবশ্যক। এর মধ্যে HTML, CSS, JS এবং নেটিভ ক্লায়েন্ট মডিউল রয়েছে।
- অ্যাপ আইকন সহ সম্পদগুলিও Chrome অ্যাপে প্যাকেজ করা উচিত৷
একটি ম্যানিফেস্ট তৈরি করুন
আপনার প্রিয় কোড/টেক্সট এডিটর খুলুন এবং manifest.json নামে নিম্নলিখিত ফাইলটি তৈরি করুন:
{
"manifest_version": 2,
"name": "Codelab",
"version": "1",
"icons": {
"128": "icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "28"
}
লক্ষ্য করুন কিভাবে এই ম্যানিফেস্টটি background.js নামে একটি ব্যাকগ্রাউন্ড স্ক্রিপ্ট বর্ণনা করে। আপনি পরবর্তী ফাইলটি তৈরি করবেন।
"background": {
"scripts": ["background.js"]
}
আমরা এই ধাপে পরে আপনাকে একটি অ্যাপ আইকন সরবরাহ করব:
"icons": {
"128": "icon_128.png"
},
একটি পটভূমি স্ক্রিপ্ট তৈরি করুন
নিম্নলিখিত ফাইল তৈরি করুন এবং এটি background.js হিসাবে সংরক্ষণ করুন:
/**
* Listens for the app launching then creates the window
*
* @see /apps/app.window.html
*/
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
এই ব্যাকগ্রাউন্ড স্ক্রিপ্টটি কেবলমাত্র অ্যাপ্লিকেশনটির জন্য chrome.app.runtime.on লঞ্চ করা লঞ্চ ইভেন্টের জন্য অপেক্ষা করে এবং কলব্যাক ফাংশনটি চালায়:
chrome.app.runtime.onLaunched.addListener(function() {
//...
});
ক্রোম অ্যাপ চালু হলে, chrome.app.window.create() উৎস হিসেবে একটি মৌলিক HTML পৃষ্ঠা ( index.html ) ব্যবহার করে একটি নতুন উইন্ডো তৈরি করবে৷ আপনি পরবর্তী ধাপে HTML ভিউ তৈরি করবেন।
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
ব্যাকগ্রাউন্ড স্ক্রিপ্টে অতিরিক্ত শ্রোতা, উইন্ডো, পোস্ট বার্তা এবং লঞ্চ ডেটা থাকতে পারে—যা সবই অ্যাপ পরিচালনা করতে ইভেন্ট পৃষ্ঠা ব্যবহার করে।
একটি HTML ভিউ তৈরি করুন
স্ক্রিনে একটি "হ্যালো ওয়ার্ল্ড" বার্তা প্রদর্শন করতে একটি সাধারণ ওয়েব পৃষ্ঠা তৈরি করুন এবং এটিকে index.html হিসাবে সংরক্ষণ করুন:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, let's code!</h1>
</body>
</html>
অন্য যেকোন ওয়েব পৃষ্ঠার মতই, এই HTML ফাইলের মধ্যে আপনি অতিরিক্ত প্যাকেজ করা JavaScript, CSS বা সম্পদ অন্তর্ভুক্ত করতে পারেন।
একটি অ্যাপ আইকন যোগ করুন
ডান-ক্লিক করুন এবং এই 128x128 ইমেজটিকে আপনার প্রোজেক্ট ফোল্ডারে _icon 128.png হিসাবে সংরক্ষণ করুন :
আপনি এই PNG কে আমাদের অ্যাপ্লিকেশনের আইকন হিসাবে ব্যবহার করবেন যা ব্যবহারকারীরা লঞ্চ মেনুতে দেখতে পাবেন।
নিশ্চিত করুন যে আপনি আপনার সমস্ত ফাইল তৈরি করেছেন
আপনার এখন আপনার প্রকল্প ফোল্ডারে এই 4 টি ফাইল থাকা উচিত:
ডেভেলপার মোডে একটি Chrome অ্যাপ ইনস্টল করুন
আপনার অ্যাপকে ডিস্ট্রিবিউশন প্যাকেজ হিসেবে চূড়ান্ত না করেই দ্রুত লোড এবং লঞ্চ করতে ডেভেলপার মোড ব্যবহার করুন।
- Chrome omnibox থেকে chrome://extensions অ্যাক্সেস করুন।
- বিকাশকারী মোড চেক বক্সটি চেক করুন।
- লোড আনপ্যাক করা এক্সটেনশন ক্লিক করুন।
- ফাইল পিকার ডায়ালগ ব্যবহার করে, আপনার অ্যাপের প্রোজেক্ট ফোল্ডারে নেভিগেট করুন এবং আপনার অ্যাপ লোড করতে এটি নির্বাচন করুন।
আপনার সমাপ্ত হ্যালো ওয়ার্ল্ড অ্যাপ চালু করুন
একটি আনপ্যাকড এক্সটেনশন হিসাবে আপনার প্রকল্প লোড করার পরে, আপনার ইনস্টল করা অ্যাপ্লিকেশনের পাশে লঞ্চ ক্লিক করুন৷ একটি নতুন স্বতন্ত্র উইন্ডো খোলা উচিত:
অভিনন্দন, আপনি এইমাত্র একটি নতুন Chrome অ্যাপ তৈরি করেছেন!
Chrome DevTools দিয়ে একটি Chrome অ্যাপ ডিবাগ করুন
আপনি নিয়মিত ওয়েব পৃষ্ঠার মতোই আপনার অ্যাপ পরিদর্শন, ডিবাগ, অডিট এবং পরীক্ষা করতে Chrome বিকাশকারী সরঞ্জামগুলি ব্যবহার করতে পারেন৷
আপনি আপনার কোডে পরিবর্তন করার পরে এবং আপনার অ্যাপটি পুনরায় লোড করার পরে ( রাইট-ক্লিক > রিলোড অ্যাপ ), কোনো ত্রুটির জন্য DevTools কনসোল চেক করুন ( ডান-ক্লিক > উপাদান পরিদর্শন করুন )।
(আমরা অ্যালার্ম সহ ধাপ 3- এ পরিদর্শন পটভূমি পৃষ্ঠা বিকল্পটি কভার করব।)
DevTools JavaScript কনসোলে আপনার অ্যাপে উপলব্ধ একই API-এ অ্যাক্সেস আছে। আপনার কোডে এটি যোগ করার আগে আপনি সহজেই একটি API কল পরীক্ষা করতে পারেন:
আরও তথ্যের জন্য
এই ধাপে প্রবর্তিত কিছু API সম্পর্কে আরও বিস্তারিত তথ্যের জন্য, পড়ুন:
- ম্যানিফেস্ট ফাইল ফরম্যাট ↑
- ম্যানিফেস্ট - আইকন ↑
- ক্রোম অ্যাপ লাইফসাইকেল ↑
- chrome.app.runtime.on লঞ্চ হয়েছে ↑
- chrome.app.window.create() ↑
পরবর্তী ধাপে চালিয়ে যেতে প্রস্তুত? ধাপ 2 এ যান - একটি বিদ্যমান ওয়েব অ্যাপ আমদানি করুন »
,এই ধাপে, আপনি শিখবেন:
- ম্যানিফেস্ট ফাইল এবং ব্যাকগ্রাউন্ড স্ক্রিপ্ট সহ একটি Chrome অ্যাপের মৌলিক বিল্ডিং ব্লক।
- কিভাবে একটি Chrome অ্যাপ ইনস্টল, রান এবং ডিবাগ করবেন।
এই ধাপটি সম্পূর্ণ করার আনুমানিক সময়: 10 মিনিট।
এই ধাপে আপনি যা সম্পূর্ণ করবেন তার পূর্বরূপ দেখতে, এই পৃষ্ঠার নীচে ঝাঁপ দাও ↓ ।
Chrome Apps এর সাথে পরিচিত হন
একটি Chrome অ্যাপে এই উপাদানগুলি রয়েছে:
- ম্যানিফেস্ট আপনার অ্যাপের মেটা তথ্য নির্দিষ্ট করে। ম্যানিফেস্ট ক্রোমকে আপনার অ্যাপ, কীভাবে এটি লঞ্চ করতে হয় এবং যেকোন অতিরিক্ত অনুমতির প্রয়োজন সম্পর্কে বলে।
- ইভেন্ট পৃষ্ঠা , যাকে ব্যাকগ্রাউন্ড স্ক্রিপ্টও বলা হয়, অ্যাপের জীবনচক্র পরিচালনার জন্য দায়ী। ব্যাকগ্রাউন্ড স্ক্রিপ্ট হল যেখানে আপনি নির্দিষ্ট অ্যাপ ইভেন্টের জন্য শ্রোতাদের নিবন্ধন করেন যেমন অ্যাপের উইন্ডো চালু করা এবং বন্ধ করা।
- সমস্ত কোড ফাইল ক্রোম অ্যাপে প্যাকেজ করা আবশ্যক। এর মধ্যে HTML, CSS, JS এবং নেটিভ ক্লায়েন্ট মডিউল রয়েছে।
- অ্যাপ আইকন সহ সম্পদগুলিও Chrome অ্যাপে প্যাকেজ করা উচিত৷
একটি ম্যানিফেস্ট তৈরি করুন
আপনার প্রিয় কোড/টেক্সট এডিটর খুলুন এবং manifest.json নামে নিম্নলিখিত ফাইলটি তৈরি করুন:
{
"manifest_version": 2,
"name": "Codelab",
"version": "1",
"icons": {
"128": "icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "28"
}
লক্ষ্য করুন কিভাবে এই ম্যানিফেস্টটি background.js নামে একটি ব্যাকগ্রাউন্ড স্ক্রিপ্ট বর্ণনা করে। আপনি পরবর্তী ফাইলটি তৈরি করবেন।
"background": {
"scripts": ["background.js"]
}
আমরা এই ধাপে পরে আপনাকে একটি অ্যাপ আইকন সরবরাহ করব:
"icons": {
"128": "icon_128.png"
},
একটি পটভূমি স্ক্রিপ্ট তৈরি করুন
নিম্নলিখিত ফাইল তৈরি করুন এবং এটি background.js হিসাবে সংরক্ষণ করুন:
/**
* Listens for the app launching then creates the window
*
* @see /apps/app.window.html
*/
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
এই ব্যাকগ্রাউন্ড স্ক্রিপ্টটি কেবলমাত্র অ্যাপ্লিকেশনটির জন্য chrome.app.runtime.on লঞ্চ করা লঞ্চ ইভেন্টের জন্য অপেক্ষা করে এবং কলব্যাক ফাংশনটি চালায়:
chrome.app.runtime.onLaunched.addListener(function() {
//...
});
ক্রোম অ্যাপ চালু হলে, chrome.app.window.create() উৎস হিসেবে একটি মৌলিক HTML পৃষ্ঠা ( index.html ) ব্যবহার করে একটি নতুন উইন্ডো তৈরি করবে৷ আপনি পরবর্তী ধাপে HTML ভিউ তৈরি করবেন।
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
ব্যাকগ্রাউন্ড স্ক্রিপ্টে অতিরিক্ত শ্রোতা, উইন্ডো, পোস্ট বার্তা এবং লঞ্চ ডেটা থাকতে পারে—যা সবই অ্যাপ পরিচালনা করতে ইভেন্ট পৃষ্ঠা ব্যবহার করে।
একটি HTML ভিউ তৈরি করুন
স্ক্রিনে একটি "হ্যালো ওয়ার্ল্ড" বার্তা প্রদর্শন করতে একটি সাধারণ ওয়েব পৃষ্ঠা তৈরি করুন এবং এটিকে index.html হিসাবে সংরক্ষণ করুন:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, let's code!</h1>
</body>
</html>
অন্য যেকোন ওয়েব পৃষ্ঠার মতই, এই HTML ফাইলের মধ্যে আপনি অতিরিক্ত প্যাকেজ করা JavaScript, CSS বা সম্পদ অন্তর্ভুক্ত করতে পারেন।
একটি অ্যাপ আইকন যোগ করুন
ডান-ক্লিক করুন এবং এই 128x128 ইমেজটিকে আপনার প্রোজেক্ট ফোল্ডারে _icon 128.png হিসাবে সংরক্ষণ করুন :
আপনি এই PNG কে আমাদের অ্যাপ্লিকেশনের আইকন হিসাবে ব্যবহার করবেন যা ব্যবহারকারীরা লঞ্চ মেনুতে দেখতে পাবেন।
নিশ্চিত করুন যে আপনি আপনার সমস্ত ফাইল তৈরি করেছেন
আপনার এখন আপনার প্রকল্প ফোল্ডারে এই 4 টি ফাইল থাকা উচিত:
ডেভেলপার মোডে একটি Chrome অ্যাপ ইনস্টল করুন
আপনার অ্যাপকে ডিস্ট্রিবিউশন প্যাকেজ হিসেবে চূড়ান্ত না করেই দ্রুত লোড এবং লঞ্চ করতে ডেভেলপার মোড ব্যবহার করুন।
- Chrome omnibox থেকে chrome://extensions অ্যাক্সেস করুন।
- বিকাশকারী মোড চেক বক্সটি চেক করুন।
- লোড আনপ্যাক করা এক্সটেনশন ক্লিক করুন।
- ফাইল পিকার ডায়ালগ ব্যবহার করে, আপনার অ্যাপের প্রোজেক্ট ফোল্ডারে নেভিগেট করুন এবং আপনার অ্যাপ লোড করতে এটি নির্বাচন করুন।
আপনার সমাপ্ত হ্যালো ওয়ার্ল্ড অ্যাপ চালু করুন
একটি আনপ্যাকড এক্সটেনশন হিসাবে আপনার প্রকল্প লোড করার পরে, আপনার ইনস্টল করা অ্যাপ্লিকেশনের পাশে লঞ্চ ক্লিক করুন৷ একটি নতুন স্বতন্ত্র উইন্ডো খোলা উচিত:
অভিনন্দন, আপনি এইমাত্র একটি নতুন Chrome অ্যাপ তৈরি করেছেন!
Chrome DevTools দিয়ে একটি Chrome অ্যাপ ডিবাগ করুন
আপনি নিয়মিত ওয়েব পৃষ্ঠার মতোই আপনার অ্যাপ পরিদর্শন, ডিবাগ, অডিট এবং পরীক্ষা করতে Chrome বিকাশকারী সরঞ্জামগুলি ব্যবহার করতে পারেন৷
আপনি আপনার কোডে পরিবর্তন করার পরে এবং আপনার অ্যাপটি পুনরায় লোড করার পরে ( রাইট-ক্লিক > রিলোড অ্যাপ ), কোনো ত্রুটির জন্য DevTools কনসোল চেক করুন ( ডান-ক্লিক > উপাদান পরিদর্শন করুন )।
(আমরা অ্যালার্ম সহ ধাপ 3- এ পরিদর্শন পটভূমি পৃষ্ঠা বিকল্পটি কভার করব।)
DevTools JavaScript কনসোলে আপনার অ্যাপে উপলব্ধ একই API-এ অ্যাক্সেস আছে। আপনার কোডে এটি যোগ করার আগে আপনি সহজেই একটি API কল পরীক্ষা করতে পারেন:
আরও তথ্যের জন্য
এই ধাপে প্রবর্তিত কিছু API সম্পর্কে আরও বিস্তারিত তথ্যের জন্য, পড়ুন:
- ম্যানিফেস্ট ফাইল ফরম্যাট ↑
- ম্যানিফেস্ট - আইকন ↑
- ক্রোম অ্যাপ লাইফসাইকেল ↑
- chrome.app.runtime.on লঞ্চ হয়েছে ↑
- chrome.app.window.create() ↑
পরবর্তী ধাপে চালিয়ে যেতে প্রস্তুত? ধাপ 2 এ যান - একটি বিদ্যমান ওয়েব অ্যাপ আমদানি করুন »