Next.js অ্যাপের সাথে Firebase ইন্টিগ্রেট করা

১. শুরু করার আগে

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

Friendly Eats ওয়েব অ্যাপ

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

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

পূর্বশর্ত

  • একটি GitHub অ্যাকাউন্ট
  • Next.js ও JavaScript সম্পর্কে জ্ঞান

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

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

  • Git
  • Node.js-এর সাম্প্রতিক স্টেবল ভার্সন
  • আপনার পছন্দের ব্রাউজার, যেমন Google Chrome
  • কোড এডিটর ও টার্মিনাল সহ ডেভেলপমেন্ট এনভায়রনমেন্ট
  • আপনার Firebase প্রোজেক্ট তৈরি ও ম্যানেজ করার জন্য একটি Google অ্যাকাউন্ট
  • আপনার Firebase প্রোজেক্টকে Blaze প্রাইসিং প্ল্যানে আপগ্রেড করার সুবিধা

২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট ও GitHub রিপোজিটরি সেট-আপ করুন

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

GitHub রিপোজিটরি তৈরি করা

কোডল্যাব সোর্স https://github.com/firebase/friendlyeats-web-এ পাওয়া যাবে। রিপোজিটরিতে একাধিক প্ল্যাটফর্মের জন্য স্যাম্পেল প্রোজেক্ট রয়েছে। তবে, এই কোডল্যাব শুধুমাত্র nextjs-start ডিরেক্টরি ব্যবহার করে। নিম্নলিখিত ডিরেক্টরিগুলি নোট করুন:

* `nextjs-start`: contains the starter code upon which you build.
* `nextjs-end`: contains the solution code for the finished web app.

আপনার নিজের রিপোজিটরিতে nextjs-start ফোল্ডার কপি করুন:

  1. টার্মিনাল ব্যবহার করে, আপনার কম্পিউটারে একটি নতুন ফোল্ডার তৈরি করুন এবং নতুন ডিরেক্টরিতে পরিবর্তন করুন:
    mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
  2. শুধুমাত্র nextjs-start ফোল্ডার ফেচ করতে giget npm প্যাকেজ ব্যবহার করুন:
    npx giget@latest "gh:firebase/friendlyeats-web/nextjs-start#master" . --install
  3. Git-এর মাধ্যমে লোকালি পরিবর্তন ট্র্যাক করুন:
    git init

git add .

git commit -m "Codelab starting point"

git branch -M main
  4. নতুন GitHub রিপোজিটরি তৈরি করুন: https://github.com/new. আপনার পছন্দমতো যেকোনও নাম দিন।
  5. আপনি কীভাবে GitHub-এ যাচাইকরণ করেন (HTTPS বা SSH) তার উপর নির্ভর করে, GitHub আপনার জন্য যে নতুন URL তৈরি করে সেটি কপি করুন:
    • https://github.com/<USER_NAME>/<REPOSITORY_NAME>.git অথবা
    • git@github.com:<USER_NAME>/<REPOSITORY_NAME>.git
  6. নিম্নলিখিত কমান্ড রান করে আপনার নতুন GitHub রিপোজিটরিতে লোকাল পরিবর্তন পুশ করুন। <REPOSITORY_URL> প্লেসহোল্ডারের জন্য আপনার আসল রিপোজিটরি URL ব্যবহার করুন।
    git remote add origin <REPOSITORY_URL>

git push -u origin main
  7. আপনি এখন আপনার GitHub রিপোজিটরিতে স্টার্টার কোড দেখতে পাবেন।

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

আপনার Firebase CLI ইনস্টল করা আছে কিনা এবং এটি v14.1.0 বা তার পরবর্তী ভার্সন কিনা তা যাচাই করতে নিম্নলিখিত কমান্ডটি রান করুন:

firebase --version

আপনি যদি কোনও পুরনো ভার্সন দেখতে পান বা আপনার Firebase CLI ইনস্টল করা না থাকে, তাহলে ইনস্টল কমান্ড রান করুন:

npm install -g firebase-tools@latest

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

Firebase-এ লগ-ইন করুন

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

৩. আপনার Firebase প্রোজেক্ট সেট-আপ করুন

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

Firebase প্রোজেক্ট তৈরি করা

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

আপনার Firebase-এর দাম সংক্রান্ত প্ল্যান আপগ্রেড করুন

Firebase-এর জন্য Firebase App Hosting ও Cloud Storage ব্যবহার করতে, আপনার Firebase প্রোজেক্টকে যখন ব্যবহার করবেন তখন পেমেন্ট করুন (Blaze) প্রাইসিং প্ল্যান-এ থাকতে হবে, যার অর্থ হল এটি একটি Cloud Billing অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

  • Cloud Billing অ্যাকাউন্টের জন্য ক্রেডিট কার্ডের মতো পেমেন্ট পদ্ধতি প্রয়োজন।
  • আপনি Firebase ও Google Cloud-এ নতুন হলে, $৩০০ ক্রেডিট ও ফ্রি ট্রায়াল Cloud Billing অ্যাকাউন্টের জন্য উপযুক্ত কিনা তা চেক করুন।
  • আপনি যদি কোনও ইভেন্টের অংশ হিসেবে এই কোডল্যাব করেন, তাহলে কোনও Cloud ক্রেডিট উপলভ্য আছে কিনা তা আপনার ইভেন্ট অর্গানাইজারকে জিজ্ঞাসা করুন।

আপনার প্রোজেক্ট Blaze প্ল্যানে আপগ্রেড করতে, এইসব ধাপ অনুসরণ করুন:

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

আপনার Firebase প্রোজেক্টে ওয়েব অ্যাপ যোগ করা

  1. আপনার Firebase প্রোজেক্টে প্রোজেক্ট ওভারভিউ বিকল্পে গিয়ে অ্যাপ যোগ করুন বিকল্পে ক্লিক করুন এবং তারপরে ওয়েব বিকল্পে ক্লিক করুন।
  2. অ্যাপের ডাকনাম টেক্সট বক্সে, অ্যাপের একটি মনে রাখার মতো ডাকনাম লিখুন, যেমন My Next.js app।
  3. এই অ্যাপের জন্য Firebase Hosting সেট-আপ করুন চেকবক্সটি আনচেক করা অবস্থায় রাখুন।
  4. অ্যাপ রেজিস্টার করুন > কনসোলে যাওয়া চালিয়ে যান বিকল্পে ক্লিক করুন।

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

যাচাইকরণ সেট-আপ করা

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

Cloud Firestore সেট-আপ করা

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

Firebase-এর জন্য ক্লাউড স্টোরেজ সেট-আপ করা

  1. Firebase কনসোলের বাঁদিকের প্যানেলে, বিল্ড বিকল্প বড় করে দেখুন এবং তারপর Storage বিকল্প বেছে নিন।
  2. শুরু করুন বিকল্পে ক্লিক করুন।
  3. আপনার ডিফল্ট স্টোরেজ বাকেটের জন্য একটি লোকেশন বেছে নিন।
    US-WEST1, US-CENTRAL1 এবং US-EAST1-এ থাকা বাকেট Google Cloud Storage-এর জন্য "সবসময় ফ্রি" টিয়ার-এর সুবিধা নিতে পারে। অন্যান্য সব লোকেশনে বাকেট Google Cloud Storage-এর দাম ও ব্যবহার সংক্রান্ত নীতি মেনে চলে।
  4. টেস্ট মোডে শুরু করুন বিকল্পে ক্লিক করুন। নিরাপত্তা সংক্রান্ত নিয়ম সম্পর্কে ডিসক্লেমার পড়ুন।
    এই কোডল্যাবের পরবর্তী ধাপে, আপনার ডেটা সুরক্ষিত করতে নিরাপত্তা সংক্রান্ত নিয়ম যোগ করবেন। আপনার Storage বাকেটের জন্য নিরাপত্তা সংক্রান্ত নিয়ম যোগ না করে কোনও অ্যাপ সর্বজনীনভাবে ডিস্ট্রিবিউট বা প্রকাশ করবেন না।
  5. তৈরি করুন বিকল্পে ক্লিক করুন।

নিরাপত্তা সংক্রান্ত নিয়ম প্রয়োগ করুন

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

  1. আপনার টার্মিনালে, আগে তৈরি করা Firebase প্রোজেক্ট ব্যবহার করার জন্য CLI কনফিগার করুন:
    firebase use --add
    উপনামের জন্য প্রম্পট করা হলে, friendlyeats-codelab লিখুন।
  2. এইসব নিরাপত্তা সংক্রান্ত নিয়ম (এর সাথে ইনডেক্স যা পরে প্রয়োজন হবে) ডিপ্লয় করতে, আপনার টার্মিনালে এই কমান্ড রান করুন:
    firebase deploy --only firestore,storage
  3. আপনাকে যদি জিজ্ঞাসা করা হয়: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", তাহলে হ্যাঁ বেছে নিতে Enter প্রেস করুন।

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

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

ফোল্ডার ও ফাইলের স্ট্রাকচার

নিচের সারণিতে অ্যাপের ফোল্ডার ও ফাইল স্ট্রাকচারের ওভারভিউ দেওয়া আছে:

ফোল্ডার ও ফাইল

বিবরণ

src/components

ফিল্টার, হেডার, রেস্তোরাঁর বিবরণ এবং পর্যালোচনার জন্য React কম্পোনেন্ট

src/lib

ইউটিলিটি ফাংশন যা React বা Next.js-এর সাথে আবদ্ধ নাও হতে পারে

src/lib/firebase

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

public

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

src/app

Next.js অ্যাপ রাউটারের মাধ্যমে রাউটিং করা

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

অ্যাপটি @ চিহ্ন ব্যবহার করে যাতে জটিল রিলেটিভ ইমপোর্ট পাথ এড়ানো যায় এবং এটি পাথ অ্যালিয়াস-এর মাধ্যমে সম্ভব হয়।

Firebase-নির্দিষ্ট API

সব Firebase API কোড src/lib/firebase ডিরেক্টরিতে র‍্যাপ করা আছে। তারপর, স্বতন্ত্র React কম্পোনেন্টগুলি সরাসরি Firebase ফাংশন ইম্পোর্ট করার পরিবর্তে src/lib/firebase ডিরেক্টরি থেকে র‍্যাপ করা ফাংশন ইম্পোর্ট করে।

মক ডেটা

src/lib/randomData.js ফাইলে রেস্তোরাঁ ও রিভিউ সংক্রান্ত মক ডেটা আছে। সেই ফাইলের ডেটা src/lib/fakeRestaurants.js ফাইলের কোডে অ্যাসেম্বল করা হয়।

৫. App Hosting ব্যাকএন্ড তৈরি করা

এই বিভাগে, আপনার git রিপোজিটরিতে একটি ব্রাঞ্চ দেখার জন্য আপনি একটি App Hosting ব্যাকএন্ড সেট-আপ করবেন।

এই বিভাগের শেষে, আপনার কাছে GitHub-এ আপনার রিপোজিটরির সাথে কানেক্ট করা একটি App Hosting ব্যাকএন্ড থাকবে যা আপনার main ব্রাঞ্চে নতুন কমিট পুশ করার সাথে সাথে আপনার অ্যাপের একটি নতুন ভার্সন অটোমেটিক আবার তৈরি এবং রোল আউট করবে।

একটি ব্যাকএন্ড তৈরি করুন

  1. Firebase কনসোলে App Hosting পৃষ্ঠাতে নেভিগেট করুন।
  2. ব্যাকএন্ড তৈরি করার ফ্লো শুরু করতে শুরু করুন বিকল্পে ক্লিক করুন।
  3. একটি অঞ্চল বেছে নিন। আসল অ্যাপের ক্ষেত্রে, আপনার ব্যবহারকারীদের সবচেয়ে কাছের অঞ্চল বেছে নিতে হবে।
  4. GitHub যাচাইকরণ সেট-আপ করতে GitHub রিপোজিটরি ইমপোর্ট করুন ধাপের প্রম্পট অনুসরণ করুন।
  5. রিপোজিটরি থেকে, GitHub-এ নতুন রিপোজিটরিতে অ্যাক্সেস দিন বিকল্প বেছে নিন এবং আপনার আগে তৈরি করা GitHub রিপোজিটরিতে অ্যাক্সেস চালু করতে প্রম্পট অনুসরণ করুন।
  6. তালিকা রিফ্রেশ করতে তালিকা রিফ্রেশ করুন বিকল্পে ক্লিক করুন, তারপর আপনার রিপোজিটরি বেছে নিয়ে পরবর্তী বিকল্পে ক্লিক করুন।
  7. ডিপ্লয়মেন্ট সেটিংস সেট করুন:
    1. লাইভ ব্রাঞ্চ main-এ সেট করুন।
    2. রুট ডিরেক্টরি / হিসেবে রাখুন।
    3. অটোমেটিক রোল-আউট চালু করুন।
  8. আপনার ব্যাকএন্ডের নাম friendlyeats-codelab দিন এবং পরবর্তী বিকল্পে ক্লিক করুন।
  9. Firebase ওয়েব অ্যাপ অ্যাসোসিয়েট করুন বিকল্প থেকে, আগে থেকে থাকা Firebase ওয়েব অ্যাপ বেছে নিন বিকল্প বেছে নিন এবং তালিকা থেকে আপনার যোগ করা অ্যাপ বেছে নিন
  10. শেষ করুন ও ডিপ্লয় করুন বিকল্পে ক্লিক করুন। আপনাকে একটি নতুন পৃষ্ঠায় রিডাইরেক্ট করা হয়েছে যেখানে আপনি নতুন App Hosting ব্যাকএন্ডের স্ট্যাটাস দেখতে পাবেন!
  11. রোল-আউট স্ট্যাটাস, লগ ও ব্যবহারের বিবরণ সহ আপনার App Hosting ডেপ্লয়মেন্ট সম্পর্কে আরও তথ্য দেখতে, দেখুন বিকল্পে ক্লিক করুন।
  12. রোল-আউট সম্পূর্ণ হওয়ার পরে, ডোমেন-এর অধীনে আপনার সাইটের URL খুলতে ক্লিক করুন। DNS প্রোপাগেশনের কারণে এটি কাজ শুরু করতে কয়েক মিনিট সময় লাগতে পারে।
  13. এই রে! আপনি পৃষ্ঠা লোড করলে, একটি সমস্যার মেসেজ দেখতে পাবেন যাতে লেখা থাকবে "অ্যাপ্লিকেশন সংক্রান্ত সমস্যা: সার্ভার-সাইড ব্যতিক্রম ঘটেছে (আরও তথ্যের জন্য সার্ভার লগ দেখুন)।"
  14. Firebase কনসোলে, আপনার App Hosting ব্যাকএন্ডের লগ ট্যাব চেক করুন। আপনি "সমস্যা: প্রয়োগ করা হয়নি" লগ দেখতে পাবেন। আমরা পরবর্তী ধাপে যাচাইকরণ যোগ করার সময় এটি ঠিক করে দেব।

আপনি প্রাথমিক ওয়েব অ্যাপ ডিপ্লয় করেছেন! আপনার GitHub রিপোজিটরির main ব্রাঞ্চে প্রতিবার নতুন কমিট পুশ করার সময়, আপনি Firebase কনসোলে নতুন বিল্ড ও রোল-আউট শুরু হতে দেখবেন এবং রোল-আউট সম্পূর্ণ হওয়ার পরে আপনার সাইট অটোমেটিক আপডেট হয়ে যাবে।

৬. ওয়েব অ্যাপে যাচাইকরণ যোগ করা

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

অনুমোদিত ডোমেন যোগ করুন

Firebase Authentication শুধুমাত্র আপনার অনুমোদিত ডোমেন থেকে সাইন-ইন করার অনুরোধ গ্রহণ করবে। এখানে, আমরা আপনার প্রোজেক্টের অনুমোদিত ডোমেনের তালিকায় আপনার App Hosting ব্যাকএন্ডের ডোমেন যোগ করব।

  1. App Hosting পৃষ্ঠা খুলুন এবং এক নজরে পৃষ্ঠা অ্যাক্সেস করতে আপনার ডিপ্লয় করা সাইটের নিচে দেখুন বিকল্পে ক্লিক করুন। আপনার App Hosting ব্যাকএন্ডের ডোমেন নেম কপি করুন।
  2. Auth সেটিংস ট্যাবে যান এবং যে প্রোজেক্টে অনুমোদিত ডোমেন যোগ করতে চান সেটি বেছে নিন। তারপর, অনুমোদিত ডোমেন বিভাগটি খুঁজে নিয়ে সেটিতে ক্লিক করুন।
  3. ডোমেন যোগ করুন বোতামে ক্লিক করুন।
  4. আপনার App Hosting ব্যাকএন্ডের ডোমেন লিখুন।
  5. যোগ করুন বিকল্পে ক্লিক করুন।

সাইন-ইন ও সাইন-আউট ফাংশন প্রয়োগ করা

src/lib/firebase/auth.js ফাইলে, onAuthStateChanged, onIdTokenChanged, signInWithGoogle এবং signOut ফাংশনগুলি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:

export function onAuthStateChanged(cb) {
  return _onAuthStateChanged(auth, cb);
}

export function onIdTokenChanged(cb) {
  return _onIdTokenChanged(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 ব্যবহার করে:

Firebase API

বিবরণ

auth.onAuthStateChanged

ব্যবহারকারীর সাইন-ইন স্ট্যাটাসে পরিবর্তন করার জন্য একজন পর্যবেক্ষক যোগ করে।

auth.onIdTokenChanged

ব্যবহারকারীর আইডি টোকেনে পরিবর্তন করার জন্য একজন পর্যবেক্ষক যোগ করে।

GoogleAuthProvider

Google যাচাইকরণ পরিষেবা প্রদানকারী ইনস্ট্যান্স তৈরি করে।

signInWithPopup

ডায়ালগ-ভিত্তিক যাচাইকরণ ফ্লো শুরু করে।

auth.signOut

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

src/components/Header.jsx ফাইলে, কোডটি আগে থেকেই signInWithGoogle এবং signOut ফাংশন চালু করে।

সার্ভারে যাচাইকরণের স্ট্যাটাস পাঠান

সার্ভারে যাচাইকরণের স্ট্যাটাস পাস করার জন্য আমরা কুকি ব্যবহার করব। ক্লায়েন্টে যাচাইকরণের স্ট্যাটাস পরিবর্তন হলে, আমরা __session কুকি আপডেট করব।

src/components/Header.jsx-এ, useUserSession ফাংশনটি নিম্নলিখিত কোড দিয়ে পরিবর্তন করুন:

function useUserSession(initialUser) {
  useEffect(() => {
    return onIdTokenChanged(async (user) => {
      if (user) {
        const idToken = await user.getIdToken();
        await setCookie("__session", idToken);
      } else {
        await deleteCookie("__session");
      }
      if (initialUser?.uid === user?.uid) {
        return;
      }
      window.location.reload();
    });
  }, [initialUser]);

  return initialUser;
}

সার্ভারে যাচাইকরণের স্ট্যাটাস পড়ুন

সার্ভারে ক্লায়েন্টের যাচাইকরণ স্ট্যাটাস মিরর করতে আমরা FirebaseServerApp ব্যবহার করব।

src/lib/firebase/serverApp.js খুলুন এবং getAuthenticatedAppForUser ফাংশন পরিবর্তন করুন:

export async function getAuthenticatedAppForUser() {
  const authIdToken = (await cookies()).get("__session")?.value;

  // Firebase Server App is a new feature in the JS SDK that allows you to
  // instantiate the SDK with credentials retrieved from the client & has
  // other affordances for use in server environments.
  const firebaseServerApp = initializeServerApp(
    // https://github.com/firebase/firebase-js-sdk/issues/8863#issuecomment-2751401913
    initializeApp(),
    {
      authIdToken,
    }
  );

  const auth = getAuth(firebaseServerApp);
  await auth.authStateReady();

  return { firebaseServerApp, currentUser: auth.currentUser };
}

করা সব পরিবর্তন যাচাই করান

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

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

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

এখন নতুন বিল্ড প্রকাশ করার এবং আপনি যা তৈরি করেছেন তা যাচাই করার সময় এসেছে।

  1. "যাচাইকরণ যোগ করুন" মেসেজ সহ একটি কমিট তৈরি করুন এবং আপনার GitHub রিপোজিটরিতে এটি পুশ করুন।
    git add .

git commit -m "Add authentication"

git push
  2. App Hosting পৃষ্ঠা খুলুন এবং আপনার নতুন রোল-আউট সম্পূর্ণ হলে, সাইটের URL-এ ক্লিক করে সেটি খুলুন।
  3. যাচাইকরণ পরীক্ষা করুন:
    1. আপনার Google অ্যাকাউন্ট দিয়ে সাইন-ইন করুন এবং সাইন-ইন করার পরে আপনার ডিসপ্লে নাম হেডারে দেখা যাচ্ছে কিনা তা যাচাই করুন।
    2. সাইন-আউট করে আবার সাইন-ইন করুন। আপনি বিভিন্ন ব্যবহারকারীর সাথে এই ধাপটি রিপিট করতে পারবেন।
    3. ঐচ্ছিক: ওয়েব অ্যাপে মাউসের ডানদিকের বোতামে ক্লিক করুন, পৃষ্ঠার সোর্স দেখুন বিকল্প বেছে নিন এবং ডিসপ্লে নাম সার্চ করুন। সার্ভার থেকে ফেরত আসা র HTML সোর্সে এটি দেখা যায়।

৭. রেস্তোরাঁর তথ্য দেখুন

ওয়েব অ্যাপে রেস্তোরাঁ ও রিভিউয়ের জন্য মক ডেটা অন্তর্ভুক্ত আছে।

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

আপনার লোকাল Cloud Firestore ডেটাবেসে রেস্তোরাঁর মক ডেটা যোগ করতে, এই ধাপগুলি অনুসরণ করুন:

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

রেস্তোরাঁর তালিকা দেখান

আপনার Cloud Firestore ডেটাবেসে এখন রেস্তোরাঁ আছে যা 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(db = db, 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. "Firestore থেকে রেস্তোরাঁর তালিকা পড়ুন" কমিট মেসেজ সহ একটি কমিট তৈরি করুন এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন।
    git add .

git commit -m "Read the list of restaurants from Firestore"

git push
  2. Firebase কনসোলে App Hosting পৃষ্ঠা খুলুন এবং আপনার নতুন রোল-আউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
  3. ওয়েব অ্যাপে, পৃষ্ঠা রিফ্রেশ করুন। রেস্তোরাঁর ছবি পৃষ্ঠায় টাইল হিসেবে দেখা যায়।

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

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

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

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

DevTools-এ JavaScipt বন্ধ করুন

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

Cloud Firestore স্ন্যাপশট লিসেনারের মাধ্যমে রেস্তোরাঁ সংক্রান্ত আপডেট শুনুন

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

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

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

  1. src/components/RestaurantListings.jsx ফাইলে, নিম্নলিখিত কোডটি দেখুন, যা আপনার জন্য আগে থেকেই লেখা আছে:
useEffect(() => {
    return getRestaurantsSnapshot((data) => {
      setRestaurants(data);
    }, filters);
  }, [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);

  return 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);
  });
}
  1. src/lib/firebase/firestore.js ফাইলে, getRestaurantSnapshotById() ফাংশনটি নিম্নলিখিত কোড দিয়ে পরিবর্তন করুন:
export function getRestaurantSnapshotById(restaurantId, cb) {
  if (!restaurantId) {
    console.log("Error: Invalid ID received: ", restaurantId);
    return;
  }

  if (typeof cb !== "function") {
    console.log("Error: The callback parameter is not a function");
    return;
  }

  const docRef = doc(db, "restaurants", restaurantId);
  return onSnapshot(docRef, (docSnap) => {
    cb({
      ...docSnap.data(),
      timestamp: docSnap.data().timestamp.toDate(),
    });
  });
}

Firestore Database পৃষ্ঠার মাধ্যমে করা পরিবর্তন এখন রিয়েল টাইমে ওয়েব অ্যাপে দেখা যায়।

  1. "রিয়েল-টাইম রেস্তোরাঁ আপডেট শুনুন" মেসেজ সহ একটি কমিট তৈরি করুন এবং আপনার GitHub রিপোজিটরিতে এটি পুশ করুন।
    git add .

git commit -m "Listen for realtime restaurant updates"

git push
  2. Firebase কনসোলে App Hosting পৃষ্ঠা খুলুন এবং আপনার নতুন রোল-আউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
  3. ওয়েব অ্যাপে, 27ca5d1e8ed8adfe.png> স্যাম্পেল রেস্তোরাঁ যোগ করুন বিকল্প বেছে নিন। আপনার স্ন্যাপশট ফাংশন সঠিকভাবে প্রয়োগ করা হলে, পৃষ্ঠা রিফ্রেশ না করেই রেস্তোরাঁ রিয়েল-টাইমে দেখা যায়।

৮. ওয়েব অ্যাপ থেকে ব্যবহারকারীর জমা দেওয়া রিভিউ সেভ করুন

  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 ডকুমেন্ট যোগ করে। এছাড়াও, কোডটি রেস্তোরাঁর প্রতিনিধিত্বকারী বিদ্যমান Firestore ডকুমেন্টকে রেটিংয়ের সংখ্যা এবং গড় গণনা করা রেটিংয়ের জন্য আপডেট করা পরিসংখ্যান সহ আপডেট করে।

  1. addReviewToRestaurant() ফাংশনটি নিম্নলিখিত কোড দিয়ে পরিবর্তন করুন:
export async function addReviewToRestaurant(db, restaurantId, review) {
  if (!restaurantId) {
    throw new Error("No restaurant ID has been 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`),
    );

    // corrected line
    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 Server Action ব্যবহার করতে, এইসব ধাপ অনুসরণ করুন:

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

action অ্যাট্রিবিউট ভ্যালু এমন একটি ফাংশনকে রেফার করে যা আপনি পরবর্তী ধাপে প্রয়োগ করেন।

  1. src/app/actions.js ফাইলে, handleReviewFormSubmission() ফাংশনটি নিম্নলিখিত কোড দিয়ে পরিবর্তন করুন:
export async function handleReviewFormSubmission(data) {
  const { firebaseServerApp } = await getAuthenticatedAppForUser();
  const db = getFirestore(firebaseServerApp);

  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"),
  });
}

কোনও রেস্তোরাঁর জন্য রিভিউ যোগ করা

আপনি রিভিউ জমা দেওয়ার জন্য সহায়তা প্রয়োগ করেছেন, তাই এখন আপনি যাচাই করতে পারবেন যে আপনার রিভিউ Cloud Firestore-এ সঠিকভাবে যোগ করা হয়েছে কিনা।

একটি রিভিউ যোগ করতে এবং এটি Cloud Firestore-এ যোগ করা হয়েছে কিনা তা যাচাই করতে, এই ধাপগুলি অনুসরণ করুন:

  1. "ব্যবহারকারীদের রেস্তোরাঁর রিভিউ জমা দেওয়ার অনুমতি দিন" এই কমিট মেসেজ সহ একটি কমিট তৈরি করুন এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন।
    git add .

git commit -m "Allow users to submit restaurant reviews"

git push
  2. Firebase কনসোলে App Hosting পৃষ্ঠা খুলুন এবং আপনার নতুন রোল-আউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
  3. ওয়েব অ্যাপ রিফ্রেশ করুন এবং হোম পেজ থেকে রেস্তোরাঁ বেছে নিন।
  4. রেস্তোরাঁর পৃষ্ঠায়, 3e19beef78bb0d0e.png-এ ক্লিক করুন।
  5. স্টার রেটিং বেছে নিন।
  6. একটি পর্যালোচনা লিখুন।
  7. জমা দিন বিকল্পে ক্লিক করুন। রিভিউয়ের তালিকার সবচেয়ে উপরে আপনার রিভিউ দেখা যাবে।
  8. Cloud Firestore-এ, আপনি যে রেস্তোরাঁর রিভিউ করেছেন সেটির ডকুমেন্ট খুঁজতে ডকুমেন্ট যোগ করুন প্যানেলে সার্চ করুন এবং সেটি বেছে নিন।
  9. কালেকশন শুরু করুন প্যানেলে, রেটিং বেছে নিন।
  10. ডকুমেন্ট যোগ করুন প্যানেলে, আপনার পর্যালোচনার জন্য ডকুমেন্টটি খুঁজুন যাতে এটি প্রত্যাশা অনুযায়ী যোগ করা হয়েছে কিনা তা যাচাই করা যায়।

৯. ওয়েব অ্যাপ থেকে ব্যবহারকারীর আপলোড করা ফাইল সেভ করুন

এই বিভাগে, আপনি কার্যকারিতা যোগ করেন যাতে আপনি লগ-ইন করার সময় কোনও রেস্তোরাঁর সাথে যুক্ত ছবি পরিবর্তন করতে পারেন। আপনি Firebase Storage-এ ছবি আপলোড করেন এবং Cloud Firestore ডকুমেন্টে ছবির 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);
  setRestaurantDetails({ ...restaurantDetails, 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() ফাংশনটি আপনার জন্য আগে থেকেই প্রয়োগ করা হয়েছে। এই ফাংশনটি Cloud Firestore-এ আগে থেকে থাকা রেস্তোরাঁর ডকুমেন্টকে একটি আপডেট করা ছবির URL দিয়ে আপডেট করে।

ছবি আপলোড করার কার্যকারিতা যাচাই করুন

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

  1. "ব্যবহারকারীদের প্রতিটি রেস্তোরাঁর ফটো পরিবর্তন করার অনুমতি দিন" মেসেজ সহ একটি কমিট তৈরি করুন এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন।
    git add .

git commit -m "Allow users to change each restaurants' photo"

git push
  2. Firebase কনসোলে App Hosting পৃষ্ঠা খুলুন এবং আপনার নতুন রোল-আউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
  3. ওয়েব অ্যাপে, আপনি লগ-ইন করেছেন কিনা তা যাচাই করুন এবং রেস্তোরাঁ বেছে নিন।
  4. 7067eb41fea41ff0.png-এ ক্লিক করুন এবং আপনার ফাইল সিস্টেম থেকে একটি ছবি আপলোড করুন। আপনার ছবি লোকাল এনভায়রনমেন্ট থেকে ক্লাউড স্টোরেজে আপলোড করা হয়। আপনি আপলোড করার সাথে সাথেই ছবিটি দেখা যাবে।
  5. Firebase-এর জন্য Cloud Storage-এ নেভিগেট করুন।
  6. রেস্তোরাঁকে দেখায় এমন ফোল্ডারে নেভিগেট করুন। আপনার আপলোড করা ছবিটি ফোল্ডারে আছে।

6cf3f9e2303c931c.png

১০. জেনারেটিভ AI-এর সাহায্যে রেস্তোরাঁর রিভিউয়ের সারসংক্ষেপ করা

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

Cloud Secret Manager-এ Gemini API key স্টোর করা

  1. Gemini API ব্যবহার করতে, আপনার একটি API 'কী' প্রয়োজন হবে। Google AI Studio-তে গিয়ে API কী তৈরি করুন বিকল্পে ক্লিক করুন।
  2. আপনার পছন্দমতো 'কী'-এর নাম দিন। ইমপোর্ট করা প্রোজেক্ট বেছে নিন বিকল্পের অধীনে আপনার প্রোজেক্ট তালিকাভুক্ত না থাকলে, প্রোজেক্ট ইমপোর্ট করুন বিকল্পে ক্লিক করুন, তালিকায় আপনার প্রোজেক্ট চেক করুন এবং তারপরে ইমপোর্ট করুন বিকল্পে ক্লিক করুন। সবশেষে, ইমপোর্ট করা প্রোজেক্ট বেছে নিন বিকল্পের অধীনে এটি বেছে নিন এবং কী তৈরি করুন বিকল্পে ক্লিক করুন।
  3. App Hosting, Cloud Secret Manager-এর সাথে ইন্টিগ্রেট করে যাতে আপনি API কী-এর মতো সংবেদনশীল ভ্যালু নিরাপদে স্টোর করতে পারেন:
    1. টার্মিনালে, নতুন সিক্রেট তৈরি করতে কমান্ড রান করুন:
    firebase apphosting:secrets:set GEMINI_API_KEY
    1. গোপনীয় ভ্যালুর জন্য প্রম্পট করা হলে, Google AI Studio থেকে আপনার Gemini API key কপি ও পেস্ট করুন।
    2. নতুন সিক্রেট প্রোডাকশন নাকি লোকাল টেস্টিংয়ের জন্য তা জিজ্ঞাসা করা হলে, "প্রোডাকশন" বেছে নিন।
    3. আপনার ব্যাকএন্ডের পরিষেবা অ্যাকাউন্ট যাতে সিক্রেট অ্যাক্সেস করতে পারে তার জন্য অ্যাক্সেস দিতে চান কিনা জিজ্ঞাসা করা হলে, "হ্যাঁ" বিকল্প বেছে নিন।
    4. নতুন সিক্রেট apphosting.yaml-এ যোগ করা হবে কিনা জিজ্ঞাসা করা হলে, গ্রহণ করতে Y লিখুন।

আপনার Gemini API key এখন Cloud Secret Manager-এ নিরাপদে স্টোর করা আছে এবং আপনার App Hosting ব্যাকএন্ডে অ্যাক্সেসযোগ্য।

রিভিউয়ের সারসংক্ষেপ কম্পোনেন্ট প্রয়োগ করুন

  1. src/components/Reviews/ReviewSummary.jsx-এ, GeminiSummary ফাংশনটি নিম্নলিখিত কোড দিয়ে পরিবর্তন করুন:
    export async function GeminiSummary({ restaurantId }) {
  const { firebaseServerApp } = await getAuthenticatedAppForUser();
  const reviews = await getReviewsByRestaurantId(
    getFirestore(firebaseServerApp),
    restaurantId
  );

  const reviewSeparator = "@";
  const prompt = `
    Based on the following restaurant reviews, 
    where each review is separated by a '${reviewSeparator}' character, 
    create a one-sentence summary of what people think of the restaurant. 

    Here are the reviews: ${reviews.map((review) => review.text).join(reviewSeparator)}
  `;

  try {
    if (!process.env.GEMINI_API_KEY) {
      // Make sure GEMINI_API_KEY environment variable is set:
      // https://genkit.dev/docs/get-started/
      throw new Error(
        'GEMINI_API_KEY not set. Set it with "firebase apphosting:secrets:set GEMINI_API_KEY"'
      );
    }

    // Configure a Genkit instance.
    const ai = genkit({
      plugins: [googleAI()],
      model: gemini20Flash, // set default model
    });
    const { text } = await ai.generate(prompt);

    return (
      <div className="restaurant__review_summary">
        <p>{text}</p>
        <p>✨ Summarized with Gemini</p>
      </div>
    );
  } catch (e) {
    console.error(e);
    return <p>Error summarizing reviews.</p>;
  }
}
  2. "রিভিউয়ের সারসংক্ষেপ করতে AI ব্যবহার করুন" মেসেজ সহ একটি কমিট তৈরি করুন এবং আপনার GitHub রিপোজিটরিতে এটি পুশ করুন।
    git add .

git commit -m "Use AI to summarize reviews"

git push
  3. Firebase কনসোলে App Hosting পৃষ্ঠা খুলুন এবং আপনার নতুন রোল-আউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
  4. রেস্তোরাঁর জন্য একটি পৃষ্ঠা খুলুন। পৃষ্ঠার একদম উপরে, আপনি পৃষ্ঠায় থাকা সব রিভিউয়ের এক লাইনের সারসংক্ষেপ দেখতে পাবেন।
  5. নতুন রিভিউ যোগ করে পৃষ্ঠা রিফ্রেশ করুন। আপনি সারাংশে পরিবর্তন দেখতে পাবেন।

১১. আপনার App Hosting সাইট প্রকাশনা থেকে সরিয়ে নিন

এই কোডল্যাব সম্পূর্ণ করার পরে, আপনি যদি অ্যাপটি ব্যবহার করা চালিয়ে না যান, তাহলে কেউ যাতে আপনার Firestore, Storage এবং Gemini রিসোর্স অ্যাক্সেস করতে না পারে তা নিশ্চিত করতে আপনি এটি প্রকাশনা থেকে সরিয়ে নিতে পারেন। আপনি যেকোনও সময়ে আবার প্রকাশ করতে পারবেন।

App Hosting সাইট প্রকাশনা থেকে সরিয়ে দিতে:

  1. Firebase কনসোলে App Hosting খুলুন।
  2. আপনার অ্যাপের ব্যাকএন্ড খুঁজে দেখুন বিকল্পে ক্লিক করুন।
  3. ব্যাকএন্ড তথ্য বিভাগে, ডোমেন বিকল্পের পাশে, ম্যানেজ করুন বিকল্পে ক্লিক করুন। এটি ডোমেন পৃষ্ঠা লোড করে।
  4. আপনার ডোমেনের পাশে, আরও আইকনে (তিনটি উল্লম্ব ডট) ক্লিক করুন, ডোমেন বন্ধ করুন বিকল্প বেছে নিন, তারপর কনফার্ম করতে বন্ধ করুন বিকল্পে ক্লিক করুন।

১২. উপসংহার

অভিনন্দন! আপনি শিখেছেন কীভাবে Firebase ব্যবহার করে Next.js অ্যাপে ফিচার ও কার্যকারিতা যোগ করতে হয়। বিশেষ করে, আপনি নিম্নলিখিতগুলি ব্যবহার করেছেন:

  • আপনি যখনই কোনও কনফিগার করা ব্রাঞ্চে পুশ করবেন, তখনই আপনার Next.js কোড অটোমেটিক তৈরি ও ডিপ্লয় করতে Firebase App Hosting।
  • সাইন-ইন ও সাইন-আউট করার কার্যকারিতা চালু করতে Firebase Authentication।
  • রেস্তোরাঁর ডেটা এবং রেস্তোরাঁর রিভিউ ডেটার জন্য Cloud Firestore।
  • রেস্তোরাঁর ছবির জন্য Firebase-এর জন্য ক্লাউড স্টোরেজ।

আরও জানুন