Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

เพิ่ม Firebase ในโปรเจ็กต์ JavaScript ของคุณ

ทำตามคำแนะนำนี้เพื่อใช้ Firebase JavaScript SDK ในเว็บแอปของคุณหรือเป็นไคลเอนต์สำหรับการเข้าถึงของผู้ใช้ปลายทางเช่นในเดสก์ท็อป Node.js หรือแอปพลิเคชัน IoT

ข้อกำหนดเบื้องต้น

  • ติดตั้งโปรแกรมแก้ไขหรือ IDE ที่คุณต้องการ

  • ลงชื่อเข้า ใช้ Firebase โดยใช้บัญชี Google ของคุณ

หากคุณยังไม่มีโปรเจ็กต์ JavaScript และเพียงแค่ต้องการทดลองใช้ผลิตภัณฑ์ Firebase คุณสามารถดาวน์โหลดหนึ่งใน ตัวอย่างการเริ่มต้นอย่างรวดเร็ว ของเรา

ขั้นตอนที่ 1 : สร้างโครงการ Firebase

ก่อนที่คุณจะสามารถเพิ่ม Firebase ลงในแอป JavaScript คุณต้องสร้างโครงการ Firebase เพื่อเชื่อมต่อกับแอปของคุณ

ไปที่ ทำความเข้าใจกับโครงการ Firebase เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับโครงการ Firebase และแนวทางปฏิบัติที่ดีที่สุดในการเพิ่มแอปลงในโครงการ

ขั้นตอนที่ 2 : ลงทะเบียนแอปของคุณกับ Firebase

หลังจากที่คุณมีโปรเจ็กต์ Firebase คุณสามารถเพิ่มเว็บแอปของคุณลงไปได้

ไปที่ ทำความเข้าใจกับโครงการ Firebase เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดและข้อควรพิจารณาในการเพิ่มแอปในโครงการ Firebase

  1. ตรงกลาง หน้าภาพรวมโครงการของคอนโซล Firebase ให้คลิกไอคอน เว็บ ( ) เพื่อเปิดเวิร์กโฟลว์การตั้งค่า

    หากคุณได้เพิ่มแอปลงในโครงการ Firebase แล้วให้คลิก เพิ่มแอป เพื่อแสดงตัวเลือกแพลตฟอร์ม

  2. ป้อนชื่อเล่นแอปของคุณ
    ชื่อเล่นนี้เป็นตัวระบุความสะดวกภายในและมีคุณเท่านั้นที่มองเห็นได้ในคอนโซล Firebase

  3. (ไม่บังคับ) ตั้งค่า Firebase Hosting สำหรับเว็บแอปของคุณ

    • คุณสามารถตั้งค่า Firebase Hosting ได้ในตอนนี้หรือใน ภายหลัง คุณยังสามารถเชื่อมโยง Firebase Web App กับไซต์โฮสติ้งได้ตลอดเวลาใน การตั้งค่าโปรเจ็กต์ ของคุณ

    • หากคุณเลือกที่จะตั้งค่าโฮสติ้งในตอนนี้ให้เลือกไซต์จากรายการแบบเลื่อนลงเพื่อเชื่อมโยงกับ Firebase Web App ของคุณ

      • รายการนี้แสดงไซต์โฮสติ้งเริ่มต้นของโปรเจ็กต์ของคุณและ ไซต์อื่น ๆ ที่คุณได้ตั้งค่าไว้ในโปรเจ็กต์ของคุณ

      • ไซต์ใด ๆ ที่คุณเชื่อมโยงกับ Firebase Web App แล้วจะไม่พร้อมใช้งานสำหรับการเชื่อมโยงเพิ่มเติม ไซต์โฮสติ้งแต่ละไซต์สามารถเชื่อมโยงกับ Firebase Web App ได้เพียงแอปเดียว

  4. คลิก ลงทะเบียนแอป

ขั้นตอนที่ 3 : เพิ่ม Firebase SDK และเริ่มต้น Firebase

Firebase มีไลบรารี JavaScript สำหรับผลิตภัณฑ์ Firebase ส่วนใหญ่รวมถึง Remote Config, FCM และอื่น ๆ คุณสามารถเพิ่ม ไลบรารี ใดก็ได้ที่ มีให้ กับแอปของคุณ

วิธีที่คุณเพิ่ม Firebase SDK ลงในเว็บแอปของคุณนั้นขึ้นอยู่กับว่าคุณเลือกใช้โฮสติ้ง Firebase สำหรับแอปของคุณหรือไม่คุณใช้เครื่องมืออะไรกับแอปของคุณ (เช่นโมดูลบันเดิลเลอร์) หรือหากคุณกำลังกำหนดค่า Node.js แอป สำหรับความช่วยเหลือเพิ่มเติมในการเลือกระหว่างทางเลือกเหล่านี้โปรดดู วิธีเพิ่ม Web SDK ลงในแอปของคุณ

หากคุณสนใจที่จะทดลองใช้ Beta SDK ใหม่ที่ ปรับให้เหมาะกับการพัฒนาแอปแบบโมดูลาร์ให้เลือกตัวเลือกสำหรับเวอร์ชัน 9 (เบต้า) โปรดทราบว่าไม่มีภาระหน้าที่ในการสนับสนุนทางเทคนิคในรุ่นเบต้า

ด้วย npm

คุณสามารถกำหนดค่าการนำเข้า Firebase JavaScript SDK บางส่วนและโหลดเฉพาะผลิตภัณฑ์ Firebase ที่คุณต้องการ หากคุณใช้บันเดิลเลอร์ (เช่น Browserify หรือ webpack) คุณสามารถ import ผลิตภัณฑ์ Firebase แต่ละรายการได้เมื่อต้องการ

  1. ติดตั้ง Firebase JavaScript SDK:

    1. หากคุณยังไม่มีไฟล์ package.json ให้สร้างขึ้นมาโดยเรียกใช้คำสั่งต่อไปนี้จากรูทของโปรเจ็กต์ JavaScript ของคุณ:

      npm init

    2. ติดตั้ง firebase แพคเกจ NPM และบันทึกไปยังคุณ package.json ไฟล์โดยการทำงาน:

      npm install --save firebase

  2. หากต้องการรวม เฉพาะผลิตภัณฑ์ Firebase ที่เฉพาะเจาะจง (เช่นการตรวจสอบสิทธิ์และ Cloud Firestore) ให้ import โมดูล Firebase:

    // 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. เริ่มต้น Firebase ในแอปของคุณ:

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

จาก CDN

คุณสามารถกำหนดค่าการนำเข้า Firebase JavaScript SDK บางส่วนและโหลดเฉพาะผลิตภัณฑ์ Firebase ที่คุณต้องการ Firebase เก็บไลบรารีของ Firebase JavaScript SDK ไว้บน CDN ทั่วโลกของเรา (เครือข่ายการจัดส่งเนื้อหา)

  1. หากต้องการรวม เฉพาะผลิตภัณฑ์ Firebase ที่เฉพาะเจาะจง (เช่น Authentication และ Cloud Firestore) ให้เพิ่มสคริปต์ต่อไปนี้ที่ด้านล่างของแท็ก <body> แต่ก่อนที่คุณจะใช้บริการ Firebase:

    <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.5.0/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.5.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-firestore.js"></script>
    </body>
    


  2. เริ่มต้น Firebase ในแอปของคุณ:

    <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>
    

จาก Hosting URLs

เมื่อคุณใช้ Firebase Hosting คุณสามารถกำหนดค่าแอปของคุณให้โหลดไลบรารี Firebase JavaScript SDK แบบไดนามิกจาก URL ที่สงวนไว้ เรียนรู้เพิ่มเติมเกี่ยวกับ การเพิ่ม SDK ผ่าน Hosting URL ที่สงวนไว้

ด้วยตัวเลือกการตั้งค่านี้หลังจากที่คุณ ปรับใช้กับ Firebase แล้วแอปของคุณจะดึงออบเจ็กต์การกำหนดค่า Firebase จากโครงการ Firebase ที่คุณทำให้ใช้งานได้โดยอัตโนมัติ คุณปรับใช้โค้ดเบสเดียวกันกับโปรเจ็กต์ Firebase หลายโปรเจ็กต์ได้ แต่ไม่ต้องติดตามการกำหนดค่า Firebase ที่คุณใช้กับ firebase.initializeApp()

ตัวเลือกการตั้งค่านี้ยังใช้ได้กับ การทดสอบเว็บแอปของคุณใน เครื่อง

  1. หากต้องการรวม เฉพาะผลิตภัณฑ์ Firebase ที่เฉพาะเจาะจง (เช่น Analytics, การตรวจสอบสิทธิ์หรือ Cloud Firestore) ให้เพิ่มสคริปต์ต่อไปนี้ที่ด้านล่างของแท็ก <body> ของคุณ แต่ก่อนที่คุณจะใช้บริการ Firebase:

    <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.5.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.5.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.5.0/firebase-auth.js"></script>
      <script src="/__/firebase/8.5.0/firebase-firestore.js"></script>
    </body>
    


  2. เริ่มต้น Firebase ในแอปของคุณ (ไม่จำเป็นต้องรวมออบเจ็กต์การกำหนดค่า Firebase ของคุณเมื่อใช้ URL ของโฮสติ้งที่สงวนไว้):

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

แอป Node.js

  1. ติดตั้ง Firebase JavaScript SDK:

    1. หากคุณยังไม่มีไฟล์ package.json ให้สร้างขึ้นมาโดยเรียกใช้คำสั่งต่อไปนี้จากรูทของโปรเจ็กต์ JavaScript ของคุณ:

      npm init
    2. ติดตั้ง firebase แพคเกจ NPM และบันทึกไปยังคุณ package.json ไฟล์โดยการทำงาน:

      npm install --save firebase
  2. ใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้เพื่อใช้โมดูล Firebase ในแอปของคุณ:

    • คุณสามารถ require โมดูลจากไฟล์ JavaScript ใดก็ได้

      ในการรวม เฉพาะผลิตภัณฑ์ Firebase ที่เฉพาะเจาะจง (เช่นการตรวจสอบสิทธิ์และ Cloud Firestore):

      // 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");
      


    • คุณสามารถใช้ ES2015 เพื่อ import โมดูล

      ในการรวม เฉพาะผลิตภัณฑ์ Firebase ที่เฉพาะเจาะจง (เช่นการตรวจสอบสิทธิ์และ Cloud Firestore):

      // 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. เริ่มต้น Firebase ในแอปของคุณ:

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

เรียนรู้เกี่ยวกับออบเจ็กต์การกำหนดค่า Firebase

ในการเริ่มต้น Firebase ในแอปของคุณคุณต้องระบุการกำหนดค่าโครงการ Firebase ของแอป คุณสามารถ รับออบเจ็กต์การกำหนดค่า Firebase ได้ทุกเมื่อ

  • หากคุณใช้ Hosting URL ที่สงวนไว้การกำหนดค่า Firebase ของคุณจะถูกดึงออกจากโปรเจ็กต์ Firebase โดยอัตโนมัติดังนั้นคุณไม่จำเป็นต้องระบุออบเจ็กต์การกำหนดค่าอย่างชัดเจนในโค้ด

  • เราไม่แนะนำให้แก้ไขออบเจ็กต์การกำหนดค่าด้วยตนเองโดยเฉพาะ "ตัวเลือก Firebase" ที่จำเป็นต่อไปนี้: apiKey , projectId และ appID หากคุณเริ่มต้นแอปด้วยค่าที่ไม่ถูกต้องหรือขาดหายไปสำหรับ "ตัวเลือก Firebase" ที่จำเป็นเหล่านี้ผู้ใช้แอปของคุณอาจประสบปัญหาร้ายแรง

  • หากคุณเปิดใช้งาน Google Analytics ในโปรเจ็กต์ Firebase ของคุณออบเจ็กต์การกำหนด measurementId ของคุณจะมีฟิลด์ measurementId เรียนรู้เพิ่มเติมเกี่ยวกับฟิลด์นี้ใน หน้าเริ่มต้น ใช้งาน Analytics

นี่คือรูปแบบของออบเจ็กต์การกำหนดค่าที่เปิดใช้งานบริการทั้งหมด (ค่าเหล่านี้จะถูกเติมโดยอัตโนมัติ):

// 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",
};

นี่คือวัตถุ config ที่มีค่า ตัวอย่าง :

// 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 : (ไม่บังคับ) ติดตั้ง CLI และปรับใช้กับ Firebase Hosting

หากคุณเชื่อมโยง Firebase Web App กับไซต์ Firebase Hosting คุณสามารถปรับใช้เนื้อหาและการกำหนดค่าของเว็บไซต์ได้ทันที (เมื่อตั้งค่า Web App) หรือในภายหลัง

ในการปรับใช้กับ Firebase คุณจะต้องใช้ Firebase CLI ซึ่งเป็นเครื่องมือบรรทัดคำสั่ง

  1. ไปที่เอกสาร Firebase CLI เพื่อเรียนรู้วิธี ติดตั้ง CLI หรือ อัปเดตเป็นเวอร์ชันล่าสุด

  2. เริ่มต้นโครงการ Firebase ของคุณ รันคำสั่งต่อไปนี้จากรูทของไดเร็กทอรีแอปภายในของคุณ:

    firebase init

  3. ปรับใช้เนื้อหาและการกำหนดค่าโฮสติ้งของคุณกับโฮสติ้ง Firebase

    ไซต์โฮสติ้งเริ่มต้น

    โดยค่าเริ่มต้นทุกโครงการ Firebase มีโดเมนย่อยฟรีบน web.app และ firebaseapp.com โดเมน ( PROJECT_ID .web.app และ PROJECT_ID .firebaseapp.com )

    1. ปรับใช้กับไซต์ของคุณ เรียกใช้คำสั่งต่อไปนี้จากไดเรกทอรีรากของแอปของคุณ:

      firebase deploy
    2. ดูไซต์ของคุณที่ไซต์เริ่มต้นของคุณ:

      • PROJECT_ID .web.app
      • PROJECT_ID .firebaseapp.com

    ไซต์โฮสติ้งที่ไม่ใช่ค่าเริ่มต้น

    โครงการ Firebase รองรับ หลายไซต์ (ถือว่าเป็น ไซต์ที่ไม่ใช่ไซต์เริ่มต้น ของคุณ) คุณสามารถเพิ่มไซต์เพิ่มเติมในโปรเจ็กต์ของคุณได้ในระหว่างเวิร์กโฟลว์การตั้งค่า Web App ของคอนโซลหรือจาก หน้าโฮสติ้ง ของคอนโซล

    1. เพิ่มไซต์ของคุณลงใน ไฟล์ firebase.json ของคุณ (ซึ่งสร้างขึ้นระหว่างการ firebase init )

      โปรดทราบว่าการกำหนดค่า firebase.json นี้ถือว่าคุณมีที่เก็บแยกกันสำหรับแต่ละไซต์ของคุณ

      {
        "hosting": {
          "site": "SITE_ID",
          "public": "public",
      
          // ...
        }
      }
      
    2. ปรับใช้กับไซต์ของคุณ เรียกใช้คำสั่งต่อไปนี้จากไดเรกทอรีรากของแอปของคุณ:

      firebase deploy --only hosting:SITE_ID
    3. ดูไซต์ของคุณได้ที่:

      • SITE_ID .web.app
      • SITE_ID .firebaseapp.com

ขั้นตอนที่ 5 : เข้าถึง Firebase ในแอปของคุณ

Firebase JavaScript SDK รองรับผลิตภัณฑ์ Firebase ต่อไปนี้ แต่ละผลิตภัณฑ์เป็นทางเลือกและสามารถเข้าถึงได้ดังที่แสดง

เรียนรู้เกี่ยวกับวิธีการที่ใช้ได้ใน เอกสารอ้างอิง Firebase JavaScript

ผลิตภัณฑ์ Firebase เนมสเปซ (v8 และต่ำกว่า) เว็บ โหนด js
การวิเคราะห์ firebase.analytics()
การรับรองความถูกต้อง firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions สำหรับ Firebase Client SDK firebase.functions()
การส่งข้อความบนคลาวด์ firebase.messaging()
การจัดเก็บเมฆ firebase.storage()
การตรวจสอบประสิทธิภาพ ( รุ่นเบต้า ) firebase.performance()
ฐานข้อมูลเรียลไทม์ firebase.database()
การกำหนดค่าระยะไกล ( รุ่นเบต้า ) firebase.remoteConfig()

ห้องสมุดที่มีอยู่

ขั้นตอนถัดไป

เรียนรู้เกี่ยวกับ Firebase:

เพิ่มบริการ Firebase ในแอปของคุณ:

  • โฮสต์แอปของคุณด้วย โฮสติ้ง Firebase

  • ตั้งค่าขั้นตอนการพิสูจน์ตัวตนผู้ใช้ด้วยการ พิสูจน์ตัว ตน

  • จัดเก็บข้อมูลเช่นข้อมูลผู้ใช้ด้วย Cloud Firestore หรือ Realtime Database

  • จัดเก็บไฟล์เช่นภาพถ่ายและวิดีโอด้วย Cloud Storage

  • รับข้อมูลเชิงลึกเกี่ยวกับปัญหาด้านประสิทธิภาพของแอปด้วย การตรวจสอบประสิทธิภาพ

  • ทริกเกอร์โค้ดแบ็กเอนด์ที่ทำงานในสภาพแวดล้อมที่ปลอดภัยด้วย Cloud Functions

  • ส่งการแจ้งเตือนด้วย Cloud Messaging