Bạn có thể 🔎 cách thêm Firebase 🔥 vào dự án của mình hoặc có thể bạn đã biết cách thực hiện điều đó. Một điều bạn biết chắc chắn là phải mất hơn 100 giây. Tuy nhiên, điều gì sẽ xảy ra nếu tôi nói với bạn rằng bạn có thể thêm Firebase vào 🆕 mới hoặc dự án Flutter hiện có của mình trong vòng chưa đầy 💯 giây? 😱 Nghe có vẻ quá tốt để có thể tin là sự thật phải không? Vâng, hãy theo tôi, và tôi sẽ chứng minh điều đó cho bạn!

Bước 1: Cài đặt Firebase CLI

Trước khi bắt đầu, hãy đảm bảo bạn đã cài đặt Firebase CLI trên máy của mình. Nếu không, chỉ cần chạy lệnh sau để cài đặt nó trên toàn cầu:

npm install -g firebase-tools

note:
Nếu bạn đang dùng Mac hoặc Linux 🐧 và chưa cài đặt Node.js, bạn có thể cài đặt Firebase CLI bằng lệnh sau:

curl -sL https://firebase.tools | bash

Chạy lệnh sau để đăng nhập vào tài khoản Firebase của bạn:

firebase login

Hãy kiểm tra nó bằng lệnh sau để hiển thị tất cả các dự án được liên kết với tài khoản Firebase của bạn:

firebase projects:list

Tiếp theo kích hoạt FlutterFire CLI bằng cách chạy lệnh sau

dart pub global activate flutterfire_cli

Nếu bạn đang dùng Mac, nó có thể hiển thị cho bạn một cảnh báo 👇

warning: pub installs executables into $HOME/.pub-cache/bin, which is not on your path. You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.)
export PATH="$PATH":$HOME/pub-cache/bin"

Để giải quyết cảnh báo này, trước tiên, bạn cần xác định mình đang sử dụng shell nào.

echo $SHELL

Lệnh này sẽ xuất đường dẫn đến shell mà bạn hiện đang sử dụng, chẳng hạn như /bin/bash, /bin/zsh hoặc shell khác.
Dựa trên shell bạn đang sử dụng, tệp cấu hình sẽ khác nhau:

  1. Đối với Bash, tệp cấu hình thường là ~/.bashrc hoặc ~/.bash_profile.
  2. Đối với Zsh, tệp cấu hình là ~/.zshrc.

Bây giờ bạn đã biết đường dẫn, bạn có thể sử dụng trình soạn thảo văn bản như nano hoặc vim. Ví dụ: nếu bạn đang sử dụng Zsh và muốn chỉnh sửa tệp ~/.zshrc, hãy chạy lệnh sau:

nano ~/.zshrc

Thêm đường dẫn và lưu nó

export PATH="$PATH": "$HOME/.pub-cache/bin"

Bước 2: Thêm Firebase vào ứng dụng Flutter mới hoặc hiện có

Bạn có tùy chọn tích hợp Firebase vào dự án Flutter mới hoặc dự án hiện có. Trong hướng dẫn này, tôi sẽ trình diễn cách thêm Firebase vào bộ giao diện người dùng FlutterShop . Bộ giao diện người dùng này đi kèm với hơn 100 màn hình dựng sẵn giúp bạn tạo bất kỳ loại ứng dụng thương mại điện tử nào bằng Flutter. Bằng cách sử dụng FlutterShop, ứng dụng của bạn sẽ có giao diện chuyên nghiệp và tiết kiệm tới 70% thời gian phát triển. Bạn có thể tải xuống mã nguồn miễn phí hoặc xem bản demo trực tiếp .

Sau khi tải xuống dự án, hãy mở nó trong IDE ưa thích của bạn. Tiếp theo, thêm firebase_core gói vào dự án của bạn. Hoặc, bạn có thể thực thi lệnh sau từ thư mục dự án Flutter của mình để cài đặt gói:

flutter pub add firebase_core

Chúng ta gần đến rồi! Để kết nối dự án Flutter của bạn với Firebase, chỉ cần thực hiện lệnh duy nhất này từ thư mục dự án Flutter của bạn:

flutterfire configure

Bạn có tùy chọn sử dụng dự án hiện có hoặc tạo dự án mới. 🔄 Đối với bản demo này, hãy tạo một dự án mới và đặt tên cho nó. FlutterShop-100s-challenge Khi tạo dự án, chúng tôi sẽ chọn nền tảng mà chúng tôi muốn sử dụng. Sau khi hoàn tất, khi kiểm tra lib thư mục, bạn sẽ phát hiện ra một tệp mới có tên firebase_options.dart được tạo bởi FlutterFire CLI. 📂 Thật ấn tượng phải không? Bây giờ, hãy quay lại main.dart tập tin. Chúng ta sẽ tiến hành bằng cách chuyển đổi hàm chính thành hàm không đồng bộ và khởi tạo Firebase bằng cách sử dụng DefaultFirebaseOptions.

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);

Và chúng ta đã hoàn thành việc tích hợp Firebase 🔥. Bây giờ, giả sử bạn muốn tích hợp Firebase vào một dự án khác. Tất cả những gì bạn cần làm là thực thi flutterfir configure lệnh từ thư mục của dự án đó và thế là xong.