আপনার JavaScript প্রকল্পে Firebase যোগ করুন

আপনার ওয়েব অ্যাপে Firebase JavaScript SDK ব্যবহার করতে বা শেষ-ব্যবহারকারীর অ্যাক্সেসের জন্য ক্লায়েন্ট হিসাবে, উদাহরণস্বরূপ, Node.js ডেস্কটপ বা IoT অ্যাপ্লিকেশনে ব্যবহার করতে এই নির্দেশিকা অনুসরণ করুন।

ধাপ 1 : একটি ফায়ারবেস প্রকল্প তৈরি করুন এবং আপনার অ্যাপ নিবন্ধন করুন

আপনি আপনার JavaScript অ্যাপে Firebase যোগ করার আগে, আপনাকে একটি Firebase প্রকল্প তৈরি করতে হবে এবং সেই প্রকল্পের সাথে আপনার অ্যাপ নিবন্ধন করতে হবে। আপনি যখন আপনার অ্যাপটি Firebase-এর সাথে নিবন্ধন করবেন, তখন আপনি একটি Firebase কনফিগারেশন অবজেক্ট পাবেন যা আপনি আপনার অ্যাপটিকে আপনার Firebase প্রকল্প সংস্থানগুলির সাথে সংযুক্ত করতে ব্যবহার করবেন৷

দ্রষ্টব্য: সংস্করণ 8 Firebase SDK থেকে আপগ্রেড করছেন? আমাদের আপগ্রেড গাইড দেখুন.

Firebase প্রকল্পগুলি সম্পর্কে আরও জানতে এবং প্রকল্পগুলিতে অ্যাপগুলি যোগ করার জন্য সর্বোত্তম অনুশীলনগুলি সম্পর্কে আরও জানতে Firebase প্রকল্পগুলি বুঝতে যান৷

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

1. Firebase কনসোলে , প্রজেক্ট যোগ করুন ক্লিক করুন।

   • একটি বিদ্যমান Google Cloud প্রকল্পে Firebase সংস্থান যোগ করতে, এর প্রকল্পের নাম লিখুন বা ড্রপডাউন মেনু থেকে এটি নির্বাচন করুন৷

   • একটি নতুন প্রকল্প তৈরি করতে, পছন্দসই প্রকল্পের নাম লিখুন। এছাড়াও আপনি ঐচ্ছিকভাবে প্রকল্পের নামের নীচে প্রদর্শিত প্রকল্প ID সম্পাদনা করতে পারেন৷

     আপনার দেওয়া নামের উপর ভিত্তি করে Firebase আপনার Firebase প্রকল্পের জন্য একটি অনন্য ID তৈরি করে। আপনি যদি এই প্রোজেক্ট আইডি এডিট করতে চান, তাহলে আপনাকে এখনই করতে হবে কারণ আপনার প্রোজেক্টের জন্য Firebase সংস্থান রিসোর্সের পরে এটি পরিবর্তন করা যাবে না। ফায়ারবেস কিভাবে প্রোজেক্ট আইডি ব্যবহার করে সে সম্পর্কে জানতে ফায়ারবেস প্রজেক্ট বুঝতে দেখুন।

2. অনুরোধ করা হলে, Firebase শর্তাবলী পর্যালোচনা করুন এবং স্বীকার করুন।

3. অবিরত ক্লিক করুন.

4. (ঐচ্ছিক) আপনার প্রোজেক্টের জন্য Google Analytics সেট আপ করুন, যা আপনাকে নিম্নলিখিত Firebase পণ্যগুলির যেকোনো একটি ব্যবহার করে সর্বোত্তম অভিজ্ঞতা পেতে সক্ষম করে:

   Firebase Crashlytics Firebase Cloud Messaging

   Firebase In-App Messaging Firebase Remote Config

   Remote Config ব্যক্তিগতকরণ Firebase A/B Testing

   হয় একটি বিদ্যমান Google Analytics অ্যাকাউন্ট নির্বাচন করুন বা একটি নতুন অ্যাকাউন্ট তৈরি করুন৷

   আপনি যদি একটি নতুন অ্যাকাউন্ট তৈরি করেন, আপনার Analytics রিপোর্টিং অবস্থান নির্বাচন করুন, তারপর আপনার প্রকল্পের জন্য ডেটা শেয়ারিং সেটিংস এবং Google Analytics শর্তাদি গ্রহণ করুন৷

   আপনি সর্বদা আপনার প্রকল্প সেটিংস এর ইন্টিগ্রেশন ট্যাবে পরে Google Analytics সেট আপ করতে পারেন।

5. প্রোজেক্ট তৈরি করুন ক্লিক করুন (বা ফায়ারবেস যোগ করুন , যদি আপনি একটি বিদ্যমান Google Cloud প্রকল্প ব্যবহার করেন)।

Firebase স্বয়ংক্রিয়ভাবে আপনার Firebase প্রকল্পের জন্য সংস্থান সরবরাহ করে। প্রক্রিয়াটি সম্পূর্ণ হলে, আপনাকে Firebase কনসোলে আপনার Firebase প্রকল্পের ওভারভিউ পৃষ্ঠায় নিয়ে যাওয়া হবে।

আপনার অ্যাপ নিবন্ধন করুন

আপনার একটি ফায়ারবেস প্রজেক্ট থাকার পর, আপনি সেই প্রোজেক্টের সাথে আপনার ওয়েব অ্যাপ রেজিস্টার করতে পারেন।

1. Firebase কনসোলের প্রকল্প ওভারভিউ পৃষ্ঠার কেন্দ্রে, সেটআপ ওয়ার্কফ্লো চালু করতে ওয়েব আইকনে ( ) ক্লিক করুন।

   আপনি যদি ইতিমধ্যেই আপনার Firebase প্রকল্পে একটি অ্যাপ যোগ করে থাকেন, তাহলে প্ল্যাটফর্মের বিকল্পগুলি প্রদর্শন করতে অ্যাপ যোগ করুন- এ ক্লিক করুন।

2. আপনার অ্যাপের ডাকনাম লিখুন।
   এই ডাকনামটি একটি অভ্যন্তরীণ, সুবিধার শনাক্তকারী এবং এটি শুধুমাত্র Firebase কনসোলে আপনার কাছে দৃশ্যমান।

3. রেজিস্টার অ্যাপে ক্লিক করুন।

4. আপনার অ্যাপে Firebase SDK যোগ করতে এবং শুরু করতে অন-স্ক্রীন নির্দেশাবলী অনুসরণ করুন।

   আপনি এই শুরু করার পৃষ্ঠার পরবর্তী ধাপগুলিতে Firebase SDK যোগ, শুরু এবং ব্যবহার করার জন্য আরও বিশদ নির্দেশাবলী খুঁজে পেতে পারেন।

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

ধাপ 2 : SDK ইনস্টল করুন এবং Firebase শুরু করুন

এই পৃষ্ঠাটি Firebase JS SDK-এর মডুলার API-এর সেটআপ নির্দেশাবলী বর্ণনা করে, যা একটি জাভাস্ক্রিপ্ট মডিউল ফর্ম্যাট ব্যবহার করে।

এই ওয়ার্কফ্লোটি npm ব্যবহার করে এবং এর জন্য মডিউল বান্ডলার বা জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক টুলিংয়ের প্রয়োজন হয় কারণ মডিউল এপিআই অব্যবহৃত কোড (ট্রি-কাঁপানো) এবং SDK আকার হ্রাস করতে মডিউল বান্ডলারের সাথে কাজ করার জন্য অপ্টিমাইজ করা হয়েছে।

দ্রষ্টব্য: মডুলার API ব্যবহার করা দৃঢ়ভাবে সুপারিশ করা হয়, বিশেষ করে উৎপাদন অ্যাপের জন্য। যদি window.firebase মতো অন্য উপায়ে API-কে কল করার জন্য আপনার সমর্থনের প্রয়োজন হয়, তাহলে নেমস্পেসযুক্ত API থেকে মডুলার API-তে আপগ্রেড করুন বা Firebase যোগ করার বিকল্প উপায় দেখুন।

1. npm ব্যবহার করে Firebase ইনস্টল করুন:

   npm install firebase

2. আপনার অ্যাপে ফায়ারবেস শুরু করুন এবং একটি ফায়ারবেস অ্যাপ অবজেক্ট তৈরি করুন:

   import { initializeApp } from 'firebase/app';
   
   // TODO: Replace the following with your app's Firebase project configuration
   const firebaseConfig = {
     //...
   };
   
   const app = initializeApp(firebaseConfig);

   একটি ফায়ারবেস অ্যাপ হল একটি ধারক-সদৃশ বস্তু যা সাধারণ কনফিগারেশন সঞ্চয় করে এবং Firebase পরিষেবা জুড়ে প্রমাণীকরণ শেয়ার করে। আপনি আপনার কোডে একটি Firebase অ্যাপ অবজেক্ট শুরু করার পরে, আপনি Firebase পরিষেবাগুলি যোগ করতে এবং ব্যবহার শুরু করতে পারেন।

   আপনার অ্যাপে সার্ভার-সাইড রেন্ডারিং (SSR) এর উপর ভিত্তি করে গতিশীল বৈশিষ্ট্য অন্তর্ভুক্ত থাকলে, সার্ভার রেন্ডারিং এবং ক্লায়েন্ট রেন্ডারিং পাস জুড়ে আপনার কনফিগারেশন টিকে থাকে তা নিশ্চিত করতে আপনাকে কিছু অতিরিক্ত পদক্ষেপ নিতে হবে। আপনার সার্ভারের যুক্তিতে, পরিষেবা কর্মীদের সাথে আপনার অ্যাপের সেশন ম্যানেজমেন্ট অপ্টিমাইজ করতে FirebaseServerApp ইন্টারফেসটি প্রয়োগ করুন৷

   আপনি কি ESM ব্যবহার করেন এবং ব্রাউজার মডিউল ব্যবহার করতে চান? নিম্নলিখিত প্যাটার্ন ব্যবহার করতে আপনার সমস্ত import লাইন প্রতিস্থাপন করুন:
   import { } from 'https://www.gstatic.com/firebasejs/10.14.0/firebase- SERVICE .js'
   (যেখানে SERVICE হল একটি SDK নাম যেমন firebase-firestore )।

   ব্রাউজার মডিউল ব্যবহার করা শুরু করার একটি দ্রুত উপায়, তবে আমরা উত্পাদনের জন্য একটি মডিউল বান্ডলার ব্যবহার করার পরামর্শ দিই।

ধাপ 3 : আপনার অ্যাপে ফায়ারবেস অ্যাক্সেস করুন

ফায়ারবেস পরিষেবাগুলি (যেমন Cloud Firestore , Authentication , Realtime Database , Remote Config এবং আরও অনেক কিছু) পৃথক সাব-প্যাকেজের মধ্যে আমদানি করার জন্য উপলব্ধ৷

নীচের উদাহরণটি দেখায় যে আপনি কীভাবে ডেটার একটি তালিকা পুনরুদ্ধার করতে Cloud Firestore লাইট SDK ব্যবহার করতে পারেন৷

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

ধাপ 4 : আকার কমানোর জন্য একটি মডিউল বান্ডলার (ওয়েবপ্যাক/রোলআপ) ব্যবহার করুন

দ্রষ্টব্য: আপনি যদি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক CLI টুল যেমন Angular CLI , Next.js , Vue CLI , বা Create React অ্যাপ ব্যবহার করেন তাহলে আপনি এই ধাপটি এড়িয়ে যেতে পারেন। আরও তথ্যের জন্য মডিউল বান্ডলিং সম্পর্কে আমাদের গাইড দেখুন।

ফায়ারবেস ওয়েব SDK-কে মডিউল বান্ডলারের সাথে কাজ করার জন্য ডিজাইন করা হয়েছে যেকোন অব্যবহৃত কোড (গাছ কাঁপানো) মুছে ফেলার জন্য। আমরা দৃঢ়ভাবে প্রোডাকশন অ্যাপের জন্য এই পদ্ধতি ব্যবহার করার পরামর্শ দিই। Angular CLI , Next.js , Vue CLI , বা Create React অ্যাপের মতো টুলগুলি npm এর মাধ্যমে ইনস্টল করা এবং আপনার কোডবেসে আমদানি করা লাইব্রেরির জন্য স্বয়ংক্রিয়ভাবে মডিউল বান্ডলিং পরিচালনা করে৷

আরও তথ্যের জন্য ফায়ারবেসের সাথে মডিউল বান্ডলার ব্যবহার করে আমাদের গাইড দেখুন।

ওয়েবের জন্য উপলব্ধ ফায়ারবেস পরিষেবা

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

নিম্নলিখিত কমান্ডগুলি দেখায় যে কীভাবে npm সাথে স্থানীয়ভাবে ইনস্টল করা ফায়ারবেস লাইব্রেরিগুলি আমদানি করতে হয়। বিকল্প আমদানি বিকল্পের জন্য, উপলব্ধ লাইব্রেরি ডকুমেন্টেশন দেখুন।

• ওয়েবের জন্য বিশ্লেষণ

  'firebase/analytics' থেকে { } আমদানি করুন;

• ওয়েবের জন্য প্রমাণীকরণ

  'firebase/auth' থেকে { } আমদানি করুন;

• ওয়েবের জন্য ক্লাউড ফায়ারস্টোর

  'firebase/firestore' থেকে { } আমদানি করুন;

• ওয়েবের জন্য ক্লাউড ফাংশন

  'ফায়ারবেস/ফাংশন' থেকে { } আমদানি করুন;

• ওয়েবের জন্য ক্লাউড মেসেজিং

  'ফায়ারবেস/মেসেজিং' থেকে { } আমদানি করুন;

• ওয়েবের জন্য ক্লাউড স্টোরেজ

  'ফায়ারবেস/স্টোরেজ' থেকে { } আমদানি করুন;

• ওয়েবের জন্য পারফরম্যান্স মনিটরিং

  'firebase/performance' থেকে { } আমদানি করুন;

• ওয়েবের জন্য রিয়েলটাইম ডাটাবেস

  'firebase/database' থেকে { } আমদানি করুন;

• ওয়েবের জন্য রিমোট কনফিগ

  'firebase/remote-config' থেকে { } আমদানি করুন;

• ওয়েবের জন্য অ্যাপ চেক করুন

  'firebase/app-check' থেকে { } আমদানি করুন;

• ওয়েবের জন্য Vertex AI in Firebase

  'firebase/vertexai-preview' থেকে { } আমদানি করুন;

পরবর্তী পদক্ষেপ

ফায়ারবেস সম্পর্কে জানুন:

• ফায়ারবেস অ্যাপের নমুনা অন্বেষণ করুন।

• Firebase ওয়েব কোডল্যাবের সাথে অভিজ্ঞতা অর্জন করুন।

• GitHub-এ ওপেন সোর্স কোড অন্বেষণ করুন।

• Firebase JavaScript SDK-এর জন্য সমর্থিত পরিবেশ পর্যালোচনা করুন।

• AngularFire , RxFire , এবং ওয়েবের জন্য FirebaseUI এর মতো অতিরিক্ত Firebase-রক্ষণাবেক্ষণ করা ওপেন সোর্স লাইব্রেরিগুলির সাথে আপনার বিকাশের গতি বাড়ান৷

• আপনার অ্যাপ চালু করার জন্য প্রস্তুত করুন:

  • Google Cloud কনসোলে আপনার প্রকল্পের জন্য বাজেট সতর্কতা সেট আপ করুন।
  • একাধিক Firebase পরিষেবা জুড়ে আপনার প্রকল্পের ব্যবহারের সামগ্রিক চিত্র পেতে Firebase কনসোলে ব্যবহার এবং বিলিং ড্যাশবোর্ড নিরীক্ষণ করুন৷
  • Firebase লঞ্চ চেকলিস্ট পর্যালোচনা করুন।