Using AppCenter’s services in a React Native application.

SaidHayani@

·

Follow

Published in

Bits and Pieces

·

8 min read

·

Jan 14, 2020

--

1

Listen

Share

AppCenter is a cloud service from Microsoft that provides services like monitoring, diagnostic, analytics, CI and many others.

In this post, we will be integrating AppCenter SDK into a React native app. I have been using AppCenter in my work for a long time and I can testify that it’s a real time saver when it comes to building, integrating and distributing your app for testers or to the app stores.

First, let’s generate a new React Native app using React native CLI and start integrating the AppCenter SDK.

Let’s get started and bootstrap a new project.

react-native init appcenterSdkIntegration

This is a totally new react-native app and we are using version 0.61.5 so let’s start by installing AppCenter SDK (you can always refer to the docs here).

As a small but important side-note: try using Bit (GitHub) with your React Native projects. It will help you isolate components from your codebase and share them to a team collection in bit.dev. This way, you and your team can speed up development, increase scalability and always keep a consistent UI.

Installing Dependencies

Using Yarn within the root of your project:

$ yarn add appcenter appcenter-analytics appcenter-crashes --exact

Using npm :

$ npm install appcenter appcenter-analytics appcenter-crashes --save-exact

This will install the AppCenter packages we need inside our React Native project.

AppCenter Integration for ios

Because we are using React Native version +60.0.0, the dependencies are linked automatically in the background by React Native CLI. If you’re using an older version of React Native you need to link each package using CLI or manually.

react-native link appcenter
react-native link appcenter-analytics
react-native link appcenter-crashes

Note: the installation instructions above are directly from appcenter docs please always refer to the docs if you stuck or you have issues installing the dependencies

React Native version 60.0.0 and above use cocapods to manage the packages for ios so we need to install the app center packages natively using cocapods.

Inside ios folder run the command below:

pod install --repo-update

Next look for the AppCenter-Config.plist inside ios folder, this file will contain your app Secret copy and paste the code inside the file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    <key>AppSecret</key>
    <string>{APP_SECRET_VALUE}</string>
    </dict>
</plist>

Learn how to getAPP_SECRET_VALUE here.

Now we have to register AppCenter inside AppDelegate.m always inside the ios folder. first import AppCenter modules at the top of the files.

#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>

Next step is to initialize the AppCenter within didFinishLaunchingWithOptions block.

[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

Finally, you should build the app, inside Xcode run command + B to build and your build should be successful after finishing the steps above.

If you have any issue building please refer to docs here and make sure you don’t miss anything.

Integrating AppCenter For Android

Is most easy just two steps, first, first we create a file with the name appcenter-config.json inside android/app/src/main/assets/ you will probably won’t find the assets folder when you create a new project so create a new folder inside android/app/src/main/ with the name assets then create appcenter-config.json file, it should have the properties below:

{
    "app_secret": "{APP_SECRET_VALUE}"
}

The second thing we do is copy and paste the two lines below inside res/values/strings.xml:

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

Note all these steps are copied from appcenter.ms so always refer to that whenever you have an issue.

After the installation, we are ready to go and try to use some of the AppCenter services.

Building the React native app

With app center, we can automate our React Native builds for both ios and android and even distribute the app to the stores after the build.

We are going to manually build the app inside the AppCenter dashboard and then we make the build automated.

If you haven’t created an account yet please do it .

Well, first we create a new app and link it to the Github repository.

Create a new app on AppCenter

The dashboard looks like below:

Click on add new app, this panel will show up.

Here first we create the name of the app you can put any name. for the OS select ios for the platform select React Native then click add new app this will create a new app profile.

Now let’s try to build the repository that contains our React Native app’s code, if you haven’t uploaded the app to the GitHub please do it.

Click on the build label this table will show up:

We select GitHub this will be going to list all the repositories on your Github account. we choose the React native app.

You can choose the branch you want to build in our case we only have the master branch.

After choosing the branch a panel will show up to set the build configuration, for example, choosing the node version, signature in case you want to distribute the app to the store and specifying whether build on every push to GitHub of making manually, etc.

Click build and the build process will start.

You could see the output of the runtime build. probably the build may take a little bit longer.

Crashes and issues tracking

One of the cool features that AppCenter provides is a crash reports, it helps us to identify the type and more details about the issues that happen while our app is in running. to enable this feature, inside the Diagnostic tab click on issues. this requires to upload the symbols of our app to the AppCenter.

Symbols or ios Symbolication, used to contain and store tvOS and iOS crash reports show the stack traces for all running threads of your app at the time a crash occurred. → appcenter.ms docs learn more

After clicking on Upload symbols button a panel of instructions on how to upload the symbols from your app will show like below.

Note: you need to build your app for release to be archived so to generate symbols or you can archive directly in Xcode Menu Product → archive

If you are using AppCenter to build your app it will automatically generate the symbols and archives for you so you don’t have to upload anything or do any of the steps above.

After the issue tracking is enabled AppCenter will generate charts and detailed analytics about crashes inside your app based on the symbols as shown below.

One of the things I don’t like about AppCenter compared to other crash reporter services like bugsnag or sentry is that it doesn’t catch pretty much the most of the javaScript crashes and it doesn’t give you much details about the issue inside the JavaScript environment, for example, track the file or where the issue occurred inside JavaScript just it shows the type of the crash and some error message related to the issue.

Event Tracking or log event, Monitoring and Analytics

One of the great things about monitoring and analyzing your app is that makes you better understand how the users use your app, how much time they spent inside the app, the parts used mostly in the app that helps us determine how our app should work well for the user for a better experience.

Supposed we have an app that sells products, and we need to track the shopping process that user follow while using the app for example here we going to track when the user Tap add to cart button to collect the information about this process, for example, information about the product that the user select,(the type, price, etc) and the platform information (ex: ios/android, device[android/ Iphone]).

Here we have a button when it pressed it should send information to the AppCenter Analytics alongside.

You can import the Analytics module directory from appcenter-analytics

import Analytics from 'appcenter-analytics';

And dispatch the info every time the button is tapped>

Source code:

Other things you can do with AppCenter

• Codepush
• Remote push notification
• Automated Tests
• Other

Wrapping up

My final thoughts about AppCenter is that is the best cloud service for React native app I use it every day and I would recommend it to anyone who works with React Native and the most features I like about it is distributing the app to testers, (CI/CD)Continues Integration and Analytics.

Thanks for reading

• Twitter
• GitHub
• Join the mail-list

Learn More