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

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

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

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

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

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

পূর্বশর্ত

  • Next.js এবং JavaScript সম্পর্কে জ্ঞান।

তুমি কি শিখবে

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

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

  • আপনার পছন্দের একটি ব্রাউজার, যেমন গুগল ক্রোম
  • IDX.dev (একটি ওয়েব-ভিত্তিক কর্মক্ষেত্র) অ্যাক্সেস
  • আপনার Firebase প্রকল্প তৈরি এবং পরিচালনার জন্য একটি Google অ্যাকাউন্ট
  • একটি GitHub অ্যাকাউন্ট (এটি উপরের ইমেল অ্যাকাউন্টের মতো একই হতে হবে না)

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

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

একটি নতুন GitHub সংগ্রহস্থল তৈরি করুন এবং এটি IDX-এ আমদানি করুন

Firebase অ্যাপ হোস্টিং আপনাকে একটি GitHub রিপোজিটরি সেট আপ করার সুযোগ দেয় যাতে আপনি যখনই কোনও কনফিগার করা শাখায় পুশ করেন তখন এটি আপনার Next.js কোড তৈরি এবং স্থাপন করে।

  1. এই কোডল্যাবের জন্য একটি নতুন GitHub রিপোজিটরি তৈরি করুন: https://github.com/new । আপনার পছন্দের যেকোনো নাম দিন, যেমন MyFriendlyEatsCodelab ।
  2. আপনার নতুন রিপোজিটরির URL কপি করুন। এটি দেখতে এরকম হবে:
    https://github.com/ USER_NAME / REPOSITORY_NAME .git
  3. https://idx.google.com এ যান এবং সাইন ইন করুন।
  4. ইমপোর্ট এ রেপো ক্লিক করুন এবং আপনার কপি করা GitHub URL টি পেস্ট করুন।
    IDX আপনাকে GitHub-এর সাথে লিঙ্ক করতে বলবে, তারপর এটি আপনার (খালি) সংগ্রহস্থল ক্লোন করবে।

কোডল্যাবের সোর্স কোড সংগ্রহস্থল দেখুন

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

আপনি যে কোডল্যাবটি ব্যবহার করছেন তা শুধুমাত্র Firebase অ্যাপ হোস্টিং এবং Gemini API-এর উপর ফোকাস করে এবং এটি সম্পূর্ণ কোডল্যাব "Integrate Firebase with a Next.js App" এর একটি সংক্ষিপ্ত সংস্করণ। এই সংক্ষিপ্ত কোডল্যাবটির জন্য আপনাকে শুধুমাত্র friendlyeats-web রিপোজিটরির #io-connect শাখার সোর্স কোড দিয়ে কাজ করতে হবে, বিশেষ করে nextjs-step10 ডিরেক্টরি।

friendlyeats-web রিপোজিটরির নিম্নলিখিত অতিরিক্ত ডিরেক্টরিগুলি লক্ষ্য করুন। যদিও এই কোডল্যাবের জন্য আপনার এই ডিরেক্টরিগুলির প্রয়োজন নেই, তবুও সেগুলি কী তা জানা সহায়ক।

কোডল্যাব সোর্সটি আপনার নতুন রিপোজিটরিতে কপি করুন।

আপনার নিজস্ব সংগ্রহস্থলে nextjs-step10 ডিরেক্টরিটি কীভাবে অনুলিপি করবেন তা এখানে দেওয়া হল:

  1. IDX-এ, Menu > Terminal > New Terminal ব্যবহার করে টার্মিনালটি খুলুন।
  2. io-connect শাখা থেকে শুধুমাত্র nextjs-step10 ডিরেক্টরি আনতে giget npm প্যাকেজ ব্যবহার করুন: 
    npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
  3. গিট দিয়ে স্থানীয়ভাবে পরিবর্তনগুলি ট্র্যাক করুন: 
    git add -A
git commit -m "codelab starting point"
git branch -M main
git push -u origin main

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

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

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

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

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

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

বিবরণ

src/components

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

src/lib

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

src/lib/firebase

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

public

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

src/app

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

src/app/restaurant

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

package.json এবং package-lock.json

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

next.config.js

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

jsconfig.json

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

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

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

ইম্পোর্ট স্টেটমেন্ট

কিছু ফাইলে, আপনি নিম্নলিখিত ধরণের আমদানি বিবৃতি লক্ষ্য করতে পারেন:

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

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

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

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

নকল তথ্য

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

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

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

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

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

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

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

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

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

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

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

  1. ফায়ারবেস কনসোলে, অ্যাপ হোস্টিং পৃষ্ঠায় নেভিগেট করুন: 'শুরু করুন' বোতাম সহ অ্যাপ হোস্টিং কনসোলের শূন্য অবস্থা
  2. ব্যাকএন্ড তৈরির প্রবাহ শুরু করতে শুরু করুন ক্লিক করুন।
  3. আপনার আগে তৈরি করা GitHub রিপোজিটরিটি আমদানি এবং সংযুক্ত করার জন্য প্রম্পটগুলি অনুসরণ করুন।
  4. স্থাপনার সেটিংস সেট করুন:
    • রুট ডিরেক্টরিটি / হিসাবে রাখুন
    • লাইভ শাখাটিকে main সেট করুন
    • স্বয়ংক্রিয় রোলআউট সক্ষম করুন
  5. আপনার ব্যাকএন্ডের নাম দিন friendlyeats-codelab (অথবা আপনার পছন্দের একটি ব্যাকএন্ড নাম)। এটি ব্যাকএন্ড অ্যাক্সেস করার জন্য ব্যবহৃত ডোমেনের অংশ হয়ে যায়।
    এই ওয়ার্কফ্লোটি আপনার ফায়ারবেস প্রজেক্টে স্বয়ংক্রিয়ভাবে একটি ফায়ারবেস ওয়েব অ্যাপ তৈরি করে। পরবর্তীতে এই কোডল্যাবে, আপনি আপনার কোডবেসকে আপনার ফায়ারবেস প্রজেক্টের সাথে সংযুক্ত করতে এই ওয়েব অ্যাপের কনফিগারেশন মানগুলি ব্যবহার করবেন।
  6. Finish এ ক্লিক করুন এবং deploy করুন । কিছুক্ষণ পরে, আপনাকে একটি নতুন পৃষ্ঠায় নিয়ে যাওয়া হবে যেখানে আপনি আপনার নতুন অ্যাপ হোস্টিং ব্যাকএন্ডের অবস্থা দেখতে পাবেন!
  7. অ্যাপ হোস্টিং ড্যাশবোর্ড থেকে, আপনার নতুন ডোমেইনটি কপি করুন।
    এর একটি প্যাটার্ন থাকবে যেমন BACKEND_ID -- PROJECT_ID . REGION .hosted.app . পরে Firebase Authentication সেট আপ করার জন্য আপনার এই ডোমেনটির প্রয়োজন হবে।

DNS প্রচার এবং SSL সার্টিফিকেট তৈরির কারণে ডোমেনটি কাজ শুরু করতে কয়েক মিনিট সময় লাগতে পারে। আপনার ব্যাকএন্ড তৈরি হওয়ার সময়, Firebase প্রকল্পের বাকি অংশ সেট আপ করা এবং আপনার ব্যাকএন্ড কনফিগার করা চালিয়ে যান (এই কোডল্যাবের পরবর্তী ধাপগুলি)।

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

৬. অন্যান্য ফায়ারবেস পরিষেবা সেট আপ করুন

যদিও এই কোডল্যাবটি শুধুমাত্র Firebase অ্যাপ হোস্টিং এবং Gemini API-এর উপর ফোকাস করে, তবুও এই ওয়েব অ্যাপটি কাজ করার জন্য অন্যান্য Firebase পরিষেবার প্রয়োজন। আপনার অ্যাপে এই সমস্ত পরিষেবা কাজ করার জন্য কোডগুলি আপনার নিজস্ব GitHub রেপোতে কপি করা কোডবেসের অংশ, তবে আপনাকে এখনও আপনার Firebase প্রকল্পে এই পরিষেবাগুলি সেট আপ করতে হবে।

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

  1. Firebase কনসোলে, Authentication এ নেভিগেট করুন।
  2. শুরু করুন ক্লিক করুন।
  3. অতিরিক্ত প্রদানকারী কলামে, Google > সক্ষম করুন এ ক্লিক করুন।
    1. প্রকল্পের টেক্সট বক্সের জন্য পাবলিক-ফেসিং নামের মধ্যে, একটি নাম লিখুন, যেমন My FriendlyEatsCodelab app ।
    2. প্রকল্পের জন্য সহায়তা ইমেল ড্রপ-ডাউন থেকে, আপনার ইমেল ঠিকানা নির্বাচন করুন।
    3. সংরক্ষণ করুন ক্লিক করুন।
  4. প্রমাণীকরণ পৃষ্ঠায় সেটিংস ট্যাবে ক্লিক করুন।
    1. স্ক্রিনের বাম দিকের মেনু থেকে Authorized Domains-এ ক্লিক করুন।
    2. Add Domain এ ক্লিক করুন, এবং তারপর আপনার নতুন তৈরি অ্যাপ হোস্টিং ডোমেন যোগ করুন (এটি .hosted.app দিয়ে শেষ হয়)।
    3. সংরক্ষণ করতে যোগ করুন -এ ক্লিক করুন।

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

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

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

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

৭. আপনার ওয়েব অ্যাপ কনফিগার করুন

এখন যেহেতু আপনি একটি Firebase প্রকল্প তৈরি করেছেন এবং আপনার অ্যাপে ব্যবহৃত সমস্ত Firebase পরিষেবা সক্ষম করেছেন, আপনি IDX-এ কাজ শুরু করতে প্রস্তুত যাতে আপনার ওয়েব অ্যাপটি সেই পরিষেবাগুলি ব্যবহার করার জন্য কনফিগার করা যায়।

IDX-এর মধ্যে Firebase CLI-তে লগ ইন করুন

IDX-এ ইতিমধ্যেই Node.js এবং Firebase CLI ইনস্টল করা আছে, তাই আপনি তাদের ইনস্টলেশন এড়িয়ে যেতে পারেন এবং কেবল CLI সেট আপ করা শুরু করতে পারেন।

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

নিরাপত্তা নিয়ম এবং সূচী স্থাপন করুন

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

উন্নত কোয়েরি সক্ষম করার জন্য আপনি Firestore ( firestore.indexes.json এ) এর জন্য সূচকের একটি সেট স্থাপন করতে CLI ব্যবহার করতে পারেন।

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

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

  1. ফায়ারবেস কনসোলে, নিম্নলিখিতগুলি করুন:
    1. আপনার প্রকল্প সেটিংসে নেভিগেট করুন।
    2. আপনার অ্যাপস বিভাগে স্ক্রোল করুন এবং তারপরে আপনার অ্যাপ হোস্টিং ব্যাকএন্ডের নামের একই অ্যাপটি নির্বাচন করুন।
    3. SDK সেটআপ এবং কনফিগারেশন এর অধীনে, Config বিকল্পটি নির্বাচন করুন, তারপর firebaseConfig ভেরিয়েবলের বৈশিষ্ট্য এবং তাদের মানগুলি অনুলিপি করুন।
  2. IDX-এ, নিম্নলিখিতগুলি করুন:
    1. apphosting.yaml ফাইলটি খুলুন। এখানেই আপনি অ্যাপ হোস্টিং-এ আপনার পরিবেশগত ভেরিয়েবল সেটআপ করবেন, সেইসাথে গোপন তথ্য এবং রানটাইম কনফিগারেশনও সেটআপ করবেন।
    2. Firebase কনসোল থেকে কপি করা কনফিগারেশন মানগুলি দিয়ে প্রদত্ত পরিবেশ পরিবর্তনশীল মানগুলি পূরণ করুন। উদাহরণস্বরূপ (আপনার নিজস্ব মান দিয়ে প্রতিস্থাপন করুন): 
      runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    3. ফাইলটি সংরক্ষণ করুন। তারপর, IDX এর মধ্যে টার্মিনালে, GitHub এ পরিবর্তনগুলি পুশ করতে এই কমান্ডগুলি চালান: 
      git commit -a -m "Setup Firebase Config"

git push
  3. Firebase কনসোলে ফিরে যান, এবং App Hosting পৃষ্ঠায় ফিরে যান, এবং তারপর নিম্নলিখিতগুলি করুন:
    1. আপনার ব্যাকএন্ডের জন্য ভিউ ড্যাশবোর্ডে ক্লিক করুন।
    2. লক্ষ্য করুন যে আপনার গিট পুশ থেকে একটি নতুন বিল্ড ট্রিগার করা হয়েছে! বিল্ডিং শেষ করতে এবং ক্লাউড রানে রোলআউট করতে প্রায় 3 মিনিট সময় লাগবে। আপনি build- ID চিপে ক্লিক করে এর অগ্রগতি পর্যবেক্ষণ করতে পারেন।
    3. রোলআউট সম্পন্ন হয়েছে কিনা তা পরীক্ষা করতে কনসোল পৃষ্ঠাটি রিফ্রেশ করুন। এটি সম্পন্ন হয়ে গেলে, ডোমেনের অধীনে আপনার ডোমেনের লিঙ্কে ( .hosted.app দিয়ে শেষ) ক্লিক করে এটি খুলুন এবং নতুন স্থাপন করা অ্যাপটি দেখুন!

অভিনন্দন, আপনি প্রাথমিক ওয়েব অ্যাপটি ব্যবহার করেছেন! আসুন আরও কিছু তথ্য জেনে নেওয়া যাক।

৮. একটি ব্রাউজারে ওয়েব অ্যাপটি ব্যবহার করে দেখুন

Firebase প্রমাণীকরণের মাধ্যমে আপনি লগইন করতে পারবেন কিনা তা যাচাই করুন।

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

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

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

আপনার ক্লাউড ফায়ারস্টোর ডাটাবেসে মক রেস্তোরাঁর ডেটা সন্নিবেশ করতে, নির্বাচন করুন 2cf67d488d8e6332.png সম্পর্কে > নমুনা রেস্তোরাঁ যোগ করুন ।

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

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

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

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

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

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

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

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

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

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

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

  1. জেমিনি এপিআই ব্যবহার করার জন্য, আপনার একটি এপিআই কী প্রয়োজন হবে। গুগল এআই স্টুডিওতে একটি কী তৈরি করুন ।
    অনুরোধ করা হলে, আপনি এই কোডল্যাবের জন্য যে প্রকল্পটি ব্যবহার করছেন সেই প্রকল্পটি নির্বাচন করুন (পর্দার আড়ালে, একটি ফায়ারবেস প্রকল্প হল একটি গুগল ক্লাউড প্রকল্প)।
  2. IDX এর মধ্যে টার্মিনালে, একটি নতুন গোপনীয়তা তৈরি করতে এই কমান্ডটি চালান: 
    firebase apphosting:secrets:set gemini-api-key
  3. গোপন মান জিজ্ঞাসা করা হলে, Google AI Studio থেকে আপনার Gemini API কীটি কপি করে পেস্ট করুন।
  4. যদি আপনাকে জিজ্ঞাসা করা হয়: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?" , তাহলে Yes নির্বাচন করতে Enter টিপুন।
  5. যখন জিজ্ঞাসা করা হবে যে নতুন গোপনীয়তা apphosting.yaml এ যোগ করা উচিত কিনা, তখন গ্রহণ করতে Y লিখুন, তারপর পরিবেশ ভেরিয়েবলের নাম হিসেবে GEMINI_API_KEY নির্বাচন করতে Enter টিপুন।

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

  1. apphosting.yaml ফাইলটি খুলুন এবং লক্ষ্য করুন যে আপনার গোপন নামটি রেকর্ড করা হয়েছে, কিন্তু মানগুলি নয়। এটি নিম্নলিখিতটির মতো দেখা উচিত: 
    runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    - variable: GEMINI_API_KEY
        secret: gemini-api-key

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

  1. IDX-এ, src/components/Reviews/ReviewSummary.jsx খুলুন।
  2. 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-2.5-flash-lite",
    safety_settings: [
        {
        category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
        threshold: HarmBlockThreshold.BLOCK_NONE,
        },
    ],
    });
    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>;
    }
}
  3. IDX এর মধ্যে টার্মিনালে, একটি কমিট তৈরি করতে এই কমান্ডগুলি চালান এবং এটি আপনার GitHub রিপোজিটরিতে পুশ করুন। 
    git commit -a -m "Use AI to summarize reviews"

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

১০. উপসংহার

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

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

আরও জানুন

এই অ্যাপে আমরা কীভাবে Firebase Authentication, Cloud Firestore এবং Cloud Storage for Firebase যোগ করেছি তা জানতে "Integrate Firebase with a Next.js app" সম্পূর্ণ কোডল্যাবটি খতিয়ে দেখুন।

এছাড়াও, আরও কোডল্যাব দেখুন: