使用 Flutter 和 Firebase 制作！计数器应用程序

使用 Flutter 和 Firebase 制作！计数器应用程序

目录

1️⃣Flutter 概述和特点

什么是Flutter？

Flutter是一个由谷歌开发的开源应用程序框架。

Flutter官网

使用 Flutter 和 Firebase 制作！计数器应用程序_第1张图片

Flutter的特点

  • 只需一段代码就能为多个平台创建应用程序，包括Android, iOS, Web, Windows, MacOS和Linux。
  • 轻松访问 Material Design
  • UI是使用小工具的组合来构建的
  • 使用Dart作为开发语言
  • 热重载功能实现了快速开发

Flutter的文档

Flutter/Dart有一套完整的官方文档。
这里有一些例子

关于如何开发Flutter应用程序的文档。
Flutter官方文档

使用 Flutter 和 Firebase 制作！计数器应用程序_第2张图片

Flutter API参考

FlutterAPI参考

使用 Flutter 和 Firebase 制作！计数器应用程序_第3张图片

Dart 包搜索站点

Dart 包搜索站点

使用 Flutter 和 Firebase 制作！计数器应用程序_第4张图片

此外，Flutter一年比一年受欢迎，除了官方文档外，许多开发者在其他网站上整理了一些通俗易懂的文章，可以作为开发的参考。

2️⃣Firebase 概览和服务列表

什么是Firebase？

Firebase是谷歌提供的一个移动后台服务（mBaaS）。

Firebase可以很容易地将数据存储和通过云同步、应用认证、消息通知、应用分析和性能测量等功能添加到移动应用。

Firebase 服务列表

名称 内容
A/B Testing 轻松运行并分析产品和营销测试
Analytics 应用分析功能
App Check 为应用程序数据提供保护
App Distribution 将应用程序分发到测试人员
Firebase Authentication 易于建立的用户认证
Cloud Firestore NoSQL 数据库构建无服务器
Cloud Functions for Firebase 无服务器运行后端代码
Firebase Cloud Messaging 发送和接收推送消息
Firebase Crashlytics 跟踪应用稳定性问题
Dynamic Links 提供对本机应用程序链接内容的直接导航
Firebase Extensions Firebase 扩展
Firebase Hosting 网站部署
Firebase In-App Messaging 发送有针对性的上下文消息
Firebase ML 为应用程序提供机器学习功能
Firebase Performance Monitoring 获取性能分析
Firebase Realtime Database 可以保存为 JSON 格式的数据库
Firebase Remote Config 允许功能的动态变化
Cloud Storage for Firebase 保存用户创建的内容
Test lab 在虚拟设备上验证您的应用

Firebase的费用

有两种收费方案

产品 价格 备注
Spark 方案 免费 由于是小规模的产品，所以受到限制
Blaze 方案 随用随付 用于大规模的产品

有关每个方案的限制和详细价格，请参见官方网站。

使用 Flutter 和 Firebase 制作！计数器应用程序_第5张图片

3️⃣开发环境

关于开发此计数器应用程序的环境。

对于与以下不同的环境，代码可能会有所不同。

项目 内容
PC Macbook Air(M1)
Flutter 3.0.4
Firebase CLI 11.2.2
FlutterFire 0.2.4
模拟器 Android 12(API 31), Chrome

4️⃣准备编码

安装Flutter

要安装Flutter，请参考官方网站。

使用 Flutter 和 Firebase 制作！计数器应用程序_第6张图片

创建计数器应用程序

首先，初始化Flutter应用程序并创建一个计数器应用程序。

flutter create counter_firebase

Firebase CLI的设置

参照官方文档，安装Firebase CLI

使用 Flutter 和 Firebase 制作！计数器应用程序_第7张图片
这里有几种安装方法，但你也可以实用npm来进行安装

npm install -g firebase-tools

此后，按照官方文件进行

使用 Flutter 和 Firebase 制作！计数器应用程序_第8张图片

首先，登录到firebase，全局启用flutterfire_cli

firebase login
dart pub global activate flutterfire_cli

从Firebase Console创建一个项目

此时应启用Google Analytics

使用 Flutter 和 Firebase 制作！计数器应用程序_第9张图片
将你的应用程序连接到Firebase

flutterfire configure

选择如下

# 选择项目
? Select a Firebase project to configure your Flutter application with ›
❯ counterfirebase-*** (counterFirebase)

# 平台选择。 检查是否都打了勾
? Which platforms should your configuration support (use arrow keys & space to select)? ›
✔ android
✔ ios
✔ macos
✔ web

# android/build.gradle是否更新
? The files android/build.gradle & android/app/build.gradle will be updated to apply Firebase configuration and gradle build plugins. Do you want to continue? (y/n) › yes

在pubspe.yaml中加入firebase_core

dependencies:
  firebase_core: ^1.19.2

确保Firebase的配置是最新的

flutterfire configure

在main.dart中安装并初始化Firebase包

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

以下是已完成的应用程序的屏幕截图

使用 Flutter 和 Firebase 制作！计数器应用程序_第10张图片

小结总结

以下部分已从最初创建的计数器应用程序中更改

  • 数目增加是由Riverpod完成的
  • 从主页屏幕过渡到计数器屏幕

main.dart

/// Flutter导入
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

/// Firebase导入
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

/// 导入其他页面
import 'package:counter_firebase/normal_counter_page.dart';

/// 主
void main() async {
  /// Firebase初始化
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  /// runApp w/ Riverpod
  runApp(const ProviderScope(child: MyApp()));
}

/// Provider初始化
final counterProvider = StateNotifierProvider((ref) {
  return Counter();
});

class Counter extends StateNotifier {
  Counter() : super(0);

  /// 
  void increment() => state++;
}

/// MaterialApp的配置
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter Firebase',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

/// 首页屏幕
class MyHomePage extends ConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Homepage'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: const [
          _PagePushButton(
            buttonTitle: '计数器',
            pagename: NormalCounterPage(),
          ),
        ],
      ),
    );
  }
}

class _PagePushButton extends StatelessWidget {
  const _PagePushButton({
    Key? key,
    required this.buttonTitle,
    required this.pagename,
  }) : super(key: key);

  final String buttonTitle;
  final dynamic pagename;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Container(
        padding: const EdgeInsets.all(10),
        child: Text(buttonTitle),
      ),
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => pagename),
        );
      },
    );
  }
}

normal_counter_page.dart

/// Flutter
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

/// 其他页面
import 'package:counter_firebase/main.dart';

class NormalCounterPage extends ConsumerStatefulWidget {
  const NormalCounterPage({Key? key}) : super(key: key);

  @override
  NormalCounterPageState createState() => NormalCounterPageState();
}

class NormalCounterPageState extends ConsumerState {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final counter = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Homepage'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ref.read(counterProvider.notifier).increment();
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

5️⃣Firebase Analytics编

Firebase Analytics概述

Firebase Analytics是一项服务，允许你使用Firebase将Google Analytics应用到你的应用程序中

分析允许你记录应用程序的事件，并找出应用程序的使用情况

以下是关于在Flutter中使用分析的官方文档

使用 Flutter 和 Firebase 制作！计数器应用程序_第11张图片

准备

准备工作和前几章都已完成方可开始

使用方法

要在项目中引入firebase_analytics，将其添加到pubspec.yaml中并导入

pubspec.yaml

dependencies:
  firebase_analytics: ^9.2.0

使用 Flutter 和 Firebase 制作！计数器应用程序_第12张图片

可以记录的事件在firebase_analytics_package网页上列出

使用 Flutter 和 Firebase 制作！计数器应用程序_第13张图片

安装

这一次，logEvent记录了屏幕转换事件

使用 Flutter 和 Firebase 制作！计数器应用程序_第14张图片

import 'package:firebase_analytics/firebase_analytics.dart';

class AnalyticsService {
  Future logPage(String screenName) async {
    await FirebaseAnalytics.instance.logEvent(
      name: 'screen_view',
      parameters: {
        'firebase_screen': screenName,
      },
    );
  }
}

Widget端的设置如下

ElevatedButton{
  child: Text(buttonTitle),
  onPressed: () {
    AnalyticsService().logPage(buttonTitle);
    Navigator.push(
        context, MaterialPageRoute(builder: (context) => pagename));
  },
},

日志信息可以在Firebase控制台找到

在分析关系中，显示了实时分析、事件分析和转换分析

小结总结

这是与上次相比的变化

  • Analytics实现页面转换记录
  • 其他代码更改

main.dart

/// Flutter导入
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

/// Firebase导入
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'package:firebase_analytics/firebase_analytics.dart';

/// 导入其他页面
import 'package:counter_firebase/normal_counter_page.dart';

/// 主
void main() async {
  /// Firebase初始化
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  /// runApp w/ Riverpod
  runApp(const ProviderScope(child: MyApp()));
}

/// Provider初始化
final counterProvider = StateNotifierProvider((ref) {
  return Counter();
});

class Counter extends StateNotifier {
  Counter() : super(0);

  void increment() => state++;
}

/// MaterialApp的配置
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter Firebase',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

/// 主屏幕
class MyHomePage extends ConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Homepage'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: const [
          _PagePushButton(
            buttonTitle: '计数器',
            pagename: NormalCounterPage(),
          ),
        ],
      ),
    );
  }
}

/// 页面过渡按钮
class _PagePushButton extends StatelessWidget {
  const _PagePushButton({
    Key? key,
    required this.buttonTitle,
    required this.pagename,
  }) : super(key: key);

  final String buttonTitle;
  final dynamic pagename;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Container(
        padding: const EdgeInsets.all(10),
        child: Text(buttonTitle),
      ),
      onPressed: () {
        AnalyticsService().logPage(buttonTitle);
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => pagename),
        );
      },
    );
  }
}

/// Analytics
class AnalyticsService {
  /// 页面转换的日志
  Future logPage(String screenName) async {
    await FirebaseAnalytics.instance.logEvent(
      name: 'screen_view',
      parameters: {
        'firebase_screen': screenName,
      },
    );
  }
}

检查Firebase Console中的内容

使用 Flutter 和 Firebase 制作！计数器应用程序_第15张图片

6️⃣Firebase Crashlytics编

Firebase Crashlytics概述

Firebase Crashlytics是一个跟踪应用问题的崩溃报告工具

Firebase Crashlytics可用于Android和iOS设备

Firebase Crashlytics的官方文档

使用 Flutter 和 Firebase 制作！计数器应用程序_第16张图片

准备

准备工作和前几章都已完成方可开始

使用方法

要在项目中引入firebase_analytics，将其添加到pubspec.yaml中并导入

pubspec.yaml

dependencies:
  firebase_crashlytics: ^2.8.5

为了确保Firebase配置是最新的，在项目根目录下打开一个终端，运行flutterfire configure

flutterfire configure

崩溃处理程序配置

准备好后，配置崩溃处理程序

FirebaseCrashlytics.instance.recordFlutterFatalError会自动抓取Flutter框架内抛出的所有错误

您还可以使用runZonedGuarded（需要导入dart:async）来捕捉Flutter框架没有捕捉到的错误

import 'dart:async';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';

void main() async {
  /// 崩溃处理程序
  runZonedGuarded>(() async {
    /// Firebase初始化
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    /// 崩溃处理程序（Flutter框架内抛出的所有错误）
    FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

    /// runApp w/ Riverpod
    runApp(const ProviderScope(child: MyApp()));
  },

      /// 崩溃处理程序（Flutter框架内未捕获的错误）
      (error, stack) =>
          FirebaseCrashlytics.instance.recordError(error, stack, fatal: true));
}

测试碰撞

一旦配置好，在安卓或iOS设备上强制崩溃，进行测试

如果你已经添加了一个错误处理程序，调用FirebaseCrashlytics.instance.recordError(error, stack, fatal: true)，可以在按钮的 onPressed 上使用 throw Exception () 使其崩溃

TextButton(
  onPressed: () => throw Exception(),
  child: const Text("Throw Test Exception"),
),

这一次，我们增加了一个新的崩溃页面，并创建了一个崩溃按钮

使用 Flutter 和 Firebase 制作！计数器应用程序_第17张图片

当崩溃发生时，Firebase Console的Crashlytics会显示一份报告。

Crashlytics现在将监测应用程序崩溃的情况

使用 Flutter 和 Firebase 制作！计数器应用程序_第18张图片

碰撞报告也可以自定义

小结总结

这是与上次相比的变化

  • 增加了测试碰撞页面
  • 其他代码修改

main.dart

/// Flutter导入
import 'package:flutter/material.dart';
import 'package:flutter_river:pod/flutter_riverpod.dart';
import 'dart:async';

/// Firebase导入
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';

/// 导入其他页面
import 'package:counter_firebase/normal_counter_page.dart';
import 'package:counter_firebase/crash_page.dart';

void main() async {
  /// 崩溃处理程序
  runZonedGuarded>(() async {
    /// Firebase初始化
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    /// 崩溃处理程序（Flutter框架内抛出的所有错误）
    FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

    /// runApp w/ Riverpod
    runApp(const ProviderScope(child: MyApp()));
  },

      /// 崩溃处理程序（Flutter框架内未捕获的错误）
      (error, stack) =>
          FirebaseCrashlytics.instance.recordError(error, stack, fatal: true));
}

/// Provider初始化
final counterProvider = StateNotifierProvider((ref) {
  return Counter();
});

class Counter extends StateNotifier {
  Counter() : super(0);

  void increment() => state++;
}

/// MaterialApp设置
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter Firebase',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

/// 主屏幕
class MyHomePage extends ConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Homepage'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: [
          _PagePushButton(
            buttonTitle: '计数器',
            pagename: NormalCounterPage(),
          ),
          _PagePushButton(
            buttonTitle: '崩溃页面',
            pagename: CrashPage(),
          ),
        ],
      ),
    );
  }
}

/// 页面过渡按钮
class _PagePushButton extends StatelessWidget {
  const _PagePushButton({
    Key? key,
    required this.buttonTitle,
    required this.pagename,
  }) : super(key: key);

  final String buttonTitle;
  final dynamic pagename;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Container(
        padding: const EdgeInsets.all(10),
        child: Text(buttonTitle),
      ),
      onPressed: () {
        AnalyticsService().logPage(buttonTitle);
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => pagename),
        );
      },
    );
  }
}

/// Analytics
class AnalyticsService {
  /// 页面转换的日志
  Future logPage(String screenName) async {
    await FirebaseAnalytics.instance.logEvent(
      name: 'screen_view',
      parameters: {
        'firebase_screen': screenName,
      },
    );
  }
}

crash_page.dart

/// Flutter
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class CrashPage extends ConsumerWidget {
  const CrashPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('崩溃页面'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: [
          TextButton(
            onPressed: () => throw Exception(),
            child: const Text("抛出测试异常"),
          ),
        ],
      ),
    );
  }
}

7️⃣Firebase Remote Config

Firebase Remote Config概述

Firebase Remote Config是一项服务，它允许你改变你的应用程序的行为和外观，而不需要发布更新和远程改变配置值。

Firebase Remote Config的官方文档

使用 Flutter 和 Firebase 制作！计数器应用程序_第19张图片

应用案例

官方介绍了以下 Remote Config 用例。

  • 通过百分比推出发布新功能
  • 为您的应用定义针对具体平台和针对具体语言区域的促销横幅

使用 Flutter 和 Firebase 制作！计数器应用程序_第20张图片

准备

准备工作和前几章都已完成方可开始

使用方法

要在项目中引入firebase_remote_config，将其添加到pubspec.yaml中并导入

pubspec.yaml

dependencies:
  firebase_remote_config: ^2.0.12

创建并执行一个方法来初始化和设置参数

检索单例对象时，控制最小获取间隔以获得最佳更新时间

使用getString()、getBool()等方法获取app中使用的参数

import 'package:firebase_remote_config/firebase_remote_config.dart';

/// Firebase Remote Config的初始化
class FirebaseRemoteConfigService {
  void initRemoteConfig() async {
    /// 实例创建
    final remoteConfig = FirebaseRemoteConfig.instance;

    /// 获得一个单例对象
    await remoteConfig.setConfigSettings(RemoteConfigSettings(
      fetchTimeout: const Duration(minutes: 1),
      minimumFetchInterval: const Duration(minutes: 5),
    ));

    /// 在应用程序中设置默认参数值
    await remoteConfig.setDefaults(const {
      "example_param": "Hello, world!",
    });

    /// 取值
    await remoteConfig.fetchAndActivate();
  }
}

加载

初始化

remote_config_page.dart

@override
void initState() {
  super.initState();

  /// Firebase Remote Config初始化
  FirebaseRemoteConfigService().initRemoteConfig();
}

导出到Text Widget时，可以看到输出的是设定值（0）

remote_config_page.dart

Text(FirebaseRemoteConfig.instance.getString("example_param")),

使用 Flutter 和 Firebase 制作！计数器应用程序_第21张图片

更改值

然后从 Firebase Console的Remote Config设置后端配置以更改值

在参数键中输入由setDefaults确定的键，在默认值中输入新的值，然后'发布更改'

使用 Flutter 和 Firebase 制作！计数器应用程序_第22张图片
过了一会儿，我能够确认文本已更改为 8

小结总结

这是与上次相比的变化

  • 增加了Remote Config页面
  • 其他代码修改

main.dart

/// Flutter导入
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'dart:async';

/// Firebase导入
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'package:counter_firebase/remote_config_page.dart';

/// 导入其他页面
import 'package:counter_firebase/normal_counter_page.dart';
import 'package:counter_firebase/crash_page.dart';

void main() async {
  /// 崩溃处理程序
  runZonedGuarded>(() async {
    /// Firebase初始化
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    /// 崩溃处理程序（Flutter框架内抛出的所有错误）
    FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

    /// runApp w/ Riverpod
    runApp(const ProviderScope(child: MyApp()));
  },

      /// 崩溃处理程序（Flutter框架内未捕获的错误）
      (error, stack) =>
          FirebaseCrashlytics.instance.recordError(error, stack, fatal: true));
}

/// Provider初始化
final counterProvider = StateNotifierProvider((ref) {
  return Counter();
});

class Counter extends StateNotifier {
  Counter() : super(0);

  void increment() => state++;
}

/// MaterialApp设置
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter Firebase',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

/// 主屏幕
class MyHomePage extends ConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Homepage'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: [
          _PagePushButton(
            buttonTitle: '计数器',
            pagename: NormalCounterPage(),
          ),
          _PagePushButton(
            buttonTitle: '计数器',
            pagename: CrashPage(),
          ),
          _PagePushButton(
            buttonTitle: 'Remote Config计数器',
            pagename: RemoteConfigPage(),
          ),
        ],
      ),
    );
  }
}

/// 页面过渡按钮
class _PagePushButton extends StatelessWidget {
  const _PagePushButton({
    Key? key,
    required this.buttonTitle,
    required this.pagename,
  }) : super(key: key);

  final String buttonTitle;
  final dynamic pagename;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Container(
        padding: const EdgeInsets.all(10),
        child: Text(buttonTitle),
      ),
      onPressed: () {
        AnalyticsService().logPage(buttonTitle);
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => pagename),
        );
      },
    );
  }
}

class AnalyticsService {
  /// 页面转换的日志
  Future logPage(String screenName) async {
    await FirebaseAnalytics.instance.logEvent(
      name: 'screen_view',
      parameters: {
        'firebase_screen': screenName,
      },
    );
  }
}

remote_config_page.dart

/// Flutter
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

/// Firebase导入
import 'package:firebase_remote_config/firebase_remote_config.dart';

/// 其他页面
import 'package:counter_firebase/main.dart';

class RemoteConfigPage extends ConsumerStatefulWidget {
  const RemoteConfigPage({Key? key}) : super(key: key);

  @override
  RemoteConfigPageState createState() => RemoteConfigPageState();
}

class RemoteConfigPageState extends ConsumerState {
  @override
  void initState() {
    super.initState();

    /// Firebase Remote Config初始化
    FirebaseRemoteConfigService().initRemoteConfig();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Homepage'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /// Remote Config数据采集
            Text(
          FirebaseRemoteConfig.instance.getString("example_param"),
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

/// Firebase Remote Config的初始设置
class FirebaseRemoteConfigService {
  void initRemoteConfig() async {
    /// 实例创建
    final remoteConfig = FirebaseRemoteConfig.instance;

    /// 获得一个单例对象
    await remoteConfig.setConfigSettings(RemoteConfigSettings(
      fetchTimeout: const Duration(minutes: 1),
      minimumFetchInterval: const Duration(minutes: 5),
    ));

    /// 在应用程序中设置默认参数值
    await remoteConfig.setDefaults(const {
      "example_param": "0",
    });

    /// 获取数值
    await remoteConfig.fetchAndActivate();
  }
}

8️⃣Firebase Authentication

Firebase Authentication概述

Firebase认证是一项能够使用用户认证功能的服务

官方网站

使用 Flutter 和 Firebase 制作！计数器应用程序_第23张图片

准备

准备工作和前几章都已完成方可开始

使用方法

要在项目中引入firebase_auth，请在pubspec.yaml中添加以下内容，并导入它

pubspec.yaml

dependencies:
  firebase_auth: ^3.4.2

要选择你的登录方式（电子邮件地址、电话号码等），请从Firebase Console进入认证，在登录方式下选择你喜欢的登录方式。

在这种情况下，我们将使用一个电子邮件地址和密码

使用 Flutter 和 Firebase 制作！计数器应用程序_第24张图片
在Firebase Console中设置好配置后，你就可以实施了

输入TextField中输入的电子邮件地址和密码。

通过将obscureText设置为 "true "使密码不可见。

/// 输入你的电子邮件地址
TextField(
  decoration: const InputDecoration(
    label: Text('E-mail'),
  ),
  controller: _idController,
),

/// 输入密码
TextField(
  decoration: const InputDecoration(
    label: Text('Password'),
  ),
  controller: _passController,
  obscureText: true,
),

创建一个执行按钮并调用一个允许你创建账户或登录的函数

/// 用于创建账户
Container(
  margin: const EdgeInsets.all(10),
  child: ElevatedButton(
    onPressed: () {
      _createAccount(ref, idController.text, passController.text);
    },
    child: const Text('创建账户'),
  ),
),

使用FirebaseAuth.instance.createUserWithEmailAndPassword来处理账户创建。

电子邮件地址和密码被传递，如果发生错误，会产生一个错误信息。

import 'package:firebase_auth/firebase_auth.dart';

void _createAccount(String id, String pass) async {
  try {
    /// credential 帐户信息记录
    final credential =
        await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: id,
      password: pass,
    );
  }

  /// 在账户失败的情况下进行错误处理
  on FirebaseAuthException catch (e) {
    /// 如果密码很弱的话
    if (e.code == 'weak-password') {
      print('请设置包含大小写字母和数字的6-18位密码');

      /// 如果该电子邮件地址已经在使用中
    } else if (e.code == 'email-already-in-use') {
      print('该电子邮件以注册');
    }

    ///其他错误
    else {
      print('账户创建错误');
    }
  } catch (e) {
    print(e);
  }
}

登录过程是使用FirebaseAuth.instance.signInWithEmailAndPassword来处理。

它传递电子邮件地址和密码，如果发生错误，会产生一个错误信息

void _signIn(String id, String pass) async {
  try {
    /// credential 帐户信息记录
    final credential = await FirebaseAuth.instance.signInWithEmailAndPassword(
      email: id,
      password: pass,
    );
  }

  /// 登录失败时的错误处理
  on FirebaseAuthException catch (e) {
    /// 无效的电子邮件地址
    if (e.code == 'invalid-email') {
      print('无效的电子邮件地址');
    }

    /// 如果该用户不存在
    else if (e.code == 'user-not-found') {
      print('用户不存在');
    }

    /// 如果密码不正确
    else if (e.code == 'wrong-password') {
      print('密码不正确');
    }

    /// 其他错误
    else {
      print('登录错误');
    }
  }
}

用于登出FirebaseAuth.instance.signOut()
auth_page.dart

void _signOut() async {
  await FirebaseAuth.instance.signOut();
}

获取用户信息的三种方式。

/// 使用authStateChanges、idTokenChanges和userChanges流
FirebaseAuth.instance
  .authStateChanges()
  .listen((User? user) {
    if (user != null) {
      print(user.uid);
    }
  });

/// 使用由认证（signIn）方法返回的UserCredential对象
final userCredential =
    await FirebaseAuth.instance.signInWithCredential(credential);
final user = userCredential.user;
print(user?.uid);

/// 使用FirebaseAuth实例的currentUser属性
if (FirebaseAuth.instance.currentUser != null) {
  print(FirebaseAuth.instance.currentUser?.uid);
}

使用.update*来更新用户资料和电子邮件地址

final userCredential =
    await FirebaseAuth.instance.signInWithCredential(credential);
final user = userCredential.user;

await user?.updateDisplayName("Jane Q. User");
await user?.updateEmail("[email protected]");

通过电子邮件地址进行认证，但也可以通过电话号码和OAuth进行认证

登录前的主屏幕

使用 Flutter 和 Firebase 制作！计数器应用程序_第25张图片
登录页面

使用 Flutter 和 Firebase 制作！计数器应用程序_第26张图片
登录后的主屏幕

使用 Flutter 和 Firebase 制作！计数器应用程序_第27张图片

小结总结

这是与上次相比的变化

  • 添加 Firebase 身份验证页面
  • 其他代码修改

main.dart

/// Flutter导入
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'dart:async';

/// Firebase导入
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'package:firebase_auth/firebase_auth.dart';

/// 导入其他页面
import 'package:counter_firebase/normal_counter_page.dart';
import 'package:counter_firebase/crash_page.dart';
import 'package:counter_firebase/auth_page.dart';
import 'package:counter_firebase/remote_config_page.dart';

void main() async {
  /// 崩溃处理程序
  runZonedGuarded>(() async {
    /// Firebase初始化
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    /// 崩溃处理程序（Flutter框架内抛出的所有错误）
    FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

    /// runApp w/ Riverpod
    runApp(const ProviderScope(child: MyApp()));
  },

      /// 崩溃处理程序（Flutter框架内未捕获的错误）
      (error, stack) =>
          FirebaseCrashlytics.instance.recordError(error, stack, fatal: true));
}

/// Provider初始化
final counterProvider = StateNotifierProvider.autoDispose((ref) {
  return Counter();
});

class Counter extends StateNotifier {
  Counter() : super(0);
  
  void increment() => state++;
}

/// MaterialApp设置
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter Firebase',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

/// 主屏幕
class MyHomePage extends ConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
      /// 获取用户信息
    FirebaseAuth.instance.authStateChanges().listen((User? user) {
      if (user == null) {
        ref.watch(userEmailProvider.state).state = '未登录';
      } else {
        ref.watch(userEmailProvider.state).state = user.email!;
      }
    });

    return Scaffold(
      appBar: AppBar(
        title: const Text('My Homepage'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: [
          /// 显示用户信息
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(Icons.person),
              Text(ref.watch(userEmailProvider)),
            ],
          ),

          /// 页面过渡
          const _PagePushButton(
            buttonTitle: '普通计数器',
            pagename: NormalCounterPage(),
          ),
          const _PagePushButton(
            buttonTitle: '崩溃页面',
            pagename: CrashPage(),
          ),
          const _PagePushButton(
            buttonTitle: '远程配置计数器',
            pagename: RemoteConfigPage(),
          ),
          const _PagePushButton(
            buttonTitle: '认证页面',
            pagename: AuthPage(),
          ),
        ],
      ),
    );
  }
}

/// 页面过渡按钮
class _PagePushButton extends StatelessWidget {
  const _PagePushButton({
    Key? key,
    required this.buttonTitle,
    required this.pagename,
  }) : super(key: key);

  final String buttonTitle;
  final dynamic pagename;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Container(
        padding: const EdgeInsets.all(10),
        child: Text(buttonTitle),
      ),
      onPressed: () {
        AnalyticsService().logPage(buttonTitle);
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => pagename),
        );
      },
    );
  }
}

class AnalyticsService {
  /// 页面转换的日志
  Future logPage(String screenName) async {
    await FirebaseAnalytics.instance.logEvent(
      name: 'screen_view',
      parameters: {
        'firebase_screen': screenName,
      },
    );
  }
}

auth_page.dart

/// Flutter
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

/// Firebase导入
import 'package:firebase_auth/firebase_auth.dart';

/// Auth签入状态提供者
final signInStateProvider = StateProvider((ref) => '登录或创建一个账户');

/// 登录用户的信息提供
final userProvider = StateProvider((ref) => null);
final userEmailProvider = StateProvider((ref) => '未登录');

/// 页面设置
class AuthPage extends ConsumerStatefulWidget {
  const AuthPage({Key? key}) : super(key: key);

  @override
  AuthPageState createState() => AuthPageState();
}

class AuthPageState extends ConsumerState {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final singInStatus = ref.watch(signInStateProvider);
    final idController = TextEditingController();
    final passController = TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Auth Page'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: [
          /// 输入你的电子邮件地址
          TextField(
            decoration: const InputDecoration(
              label: Text('E-mail'),
              icon: Icon(Icons.mail),
            ),
            controller: idController,
          ),

          /// 输入密码
          TextField(
            decoration: const InputDecoration(
              label: Text('Password'),
              icon: Icon(Icons.key),
            ),
            controller: passController,
            obscureText: true,
          ),

          /// 登录
          Container(
            margin: const EdgeInsets.all(10),
            child: ElevatedButton(
              onPressed: () {
                /// 用于登录
                _signIn(ref, idController.text, passController.text);
              },
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.grey)),
              child: const Text('登录'),
            ),
          ),

          /// 创建账户
          Container(
            margin: const EdgeInsets.all(10),
            child: ElevatedButton(
              onPressed: () {
                /// 用于创建账户
                _createAccount(ref, idController.text, passController.text);
              },
              child: const Text('创建账户'),
            ),
          ),

          /// 登录信息显示
          Container(
            padding: const EdgeInsets.all(10),
            child: Text('信息 : $singInStatus'),
          ),

          /// 登出
          TextButton(
              onPressed: () {
                _signOut(ref);
              },
              child: const Text('SIGN OUT'))
        ],
      ),
    );
  }
}

/// 登录处理
void _signIn(WidgetRef ref, String id, String pass) async {
  try {
    /// 帐户信息被记录在credential 
    final credential = await FirebaseAuth.instance.signInWithEmailAndPassword(
      email: id,
      password: pass,
    );

    /// 更新用户信息
    ref.watch(userProvider.state).state = credential.user;

    /// 在屏幕上显示
    ref.read(signInStateProvider.state).state = '我已经能够登录了!';
  }

  /// 登录失败时的错误处理
  on FirebaseAuthException catch (e) {
    /// 无效的电子邮件地址
    if (e.code == 'invalid-email') {
      ref.read(signInStateProvider.state).state = '无效的电子邮件地址';
    }

    /// 该用户不存在
    else if (e.code == 'user-not-found') {
      ref.read(signInStateProvider.state).state = '该用户不存在';
    }

    /// 密码不正确
    else if (e.code == 'wrong-password') {
      ref.read(signInStateProvider.state).state = '密码不正确';
    }

    /// 其他错误
    else {
      ref.read(signInStateProvider.state).state = '登录错误';
    }
  }
}

/// 创建账户
void _createAccount(WidgetRef ref, String id, String pass) async {
  try {
    /// 帐户信息被记录在credential 
    final credential =
        await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: id,
      password: pass,
    );

    /// 更新用户信息
    ref.watch(userProvider.state).state = credential.user;

    /// 在屏幕上显示
    ref.read(signInStateProvider.state).state = '账户创建成功!';
  }

  /// 在账户失败的情况下进行错误处理
  on FirebaseAuthException catch (e) {
    /// 如果密码很弱
    if (e.code == 'weak-password') {
      ref.read(signInStateProvider.state).state = '请设置包含大小写字母和数字的6-18位密码');

      /// 如果该电子邮件地址已经在使用中
    } else if (e.code == 'email-already-in-use') {
      print('该电子邮件以注册');
    }

   ///其他错误
    else {
      print('账户创建错误');
    }
  } catch (e) {
    print(e);
  }
}

/// 登出
void _signOut(WidgetRef ref) async {
  await FirebaseAuth.instance.signOut();
  ref.read(signInStateProvider.state).state = '登录或创建一个账户';
}

9️⃣Cloud Firestore

Cloud Firestore概述

Cloud Firestore是一个用于无服务器数据存储的NoSQL数据库

官方网站

使用 Flutter 和 Firebase 制作！计数器应用程序_第28张图片

类似的服务

除了Firestore之外，Firebase也有一个类似的数据库。

云存储，用于存储用户生成的数据，如照片和视频

实时数据库，用于客户与客户之间的实时通信

官方网站上有一个与实时数据库的比较，以帮助你选择哪种数据库

使用 Flutter 和 Firebase 制作！计数器应用程序_第29张图片

准备

准备工作和前几章都已完成方可开始

使用方法

从Firebase Console，选择Firestore数据库并创建数据库。

Firestore的安全规则已被设置为记录用户ID中的计数，具体如下。
请注意，安全规则在另一章中描述。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId}/{documents=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId
    }
  }
}

Firestore的数据模型由文档、集合等组成，支持的数据类型包括bool、int和Map类型，以及日期和地理坐标

在Firebase Console设置完毕后，在pubspec.yaml中添加以下内容，将cloud_firestore引入项目并导入

pubspec.yaml

dependencies:
  cloud_firestore: ^3.3.0

Firestore数据处理

显示了向Firestore添加、读取和删除数据的例子。
Riverpod用于写入和读取数据

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

/// Firestore数据库的定义
final db = FirebaseFirestore.instance;

/// 获取UserID
final userID = FirebaseAuth.instance.currentUser?.uid ?? 'test';

/// 数据添加
void add(WidgetRef ref) {

  final Map counterMap = {
    'count': ref.read(counterProvider),
  };

  /// 将数据添加到Firestore
  try {
    db.collection('users').doc(userID).set(counterMap);
  } catch (e) {
    print('Error : $e');
  }
}

/// 数据采集
void get(WidgetRef ref) async {
  try {
    await db.collection('users').doc(userID).get().then(
      (event) {
        ref.read(counterProvider.notifier).state = event.get('count');
      },
    );
  } catch (e) {
    print('Error : $e');
  }
}

/// 数据删除
void delete() async {
  try {
    db.collection('users').doc(userID).delete().then((doc) => null);
  } catch (e) {
    print('Error : $e');
  }
}

实际的计数

使用 Flutter 和 Firebase 制作！计数器应用程序_第30张图片

检查Firebase Console，看看数据是否在Firestore中

使用 Flutter 和 Firebase 制作！计数器应用程序_第31张图片

小结总结

在这一小结中我们完成了一下功能

  • 增加了Firestore页面
  • 改变页面转换的按钮的颜色
  • 其他代码修改

Firebase Realtime Database

Firebase Realtime Database概述

Firebase实时数据库是一个NoSQL数据库服务，它能够在所有的客户端进行数据存储和实时同步

数据以json格式存储，并根据数据量收费，因此它适合存储比Firestore更频繁更新的小数据

类似的服务

除了Firestore之外，Firebase也有一个类似的数据库。

云存储，用于存储用户生成的数据，如照片和视频

准备

准备工作和前几章都已完成方可开始

使用方法

从Firebase Console，选择实时数据库并创建数据库。

安全规则设置如下，因此，只有内容所有者可以访问数据库

{
  "rules": {
    "users": {
      "$uid": {
        ".read": "auth != null && auth.uid == $uid",
        ".write": "auth != null && auth.uid == $uid"
      }
    }
  }
}

在设置了Firebase Console之后，在pubspec.yaml中添加以下内容，将firebase_database导入项目中

dependencies:
  firebase_database: ^9.0.19

数据操作

数据库定义

检索了用户ID，并定义了数据库

Riverpod用于阅读和写作

import 'package:firebase_database/firebase_database.dart';
import 'package:firebase_auth/firebase_auth.dart';

final userID = FirebaseAuth.instance.currentUser?.uid ?? '';

DatabaseReference dbRef = FirebaseDatabase.instance.ref('users');
写入实时数据库

有两种方法可以向实时数据库写入数据：使用设置和使用更新

这一次是由UPDATE实施的

void write(WidgetRef ref) async {
  try {
    await dbRef.update({
      '$userID/count': ref.read(counterProvider),
    });
  } catch (e) {
    print('Error : $e');
  }
}
读取实时数据库数据

有两种读取实时数据库数据的方法：监听DatabaseReference并调用DatabaseEvent，或使用get()。
前者在每次改变数据时都会被触发，而后者只读取一次数据。

这次是用get()实现的。

void read(WidgetRef ref) async {
  try {
    final snapshot = await dbRef.child(userID).get();
    if (snapshot.exists) {
      ref.read(counterProvider.notifier).state =
          snapshot.child('count').value as int;
    }
  } catch (e) {
    print('Error : $e');
  }
}
删除实时数据库数据

可以使用remove()删除数据

void remove() async {
  try {
    await dbRef.child(userID).remove();
  } catch (e) {
    print('Error : $e');
  }
}

Realtime Database的计数器画面

使用 Flutter 和 Firebase 制作！计数器应用程序_第32张图片
运行后，在Firebase Console检查数据库是否已经被改变

使用 Flutter 和 Firebase 制作！计数器应用程序_第33张图片

小结总结

在这一小结中我们完成了一下功能

  • 增加了实时数据库页面。
  • 其他代码修改

▶️Cloud Storage for Firebase

Cloud Firestore概述

Firebase的云存储是一项用于存储用户生成的内容的服务，如照片和视频

类似的服务

除了Firestore之外，Firebase也有一个类似的数据库。

云存储，用于存储用户生成的数据，如照片和视频。

准备

准备工作和前几章都已完成方可开始

使用方法

从Firebase控制台中选择存储来开始。

安全规则已经设置好了，只有内容所有者才能访问，具体如下

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /users/{userId}/{allPaths=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

在设置好Firebase控制台后，添加到pubspec.yaml中，并将firebase_storage导入项目中。

这一次，为了在Android上上传图片，image_picker也被一起导入。

注意，Web不支持dart:io包，所以不能使用下面的代码。

dependencies:
  image_picker: ^0.8.5
  firebase_storage: ^10.3.2
数据操作

上传至云存储

要将图片上传到云存储，用image_picker选择图片并使用putFile

import 'package:image_picker/image_picker.dart';
import 'package:firebase_storage/firebase_storage.dart';

final userID = FirebaseAuth.instance.currentUser?.uid ?? '';

void uploadPic() async {
  try {
    final ImagePicker picker = ImagePicker();
    final XFile? image = await picker.pickImage(source: ImageSource.gallery);
    File file = File(image!.path);

    String uploadName = 'image.png';
    final storageRef =
        FirebaseStorage.instance.ref().child('users/$userID/$uploadName');
    final task = await storageRef.putFile(file);
  } catch (e) {
    print(e);
  }
管理上传

作为管理上传的一部分，你可以暂停、恢复和取消上传。

此外，你还可以监控上传的进度。

bool paused = await task.pause();
print('paused, $paused');

bool resumed = await task.resume();
print('resumed, $resumed');

bool canceled = await task.cancel();
print('canceled, $canceled');

可以从Firebase控制台检查图片是否已经上传

使用 Flutter 和 Firebase 制作！计数器应用程序_第34张图片

从云存储下载

有两种方法可以从云存储下载图像：下载到内存或直接下载到本地文件夹。

这一次，图像被下载到内存中并显示在应用程序中。

此外，Riverpod还用于阅读和写作。

final imageStateProvider = StateProvider((ref) => null);

void downloadPic(WidgetRef ref) async {
  try {
    String downloadName = 'image.png';
    final storageRef =
        FirebaseStorage.instance.ref().child('users/$userID/$downloadName');

    const oneMegabyte = 1024 * 1024;
    ref.read(imageStateProvider.state).state =
        await storageRef.getData(oneMegabyte);
  } catch (e) {
    print(e);
  }
}

如果显示出来，说明下载的实施是OK的。

使用 Flutter 和 Firebase 制作！计数器应用程序_第35张图片
删除云存储数据

使用delete()来删除云存储数据。

void deletePic() async {
  String deleteName = 'image.png';
  final storageRef =
      FirebaseStorage.instance.ref().child('users/$userID/$deleteName');

  await storageRef.delete();
}

小结总结

在这一小结中我们完成了一下功能

  • 增加了云存储页面
  • 其他代码修改

⬇️Firebase Cloud Messaging

Firebase Cloud Messaging概述

Firebase Cloud Messaging（FCM）是一项允许向客户端应用程序发送推送通知的服务。

官方网站

使用 Flutter 和 Firebase 制作！计数器应用程序_第36张图片

FCM的架构也在官方文件中作了介绍

使用 Flutter 和 Firebase 制作！计数器应用程序_第37张图片

准备

准备工作和前几章都已完成方可开始

使用方法

iOS、Android和Web的准备工作和使用条件有所不同

Android。

Android可以在运行Android4.4或更高版本的设备上运行。

iOS

查看设置说明，为在iOS上使用做准备

web

在web上使用时，有必要在Firebase控制台为 "网络推送证书 "生成一对密钥，创建并注册firebase-messaging-sw.js文件，等等

添加到导入到firebase_messaging项目中。pubspec.yaml

dependencies:
  firebase_messaging: ^11.4.0
接待设置

获取令牌的ID。

测试时打印出令牌。

import 'package:firebase_messaging/firebase_messaging.dart';

// final fcmToken = await FirebaseMessaging.instance.getToken(vapidKey: 'BDdcxJZSBD...');

final fcmToken = await FirebaseMessaging.instance.getToken();

print(fcmToken);

如果你也想在后台接收信息，不管是什么平台，添加以下代码。

_firebaseMessagingBackgroundHandler函数不能是一个匿名函数，必须被当作一个顶级函数，否则会发生错误。

Future main() async {
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  runApp(...
}

Future _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print("Handling a background message: ${message.messageId}");
}

此外，还为web和iOS设备设置了权限

NotificationSettings settings = await messaging.requestPermission(
  alert: true,
  announcement: false,
  badge: true,
  carPlay: false,
  criticalAlert: false,
  provisional: false,
  sound: true,
);
实际分配

测试交付给一个安卓模拟器。

在Firebase控制台的Messaging中选择一个新的活动。

从 "在设备上测试"，复制并粘贴你刚刚打印出来的令牌到FCM注册令牌中。

如果你的设备上收到推送通知，你就成功了

使用 Flutter 和 Firebase 制作！计数器应用程序_第38张图片

小结总结

在这一小结中我们完成了一下功能

  • 其他代码修改
  • 例如，有些键是用类来隐藏的

⬅️Firebase In-App Messaging

Firebase In-App Messaging概述

Firebase In-App Messaging是一项允许你发送目标信息的服务

这项服务只在移动端（iOS、Android）提供

准备

准备工作和前几章都已完成方可开始

使用方法

要在项目中引入firebase_in_app_messaging，请将其加入pubspec.yaml。

由于In-App Messaging每天只从服务器检索一次信息，我们将在测试中尝试使用Firebase安装ID（FID）

dependencies:
  firebase_in_app_messaging: ^0.6.0+14
  firebase_app_installations: ^0.1.0+14

在Flutter中可以通过加载firebase_in_app_messaging来使用应用内消息

import 'package:firebase_in_app_messaging/firebase_in_app_messaging.dart';

使用FirebaseInstallations来获取FID

import 'package:firebase_app_installations/firebase_app_installations.dart';

void getFID() async {
  String id = await FirebaseInstallations.instance.getId();
  print('id : $id');
}

交付测试

从Firebase控制台测试交付。

当你准备好了，输入你刚刚克制的FID，进行设备交付测试

交付后，在调试设备上返回主屏幕一次，并再次打开应用，查看应用内信息

使用 Flutter 和 Firebase 制作！计数器应用程序_第39张图片

请注意，如果出现以下错误信息，说明Firebase In-App Messaging API被禁用了，你需要访问谷歌云平台的Firebase In-App Messaging API并启用该API，如错误文本所示

PERMISSION_DENIED: Firebase In-App Messaging API has not been used in project *** before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/firebaseinappmessaging.googleapis.com/overview?project=*** then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

使用 Flutter 和 Firebase 制作！计数器应用程序_第40张图片

小结总结

在这一小结中我们完成了一下功能

  • In-App Messaging的实施

◀️Firebase ML

Firebase ML概述

Firebase ML是一个使用Firebase的机器学习模型推理

Firebase x Flutter中提供的机器学习推理

使用Flutter和Firebase的机器学习推理可以在设备上或在云端完成

设备上的推理

使用Firebase进行设备上的推理意味着用Firebase ML提供自定义的TensorFlowLite模型进行本地推理

对于实际的推断，使用了tflite_flutter、ML Kit等

用Firebase提供定制的TF模型的好处是，用户可以使用最新的模型，而不需要更新他们的应用程序

云端推理

使用Firebase（谷歌云）进行云推理，意味着用云视觉AI或云自然语言进行推理。
目前，没有为Flutter提供API，所以你需要为每个操作系统组合API

除上述之外，还有其他方法可以使用来自其他服务的机器学习模型

如何用Firebase部署自定义的TensorflowLite模型分布

准备一个你自己训练的自定义TF模型的TFLite文件

在这种情况下，为了执行图像识别任务，我从TensorFlow Hub获得了Imagenet图像分类训练模型

请注意，当从TensorFlow Hub下载模型时，要注意许可证和下载的文件类型

一旦文件准备好了，从Firebase控制台的机器学习中部署该模型

Firebase官方文档推荐使用tflite_flutter和tflite进行推理，但我在开发环境中无法用导入的tflite_flutter等构建应用，所以我用ML Kit做了实验

可以使用ML工具包中的TFLite自定义模型的任务包括图像标签或物体检测和跟踪

由于我们将对图像标签进行推理，我们也将介绍google_ml_kit和google_mlkit_image_labelling

dependencies:
  google_ml_kit: ^0.11.0
  google_mlkit_image_labeling: ^0.3.0

使用google_mlkit_image_labelling包中的FirebaseImageLabelerModelManager从Firebase ML下载模型

final bool response =
    await FirebaseImageLabelerModelManager().downloadModel(modelname);
final options = FirebaseLabelerOption(
        confidenceThreshold: 0.5, modelName: modelname, maxCount: 3);
_imageLabeler = ImageLabeler(options: options);

如果你知道照片的路径，例如image_picker，你只需要两行代码进行基本的标签推理

final InputImage inputImage = InputImage.fromFilePath(path);
final List labels = await _imageLabeler.processImage(inputImage);

从推断出的结果中提取标签

String labelText = '';
for (final label in labels) {
  labelText += '\nLabel: ${label.label}';
}

用应用程序检查。

它似乎能够进行推论，但结果与我预期的不同，所以还有改进的余地

使用 Flutter 和 Firebase 制作！计数器应用程序_第41张图片

小结总结

在这一小结中我们完成了一下功能

  • 添加ml_page页面
  • 其他代码修改

⏬Cloud Functions for Firebase

Cloud Functions for Firebase概述

Cloud Functions for Firebase是一项服务，它可以对触发的事件自动执行后端代码

Firebase的云功能支持用javascript和typescript编写，允许在不管理或扩展服务器的情况下实现后端

应用案例

准备

准备工作和前几章都已完成方可开始

在JavaScript环境中运行Cloud Functions需要一个Node.js环境，如果你还没有这样做，请使用nvm安装它

使用方法

安装firebase-tools

npm install -g firebase-tools

初始化项目

在Firebase登录准备好的环境中，初始化函数和其他必要的工具。

在这种情况下，这次我选择了语言JavaScript

firebase init functions

一旦初始化，项目中就会创建一个新的函数文件夹

创建功能

在function/index.js中编写执行Cloud Functions的函数。

导入必要的模块

const functions = require("firebase-functions");

功能定义。

有三种主要的方法来调用一个函数

  • 如何直接从应用程序调用
  • 如何通过 HTTP 请求调用函数
  • 如何调入日程设置

这一次，计数功能是直接从应用程序中调用的，所以在后端使用了onCall触发器。
当我们在做这件事的时候，我们还将试验能够调用UID

exports.functionsTest = functions.https.onCall((data, context) => {

  const firstNumber = data.firstNumber;
  const secondNumber = data.secondNumber;
  const addNumber = firstNumber + secondNumber;
  const contextUid = context.auth.uid;
  return { addNumber:addNumber,  contextUid:contextUid }
});

在模拟器上测试

在部署之前在本地模拟器上进行测试以检查无限循环等。

如果App Check使用，则无法运行模拟器，需要使用 App Check 调试提供程序，每个执行环境都必须使用调试提供程序

Java安装 Open JDK，因为它需要启动模拟器

安装并初始化本地模拟器，必要时用Firebase init *安装每个插件

firebase init emulators

当使用本地模拟器时，在Flutter侧的主函数中设置useFunctionsEmulator

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Ideal time to initialize
  FirebaseFunctions.instance.useFunctionsEmulator('localhost', 5001);

...

安装后，用emulators:start启动模拟器，并在浏览器中打开http://localhost:4000/（默认情况下）

firebase emulators:start

部署

如果一切顺利，就部署到生产环境

在Firebase控制台，进入功能，选择 "开始"

firebase deploy --only functions:functionsTest

使用 Flutter 和 Firebase 制作！计数器应用程序_第42张图片

从Flutter应用程序调用

要在你的Flutter项目中应用云函数，请在pubspec.yaml中引入cloud_functions

dependencies:
  cloud_functions: ^3.3.2

functions编写执行的代码

import 'package:cloud_functions/cloud_functions.dart';

void addNumber() async {
  try {
  
    final result = await FirebaseFunctions.instance
        .httpsCallable('functionsTest')
        .call({'firstNumber': _number, 'secondNumber': 1});
    _number = result.data['addNumber'];
    print(result.data['contextUid']);
  } on FirebaseFunctionsException catch (error) {
    print(error.code);
    print(error.details);
    print(error.message);
  }
}****

一款使用 Cloud Functions 进行计数的豪华应用程序已经完成

使用 Flutter 和 Firebase 制作！计数器应用程序_第43张图片

小结总结

在这一小结中我们完成了一下功能

  • 添加了Cloud Functions
  • 添加了cloud_functions
  • 其他代码修改
const functions = require("firebase-functions");

exports.functionsTest = functions.https.onCall(async(data, context) => {
  const firstNumber = data.firstNumber;
  const secondNumber = data.secondNumber;

  const addNumber = firstNumber + secondNumber;

  const contextUid = context.auth.uid;

  return { addNumber:addNumber,  contextUid:contextUid }
});
import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'package:counter_firebase/remote_config_page.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:firebase_app_installations/firebase_app_installations.dart';
import 'package:firebase_in_app_messaging/firebase_in_app_messaging.dart';

import 'package:counter_firebase/normal_counter_page.dart';
import 'package:counter_firebase/crash_page.dart';
import 'package:counter_firebase/auth_page.dart';
import 'package:counter_firebase/firestore_page.dart';
import 'package:counter_firebase/realtime_database_page.dart';
import 'package:counter_firebase/cloud_storage.dart';
import 'package:counter_firebase/cloud_functions_page.dart';
import 'package:counter_firebase/ml_page.dart';

final isAndroid =
    defaultTargetPlatform == TargetPlatform.android ? true : false;
final isIOS = defaultTargetPlatform == TargetPlatform.iOS ? true : false;

Future _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print('Handling a background message: ${message.messageId}');
}

void main() async {
  runZonedGuarded>(() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

    FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

    // FirebaseFunctions.instance.useFunctionsEmulator('localhost', 5001);

    /// runApp w/ Riverpod
    runApp(const ProviderScope(child: MyApp()));
  },

      (error, stack) =>
          FirebaseCrashlytics.instance.recordError(error, stack, fatal: true));
}

final counterProvider = StateNotifierProvider((ref) {
  return Counter();
});

class Counter extends StateNotifier {
  Counter() : super(0);

  void increment() => state++;
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter Firebase',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends ConsumerStatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends ConsumerState {
  @override
  void initState() {
    super.initState();

    FirebaseMessagingService().setting();

    FirebaseMessagingService().fcmGetToken();

    FirebaseInAppMessagingService().getFID();
  }

  @override
  Widget build(BuildContext context) {
    FirebaseAuth.instance.authStateChanges().listen((User? user) {
      if (user == null) {
        ref.watch(userEmailProvider.state).state = '未登录';
      } else {
        ref.watch(userEmailProvider.state).state = user.email!;
      }
    });

    return Scaffold(
      appBar: AppBar(
        title: const Text('My Homepage'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(Icons.person),
              Text(ref.watch(userEmailProvider)),
            ],
          ),

          const _PagePushButton(
            buttonTitle: '计数器',
            pagename: NormalCounterPage(),
          ),
          const _PagePushButton(
            buttonTitle: '崩溃页面',
            pagename: CrashPage(),
          ),
          const _PagePushButton(
            buttonTitle: 'Remote Config计数器',
            pagename: RemoteConfigPage(),
          ),
          const _PagePushButton(
            buttonTitle: '机器学习页面',
            pagename: MLPage(),
          ),
          const _PagePushButton(
            buttonTitle: '验证页面',
            pagename: AuthPage(),
            bgColor: Colors.red,
          ),

          /// 过渡到每个页面（认证后可用）
          /// 让未经授权的人无法按下按钮
          FirebaseAuth.instance.currentUser?.uid != null
              ? const _PagePushButton(
                  buttonTitle: 'Firestore计数器',
                  pagename: FirestorePage(),
                  bgColor: Colors.green,
                )
              : const Text('Firestore验证后，即可打开柜台'),
          FirebaseAuth.instance.currentUser?.uid != null
              ? const _PagePushButton(
                  buttonTitle: 'Realtime Database计数器',
                  pagename: RealtimeDatabasePage(),
                  bgColor: Colors.green,
                )
              : const Text('Realtime Database认证，以打开计数器'),
          FirebaseAuth.instance.currentUser?.uid != null
              ? const _PagePushButton(
                  buttonTitle: 'Cloud Storage页',
                  pagename: CloudStoragePage(),
                  bgColor: Colors.green,
                )
              : const Text('Cloud Storage请认证以打开该页面'),
          FirebaseAuth.instance.currentUser?.uid != null
              ? const _PagePushButton(
                  buttonTitle: 'Cloud Functions页',
                  pagename: CloudFunctionsPage(),
                  bgColor: Colors.green,
                )
              : const Text('Cloud Functions请认证以打开该页面'),
        ],
      ),
    );
  }
}

class _PagePushButton extends StatelessWidget {
  const _PagePushButton({
    Key? key,
    required this.buttonTitle,
    required this.pagename,
    this.bgColor = Colors.blue,
  }) : super(key: key);

  final String buttonTitle;
  final dynamic pagename;
  final Color bgColor;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(bgColor),
      ),
      child: Container(
        padding: const EdgeInsets.all(10),
        child: Text(buttonTitle),
      ),
      onPressed: () {
        AnalyticsService().logPage(buttonTitle);
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => pagename),
        );
      },
    );
  }
}


class AnalyticsService {

  Future logPage(String screenName) async {
    await FirebaseAnalytics.instance.logEvent(
      name: 'screen_view',
      parameters: {
        'firebase_screen': screenName,
      },
    );
  }
}


class FirebaseMessagingService {
  FirebaseMessaging messaging = FirebaseMessaging.instance;


  void setting() async {
    NotificationSettings settings = await messaging.requestPermission(
      alert: true,
      announcement: false,
      badge: true,
      carPlay: false,
      criticalAlert: false,
      provisional: false,
      sound: true,
    );

    print('User granted permission: ${settings.authorizationStatus}');
  }

  void fcmGetToken() async {

    if (isAndroid || isIOS) {
      final fcmToken = await messaging.getToken();
      print(fcmToken);
    }

    else {
      final fcmToken = await messaging.getToken(
          vapidKey: FirebaseOptionMessaging().webPushKeyPair);
      print('web : $fcmToken');
    }
  }
}

class FirebaseInAppMessagingService {
  void getFID() async {
    String id = await FirebaseInstallations.instance.getId();
    print('id : $id');
  }
}
/// Flutter
import 'package:flutter/material.dart';

/// Firebase
import 'package:cloud_functions/cloud_functions.dart';

class CloudFunctionsPage extends StatefulWidget {
  const CloudFunctionsPage({Key? key}) : super(key: key);

  @override
  CloudFunctionsPageState createState() => CloudFunctionsPageState();
}

class CloudFunctionsPageState extends State {

  int _number = 0;


  void addNumber() async {
    try {

      final result = await FirebaseFunctions.instance
          .httpsCallable('functionsTest')
          .call({'firstNumber': _number, 'secondNumber': 1});
      _number = result.data['addNumber'];
    } on FirebaseFunctionsException catch (error) {
      print(error.code);
      print(error.details);
      print(error.message);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Cloud Functions页'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text(
              '$_number',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            addNumber();
          });
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

⏫Firebase Hosting

Firebase Hosting概述

Firebase Hosting是一个为网络应用、静态和动态内容以及微服务提供的托管服务

如果您想将您的Flutter应用作为一个网络应用托管，可以使用

应用案例

准备

准备工作和前几章都已完成方可开始

使用方法

有两种方法来部署到Firebase Hosting

  • 通过输入命令进行部署
  • 使用Github Actions进行部署

在这种情况下，我们选择通过输入命令进行部署

创建一个Firebase项目，安装Firebase CLI并初始化项目

firebase init hosting

问题和答案示例如下

? What do you want to use as your public directory? (public)
build/web

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
No

? Set up automatic builds and deploys with GitHub? (y/N)
No

为网络配置设置

在web/index.html中，配置html 设置

在web/manifest.json中，配置网络应用的行为和图标

可以通过覆盖web/icons目录下的文件（如Icon-192.png）来改变应用程序的图标。
在这一点上要注意不要弄错尺寸。

调试完应用程序后，在Flutter端构建应用程序，然后用Firebase部署它

flutter build web
firebase deploy --only hosting

访问部署后出现的URL，如果应用程序被验证，就可以使用了

注意，如果你想使用一个自定义的域名，你可以从Firebase Console进行设置

↩️Firebase Performance Monitoring

Firebase Performance Monitoring概述

Firebase Performance Monitoring是一项允许您衡量您的Flutter应用性能的服务

点击这里查看Performance Monitoring官方文件

使用方法

要在项目中引入firebase_performance，请在pubspec.yaml中添加以下内容

dependencies:
  firebase_performance: ^0.8.2

为了确保Firebase的配置是最新的，在项目根目录下打开一个终端，运行flutterfire configure

为了显示最初的性能数据，运行该项目并检查它是否显示在Firebase控制台。

如果显示了图表，你就成功了。

自定义性能测量允许你添加自定义属性以及通用属性。

Firebase 其他服务

本章概述

本章总结了前几章中没有介绍的Firebase服务

Firebase Dynamic Links（仅限移动端）

Firebase Dynamic Links是一项提供 "动态链接 "的服务，可以让你直接进入移动原生应用中的链接内容

要在Flutter中构建，请将Firebase_dynamic_links导入你的项目，并从Firebase控制台创建链接

Firebase App Check

App Check是一项保护后端资源不被滥用的服务，如计费欺诈和网络钓鱼

使用reCAPTCHA或其他方式检查设备是否被信任。

所使用的认证供应商将因平台而异

平台 提供者
Apple platforms DeviceCheck, App Attest
Android Play Integrity, SafetyNet
web reCAPTCHA v3, reCAPTCHA Enterprise

它也可以与 Flutter 一起使用

如果flutterfire安装在你的环境中，从Firebase Console启用并初步配置App Check，并安装App Check库

flutter pub add firebase_app_check

调用执行 App Check 的代码，运行它，你就大功告成了

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

// Import the firebase_app_check plugin
import 'package:firebase_app_check/firebase_app_check.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  await FirebaseAppCheck.instance.activate(
    webRecaptchaSiteKey: 'recaptcha-v3-site-key',
  );
  runApp(App());
}

Firebase installations service

Firebase installations service负责管理Firebase的安装

用来检查Firebase的安装ID，用于Messaging、Analytics等

Firebase Google AdMob

Firebase Google Admob是一项移动广告服务

使用 Flutter 和 Firebase 制作！计数器应用程序_第44张图片
如果你想在Flutter中启动AdMob广告，你不能使用Firebase的Admob，必须使用移动广告SDK（Flutter）（beta）

使用 Flutter 和 Firebase 制作！计数器应用程序_第45张图片

Test Lab

Test Lab是一项允许你在云端托管的设备上测试你的应用程序的服务，当你想在各种配置上测试你的应用程序时可以使用。

你可以通过将你的应用程序部署到Test Lab，并从Firebase Console将文件上传到Robo Test，来测试你的移动应用程序。

官方文档

Firebase App Distribution

Firebase App Distribution是一项促进向测试人员分发应用程序的服务

与Google Play和App Store的链接使分发应用程序变得容易

你可以从Firebase Console分发应用程序并管理测试人员

官方文档

Firebase Extensions

Firebase Extensions是一项服务，它允许你使用打包的解决方案快速为你的应用程序添加功能。

在官方的Firebase Extensions中可以找到许多扩展，这些扩展是使用Cloud Functions for Firebase编写的

[使用 Flutter 和 Firebase 制作！计数器应用程序_第46张图片
](https://firebase.google.com/p...)

请注意，Firebase Extensions的安装只适用于Blaze计划（按需付费）

Firebase 安全规则

什么是Firebase的安全规则？

Firebase安全规则是定义如何允许访问存储数据的语法

Firestore、Realtime Database、Cloud Storage下列各项的语法是不同的

Firestore的语法

Firestore安全规则的语法是基于Common Expression Language(CEL)语言

作为基本的安全规则，在所有经过身份验证的用户都可以访问的测试环境中，编写

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

在只有内容所有者有权访问的生产环境中，编写

service cloud.firestore {
  match /databases/{database}/documents {
    // Allow only authenticated content owners access
    match /some_collection/{userId}/{documents=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId
    }
  }
}

使用 Flutter 和 Firebase 制作！计数器应用程序_第47张图片

Realtime Database

Realtime Database使用json格式的安全规则的语法。

为确保只有内容所有者才能访问，请按以下方式进行配置。

{
  "rules": {
    "users": {
      "$uid": {
        ".read": "auth != null && auth.uid == $uid",
        ".write": "auth != null && auth.uid == $uid"
      }
    }
  }
}

Cloud Storage

云存储安全规则的语法是基于Common Expression Language(CEL)

只能由内容所有者访问的安全规则包括

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /users/{userId}/{allPaths=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

参考网站

在编写本文时参考了一些网站

在此表示感谢

使用 Flutter 和 Firebase 制作！计数器应用程序_第48张图片

使用 Flutter 和 Firebase 制作！计数器应用程序_第49张图片

使用 Flutter 和 Firebase 制作！计数器应用程序_第50张图片

使用 Flutter 和 Firebase 制作！计数器应用程序_第51张图片

本文由mdnice多平台发布

你可能感兴趣的:(前端)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变 黑金IT fastapi微服务fastapi架构
    在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js前端javascript三维场景中下雪效果threejs实现下雪效果
    一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
  • 系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
    一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
  • ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
    1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
  • Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 qcidyu 好用的工具集合代码效率前端技巧Vue开发组合式函数模块管理自动导入NuxtKit
    title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N
  • 遍历dom 并且存储（将每一层的DOM元素存在数组中） 换个号韩国红果果 JavaScripthtml
    数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
  • Android+Jquery Mobile学习系列(9)-总结和代码分享 白糖_ JQuery Mobile
    目录导航   经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。   个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
  • impala参考资料 dayutianfei impala
    记录一些有用的Impala资料   1. 入门资料 >>官网翻译：     http://my.oschina.net/weiqingbin/blog?catalog=423691   2. 实用进阶 >>代码&架构分析：     Impala/Hive现状分析与前景展望：http
  • JAVA 静态变量与非静态变量初始化顺序之新解 周凡杨 java静态非静态顺序
    今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
  • 跳出iframe返回外层页面 g21121 iframe
    在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。 首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
  • JAVA多线程监听JMS、MQ队列 510888780 java多线程
    背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。 对于上面提到的方法2使用一个监听器开启多线
  • 第一个SpringMvc例子 布衣凌宇 spring mvc
    第一步：导入需要的包； 第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
  • 我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
    PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
  • 通过XSD验证XML antlove xmlschemaxsdvalidationSchemaFactory
    1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
  • 文本流与字符集 百合不是茶 PrintWrite()的使用字符集名字 别名获取
    文本数据的输入输出;           输入;数据流,缓冲流         输出;介绍向文本打印格式化的输出PrintWrite();   package 文本流; import java.io.FileNotFound
  • ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
            正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
  • java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 javajvmjdb
            用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。         现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
  • 【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
    在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
  • cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
        由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
  • 动态页面正文部分中文乱码排障一例 ronin47
    公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。 不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。 因为有做过系统调整，所以第一反应就是新上
  • java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
    import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
  • 从100PV到1亿级PV网站架构演变 cfyme 网站架构
    一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的 架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
  • [宇宙时代]宇宙时代的GIS是什么？ comsci Gis
           我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的          宇宙是一个高维时空
  • 详解create database命令 czmmiao database
    完整命令 CREATE DATABASE mynewdb   USER SYS IDENTIFIED BY sys_password   USER SYSTEM IDENTIFIED BY system_password   LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
  • 几句不中听却不得不认可的话 datageek
    1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
  • 1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
    原文地址：http://www.kafka0102.com/2010/08/281.html   因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
  • xcode6 Auto layout and size classes dcj3sjt126com ios
    官方GUI   https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html   iOS中使用自动布局（一）   http://www.cocoachina.com/ind
  • 通过PreparedStatement批量执行sql语句【sql语句相同，值不同】 梦见x光 sql事务批量执行
    比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) {    String sql = "inseret into customer(id
  • 程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
    一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear   二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
  • NGINX IXHONG nginx
    pcre 编译安装 nginx conf/vhost/test.conf   upstream admin { server 127.0.0.1:8080; }   server {                 listen       80; &
  • 设计模式--工厂模式 kerryg 设计模式
    工厂方式模式分为三种：   1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。   2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。   3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
  • Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd javaspringbeanxml
    1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。 通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
  • 解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centosvim
    有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？ 答案是肯定的，设置下缩进格式就可以了，非常简单： 在用户的根目录下 直接vi  ~/.vimrc文件 然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
  • netty大并发请求问题 tianzhihehe netty
    多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
  • Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
    我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。 我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。 经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他