Firebase 教程：从零开始构建你的第一个应用 – wiki基地

Firebase 教程：从零开始构建你的第一个应用

Firebase 是 Google 提供的移动和 Web 应用程序开发平台，它提供了一整套工具和服务，旨在帮助开发者快速构建、发布和运营高质量的应用程序。无需自己搭建服务器和处理复杂的后端逻辑，Firebase 可以简化开发流程，让你专注于用户体验和产品功能。

这篇教程将引导你从零开始，使用 Firebase 构建你的第一个应用程序。我们将涵盖 Firebase 的核心功能，包括身份验证、实时数据库、云存储和云函数，并逐步演示如何将它们集成到你的项目中。

准备工作：

在开始之前，你需要准备以下工具和账号：

• Google 账号： 这是访问 Firebase 控制台的必要条件。
• Node.js 和 npm： 用于安装 Firebase CLI 和管理项目依赖。
• 文本编辑器或 IDE： 推荐使用 VS Code、Sublime Text 或 WebStorm。
• Firebase CLI (Command Line Interface)： 用于与 Firebase 项目进行交互。
• 一个基础的 HTML/CSS/JavaScript 项目 (可选，但建议)： 可以是一个简单的静态网页，或者使用 Create React App、Vue CLI 等脚手架工具创建的项目。

第一步：创建 Firebase 项目

1. 访问 Firebase 控制台： 打开浏览器，访问 https://console.firebase.google.com/ 并使用你的 Google 账号登录。
2. 点击“添加项目”： 在 Firebase 控制台上，点击“添加项目”按钮。
3. 填写项目名称： 为你的项目输入一个名称，例如“MyFirstFirebaseApp”。你可以选择接受 Firebase 建议的项目 ID，也可以自定义一个。
4. 启用 Google Analytics (可选)： Google Analytics 可以帮助你跟踪用户行为和应用性能。你可以选择启用或禁用它。如果启用，你需要选择一个 Google Analytics 账号。
5. 创建项目： 点击“创建项目”按钮，Firebase 将开始配置你的项目。这个过程可能需要几分钟。

第二步：安装 Firebase CLI

Firebase CLI 是一个命令行工具，用于与 Firebase 项目进行交互。

1. 打开终端或命令提示符： 在你的电脑上打开终端或命令提示符。

2. 运行 npm 安装命令： 输入以下命令并按 Enter 键执行：

   bash
npm install -g firebase-tools

   -g 标志表示全局安装，这样你可以在任何地方使用 firebase 命令。

3. 登录 Firebase： 安装完成后，运行以下命令进行登录：

   bash
firebase login

   这将打开一个浏览器窗口，提示你登录你的 Google 账号并授权 Firebase CLI 访问你的 Firebase 项目。

4. 验证登录： 登录成功后，终端会显示“Successfully logged in as [你的邮箱地址]”。

第三步：初始化 Firebase 项目

1. 导航到你的项目目录： 使用 cd 命令导航到你的项目目录。例如：

   bash
cd /path/to/your/project

2. 运行 Firebase 初始化命令： 输入以下命令并按 Enter 键执行：

   bash
firebase init

3. 选择 Firebase 功能： Firebase CLI 会提示你选择要配置的 Firebase 功能。使用方向键选择以下功能，并按空格键选中它们：

   • Authentication： 用于用户身份验证。
   • Realtime Database： 用于实时数据存储。
   • Firestore： 另一个数据存储选项，更适合复杂的数据结构和查询。
   • Storage： 用于存储文件，如图片、视频等。
   • Functions： 用于部署后端代码。
   • Hosting： 用于托管你的静态网站。

   选择完成后，按 Enter 键继续。

4. 选择 Firebase 项目： Firebase CLI 会提示你选择要使用的 Firebase 项目。选择你刚才创建的项目。

5. 配置 Authentication： 如果你选择了 Authentication，Firebase CLI 会询问你是否要使用现有的身份验证提供商。选择默认选项即可。

6. 配置 Realtime Database/Firestore： 如果你选择了 Realtime Database 或 Firestore，Firebase CLI 会询问你是否要设置安全规则。选择默认选项即可。以后你可以根据需要修改这些规则。

7. 配置 Storage： 如果你选择了 Storage，Firebase CLI 会询问你要使用的 Storage Bucket。选择默认选项即可。

8. 配置 Functions： 如果你选择了 Functions，Firebase CLI 会询问你是否要使用 TypeScript 或 JavaScript。选择 JavaScript，并选择默认选项进行依赖安装。

9. 配置 Hosting： 如果你选择了 Hosting，Firebase CLI 会询问你是否要使用现有的公共目录。输入你的静态文件所在的目录，例如 public 或者 dist。如果你的项目是一个单页应用 (SPA)，Firebase CLI 还会询问你是否要将所有请求重定向到 index.html。选择 “Yes” 如果你的应用是一个 SPA。

10. 完成初始化： Firebase CLI 会完成初始化过程，并在你的项目目录中创建一些配置文件，例如 firebase.json、functions/ 等。

第四步：集成 Firebase 功能到你的应用

现在你的 Firebase 项目已经初始化完成，接下来我们将逐步演示如何将 Firebase 的核心功能集成到你的应用中。

1. 身份验证 (Authentication)

Firebase Authentication 提供了多种身份验证方法，包括电子邮件/密码、Google 账号、Facebook 账号等。

• 添加 Firebase JavaScript SDK： 首先，你需要将 Firebase JavaScript SDK 添加到你的 HTML 文件中。你可以从 Firebase 控制台获取代码片段，或者使用 npm 安装：

  bash
npm install firebase

  然后，在你的 JavaScript 文件中导入 Firebase：

  “`javascript
  import { initializeApp } from “firebase/app”;
  import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from “firebase/auth”;

  // 你的 Firebase 配置
  const firebaseConfig = {
  apiKey: “YOUR_API_KEY”,
  authDomain: “YOUR_AUTH_DOMAIN”,
  projectId: “YOUR_PROJECT_ID”,
  storageBucket: “YOUR_STORAGE_BUCKET”,
  messagingSenderId: “YOUR_MESSAGING_SENDER_ID”,
  appId: “YOUR_APP_ID”
  };

  // 初始化 Firebase
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  “`

  将 YOUR_API_KEY、YOUR_AUTH_DOMAIN 等替换为你的 Firebase 项目的配置信息。你可以在 Firebase 控制台的“项目设置”-> “常规”中找到这些信息。

• 创建用户： 使用 createUserWithEmailAndPassword 函数创建一个新用户：

  “`javascript
  const email = “[email protected]”;
  const password = “password123”;

  createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
  // 注册成功
  const user = userCredential.user;
  console.log(“用户注册成功:”, user);
  })
  .catch((error) => {
  // 注册失败
  const errorCode = error.code;
  const errorMessage = error.message;
  console.error(“用户注册失败:”, errorCode, errorMessage);
  });
  “`

• 登录用户： 使用 signInWithEmailAndPassword 函数登录一个已存在的用户：

  “`javascript
  const email = “[email protected]”;
  const password = “password123”;

  signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
  // 登录成功
  const user = userCredential.user;
  console.log(“用户登录成功:”, user);
  })
  .catch((error) => {
  // 登录失败
  const errorCode = error.code;
  const errorMessage = error.message;
  console.error(“用户登录失败:”, errorCode, errorMessage);
  });
  “`

• 注销用户： 使用 signOut 函数注销当前用户：

  javascript
signOut(auth)
.then(() => {
// 注销成功
console.log("用户已注销");
})
.catch((error) => {
// 注销失败
console.error("用户注销失败:", error);
});

• 监听用户状态： 使用 onAuthStateChanged 函数监听用户状态的变化：

  “`javascript
  import { onAuthStateChanged } from “firebase/auth”;

  onAuthStateChanged(auth, (user) => {
  if (user) {
  // 用户已登录
  const uid = user.uid;
  console.log(“用户已登录，UID:”, uid);
  } else {
  // 用户已注销
  console.log(“用户已注销”);
  }
  });
  “`

2. 实时数据库 (Realtime Database)

Firebase Realtime Database 是一个 NoSQL 云数据库，用于存储和同步实时数据。

• 添加 Firebase JavaScript SDK： 和身份验证一样，确保你已经添加了 Firebase JavaScript SDK。

• 写入数据： 使用 set 函数写入数据到数据库：

  “`javascript
  import { getDatabase, ref, set } from “firebase/database”;

  const db = getDatabase();
  set(ref(db, ‘users/’ + userId), {
  username: username,
  email: email,
  });
  “`

  这将会在 users 节点下创建一个以 userId 为键的节点，并存储 username 和 email。

• 读取数据： 使用 get 函数读取数据：

  “`javascript
  import { getDatabase, ref, get } from “firebase/database”;

  const db = getDatabase();
  const userRef = ref(db, ‘users/’ + userId);
  get(userRef).then((snapshot) => {
  if (snapshot.exists()) {
  console.log(snapshot.val());
  } else {
  console.log(“No data available”);
  }
  }).catch((error) => {
  console.error(error);
  });
  “`

• 监听数据变化： 使用 onValue 函数监听数据变化：

  “`javascript
  import { getDatabase, ref, onValue } from “firebase/database”;

  const db = getDatabase();
  const userRef = ref(db, ‘users/’ + userId);
  onValue(userRef, (snapshot) => {
  const data = snapshot.val();
  console.log(data);
  });
  “`

3. 云存储 (Cloud Storage)

Firebase Cloud Storage 用于存储文件，如图片、视频等。

• 添加 Firebase JavaScript SDK： 确保你已经添加了 Firebase JavaScript SDK。

• 上传文件： 使用 uploadBytes 函数上传文件：

  “`javascript
  import { getStorage, ref, uploadBytes } from “firebase/storage”;

  const storage = getStorage();
  const storageRef = ref(storage, ‘images/’ + imageFile.name);

  uploadBytes(storageRef, imageFile).then((snapshot) => {
  console.log(‘Uploaded a blob or file!’);
  });
  “`

• 下载文件： 使用 getDownloadURL 函数获取文件的下载 URL：

  “`javascript
  import { getStorage, ref, getDownloadURL } from “firebase/storage”;

  const storage = getStorage();
  const storageRef = ref(storage, ‘images/’ + imageName);

  getDownloadURL(storageRef)
  .then((url) => {
  // url is the download URL for ‘images/stars.jpg’
  console.log(url);
  })
  .catch((error) => {
  // Handle any errors
  });
  “`

4. 云函数 (Cloud Functions)

Firebase Cloud Functions 允许你在云端运行后端代码，无需自己搭建服务器。

• 编写函数： 在 functions/index.js 文件中编写你的函数：

  “`javascript
  const functions = require(“firebase-functions”);

  exports.helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info(“Hello logs!”, {structuredData: true});
  response.send(“Hello from Firebase!”);
  });
  “`

• 部署函数： 使用以下命令部署你的函数：

  bash
firebase deploy --only functions

  部署完成后，你可以在 Firebase 控制台的“函数”页面看到你的函数。

第五步：部署你的应用

1. 准备部署： 确保你的静态文件 (HTML、CSS、JavaScript) 位于你初始化 Firebase Hosting 时指定的公共目录中。

2. 部署应用： 运行以下命令部署你的应用：

   bash
firebase deploy --only hosting

   部署完成后，Firebase 会提供一个 URL，你可以通过该 URL 访问你的应用。

结论：

通过这篇教程，你学习了如何使用 Firebase 构建你的第一个应用程序。我们涵盖了 Firebase 的核心功能，包括身份验证、实时数据库、云存储和云函数。希望这能帮助你快速入门 Firebase，并构建出更强大的应用程序。 记住，这只是一个开始，Firebase 还有很多其他功能等待你去探索。 深入研究 Firebase 的文档，尝试不同的功能，并构建你自己的独特应用！