প্রগতিশীল ওয়েব অ্যাপস: IndexedDB

1. স্বাগতম

এই ল্যাবে, আপনি IndexedDB-তে ক্লায়েন্ট ডেটা ব্যাক আপ করবেন এবং পুনরুদ্ধার করবেন। প্রোগ্রেসিভ ওয়েব অ্যাপ ওয়ার্কশপের জন্য সহচর কোডল্যাবগুলির একটি সিরিজের মধ্যে এটি তৃতীয় ৷ পূর্ববর্তী কোডল্যাবটি ওয়ার্কবক্সের সাথে কাজ করে । এই সিরিজে আরও পাঁচটি কোডল্যাব রয়েছে।

আপনি কি শিখবেন

• idb ব্যবহার করে একটি IndexedDB ডাটাবেস এবং অবজেক্ট স্টোর তৈরি করুন
• একটি বস্তুর দোকানে আইটেম যোগ করুন এবং পুনরুদ্ধার করুন

আপনি কি জানতে হবে

• জাভাস্ক্রিপ্ট এবং প্রতিশ্রুতি

আপনি কি প্রয়োজন হবে

• একটি ব্রাউজার যা IndexedDB সমর্থন করে

2. সেট আপ করুন

এই কোডল্যাবটি সম্পূর্ণ করার জন্য প্রয়োজনীয় স্টার্টার কোডটি ক্লোনিং বা ডাউনলোড করে শুরু করুন:

রেপো ক্লোন করুন

জিপ ডাউনলোড করুন

আপনি যদি রেপো ক্লোন করেন, নিশ্চিত করুন যে আপনি pwa03--indexeddb শাখায় আছেন। জিপ ফাইলটিতে সেই শাখার কোডও রয়েছে।

এই কোডবেসের জন্য Node.js 14 বা উচ্চতর প্রয়োজন। কোডটি উপলব্ধ হয়ে গেলে, আপনার প্রয়োজনীয় সমস্ত নির্ভরতা ইনস্টল করার জন্য কোডের ফোল্ডারে কমান্ড লাইন থেকে npm ci চালান। তারপর, কোডল্যাবের জন্য ডেভেলপমেন্ট সার্ভার শুরু করতে npm start চালান।

সোর্স কোডের README.md ফাইলটি সমস্ত বিতরণ করা ফাইলের জন্য একটি ব্যাখ্যা প্রদান করে। এছাড়াও, এই কোডল্যাব জুড়ে আপনি যে মূল বিদ্যমান ফাইলগুলির সাথে কাজ করবেন তা নিম্নরূপ:

কী ফাইল

• js/main.js - প্রধান অ্যাপ্লিকেশন জাভাস্ক্রিপ্ট ফাইল

3. ডাটাবেস সেট আপ করুন

একটি IndexedDB ডাটাবেস ব্যবহার করার আগে, এটি খোলা এবং সেট আপ করা প্রয়োজন। যদিও আপনি সরাসরি এটি করতে পারেন, কারণ IndexedDB প্রতিশ্রুতি বিশিষ্ট হওয়ার আগে প্রমিত ছিল, এটির কলব্যাক ভিত্তিক ইন্টারফেস ব্যবহার করা কঠিন হতে পারে। পরিবর্তে, আমরা idb ব্যবহার করব, IndexedDB এর জন্য একটি খুব ছোট প্রতিশ্রুতি মোড়ক। শুরু করতে, প্রথমে এটি js/main.js এ আমদানি করুন:

import { openDB } from 'idb';

তারপর, DOMContentLoaded ইভেন্ট শ্রোতার শীর্ষে নিম্নলিখিত সেটআপ কোড যোগ করুন:

// Set up the database
const db = await openDB('settings-store', 1, {
  upgrade(db) {
    db.createObjectStore('settings');
  },
});

ব্যাখ্যা

এখানে, settings-store নামে একটি IndexedDB ডাটাবেস তৈরি করা হয়েছে। এটির সংস্করণটি 1 এ আরম্ভ করা হয়েছে এবং settings নামক একটি অবজেক্ট স্টোরের সাথে শুরু করা হয়েছে। এটি সবচেয়ে মৌলিক ধরনের অবজেক্ট স্টোর, সাধারণ কী-মানের জোড়া, তবে প্রয়োজন অনুসারে আরও জটিল বস্তুর দোকান তৈরি করা যেতে পারে। একটি অবজেক্ট স্টোরের এই প্রারম্ভিকতা ব্যতীত, ডেটা রাখার জন্য কোথাও থাকবে না, তাই এটিকে এখানে রেখে দেওয়া কোনও টেবিল ছাড়াই ডাটাবেস তৈরি করার মতো হবে।

4. আপডেটে সম্পাদকের অবস্থা সংরক্ষণ করুন

ডাটাবেস শুরু হওয়ার সাথে সাথে, এটিতে সামগ্রী সংরক্ষণ করার সময়! সম্পাদক একটি onUpdate পদ্ধতি প্রকাশ করে যা আপনাকে যখনই সম্পাদকে সামগ্রী আপডেট করা হয় তখন কল করার জন্য একটি ফাংশন পাস করতে দেয়। এটি ট্যাপ করার এবং ডাটাবেসে পরিবর্তনগুলি যোগ করার জন্য উপযুক্ত জায়গা। এটি করতে, js/main.js এ defaultText ঘোষণার ঠিক আগে নিম্নলিখিত কোডটি যোগ করুন:

// Save content to database on edit
editor.onUpdate(async (content) => {
  await db.put('settings', content, 'content');
});

ব্যাখ্যা

db হল পূর্বে খোলা IndexedDB ডাটাবেস। put পদ্ধতিটি সেই ডাটাবেসের একটি বস্তুর দোকানে এন্ট্রি তৈরি বা আপডেট করার অনুমতি দেয়। প্রথম আর্গুমেন্ট হল ডাটাবেসের অবজেক্ট স্টোর ব্যবহার করার জন্য, দ্বিতীয় আর্গুমেন্ট হল স্টোর করার জন্য মান, এবং তৃতীয় আর্গুমেন্ট হল ভ্যালুকে সেভ করার কী যদি এটি মান থেকে পরিষ্কার না হয় (এই ক্ষেত্রে এটি এমন নয় কারণ আমাদের ডাটাবেসে নির্দিষ্ট কীগুলি অন্তর্ভুক্ত নেই)। কারণ এটি অ্যাসিঙ্ক্রোনাস, এটি async / await এ মোড়ানো।

5. লোডে রাজ্য পুনরুদ্ধার করুন

অবশেষে, ব্যবহারকারীর চলমান কাজ পুনরুদ্ধার করার জন্য, সম্পাদক লোড হওয়ার সময় এটি লোড করা প্রয়োজন। সম্পাদক একটি setContent পদ্ধতি সরবরাহ করে ঠিক এটি করার জন্য, এটির বিষয়বস্তু সেট করুন। এটি বর্তমানে defaultText এর মান নির্ধারণ করতে ব্যবহৃত হয়। পরিবর্তে ব্যবহারকারীর পূর্ববর্তী কাজ লোড করতে নিম্নলিখিতগুলির সাথে এটি আপডেট করুন:

editor.setContent((await db.get('settings', 'content')) || defaultText);

ব্যাখ্যা

defaultText এর মান এডিটর সেট করার পরিবর্তে, এটি এখন settings-store ইনডেক্সডডিবি ডাটাবেসের settings অবজেক্ট স্টোর থেকে content কী পেতে চেষ্টা করে। যদি সেই মানটি বিদ্যমান থাকে,, এটি ব্যবহৃত হয়। যদি না হয়, ডিফল্ট টেক্সট ব্যবহার করা হয়.

6. নাইট মোড স্টেট সেট করুন এবং পুনরুদ্ধার করুন

এখন যেহেতু আপনি IndexedDB এর সাথে স্বাচ্ছন্দ্য বোধ করছেন, js/main.js এর নীচে নিম্নলিখিত কোডটি যোগ করুন এবং এটি পরিবর্তন করার সময় ব্যবহারকারীর নাইট মোড পছন্দ সংরক্ষণ করতে এটি আপডেট করুন এবং নাইট মোড শুরু হলে সেই পছন্দটি লোড করুন৷

// Set up night mode toggle
const { NightMode } = await import('./app/night-mode.js');
new NightMode(
  document.querySelector('#mode'),
  async (mode) => {
    editor.setTheme(mode);
    // Save the night mode setting when changed
  },
  // Retrieve the night mode setting on initialization
);

7. অভিনন্দন!

আপনি শিখেছেন কিভাবে ইনডেক্সডডিবিতে একটি অবজেক্ট স্টোর থেকে ডেটা সংরক্ষণ এবং লোড করতে হয়।

সিরিজের পরবর্তী কোডল্যাব হচ্ছে ট্যাব থেকে টাস্কবার পর্যন্ত