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

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

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

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

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

পূর্বশর্ত

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

তুমি কি শিখবে

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

তোমার যা লাগবে

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

২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট এবং গিটহাব রিপোজিটরি সেট আপ করুন

এই কোডল্যাবটি অ্যাপের স্টার্টার কোডবেস প্রদান করে এবং 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 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 অথবা
   • [e-mail]:<USER_NAME>/<REPOSITORY_NAME>.git
6. নিম্নলিখিত কমান্ডটি চালিয়ে আপনার নতুন GitHub রিপোজিটরিতে স্থানীয় পরিবর্তনগুলি পুশ করুন। আপনার প্রকৃত রিপোজিটরি URL এর পরিবর্তে <REPOSITORY_URL> প্লেসহোল্ডারটি ব্যবহার করুন।

   git remote add origin <REPOSITORY_URL>
   
   git push -u origin main
   

7. এখন আপনার GitHub রিপোজিটরিতে স্টার্টার কোডটি দেখতে পাবেন।

ফায়ারবেস সিএলআই ইনস্টল বা আপডেট করুন

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

firebase --version

যদি আপনি এর চেয়ে কম ভার্সন দেখতে পান অথবা আপনার Firebase CLI ইনস্টল না থাকে, তাহলে install কমান্ডটি চালান:

npm install -g firebase-tools@latest

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

ফায়ারবেসে লগ ইন করুন

1. Firebase CLI তে লগ ইন করতে নিম্নলিখিত কমান্ডটি চালান:

   firebase login
   

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

৩. আপনার ফায়ারবেস প্রকল্প সেট আপ করুন

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

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

1. আগের ধাপে যে Google অ্যাকাউন্টটি ব্যবহার করেছিলেন, সেই অ্যাকাউন্টটি ব্যবহার করে Firebase কনসোলে সাইন ইন করুন।
2. একটি নতুন প্রকল্প তৈরি করতে বোতামটি ক্লিক করুন, এবং তারপর একটি প্রকল্পের নাম লিখুন (উদাহরণস্বরূপ, FriendlyEats Codelab )।
   

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

   আপনার প্রজেক্ট আইডি মনে রাখবেন কারণ পরে Firebase CLI তে আপনার Firebase প্রজেক্ট সনাক্ত করার জন্য এটির প্রয়োজন হবে। যদি আপনি আপনার আইডি ভুলে যান, তাহলে আপনি এটি পরে Project Settings এ খুঁজে পেতে পারেন।

3. চালিয়ে যান ক্লিক করুন।
4. যদি অনুরোধ করা হয়, তাহলে Firebase শর্তাবলী পর্যালোচনা করুন এবং গ্রহণ করুন, এবং তারপর Continue এ ক্লিক করুন।
5. (ঐচ্ছিক) Firebase কনসোলে ("Gemini in Firebase" নামে পরিচিত) AI সহায়তা সক্ষম করুন।
6. এই কোডল্যাবের জন্য, আপনার গুগল অ্যানালিটিক্সের প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স বিকল্পটি টগল করে বন্ধ করে দিন ।
7. Create project এ ক্লিক করুন, আপনার province করার জন্য অপেক্ষা করুন, এবং তারপর Continue এ ক্লিক করুন।

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

Firebase-এর জন্য Firebase অ্যাপ হোস্টিং এবং ক্লাউড স্টোরেজ ব্যবহার করার জন্য, আপনার Firebase প্রকল্পটি pay-as-you go (Blaze) মূল্য পরিকল্পনায় থাকা প্রয়োজন, যার অর্থ এটি একটি Cloud Billing অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

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

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

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

দ্রষ্টব্য : এই কোডল্যাবটি সম্পন্ন করার পরে আপনি আপনার প্রকল্পটিকে নো-কস্ট (স্পার্ক) মূল্য পরিকল্পনায় ডাউনগ্রেড করতে পারেন।

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

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

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

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

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

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

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

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

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

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

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

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?" , তাহলে Yes নির্বাচন করতে Enter টিপুন।

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

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

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

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

ফোল্ডার এবং ফাইল	বিবরণ
src/components	ফিল্টার, হেডার, রেস্তোরাঁর বিবরণ এবং পর্যালোচনার জন্য প্রতিক্রিয়া উপাদান
src/lib	ইউটিলিটি ফাংশন যা React বা Next.js এর সাথে আবদ্ধ নয়
src/lib/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";

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

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

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

নকল তথ্য

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

৫. একটি অ্যাপ হোস্টিং ব্যাকএন্ড তৈরি করুন

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

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

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

1. ফায়ারবেস কনসোলে অ্যাপ হোস্টিং পৃষ্ঠায় নেভিগেট করুন।
2. ব্যাকএন্ড তৈরির প্রবাহ শুরু করতে শুরু করুন ক্লিক করুন।
3. একটি অঞ্চল বেছে নিন। একটি আসল অ্যাপের জন্য, আপনাকে আপনার ব্যবহারকারীদের সবচেয়ে কাছের অঞ্চলটি বেছে নিতে হবে।
4. GitHub প্রমাণীকরণ সেট আপ করার জন্য Import a GitHub repository ধাপে প্রম্পটগুলি অনুসরণ করুন।
5. Repository থেকে, GitHub-এ একটি নতুন সংগ্রহস্থলে অ্যাক্সেস প্রদান করুন নির্বাচন করুন এবং আপনার আগে তৈরি করা GitHub সংগ্রহস্থলে অ্যাক্সেস সক্ষম করতে প্রম্পটগুলি অনুসরণ করুন।
6. তালিকাটি রিফ্রেশ করতে Refresh list এ ক্লিক করুন, তারপর আপনার সংগ্রহস্থল নির্বাচন করুন এবং Next এ ক্লিক করুন।
7. স্থাপনার সেটিংস সেট করুন:
   1. লাইভ শাখাটিকে main এ সেট করুন।
   2. রুট ডিরেক্টরিটি / হিসেবে রাখুন।
   3. স্বয়ংক্রিয় রোলআউট সক্ষম করুন।
8. আপনার ব্যাকএন্ডের নাম দিন friendlyeats-codelab এবং Next এ ক্লিক করুন।
9. "Associate a Firebase web app" থেকে, "Select an existing Firebase web app" নির্বাচন করুন এবং তালিকা থেকে আপনার যোগ করা অ্যাপটি নির্বাচন করুন।
10. Finish এবং deploy এ ক্লিক করুন। আপনাকে একটি নতুন পৃষ্ঠায় পুনঃনির্দেশিত করা হবে যেখানে আপনি আপনার নতুন অ্যাপ হোস্টিং ব্যাকএন্ডের অবস্থা দেখতে পাবেন!
11. আপনার অ্যাপ হোস্টিং স্থাপনার বিষয়ে আরও তথ্য দেখতে ভিউতে ক্লিক করুন, যার মধ্যে রয়েছে রোলআউট স্ট্যাটাস, লগ এবং ব্যবহারের বিবরণ।
12. আপনার রোলআউট সম্পন্ন হওয়ার পরে, Domains এর অধীনে আপনার সাইটের URL খুলতে ক্লিক করুন। DNS প্রচারের কারণে এটি কাজ শুরু করতে কয়েক মিনিট সময় নিতে পারে।
13. ওহ ওহ! যখন আপনি পৃষ্ঠাটি লোড করবেন, তখন আপনি একটি ত্রুটি বার্তা দেখতে পাবেন যা বলে "অ্যাপ্লিকেশন ত্রুটি: একটি সার্ভার-সাইড ব্যতিক্রম ঘটেছে (আরও তথ্যের জন্য সার্ভার লগগুলি দেখুন)।"
14. Firebase কনসোলে, আপনার অ্যাপ হোস্টিং ব্যাকএন্ডের লগ ট্যাবটি পরীক্ষা করুন। আপনি একটি "ত্রুটি: বাস্তবায়িত হয়নি" লগ দেখতে পাবেন। আমরা পরবর্তী ধাপে প্রমাণীকরণ যোগ করার সময় এটি ঠিক করব।

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

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

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

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

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

1. অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং ওভারভিউ পৃষ্ঠাটি অ্যাক্সেস করতে আপনার স্থাপন করা সাইটের নীচে দেখুন ক্লিক করুন। আপনার অ্যাপ হোস্টিং ব্যাকএন্ডের ডোমেন নামটি অনুলিপি করুন।
2. Auth Settings ট্যাবে যান এবং যে প্রকল্পে আপনি একটি অনুমোদিত ডোমেন যোগ করতে চান তা নির্বাচন করুন। তারপর, Authorized Domains বিভাগটি সনাক্ত করুন এবং এটিতে ক্লিক করুন।
3. ডোমেইন যোগ করুন বোতামে ক্লিক করুন।
4. আপনার অ্যাপ হোস্টিং ব্যাকএন্ডের ডোমেন লিখুন।
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 গুলি ব্যবহার করে:

ফায়ারবেস এপিআই	বিবরণ
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 };
}

দ্রষ্টব্য : এই নির্দিষ্ট ওয়েব অ্যাপে, Firebase API ব্যবহার src/lib/firebase ফোল্ডারে মোড়ানো থাকে। Firebase API গুলি সরাসরি প্রয়োজনীয় উপাদানগুলিতে ব্যবহার করা, অথবা ReactFire বা React Firebase Hooks এর মতো অন্যান্য হুক ব্যবহার করাও একটি বৈধ পদ্ধতি। আপনি যদি এই ধরনের হুক ব্যবহার করেন, তাহলে নিশ্চিত করুন যে আপনার ব্যবহার Next.js অ্যাপ রাউটার এবং সার্ভার উপাদানগুলির সাথে প্রবর্তিত প্যারাডিজমের সাথে ভালভাবে খাপ খায়।

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

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

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

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

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

1. "Add authentication" কমিট বার্তাটি দিয়ে একটি কমিট তৈরি করুন এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন।

   git add .
   
   git commit -m "Add authentication"
   
   git push
   

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

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

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

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

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

1. যদি আপনি ইতিমধ্যেই ওয়েব অ্যাপে সাইন ইন না করে থাকেন, তাহলে সেটি নির্বাচন করুন। তারপর, > নমুনা রেস্তোরাঁ যোগ করুন । মনে রাখবেন যে আমরা Friendly Eats ওয়েব অ্যাপে কোনও রেস্তোরাঁ দেখতে পাচ্ছি না কারণ আমরা এখনও ডেটা আনার কোড সেট আপ করিনি। আমরা পরবর্তী ধাপে এটি ঠিক করব।
2. ফায়ারস্টোর ডাটাবেস পৃষ্ঠার ফায়ারবেস কনসোলে, রেস্তোরাঁ নির্বাচন করুন। আপনি রেস্তোরাঁ সংগ্রহের শীর্ষ-স্তরের নথি দেখতে পাবেন, যার প্রতিটি একটি রেস্তোরাঁর প্রতিনিধিত্ব করে।
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. "Read the list of restaurants from Firestore" এই কমিট বার্তাটি দিয়ে একটি কমিট তৈরি করুন এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন।

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

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

দ্রষ্টব্য : যদিও ক্লাউড ফায়ারস্টোর কার্যকর স্ন্যাপশট বৈশিষ্ট্যগুলি অফার করে যা প্রতিক্রিয়াশীল ওয়েব অ্যাপগুলিতে সাহায্য করতে পারে, আপাতত আপনি কেবল সার্ভার সাইডে রেস্তোরাঁর প্রাথমিক তালিকা পাওয়ার বিষয়ে উদ্বিগ্ন। এই কারণে, getRestaurants ফাংশনটি onSnapshot ফাংশনের পরিবর্তে ক্লাউড ফায়ারস্টোর থেকে getDocs ফাংশন ব্যবহার করে।

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

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

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

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

2. ওয়েব অ্যাপটি রিফ্রেশ করুন। রেস্তোরাঁর তালিকা এখনও লোড হচ্ছে। রেস্তোরাঁর তথ্য সার্ভারের প্রতিক্রিয়ায় ফেরত পাঠানো হয়। যখন জাভাস্ক্রিপ্ট সক্রিয় থাকে, তখন ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট কোডের মাধ্যমে রেস্তোরাঁর তথ্য হাইড্রেট করা হয়।
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(() => {
    return getRestaurantsSnapshot((data) => {
      setRestaurants(data);
    }, filters);
  }, [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);

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

3. 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(),
    });
  });
}

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

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

   git add .
   
   git commit -m "Listen for realtime restaurant updates"
   
   git push
   

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

৮. ওয়েব অ্যাপ থেকে ব্যবহারকারীদের জমা দেওয়া পর্যালোচনাগুলি সংরক্ষণ করুন

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

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

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}
  onSubmit={() => {
    handleClose();
  }}
>

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

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

দ্রষ্টব্য : components/ReviewDialog.jsx ফাইলে লুকানো ফর্ম ফিল্ড ব্যবহার করা হয়। লুকানো ফর্ম ফিল্ডগুলিতে রেস্তোরাঁর আইডি এবং ব্যবহারকারীর আইডি এম্বেড করা থাকে, যাতে Next.js সার্ভার অ্যাকশন ফর্ম জমা দেওয়ার সময় সেই মানগুলি অ্যাক্সেস করতে পারে।

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

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

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

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

   git add .
   
   git commit -m "Allow users to submit restaurant reviews"
   
   git push
   

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

দ্রষ্টব্য : যখন আপনি একটি পর্যালোচনা সন্নিবেশ করেন, তখন পর্যালোচনাটি পৃষ্ঠা রিফ্রেশ ছাড়াই পৃষ্ঠায় তাৎক্ষণিকভাবে প্রদর্শিত হয়। এটি Firestore স্ন্যাপশট এবং React Hooks এর কারণে কাজ করে। আপনি যদি কোডটি মনে করিয়ে দিতে চান, src/components/Restaurant.jsx ফাইলটি খুলুন এবং getReviewsSnapshotByRestaurantId() ফাংশনের রেফারেন্সটি পরীক্ষা করুন।

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

এই বিভাগে, আপনি কার্যকারিতা যোগ করেন যাতে আপনি লগ ইন করার সময় একটি রেস্তোরাঁর সাথে সম্পর্কিত চিত্রটি প্রতিস্থাপন করতে পারেন। আপনি ছবিটি Firebase Storage-এ আপলোড করেন এবং ক্লাউড ফায়ারস্টোর ডকুমেন্টে চিত্র 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() ফাংশনের আচরণ বাস্তবায়ন করবেন।

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. "ব্যবহারকারীদের প্রতিটি রেস্তোরাঁর ছবি পরিবর্তন করতে অনুমতি দিন" এই কমিট বার্তাটি সহ একটি কমিট তৈরি করুন এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন।

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

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

দ্রষ্টব্য : ইমেজ ফাইলের মতো বাইনারি রিসোর্সের জন্য Firebase-এর জন্য ক্লাউড স্টোরেজ হল সঠিক পরিষেবা।

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

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

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

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

   firebase apphosting:secrets:set GEMINI_API_KEY
   

   1. গোপন মান জিজ্ঞাসা করা হলে, Google AI Studio থেকে আপনার Gemini API কীটি কপি করে পেস্ট করুন।
   2. নতুন গোপন তথ্যটি উৎপাদনের জন্য নাকি স্থানীয় পরীক্ষার জন্য, জিজ্ঞাসা করা হলে "উৎপাদন" নির্বাচন করুন।
   3. আপনার ব্যাকএন্ডের পরিষেবা অ্যাকাউন্ট যাতে গোপন তথ্য অ্যাক্সেস করতে পারে তার জন্য আপনি কি অ্যাক্সেস দিতে চান জিজ্ঞাসা করা হলে, "হ্যাঁ" নির্বাচন করুন।
   4. নতুন গোপন তথ্যটি 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 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://firebase.google.com/docs/genkit/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 কনসোলে অ্যাপ হোস্টিং পৃষ্ঠাটি খুলুন এবং আপনার নতুন রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।
4. একটি রেস্তোরাঁর জন্য একটি পৃষ্ঠা খুলুন। উপরে, আপনি পৃষ্ঠার সমস্ত পর্যালোচনার একটি বাক্যের সারাংশ দেখতে পাবেন।
5. একটি নতুন পর্যালোচনা যোগ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। আপনি সারাংশ পরিবর্তনটি দেখতে পাবেন।

১১. আপনার অ্যাপ হোস্টিং সাইটটি প্রকাশনা থেকে সরিয়ে দিন

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

একটি অ্যাপ হোস্টিং সাইটের প্রকাশনা প্রত্যাহার করতে:

1. Firebase কনসোলে অ্যাপ হোস্টিং খুলুন।
2. আপনার অ্যাপের ব্যাকএন্ডটি সনাক্ত করুন এবং দেখুন এ ক্লিক করুন।
3. ব্যাকএন্ড তথ্য বিভাগে, Domains এর পাশে, Manage এ ক্লিক করুন। এটি Domains পৃষ্ঠাটি লোড করে।
4. আপনার ডোমেনের পাশে, আরও আইকনে (তিনটি উল্লম্ব বিন্দু) ক্লিক করুন, ডোমেন নিষ্ক্রিয় করুন নির্বাচন করুন, তারপর নিশ্চিত করতে নিষ্ক্রিয় করুন এ ক্লিক করুন।

১২. উপসংহার

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

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

আরও জানুন

• ক্লাউড ফায়ারস্টোর ওয়েব কোডল্যাব
• ফায়ারবেস অ্যাঙ্গুলার ওয়েব ফ্রেমওয়ার্ক কোডল্যাব
• Firebase নিরাপত্তা নিয়ম ব্যবহার করে আপনার Firestore ডেটা সুরক্ষিত করুন