Capacitor(JavaScript)

Updated View original on help.wingify.com ↗

This guide provides step-by-step instructions to integrate the FE JavaScript SDK into a Capacitor-based mobile application.

#What is Capacitor?

Capacitor is an open-source native runtime developed by the Ionic team that allows you to build cross-platform mobile applications using web technologies like HTML, CSS, and JavaScript. It enables web apps to run natively on iOS, Android, and the web with a single codebase.

#Compatibility with FE JavaScript SDK

The FE JavaScript SDK is designed to work seamlessly within web environments. Since Capacitor wraps web applications in a native container, the FE JavaScript SDK can be integrated directly into the web portion of your Capacitor app. This integration allows you to leverage FE’s features without needing native SDKs.

#Integration Steps

#1. Create a Capacitor Project

If you haven’t already set up a Capacitor project, follow these steps:

npm init @capacitor/app

Follow the prompts to set up your app. For detailed instructions, refer to the Capacitor Getting Started Guide.

#2. Add FE JavaScript SDK

Include the FE JavaScript SDK in your index.html file, typically located in your project's public or www directory. Insert the SDK script tag within the <head> section:

<head>
  <!-- Other head elements -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wingify-fme-node-sdk@1/dist/client/wingify-fme-javascript-sdk.min.js" />
</head>

Replace the src attribute with the actual URL if you want to use the downloaded version.

#3. Initialize FE SDK

After embedding the SDK, initialize it in your main JavaScript file or within a script tag in your HTML:

document.addEventListener('DOMContentLoaded', function () {
  wingifySdk.init({
    accountId: 'WINGIFY_ACCOUNT_ID',
    sdkKey: 'WINGIFY_SDK_KEY'
    // Additional configuration options
  });
});

Replace WINGIFY_ACCOUNT_ID and WINGIFY_SDK_KEY with your actual FE account ID. Refer to the FE JavaScript documentation for additional configuration options.

#4. Build and Sync Your Project

After setting up your project and integrating the FE SDK, build your project and sync it with the native platforms:

npm run build

npx cap sync

This will copy your web assets into the native iOS and Android projects.

#Platform-Specific Setup

#Android

Add the Android platform to your project:

npx cap add android

Open the Android project in Android Studio:

npx cap open android

Run your app on an emulator or connected device.

#iOS

Add the iOS platform to your project:
```
npx cap add ios
```
Open the iOS project in Xcode:
```
npx cap open ios
```
Run your app on a simulator or connected device.