Start chatting

I have not written my blog for a long time ๐Ÿคช, the main reason is to spare some time to review the knowledge of iOS native development ๐Ÿ“–, consolidate my technical stack, and development foundation. At the end of the same year, I also made some personal summaries and spent some time on future development planning. Today I finally wrote my first blog post of 2021.

Preface ๐Ÿ“ญ

You will certainly have a choice about Flutter error statistics or online user behavior statistics ๐Ÿง. Also according to their own business, core functions, practical situation to choose. For example, Bugly, Friends or their own company’s internal error monitoring system ๐Ÿ“ˆ and so on. In fact, I think there is no superior or inferior tool class or ranking order, but a good, suitable tool for you can make you more comfortable when troubleshooting online problems or doing performance tuning. The purpose of writing this article is also to give you a choice in this area ๐Ÿ’ก. The purpose of writing this article is that individuals in access to multiple Firebase functions may encounter domestic related information, details of the problem related to the treatment of less access problems, hope to write an easy-to-understand practical tools class article, can provide some help to those who have relevant needs. You follow-up access plan ๐Ÿ“ฎ can also be the first to click like collection, Ali Gardo ๐Ÿฅณ.

What is a Firebase

In fact, there may be some students who know less about Firebase platform, but also take this opportunity to do a simple introduction ๐Ÿ“ƒ.

Firebase is a real-time back-end database startup that helps developers quickly write Web and mobile applications. Since Google acquired Firebase in October 2014, users have been able to use Firebase more easily while integrating Google’s cloud services. Firebase provides a variety of tools to help you develop great applications and expand your user base to make more money. We’ve taken care of the groundwork so you can focus on monetizing your business and focusing on your users.

Why Firbase?

Why is this article about Firebase? In fact, I have been using Bugly for online error monitoring. In fact, Bugly itself is quite practical, and the statistical analysis of online error reporting is also quite in place ๐Ÿ‘. There are several reasons why I migrated the errors and related statistics from the project to Firebase:

  • andFlutterBelong to the sameGooglePowerful backer ๐Ÿ”ฎ.
  • There are very mature plug-in libraries and integration solutions.
  • Very clear console information โž• good interactive experience.
  • User information more comprehensive, error more detailed ๐Ÿงฎ.
  • More rich and diversified functions.

In fact, another personal reason is that the company has been using Firebase for a long time and I feel very good about it ๐Ÿ‘€ when we had a technical exchange meeting with partners of netease recently.

Eat dinner ๐Ÿด

The Firebase website offers a wide variety of features that can be used with Flutter. Here we have selected only a few that are most useful for Flutter. (Weak weak ridicule, really not licking, domestic when can have such a platform, simply tears ๐Ÿคฃ)

Create projects and applications

I’m assuming that you’ve already registered your Firebase account and logged into the console (with a hand ๐Ÿ‘‹). After creating the account in your console is nothing, we can choose to add the project step by step ๐Ÿณ.

During the project creation process, Firebase will prompt you to enable monitoring and follow the recommended steps without selecting ๐Ÿ”.

After creating a project, you can directly enter the console corresponding to the project. You can see that there are four buttons ๐Ÿ”˜ in the center of the console home page, corresponding to iOS, Android, Web, Unity(game engine). Click the corresponding button to enter the relevant integration page ๐Ÿชง.

IOS ๐ŸŽ

Step 1 Register the application

The target -> General option in your Xcode can be found. It is recommended that you fill in the target -> General option for the App alias and App Store ID to avoid unnecessary trouble ๐Ÿ“Œ.

Step 2 Download the configuration file

Based on the information you filled in in the previous step, Firebase will generate a configuration file (.plist), download the plugin, and we will open our iOS project for the Flutter project ๐Ÿ•ต๐Ÿปโ™‚๏ธ.

Drag the configuration file to the specified location (usually the Runner – Runer corresponding to the Flutter, and the AppDelegate level corresponding to the Flutter) and select ๐Ÿ“ฆ from the pop-up box:

Step 3 Preliminarily ends

The next two steps, adding the Firebase SDK and adding the initialization code, can be skipped as we will complete the related operations in the Flutter layer ๐Ÿ˜Ž.

Android ๐Ÿค– ๏ธ

Once you’re done with iOS, go back to the console, select create a new app ๐Ÿชœ, and select Android.

Step 1 Register the application

Similar to iOS, Android requires you to enter some basic information ๐Ÿ“ƒ to generate a profile. The main information is the package name of the software. (Corresponding to package in androidmanifest.xml)

Step 2 Download the configuration file

Again, we download the configuration file and add it to ๐Ÿ“Œ (app directory, same as build.gradle).

Note that this step can be performed either directly under the Flutter project or through the Corresponding Android project of the Flutter project. Recommended the latter is not easy to drag the wrong location โณ.

Step 3 Preliminarily ends

Notice that there is one less step in the Android integration process compared to iOS — adding initialization code, without even adding any runtime code ๐Ÿš€.

Flutter ๐ŸŒŸ

The above integration for iOS and Android is the first step we completed ๐Ÿ”ฎ. Next, we need to add Firebase to our Flutter App. Here we will introduce our hero — FlutterFire buckets. The whole system is standard with iOS Support and Android Support, and some plug-ins even have Web and MacOS Support, and the whole system is from Google, the original soup of the original food ๐Ÿฅ„, completely bid farewell to the plug-in incompatible.

firebase_core

This is the first plug-in we want to access, what is the function of this plug-in ๐Ÿค”? Here’s the official note

A Flutter plugin to use the Firebase Core API, which enables connecting to multiple Firebase apps. A Plugin for Flutter uses the Firebase Core API to connect to multiple Firebase applications.

First of all, this plug-in is a plug-in used to initialize our Firebase. In addition, due to the large size of some apps, developers may want to conduct internal user analysis or error statistics in a modular way, so this plug-in also provides this function โš™๏ธ. Without a doubt, this plugin is essential if we want to access Firebase. So we import it directly in the.yaml file.

Dependencies: Firebase_core: ^0.7.0 Copy codeCopy the code

There is a long list of access code in the Example of this plug-in. But if you’re not chunking within your application ๐Ÿงฐ, all you need is one sentence

await Firebase.initializeApp(); Copy the codeCopy the code

firebase_analytics

This is a used to collect your application plug-in library user information, record the user behaviour, and many developers will options, through the monitoring of online users and user distribution and use of habit, can let us know more about customer ๐Ÿ–‡ closer to customers, thus improve our popularity of the application of targeted, and even users ๐ŸŽ‰. General use:

FirebaseAnalytics analytics = FirebaseAnalytics(); / / / in your main MaterialApp can be found in the dart (home: MyAppHome (), navigatorObservers: [FirebaseAnalyticsObserver (analytics: analytics), ], ); Copy the codeCopy the code

To record user behavior (there are plenty of user behaviors and templates to choose from in the example of Firebase_analytics, but here are only three), you can call ๐Ÿ”ฌ anywhere you click a button, route a page, etc. According to your needs at the appropriate time to call, you can get the user information you want ๐ŸŽŠ.

  • firebase_analytics example
Future<void> _sendAnalyticsEvent() async {await analytics. LogEvent (name: 'test_event', parameters: <String, dynamic>{ 'string': 'string', 'int': 42, 'long': 12345678910, 'double': 42.0, 'bool': true,},); setMessage('logEvent succeeded'); } Future<void> _testSetUserId() async {await analytics. SetUserId('some-user'); setMessage('setUserId succeeded'); } / / / get the current view and send Future < void > _testSetCurrentScreen () is async {await analytics. SetCurrentScreen (screenName: 'Analytics Demo', screenClassOverride: 'AnalyticsDemo', ); setMessage('setCurrentScreen succeeded'); } Duplicate codeCopy the code

firebase_crashlytics

This is our error statistics plugin, a very useful plugin that can detect crashes and errors on your online โŒ, similar to the Bugly feature. Specific use:

  • First of all inmainFunction to specify our error reporting tool ๐Ÿ”ง asFirebaseCrashlytics
main() { WidgetsFlutterBinding.ensureInitialized(); runZonedGuarded(() { runApp(MyApp()); }, (error, stackTrace) { print('runZonedGuarded: Caught error in my root zone.'); FirebaseCrashlytics.instance.recordError(error, stackTrace); }); } Duplicate codeCopy the code
  • After therunAppCorresponding page for the corresponding configuration (this part of the code is a bit much ๐Ÿคฏ, suggested to viewexampleCode)
  • firebase_crashlytics example
Future<void> _testAsyncErrorOnInit() async { Future<void>.delayed(const Duration(seconds: 2), () { final List<int> list = <int>[]; print(list[100]); }); } // Define an async function to initialize FlutterFire Future<void> _initializeFlutterFire() async { // Wait for Firebase to initialize await Firebase.initializeApp(); if (_kTestingCrashlytics) { // Force enable crashlytics collection enabled if we're testing it. await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true); } else { // Else only enable it in non-debug builds. // You could additionally extend this to allow users to opt-in. await FirebaseCrashlytics.instance .setCrashlyticsCollectionEnabled(! kDebugMode); } // Pass all uncaught errors to Crashlytics. Function originalOnError = FlutterError.onError; FlutterError.onError = (FlutterErrorDetails errorDetails) async { await FirebaseCrashlytics.instance.recordFlutterError(errorDetails); // Forward to original handler. originalOnError(errorDetails); }; if (_kShouldTestAsyncErrorOnInit) { await _testAsyncErrorOnInit(); }} Copy the codeCopy the code

firebase_performance

Firebase_performance is a plugin that monitors the performance of your application, including but not limited to page launch performance and network performance ๐Ÿ“Š. However, firebase_performance is recommended only for overseas ๐ŸŒ users or applications that need detailed page performance analysis. Because the network related performance can only monitor the request of foreign users, the request of domestic users can not be collected, it seems that some chicken ribs ๐Ÿ“œ. First declare a FirebasePerformance instance

FirebasePerformance _performance = FirebasePerformance.instance; Copy the codeCopy the code

Establish a connection to FirebasePerformance in an appropriate place (typically on the home page or previous animation page).

await _performance .setPerformanceCollectionEnabled(! _isPerformanceCollectionEnabled); final bool isEnabled = await _performance.isPerformanceCollectionEnabled(); setState(() { _isPerformanceCollectionEnabled = isEnabled; _performanceCollectionMessage = _isPerformanceCollectionEnabled ? 'Performance collection is enabled.' : 'Performance collection is disabled.'; }); debugPrint(_performanceCollectionMessage); Copy the codeCopy the code

For more details

Firebase version

You may be able to access multiple Firebase functions, but note that the version of the plugin must be the corresponding ๐Ÿ’ก, which mainly refers to Firebase_core. Just to be safe, all the plugins should use the latest version. As of the time OF my post, I have used the latest version of the plugin in my application. The following is available for reference at ๐Ÿท :

# Firebase Firebase_core: ^0.7.0 Firebase_analytics: ^7.0.1 Firebase_crashlytics: ^0.4.0+1 Firebase_performance: ^0.5.0+1 Copy codeCopy the code

If a plugin version does not correspond to ๐Ÿšฉ, an error message will be reported when importing the plugin (is this the charm of the pro-son plugin ๐Ÿคฃ) :

IOS symbol Table configuration (dSYM)

In order to better analyze iOS errors, that is, to make the error stack information uploaded to the Firebase console more user-friendly ๐Ÿ”ฎ, we usually need to upload the iOS symbol table to the platform. If you don’t know if you uploaded the symbol table ๐Ÿ“ƒ, you can find it in the Crashlytics feature module of the Firebase console. If dSYM is missing, you can manually upload โš™๏ธ by running the script on the terminal.

You can also configure the runtime script in the iOS project to automatically upload ๐Ÿš€ at runtime (this part is recommended only for those who have used iOS native development) and add the following script to Build Phases in Xcdoe

"${PODS_ROOT}/FirebaseCrashlytics/run" "${PODS_ROOT}/FirebaseCrashlytics/upload-symbols" -gsp "${PROJECT_DIR}/GoogleService- info.plist "-p ios "${DWARF_DSYM_FOLDER_PATH}/${DWARF_DSYM_FILE_NAME}" copies the codeCopy the code

Note ๐Ÿ’ก : the script here is not fixed and depends on your own project directory, such as the location of the GoogleService- info.plist file in the red box below

Runtime problems

  • Full accessFirebaseA black screen may appear when the application is started. Don’t worry ๐Ÿ™Š, this isdebugEnable some functions in mode, and we adoptFutureBuilderComponent causes inreleaseAll is well ๐Ÿ”‹.
  • Access to theFirebaseAfter that, we will upload some logs and symbol table when we run the package, so make sure your network environment is scientific, otherwise it may lead to failure ๐Ÿ’ฅ.
  • Let’s say you plug in fully and successfullyFirebaseThe first generation of all your data is also delayed12hIt varies from left to right, so you may not immediately see the kanban where you access data โณ on the console.

Done, experience the function

A complete, typesettable main console that can see almost all the core data you need, very ๐Ÿ†’.

User analysis

Click on the user analytics module and you can get a lot of your integrated data ๐Ÿ›ต, such as your integrated page statistics, popular user events, etc., as well as some user data. The actual amount of information in this interface, you can experience. The number of a dozen user related tables, including line chart, curve chart, pie chart and so on ๐Ÿ“ˆ ๐Ÿ“Š, all kinds of data is more private, here will not show you one by one, can only show two not very related tables. The moment you see the charts, you will feel a sense of accomplishment ๐Ÿค“ :

An error screen

Click the Crashlytics module, each error and crash can now be captured at ๐Ÿšจ, you can use the relevant user information, and troubleshoot according to the error log below, you can even customize the level of error, and set the corresponding error to do in the form of cards to deal with ๐Ÿš„, Feel you in approval ๐Ÿšง file, orderly.

Performance monitoring

Click on the Performance module, which has detailed Performance information for your application.

There are even ๐Ÿ“ฒ network-related performance analyses. Network tests can be performed based on the success rate and duration of network requests. The background return speed is slow, the success rate is low can directly communicate with the background personnel to deal with the corresponding interface (no longer need to network stuck on the back of the pot, well-founded dumping ๐Ÿฅณ)

The end of the

At the end, I enclose some websites that you may use: ๐ŸŒ :

  • Firebase website
  • Flutter Firebase Plugin – Github

If you have any questions about access to Firebase, please leave a message. The article has omissions welcome correction, grateful ๐Ÿš€.