Thứ sáu, 27/09/2019 | 00:00 GMT+7

Cách thiết lập Firebase với Flutter cho Ứng dụng iOS và Android

In this article we'll look at how to set up Firebase with our Flutter apps to take advantage of auth, databases, analytics, and more.

Firebase là một giải pháp backend tuyệt vời cho bất kỳ ai muốn sử dụng xác thực, database , chức năng cloud , quảng cáo và vô số tính năng khác trong một ứng dụng. May mắn cho ta , Flutter đã hỗ trợ chính thức cho Firebase với bộ thư viện FlutterFire .

Vì ta đang xử lý (các) nền tảng iOS và Android, ta sẽ phải thực hiện quá trình cài đặt cho cả hai. Hãy bắt đầu bằng cách đảm bảo ta đã tạo một dự án Firebase tại https://console.firebase.google.com .

Tạo một dự án Flutter mới

Để theo dõi quá trình cài đặt , ta sẽ tạo một ứng dụng Flutter mẫu. Giả sử bạn đã cài đặt Flutter và Dart SDK, hãy chạy phần sau trong terminal của bạn:

# New Flutter application $ flutter create flutter_firebase  # Open this up inside of VS Code $ cd flutter_firebase && code . 

Bây giờ ta đã có một dự án Flutter và đang chạy, ta có thể thêm Firebase.

Tạo một dự án Firebase mới

Từ trong trang tổng quan Firebase, hãy chọn nút “Tạo dự án mới” và đặt tên cho dự án:

Tạo một dự án mới

Tiếp theo, ta được cung cấp tùy chọn để bật Google Analytics. Nó không cần thiết trực tiếp cho những gì ta đang cố gắng làm, vì vậy hãy làm bất cứ điều gì cảm thấy phù hợp với trường hợp sử dụng của bạn tại đây.

Phân tích Firebase

Giả sử rằng ta đang sử dụng Google Analytics, ta cần xem xét và chấp nhận các điều khoản và điều kiện trước khi tạo dự án.


Sau một quá trình cài đặt tương đối dễ dàng, bây giờ ta sẽ được chuyển đến trang tổng quan cho dự án của bạn .

Thêm hỗ trợ Android

Bước 1: Đăng ký ứng dụng

Để thêm hỗ trợ Android vào ứng dụng Flutter của ta , hãy chọn biểu trưng Android từ trang tổng quan. Điều này đưa ta đến màn hình sau:

Thêm hỗ trợ Android

Điều quan trọng nhất ở đây là khớp tên gói Android mà bạn chọn ở đây với tên bên trong ứng dụng của ta . Cấu trúc của nó được thực hiện như sau: com.example.app .

Khi bạn đã quyết định tên, hãy truy cập android/app/build.gradle và cập nhật applicationId để phù hợp với điều này:

defaultConfig {     // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).     applicationId "io.paulhalliday.myapp" } 

Bạn có thể bỏ qua khóa ký tên và gỡ lỗi ở giai đoạn này. Chọn “Đăng ký ứng dụng” để tiếp tục.

Bước 2: Download file cấu hình

Bước tiếp theo là thêm file cấu hình Firebase vào dự án Flutter của ta . Điều này rất quan trọng vì nó chứa các khóa API và thông tin quan trọng khác để Firebase sử dụng.

Chọn “ Download google-services.json ” từ trang này.

 Download  file  cấu hình

Khi bạn đã có, hãy lấy file và đặt nó vào bên trong folder android/app trong dự án Flutter.

Bước 3: Thêm SDK Firebase

Bây giờ ta cần cập nhật cấu hình Gradle của bạn để bao gồm plugin Dịch vụ của Google. Mở android/build.gradle và sửa đổi nó để bao gồm những điều sau:

buildscript {   repositories {     // Check that you have the following line (if not, add it):     google()  // Google's Maven repository   }   dependencies {     ...     // Add this line     classpath 'com.google.gms:google-services:4.3.2'   } }  allprojects {   ...   repositories {     // Check that you have the following line (if not, add it):     google()  // Google's Maven repository     ...   } } 

Cuối cùng, cập nhật file cấp ứng dụng tại android/app/build.gradle để bao gồm những điều sau:

apply plugin: 'com.android.application'  dependencies {   // add the Firebase SDK for Google Analytics   implementation 'com.google.firebase:firebase-analytics:17.2.0'   // add SDKs for any other desired Firebase products   // https://firebase.google.com/docs/android/setup#available-libraries } ... // Add to the bottom of the file apply plugin: 'com.google.gms.google-services' 

Với bản cập nhật này, ta đang chủ yếu áp dụng các dịch vụ của Google cắm cũng như nhìn vào cách plugin Flutter căn cứ hỏa lực khác có thể được kích hoạt như Analytics.

Từ đây, chạy ứng dụng của bạn trên thiết bị Android hoặc trình mô phỏng. Nếu mọi thứ đã hoạt động bình thường, bạn sẽ nhận được thông báo sau trong trang tổng quan:

Đã thêm thành công Firebase

Tiếp theo, hãy thêm hỗ trợ iOS!

Thêm hỗ trợ iOS

Để thêm hỗ trợ Firebase cho iOS, ta phải làm theo một bộ hướng dẫn tương tự.

Quay lại trang tổng quan và chọn Add app , sau đó chọn biểu tượng iOS để được chuyển đến quá trình cài đặt .

Bước 1: Đăng ký ứng dụng

, ta cần thêm ID gói iOS mà tôi đang giữ giống như Android để có tính nhất quán:

Bước 1: iOS

Sau đó, bạn cần đảm bảo điều này trùng với nhau bằng cách mở dự án iOS trong Xcode tại ios/Runner/Runner.xcodeproj và thay đổi số Bundle identifier trong General :

Bước 1:  Group  số nhận dạng

Nhấp vào “Đăng ký ứng dụng” để chuyển sang màn hình tiếp theo.

Bước 2: Download file cấu hình

Trong bước này, ta cần download file cấu hình và thêm file này vào dự án Xcode của ta .

Bước 2:  Download  cấu hình

Download GoogleService-Info.plist và kéo nó vào folder root của dự án Xcode của bạn trong Runner :

Bước 2: Thêm cấu hình

Điều quan trọng là bạn không chỉ cần kéo nó vào folder mà không thông qua Xcode, vì điều này sẽ không hoạt động.

Đó là nó! Bạn cũng sẽ rất vui khi biết rằng ta có thể bỏ qua các bước còn lại từ đây trở đi.

Kết luận

Bây giờ ta đã học cách cài đặt và sẵn sàng sử dụng các ứng dụng Flutter của ta với Firebase trong tương lai gần.

Trong các bài viết tới, ta sẽ xem xét cách sử dụng các tính năng của Firebase như Cloud Firestore, Authentication, Analytics, v.v. với Flutter.


Tags:

Các tin liên quan