Quickstart

Follow these steps to have a basic integration of the app's miles® SDK in your React Native application.

React Native Quickstart

Estimated time: 20 minutes

This guide will go over:

  • Conditions and minimum requirements

  • Installation

  • Configuration

  • Initialization

  • Attaching

react-native-appsmiles-apm on npm : https://www.npmjs.com/package/react-native-appsmiles-apm

Conditions and minimum requirements

Minimum Android version: 4.1 (API 16) Minimum iOS version : 7.0 Minimum XCode version : 7

I. Installation

npm
manual

Download the npm module:

npm install react-native-appsmiles-apm --save
react-native link react-native-appsmiles-apm

Skip the configuration section if you decide to do a manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]

  2. Go to node_modulesreact-native-appsmiles-apm and add RCTAPM.xcodeproj

  3. In XCode, in the project navigator, select your project. Add libRCTAPM.a to your project's Build PhasesLink Binary With Libraries

  4. Add Podfile in folder ios

  5. Add theses code in Podfile

    workspace 'example.xcworkspace' #--> name of your project
    source 'https://gitlab.appsmiles.eu/appsmiles/APMSpecs.git'
    source 'https://github.com/CocoaPods/Specs.git'
    target 'example' do #--> name of your project
    platform :ios, '9.0'
    use_frameworks!
    project 'example.xcodeproj' #--> name of your project
    pod 'APM', '~> 4.4.0'
    target 'RCTAPM' do
    platform :ios, '9.0'
    use_frameworks!
    project '../node_modules/react-native-appsmiles-apm/ios/RCTAPM.xcodeproj'
    pod 'APM', '~> 4.4.0'
    end
    end
  6. Launch the command line pod install

Android

  1. Open up android/app/src/main/java/[...]/MainApplication.java

  2. Add import com.moonmiles.APMReactPackage; and import com.moonmiles.apm.sdk.APMPublic; to the imports at the top of the file

  3. Add new APMReactPackage() to the list returned by the getPackages() method

  4. Append the following lines to android/settings.gradle:

    include ':react-native-appsmiles-apm'
    project(':react-native-appsmiles-apm').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-appsmiles-apm/android')
  5. Insert the following lines inside the dependencies block in android/app/build.gradle:

    implementation project(':react-native-appsmiles-apm')
  6. In global android/build.gradle

    Properties properties = new Properties()
    properties.load(project.rootProject.file('local.properties').newDataInputStream())
    //...
    allprojects {
    repositories {
    //...
    maven {
    url 'https://artifactory.appsmiles.eu/artifactory/list/appsmiles/'
    credentials {
    username = properties.getProperty("maven_appsmiles.username")
    password = properties.getProperty("maven_appsmiles.password")
    }
    }
    }
    }
  7. Add maven_appsmiles.username and maven_appsmiles.password in file android/local.properties with your credentials

    maven_appsmiles.username=USERNAME
    maven_appsmiles.password=PASSWORD
  8. Init the SDK APMPublic.sharedInstance(this); in the method onCreate() of the class MainApplication.java

    @Override
    public void onCreate() {
    super.onCreate();
    //...
    APMPublic.sharedInstance(this); //Init in MainApplication.java and main thread
    }
  9. Extends your MainActivity with ReactFragmentActivity

II. Configuration

iOS
Android
  1. Add Podfile in folder ios

  2. Add theses code in Podfile

    workspace 'example.xcworkspace' #--> name of your project
    source 'https://gitlab.appsmiles.eu/appsmiles/APMSpecs.git'
    source 'https://github.com/CocoaPods/Specs.git'
    target 'example' do #--> name of your project
    platform :ios, '9.0'
    use_frameworks!
    project 'example.xcodeproj' #--> name of your project
    pod 'APM', '~> 4.4.0'
    target 'RCTAPM' do
    platform :ios, '9.0'
    use_frameworks!
    project '../node_modules/react-native-appsmiles-apm/ios/RCTAPM.xcodeproj'
    pod 'APM', '~> 4.4.0'
    end
    end
  3. Launch the command line pod install

  1. Insert the following lines inside the dependencies block in android/app/build.gradle:

    implementation project(':react-native-appsmiles-apm')
  2. In global android/build.gradle

    Properties properties = new Properties()
    properties.load(project.rootProject.file('local.properties').newDataInputStream())
    //...
    allprojects {
    repositories {
    //...
    maven {
    url 'https://artifactory.appsmiles.eu/artifactory/list/appsmiles/'
    credentials {
    username = properties.getProperty("maven_appsmiles.username")
    password = properties.getProperty("maven_appsmiles.password")
    }
    }
    }
    }
  3. Add maven_appsmiles.username and maven_appsmiles.password in file android/local.properties with your credentials

    maven_appsmiles.username=USERNAME
    maven_appsmiles.password=PASSWORD
  4. Init the SDK APMPublic.sharedInstance(this); //Init in MainApplication.java and main thread in the method onCreate()

  5. Extends your MainActivity with ReactFragmentActivity

III. Initialization

Initialize the SDK in App.js with the keys we provided to you (partnerID, partnerSecret, baseUrl), your app's package name (appId).

import { APMModule } from 'react-native-appsmiles-apm';
//...
function initSDKAPM() {
APMModule.initAppWithAppID('<PARTNER_ID>', '<PARTNER_SECRET>', '<APP_ID>');
APMModule.setDebugMode(true);
APMModule.setBaseUrl('<BASE_URL>');
}
//...
initSDKAPM();

Environment

URL

PRODUCTION

https://api-prod1.appsmiles.eu/

SANDOX

https://api-sb.appsmiles.eu/

We host projects on multiple servers, double check with us or your team to verify the base URL

IV. Attaching

Using inheritance

Create a global class AbstractScreen (or edit an existing abstract class) that override the methods componentDidMount() and componentDidUpdate() to call NativeModules.APMModule.refreshSDK()

// @flow
import React, { Component } from 'react';
import { APMModule } from 'react-native-appsmiles-apm';
export default class AbstractScreen extends Component<*> {
componentDidMount() {
APMModule.refreshSDK();
}
componentDidUpdate() {
APMModule.refreshSDK();
}
}

Have all the screens in your application extend AbstractScreen:

class HomeScreen extends AbstractScreen {
//...
}
class ChatScreen extends AbstractScreen {
//...
}
//etc.

Using Higher Order Components

Also, you can use a HOC (https://reactjs.org/docs/higher-order-components.html)

//@flow
import * as React from "react";
import { APMModule } from "react-native-appsmiles-apm";
// see https://reactjs.org/docs/higher-order-components.html
export default function withAPM(WrappedComponent: React.ComponentType<any>) {
// ...and returns another component...
return class extends React.Component<{}, {}> {
componentDidMount() {
APMModule.refreshSDK();
}
componentDidUpdate() {
APMModule.refreshSDK();
}
render() {
// ... and renders the wrapped component with the fresh data!
// Notice that we pass through any additional props
return <WrappedComponent {...this.props} />;
}
};
}

You're done with the installation !

You should be able to see our SDK on your application.

And the banner appear !

Head to the next section to start integrating our SDK into your app's features.