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

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

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

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

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

পূর্বশর্ত

• একটি GitHub অ্যাকাউন্ট
• Next.js এবং JavaScript এর জ্ঞান

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

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

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

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

2. আপনার উন্নয়ন পরিবেশ এবং 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 ফোল্ডার আনতে গিগেট এনপিএম প্যাকেজটি ব্যবহার করুন:

   npx giget@latest gh:firebase/friendlyeats-web/nextjs-start#master . --install
   

3. গিট দিয়ে স্থানীয়ভাবে পরিবর্তনগুলি ট্র্যাক করুন:

   git init
   
   git commit -a -m "codelab starting point"
   
   git branch -M main
   

4. একটি নতুন GitHub সংগ্রহস্থল তৈরি করুন: https://github.com/new । আপনি যা চান তার নাম দিন।
   1. গিটহাব আপনাকে একটি নতুন সংগ্রহস্থল URL দেবে যা দেখতে https://github.com/ / .git এর মতো https://github.com/ / .git https://github.com/ / .git বা git@github.com: / .git git@github.com: / .git git@github.com: / .git এই URL কপি করুন.
5. আপনার নতুন GitHub সংগ্রহস্থলে স্থানীয় পরিবর্তনগুলি পুশ করুন। নিম্নলিখিত কমান্ডটি চালান, এর জন্য আপনার সংগ্রহস্থলের URL প্রতিস্থাপন করুন স্থানধারক

   git remote add origin <your-repository-url>
   
   git push -u origin main
   

6. আপনার এখন আপনার GitHub সংগ্রহস্থলে স্টার্টার কোডটি দেখতে হবে।

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

আপনি Firebase CLI ইনস্টল করেছেন এবং এটি v13.9.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 অ্যাকাউন্ট নির্বাচন করুন এবং তারপরে অনুমতি দিন ক্লিক করুন।

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

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

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

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

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

Firebase-এর জন্য Firebase অ্যাপ হোস্টিং এবং ক্লাউড স্টোরেজ ব্যবহার করার জন্য, আপনার Firebase প্রজেক্টকে পে-অ্যাজ-ইউ গো (Blaze) প্রাইসিং প্ল্যানে থাকতে হবে, যার মানে এটি একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

• একটি ক্লাউড বিলিং অ্যাকাউন্টের জন্য একটি অর্থপ্রদানের পদ্ধতি প্রয়োজন, যেমন একটি ক্রেডিট কার্ড৷
• আপনি Firebase এবং Google ক্লাউডে নতুন হলে, আপনি $300 ক্রেডিট এবং একটি বিনামূল্যের ট্রায়াল ক্লাউড বিলিং অ্যাকাউন্টের জন্য যোগ্য কিনা তা পরীক্ষা করুন।
• আপনি যদি একটি ইভেন্টের অংশ হিসাবে এই কোডল্যাবটি করছেন, তাহলে আপনার সংগঠককে জিজ্ঞাসা করুন যদি কোনো ক্লাউড ক্রেডিট উপলব্ধ থাকে।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

অ্যাপটি একটি 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. একটি অ্যাপ হোস্টিং ব্যাকএন্ড তৈরি করুন

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

এই বিভাগের শেষ নাগাদ, আপনার GitHub-এ আপনার সংগ্রহস্থলের সাথে সংযুক্ত একটি অ্যাপ হোস্টিং ব্যাকএন্ড থাকবে যা স্বয়ংক্রিয়ভাবে আপনার অ্যাপের একটি নতুন সংস্করণ পুনরায় তৈরি করবে এবং রোল আউট করবে যখনই আপনি আপনার main শাখায় একটি নতুন প্রতিশ্রুতি ঠেলে দেবেন।

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

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

1. আপনার টার্মিনালে, আপনি আগে তৈরি করা ফায়ারবেস প্রকল্প ব্যবহার করতে CLI কনফিগার করুন:

   firebase use --add
   

   একটি উপনামের জন্য অনুরোধ করা হলে, friendlyeats-codelab লিখুন।
2. এই নিরাপত্তা নিয়মগুলি স্থাপন করতে, আপনার টার্মিনালে এই কমান্ডটি চালান:

   firebase deploy --only firestore:rules,storage
   

3. যদি আপনাকে জিজ্ঞাসা করা হয়: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , হ্যাঁ নির্বাচন করতে Enter টিপুন।

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

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

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

1. Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠায় নেভিগেট করুন:

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

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

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 ব্যবহার করে:

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

1. "Google প্রমাণীকরণ যোগ করা" কমিট মেসেজ সহ একটি প্রতিশ্রুতি তৈরি করুন এবং এটিকে আপনার GitHub সংগ্রহস্থলে পুশ করুন। 1. Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন৷
2. ওয়েব অ্যাপে, পৃষ্ঠাটি রিফ্রেশ করুন এবং Google এর সাথে সাইন ইন করুন এ ক্লিক করুন। ওয়েব অ্যাপ আপডেট হয় না, তাই সাইন-ইন সফল হয়েছে কিনা তা স্পষ্ট নয়।

সার্ভারে প্রমাণীকরণ অবস্থা পাঠান

সার্ভারে প্রমাণীকরণ অবস্থা পাস করার জন্য, আমরা একটি পরিষেবা কর্মী ব্যবহার করব৷ নিম্নলিখিত কোড দিয়ে fetchWithFirebaseHeaders এবং getAuthIdToken ফাংশন প্রতিস্থাপন করুন:

async function fetchWithFirebaseHeaders(request) {
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const installations = getInstallations(app);
  const headers = new Headers(request.headers);
  const [authIdToken, installationToken] = await Promise.all([
    getAuthIdToken(auth),
    getToken(installations),
  ]);
  headers.append("Firebase-Instance-ID-Token", installationToken);
  if (authIdToken) headers.append("Authorization", `Bearer ${authIdToken}`);
  const newRequest = new Request(request, { headers });
  return await fetch(newRequest);
}

async function getAuthIdToken(auth) {
  await auth.authStateReady();
  if (!auth.currentUser) return;
  return await getIdToken(auth.currentUser);
}

সার্ভারে প্রমাণীকরণ অবস্থা পড়ুন

সার্ভারে ক্লায়েন্টের প্রমাণীকরণের অবস্থা মিরর করতে আমরা FirebaseServerApp ব্যবহার করব।

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

export async function getAuthenticatedAppForUser() {
  const idToken = headers().get("Authorization")?.split("Bearer ")[1];
  console.log('firebaseConfig', JSON.stringify(firebaseConfig));
  const firebaseServerApp = initializeServerApp(
    firebaseConfig,
    idToken
      ? {
          authIdToken: idToken,
        }
      : {}
  );

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

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

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

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

1. src/components/Header.jsx ফাইলে নেভিগেট করুন।
2. নিম্নলিখিত কোড দিয়ে useUserSession ফাংশন প্রতিস্থাপন করুন:

function useUserSession(initialUser) {
	// The initialUser comes from the server via a server component
	const [user, setUser] = useState(initialUser);
	const router = useRouter();

	// Register the service worker that sends auth state back to server
	// The service worker is built with npm run build-service-worker
	useEffect(() => {
		if ("serviceWorker" in navigator) {
			const serializedFirebaseConfig = encodeURIComponent(JSON.stringify(firebaseConfig));
			const serviceWorkerUrl = `/auth-service-worker.js?firebaseConfig=${serializedFirebaseConfig}`
		
		  navigator.serviceWorker
			.register(serviceWorkerUrl)
			.then((registration) => console.log("scope is: ", registration.scope));
		}
	  }, []);

	useEffect(() => {
		const unsubscribe = onAuthStateChanged((authUser) => {
			setUser(authUser)
		})

		return () => unsubscribe()
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	useEffect(() => {
		onAuthStateChanged((authUser) => {
			if (user === undefined) return

			// refresh when user changed to ease testing
			if (user?.email !== authUser?.email) {
				router.refresh()
			}
		})
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [user])

	return user;
}

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

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

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

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

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

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

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

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

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

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

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

1. ওয়েব অ্যাপে, নির্বাচন করুন > নমুনা রেস্টুরেন্ট যোগ করুন .
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(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 সংগ্রহস্থলে ঠেলে দিন।
2. Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
3. ওয়েব অ্যাপে, পৃষ্ঠাটি রিফ্রেশ করুন। রেস্তোরাঁর ছবি পৃষ্ঠায় টাইলস হিসাবে প্রদর্শিত হয়।

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

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

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

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

2. ওয়েব অ্যাপ রিফ্রেশ করুন। রেস্টুরেন্ট তালিকা এখনও লোড. রেস্তোরাঁর তথ্য সার্ভার প্রতিক্রিয়ায় ফেরত দেওয়া হয়। যখন JavaScript সক্রিয় থাকে, রেস্টুরেন্টের তথ্য ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট কোডের মাধ্যমে হাইড্রেট করা হয়।
3. 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() ফাংশনের অনুরূপ যা আপনি পূর্ববর্তী ধাপে প্রয়োগ করেছেন। যাইহোক, এই স্ন্যাপশট ফাংশনটি একটি কলব্যাক প্রক্রিয়া প্রদান করে যাতে রেস্তোরাঁর সংগ্রহে যখনই কোন পরিবর্তন করা হয় তখন কলব্যাকটি আহ্বান করা হয়।

2. 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. "রিয়েলটাইম রেস্তোরাঁর আপডেটের জন্য শুনুন" কমিট মেসেজ সহ একটি প্রতিশ্রুতি তৈরি করুন এবং এটিকে আপনার GitHub সংগ্রহস্থলে ঠেলে দিন।
2. Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
3. ওয়েব অ্যাপে, নির্বাচন করুন > নমুনা রেস্টুরেন্ট যোগ করুন . আপনার স্ন্যাপশট ফাংশন সঠিকভাবে প্রয়োগ করা হলে, রেস্তোরাঁগুলি পৃষ্ঠা রিফ্রেশ ছাড়াই রিয়েল-টাইমে উপস্থিত হয়।

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

2. নিম্নলিখিত কোড দিয়ে 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 সার্ভার অ্যাকশন ব্যবহার করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

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

<form action={handleReviewFormSubmission}>

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

2. 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. Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
3. ওয়েব অ্যাপ রিফ্রেশ করুন, এবং হোম পেজ থেকে একটি রেস্টুরেন্ট নির্বাচন করুন।
4. রেস্টুরেন্টের পৃষ্ঠায়, ক্লিক করুন .
5. একটি তারকা রেটিং নির্বাচন করুন.
6. একটি পর্যালোচনা লিখুন.
7. জমা দিন ক্লিক করুন. আপনার পর্যালোচনা পর্যালোচনা তালিকার শীর্ষে প্রদর্শিত হবে.
8. ক্লাউড ফায়ারস্টোরে, আপনি যে রেস্তোরাঁটি পর্যালোচনা করেছেন তার নথির জন্য নথি যুক্ত করুন প্যানে অনুসন্ধান করুন এবং এটি নির্বাচন করুন৷
9. স্টার্ট কালেকশন প্যানে, রেটিং নির্বাচন করুন।
10. ডকুমেন্ট যোগ করুন প্যানে, আপনার পর্যালোচনার জন্য ডকুমেন্টটি খুঁজুন যাতে এটি প্রত্যাশিতভাবে ঢোকানো হয়েছে।

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() ফাংশনের আচরণ বাস্তবায়ন করেন।

2. 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. Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
3. ওয়েব অ্যাপে, আপনি লগ ইন করেছেন তা যাচাই করুন এবং একটি রেস্টুরেন্ট নির্বাচন করুন।
4. ক্লিক করুন এবং আপনার ফাইল সিস্টেম থেকে একটি ছবি আপলোড করুন। আপনার ছবি আপনার স্থানীয় পরিবেশ ছেড়ে ক্লাউড স্টোরেজে আপলোড করা হয়। আপনি এটি আপলোড করার সাথে সাথে ছবিটি প্রদর্শিত হবে।
5. Firebase-এর জন্য ক্লাউড স্টোরেজ- এ নেভিগেট করুন।
6. রেস্তোরাঁর প্রতিনিধিত্ব করে এমন ফোল্ডারে নেভিগেট করুন। আপনি যে ছবিটি আপলোড করেছেন সেটি ফোল্ডারে বিদ্যমান।

10. জেনারেটিভ এআই সহ রেস্তোরাঁর পর্যালোচনাগুলিকে সংক্ষিপ্ত করুন৷

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

ক্লাউড সিক্রেট ম্যানেজারে একটি জেমিনি API কী সংরক্ষণ করুন

1. Gemini API ব্যবহার করতে, আপনার একটি API কী প্রয়োজন। গুগল এআই স্টুডিওতে একটি কী তৈরি করুন ।
2. অ্যাপ হোস্টিং ক্লাউড সিক্রেট ম্যানেজারের সাথে সংহত করে যাতে আপনি API কীগুলির মতো সংবেদনশীল মানগুলিকে নিরাপদে সংরক্ষণ করতে পারেন:
   1. একটি টার্মিনালে, একটি নতুন গোপন তৈরি করতে কমান্ডটি চালান:

   firebase apphosting:secrets:set gemini-api-key
   

   1. গোপন মূল্যের জন্য অনুরোধ করা হলে, Google AI স্টুডিও থেকে আপনার Gemini API কীটি কপি করে পেস্ট করুন।
   2. apphosting.yaml এ নতুন সিক্রেট যোগ করা উচিত কিনা জিজ্ঞাসা করা হলে, স্বীকার করতে Y লিখুন।

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

পর্যালোচনা সারাংশ উপাদান বাস্তবায়ন

1. src/components/Reviews/ReviewSummary.jsx এ, নিম্নলিখিত কোড দিয়ে GeminiSummary ফাংশন প্রতিস্থাপন করুন:

   export async function GeminiSummary({ restaurantId }) {
       const { firebaseServerApp } = await getAuthenticatedAppForUser();
       const reviews = await getReviewsByRestaurantId(
           getFirestore(firebaseServerApp),
           restaurantId
       );
   
       const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
       const model = genAI.getGenerativeModel({ model: "gemini-pro"});
   
       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 {
           const result = await model.generateContent(prompt);
           const response = await result.response;
           const text = response.text();
   
           return (
               <div className="restaurant__review_summary">
                   <p>{text}</p>
                   <p>✨ Summarized with Gemini</p>
               </div>
           );
       } catch (e) {
           console.error(e);
           return <p>Error contacting Gemini</p>;
       }
   }
   

2. "পর্যালোচনার সারসংক্ষেপ করতে AI ব্যবহার করুন" কমিট মেসেজ সহ একটি প্রতিশ্রুতি তৈরি করুন এবং এটিকে আপনার GitHub সংগ্রহস্থলে ঠেলে দিন।
3. Firebase কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
4. একটি রেস্টুরেন্ট জন্য একটি পৃষ্ঠা খুলুন. শীর্ষে, আপনি পৃষ্ঠার সমস্ত পর্যালোচনাগুলির একটি এক-বাক্যের সারাংশ দেখতে পাবেন।
5. একটি নতুন পর্যালোচনা যোগ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। আপনি সারাংশ পরিবর্তন দেখতে হবে.

11. উপসংহার

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

• Firebase অ্যাপ হোস্টিং প্রতিবার যখন আপনি কনফিগার করা শাখায় ঠেলে আপনার Next.js কোডটি স্বয়ংক্রিয়ভাবে তৈরি এবং স্থাপন করে।
• সাইন-ইন এবং সাইন-আউট কার্যকারিতা সক্ষম করতে Firebase প্রমাণীকরণ ।
• রেস্তোরাঁ ডেটা এবং রেস্তোরাঁ পর্যালোচনা ডেটার জন্য ক্লাউড ফায়ারস্টোর ৷
• রেস্তোরাঁর ছবির জন্য Firebase-এর জন্য ক্লাউড স্টোরেজ ।

আরও জানুন

• ক্লাউড ফায়ারস্টোর ওয়েব কোডল্যাব
• ফায়ারবেস কৌণিক ওয়েব ফ্রেমওয়ার্ক কোডল্যাব
• Firebase নিরাপত্তা নিয়মের মাধ্যমে আপনার Firestore ডেটা সুরক্ষিত করুন