npm package: @iot-venture/ionic-angular-sdk
Description: This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.4. The supported ionic project version is 6 and above.
Latest version: 0.1.18

# @iot-venture/ionic-angular-sdk

This project was generated with [Angular CLI](https://github.com/angular/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](https://angular.io/cli) page.