เรียนรู้การใช้งาน Firebase | สำหรับผู้เริ่มต้น [FULL COURSE]

Introduction

This tutorial is designed for beginners looking to learn how to use Firebase, a powerful backend-as-a-service platform. Firebase provides a variety of tools and services that help developers build high-quality apps, including databases, authentication, cloud storage, and hosting. This guide will walk you through the essential components of Firebase, along with practical advice for getting started.

Step 1: Understanding Firebase

• What is Firebase?

  • Firebase is a platform developed by Google for creating mobile and web applications.
  • It offers a variety of services, including real-time databases, cloud storage, authentication, and hosting.

• Why Use Firebase?

  • Easy to integrate with various technologies.
  • Provides real-time data syncing.
  • Scalable and reliable hosting solutions.

Step 2: Setting Up Firebase

• Create a Firebase Project

  • Go to the Firebase Console.
  • Click on "Add Project" and follow the prompts to create a new project.

• Add Firebase SDK to Your Project

  • For web apps:
    • Include the Firebase library in your HTML file:

      <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js"></script>
      <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-auth.js"></script>
      

    • Initialize Firebase in your JavaScript file:

      const firebaseConfig = {
          apiKey: "YOUR_API_KEY",
          authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
          projectId: "YOUR_PROJECT_ID",
          storageBucket: "YOUR_PROJECT_ID.appspot.com",
          messagingSenderId: "YOUR_SENDER_ID",
          appId: "YOUR_APP_ID"
      };
      firebase.initializeApp(firebaseConfig);
      

Step 3: Using Cloud Firestore

• What is Cloud Firestore?

  • A NoSQL database that allows you to store and sync data for your apps.

• Setting Up Firestore

  • In the Firebase Console, click "Firestore Database" and create a database.
  • Choose "Start in Test Mode" for initial development.

• Basic Operations

  • Add Data

    const db = firebase.firestore();
    db.collection("users").add({
        name: "John Doe",
        email: "johndoe@example.com"
    });
    

  • Read Data

    db.collection("users").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            console.log(doc.id, " => ", doc.data());
        });
    });
    

Step 4: Implementing Firebase Authentication

• Overview of Firebase Authentication

  • Provides a way to manage user authentication in your app.

• Setting Up Authentication

  • In the Firebase Console, navigate to "Authentication" and enable the sign-in methods you wish to use (e.g., Email/Password).

• Registering a User

  firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
          // User registered
      })
      .catch((error) => {
          console.error(error);
      });
  

• Logging In a User

  firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
          // User logged in
      })
      .catch((error) => {
          console.error(error);
      });
  

Step 5: Using Cloud Storage

• What is Cloud Storage?

  • A service for storing user-generated content like photos, videos, and other files.

• Setting Up Cloud Storage

  • In the Firebase Console, click on "Storage" and set up the storage rules.

• Uploading Files

  const storageRef = firebase.storage().ref();
  const fileRef = storageRef.child('images/myImage.png');
  fileRef.put(file).then((snapshot) => {
      console.log('Uploaded a blob or file!');
  });
  

Step 6: Deploying with Firebase Hosting

• What is Firebase Hosting?

  • A service that provides fast and secure hosting for web apps.

• Deploying Your App

  • Install Firebase CLI:

    npm install -g firebase-tools
    

  • Initialize Firebase in your project directory:

    firebase init
    

  • Deploy your app:

    firebase deploy
    

Conclusion

In this tutorial, you learned the fundamental concepts of Firebase and how to set it up for your web applications. You explored Cloud Firestore, Firebase Authentication, Cloud Storage, and Hosting. By following these steps, you can build robust applications with real-time features. As a next step, consider exploring Firebase's advanced features and integrating them into your projects for enhanced functionality.