@iot-venture/ionic-angular-sdk

This project was generated with Angular CLI version 15.2.4. The supported ionic project version is 6 and above.

Installation

1. Below dependencies must be installed to avail all the features of the SDK

npm i @ngx-translate/http-loader @ngx-translate/core @awesome-cordova-plugins/http @angular/google-maps @zxing/ngx-scanner @awesome-cordova-plugins/core @zxing/library @zxing/browser intl-input-phone @googlemaps/js-api-loader

2. Package npm installation

npm i @iot-venture/ionic-angular-sdk

3. Create the ionic/angular project

ionic start [project-name]

4. Install the necessary Cordova plugins to avoid http requests made in iOS and Android

npm i cordova-plugin-advanced-http cordova-plugin-file

Integration

Imports:

Import the module IonicAngularSdkModule in the imports section of the main component

Properties:

configJson - Mandatory json Object that contains the following attributes

| Attributes | Type | Default | Description | | ------------------ | ---------- | --------- | -------------------------------------------------------------------------------------------------------- | | brandIcon | string | "" | Brand icon which needs to be displayed in the login page | | language | string? | "en" | The values can be either "en" or "de". If the phone number contains +49, +43 and +41 it defaults to "de" | | environment | string | "staging" | The values can be either "staging" or "production" | | brandName | string | "" | Only the supporteed whitelabel names can be given. | | markerIcon | string | "" | The markericon can be the link of the image of the custom marker. | | markerSelectedIcon | string | "" | The markericon can be the link of the image of the custom marker that should be shown on selected. | | storeUrl | string | "" | The store url of the whitelabel apps | | buyTrackerUrl | string | "" | The buyTrackerUrl of the tracker where user can buy the trackers | | loginText | string? | "" | The loginText is the text description that needs to be displayed in the login page | | middleText | string? | "" | The middleText is the text string present inbetween the login button and buy tracker bg img logo | | buyTrackerBgImg | string? | "" | the background image of buy a tracker button in the login screen | | user | USER_DATA? | "" | the object can contain the user data which needs to be transfered to the backend. Its of type USER_DATA |

USER_DATA - User object type and its following attributes

| Attributes | Type | Default | Description | | ------------- | ------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | | phone | string? | "" | Prefilled mobile number value with country code. Please make sure, you provide the space between the country code and the number | | firstname | string? | "" | First name of the user | | lastname | string? | "" | Last name of the user | | webhook_url | string? | "" | Webhook Url for push notification connection with backend | | address | string? | "" | address of the user | | webhook_token | string? | "" | Webhook token to authenticate the webhook_url |

Usage:

The demo sample configJson:

  sdkConfigJson : string = ""

  constructor() { }

  ngOnInit() {
    this.sdkConfigJson = JSON.stringify({
      brandIcon: "../../assets/icon/itsmybike.png",
      language: "en",
      mapApiKey: "***----***",
      environment: "staging",
      brandName: "ITS MY BIKE",
      markerIcon: "../../assets/icon/marker.png",
      markerSelectedIcon: "../../assets/icon/markerSelected.png",
      storeUrl: "---storeUrl---"
      buyTrackerUrl: "--trackerlink--",
      loginText: "--login-text--",
      middleText: "--middle-text--",
      buyTrackerBgImg: "--asset-url--",
      user: {
        phone: "+49 12345678910", (Please make sure you provide space between the country code and the number. If the countrycode is not given, default sets to +49)
        webhook_url: "--webhook-url--",
        webhook_token: "--webhook_token--"
      }
    })
  }

 <iot-venture-ionic-angular-sdk configJson="{{ sdkConfigJson }}"></iot-venture-ionic-angular-sdk>

Add Permissions

1. Android: Add the following permissions in the android's AndroidManifest.xml file

  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.INTERNET" />

2. iOS: Add the following permissions in the iOS's Info.plist file

  <key>NSLocationAlwaysUsageDescription</key>
	<string>Your current location is shown on the map to help you navigate to your bike.</string>
	<key>NSLocationWhenInUseUsageDescription</key>
	<string>Your current location is shown on the map to help you navigate to your bike.</string>
	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
	<string>Your current location is shown on the map to help you navigate to your bike.</string>
	<key>NSCameraUsageDescription</key>
	<string>We need access to your camera so that you can scan the QR code on your key card to add your bike to your account.</string>
	<key>NSPhotoLibraryUsageDescription</key>
	<string>We need to access your camera roll so that you can upload images of your bike.</string>
	<key>NSPhotoLibraryAddUsageDescription</key>
	<string>We need to access your camera roll so that you can upload images of your bike.</string>
	<key>ITSAppUsesNonExemptEncryption</key>
	<false/>
    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <false/>
      <key>NSExceptionDomains</key>
      <dict>
        <key>itsmybike.com</key>
        <dict>
          <key>NSIncludesSubdomains</key>
          <true/>
          <key>NSExceptionAllowsInsecureHTTPLoads</key>
          <true/>
        </dict>
      </dict>
    </dict>

Include translation assets in the project

1. Add this to your project's angular.json.

"assets": [
    {
        "glob": "**/*",
        "input": "./node_modules/@iot-venture/ionic-angular-sdk/src/assets",
        "output": "/assets/"
    }
],

2. Please include the following cdn scripts in your project in order to use this plugin or you can download that script file manually and include it in head section of index.html file -

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Known issues

Could not resolve peer dependency: Try the following code before npm install

npm config set legacy-peer-deps true

To avoid hostname:

To avoid hostname "localhost", change the following in the ionic app's capacitor config file 'capacitor.config.ts'

const config: CapacitorConfig = {
  server: {
    hostname: 'your-hostname-goes-here',
  }
}

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.