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

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

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

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

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

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

পূর্বশর্ত

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

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

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

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

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

2. আপনার উন্নয়ন পরিবেশ এবং GitHub সংগ্রহস্থল সেট আপ করুন

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

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

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

  1. এই কোডল্যাবের জন্য একটি নতুন গিটহাব সংগ্রহস্থল তৈরি করুন: 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-এ, মেনু > টার্মিনাল > নতুন টার্মিনাল ব্যবহার করে টার্মিনাল খুলুন।
  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 সংগ্রহস্থলে স্টার্টার কোডটি দেখতে হবে।

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

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

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

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

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

বর্ণনা

src/components

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

src/lib

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

src/lib/firebase

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

public

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

src/app

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

src/app/restaurant

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

package.json এবং package-lock.json

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

next.config.js

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

jsconfig.json

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

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

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

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

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

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

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

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

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

উপহাস তথ্য

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

এছাড়াও আপনি CLI ব্যবহার করতে পারেন Firestore-এর জন্য ( firestore.indexes.json এ) সূচীগুলির একটি সেট মোতায়েন করতে উন্নত প্রশ্নগুলি সক্ষম করতে৷

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

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

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

অভিনন্দন, আপনি প্রাথমিক ওয়েব অ্যাপ স্থাপন করেছেন! এর আরো একটু খনন করা যাক.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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-1.5-flash",
    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. একটি নতুন পর্যালোচনা যোগ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। আপনি সারাংশ পরিবর্তন দেখতে হবে.

10. উপসংহার

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

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

আরও জানুন

কিভাবে আমরা এই অ্যাপে Firebase প্রমাণীকরণ, ক্লাউড ফায়ারস্টোর এবং ক্লাউড স্টোরেজ যোগ করেছি তা জানতে সম্পূর্ণ কোডল্যাব "একটি Next.js অ্যাপের সাথে Firebase ইন্টিগ্রেট করুন"-এ খনন করুন।

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