একটি Next.js অ্যাপের সাথে Firebase সংহত করুন

1. আপনি শুরু করার আগে

এই কোডল্যাবে, আপনি শিখবেন কিভাবে Firebase কে Friendly Eats নামে একটি Next.js ওয়েব অ্যাপের সাথে একীভূত করতে হয়, যেটি রেস্টুরেন্ট পর্যালোচনার জন্য একটি ওয়েবসাইট।

ফ্রেন্ডলি ইটস ওয়েব অ্যাপ

সম্পূর্ণ ওয়েব অ্যাপটি দরকারী বৈশিষ্ট্যগুলি অফার করে যা দেখায় কিভাবে Firebase আপনাকে Next.js অ্যাপ তৈরি করতে সাহায্য করতে পারে। এই বৈশিষ্ট্য নিম্নলিখিত অন্তর্ভুক্ত:

  • Google এর সাথে সাইন-ইন এবং সাইন-আউট কার্যকারিতা: সম্পূর্ণ ওয়েব অ্যাপ আপনাকে Google এর সাথে সাইন ইন করতে এবং সাইন আউট করতে দেয়৷ ব্যবহারকারীর লগইন এবং অধ্যবসায় সম্পূর্ণরূপে Firebase প্রমাণীকরণের মাধ্যমে পরিচালিত হয়।
  • ছবি: সম্পূর্ণ ওয়েব অ্যাপ সাইন-ইন করা ব্যবহারকারীদের রেস্তোরাঁর ছবি আপলোড করতে দেয়। ছবি সম্পদ Firebase-এর জন্য ক্লাউড স্টোরেজে সংরক্ষণ করা হয়। Firebase JavaScript SDK আপলোড করা ছবিগুলির জন্য একটি সর্বজনীন URL প্রদান করে৷ এই সর্বজনীন URLটি তারপর ক্লাউড ফায়ারস্টোরে প্রাসঙ্গিক রেস্টুরেন্ট নথিতে সংরক্ষণ করা হয়।
  • পর্যালোচনা: সম্পূর্ণ ওয়েব অ্যাপ সাইন-ইন করা ব্যবহারকারীদের রেস্তোরাঁর রিভিউ পোস্ট করতে দেয় যেখানে একটি তারকা রেটিং এবং একটি পাঠ্য-ভিত্তিক বার্তা রয়েছে। পর্যালোচনা তথ্য ক্লাউড ফায়ারস্টোরে সংরক্ষণ করা হয়।
  • ফিল্টার: সম্পূর্ণ ওয়েব অ্যাপ সাইন-ইন করা ব্যবহারকারীদের বিভাগ, অবস্থান এবং মূল্যের উপর ভিত্তি করে রেস্তোরাঁর তালিকা ফিল্টার করতে দেয়। আপনি ব্যবহৃত বাছাই পদ্ধতি কাস্টমাইজ করতে পারেন. ক্লাউড ফায়ারস্টোর থেকে ডেটা অ্যাক্সেস করা হয় এবং ব্যবহৃত ফিল্টারের উপর ভিত্তি করে ফায়ারস্টোর কোয়েরি প্রয়োগ করা হয়।

পূর্বশর্ত

  • Next.js এবং JavaScript এর জ্ঞান

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

  • Next.js অ্যাপ রাউটার এবং সার্ভার-সাইড রেন্ডারিং সহ Firebase কীভাবে ব্যবহার করবেন।
  • ফায়ারবেসের জন্য ক্লাউড স্টোরেজে ছবিগুলিকে কীভাবে বজায় রাখা যায়।
  • ক্লাউড ফায়ারস্টোর ডাটাবেসে কীভাবে ডেটা পড়তে এবং লিখতে হয়।
  • Firebase JavaScript SDK দিয়ে Google-এর সাথে সাইন-ইন কীভাবে ব্যবহার করবেন।

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

  • গিট
  • জাভা ডেভেলপমেন্ট কিট
  • Node.js এর একটি সাম্প্রতিক স্থিতিশীল সংস্করণ
  • আপনার পছন্দের একটি ব্রাউজার, যেমন Google Chrome
  • একটি কোড এডিটর এবং টার্মিনাল সহ একটি উন্নয়ন পরিবেশ
  • আপনার ফায়ারবেস প্রকল্প তৈরি এবং পরিচালনার জন্য একটি Google অ্যাকাউন্ট
  • আপনার ফায়ারবেস প্রজেক্টকে ব্লেজ প্রাইসিং প্ল্যানে আপগ্রেড করার ক্ষমতা

2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন

এই কোডল্যাব অ্যাপের স্টার্টার কোডবেস প্রদান করে এবং Firebase CLI এর উপর নির্ভর করে।

সংগ্রহস্থল ডাউনলোড করুন

  1. আপনার টার্মিনালে, কোডল্যাবের গিটহাব রিপোজিটরি ক্লোন করুন:
    git clone https://github.com/firebase/friendlyeats-web.git
  2. GitHub সংগ্রহস্থলে একাধিক প্ল্যাটফর্মের জন্য নমুনা প্রকল্প রয়েছে। যাইহোক, এই কোডল্যাব শুধুমাত্র nextjs-start ডিরেক্টরি ব্যবহার করে। নিম্নলিখিত ডিরেক্টরি নোট নিন:
    • nextjs-start : স্টার্টার কোড থাকে যার উপর আপনি নির্মাণ করেন।
    • nextjs-end : সমাপ্ত ওয়েব অ্যাপের সমাধান কোড রয়েছে।
  3. আপনার টার্মিনালে, nextjs-start ডিরেক্টরিতে নেভিগেট করুন এবং প্রয়োজনীয় নির্ভরতাগুলি ইনস্টল করুন:
    cd friendlyeats-web/nextjs-start
npm install

Firebase CLI ইনস্টল বা আপডেট করুন

আপনি Firebase CLI ইনস্টল করেছেন এবং এটি v12.5.4 বা উচ্চতর তা যাচাই করতে নিম্নলিখিত কমান্ডটি চালান:

firebase --version
  • আপনার যদি Firebase CLI ইনস্টল করা থাকে, কিন্তু এটি v12.5.4 বা উচ্চতর না হয়, তাহলে এটি আপডেট করুন:
    npm update -g firebase-tools
  • আপনার যদি Firebase CLI ইনস্টল না থাকে, তাহলে এটি ইনস্টল করুন:
    npm install -g firebase-tools

অনুমতি ত্রুটির কারণে আপনি Firebase CLI ইনস্টল করতে না পারলে, npm ডকুমেন্টেশন দেখুন বা অন্য ইনস্টলেশন বিকল্প ব্যবহার করুন।

Firebase এ লগ ইন করুন

  1. Firebase CLI-তে লগ ইন করতে নিম্নলিখিত কমান্ডটি চালান:
    firebase login
  2. আপনি Firebase ডেটা সংগ্রহ করতে চান কিনা তার উপর নির্ভর করে, Y বা N লিখুন।
  3. আপনার ব্রাউজারে, আপনার Google অ্যাকাউন্ট নির্বাচন করুন এবং তারপরে অনুমতি দিন ক্লিক করুন।

3. আপনার Firebase প্রকল্প সেট আপ করুন৷

এই বিভাগে, আপনি একটি Firebase প্রকল্প সেট আপ করবেন এবং এটির সাথে একটি Firebase ওয়েব অ্যাপ যুক্ত করবেন। আপনি নমুনা ওয়েব অ্যাপ দ্বারা ব্যবহৃত Firebase পরিষেবাগুলিও সেট আপ করবেন৷

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

  1. ফায়ারবেস কনসোলে , প্রকল্প তৈরি করুন ক্লিক করুন।
  2. আপনার প্রজেক্টের নাম লিখুন টেক্সট বক্সে, FriendlyEats Codelab (বা আপনার পছন্দের একটি প্রকল্পের নাম) লিখুন এবং তারপর Continue এ ক্লিক করুন।
  3. এই কোডল্যাবের জন্য, আপনার Google Analytics প্রয়োজন নেই, তাই এই প্রকল্পের জন্য Google Analytics সক্ষম করুন বিকল্পটি টগল করুন।
  4. প্রকল্প তৈরি করুন ক্লিক করুন।
  5. আপনার প্রজেক্টের প্রভিশনের জন্য অপেক্ষা করুন এবং তারপর Continue এ ক্লিক করুন।
  6. আপনার ফায়ারবেস প্রকল্পে, প্রকল্প সেটিংসে যান। আপনার প্রকল্প আইডি নোট করুন কারণ আপনার এটি পরে প্রয়োজন। এই অনন্য শনাক্তকারী হল আপনার প্রকল্পটি কীভাবে চিহ্নিত করা হয় (উদাহরণস্বরূপ, Firebase CLI-তে)।

আপনার Firebase প্রকল্পে একটি ওয়েব অ্যাপ যোগ করুন

  1. আপনার ফায়ারবেস প্রজেক্টে আপনার প্রোজেক্ট ওভারভিউতে নেভিগেট করুন এবং তারপর ক্লিক করুন e41f2efdd9539c31.png ওয়েব
  2. অ্যাপ ডাকনাম টেক্সট বক্সে, একটি স্মরণীয় অ্যাপ ডাকনাম লিখুন, যেমন My Next.js app ।
  3. এছাড়াও এই অ্যাপের জন্য Firebase হোস্টিং সেট আপ করুন চেকবক্স নির্বাচন করুন।
  4. রেজিস্টার অ্যাপ > Next > Next > Continue to console এ ক্লিক করুন।

আপনার Firebase মূল্য পরিকল্পনা আপগ্রেড করুন

ওয়েব ফ্রেমওয়ার্ক ব্যবহার করার জন্য, আপনার ফায়ারবেস প্রজেক্টকে Blaze প্রাইসিং প্ল্যানে থাকতে হবে, যার মানে এটি একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে যুক্ত।

যাইহোক, মনে রাখবেন যে এই কোডল্যাবটি সম্পূর্ণ করার জন্য কোনও প্রকৃত চার্জ নেওয়া উচিত নয়।

আপনার প্রকল্পকে ব্লেজ প্ল্যানে আপগ্রেড করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. Firebase কনসোলে, আপনার প্ল্যান আপগ্রেড করতে নির্বাচন করুন।
  2. ডায়ালগে, ব্লেজ প্ল্যানটি নির্বাচন করুন এবং তারপরে একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে আপনার প্রকল্পটি সংযুক্ত করতে অন-স্ক্রীন নির্দেশাবলী অনুসরণ করুন৷
    আপনার যদি একটি ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করার প্রয়োজন হয়, তাহলে আপগ্রেড সম্পূর্ণ করতে আপনাকে Firebase কনসোলে আপগ্রেড ফ্লোতে ফিরে যেতে হবে।

Firebase কনসোলে Firebase পরিষেবাগুলি সেট আপ করুন৷

প্রমাণীকরণ সেট আপ করুন

  1. Firebase কনসোলে, প্রমাণীকরণে নেভিগেট করুন।
  2. শুরু করুন ক্লিক করুন।
  3. অতিরিক্ত প্রদানকারী কলামে, Google > সক্ষম করুন ক্লিক করুন।
  4. প্রজেক্ট টেক্সট বক্সের জন-মুখী নামের মধ্যে, একটি স্মরণীয় নাম লিখুন, যেমন My Next.js app ।
  5. প্রকল্প ড্রপ-ডাউনের জন্য সমর্থন ইমেল থেকে, আপনার ইমেল ঠিকানা নির্বাচন করুন।
  6. Save এ ক্লিক করুন।

ক্লাউড ফায়ারস্টোর সেট আপ করুন

  1. Firebase কনসোলে, Firestore- এ নেভিগেট করুন।
  2. ডেটাবেস তৈরি করুন > পরীক্ষা মোডে শুরু করুন > পরবর্তী ক্লিক করুন।
    পরে এই কোডল্যাবে, আপনি আপনার ডেটা সুরক্ষিত করতে নিরাপত্তা নিয়ম যোগ করবেন। আপনার ডাটাবেসের জন্য নিরাপত্তা বিধি যোগ না করে সর্বজনীনভাবে কোনো অ্যাপ বিতরণ বা প্রকাশ করবেন না ।
  3. ডিফল্ট অবস্থান ব্যবহার করুন বা আপনার পছন্দের একটি অবস্থান নির্বাচন করুন।
    একটি বাস্তব অ্যাপের জন্য, আপনি এমন একটি অবস্থান বেছে নিতে চান যা আপনার ব্যবহারকারীদের কাছাকাছি। মনে রাখবেন যে এই অবস্থানটি পরে পরিবর্তন করা যাবে না , এবং এটি স্বয়ংক্রিয়ভাবে আপনার ডিফল্ট ক্লাউড স্টোরেজ বাকেটের অবস্থান (পরবর্তী ধাপ) হবে।
  4. সম্পন্ন ক্লিক করুন.

ফায়ারবেসের জন্য ক্লাউড স্টোরেজ সেট আপ করুন

  1. Firebase কনসোলে, Storage- এ নেভিগেট করুন।
  2. শুরু করুন > পরীক্ষা মোডে শুরু করুন > পরবর্তী ক্লিক করুন।
    পরে এই কোডল্যাবে, আপনি আপনার ডেটা সুরক্ষিত করতে নিরাপত্তা নিয়ম যোগ করবেন। আপনার স্টোরেজ বাকেটের জন্য নিরাপত্তা বিধি যোগ না করে সর্বজনীনভাবে কোনো অ্যাপ বিতরণ বা প্রকাশ করবেন না ।
  3. আপনার বাকেটের অবস্থান ইতিমধ্যেই নির্বাচন করা উচিত (আগের ধাপে ফায়ারস্টোর সেট আপ করার কারণে)।
  4. সম্পন্ন ক্লিক করুন.

4. স্টার্টার কোডবেস পর্যালোচনা করুন

এই বিভাগে, আপনি অ্যাপের স্টার্টার কোডবেসের কয়েকটি ক্ষেত্র পর্যালোচনা করবেন যেখানে আপনি এই কোডল্যাবে কার্যকারিতা যোগ করবেন।

ফোল্ডার এবং ফাইল গঠন

নিম্নলিখিত টেবিলে অ্যাপটির ফোল্ডার এবং ফাইলের কাঠামোর একটি ওভারভিউ রয়েছে:

ফোল্ডার এবং ফাইল

বর্ণনা

src/components

ফিল্টার, শিরোনাম, রেস্তোরাঁর বিশদ বিবরণ এবং পর্যালোচনাগুলির জন্য উপাদানগুলির প্রতিক্রিয়া জানান৷

src/lib

ইউটিলিটি ফাংশন যা অগত্যা প্রতিক্রিয়া বা Next.js এর সাথে আবদ্ধ নয়

src/lib/firebase

ফায়ারবেস-নির্দিষ্ট কোড এবং ফায়ারবেস কনফিগারেশন

public

ওয়েব অ্যাপে স্ট্যাটিক সম্পদ, যেমন আইকন

src/app

Next.js অ্যাপ রাউটার দিয়ে রাউটিং

src/app/restaurant

একটি API রুট হ্যান্ডলার

package.json এবং package-lock.json

npm সহ প্রকল্প নির্ভরতা

next.config.js

Next.js-নির্দিষ্ট কনফিগারেশন (সার্ভার ক্রিয়াকলাপ সক্রিয় করা হয়েছে )

jsconfig.json

জাভাস্ক্রিপ্ট ভাষা-পরিষেবা কনফিগারেশন

সার্ভার এবং ক্লায়েন্ট উপাদান

অ্যাপটি একটি Next.js ওয়েব অ্যাপ যা অ্যাপ রাউটার ব্যবহার করে। সার্ভার রেন্ডারিং অ্যাপ জুড়ে ব্যবহৃত হয়। উদাহরণস্বরূপ, src/app/page.js ফাইলটি প্রধান পৃষ্ঠার জন্য দায়ী একটি সার্ভার উপাদান। src/components/RestaurantListings.jsx ফাইলটি একটি ক্লায়েন্ট উপাদান যা ফাইলের শুরুতে "use client" নির্দেশিকা দ্বারা চিহ্নিত করা হয়েছে।

বিবৃতি আমদানি করুন

আপনি নিম্নলিখিত মত আমদানি বিবৃতি লক্ষ্য করতে পারেন:

import RatingPicker from "@/src/components/RatingPicker.jsx";

অ্যাপটি @ চিহ্ন ব্যবহার করে আপেক্ষিক ইম্পোর্ট পাথ এড়াতে এবং পাথ উপনাম দ্বারা সম্ভব হয়েছে।

ফায়ারবেস-নির্দিষ্ট API

সমস্ত Firebase API কোড src/lib/firebase ডিরেক্টরিতে মোড়ানো থাকে। স্বতন্ত্র প্রতিক্রিয়া উপাদানগুলি সরাসরি Firebase ফাংশন আমদানি করার পরিবর্তে src/lib/firebase ডিরেক্টরি থেকে মোড়ানো ফাংশনগুলি আমদানি করে।

উপহাস তথ্য

মক রেস্টুরেন্ট এবং পর্যালোচনা ডেটা src/lib/randomData.js ফাইলে রয়েছে। সেই ফাইল থেকে ডেটা src/lib/fakeRestaurants.js ফাইলের কোডে একত্রিত করা হয়।

5. ফায়ারবেস হোস্টিং এমুলেটর দিয়ে স্থানীয় হোস্টিং সেট আপ করুন৷

এই বিভাগে, আপনি স্থানীয়ভাবে Next.js ওয়েব অ্যাপ চালানোর জন্য Firebase হোস্টিং এমুলেটর ব্যবহার করবেন।

এই বিভাগের শেষ নাগাদ, Firebase হোস্টিং এমুলেটর আপনার জন্য Next.js অ্যাপ চালায়, তাই আপনাকে এমুলেটরদের জন্য আলাদা প্রক্রিয়ায় Next.js চালানোর দরকার নেই।

একটি Firebase পরিষেবা অ্যাকাউন্ট ডাউনলোড করুন এবং ব্যবহার করুন

এই কোডল্যাবে আপনি যে ওয়েব অ্যাপটি তৈরি করবেন সেটি Next.js এর সাথে সার্ভার সাইড রেন্ডারিং ব্যবহার করে।

Node.js-এর জন্য ফায়ারবেস অ্যাডমিন SDK সার্ভার সাইড কোড থেকে নিরাপত্তা বিধি কার্যকর হয় তা নিশ্চিত করতে ব্যবহার করা হয়। Firebase অ্যাডমিনে API ব্যবহার করতে, আপনাকে Firebase কনসোল থেকে একটি Firebase পরিষেবা অ্যাকাউন্ট ডাউনলোড করে ব্যবহার করতে হবে।

  1. Firebase কনসোলে, আপনার প্রকল্প সেটিংসে পরিষেবা অ্যাকাউন্ট পৃষ্ঠায় নেভিগেট করুন।
  2. নতুন ব্যক্তিগত কী তৈরি করুন > কী তৈরি করুন ক্লিক করুন।
  3. ফাইলটি আপনার ফাইল সিস্টেমে ডাউনলোড হওয়ার পরে, সেই ফাইলটির সম্পূর্ণ পথ পান।
    উদাহরণস্বরূপ, আপনি যদি আপনার ডাউনলোড ডিরেক্টরিতে ফাইলটি ডাউনলোড করেন তবে সম্পূর্ণ পথটি এইরকম দেখতে পারে: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
  4. আপনার টার্মিনালে, আপনার ডাউনলোড করা ব্যক্তিগত কী-এর পাথে GOOGLE_APPLICATION_CREDENTIALS পরিবেশ পরিবর্তনশীল সেট করুন৷ একটি ইউনিক্স পরিবেশে, কমান্ডটি এইরকম দেখতে পারে:
    export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
  5. এই টার্মিনালটি খোলা রাখুন এবং এই কোডল্যাবের অবশিষ্টাংশের জন্য এটি ব্যবহার করুন, কারণ আপনি একটি নতুন টার্মিনাল সেশন শুরু করলে আপনার পরিবেশ পরিবর্তনশীল হারিয়ে যেতে পারে।
    আপনি যদি একটি নতুন টার্মিনাল সেশন খোলেন, আপনাকে অবশ্যই পূর্ববর্তী কমান্ডটি পুনরায় চালু করতে হবে।

আপনার ওয়েব অ্যাপ কোডে আপনার Firebase কনফিগারেশন যোগ করুন

  1. Firebase কনসোলে, আপনার প্রকল্প সেটিংসে নেভিগেট করুন।
  2. SDK সেটআপ এবং কনফিগারেশন প্যানে, firebaseConfig ভেরিয়েবলটি খুঁজুন এবং এর বৈশিষ্ট্য এবং তাদের মান অনুলিপি করুন।
  3. আপনার কোড এডিটরে .env ফাইলটি খুলুন এবং Firebase কনসোল থেকে কনফিগারেশন মান দিয়ে পরিবেশ পরিবর্তনশীল মান পূরণ করুন।
  4. ফাইলে, বিদ্যমান বৈশিষ্ট্যগুলিকে প্রতিস্থাপন করুন যা আপনি অনুলিপি করেছেন।
  5. ফাইলটি সংরক্ষণ করুন।

আপনার ফায়ারবেস প্রকল্পের সাথে ওয়েব অ্যাপ চালু করুন

আপনার Firebase প্রকল্পের সাথে ওয়েব অ্যাপ সংযোগ করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. আপনার টার্মিনালে, নিশ্চিত করুন যে Firebase-এ ওয়েব ফ্রেমওয়ার্ক সক্রিয় আছে:
    firebase experiments:enable webframeworks
  2. ফায়ারবেস শুরু করুন:
    firebase init
  3. নিম্নলিখিত বিকল্পগুলি নির্বাচন করুন:
    • ফায়ারস্টোর: ফায়ারস্টোরের জন্য সুরক্ষা নিয়ম এবং সূচী ফাইলগুলি কনফিগার করুন
    • হোস্টিং: ফায়ারবেস হোস্টিংয়ের জন্য ফাইলগুলি কনফিগার করুন এবং (ঐচ্ছিকভাবে) গিটহাব অ্যাকশন স্থাপনা সেট আপ করুন
    • স্টোরেজ: ক্লাউড স্টোরেজের জন্য একটি নিরাপত্তা নিয়ম ফাইল কনফিগার করুন
    • এমুলেটর: ফায়ারবেস পণ্যের জন্য স্থানীয় এমুলেটর সেট আপ করুন
  4. একটি বিদ্যমান প্রকল্প ব্যবহার করুন নির্বাচন করুন, এবং তারপরে আপনি পূর্বে উল্লেখিত প্রকল্প আইডি লিখুন।
  5. পরবর্তী সমস্ত প্রশ্নের জন্য ডিফল্ট মান নির্বাচন করুন যতক্ষণ না আপনি প্রশ্নটিতে পৌঁছান ততক্ষণ আপনি কোন অঞ্চলে সার্ভার-সাইড সামগ্রী হোস্ট করতে চান, যদি প্রযোজ্য হয়? . টার্মিনাল একটি বার্তা প্রদর্শন করে যে এটি বর্তমান ডিরেক্টরিতে একটি বিদ্যমান Next.js কোডবেস সনাক্ত করে।
  6. প্রশ্নটির জন্য আপনি কোন অঞ্চলে সার্ভার-সাইড সামগ্রী হোস্ট করতে চান, যদি প্রযোজ্য হয়? ফায়ারস্টোর এবং ক্লাউড স্টোরেজের জন্য আপনি পূর্বে যে অবস্থানটি নির্বাচন করেছিলেন সেটি নির্বাচন করুন৷
  7. আপনি কোন ফায়ারবেস এমুলেটর সেট আপ করতে চান এমন প্রশ্নে না পৌঁছা পর্যন্ত পরবর্তী সমস্ত প্রশ্নের জন্য ডিফল্ট মান নির্বাচন করুন? . এই প্রশ্নের জন্য, ফাংশন এমুলেটর এবং হোস্টিং এমুলেটর নির্বাচন করুন।
  8. অন্যান্য সমস্ত প্রশ্নের জন্য ডিফল্ট মান নির্বাচন করুন।

নিরাপত্তা বিধি স্থাপন করুন

কোডটিতে ইতিমধ্যেই Firestore এবং Firebase-এর জন্য ক্লাউড স্টোরেজের জন্য নিরাপত্তা নিয়মের সেট রয়েছে৷ আপনি নিরাপত্তা বিধি স্থাপন করার পরে, আপনার ডাটাবেসের ডেটা এবং আপনার বালতি অপব্যবহার থেকে আরও ভালভাবে সুরক্ষিত থাকে।

  1. এই নিরাপত্তা নিয়মগুলি স্থাপন করতে, আপনার টার্মিনালে এই কমান্ডটি চালান:
    firebase deploy --only firestore:rules,storage
  2. যদি আপনাকে জিজ্ঞাসা করা হয়: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , হ্যাঁ নির্বাচন করুন।

হোস্টিং এমুলেটর শুরু করুন

  1. আপনার টার্মিনালে, হোস্টিং এমুলেটর শুরু করুন:
    firebase emulators:start --only hosting
    আপনার টার্মিনাল সেই পোর্টের সাথে সাড়া দেয় যেখানে আপনি হোস্টিং এমুলেটর খুঁজে পেতে পারেন, উদাহরণস্বরূপ http://localhost:5000/ ।

টার্মিনাল দেখাচ্ছে যে হোস্টিং এমুলেটর প্রস্তুত

  1. আপনার ব্রাউজারে, Firebase হোস্টিং এমুলেটর দিয়ে URL-এ নেভিগেট করুন।
  2. আপনি যদি ওয়েব পৃষ্ঠায় ত্রুটি দেখতে পান যা এইভাবে শুরু হয়: "Error: Firebase session cookie has incorrect..." , আপনাকে আপনার লোকালহোস্ট পরিবেশে আপনার সমস্ত কুকি মুছে ফেলতে হবে৷ এটি করার জন্য, কুকিজ মুছে ফেলতে নির্দেশাবলী অনুসরণ করুন | DevTools ডকুমেন্টেশন

একটি কুকি সেশন ত্রুটি

DevTools-এ কুকিজ মুছে ফেলা হচ্ছে

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

6. ওয়েব অ্যাপে প্রমাণীকরণ যোগ করুন

এই বিভাগে, আপনি ওয়েব অ্যাপে প্রমাণীকরণ যোগ করেন যাতে আপনি এতে লগ ইন করতে পারেন।

সাইন-ইন এবং সাইন-আউট ফাংশন বাস্তবায়ন করুন

  1. src/lib/firebase/auth.js ফাইলে, onAuthStateChanged , signInWithGoogle , এবং signOut ফাংশনগুলিকে নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:
export function onAuthStateChanged(cb) {
        return _onAuthStateChanged(auth, cb);
}

export async function signInWithGoogle() {
        const provider = new GoogleAuthProvider();

        try {
                await signInWithPopup(auth, provider);
        } catch (error) {
                console.error("Error signing in with Google", error);
        }
}

export async function signOut() {
        try {
                return auth.signOut();
        } catch (error) {
                console.error("Error signing out with Google", error);
        }
}

এই কোড নিম্নলিখিত Firebase API ব্যবহার করে:

ফায়ারবেস এপিআই

বর্ণনা

GoogleAuthProvider

একটি Google প্রমাণীকরণ প্রদানকারী উদাহরণ তৈরি করে।

signInWithPopup

একটি ডায়ালগ-ভিত্তিক প্রমাণীকরণ প্রবাহ শুরু করে।

auth.signOut

ব্যবহারকারীকে সাইন আউট করে।

src/components/Header.jsx ফাইলে, কোডটি ইতিমধ্যে signInWithGoogle এবং signOut ফাংশনগুলিকে আহ্বান করে৷

  1. ওয়েব অ্যাপে, পৃষ্ঠাটি রিফ্রেশ করুন এবং Google এর সাথে সাইন ইন করুন এ ক্লিক করুন। ওয়েব অ্যাপ আপডেট হয় না, তাই সাইন-ইন সফল হয়েছে কিনা তা স্পষ্ট নয়।

প্রমাণীকরণ পরিবর্তন সাবস্ক্রাইব করুন

প্রমাণীকরণ পরিবর্তন সাবস্ক্রাইব করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. src/components/Header.jsx ফাইলে নেভিগেট করুন।
  2. নিম্নলিখিত কোড দিয়ে useUserSession ফাংশন প্রতিস্থাপন করুন:
function useUserSession(initialUser) {
        // The initialUser comes from the server through a server component
        const [user, setUser] = useState(initialUser);
        const router = useRouter();

        useEffect(() => {
                const unsubscribe = onAuthStateChanged(authUser => {
                        setUser(authUser);
                });
                return () => {
                        unsubscribe();
                };
        }, []);

        useEffect(() => {
                onAuthStateChanged(authUser => {
                        if (user === undefined) return;
                        if (user?.email !== authUser?.email) {
                                router.refresh();
                        }
                });
        }, [user]);

        return user;
}

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

পরিবর্তনগুলি যাচাই করুন

src/app/layout.js ফাইলের রুট লেআউট হেডার রেন্ডার করে এবং ব্যবহারকারীর কাছে, যদি উপলব্ধ হয়, একটি প্রপ হিসাবে পাস করে।

<Header initialUser={currentUser?.toJSON()} />

এর মানে হল যে <Header> কম্পোনেন্ট সার্ভার চালানোর সময় ব্যবহারকারীর ডেটা, যদি উপলব্ধ থাকে, রেন্ডার করে। প্রারম্ভিক পৃষ্ঠা লোড হওয়ার পরে পৃষ্ঠার জীবনচক্রের সময় যদি কোনো প্রমাণীকরণ আপডেট থাকে, তাহলে onAuthStateChanged হ্যান্ডলার সেগুলি পরিচালনা করে।

এখন ওয়েব অ্যাপ পরীক্ষা করার এবং আপনি যা তৈরি করেছেন তা যাচাই করার সময়।

নতুন প্রমাণীকরণ আচরণ যাচাই করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. আপনার ব্রাউজারে, ওয়েব অ্যাপ রিফ্রেশ করুন। আপনার প্রদর্শনের নাম হেডারে প্রদর্শিত হবে।
  2. সাইন আউট করুন এবং আবার সাইন ইন করুন। পৃষ্ঠাটি রিফ্রেশ ছাড়াই রিয়েল-টাইমে আপডেট হয়। আপনি বিভিন্ন ব্যবহারকারীদের সাথে এই ধাপটি পুনরাবৃত্তি করতে পারেন।
  3. ঐচ্ছিক: ওয়েব অ্যাপে ডান-ক্লিক করুন, পৃষ্ঠার উৎস দেখুন নির্বাচন করুন এবং প্রদর্শনের নাম অনুসন্ধান করুন। এটি সার্ভার থেকে প্রত্যাবর্তিত কাঁচা HTML উত্সে প্রদর্শিত হয়৷

7. রেস্টুরেন্টের তথ্য দেখুন

ওয়েব অ্যাপটিতে রেস্তোরাঁ এবং পর্যালোচনাগুলির জন্য মক ডেটা অন্তর্ভুক্ত রয়েছে।

এক বা একাধিক রেস্তোরাঁ যোগ করুন

আপনার স্থানীয় ক্লাউড ফায়ারস্টোর ডাটাবেসে মক রেস্টুরেন্ট ডেটা সন্নিবেশ করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. ওয়েব অ্যাপে, নির্বাচন করুন 2cf67d488d8e6332.png > নমুনা রেস্টুরেন্ট যোগ করুন .
  2. Firestore ডেটাবেস পৃষ্ঠায় Firebase কনসোলে, রেস্টুরেন্ট নির্বাচন করুন। আপনি রেস্তোরাঁর সংগ্রহে শীর্ষ-স্তরের নথিগুলি দেখতে পাচ্ছেন, যার প্রতিটিই একটি রেস্টুরেন্টের প্রতিনিধিত্ব করে৷
  3. একটি রেস্টুরেন্ট নথির বৈশিষ্ট্য অন্বেষণ করতে কয়েকটি নথিতে ক্লিক করুন৷

রেস্টুরেন্টের তালিকা প্রদর্শন করুন

আপনার ক্লাউড ফায়ারস্টোর ডাটাবেসে এখন রেস্তোরাঁ রয়েছে যা Next.js ওয়েব অ্যাপ প্রদর্শন করতে পারে।

ডেটা-ফেচিং কোড সংজ্ঞায়িত করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. src/app/page.js ফাইলে, <Home /> সার্ভার উপাদানটি খুঁজুন এবং getRestaurants ফাংশনে কলটি পর্যালোচনা করুন, যা সার্ভার চলাকালীন সময়ে রেস্টুরেন্টের একটি তালিকা পুনরুদ্ধার করে। আপনি নিম্নলিখিত ধাপে getRestaurants ফাংশন বাস্তবায়ন করুন।
  2. src/lib/firebase/firestore.js ফাইলে, নিম্নলিখিত কোড দিয়ে applyQueryFilters এবং getRestaurants ফাংশন প্রতিস্থাপন করুন:
function applyQueryFilters(q, { category, city, price, sort }) {
        if (category) {
                q = query(q, where("category", "==", category));
        }
        if (city) {
                q = query(q, where("city", "==", city));
        }
        if (price) {
                q = query(q, where("price", "==", price.length));
        }
        if (sort === "Rating" || !sort) {
                q = query(q, orderBy("avgRating", "desc"));
        } else if (sort === "Review") {
                q = query(q, orderBy("numRatings", "desc"));
        }
        return q;
}

export async function getRestaurants(filters = {}) {
        let q = query(collection(db, "restaurants"));

        q = applyQueryFilters(q, filters);
        const results = await getDocs(q);
        return results.docs.map(doc => {
                return {
                        id: doc.id,
                        ...doc.data(),
                        // Only plain objects can be passed to Client Components from Server Components
                        timestamp: doc.data().timestamp.toDate(),
                };
        });
}
  1. ওয়েব অ্যাপ রিফ্রেশ করুন। রেস্তোরাঁর চিত্রগুলি পৃষ্ঠায় টাইলস হিসাবে উপস্থিত হয়৷

সার্ভার রান টাইমে রেস্তোরাঁ তালিকা লোড হয় তা যাচাই করুন

Next.js ফ্রেমওয়ার্ক ব্যবহার করে, সার্ভার রান টাইমে বা ক্লায়েন্ট-সাইড রান টাইমে ডেটা লোড হলে তা স্পষ্ট নাও হতে পারে।

সার্ভার চালানোর সময় রেস্তোরাঁ তালিকা লোড হয় তা যাচাই করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. ওয়েব অ্যাপে, DevTools খুলুন এবং JavaScript অক্ষম করুন ।

DevTools-এ JavaScipt অক্ষম করুন

  1. ওয়েব অ্যাপ রিফ্রেশ করুন। রেস্টুরেন্ট তালিকা এখনও লোড. রেস্তোরাঁর তথ্য সার্ভার প্রতিক্রিয়ায় ফেরত দেওয়া হয়। যখন JavaScript সক্রিয় থাকে, রেস্টুরেন্টের তথ্য ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট কোডের মাধ্যমে হাইড্রেট করা হয়।
  2. DevTools-এ, JavaScript পুনরায় সক্ষম করুন ।

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

পূর্ববর্তী বিভাগে, আপনি দেখেছেন কিভাবে রেস্তোরাঁর প্রাথমিক সেট src/app/page.js ফাইল থেকে লোড হয়। src/app/page.js ফাইলটি একটি সার্ভার উপাদান এবং Firebase ডেটা-ফেচিং কোড সহ সার্ভারে রেন্ডার করা হয়৷

src/components/RestaurantListings.jsx ফাইলটি একটি ক্লায়েন্ট উপাদান এবং সার্ভার-রেন্ডার করা মার্কআপ হাইড্রেট করার জন্য কনফিগার করা যেতে পারে।

src/components/RestaurantListings.jsx ফাইলটিকে সার্ভার-রেন্ডার করা মার্কআপ হাইড্রেট করতে কনফিগার করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. src/components/RestaurantListings.jsx ফাইলে, নিম্নলিখিত কোডটি পর্যবেক্ষণ করুন, যা ইতিমধ্যে আপনার জন্য লেখা হয়েছে:
useEffect(() => {
        const unsubscribe = getRestaurantsSnapshot(data => {
                setRestaurants(data);
        }, filters);

        return () => {
                unsubscribe();
        };
}, [filters]);

এই কোডটি getRestaurantsSnapshot() ফাংশন চালু করে, যা getRestaurants() ফাংশনের অনুরূপ যা আপনি পূর্ববর্তী ধাপে প্রয়োগ করেছেন। যাইহোক, এই স্ন্যাপশট ফাংশনটি একটি কলব্যাক প্রক্রিয়া প্রদান করে যাতে রেস্তোরাঁর সংগ্রহে যখনই কোন পরিবর্তন করা হয় তখন কলব্যাকটি আহ্বান করা হয়।

  1. src/lib/firebase/firestore.js ফাইলে, getRestaurantsSnapshot() ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:
export function getRestaurantsSnapshot(cb, filters = {}) {
        if (typeof cb !== "function") {
                console.log("Error: The callback parameter is not a function");
                return;
        }

        let q = query(collection(db, "restaurants"));
        q = applyQueryFilters(q, filters);

        const unsubscribe = onSnapshot(q, querySnapshot => {
                const results = querySnapshot.docs.map(doc => {
                        return {
                                id: doc.id,
                                ...doc.data(),
                                // Only plain objects can be passed to Client Components from Server Components
                                timestamp: doc.data().timestamp.toDate(),
                        };
                });

                cb(results);
        });

        return unsubscribe;
}

Firestore ডেটাবেস পৃষ্ঠার মাধ্যমে করা পরিবর্তনগুলি এখন রিয়েল টাইমে ওয়েব অ্যাপে প্রতিফলিত হয়।

  1. ওয়েব অ্যাপে, নির্বাচন করুন 27ca5d1e8ed8adfe.png > নমুনা রেস্টুরেন্ট যোগ করুন . আপনার স্ন্যাপশট ফাংশন সঠিকভাবে প্রয়োগ করা হলে, রেস্তোরাঁগুলি পৃষ্ঠা রিফ্রেশ ছাড়াই রিয়েল-টাইমে উপস্থিত হয়।

8. ওয়েব অ্যাপ থেকে ব্যবহারকারীর ডেটা সংরক্ষণ করুন

  1. src/lib/firebase/firestore.js ফাইলে, নিম্নলিখিত কোড দিয়ে updateWithRating() ফাংশন প্রতিস্থাপন করুন:
const updateWithRating = async (
        transaction,
        docRef,
        newRatingDocument,
        review
) => {
        const restaurant = await transaction.get(docRef);
        const data = restaurant.data();
        const newNumRatings = data?.numRatings ? data.numRatings + 1 : 1;
        const newSumRating = (data?.sumRating || 0) + Number(review.rating);
        const newAverage = newSumRating / newNumRatings;

        transaction.update(docRef, {
                numRatings: newNumRatings,
                sumRating: newSumRating,
                avgRating: newAverage,
        });

        transaction.set(newRatingDocument, {
                ...review,
                timestamp: Timestamp.fromDate(new Date()),
        });
};

এই কোডটি নতুন পর্যালোচনার প্রতিনিধিত্ব করে একটি নতুন Firestore নথি সন্নিবেশ করায়। কোডটি বিদ্যমান ফায়ারস্টোর ডকুমেন্টকেও আপডেট করে যা রেটিং সংখ্যা এবং গড় গণনাকৃত রেটিং এর আপডেট পরিসংখ্যান সহ রেস্তোরাঁর প্রতিনিধিত্ব করে।

  1. নিম্নলিখিত কোড দিয়ে addReviewToRestaurant() ফাংশন প্রতিস্থাপন করুন:
export async function addReviewToRestaurant(db, restaurantId, review) {
        if (!restaurantId) {
                throw new Error("No restaurant ID was provided.");
        }

        if (!review) {
                throw new Error("A valid review has not been provided.");
        }

        try {
                const docRef = doc(collection(db, "restaurants"), restaurantId);
                const newRatingDocument = doc(
                        collection(db, `restaurants/${restaurantId}/ratings`)
                );

                await runTransaction(db, transaction =>
                        updateWithRating(transaction, docRef, newRatingDocument, review)
                );
        } catch (error) {
                console.error(
                        "There was an error adding the rating to the restaurant.",
                        error
                );
                throw error;
        }
}

একটি Next.js সার্ভার অ্যাকশন প্রয়োগ করুন

একটি Next.js সার্ভার অ্যাকশন ফর্ম ডেটা অ্যাক্সেস করার জন্য একটি সুবিধাজনক API প্রদান করে, যেমন data.get("text") ফর্ম জমা পেলোড থেকে পাঠ্য মান পেতে।

পর্যালোচনা ফর্ম জমা দেওয়ার প্রক্রিয়া করার জন্য একটি Next.js সার্ভার অ্যাকশন ব্যবহার করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. src/components/ReviewDialog.jsx ফাইলে, <form> এলিমেন্টে action অ্যাট্রিবিউট খুঁজুন।
<form action={handleReviewFormSubmission}>

action বৈশিষ্ট্য মান একটি ফাংশন বোঝায় যা আপনি পরবর্তী ধাপে বাস্তবায়ন করেন।

  1. src/app/actions.js ফাইলে, নিম্নলিখিত কোড দিয়ে handleReviewFormSubmission() ফাংশন প্রতিস্থাপন করুন:
// This is a next.js server action, which is an alpha feature, so
// use with caution.
// https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
export async function handleReviewFormSubmission(data) {
        const { app } = await getAuthenticatedAppForUser();
        const db = getFirestore(app);

        await addReviewToRestaurant(db, data.get("restaurantId"), {
                text: data.get("text"),
                rating: data.get("rating"),

                // This came from a hidden form field.
                userId: data.get("userId"),
        });
}

একটি রেস্টুরেন্ট জন্য পর্যালোচনা যোগ করুন

আপনি পর্যালোচনা জমা দেওয়ার জন্য সমর্থন প্রয়োগ করেছেন, তাই এখন আপনি যাচাই করতে পারেন যে আপনার পর্যালোচনাগুলি ক্লাউড ফায়ারস্টোরে সঠিকভাবে ঢোকানো হয়েছে৷

একটি পর্যালোচনা যোগ করতে এবং এটি ক্লাউড ফায়ারস্টোরে ঢোকানো হয়েছে তা যাচাই করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. ওয়েব অ্যাপে, হোম পেজ থেকে একটি রেস্টুরেন্ট নির্বাচন করুন।
  2. রেস্টুরেন্টের পৃষ্ঠায়, ক্লিক করুন 3e19beef78bb0d0e.png .
  3. একটি তারকা রেটিং নির্বাচন করুন.
  4. একটি পর্যালোচনা লিখুন.
  5. জমা দিন ক্লিক করুন. আপনার পর্যালোচনা পর্যালোচনা তালিকার শীর্ষে প্রদর্শিত হবে.
  6. ক্লাউড ফায়ারস্টোরে, আপনি যে রেস্তোরাঁটি পর্যালোচনা করেছেন তার নথির জন্য নথি যুক্ত করুন প্যানে অনুসন্ধান করুন এবং এটি নির্বাচন করুন৷
  7. স্টার্ট কালেকশন প্যানে, রেটিং নির্বাচন করুন।
  8. ডকুমেন্ট যোগ করুন প্যানে, আপনার পর্যালোচনার জন্য ডকুমেন্টটি খুঁজুন যাতে এটি প্রত্যাশিতভাবে ঢোকানো হয়েছে।

ফায়ারস্টোর এমুলেটরে নথি

9. ওয়েব অ্যাপ থেকে ব্যবহারকারীর আপলোড করা ফাইলগুলি সংরক্ষণ করুন৷

এই বিভাগে, আপনি কার্যকারিতা যোগ করেন যাতে আপনি লগ ইন করার সময় একটি রেস্টুরেন্টের সাথে যুক্ত চিত্রটি প্রতিস্থাপন করতে পারেন। আপনি ছবিটি Firebase স্টোরেজ-এ আপলোড করেন এবং ক্লাউড ফায়ারস্টোর নথিতে চিত্র URL আপডেট করেন যা রেস্টুরেন্টের প্রতিনিধিত্ব করে।

ওয়েব অ্যাপ থেকে ব্যবহারকারীর আপলোড করা ফাইলগুলি সংরক্ষণ করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. src/components/Restaurant.jsx ফাইলে, ব্যবহারকারী একটি ফাইল আপলোড করার সময় যে কোডটি চলে তা পর্যবেক্ষণ করুন:
async function handleRestaurantImage(target) {
        const image = target.files ? target.files[0] : null;
        if (!image) {
                return;
        }

        const imageURL = await updateRestaurantImage(id, image);
        setRestaurant({ ...restaurant, photo: imageURL });
}

কোন পরিবর্তনের প্রয়োজন নেই, কিন্তু আপনি নিম্নলিখিত ধাপে updateRestaurantImage() ফাংশনের আচরণ বাস্তবায়ন করেন।

  1. src/lib/firebase/storage.js ফাইলে, updateRestaurantImage() এবং uploadImage() ফাংশনগুলিকে নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:
export async function updateRestaurantImage(restaurantId, image) {
        try {
                if (!restaurantId)
                        throw new Error("No restaurant ID has been provided.");

                if (!image || !image.name)
                        throw new Error("A valid image has not been provided.");

                const publicImageUrl = await uploadImage(restaurantId, image);
                await updateRestaurantImageReference(restaurantId, publicImageUrl);

                return publicImageUrl;
        } catch (error) {
                console.error("Error processing request:", error);
        }
}

async function uploadImage(restaurantId, image) {
        const filePath = `images/${restaurantId}/${image.name}`;
        const newImageRef = ref(storage, filePath);
        await uploadBytesResumable(newImageRef, image);

        return await getDownloadURL(newImageRef);
}

updateRestaurantImageReference() ফাংশন ইতিমধ্যে আপনার জন্য প্রয়োগ করা হয়েছে। এই ফাংশনটি ক্লাউড ফায়ারস্টোরে একটি বিদ্যমান রেস্তোরাঁর নথি একটি আপডেট করা চিত্র URL সহ আপডেট করে৷

ইমেজ আপলোড কার্যকারিতা যাচাই করুন

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

  1. ওয়েব অ্যাপে, আপনি লগ ইন করেছেন তা যাচাই করুন এবং একটি রেস্টুরেন্ট নির্বাচন করুন।
  2. ক্লিক 7067eb41fea41ff0.png এবং আপনার ফাইল সিস্টেম থেকে একটি ছবি আপলোড করুন। আপনার ছবি আপনার স্থানীয় পরিবেশ ছেড়ে ক্লাউড স্টোরেজে আপলোড করা হয়। আপনি এটি আপলোড করার সাথে সাথে ছবিটি প্রদর্শিত হবে।
  3. Firebase-এর জন্য ক্লাউড স্টোরেজ -এ নেভিগেট করুন।
  4. রেস্তোরাঁর প্রতিনিধিত্ব করে এমন ফোল্ডারে নেভিগেট করুন। আপনি যে ছবিটি আপলোড করেছেন সেটি ফোল্ডারে বিদ্যমান।

6cf3f9e2303c931c.png

10. উপসংহার

অভিনন্দন! আপনি একটি Next.js অ্যাপে বৈশিষ্ট্য এবং কার্যকারিতা যোগ করতে Firebase ব্যবহার করতে শিখেছেন। বিশেষত, আপনি নিম্নলিখিত ব্যবহার করেছেন:

আরও জানুন