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

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

গোল

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

img5.png

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

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

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

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

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

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

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

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

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

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

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

এই নির্দিষ্ট কোডল্যাবের জন্য, আমরা ইতিমধ্যেই 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;
    }
  }
}

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

3. নমুনা কোড পান

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

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

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

cd friendlyeats-web

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

img2.png

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

এই বিভাগে, আমরা ক্লাউড ফায়ারস্টোরে কিছু ডেটা লিখব যাতে আমরা অ্যাপের 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

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

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

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

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

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

  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 থেকে রেস্তোরাঁটিকে সরিয়ে দেয়।

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

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

img5.png

8. Get() ডেটা

এ পর্যন্ত, আমরা কীভাবে ব্যবহার করবেন তা দেখিয়েছেন 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

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

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.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=...

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

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

10. সূচী স্থাপন করুন

আমরা যদি আমাদের অ্যাপের প্রতিটি পথ অন্বেষণ করতে না চাই এবং প্রতিটি সূচক তৈরির লিঙ্ক অনুসরণ করতে না চাই, তাহলে আমরা Firebase 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

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

11. একটি লেনদেনে ডেটা লিখুন

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

আমাদের অ্যাপে অনেক ব্যবহারকারী থাকবে যারা একটি রেস্তোরাঁর জন্য একটি রেটিং যোগ করতে চান, তাই আমাদের একাধিক পঠন এবং লেখার সমন্বয় করতে হবে। প্রথম পর্যালোচনা নিজেই হয়েছে জমা দিতে হবে, তারপর রেঁস্তোরার রেটিং 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।

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

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

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

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

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

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

firebase deploy --only firestore:rules

13. উপসংহার

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

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