Compare commits

...
4 changed files with 152 additions and 122 deletions
+42 -116
View File
@@ -28,58 +28,53 @@ For the full Awesome Cordova Plugins documentation, please visit [https://ionicf
### Basic Usage
#### Ionic/Angular apps
#### Ionic/Angular apps (Standalone)
To use a plugin, import and add the plugin provider to your `@NgModule`, and then inject it where you wish to use it.
Angular v14+ uses standalone components by default. To use a plugin, register it as a provider in your application bootstrap and inject it using Angular's `inject()` function.
Make sure to import the injectable class from the `/ngx` directory as shown in the following examples:
```typescript
// app.module.ts
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { Camera } from '@awesome-cordova-plugins/camera/ngx';
import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';
import { AppComponent } from './app/app.component';
...
@NgModule({
...
providers: [
...
Camera
...
]
...
})
export class AppModule { }
bootstrapApplication(AppComponent, {
providers: [Camera, Geolocation],
});
```
```typescript
import { Component, OnInit } from '@angular/core';
import { inject } from '@angular/core';
import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';
import { Platform } from 'ionic-angular';
import { Platform } from '@ionic/angular';
@Component({ ... })
export class MyComponent {
@Component({
selector: 'app-my-component',
standalone: true,
template: `<p>My Component</p>`,
})
export class MyComponent implements OnInit {
private geolocation = inject(Geolocation);
private platform = inject(Platform);
constructor(private geolocation: Geolocation, private platform: Platform) {
async ngOnInit() {
await this.platform.ready();
this.platform.ready().then(() => {
// get position
const pos = await this.geolocation.getCurrentPosition();
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`);
// get position
this.geolocation.getCurrentPosition().then(pos => {
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)
});
// watch position
const watch = geolocation.watchPosition().subscribe(pos => {
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)
});
// to stop watching
watch.unsubscribe();
// watch position
const watch = this.geolocation.watchPosition().subscribe((pos) => {
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`);
});
// to stop watching
watch.unsubscribe();
}
}
```
@@ -126,9 +121,9 @@ const Tab1: React.FC = () => {
};
```
#### ES2015+/TypeScript
#### ES2015+/TypeScript (without Angular)
These modules can work in any ES2015+/TypeScript app (including Angular/Ionic apps). To use any plugin, import the class from the appropriate package, and use it's static methods.
These modules can also be used without Angular by calling static methods directly:
```js
import { Camera } from '@awesome-cordova-plugins/camera';
@@ -140,64 +135,17 @@ document.addEventListener('deviceready', () => {
});
```
#### AngularJS
Awesome Cordova Plugins generates an AngularJS module in runtime and prepares a service for each plugin. To use the plugins in your AngularJS app:
1. Download the latest bundle from the [Github releases](https://github.com/danielsogl/awesome-cordova-plugins/releases) page.
2. Include it in `index.html` before your app's code.
3. Inject `ionic.native` module in your app.
4. Inject any plugin you would like to use with a `$cordova` prefix.
```js
angular.module('myApp', ['ionic.native']).controller('MyPageController', function ($cordovaCamera) {
$cordovaCamera.getPicture().then(
function (data) {
console.log('Took a picture!', data);
},
function (err) {
console.log('Error occurred while taking a picture', err);
}
);
});
```
#### Vanilla JS
To use Awesome Cordova Plugins in any other setup:
1. Download the latest bundle from the [Github releases](https://github.com/danielsogl/awesome-cordova-plugins/releases) page.
2. Include it in `index.html` before your app's code.
3. Access any plugin using the global `IonicNative` variable.
```js
document.addEventListener('deviceready', function () {
IonicNative.Camera.getPicture().then(
function (data) {
console.log('Took a picture!', data);
},
function (err) {
console.log('Error occurred while taking a picture', err);
}
);
});
```
### Mocking and Browser Development (Ionic/Angular apps only)
Awesome Cordova Plugins makes it possible to mock plugins and develop nearly the entirety of your app in the browser or in `ionic serve`.
To do this, you need to provide a mock implementation of the plugins you wish to use. Here's an example of mocking the `Camera` plugin to return a stock image while in development:
First import the `Camera` class in your `src/app/app.module.ts` file:
First create a mock class that extends the `Camera` class:
```typescript
import { Camera } from '@awesome-cordova-plugins/camera/ngx';
```
Then create a new class that extends the `Camera` class with a mock implementation:
```typescript
class CameraMock extends Camera {
getPicture(options) {
return new Promise((resolve, reject) => {
@@ -207,45 +155,23 @@ class CameraMock extends Camera {
}
```
Finally, override the previous `Camera` class in your `providers` for this module:
Then override the `Camera` provider in your application bootstrap:
```typescript
providers: [{ provide: Camera, useClass: CameraMock }];
```
Here's the full example:
```typescript
import { ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { Camera } from '@awesome-cordova-plugins/camera/ngx';
import { HomePage } from '../pages/home/home';
import { MyApp } from './app.component';
import { AppComponent } from './app/app.component';
class CameraMock extends Camera {
getPicture(options) {
return new Promise((resolve, reject) => {
resolve('BASE_64_ENCODED_DATA_GOES_HERE');
});
return Promise.resolve('BASE_64_ENCODED_DATA_GOES_HERE');
}
}
@NgModule({
declarations: [MyApp, HomePage],
imports: [BrowserModule, IonicModule.forRoot(MyApp)],
bootstrap: [IonicApp],
entryComponents: [MyApp, HomePage],
providers: [
{ provide: ErrorHandler, useClass: IonicErrorHandler },
{ provide: Camera, useClass: CameraMock },
],
})
export class AppModule {}
bootstrapApplication(AppComponent, {
providers: [{ provide: Camera, useClass: CameraMock }],
});
```
### Runtime Diagnostics
@@ -256,7 +182,7 @@ Spent way too long diagnosing an issue only to realize a plugin wasn't firing or
## Plugin Missing?
Let us know or submit a PR! Take a look at [the Developer Guide](https://github.com/danielsogl/awesome-cordova-plugins/blob/master/DEVELOPER.md) for more on how to contribute. :heart:
Let us know or submit a PR! Take a look at [the Developer Guide](https://github.com/danielsogl/awesome-cordova-plugins/blob/main/DEVELOPER.md) for more on how to contribute. :heart:
# Credits
+1 -1
View File
@@ -10,7 +10,7 @@ $ npm install @awesome-cordova-plugins/firebase-model
This plugin downloads the TensorFlow model from firebase and classify the images.
```typescript
import { FirebaseModel } from '@ionic-native/ionic-native-firebase-model';
import { FirebaseModel } from '@awesome-cordova-plugins/firebase-model';
constructor(private firebaseModel: FirebaseModel) { }
+2 -2
View File
@@ -11,8 +11,8 @@ Plugin Repo: [https://github.com/Kommunicate-io/Kommunicate-Cordova-Ionic-PhoneG
The plugin for the Kommunicate SDK.
With the help of this plugin, you can easily add human + bot chat support functionality to you app.
Refer to: TODO: insert site link
For documentation: TODO: insert link
Refer to: https://www.kommunicate.io/
For documentation: https://docs.kommunicate.io/
## Supported platforms
@@ -213,6 +213,10 @@ export enum NotificationListenerType {
* Notify that the JWT token is received
*/
JWTTokenReceived = 12,
/**
* Notify that the JWT token is expired
*/
jwtTokenExpired = 13
}
export enum AttachmentItemStatus {
@@ -430,9 +434,16 @@ export class LoginParameters {
appVersion: string;
/**
*
* Specify the redirect URL.
*/
redirectURL: string;
/**
* Specify the database update statements as a JSON string. This will update the database schema.
*/
dbUpdateStatements: string;
}
export class LoginResult extends UnviredResult {
type: LoginListenerType;
@@ -1021,6 +1032,7 @@ export class UnviredCordovaSDK extends AwesomeCordovaNativePlugin {
* # Select values from FORM_HEADER table where FORM_ID is 5caed815892215034dacad56
* this.unviredSDK.dbDelete('FORM_HEADER', "FORM_ID = '5caed815892215034dacad56'")
* ```
* @deprecated Use `dbDeleteWithArgs` instead.
*/
@Cordova()
dbDelete(tableName: string, whereClause: any): Promise<DbResult> {
@@ -1039,6 +1051,7 @@ export class UnviredCordovaSDK extends AwesomeCordovaNativePlugin {
* # Update NAME & NO from FORM_HEADER table where FORM_ID is 5caed815892215034dacad56
* this.unviredSDK.dbUpdate('FORM_HEADER', {"NAME":"UPDATED_USER","UPDATED_NO":"0039"}, "FORM_ID = '5caed815892215034dacad56'")
* ```
* @deprecated Use `dbUpdateWithArgs` instead.
*/
@Cordova()
dbUpdate(tableName: string, updatedObject: any, whereClause: any): Promise<DbResult> {
@@ -1053,12 +1066,65 @@ export class UnviredCordovaSDK extends AwesomeCordovaNativePlugin {
* ```
* this.unviredSDK.dbExecuteStatement("SELECT * FROM CUSTOMER_HEADER WHERE CUSTOMER_ID = '39'")
* ```
* @deprecated Use `dbExecuteStatementWithArgs` instead.
*/
@Cordova()
dbExecuteStatement(query: string): Promise<DbResult> {
return;
}
/**
* Delete records from the database.
*
* @param tableName Name of the table
* @param whereClause {Object} Browser: JSON object containing name-value pairs.
* Mobile: Or a Sqlite whereClause ( without the 'where' keyword )
* @param args Arguments to replace the '?' placeholders in the query if any
* Example:
* ```
* # Delete values from FORM_HEADER table where FORM_ID is 5caed815892215034dacad56
* this.unviredSDK.dbDeleteWithArgs('FORM_HEADER', "FORM_ID = ?", ['5caed815892215034dacad56'])
* ```
*/
@Cordova()
dbDeleteWithArgs(tableName: string, whereClause: any, args: any[]): Promise<DbResult> {
return;
}
/**
* Update records in database.
*
* @param tableName Name of the table
* @param updatedObject JSON object containing updated name-value pairs.
* @param whereClause {Object} Browser: JSON object containing name-value pairs.
* Mobile: Or a Sqlite where Clause ( without the 'where' keyword )
* @param args Arguments to replace the '?' placeholders in the query if any
* Example:
* ```
* # Update NAME & NO from FORM_HEADER table where FORM_ID is 5caed815892215034dacad56
* this.unviredSDK.dbUpdateWithArgs('FORM_HEADER', {"NAME":"UPDATED_USER","UPDATED_NO":"0039"}, "FORM_ID = ?", ['5caed815892215034dacad56'])
* ```
*/
@Cordova()
dbUpdateWithArgs(tableName: string, updatedObject: any, whereClause: any, args: any[]): Promise<DbResult> {
return;
}
/**
* Execute a SQL statement
*
* @param query {string} SQL Statement.
* @param args Arguments to replace the '?' placeholders in the query if any
* Example:
* ```
* this.unviredSDK.dbExecuteStatementWithArgs("SELECT * FROM CUSTOMER_HEADER WHERE CUSTOMER_ID = ?", ['39'])
* ```
*/
@Cordova()
dbExecuteStatementWithArgs(query: string, args: any[]): Promise<DbResult> {
return;
}
/**
* Create Savepoint. For more info consult SQLite Documentation ( https://www.sqlite.org/lang_savepoint.html )
*
@@ -1422,6 +1488,19 @@ export class UnviredCordovaSDK extends AwesomeCordovaNativePlugin {
return;
}
/** For Mobile platform only
* getPushNotificationListener - Register for callback on Push Notification received from server
*
* Mobile Only api
*/
@Cordova({
observable: true,
})
getPushNotificationListener(): Observable<string> {
return;
};
/**
* For Browser platform only.
* Reinitialize web db. Use this api to initialize db from persisted local storage db
@@ -1734,13 +1813,38 @@ export class UnviredCordovaSDK extends AwesomeCordovaNativePlugin {
return;
}
/**
* Sets the authentication token (JWT) to be used for communicating with UMP server.
* This api is useful in scenarios where the app has its own authentication mechanism and receives a JWT token from UMP server.
* The app can set this token using this api and all subsequent communication with UMP server would be authenticated using this token.
*
* @param token JWT token received from UMP server.
* @returns A promise containing true if the operation was successful.
*/
@Cordova()
setAuthToken(token: string): Promise<boolean> {
return;
}
/**
* Get the validity of the authentication token in seconds.
* If the return value is less than or equal to 0, then the token is either not set or expired.
* If the return value is greater than 0, then it contains the number of seconds for which the token is valid from now.
*
* @returns A promise containing number of seconds for which the token is valid.
*/
@Cordova()
getAuthTokenValidity(): Promise<number> {
return;
}
/**
* Get UMP request configuration with authentication headers
* @param {string} endpoint - The API endpoint
* @param {Object} [options] - Optional configuration object
* @param {string} [options.customUrl] - Optional custom base URL to override server URL
* @returns UMPRequestConfig which contails url and auth header
* Example -
* Example: -
*
* // with auth api
* await this.unviredSDK.getUMPRequestConfig("/auth/getmodel/tenex/tenex_model.json");
@@ -1753,7 +1857,7 @@ export class UnviredCordovaSDK extends AwesomeCordovaNativePlugin {
* await this.unviredSDK.getUMPRequestConfig("/UMP/api/v1/users");
*/
@Cordova()
getUMPRequestConfig(): Promise<UMPRequestConfig> {
getUMPRequestConfig(endpoint: string, options?: { customUrl?: string }): Promise<UMPRequestConfig> {
return;
}
}