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

লক্ষ্য

এই codelab, আপনি একটি রেস্টুরেন্টে সুপারিশ ওয়েব দ্বারা চালিত অ্যাপ্লিকেশন নির্মাণ করব ক্লাউড Firestore

img5.png

আপনি যা শিখবেন

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

আপনার যা লাগবে

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

একটি Firebase প্রকল্প তৈরি করুন

  1. ইন Firebase কনসোল , প্রকল্প যোগ করুন ক্লিক করুন, তারপর Firebase প্রকল্পের FriendlyEats নাম দিন।

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

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

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

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

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

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

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

বেনামী লগইন সক্ষম করার জন্য প্রয়োজন হবে।

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

img7.png

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

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

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

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

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

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;
    }
  }
}

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

ক্লোন GitHub সংগ্রহস্থলের কম্যান্ড লাইন থেকে:

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

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

cd friendlyeats-web

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. আপনার অ্যাপ্লিকেশান খুলুন HTTP: // স্থানীয় হোস্ট: 5000

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

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

img2.png

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

তথ্য মডেল

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

img3.png

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

img4.png

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

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

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

FriendlyEats.Data.js

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

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

আসুন রেস্টুরেন্ট যোগ করি!

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

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

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

img6.png

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

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

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

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

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

FriendlyEats.Data.js

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.Data.js

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 ক্লাউড Firestore থেকে সংগ্রহ। এটা তোলে তারপর সমস্ত পৃথক নথি প্রেরণ করা renderer.display ফাংশন।
  • যখন একটি নথি মোছা হয় তখন change.type সাথে অন্যান্যকে সমতুল্য স্থির removed । সুতরাং এই ক্ষেত্রে, আমরা একটি ফাংশন কল করব যা UI থেকে রেস্তোরাঁটি সরিয়ে দেয়।

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

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

img5.png

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

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

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

FriendlyEats.Data.js

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.Data.js

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 ফিল্টার এবং একটি একক orderBy দফা একটি যৌগ ব্যবহারকারীর ইনপুট উপর ভিত্তি করে ক্যোয়ারী গড়ে তুলতে। আমাদের ক্যোয়ারী এখন কেবল সেই রেস্টুরেন্টগুলি ফিরিয়ে দেবে যা ব্যবহারকারীর প্রয়োজনীয়তার সাথে মেলে।

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

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

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

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

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

  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

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

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

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

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

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

FriendlyEats.Data.js

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 রেস্টুরেন্টে নথিতে। একই সময়ে, আমরা নতুন যোগ rating করার ratings subcollection।

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

  1. Firebase কনসোলের বিল্ড বিভাগে, Firestore ডাটাবেস এ ক্লিক করুন।
  2. (অথবা ক্লাউড Firestore বিভাগে বিধি ট্যাবে ক্লিক করুন এখানে ক্লিক করুন সরাসরি সেখানে যেতে)।
  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;
      }
    }
  }
}

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

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

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

firebase deploy --only firestore:rules

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

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