Google is committed to advancing racial equity for Black communities. See how.
This page was translated by the Cloud Translation API.
Switch to English

আপনার জাভাস্ক্রিপ্ট প্রকল্পে ফায়ারবেস যুক্ত করুন

আপনার ওয়েব অ্যাপে ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে ব্যবহার করতে বা শেষ-ব্যবহারকারী অ্যাক্সেসের ক্লায়েন্ট হিসাবে ব্যবহার করতে এই গাইড অনুসরণ করুন, উদাহরণস্বরূপ, নোড.জেএস ডেস্কটপ বা আইওটি অ্যাপ্লিকেশনটিতে।

পূর্বশর্ত

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

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

আপনি আপনার জাভাস্ক্রিপ্ট অ্যাপে ফায়ারবেস যুক্ত করার আগে আপনার অ্যাপ্লিকেশনে সংযোগ করার জন্য আপনাকে ফায়ারবেস প্রকল্প তৈরি করতে হবে।

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

পদক্ষেপ 2 : ফায়ারবেস দিয়ে আপনার অ্যাপ্লিকেশন নিবন্ধন করুন

আপনার ফায়ারবেস প্রকল্পের পরে, আপনি এটিতে আপনার ওয়েব অ্যাপ যুক্ত করতে পারেন।

ফায়ারবেস প্রকল্পে অ্যাপ্লিকেশন যুক্ত করার জন্য সর্বোত্তম অনুশীলন এবং বিবেচনা সম্পর্কে আরও জানতে ফায়ারবেস প্রকল্পগুলি বোঝা দেখুন।

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

    যদি আপনি ইতিমধ্যে আপনার ফায়ারবেস প্রকল্পে একটি অ্যাপ যুক্ত করেছেন, প্ল্যাটফর্মের বিকল্পগুলি প্রদর্শন করতে অ্যাপ্লিকেশন যুক্ত করুন ক্লিক করুন।

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

  3. ( Alচ্ছিক ) আপনার ওয়েব অ্যাপ্লিকেশনটির জন্য ফায়ারবেস হোস্টিং সেট আপ করুন।

    • আপনি এখন বা পরে ফায়ারবেস হোস্টিং সেট আপ করতে পারেন। আপনি আপনার প্রকল্প সেটিংসে যে কোনও সময় আপনার ফায়ারবেস ওয়েব অ্যাপটিকে একটি হোস্টিং সাইটের সাথে লিঙ্ক করতে পারেন।

    • আপনি যদি এখনই হোস্টিং আপ সেট আপ করতে চান, আপনার ফায়ারবেস ওয়েব অ্যাপ্লিকেশনটিতে লিঙ্ক করতে ড্রপডাউন তালিকা থেকে একটি সাইট নির্বাচন করুন।

      • এই তালিকাটি আপনার প্রকল্পের ডিফল্ট হোস্টিং সাইট এবং আপনার প্রকল্পে সেটআপ করা অন্য কোনও সাইট প্রদর্শন করে।

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

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

পদক্ষেপ 3 : ফায়ারবেস এসডিকে যুক্ত করুন এবং ফায়ারবেস শুরু করুন

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

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

মডিউল বান্ডিলার ব্যবহার করে

আপনি ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে আংশিক আমদানি কনফিগার করতে পারেন এবং কেবল আপনার প্রয়োজন ফায়ারবেস পণ্য লোড করতে পারেন। আপনি যদি কোনও বান্ডলার ব্যবহার করেন (যেমন ব্রাউজারফি বা ওয়েবপ্যাক), আপনি প্রয়োজনে পৃথক ফায়ারবেস পণ্য import করতে পারেন।

  1. ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে ইনস্টল করুন:

    1. আপনার যদি ইতিমধ্যে package.json ফাইল না থাকে তবে আপনার জাভাস্ক্রিপ্ট প্রকল্পের মূল থেকে নিম্নলিখিত কমান্ডটি চালিয়ে একটি তৈরি করুন:

      npm init

    2. ইনস্টল করুন firebase npm প্যাকেজ এবং আপনার সংরক্ষণ package.json চালিয়ে ফাইল:

      npm install --save firebase

  2. শুধুমাত্র নির্দিষ্ট ফায়ারবেস পণ্য (যেমন প্রমাণীকরণ এবং ক্লাউড ফায়ার স্টোর) অন্তর্ভুক্ত করতে, ফায়ারবেস মডিউলগুলি import :

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // If you enabled Analytics in your project, add the Firebase SDK for Analytics
    import "firebase/analytics";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/firestore";
    
  3. আপনার অ্যাপে ফায়ারবেস শুরু করুন:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

সিডিএন থেকে

আপনি ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে আংশিক আমদানি কনফিগার করতে পারেন এবং কেবল আপনার প্রয়োজন ফায়ারবেস পণ্য লোড করতে পারেন। ফায়ারবেস ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে প্রতিটি লাইব্রেরি আমাদের গ্লোবাল সিডিএন (সামগ্রী বিতরণ নেটওয়ার্ক) এ সঞ্চয় করে।

  1. কেবলমাত্র নির্দিষ্ট ফায়ারবেস পণ্য অন্তর্ভুক্ত করতে (উদাহরণস্বরূপ, প্রমাণীকরণ এবং ক্লাউড ফায়ার স্টোর), আপনার <body> ট্যাগের নীচে নিম্নলিখিত স্ক্রিপ্টগুলি যুক্ত করুন, তবে আপনি কোনও ফায়ারবেস পরিষেবা ব্যবহার করার আগে:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-firestore.js"></script>
    </body>
    


  2. আপনার অ্যাপে ফায়ারবেস শুরু করুন:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <script>
        // TODO: Replace the following with your app's Firebase project configuration
        // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

হোস্টিং ইউআরএল থেকে

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

এই সেটআপ বিকল্পের সাহায্যে, আপনি ফায়ারবেসে মোতায়েন করার পরে, আপনার অ্যাপ্লিকেশনটি ফায়ারবেস প্রকল্প থেকে ফায়ারবেস কনফিগারেশন অবজেক্টটিকে স্বয়ংক্রিয়ভাবে টানবে যেখানে আপনি মোতায়েন করেছেন। আপনি একই কোডবেস একাধিক ফায়ারবেস প্রকল্পগুলিতে স্থাপন করতে পারেন তবে ফায়ারবেস কনফিগারেশন যা আপনি firebase.initializeApp() ব্যবহার করছেন তা ট্র্যাক করতে হবে না।

এই সেটআপ বিকল্পটি স্থানীয়ভাবে আপনার ওয়েব অ্যাপ্লিকেশন পরীক্ষার জন্যও কাজ করে।

  1. কেবলমাত্র নির্দিষ্ট ফায়ারবেস পণ্য (উদাহরণস্বরূপ, অ্যানালিটিক্স, প্রমাণীকরণ, বা ক্লাউড ফায়ার স্টোর) অন্তর্ভুক্ত করতে আপনার <body> ট্যাগের নীচে নিম্নলিখিত স্ক্রিপ্টগুলি যুক্ত করুন, তবে আপনি কোনও ফায়ারবেস পরিষেবা ব্যবহার করার আগে:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.2.10/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.2.10/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.2.10/firebase-auth.js"></script>
      <script src="/__/firebase/8.2.10/firebase-firestore.js"></script>
    </body>
    


  2. আপনার অ্যাপে ফায়ারবেস শুরু করুন (সংরক্ষিত হোস্টিং ইউআরএলগুলি ব্যবহার করার সময় আপনার ফায়ারবেস কনফিগারেশন অবজেক্টটি অন্তর্ভুক্ত করার দরকার নেই):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

নোড.জেএস অ্যাপস

  1. ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে ইনস্টল করুন:

    1. আপনার যদি ইতিমধ্যে package.json ফাইল না থাকে তবে আপনার জাভাস্ক্রিপ্ট প্রকল্পের মূল থেকে নিম্নলিখিত কমান্ডটি চালিয়ে একটি তৈরি করুন:

      npm init
    2. ইনস্টল করুন firebase npm প্যাকেজ এবং আপনার সংরক্ষণ package.json চালিয়ে ফাইল:

      npm install --save firebase
  2. আপনার অ্যাপে ফায়ারবেস মডিউলটি ব্যবহার করতে নিম্নলিখিত বিকল্পগুলির মধ্যে একটি ব্যবহার করুন:

    • আপনার যে কোনও জাভাস্ক্রিপ্ট ফাইল থেকে মডিউলগুলির require হতে require

      কেবলমাত্র নির্দিষ্ট ফায়ারবেস পণ্য (যেমন প্রমাণীকরণ এবং ক্লাউড ফায়ার স্টোর) অন্তর্ভুক্ত করতে:

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • মডিউল import করতে আপনি E2012015 ব্যবহার করতে পারেন

      শুধুমাত্র নির্দিষ্ট ফায়ারবেস পণ্য (যেমন প্রমাণীকরণ এবং ক্লাউড ফায়ার স্টোর) অন্তর্ভুক্ত করতে:

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. আপনার অ্যাপে ফায়ারবেস শুরু করুন:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

ফায়ারবেস কনফিগারেশন অবজেক্ট সম্পর্কে জানুন

আপনার অ্যাপ্লিকেশনটিতে ফায়ারবেস আরম্ভ করার জন্য আপনার অ্যাপ্লিকেশনটির ফায়ারবেস প্রকল্প কনফিগারেশন সরবরাহ করতে হবে। আপনি যে কোনও সময় আপনার ফায়ারবেস কনফিগারেশন অবজেক্টটি পেতে পারেন।

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

  • আমরা আপনার কনফিগার বস্তুটি ম্যানুয়ালি সম্পাদনা করার প্রস্তাব দিই না, বিশেষত নিম্নলিখিত প্রয়োজনীয় " apiKey বিকল্পগুলি": apiKey , projectId এবং appID । আপনি যদি এই প্রয়োজনীয় "ফায়ারবেস বিকল্পগুলি" এর জন্য অবৈধ বা অনুপস্থিত মানগুলির সাথে আপনার অ্যাপ্লিকেশনটি আরম্ভ করেন তবে আপনার অ্যাপ্লিকেশনটির ব্যবহারকারীরা গুরুতর সমস্যার সম্মুখীন হতে পারেন।

  • আপনি যদি নিজের ফায়ারবেস প্রকল্পে গুগল অ্যানালিটিকাগুলি সক্ষম করে থাকেন তবে আপনার কনফিগার অবজেক্টে ক্ষেত্রের measurementId আইডি রয়েছে। বিশ্লেষণ শুরু করার পৃষ্ঠায় এই ক্ষেত্রটি সম্পর্কে আরও জানুন।

সমস্ত পরিষেবাদি সক্ষম থাকা কনফিগার অবজেক্টের ফর্ম্যাটটি এখানে রয়েছে (এই মানগুলি স্বয়ংক্রিয়ভাবে জনবহুল হয়):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

উদাহরণস্বরূপ মানগুলির সাথে এখানে একটি কনফিগার অবজেক্ট রয়েছে:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

পদক্ষেপ 4 : ( ptionচ্ছিক ) সিএলআই ইনস্টল করুন এবং ফায়ারবেস হোস্টিং স্থাপন করুন

যদি আপনি আপনার ফায়ারবেস ওয়েব অ্যাপ্লিকেশনটিকে ফায়ারবেস হোস্টিং সাইটের সাথে সংযুক্ত করেন তবে আপনি এখনই (আপনার ওয়েব অ্যাপ্লিকেশনটি সেটআপ করার সময়) বা যে কোনও সময় আপনার সাইটের সামগ্রী এবং কনফিগারেশন স্থাপন করতে পারেন।

ফায়ারবেসে স্থাপন করার জন্য, আপনি কমান্ড-লাইন সরঞ্জাম ফায়ারবেস সিএলআই ব্যবহার করবেন।

  1. কীভাবে সিএমএল ইনস্টল করবেন বা তার সর্বশেষ সংস্করণে আপডেট করবেন তা শিখতে ফায়ারবেস সিএলআই ডকুমেন্টেশন দেখুন।

  2. আপনার ফায়ারবেস প্রকল্প শুরু করুন। আপনার স্থানীয় অ্যাপ্লিকেশন ডিরেক্টরিটির মূল থেকে নিম্নলিখিত কমান্ডটি চালান:

    firebase init

  3. আপনার সামগ্রী এবং হোস্টিং কনফিগারেশন ফায়ারবেস হোস্টিং স্থাপন করুন।

    ডিফল্ট হোস্টিং সাইট

    ডিফল্টরূপে, প্রতিটি web.app project-id .web.app web.app এবং firebaseapp.com web.app ডোমেনগুলিতে ( project-id .web.app এবং project-id .firebaseapp.com ) ফ্রি সাবডোমেন থাকে।

    1. আপনার সাইটে স্থাপন করুন। আপনার অ্যাপের মূল ডিরেক্টরি থেকে নিম্নলিখিত কমান্ডটি চালান:

      firebase deploy
    2. আপনার ডিফল্ট সাইটগুলির একটিতে আপনার সাইটটি দেখুন:

      • project-id .web.app
      • project-id .firebaseapp.com

    অ-ডিফল্ট হোস্টিং সাইট

    ফায়ারবেস প্রকল্পগুলি একাধিক সাইটগুলিকে সমর্থন করে (এগুলি আপনার অ-ডিফল্ট সাইট হিসাবে বিবেচিত হয়)। কনসোলের ওয়েব অ্যাপ সেটআপ ওয়ার্কফ্লো বা কনসোলের হোস্টিং পৃষ্ঠা থেকে আপনি আপনার প্রকল্পে অতিরিক্ত সাইট যুক্ত করতে পারেন।

    1. আপনার firebase.json ফাইলে আপনার সাইট যুক্ত করুন (যা firebase init সময় তৈরি হয়েছিল)।

      নোট করুন যে এই firebase.json কনফিগারেশনটি ধরে নিয়েছে যে আপনার প্রতিটি সাইটের জন্য পৃথক সংগ্রহস্থল রয়েছে।

      {
        "hosting": {
          "site": "site-name>",
          "public": "public",
      
          // ...
        }
      }
      
    2. আপনার সাইটে স্থাপন করুন। আপনার অ্যাপের মূল ডিরেক্টরি থেকে নিম্নলিখিত কমান্ডটি চালান:

      firebase deploy --only hosting:site-name
    3. আপনার সাইটটি একটিতে দেখুন:

      • site-name .web.app
      • site-name .firebaseapp.com

পদক্ষেপ 5 : আপনার অ্যাপ্লিকেশন ফায়ারবেস অ্যাক্সেস

ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে নিম্নলিখিত ফায়ারবেস পণ্যগুলিকে সমর্থন করে। প্রতিটি পণ্য firebase এবং firebase নেমস্পেস থেকে অ্যাক্সেস করা যায়।

ফায়ারবেস জাভাস্ক্রিপ্ট রেফারেন্স ডকুমেন্টেশনে উপলব্ধ পদ্ধতিগুলি সম্পর্কে জানুন।

ফায়ারবেস পণ্য নেমস্পেস ওয়েব নোড.জেএস
বিশ্লেষণ firebase.analytics()
প্রমাণীকরণ firebase.auth()
ক্লাউড ফায়ার স্টোর firebase.firestore()
ফায়ারবেস ক্লায়েন্ট এসডিকে জন্য ক্লাউড ফাংশন firebase.functions()
ক্লাউড মেসেজিং firebase.messaging()
মেঘ স্টোরেজ firebase.storage()
পারফরম্যান্স মনিটরিং ( বিটা রিলিজ) firebase.performance()
রিয়েলটাইম ডাটাবেস firebase.database()
রিমোট কনফিগারেশন ( বিটা রিলিজ) firebase.remoteConfig()

উপলব্ধ গ্রন্থাগারগুলি

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

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

আপনার অ্যাপ্লিকেশনটিতে ফায়ারবেস পরিষেবা যুক্ত করুন: