FintechOS Mobile Launcher - Capacitor

The FintechOS Mobile Launcher allows you to connect your mobile device to a FintechOS Portal or digital journey.

Setup

  • Install the requirements (nodejs, AndroidStudio, Xcode for iOS).
  • Download the project from https://github.com/FintechOS/MobileLauncherCapacitor git clone https://github.com/FintechOS/MobileLauncherCapacitor --recursive
  • npm install in the root of this project.
  • npm install in the /capacitor folder (in order to fix a redirect issue, a fork was made on the capacitor repo - reason why this exists)
  • npm run build in the /capacitor folder
  • npx cap sync in the root of the project

If you experience issues with npx cap, please run "npm install -g @capacitor/cli"

npx command examples

npx is a new utility available in npm 5 or above that executes local binaries/scripts to avoid global installs

Adding a platform: - npx cap add android - npx cap add ios

Open builder based on platform: - npx cap open ios (requires xcode) - npx cap open android (requires android studio)

Configuration

The main config file is called capacitor.config.json and is one of the few items that needs to be changed before deploying a new mobile app.

Copy 
{
  "appId": "com.fintechos.core.n.demo", //id which you use to register your application
  "appName": "FintechOS Native Demo",
  "bundledWebRuntime": true,
  "npmClient": "npm",
  "webDir": "www",
  "appendUserAgent": "FtosNative",//mandatory in order to let the platform know it has been accessed from a mobile device
  "server": {
    "url": "https://training0003.westeurope.cloudapp.azure.com/FTOS_Portal/Main", //link to your portal or user journey - this is the page that will be loaded when launching the app
    "allowNavigation": [
      "training0003.westeurope.cloudapp.azure.com"
    ]
  },

  //below you can specify which plugins to be added to the app and their settings
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    },
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  }
}

 

Google Services

In case that the bundle name or id changes, or you configure a different FCM project for notifications, the MobileLauncherCapacitor\android\app\google-services.json needs to be updated and the build process to be executed. Note that the changes won't propagate until the build process is called.

The google-services.json needs to contain the bundleid specified in the appId field of the capacitor.config.json (i.e. com.fintechos.core.n.demo)

iOS Build

If asked for CocoaPods install: - run pod install or pod update inside the ios folder

FTOS sample widget code to register for notifications

Window.Capacitor methods will be changed in the future with a more user friendly wrapper.

Copy 
  //we determine the portal was launched from a mobile device by adding UserAgent "FtosNative"
  //isFtosNative checks if there's a user agent with that value
  if (ebs.isFtosNative) {

      window.Capacitor.Plugins.PushNotifications.requestPermission().then( result => {
        if (result.granted) {
          // Register with Apple / Google to receive push via APNS/FCM
          window.Capacitor.Plugins.PushNotifications.register();
        } else {
          // Show some error
        }
      });

      // On success, we should be able to receive notifications
      window.Capacitor.Plugins.PushNotifications.addListener('registration',
        (token) => {
            console.log(token);
          alert('Push registration success, token: ' + token.value);
          //registering to Azure Notifications Hub, for more details on this please check 
          //http://docs.fintech-os.local/docs/Content/articles/server/AutomationScripts/server_side_sendMobileNotifications.html
          ebs.callEbsService({
              //possible values:fcm or apns - for this example it is hardcoded to fcm
              Platform: "fcm",
              Handle: token.value,
              AppName: "testapp"
          }, "./NotificationHub/CreateOrUpdateRegistration", console.log, console.error);
        }
      );
  }