Google is committed to advancing racial equity for Black communities. See how.
This page was translated by the Cloud Translation API.
Switch to English

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

লক্ষ্য

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

img5.png

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

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

আপনার যা দরকার

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

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

  1. ফায়ারবেস কনসোলে , প্রকল্প যুক্ত করুন ক্লিক করুন , তারপরে ফায়ারবেস প্রকল্পের নাম করুন বন্ধুত্বপূর্ণ ats

আপনার ফায়ারবেস প্রকল্পের জন্য প্রকল্প আইডি মনে রাখবেন।

  1. প্রকল্প তৈরি করুন ক্লিক করুন

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

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

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

অজ্ঞাতনামা Auth সক্ষম করুন

যদিও প্রমাণীকরণ এই কোডল্যাবের কেন্দ্রবিন্দু নয় তবে আমাদের অ্যাপ্লিকেশনটিতে কিছু প্রামাণিকতা থাকা জরুরি। আমরা বেনামে লগইন ব্যবহার করব - এর অর্থ হল যে ব্যবহারকারীকে প্ররোচিত না করে নিঃশব্দে সাইন ইন করা হবে।

আপনাকে বেনামে লগইন সক্ষম করতে হবে

  1. ফায়ারবেস কনসোলে, বাম নেভের বিকাশ বিভাগটি সনাক্ত করুন
  2. প্রমাণীকরণ ক্লিক করুন, তারপরে সাইন-ইন পদ্ধতি ট্যাবে ক্লিক করুন (বা সরাসরি সেখানে যেতে এখানে ক্লিক করুন )।
  3. বেনামে সাইন-ইন সরবরাহকারী সক্ষম করুন, তারপরে সংরক্ষণ ক্লিক করুন

img7.png

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

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

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

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

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

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      //
      // WARNING: These rules are insecure! We will replace them with
      // more secure rules later in the codelab
      //
      allow read, write: if request.auth != null;
    }
  }
}

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

কমান্ড লাইন থেকে গিটহাব সংগ্রহস্থলটি ক্লোন করুন:

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

নমুনা কোডটি 📁 friendlyeats-web ডিরেক্টরিতে ক্লোন করা উচিত ছিল, আপনার কমান্ড লাইনটি এখন থেকে এই ডিরেক্টরি থেকে চালানো হয়েছে তা নিশ্চিত করুন:

cd friendlyeats-web

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

আপনার আইডিই (ওয়েবস্টর্ম, অ্যাটম, সাব্লাইম, ভিজ্যুয়াল স্টুডিও কোড ...) ব্যবহার করে 📁 friendlyeats-web ডিরেক্টরিটি খুলুন বা আমদানি করুন। এই ডিরেক্টরিতে কোডল্যাবের জন্য প্রারম্ভিক কোড রয়েছে যা একটি এখনও-কার্যকরী রেস্তোঁরা সুপারিশ অ্যাপ্লিকেশন নিয়ে গঠিত। আমরা এই কোড্ল্যাব জুড়ে এটি কার্যকরী করব যাতে শীঘ্রই আপনাকে সেই ডিরেক্টরিতে কোড সম্পাদনা করতে হবে।

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

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

নিশ্চিত করুন যে ফায়ারবেস সিএলআই এর সংস্করণটি v7.4.0 বা তার পরে আছে।

  1. নিম্নলিখিত কমান্ডটি চালিয়ে ফায়ারবেস সিএলআইকে অনুমোদন দিন:
firebase login

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

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

আপনার একাধিক পরিবেশ (উত্পাদন, মঞ্চায়ন ইত্যাদি) থাকলে একটি উপাধি কার্যকর। যাইহোক, এই codelab জন্য, এর ঠিক উপনাম ব্যবহার করার অনুমতি default

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

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

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

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

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

আপনার ফ্রেন্ডলি ইটসের অনুলিপিটি দেখতে পাওয়া উচিত যা আপনার ফায়ারবেস প্রকল্পের সাথে সংযুক্ত রয়েছে।

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

img2.png

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

তথ্য মডেল

ফায়ার স্টোর ডেটা সংগ্রহ, দস্তাবেজ, ক্ষেত্র এবং উপক্লাকশনগুলিতে বিভক্ত। আমরা প্রতিটি রেস্তোঁরাগুলিকে একটি শীর্ষ স্তরের সংগ্রহগুলিতে একটি ডকুমেন্ট হিসাবে 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. আপনার ব্রাউজারে আপনার ফ্রেন্ডলি এটস অ্যাপ্লিকেশনটিতে ফিরে যান এবং তা সতেজ করুন।
  2. মক ডেটা যোগ করুন ক্লিক করুন

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

আপনি যদি ফায়ারবেস কনসোলের ক্লাউড ফায়ারস্টোর ট্যাবে নেভিগেট করেন তবে, আপনাকে এখন 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);
};

উপরের কোড, আমরা একটি ক্যোয়ারী যা টপ লেভেল সংগ্রহে নামে 50 রেস্তোরাঁয় আপ পুনরুদ্ধার করবে গঠন করা 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 , query.onSnapshot প্রতিবারই ক্যোয়ারির ফলাফলের পরিবর্তন হলে এর query.onSnapshot ট্রিগার করবে।

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

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

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

img5.png

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

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

  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

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

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

সমস্ত 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);
};

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

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

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

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

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

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

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

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

firestore.indexes.json

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

   ...

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

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

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

আমাদের অ্যাপ্লিকেশনটিতে এমন অনেক ব্যবহারকারী থাকবে যারা রেস্তোঁরাটির জন্য কোনও রেটিং যুক্ত করতে চান, তাই আমাদের একাধিক পাঠ্য ও লেখার সমন্বয় করতে হবে। প্রথমে পর্যালোচনাটি নিজে জমা দিতে হবে, তারপরে রেস্তোঁরাটির রেটিং 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 avgRating আপডেট করার জন্য একটি লেনদেন শুরু করি। একই সময়ে, আমরা ratings উপমঞ্চে নতুন rating যুক্ত করি।

এই কোডল্যাবের শুরুতে, আমরা যে কোনও পড়তে বা লেখার জন্য ডেটাবেসকে সম্পূর্ণ খুলতে আমাদের অ্যাপ্লিকেশনটির সুরক্ষা বিধিগুলি সেট করি। একটি সত্যিকারের অ্যাপ্লিকেশনটিতে, আমরা অযাচিত ডেটা অ্যাক্সেস বা পরিবর্তন রোধ করতে আরও অনেক সূক্ষ্ম-নিয়ন্ত্রিত বিধি সেট করতে চাই।

  1. ফায়ারবেস কনসোলের বিকাশ বিভাগে, ডাটাবেস ক্লিক করুন।
  2. ক্লাউড ফায়ারস্টোর বিভাগে বিধি বিধান ক্লিক করুন (বা সরাসরি সেখানে যেতে এখানে ক্লিক করুন )।
  3. নিম্নলিখিত নিয়মগুলির সাথে ডিফল্টগুলি প্রতিস্থাপন করুন, তারপরে প্রকাশ ক্লিক করুন

firestore.rules

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 deploy --only firestore:rules

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

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