اضافه کردن فایربیس به برنامه فلاتر


پیش‌نیازها

اگر از قبل برنامه Flutter ندارید، می‌توانید با استفاده از ویرایشگر یا IDE مورد نظر خود ، مرحله شروع به کار: تست درایو را تکمیل کنید تا یک برنامه Flutter جدید ایجاد کنید.

مرحله ۱ : ابزارهای خط فرمان مورد نیاز را نصب کنید

  1. اگر هنوز رابط خط فرمان Firebase CLI) را نصب نکرده‌اید، آن را نصب کنید .

  2. با استفاده از حساب گوگل خود و با اجرای دستور زیر وارد Firebase شوید:

    firebase login

  3. با اجرای دستور زیر از هر دایرکتوری، FlutterFire CLI را نصب کنید:

    dart pub global activate flutterfire_cli

مرحله ۲ : برنامه‌های خود را برای استفاده از Firebase پیکربندی کنید

از رابط خط فرمان FlutterFire برای پیکربندی برنامه‌های Flutter خود جهت اتصال به Firebase استفاده کنید.

از دایرکتوری پروژه Flutter خود، دستور زیر را برای شروع گردش کار پیکربندی برنامه اجرا کنید:

flutterfire configure


مرحله 3 : Firebase را در برنامه خود مقداردهی اولیه کنید

  1. از دایرکتوری پروژه Flutter خود، دستور زیر را برای نصب افزونه اصلی اجرا کنید:

    flutter pub add firebase_core

  2. از دایرکتوری پروژه Flutter خود، دستور زیر را اجرا کنید تا مطمئن شوید که پیکربندی Firebase برنامه Flutter شما به‌روز است:

    flutterfire configure

  3. در فایل lib/main.dart خود، افزونه هسته Firebase و فایل پیکربندی که قبلاً ایجاد کرده‌اید را وارد کنید:

    import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

  4. همچنین در فایل lib/main.dart خود، Firebase را با استفاده از شیء DefaultFirebaseOptions که توسط فایل پیکربندی صادر شده است، مقداردهی اولیه کنید:

    WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());

  5. برنامه Flutter خود را بازسازی کنید:

    flutter run

اگر ترجیح می‌دهید از یک پروژه آزمایشی استفاده کنید، می‌توانید شبیه‌ساز Firebase را اجرا کنید و در فایل lib/main.dart خود، Firebase را با استفاده demoProjectId (که باید با demo- شروع شود) مقداردهی اولیه کنید:

  await Firebase.initializeApp(
    demoProjectId: "demo-project-id",
  );

مرحله ۴ : افزونه‌های فایربیس را اضافه کنید

شما در برنامه Flutter خود از طریق افزونه‌های مختلف Firebase Flutter به Firebase دسترسی پیدا می‌کنید، که برای هر محصول Firebase (به عنوان مثال: Cloud Firestore ، Authentication ، Analytics و غیره) یکی است.

از آنجایی که فلاتر یک فریم‌ورک چند پلتفرمی است، هر افزونه فایربیس برای پلتفرم‌های اپل، اندروید و وب قابل استفاده است. بنابراین، اگر هر افزونه فایربیس را به برنامه فلاتر خود اضافه کنید، توسط نسخه‌های اپل، اندروید و وب برنامه شما استفاده خواهد شد.

در اینجا نحوه اضافه کردن افزونه Firebase Flutter آورده شده است:

  1. از دایرکتوری پروژه Flutter خود، دستور زیر را اجرا کنید: 

    flutter pub add PLUGIN_NAME

  2. از دایرکتوری پروژه Flutter خود، دستور زیر را اجرا کنید: 

    flutterfire configure

    اجرای این دستور تضمین می‌کند که پیکربندی Firebase برنامه Flutter شما به‌روز است و برای Crashlytics و Performance Monitoring در اندروید، افزونه‌های Gradle مورد نیاز را به برنامه شما اضافه می‌کند.

  3. پس از اتمام، پروژه Flutter خود را از نو بسازید: 

    flutter run

همه چیز آماده است! برنامه‌های Flutter شما برای استفاده از Firebase ثبت و پیکربندی شده‌اند.

افزونه‌های موجود

محصول نام افزونه آی‌او‌اس اندروید وب اپل دیگر
(مک او اس و غیره)		 ویندوز
منطق هوش مصنوعی فایربیس ۱ firebase_ai
بتا
Analytics firebase_analytics
بتا
App Check firebase_app_check
بتا
Authentication firebase_auth
بتا بتا
Cloud Firestore cloud_firestore
بتا بتا
Cloud Functions cloud_functions
بتا
Cloud Messaging firebase_messaging
بتا
Cloud Storage firebase_storage
بتا بتا
Crashlytics firebase_crashlytics
بتا
Data Connect firebase_data_connect
Dynamic Links firebase_dynamic_links
In-App Messaging firebase_in_app_messaging
نصب Firebase firebase_app_installations
بتا
دانلودکننده مدل ML firebase_ml_model_downloader
بتا
Performance Monitoring firebase_performance
Realtime Database firebase_database
بتا
Remote Config firebase_remote_config
بتا

منطق هوش مصنوعی فایربیس قبلاً با افزونه firebase_vertexai « هوش مصنوعی ورتکس در فایربیس » نامیده می‌شد.

یک برنامه نمونه با Analytics را امتحان کنید

مانند همه بسته‌ها، افزونه firebase_analytics با یک برنامه نمونه ارائه می‌شود.

  1. یک برنامه Flutter را که قبلاً برای استفاده از Firebase پیکربندی کرده‌اید، باز کنید (به دستورالعمل‌های این صفحه مراجعه کنید).

  2. به دایرکتوری lib برنامه دسترسی پیدا کنید، سپس فایل main.dart موجود را حذف کنید.

  3. از مخزن برنامه نمونه Google Analytics ، دو فایل زیر را در دایرکتوری lib برنامه خود کپی و پیست کنید:

    • main.dart
    • tabs_page.dart

  4. برنامه Flutter خود را اجرا کنید.

  5. به پروژه Firebase برنامه خود در کنسول Firebase بروید، سپس در منوی سمت چپ روی Analytics کلیک کنید.

    1. روی داشبورد کلیک کنید. اگر Analytics به درستی کار کند، داشبورد یک کاربر فعال را در پنل «کاربران فعال در ۳۰ دقیقه گذشته» نشان می‌دهد (ممکن است پر کردن این پنل کمی طول بکشد).

    2. روی DebugView کلیک کنید. این ویژگی را فعال کنید تا تمام رویدادهای تولید شده توسط برنامه نمونه را ببینید.

برای اطلاعات بیشتر در مورد راه‌اندازی Analytics ، به راهنماهای شروع به کار برای iOS+ ، اندروید و وب مراجعه کنید.

نکاتی در مورد ساخت برنامه‌های وب

پشتیبانی از انواع قابل اعتماد

کیت توسعه نرم‌افزار فایربیس برای فلاتر از استفاده از انواع قابل اعتماد (Trusted Types) برای جلوگیری از حملات XSS مبتنی بر DOM (سمت کلاینت) پشتیبانی می‌کند. وقتی اجرای نوع قابل اعتماد (Trusted Type enforcement) را برای برنامه خود فعال می‌کنید ، کیت توسعه نرم‌افزار فایربیس اسکریپت‌های خود را با استفاده از سیاست‌های نوع قابل اعتماد سفارشی، به نام‌های flutterfire-firebase_core ، flutterfire-firebase_auth و غیره، به DOM تزریق می‌کند.

تزریق خودکار SDK جاوا اسکریپت فایربیس را غیرفعال کنید

به طور پیش‌فرض، کیت توسعه نرم‌افزاری فایربیس فلاتر (Firebase Flutter SDK) هنگام ساخت برنامه برای وب، کیت توسعه نرم‌افزاری فایربیس جاوااسکریپت را به صورت خودکار تزریق می‌کند. اگر نمی‌خواهید کیت توسعه نرم‌افزاری فایربیس جاوااسکریپت به صورت خودکار تزریق شود، می‌توانید موارد زیر را انجام دهید:

  1. با اضافه کردن ویژگی زیر درون یک تگ <script> در فایل web/index.html در پروژه Flutter خود، اسکریپت تزریق خودکار را نادیده بگیرید: 

    <!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
<!-- Put in the names of all the plugins you wish to ignore: -->
window.flutterfire_ignore_scripts = ['analytics', 'firestore'];

  2. اسکریپت را به صورت دستی با استفاده از یکی از گزینه‌های زیر بارگذاری کنید:

    • SDK را به طور صریح به فایل web/index.html خود، درون تابع فراخوانی window.addEventListener اضافه کنید: 

        window.addEventListener('load', async function (ev) {
    window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/12.7.0/firebase-firestore.js");
    window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/12.7.0/firebase-analytics.js");

    _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
      // rest of the code

    • یا، کد Firebase JavaScript SDK افزونه را از دامنه "gstatic" دانلود کنید و آنها را در یک فایل جاوا اسکریپت ذخیره کنید تا در پروژه شما نگهداری شود و به صورت دستی بارگذاری شود: 

        // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file: 
  window.addEventListener('load', async function (ev) {
    window.firebase_analytics = await import("./my-analytics.js");
    window.firebase_firestore = await import("./my-firestore.js");

    _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
      // rest of the code

مراحل بعدی