@iot-venture/ionic-angular-sdk v0.1.18

@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

USER_DATA - User object type and its following attributes

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.