ক্লাউড ফায়ারস্টোর ওয়েব কোডল্যাব

1. সংক্ষিপ্ত বিবরণ

লক্ষ্য

এই কোডল্যাবে, আপনি ক্লাউড ফায়ারস্টোর দ্বারা চালিত একটি রেস্তোরাঁ সুপারিশ ওয়েব অ্যাপ তৈরি করবেন।

img5.png সম্পর্কে

তুমি কি শিখবে

  • একটি ওয়েব অ্যাপ থেকে ক্লাউড ফায়ারস্টোরে ডেটা পড়ুন এবং লিখুন
  • ক্লাউড ফায়ারস্টোর ডেটার পরিবর্তনগুলি রিয়েল টাইমে শুনুন
  • ক্লাউড ফায়ারস্টোর ডেটা সুরক্ষিত করতে ফায়ারবেস প্রমাণীকরণ এবং সুরক্ষা নিয়ম ব্যবহার করুন
  • জটিল ক্লাউড ফায়ারস্টোর কোয়েরি লিখুন

তোমার যা লাগবে

এই কোডল্যাবটি শুরু করার আগে, নিশ্চিত করুন যে আপনি ইনস্টল করেছেন:

  • npm যা সাধারণত Node.js এর সাথে আসে - Node 16+ সুপারিশ করা হয়
  • আপনার পছন্দের IDE/টেক্সট এডিটর, যেমন WebStorm , VS Code , অথবা Sublime

২. একটি ফায়ারবেস প্রকল্প তৈরি এবং সেট আপ করুন

একটি ফায়ারবেস প্রকল্প তৈরি করুন

  1. আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেস কনসোলে সাইন ইন করুন।
  2. একটি নতুন প্রকল্প তৈরি করতে বোতামটি ক্লিক করুন, এবং তারপর একটি প্রকল্পের নাম লিখুন (উদাহরণস্বরূপ, FriendlyEats )।
  3. চালিয়ে যান ক্লিক করুন।
  4. যদি অনুরোধ করা হয়, তাহলে Firebase শর্তাবলী পর্যালোচনা করুন এবং গ্রহণ করুন, এবং তারপর Continue এ ক্লিক করুন।
  5. (ঐচ্ছিক) Firebase কনসোলে ("Gemini in Firebase" নামে পরিচিত) AI সহায়তা সক্ষম করুন।
  6. এই কোডল্যাবের জন্য, আপনার গুগল অ্যানালিটিক্সের প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স বিকল্পটি টগল করে বন্ধ করে দিন ।
  7. Create project এ ক্লিক করুন, আপনার province করার জন্য অপেক্ষা করুন, এবং তারপর Continue এ ক্লিক করুন।

Firebase পণ্য সেট আপ করুন

আমরা যে অ্যাপ্লিকেশনটি তৈরি করতে যাচ্ছি তা ওয়েবে উপলব্ধ কয়েকটি Firebase পরিষেবা ব্যবহার করে:

  • আপনার ব্যবহারকারীদের সহজেই শনাক্ত করার জন্য Firebase প্রমাণীকরণ
  • ক্লাউড ফায়ারস্টোর ক্লাউডে স্ট্রাকচার্ড ডেটা সংরক্ষণ করে এবং ডেটা আপডেট হলে তাৎক্ষণিক বিজ্ঞপ্তি পায়
  • আপনার স্ট্যাটিক সম্পদ হোস্ট এবং পরিবেশন করার জন্য ফায়ারবেস হোস্টিং

এই নির্দিষ্ট কোডল্যাবের জন্য, আমরা ইতিমধ্যেই Firebase Hosting কনফিগার করেছি। তবে, Firebase Auth এবং Cloud Firestore-এর জন্য, আমরা আপনাকে Firebase কনসোল ব্যবহার করে পরিষেবাগুলির কনফিগারেশন এবং সক্ষমকরণ সম্পর্কে বলব।

বেনামী প্রমাণীকরণ সক্ষম করুন

যদিও এই কোডল্যাবের মূল বিষয়বস্তু প্রমাণীকরণ নয়, তবুও আমাদের অ্যাপে কিছু ধরণের প্রমাণীকরণ থাকা গুরুত্বপূর্ণ। আমরা অ্যানোনিমাস লগইন ব্যবহার করব - যার অর্থ ব্যবহারকারীকে কোনও অনুরোধ ছাড়াই নীরবে সাইন ইন করা হবে।

আপনাকে বেনামী লগইন সক্রিয় করতে হবে।

  1. ফায়ারবেস কনসোলে, বাম দিকের নেভিগে বিল্ড বিভাগটি সনাক্ত করুন।
  2. Authentication এ ক্লিক করুন, তারপর Sign-in method ট্যাবে ক্লিক করুন (অথবা সরাসরি সেখানে যেতে এখানে ক্লিক করুন )।
  3. বেনামী সাইন-ইন প্রদানকারী সক্ষম করুন, তারপর সংরক্ষণ করুন এ ক্লিক করুন।

img7.png সম্পর্কে

এটি অ্যাপ্লিকেশনটিকে আপনার ব্যবহারকারীদের ওয়েব অ্যাপ অ্যাক্সেস করার সময় নীরবে সাইন ইন করার অনুমতি দেবে। আরও জানতে Anonymous Authentication ডকুমেন্টেশনটি পড়তে দ্বিধা করবেন না।

ক্লাউড ফায়ারস্টোর সক্ষম করুন

অ্যাপটি রেস্তোরাঁর তথ্য এবং রেটিং সংরক্ষণ এবং গ্রহণের জন্য ক্লাউড ফায়ারস্টোর ব্যবহার করে।

আপনাকে ক্লাউড ফায়ারস্টোর সক্ষম করতে হবে। ফায়ারবেস কনসোলের বিল্ড বিভাগে, ফায়ারস্টোর ডেটাবেস ক্লিক করুন। ক্লাউড ফায়ারস্টোর প্যানে Create database এ ক্লিক করুন।

ক্লাউড ফায়ারস্টোরে ডেটা অ্যাক্সেস নিরাপত্তা নিয়ম দ্বারা নিয়ন্ত্রিত হয়। আমরা এই কোডল্যাবে পরে নিয়ম সম্পর্কে আরও আলোচনা করব তবে প্রথমে আমাদের ডেটাতে কিছু মৌলিক নিয়ম সেট করতে হবে শুরু করার জন্য। ফায়ারবেস কনসোলের নিয়ম ট্যাবে নিম্নলিখিত নিয়মগুলি যোগ করুন এবং তারপর প্রকাশ করুন ক্লিক করুন।

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data)
      && (key in request.resource.data)
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys())
                    && unchanged("name");

      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

আমরা কোডল্যাবে পরে এই নিয়মগুলি এবং সেগুলি কীভাবে কাজ করে তা নিয়ে আলোচনা করব।

৩. নমুনা কোডটি পান

কমান্ড লাইন থেকে GitHub রিপোজিটরি ক্লোন করুন:

git clone https://github.com/firebase/friendlyeats-web

নমুনা কোডটি 📁 friendlyeats-web ডিরেক্টরিতে ক্লোন করা উচিত ছিল। এখন থেকে, এই ডিরেক্টরি থেকে আপনার সমস্ত কমান্ড চালাতে ভুলবেন না:

cd friendlyeats-web/vanilla-js

স্টার্টার অ্যাপটি আমদানি করুন

আপনার IDE (WebStorm, Atom, Sublime, Visual Studio Code...) ব্যবহার করে 📁 friendlyeats-web ডিরেক্টরিটি খুলুন বা আমদানি করুন। এই ডিরেক্টরিতে কোডল্যাবের জন্য শুরুর কোড রয়েছে যার মধ্যে একটি এখনও কার্যকরী নয় এমন রেস্তোরাঁ সুপারিশ অ্যাপ রয়েছে। আমরা এই কোডল্যাব জুড়ে এটি কার্যকর করব তাই আপনাকে শীঘ্রই সেই ডিরেক্টরিতে কোড সম্পাদনা করতে হবে।

৪. ফায়ারবেস কমান্ড লাইন ইন্টারফেস ইনস্টল করুন

ফায়ারবেস কমান্ড লাইন ইন্টারফেস (CLI) আপনাকে স্থানীয়ভাবে আপনার ওয়েব অ্যাপ পরিবেশন করতে এবং ফায়ারবেস হোস্টিংয়ে আপনার ওয়েব অ্যাপ স্থাপন করতে দেয়।

  1. নিম্নলিখিত npm কমান্ডটি চালিয়ে CLI ইনস্টল করুন: 
npm -g install firebase-tools
  1. নিম্নলিখিত কমান্ডটি চালিয়ে CLI সঠিকভাবে ইনস্টল করা হয়েছে কিনা তা যাচাই করুন: 
firebase --version

নিশ্চিত করুন যে Firebase CLI এর সংস্করণটি v7.4.0 বা তার পরবর্তী সংস্করণ।

  1. নিম্নলিখিত কমান্ডটি চালিয়ে Firebase CLI অনুমোদন করুন: 
firebase login

আপনার অ্যাপের স্থানীয় ডিরেক্টরি এবং ফাইলগুলি থেকে Firebase Hosting-এর জন্য আপনার অ্যাপের কনফিগারেশন টেনে আনার জন্য আমরা ওয়েব অ্যাপ টেমপ্লেট সেট আপ করেছি। কিন্তু এটি করার জন্য, আমাদের আপনার অ্যাপটিকে আপনার Firebase প্রকল্পের সাথে সংযুক্ত করতে হবে।

  1. নিশ্চিত করুন যে আপনার কমান্ড লাইনটি আপনার অ্যাপের স্থানীয় ডিরেক্টরিতে অ্যাক্সেস করছে।
  2. নিম্নলিখিত কমান্ডটি চালিয়ে আপনার অ্যাপটিকে আপনার ফায়ারবেস প্রকল্পের সাথে সংযুক্ত করুন: 
firebase use --add
  1. অনুরোধ করা হলে, আপনার প্রজেক্ট আইডি নির্বাচন করুন, তারপর আপনার ফায়ারবেস প্রজেক্টকে একটি উপনাম দিন।

যদি আপনার একাধিক পরিবেশ (প্রোডাকশন, স্টেজিং, ইত্যাদি) থাকে তবে একটি উপনাম কার্যকর। তবে, এই কোডল্যাবের জন্য, আসুন কেবল default উপনাম ব্যবহার করি।

  1. আপনার কমান্ড লাইনের বাকি নির্দেশাবলী অনুসরণ করুন।

৫. স্থানীয় সার্ভার চালান

আমরা আমাদের অ্যাপে কাজ শুরু করতে প্রস্তুত! আসুন স্থানীয়ভাবে আমাদের অ্যাপটি চালাই!

  1. নিম্নলিখিত Firebase CLI কমান্ডটি চালান: 
firebase emulators:start --only hosting
  1. আপনার কমান্ড লাইনে নিম্নলিখিত প্রতিক্রিয়াটি প্রদর্শিত হওয়া উচিত: 
hosting: Local server: http://localhost:5000

আমরা স্থানীয়ভাবে আমাদের অ্যাপটি পরিবেশন করার জন্য Firebase Hosting এমুলেটর ব্যবহার করছি। ওয়েব অ্যাপটি এখন http://localhost:5000 থেকে পাওয়া উচিত।

  1. http://localhost:5000 এ আপনার অ্যাপটি খুলুন।

আপনার FriendlyEats এর কপিটি দেখতে হবে যা আপনার Firebase প্রকল্পের সাথে সংযুক্ত করা হয়েছে।

অ্যাপটি স্বয়ংক্রিয়ভাবে আপনার Firebase প্রকল্পের সাথে সংযুক্ত হয়েছে এবং নীরবে আপনাকে একজন বেনামী ব্যবহারকারী হিসেবে সাইন ইন করেছে।

img2.png সম্পর্কে

৬. ক্লাউড ফায়ারস্টোরে ডেটা লিখুন

এই বিভাগে, আমরা ক্লাউড ফায়ারস্টোরে কিছু ডেটা লিখব যাতে আমরা অ্যাপের UI পূরণ করতে পারি। এটি ফায়ারবেস কনসোলের মাধ্যমে ম্যানুয়ালি করা যেতে পারে, তবে আমরা ক্লাউড ফায়ারস্টোরের একটি মৌলিক লেখা প্রদর্শনের জন্য অ্যাপেই এটি করব।

ডেটা মডেল

ফায়ারস্টোর ডেটা সংগ্রহ, নথি, ক্ষেত্র এবং উপ-সংগ্রহে বিভক্ত। আমরা প্রতিটি রেস্তোরাঁকে একটি শীর্ষ-স্তরের সংগ্রহে একটি নথি হিসাবে সংরক্ষণ করব যাকে restaurants বলা হয়।

img3.png সম্পর্কে

পরবর্তীতে, আমরা প্রতিটি পর্যালোচনা প্রতিটি রেস্তোরাঁর অধীনে ratings নামক একটি উপ-সংগ্রহে সংরক্ষণ করব।

img4.png সম্পর্কে

ফায়ারস্টোরে রেস্তোরাঁ যোগ করুন

আমাদের অ্যাপের মূল মডেল অবজেক্ট হল একটি রেস্তোরাঁ। আসুন কিছু কোড লিখি যা restaurants সংগ্রহে একটি রেস্তোরাঁ ডকুমেন্ট যোগ করে।

  1. আপনার ডাউনলোড করা ফাইলগুলি থেকে, scripts/FriendlyEats.Data.js খুলুন।
  2. FriendlyEats.prototype.addRestaurant ফাংশনটি খুঁজুন।
  3. সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

ফ্রেন্ডলিইটস.ডেটা.জেএস 

FriendlyEats.prototype.addRestaurant = function(data) {
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

উপরের কোডটি restaurants সংগ্রহে একটি নতুন ডকুমেন্ট যোগ করে। ডকুমেন্টের ডেটা একটি সাধারণ জাভাস্ক্রিপ্ট অবজেক্ট থেকে আসে। আমরা প্রথমে ক্লাউড ফায়ারস্টোর সংগ্রহের restaurants একটি রেফারেন্স পেয়ে তারপর ডেটা add করে এটি করি।

রেস্তোরাঁ যোগ করা যাক!

  1. আপনার ব্রাউজারে FriendlyEats অ্যাপে ফিরে যান এবং এটি রিফ্রেশ করুন।
  2. "মক ডেটা যোগ করুন" এ ক্লিক করুন।

অ্যাপটি স্বয়ংক্রিয়ভাবে রেস্তোরাঁর অবজেক্টের একটি র‍্যান্ডম সেট তৈরি করবে, তারপর আপনার addRestaurant ফাংশনটি কল করবে। তবে, আপনি এখনও আপনার আসল ওয়েব অ্যাপে ডেটা দেখতে পাবেন না কারণ আমাদের এখনও ডেটা পুনরুদ্ধার বাস্তবায়ন করতে হবে (কোডল্যাবের পরবর্তী অংশ)।

তবে, যদি আপনি Firebase কনসোলে Cloud Firestore ট্যাবে যান, তাহলে এখন আপনার restaurants সংগ্রহে নতুন ডকুমেন্ট দেখতে পাবেন!

img6.png সম্পর্কে

অভিনন্দন, আপনি একটি ওয়েব অ্যাপ থেকে ক্লাউড ফায়ারস্টোরে ডেটা লিখেছেন!

পরবর্তী বিভাগে, আপনি শিখবেন কিভাবে ক্লাউড ফায়ারস্টোর থেকে ডেটা পুনরুদ্ধার করবেন এবং আপনার অ্যাপে এটি প্রদর্শন করবেন।

৭. ক্লাউড ফায়ারস্টোর থেকে ডেটা প্রদর্শন করুন

এই বিভাগে, আপনি শিখবেন কিভাবে ক্লাউড ফায়ারস্টোর থেকে ডেটা পুনরুদ্ধার করবেন এবং আপনার অ্যাপে এটি প্রদর্শন করবেন। দুটি মূল ধাপ হল একটি কোয়েরি তৈরি করা এবং একটি স্ন্যাপশট লিসেনার যোগ করা। এই লিসেনারকে কোয়েরির সাথে মেলে এমন সমস্ত বিদ্যমান ডেটা সম্পর্কে অবহিত করা হবে এবং রিয়েল টাইমে আপডেট পাবেন।

প্রথমে, আসুন এমন একটি কোয়েরি তৈরি করি যা রেস্তোরাঁর ডিফল্ট, ফিল্টারবিহীন তালিকা পরিবেশন করবে।

  1. scripts/FriendlyEats.Data.js ফাইলটিতে ফিরে যান।
  2. FriendlyEats.prototype.getAllRestaurants ফাংশনটি খুঁজুন।
  3. সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

ফ্রেন্ডলিইটস.ডেটা.জেএস 

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

উপরের কোডে, আমরা একটি কোয়েরি তৈরি করি যা restaurants নামক শীর্ষ-স্তরের সংগ্রহ থেকে ৫০টি পর্যন্ত রেস্তোরাঁ পুনরুদ্ধার করবে, যেগুলিকে গড় রেটিং অনুসারে সাজানো হয়েছে (বর্তমানে সবগুলি শূন্য)। এই কোয়েরিটি ঘোষণা করার পরে, আমরা এটি getDocumentsInQuery() পদ্ধতিতে পাস করি যা ডেটা লোড এবং রেন্ডার করার জন্য দায়ী।

আমরা একটি স্ন্যাপশট লিসেনার যোগ করে এটি করব।

  1. scripts/FriendlyEats.Data.js ফাইলটিতে ফিরে যান।
  2. FriendlyEats.prototype.getDocumentsInQuery ফাংশনটি খুঁজুন।
  3. সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

ফ্রেন্ডলিইটস.ডেটা.জেএস 

FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".

    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        renderer.remove(change.doc);
      } else {
        renderer.display(change.doc);
      }
    });
  });
};

উপরের কোডে, query.onSnapshot প্রতিবার কোয়েরির ফলাফলে কোনও পরিবর্তন হলে কলব্যাক ট্রিগার করবে।

  • প্রথমবার, কলব্যাকটি কোয়েরির সম্পূর্ণ ফলাফল সেট দিয়ে ট্রিগার করা হয় - অর্থাৎ ক্লাউড ফায়ারস্টোর থেকে সম্পূর্ণ restaurants সংগ্রহ। এরপর এটি সমস্ত ব্যক্তিগত নথি renderer.display ফাংশনে প্রেরণ করে।
  • যখন একটি ডকুমেন্ট মুছে ফেলা হয়, তখন change.type এর সমান হয় removed । তাই এই ক্ষেত্রে, আমরা একটি ফাংশন কল করব যা UI থেকে রেস্তোরাঁটিকে সরিয়ে দেয়।

এখন যেহেতু আমরা উভয় পদ্ধতিই বাস্তবায়ন করেছি, অ্যাপটি রিফ্রেশ করুন এবং যাচাই করুন যে Firebase কনসোলে আমরা আগে যে রেস্তোরাঁগুলি দেখেছিলাম সেগুলি এখন অ্যাপে দৃশ্যমান। আপনি যদি এই বিভাগটি সফলভাবে সম্পন্ন করেন, তাহলে আপনার অ্যাপটি এখন ক্লাউড ফায়ারস্টোরের মাধ্যমে ডেটা পড়ছে এবং লিখছে!

আপনার রেস্তোরাঁর তালিকা পরিবর্তনের সাথে সাথে, এই শ্রোতা স্বয়ংক্রিয়ভাবে আপডেট হতে থাকবে। Firebase কনসোলে গিয়ে ম্যানুয়ালি একটি রেস্তোরাঁ মুছে ফেলার চেষ্টা করুন অথবা এর নাম পরিবর্তন করুন - আপনি অবিলম্বে আপনার সাইটে পরিবর্তনগুলি দেখাতে দেখতে পাবেন!

img5.png সম্পর্কে

৮. ডেটা পান ()

এখন পর্যন্ত, আমরা দেখিয়েছি কিভাবে onSnapshot ব্যবহার করে রিয়েল টাইমে আপডেটগুলি পুনরুদ্ধার করতে হয়; তবে, আমরা সবসময় এটি চাই না। কখনও কখনও কেবল একবার ডেটা আনাই বেশি যুক্তিসঙ্গত।

আমরা এমন একটি পদ্ধতি বাস্তবায়ন করতে চাই যা ব্যবহারকারী যখন আপনার অ্যাপের একটি নির্দিষ্ট রেস্তোরাঁয় ক্লিক করেন তখনই চালু হয়।

  1. আপনার ফাইল scripts/FriendlyEats.Data.js এ ফিরে যান।
  2. FriendlyEats.prototype.getRestaurant ফাংশনটি খুঁজুন।
  3. সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

ফ্রেন্ডলিইটস.ডেটা.জেএস 

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

এই পদ্ধতিটি প্রয়োগ করার পরে, আপনি প্রতিটি রেস্তোরাঁর জন্য পৃষ্ঠাগুলি দেখতে সক্ষম হবেন। তালিকার একটি রেস্তোরাঁয় ক্লিক করুন এবং আপনি রেস্তোরাঁর বিবরণ পৃষ্ঠাটি দেখতে পাবেন:

img1.png সম্পর্কে

আপাতত, আপনি রেটিং যোগ করতে পারবেন না কারণ আমাদের কোডল্যাবে পরে রেটিং যোগ করার পদ্ধতিটি বাস্তবায়ন করতে হবে।

9. ডেটা বাছাই এবং ফিল্টার করুন

বর্তমানে, আমাদের অ্যাপটি রেস্তোরাঁর একটি তালিকা প্রদর্শন করে, কিন্তু ব্যবহারকারীর চাহিদার উপর ভিত্তি করে ফিল্টার করার কোনও উপায় নেই। এই বিভাগে, আপনি ফিল্টারিং সক্ষম করতে ক্লাউড ফায়ারস্টোরের উন্নত কোয়েরি ব্যবহার করবেন।

সকল Dim Sum রেস্তোরাঁ আনার জন্য একটি সহজ প্রশ্নের উদাহরণ এখানে দেওয়া হল: 

var filteredQuery = query.where('category', '==', 'Dim Sum')

এর নাম থেকেই বোঝা যায়, where() পদ্ধতিটি আমাদের কোয়েরি ডাউনলোড করতে বাধ্য করবে শুধুমাত্র সেই সংগ্রহের সদস্যদের জন্য যাদের ফিল্ডগুলি আমাদের নির্ধারিত বিধিনিষেধ পূরণ করে। এই ক্ষেত্রে, এটি শুধুমাত্র সেই রেস্তোরাঁগুলি ডাউনলোড করবে যেখানে category Dim Sum ।

আমাদের অ্যাপে, ব্যবহারকারী একাধিক ফিল্টার চেইন করে নির্দিষ্ট প্রশ্ন তৈরি করতে পারেন, যেমন "সান ফ্রান্সিসকোতে পিৎজা" অথবা "লস অ্যাঞ্জেলেসে সামুদ্রিক খাবার জনপ্রিয়তার ভিত্তিতে সাজানো"।

আমরা এমন একটি পদ্ধতি তৈরি করব যা একটি কোয়েরি তৈরি করবে যা আমাদের ব্যবহারকারীদের দ্বারা নির্বাচিত একাধিক মানদণ্ডের উপর ভিত্তি করে আমাদের রেস্তোরাঁগুলিকে ফিল্টার করবে।

  1. আপনার ফাইল scripts/FriendlyEats.Data.js এ ফিরে যান।
  2. FriendlyEats.prototype.getFilteredRestaurants ফাংশনটি খুঁজুন।
  3. সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

ফ্রেন্ডলিইটস.ডেটা.জেএস 

FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) {
  var query = firebase.firestore().collection('restaurants');

  if (filters.category !== 'Any') {
    query = query.where('category', '==', filters.category);
  }

  if (filters.city !== 'Any') {
    query = query.where('city', '==', filters.city);
  }

  if (filters.price !== 'Any') {
    query = query.where('price', '==', filters.price.length);
  }

  if (filters.sort === 'Rating') {
    query = query.orderBy('avgRating', 'desc');
  } else if (filters.sort === 'Reviews') {
    query = query.orderBy('numRatings', 'desc');
  }

  this.getDocumentsInQuery(query, renderer);
};

উপরের কোডটিতে একাধিক where filters এবং একটি একক orderBy clause যোগ করা হয়েছে যাতে ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে একটি যৌগিক কোয়েরি তৈরি করা যায়। আমাদের কোয়েরি এখন শুধুমাত্র সেই রেস্তোরাঁগুলি ফেরত দেবে যা ব্যবহারকারীর প্রয়োজনীয়তার সাথে মেলে।

আপনার ব্রাউজারে FriendlyEats অ্যাপটি রিফ্রেশ করুন, তারপর যাচাই করুন যে আপনি মূল্য, শহর এবং বিভাগ অনুসারে ফিল্টার করতে পারেন। পরীক্ষা করার সময়, আপনি আপনার ব্রাউজারের জাভাস্ক্রিপ্ট কনসোলে এইরকম ত্রুটি দেখতে পাবেন: 

The query requires an index. You can create it here: https://console.firebase.google.com/project/project-id/database/firestore/indexes?create_composite=...

এই ত্রুটিগুলি হল কারণ ক্লাউড ফায়ারস্টোরের বেশিরভাগ যৌগিক প্রশ্নের জন্য সূচকের প্রয়োজন হয়। প্রশ্নের জন্য সূচকের প্রয়োজন ক্লাউড ফায়ারস্টোরকে দ্রুত স্কেলে রাখে।

ত্রুটি বার্তা থেকে লিঙ্কটি খোলার ফলে Firebase কনসোলে সঠিক প্যারামিটার পূরণ করে স্বয়ংক্রিয়ভাবে সূচক তৈরির UI খুলবে। পরবর্তী বিভাগে, আমরা এই অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় সূচকগুলি লিখব এবং স্থাপন করব।

১০. সূচক স্থাপন করুন

যদি আমরা আমাদের অ্যাপের প্রতিটি পথ অন্বেষণ করতে না চাই এবং প্রতিটি সূচক তৈরির লিঙ্ক অনুসরণ করতে না চাই, তাহলে আমরা Firebase CLI ব্যবহার করে একসাথে অনেকগুলি সূচক স্থাপন করতে পারি।

  1. আপনার অ্যাপের ডাউনলোড করা স্থানীয় ডিরেক্টরিতে, আপনি একটি firestore.indexes.json ফাইল পাবেন।

এই ফাইলটি ফিল্টারের সম্ভাব্য সকল সংমিশ্রণের জন্য প্রয়োজনীয় সকল সূচক বর্ণনা করে।

ফায়ারস্টোর.ইন্ডেক্স.জেসন 

{
 "indexes": [
   {
     "collectionGroup": "restaurants",
     "queryScope": "COLLECTION",
     "fields": [
       { "fieldPath": "city", "order": "ASCENDING" },
       { "fieldPath": "avgRating", "order": "DESCENDING" }
     ]
   },

   ...

 ]
}
  1. নিম্নলিখিত কমান্ড ব্যবহার করে এই সূচকগুলি স্থাপন করুন: 
firebase deploy --only firestore:indexes

কয়েক মিনিট পরে, আপনার সূচীগুলি লাইভ হবে এবং ত্রুটি বার্তাগুলি চলে যাবে।

১১. একটি লেনদেনে তথ্য লিখুন

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

আমাদের অ্যাপে অনেক ব্যবহারকারী থাকবে যারা একটি রেস্তোরাঁর জন্য রেটিং যোগ করতে চান, তাই আমাদের একাধিক পঠন এবং লেখার সমন্বয় করতে হবে। প্রথমে পর্যালোচনাটি জমা দিতে হবে, তারপর রেস্তোরাঁর রেটিং count এবং average rating আপডেট করতে হবে। যদি এর মধ্যে একটি ব্যর্থ হয় কিন্তু অন্যটি না হয়, তাহলে আমরা একটি অসঙ্গত অবস্থায় পড়ে যাব যেখানে আমাদের ডাটাবেসের এক অংশের ডেটা অন্য অংশের ডেটার সাথে মেলে না।

সৌভাগ্যবশত, ক্লাউড ফায়ারস্টোর লেনদেন কার্যকারিতা প্রদান করে যা আমাদেরকে একটি একক পারমাণবিক অপারেশনে একাধিক পঠন এবং লেখা সম্পাদন করতে দেয়, যা নিশ্চিত করে যে আমাদের ডেটা সামঞ্জস্যপূর্ণ থাকে।

  1. আপনার ফাইল scripts/FriendlyEats.Data.js এ ফিরে যান।
  2. FriendlyEats.prototype.addRating ফাংশনটি খুঁজুন।
  3. সম্পূর্ণ ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

ফ্রেন্ডলিইটস.ডেটা.জেএস 

FriendlyEats.prototype.addRating = function(restaurantID, rating) {
  var collection = firebase.firestore().collection('restaurants');
  var document = collection.doc(restaurantID);
  var newRatingDocument = document.collection('ratings').doc();

  return firebase.firestore().runTransaction(function(transaction) {
    return transaction.get(document).then(function(doc) {
      var data = doc.data();

      var newAverage =
          (data.numRatings * data.avgRating + rating.rating) /
          (data.numRatings + 1);

      transaction.update(document, {
        numRatings: data.numRatings + 1,
        avgRating: newAverage
      });
      return transaction.set(newRatingDocument, rating);
    });
  });
};

উপরের ব্লকে, আমরা রেস্তোরাঁর ডকুমেন্টে avgRating এবং numRatings এর সাংখ্যিক মান আপডেট করার জন্য একটি লেনদেন ট্রিগার করি। একই সাথে, আমরা ratings উপ-সংগ্রহে নতুন rating যোগ করি।

১২. আপনার ডেটা সুরক্ষিত করুন

এই কোডল্যাবের শুরুতে, আমরা আমাদের অ্যাপ্লিকেশনের অ্যাক্সেস সীমাবদ্ধ করার জন্য আমাদের অ্যাপের নিরাপত্তা নিয়ম সেট করেছি।

ফায়ারস্টোর.নিয়ম 

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data)
      && (key in request.resource.data)
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys())
                    && unchanged("name");

      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

এই নিয়মগুলি অ্যাক্সেস সীমাবদ্ধ করে যাতে ক্লায়েন্টরা কেবল নিরাপদ পরিবর্তনগুলিই করতে পারে। উদাহরণস্বরূপ:

  • একটি রেস্তোরাঁর নথিতে আপডেট করলে কেবল রেটিং পরিবর্তন হতে পারে, নাম বা অন্য কোনও অপরিবর্তনীয় ডেটা নয়।
  • ব্যবহারকারীর আইডি সাইন-ইন করা ব্যবহারকারীর সাথে মিলে গেলেই কেবল রেটিং তৈরি করা যাবে, যা স্পুফিং প্রতিরোধ করে।

Firebase কনসোল ব্যবহারের বিকল্প হিসেবে, আপনি Firebase CLI ব্যবহার করে আপনার Firebase প্রজেক্টে নিয়ম স্থাপন করতে পারেন। আপনার ওয়ার্কিং ডিরেক্টরিতে থাকা firestore.rules ফাইলে ইতিমধ্যেই উপরের নিয়মগুলি রয়েছে। আপনার স্থানীয় ফাইল সিস্টেম থেকে এই নিয়মগুলি স্থাপন করতে (Firebase কনসোল ব্যবহার না করে), আপনাকে নিম্নলিখিত কমান্ডটি চালাতে হবে: 

firebase deploy --only firestore:rules

১৩. উপসংহার

এই কোডল্যাবে, আপনি ক্লাউড ফায়ারস্টোরের সাহায্যে বেসিক এবং অ্যাডভান্সড রিড এবং রাইট কীভাবে করবেন তা শিখেছেন, সেইসাথে সুরক্ষা নিয়ম ব্যবহার করে ডেটা অ্যাক্সেস কীভাবে সুরক্ষিত করবেন তাও শিখেছেন। আপনি সম্পূর্ণ সমাধানটি quickstarts-js রিপোজিটরিতে খুঁজে পেতে পারেন।

ক্লাউড ফায়ারস্টোর সম্পর্কে আরও জানতে, নিম্নলিখিত রিসোর্সগুলি দেখুন:

১৪. [ঐচ্ছিক] অ্যাপ চেকের মাধ্যমে প্রয়োগ করুন

Firebase অ্যাপ চেক আপনার অ্যাপে অবাঞ্ছিত ট্র্যাফিক যাচাই এবং প্রতিরোধ করতে সাহায্য করে সুরক্ষা প্রদান করে। এই ধাপে, আপনি reCAPTCHA Enterprise এর সাথে অ্যাপ চেক যোগ করে আপনার পরিষেবাগুলিতে অ্যাক্সেস সুরক্ষিত করবেন।

প্রথমে, আপনাকে অ্যাপ চেক এবং রিক্যাপচা সক্ষম করতে হবে।

রিক্যাপচা এন্টারপ্রাইজ সক্ষম করা হচ্ছে

  1. ক্লাউড কনসোলে, সিকিউরিটির অধীনে reCaptcha Enterprise খুঁজুন এবং নির্বাচন করুন।
  2. অনুরোধ অনুসারে পরিষেবাটি সক্রিয় করুন এবং Create Key এ ক্লিক করুন।
  3. অনুরোধ অনুসারে একটি প্রদর্শন নাম লিখুন এবং আপনার প্ল্যাটফর্মের ধরণ হিসাবে ওয়েবসাইট নির্বাচন করুন।
  4. আপনার স্থাপন করা URL গুলি ডোমেন তালিকায় যোগ করুন এবং নিশ্চিত করুন যে "চেকবক্স চ্যালেঞ্জ ব্যবহার করুন" বিকল্পটি অনির্বাচিত আছে।
  5. Create Key এ ক্লিক করুন, এবং তৈরি করা কীটি নিরাপদ রাখার জন্য কোথাও সংরক্ষণ করুন। এই ধাপে পরে আপনার এটির প্রয়োজন হবে।

অ্যাপ চেক সক্ষম করা হচ্ছে

  1. ফায়ারবেস কনসোলে, বাম প্যানেলে বিল্ড বিভাগটি সনাক্ত করুন।
  2. অ্যাপ চেক এ ক্লিক করুন, তারপর শুরু করুন বোতামে ক্লিক করুন (অথবা সরাসরি কনসোলে পুনঃনির্দেশ করুন)।
  3. Register এ ক্লিক করুন এবং অনুরোধ করা হলে আপনার reCaptcha Enterprise কী লিখুন, তারপর Save এ ক্লিক করুন।
  4. APIs View-এ, Storage নির্বাচন করুন এবং Enforce এ ক্লিক করুন। Cloud Firestore-এর ক্ষেত্রেও একই কাজ করুন।

অ্যাপ চেক এখনই কার্যকর করা উচিত! আপনার অ্যাপটি রিফ্রেশ করুন এবং একটি রেস্তোরাঁ তৈরি/দেখতে চেষ্টা করুন। আপনার ত্রুটি বার্তাটি পাওয়া উচিত: 

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

এর মানে হল অ্যাপ চেক ডিফল্টভাবে অবৈধ অনুরোধগুলিকে ব্লক করছে। এখন আপনার অ্যাপে বৈধতা যোগ করা যাক।

FriendlyEats.View.js ফাইলে যান, এবং initAppCheck ফাংশনটি আপডেট করুন এবং অ্যাপ চেক শুরু করতে আপনার reCaptcha কী যোগ করুন। 

FriendlyEats.prototype.initAppCheck = function() {
    var appCheck = firebase.appCheck();
    appCheck.activate(
    new firebase.appCheck.ReCaptchaEnterpriseProvider(
      /* reCAPTCHA Enterprise site key */
    ),
    true // Set to true to allow auto-refresh.
  );
};

appCheck ইনস্ট্যান্সটি আপনার কী সহ একটি ReCaptchaEnterpriseProvider দিয়ে শুরু করা হয় এবং isTokenAutoRefreshEnabled আপনার অ্যাপে টোকেনগুলিকে স্বয়ংক্রিয়ভাবে রিফ্রেশ করার অনুমতি দেয়।

স্থানীয় পরীক্ষা সক্ষম করতে, FriendlyEats.js ফাইলে অ্যাপটি কোথায় শুরু হয়েছে সেই বিভাগটি খুঁজুন এবং FriendlyEats.prototype.initAppCheck ফাংশনে নিম্নলিখিত লাইনটি যোগ করুন: 

if(isLocalhost) {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

এটি আপনার স্থানীয় ওয়েব অ্যাপের কনসোলে একটি ডিবাগ টোকেন লগ করবে যা এইরকম: 

App Check debug token: 8DBDF614-649D-4D22-B0A3-6D489412838B. You will need to add it to your app's App Check settings in the Firebase console for it to work.

এখন, Firebase কনসোলে অ্যাপস ভিউ অফ অ্যাপ চেক-এ যান।

ওভারফ্লো মেনুতে ক্লিক করুন এবং ডিবাগ টোকেন পরিচালনা করুন নির্বাচন করুন।

তারপর, "ডিবাগ টোকেন যোগ করুন" এ ক্লিক করুন এবং অনুরোধ অনুসারে আপনার কনসোল থেকে ডিবাগ টোকেনটি পেস্ট করুন।

অভিনন্দন! অ্যাপ চেক এখন আপনার অ্যাপে কাজ করা উচিত।