Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
global-input-message
Advanced tools
global-input-message - npm Package Compare versions
Comparing version 2.0.0 to 2.0.1
@@ -32,3 +32,3 @@ "use strict"; | ||
| this.apikey = "k7jc3QcMPKEXGW5UC"; | ||
| this.securityGroup = "1CNbWCFpsbmRQuKdd"; // cSpell:enable | ||
| this.securityGroup = "1CNbWCFpsbmRQuKdd"; // cSpell:enable | ||
@@ -70,3 +70,3 @@ this.codeAES = "LNJGw0x5lqnXpnVY8"; | ||
| const that = this; | ||
| return new Promise((resolve, reject) => { | ||
| return new Promise(resolve => { | ||
| const codeProcessors = {}; | ||
@@ -88,4 +88,5 @@ | ||
| resolve({ | ||
| type: "mobile", | ||
| permission: permissionMessage | ||
| type: "error", | ||
| permission: permissionMessage, | ||
| error: permissionMessage && permissionMessage.reason | ||
| }); | ||
@@ -96,4 +97,7 @@ } | ||
| mobileConnectOption.onError = errorMessage => { | ||
| resolve({ | ||
| type: "error", | ||
| error: "failed to connect:" + errorMessage | ||
| }); | ||
| options.onError && options.onError(errorMessage); | ||
| reject(errorMessage); | ||
| }; | ||
@@ -106,3 +110,3 @@ | ||
| resolve({ | ||
| type: "pair", | ||
| type: "pairing", | ||
| codeData | ||
@@ -113,3 +117,7 @@ }); | ||
| codeProcessors.onError = message => { | ||
| reject(message); | ||
| resolve({ | ||
| type: "error", | ||
| error: "code error:" + message | ||
| }); | ||
| options.onError && options.onError(message); | ||
| }; | ||
@@ -127,11 +135,11 @@ | ||
| const that = this; | ||
| return new Promise((resolve, reject) => { | ||
| return new Promise(resolve => { | ||
| const onError = options.onError; | ||
| options.onError = message => { | ||
| if (onError) { | ||
| onError(message); | ||
| } | ||
| reject(message); | ||
| resolve({ | ||
| type: "error", | ||
| error: "message" | ||
| }); | ||
| onError && onError(message); | ||
| }; | ||
@@ -142,3 +150,2 @@ | ||
| options.onRegistered = () => { | ||
| onRegistered && onRegistered(); | ||
| const codeData = this.buildInputCodeData(); | ||
@@ -149,2 +156,3 @@ resolve({ | ||
| }); | ||
| onRegistered && onRegistered(codeData); | ||
| }; | ||
@@ -155,4 +163,7 @@ | ||
| options.onRegisterFailed = () => { | ||
| resolve({ | ||
| type: "error", | ||
| error: "failed to register" | ||
| }); | ||
| onRegisterFailed && onRegisterFailed(); | ||
| reject("registration failed"); | ||
| }; | ||
@@ -387,15 +398,12 @@ | ||
| this.connectedSenders.push(inputSender); | ||
| console.log("connectedSenders:" + this.connectedSenders.length); | ||
| if (options.onSenderConnected) { | ||
| options.onSenderConnected(inputSender, this.connectedSenders); | ||
| } | ||
| this.socket.on(this.session + "/input", inputSender.onInput); | ||
| this.socket.on(this.session + "/leave", inputSender.onLeave); | ||
| this.sendInputPermissionGrantedMessage(inputPermissionMessage, options); | ||
| console.log("connectedSenders:" + this.connectedSenders.length); | ||
| options.onSenderConnected && options.onSenderConnected(inputSender, this.connectedSenders); | ||
| } | ||
| sendInputPermissionGrantedMessage(inputPermissionMessage, options) { | ||
| let inputPermissionResult = Object.assign({}, inputPermissionMessage); | ||
| let inputPermissionResult = { ...inputPermissionMessage | ||
| }; | ||
@@ -711,7 +719,3 @@ if (options.initData) { | ||
| sendValue(value, fieldId, index) { | ||
| this.sendInputMessage(value, index, fieldId); | ||
| } | ||
| sendInputMessage(value, index, fieldId) { | ||
| sendValue(fieldId, value, index) { | ||
| if (!this.isConnected()) { | ||
@@ -756,2 +760,6 @@ console.log("not connected yet"); | ||
| sendInputMessage(value, index, fieldId) { | ||
| this.sendValue(fieldId, value, index); | ||
| } | ||
| changeGlobalInputFieldData(globalInputdata, data) { | ||
@@ -758,0 +766,0 @@ if (!globalInputdata) { |
234
index.d.ts
| declare module 'global-input-message' { | ||
| export function createMessageConnector():GlobalInputMessageConnector; | ||
| interface ConnectResult{ | ||
| type:"device"|"mobile"|"pair"; | ||
| connectionCode?:string; | ||
| codeData?:CodeData; | ||
| initData?:InitData; | ||
| permission?:PermissionResultMessage; | ||
| export function createMessageConnector(): GlobalInputMessageConnector; | ||
| interface ConnectResult { | ||
| type: "device" | "mobile" | "pairing" | "error"; | ||
| connectionCode?: string; | ||
| codeData?: CodeData; | ||
| initData?: InitData; | ||
| permission?: PermissionResultMessage; | ||
| error?: string; | ||
| } | ||
| class GlobalInputMessageConnector { | ||
| client:string; | ||
| session:string; | ||
| isConnected():boolean; | ||
| disconnect():void; | ||
| setCodeAES(codeAES:string):void; | ||
| setSecurityGroup(securityGroup:string):void; | ||
| connect(opts:ConnectOptions,encryptedCode?:string):Promise<ConnectResult>; | ||
| sendInputMessage(value:FieldValue,index?:number,fieldId?:string):void; | ||
| sendValue(value:FieldValue,fieldId?:string,index?:number):void; | ||
| sendInitData(initData:InitData):void; | ||
| buildOptionsFromInputCodedata(codedata:CodeData, options?:ConnectOptions):ConnectOptions; | ||
| buildInputCodeData(data?:CodeData):string; | ||
| buildPairingData(data?:CodeData):string; | ||
| processCodeData(encryptedCodeData?:string, options?:CodeProcessors):void; | ||
| client: string; | ||
| session: string; | ||
| isConnected(): boolean; | ||
| disconnect(): void; | ||
| setCodeAES(codeAES: string): void; | ||
| setSecurityGroup(securityGroup: string): void; | ||
| connect(opts: ConnectOptions, encryptedCode?: string): Promise<ConnectResult>; | ||
| sendInputMessage(value: FieldValue, index?: number, fieldId?: string): void; | ||
| sendValue(fieldId: string | null | undefined, value: FieldValue, index?: number): void; | ||
| sendInitData(initData: InitData): void; | ||
| buildOptionsFromInputCodedata(codedata: CodeData, options?: ConnectOptions): ConnectOptions; | ||
| buildInputCodeData(data?: CodeData): string; | ||
| buildPairingData(data?: CodeData): string; | ||
| processCodeData(encryptedCodeData?: string, options?: CodeProcessors): void; | ||
| /* | ||
@@ -37,38 +34,39 @@ encryptedCodeData=[Type][EncryptedContent] | ||
| case 'N': the content is not encrypted | ||
| */ | ||
| */ | ||
| } | ||
| type FieldValue=string|number|object|null|undefined; | ||
| type FieldValue = string | number | object | null | undefined; | ||
| interface ConnectOptions { | ||
| initData?:InitData; | ||
| url?:string; | ||
| apikey?:string; | ||
| securityGroup?:string; | ||
| connectSession?:string; | ||
| aes?:string; | ||
| onInput?:(message:InputMessage)=>void; | ||
| onRegistered?:() =>void; | ||
| onRegisterFailed?: () =>void; | ||
| onInputPermission?: (permissionMessage:PermissionRequestMessage,allow:()=>void,deny:()=>void) => void; | ||
| onInputPermissionResult?:(message:PermissionResultMessage)=>void; | ||
| onInputCodeData?:(codedata:CodeData)=>void; | ||
| onError?:(message:string)=>void; | ||
| initData?: InitData; | ||
| url?: string; | ||
| apikey?: string; | ||
| securityGroup?: string; | ||
| connectSession?: string; | ||
| aes?: string; | ||
| onInput?: (message: InputMessage) => void; | ||
| onRegistered?: (connectionCode: string) => void; | ||
| onRegisterFailed?: () => void; | ||
| onInputPermission?: (permissionMessage: PermissionRequestMessage, allow: () => void, deny: () => void) => void; | ||
| onInputPermissionResult?: (message: PermissionResultMessage) => void; | ||
| onInputCodeData?: (codedata: CodeData) => void; | ||
| onError?: (message: string) => void; | ||
| } | ||
| interface InputMessage { | ||
| client:string; | ||
| data:{ | ||
| value:FieldValue; | ||
| index?:number; | ||
| id?:number; | ||
| client: string; | ||
| data: { | ||
| value: FieldValue; | ||
| index?: number; | ||
| id?: number; | ||
| fieldId: string; | ||
| }; | ||
| initData?:InitData; | ||
| initData?: InitData; | ||
| } | ||
| interface CodeProcessors { | ||
| onInputCodeData?: (codedata:CodeData)=>void; | ||
| onPairing?:(codedata:CodeData)=>void; | ||
| onError?:(message:string)=>void; | ||
| onInputCodeData?: (codedata: CodeData) => void; | ||
| onPairing?: (codedata: CodeData) => void; | ||
| onError?: (message: string) => void; | ||
| } | ||
@@ -78,84 +76,84 @@ | ||
| interface InitData { | ||
| id?:string; | ||
| action?:string; | ||
| dataType?:string; | ||
| form:{ | ||
| id?:string; | ||
| title?:string; | ||
| label?:string; | ||
| domain?:string; | ||
| fields:FormField[]; | ||
| views?:{ | ||
| viewId:{ | ||
| [id:string]:object; | ||
| id?: string; | ||
| action?: string; | ||
| dataType?: string; | ||
| form: { | ||
| id?: string; | ||
| title?: string; | ||
| label?: string; | ||
| domain?: string; | ||
| fields: FormField[]; | ||
| views?: { | ||
| viewId: { | ||
| [id: string]: object; | ||
| } | ||
| }; | ||
| } | ||
| } | ||
| interface FormField{ | ||
| id?:string; | ||
| type?:string; | ||
| label?:string; | ||
| value?:FieldValue; | ||
| nLines?:number; | ||
| icon?:string; | ||
| viewId?:string; | ||
| iconText?:string|object; | ||
| operations?:FormOperation; | ||
| options?:object[]; | ||
| index?:number; | ||
| } | ||
| } | ||
| interface FormField { | ||
| id?: string; | ||
| type?: string; | ||
| label?: string; | ||
| value?: FieldValue; | ||
| nLines?: number; | ||
| icon?: string; | ||
| viewId?: string; | ||
| iconText?: string | object; | ||
| operations?: FormOperation; | ||
| options?: object[]; | ||
| index?: number; | ||
| } | ||
| interface FormOperation{ | ||
| onInput:(value:FieldValue) => void; | ||
| interface FormOperation { | ||
| onInput: (value: FieldValue) => void; | ||
| } | ||
| interface PermissionResultMessage{ | ||
| allow:boolean; | ||
| client?:string; | ||
| connectSession?:string; | ||
| initData?:InitData; | ||
| securityGroup?:string; | ||
| session?:string; | ||
| reason?:string; | ||
| interface PermissionResultMessage { | ||
| allow: boolean; | ||
| client?: string; | ||
| connectSession?: string; | ||
| initData?: InitData; | ||
| securityGroup?: string; | ||
| session?: string; | ||
| reason?: string; | ||
| } | ||
| interface PermissionRequestMessage{ | ||
| client?:string; | ||
| connectSession?:string; | ||
| data?:object; | ||
| client?:string; | ||
| time?:number; | ||
| securityGroup?:string; | ||
| session?:string; | ||
| } | ||
| interface PermissionRequestMessage { | ||
| client?: string; | ||
| connectSession?: string; | ||
| data?: object; | ||
| client?: string; | ||
| time?: number; | ||
| securityGroup?: string; | ||
| session?: string; | ||
| } | ||
| interface CodeData { | ||
| session?:string; | ||
| url?:string; | ||
| aes?:string; | ||
| apikey?:string; | ||
| securityGroup?:string; | ||
| action?:string; | ||
| codeAES?:string; | ||
| session?: string; | ||
| url?: string; | ||
| aes?: string; | ||
| apikey?: string; | ||
| securityGroup?: string; | ||
| action?: string; | ||
| codeAES?: string; | ||
| } | ||
| export function generateRandomString(length?:number):string; | ||
| export function encrypt(content:string, password:string):string; | ||
| export function decrypt(content:string, password:string):string; | ||
| export function generateRandomString(length?: number): string; | ||
| export function encrypt(content: string, password: string): string; | ||
| export function decrypt(content: string, password: string): string; | ||
| interface MessageReceiver <T> { | ||
| get:()=>Promise<T>; | ||
| interface MessageReceiver<T> { | ||
| get: () => Promise<T>; | ||
| } | ||
| interface CreateMessageReceiver{ | ||
| config:ConnectOptions; | ||
| input:MessageReceiver<InputMessage>|null; | ||
| inputs:MessageReceiver<FieldValue>[]|null; | ||
| interface PromiseMessageReceiver { | ||
| config: ConnectOptions; | ||
| input: MessageReceiver<InputMessage> | null; | ||
| inputs: MessageReceiver<FieldValue>[] | null; | ||
| } | ||
| export function createInputReceivers(config?:ConnectOptions):CreateMessageReceiver; | ||
| export function createInputReceivers(config?: ConnectOptions): PromiseMessageReceiver; | ||
| } |
| { | ||
| "name": "global-input-message", | ||
| "version": "2.0.0", | ||
| "version": "2.0.1", | ||
| "description": "global input core js library", | ||
@@ -5,0 +5,0 @@ "main": "./distribution/index.js", |
278
README.md
@@ -0,9 +1,8 @@ | ||
| ### Global Input Message | ||
| This JavaScript module allows you to introduce a mobile interoperability into JavaScript applications on smart devices like smart TVs, set-top boxes, game consoles, and devices in IoT, so that users can use their mobiles to operate on them. It allows you to define mobile interfaces and receive mobile events from within your device applications, while keeping the mobile app as a general and universal mobile app that works across all types of device applications with different business logic: meaning that there is no need to switch to different mobile app for operating on different devices and no need to develop different mobile apps for different business or device applications. It also allows you to enrich your device applications with a set of mobile functionalities like [mobile encryption](https://globalinput.co.uk/global-input-app/mobile-content-encryption), [mobile authentication](https://globalinput.co.uk/global-input-app/mobile-authentication), [mobile input & control](https://globalinput.co.uk/global-input-app/mobile-input-control), [second screen experience](https://globalinput.co.uk/global-input-app/second-screen-experience), [mobile secure storage](https://globalinput.co.uk/global-input-app/mobile-personal-storage), [mobile encryption & signing](https://globalinput.co.uk/global-input-app/mobile-content-encryption), and [mobile content transfer](https://globalinput.co.uk/global-input-app/mobile-content-transfer). The communication between a mobile app and a device application is often established through scanning an Encrypted QR Code that contains a set of communication parameters that includes one-time-use encryption key for starting an end-to-end encryption process. | ||
| This JavaScript module allows you to introduce a mobile interoperability into your JavaScript applications on smart devices like smart TVs, set-top boxes, game consoles, and devices in IoT, so that users can use their mobiles to operate on them. It allows you to define mobile interfaces and receive mobile events from within your device applications, while keeping the mobile app as a general and universal mobile app that works across all types of device applications with different business logic: meaning that there is no need to switch to different mobile app for operating on different devices and no need to develop different mobile apps for different business or device applications. It also allows you to enrich your device applications with a set of mobile functionalities like [mobile encryption](https://globalinput.co.uk/global-input-app/mobile-content-encryption), [mobile authentication](https://globalinput.co.uk/global-input-app/mobile-authentication), [mobile input & control](https://globalinput.co.uk/global-input-app/mobile-input-control), [second screen experience](https://globalinput.co.uk/global-input-app/second-screen-experience), [mobile secure storage](https://globalinput.co.uk/global-input-app/mobile-personal-storage), [mobile encryption & signing](https://globalinput.co.uk/global-input-app/mobile-content-encryption), and [mobile content transfer](https://globalinput.co.uk/global-input-app/mobile-content-transfer). The communication between a mobile app and a device application is often established through scanning an Encrypted QR Code that contains a set of communication parameters that includes one-time-use encryption key for starting an end-to-end encryption process. | ||
| This module is particularly useful in the current new normal established by the COVID-19 pandemic, where businesses require visiting customers to communicate accurately with customer representatives while enforcing the rules of wearing masks and social distancing. Thanks to this library, you will be able to establish an instant and secure communication right within the business software you are using, allowing your customers to collaborate effectively, securely and safely. For example, you may provide one-click subscriptions through user mobiles by leveraging the [mobile secure storage](https://globalinput.co.uk/global-input-app/mobile-authentication). Alternative, you do not even have to collect users' personal data thanks to the ability to request data on-demand from the mobile app at the point of service, freeing yourself from the pains of privacy regulations. You may also choose to allow your customers to encrypt their own data using their mobiles, giving users full control over the security and privacy of their personal data. | ||
| This module is particularly useful in the new normal established by the current COVID-19 pandemic, where businesses require visiting customers to communicate accurately with customer representatives while enforcing the rules of wearing masks and social distancing. Thanks to this library, you will be able to establish an instant and secure communication right within your business software, allowing your customers to collaborate effectively, securely and safely. For example, you may provide one-click subscriptions through user mobiles by leveraging the [mobile secure storage](https://globalinput.co.uk/global-input-app/mobile-authentication). Alternative, you do not even have to collect users' personal data thanks to the ability to request data on-demand from the mobile app at the point of service, freeing yourself from the pains of privacy regulations. You may also choose to allow your customers to encrypt their own data using their mobiles, giving users full control over the security and privacy of their personal data. | ||
| ## React Applications | ||
| Please use the [React module](https://github.com/global-input/global-input-react) for React applications. | ||
| We recommend using the [global-input-react](https://github.com/global-input/global-input-react) for React applications. | ||
@@ -13,166 +12,229 @@ ## Setup | ||
| ```shell | ||
| npm install --save global-input-message | ||
| npm install --save global-input-message | ||
| ``` | ||
| (CDN: https://unpkg.com/global-input-message@2.0.0/distribution/globalinputmessage.js) | ||
| ## Usage | ||
| ```JavaScript | ||
| import {createMessageConnector} from "global-input-message"; | ||
| const deviceConnector=createMessageConnector(); | ||
| ``` | ||
| import {createMessageConnector} from "global-input-message"; | ||
| const deviceConnector=createMessageConnector(); | ||
| ``` | ||
| Then, you can pass a data object to ```deviceConnector.connect()```, defining a mobile interface that you would like the mobile app present to the user upon connecting to your application. For example, if you would like to display a login screen on the the user's mobile screen upon connection: | ||
| Then, you can call the ```deviceConnector.connect()``` function, passing the data, defining a mobile interface that mobile app presents to the user when having connected to your application. For example, when you require a connected mobile app to display a login screen on the the user's mobile screen: | ||
| ```JavaScript | ||
| const usernameField={ | ||
| id: 'username', | ||
| label: 'Username', | ||
| operation:{onInput:value => setUsername(value)} | ||
| id: 'username', | ||
| label: 'Username', | ||
| operation:{onInput:value => setUsername(value)} | ||
| }; | ||
| const passwordField={ | ||
| id:'password', | ||
| label: 'Password', | ||
| operation:{onInput:value => setPassword(value)} | ||
| id:'password', | ||
| label: 'Password', | ||
| operation:{onInput:value => setPassword(value)} | ||
| }; | ||
| const loginButton={ | ||
| id: 'login', | ||
| label: 'Sign In', | ||
| type: 'button', | ||
| operation:{onInput:() => login(username,password)} | ||
| id: 'login', | ||
| label: 'Sign In', | ||
| type: 'button', | ||
| operation:{onInput:() => login(username,password)} | ||
| }; | ||
| const connectionCode = await deviceConnector.connect({ | ||
| initData:{ | ||
| form:{ | ||
| title: 'Sign In', | ||
| fields: [usernameField,passwordField,loginButton] | ||
| } | ||
| } | ||
| const {connectionCode} = await deviceConnector.connect({ | ||
| initData:{ | ||
| form:{ | ||
| title: 'Sign In', | ||
| fields: [usernameField,passwordField,loginButton] | ||
| } | ||
| } | ||
| }); | ||
| ``` | ||
| In the above code, the ```initData``` parameter holds data describing the mobile user interface. It specifies a ```form``` with a set of fields that are ```usernameField```,```passwordField```, and ```loginButton```. | ||
| The ```connectionCode``` variable holds an encrypted string value returned by the ```await connector.connect()``` function. It contains the information on how to connect to your application, including a one-time-use encryption key for initiating an end-to-end encryption process between your application and the user's mobile app. Your application can display the value of ```connectionCode``` in the form of a QR Code for uses to scan to connect to it. It is also possible to other close-range communication technologies like NFC for pair the mobile app to your application. | ||
| The ```initData``` item holds data describing a mobile user interface, in this case it is a ```form``` with a set of fields that are ```usernameField```,```passwordField```, and ```loginButton```. | ||
| When a mobile app has connected to your application, the connected mobile app presents user with the form that you have defined in the ```initData``` parameter above. When the user interacts with any of the element on the mobile screen, the ```onInput()``` function specified will be called passing the current value that the user has entered. Then, as you can see in the above code, the callback functions are calling ```setUsername()``` , ```setPassword()``` or ```login()``` expecting that you have already implemented them. For example, you may put your authentication logic in the ```login()``` function. Using this approach, you can turn a simple password-based authentication into a one-click mobile authentication [mobile authentication](https://globalinput.co.uk/global-input-app/mobile-authentication). | ||
| When a value is changed locally within your application, you need to send it to the mobile app to keep the remote and local values in sync by calling the ```deviceConnector.sendValue()``` function: | ||
| The ```connectionCode``` variable holds an encrypted string value returned by the ```await connector.connect()``` expression. It contains the encrypted information on how to connect to your application that contains a one-time-use encryption key for initiating an end-to-end encryption process between your application and the user's mobile app. Your application can display a QR Code using the value of ```connectionCode```. | ||
| When a mobile app has connected to your application, the connected mobile app presents the user with the form specified in the ```initData```. And, when the user interacts with any of the elements on the mobile screen, the ```onInput()``` function in the corresponding item will be called passing the current value that the user has entered. In the above example code, the callback functions are calling ```setUsername()``` , ```setPassword()``` or ```login()``` that you need implement. Using this approach, you can turn a simple password-based authentication into a one-click mobile authentication. | ||
| You can also send a value to the connected mobile app by using the ```deviceConnector.sendValue()``` function: | ||
| ```JavaScript | ||
| const sendUsername=(username)=>{ | ||
| deviceConnector.sendValue(username,usernameField.id); | ||
| } | ||
| const sendPassword=(password)=>{ | ||
| deviceConnector.sendValue(password,passwordField.id); | ||
| } | ||
| const sendUsername=(username)=>{ | ||
| deviceConnector.sendValue(username,usernameField.id); | ||
| } | ||
| const sendPassword=(password)=>{ | ||
| deviceConnector.sendValue(password,passwordField.id); | ||
| } | ||
| ``` | ||
| If the device where your application is running provides a input means, you may bind the functions defined above to the text fields being displayed on your device: | ||
| If the device where your application is running provides a mean of input, you may bind the functions defined above to the text fields being displayed on your device, so that local and remote values can be sync on both directions: | ||
| ```JavaScript | ||
| Username: | ||
| <input type="text" value="" onchange="sendUsername(this.value)"/> | ||
| Password: | ||
| <input type="password" value="" onchange="sendPassword(this.value)"/> | ||
| Username: | ||
| <input type="text" value="" onchange="sendUsername(this.value)"/> | ||
| Password: | ||
| <input type="password" value="" onchange="sendPassword(this.value)"/> | ||
| ``` | ||
| In order to switch to a different mobile user interface responding to some events, you can can pass a new user interface data to the ```deviceConnector.sendInitData()``` function. For example, the following | ||
| You may require to switch to a different mobile user interface responding to some events. You can can pass a new user interface data to the ```deviceConnector.sendInitData()``` function: | ||
| ```JavaScript | ||
| const login=(username,password)=>{ | ||
| deviceConnector.sendInitData(initData:{ | ||
| form: { | ||
| title: "Welcome " +username, | ||
| fields: [{type: "info", value: "Test Completed"}] | ||
| } | ||
| }); | ||
| } | ||
| const infoField={ | ||
| id:"info", | ||
| type: "info", | ||
| value: "Test Completed" | ||
| }; | ||
| const login=(username,password)=>{ | ||
| deviceConnector.sendInitData(initData:{ | ||
| form: { | ||
| title: "Welcome " +username, | ||
| fields: [infoField] | ||
| } | ||
| }); | ||
| } | ||
| ``` | ||
| ## On Mobile App Side | ||
| Although you can use the [Global Input App](https://globalinput.co.uk/) to operate on your device applications, you may like your own mobile app to have this functionality. In order to achieve this, you can use this JavaScript library suppose your mobile app is implemented using one of the JavaScript-based cross-platform frameworks like [React Native](https://reactnative.dev/). | ||
| This module is also used by the mobile app -- for any JavaScript-based cross-platform frameworks like [React Native](https://reactnative.dev/) -- for operating on device applications. Hence, you can include the features of [Global Input App](https://globalinput.co.uk/) into your onw mobile app. | ||
| You may implement QR Code scanning in your mobile app to obtain the value of the ```connectionCode ``` that was generated on your device application side, then you can pass it to the ```connect()``` function to connect to your device application: | ||
| In your mobile app, after obtaining the value of the ```connectionCode ``` by scanning a QR CODE being displayed by your device application, you can pass it to the ```connect()``` function to connect to your device application: | ||
| ```JavaScript | ||
| const mobileConnector=createMessageConnector(); | ||
| const {initData} = await mobileConnector.connect({ | ||
| onInput:(inputMessage)=>{ | ||
| .... | ||
| } | ||
| },connectionCode); | ||
| const mobileConnector=createMessageConnector(); | ||
| const {initData} = await mobileConnector.connect({ | ||
| onInput:(inputMessage)=>{ | ||
| .... | ||
| } | ||
| },connectionCode); | ||
| ``` | ||
| The ```initData``` that were returned as the result of the execution of ```await mobileConnector.connect() ```, contains a user interface specified by the connected device application. | ||
| ``` | ||
| Then, you may display the form specified in the ```initData``` that were returned as the result of the execution of ```await mobileConnector.connect() ```. After that, you can send messages to your device application using the ```mobileConnector.sendValue()``` function, responding to the events generated when the user interacts with the form elements. For example, the ```onInput()``` function in the ```usernameField``` data in your device application will be called with the passed-in value, when the following code is executed | ||
| The ```onInput()``` function is for receiving the messages send by the the device application. | ||
| You can send messages to your device application using the ```mobileConnector.sendValue()``` function, responding to the events generated when the user interacts with the form elements: | ||
| ```JavaScript | ||
| mobileConnector.sendValue("my user name", initData.form.fields[0].id); | ||
| const username="some username"; | ||
| mobileConnector.sendValue(initData.form.fields[0].id,username); | ||
| ``` | ||
| On the other hand, the messages send by your device application will be received by the ```onInput()``` in your mobile app that you have specified in your data when executing ```await mobileConnector.connect()``` earlier. | ||
| The [Typescript Declaration file](https://github.com/global-input/global-input-message/blob/master/index.d.ts), the integration tests in the [test project](https://github.com/global-input/test-global-input-app-libs) and the examples in the [website](https://globalinput.co.uk/) have more information on how to implement those various use cases in your Typescript applications. | ||
| ## More about Form Elements | ||
| The ```type``` attribute of a form item defines what component the mobile app uses to process/display the data contained in it. For example, if it is set to ```button```, the mobile app display a ```Button```: | ||
| ```JavaScript | ||
| const loginButton={ | ||
| id: 'login', | ||
| label: 'Sign In', | ||
| type: 'button' | ||
| }; | ||
| ``` | ||
| ## More about Form Element | ||
| The default value of the ```type``` attribute is "text". In this case, it display either a text field or text box (textarea) depending the values of another attribute ```nLines```, which takes ```1``` as its the default value. The ```nLines``` specifies the number of lines visible in the text field/box: | ||
| When you go through the previous example, you might have noticed that the ```type``` attribute of a form element defines what component the mobile app uses to process the data contained in it. For example, if it is set to ```button```, the mobile app uses the ```Button``` UI component to process the data: | ||
| ```JavaScript | ||
| const loginButton={ | ||
| id: 'login', | ||
| label: 'Sign In', | ||
| type: 'button' | ||
| }; | ||
| const contentField={ | ||
| id: 'content', | ||
| label: 'Content', | ||
| type: "text", | ||
| nLines:5, | ||
| value:"This is a content in the text box" | ||
| }; | ||
| ``` | ||
| As a result, it displays a button on the mobile screen. | ||
| If the ```value``` is set, it will be sent along with it to set its value when it is displayed on the mobile screen. | ||
| If the ```type``` attribute is missing, it takes its default value, which is "text". In this case, it display either a text field or text box (textarea) depending the values of another attribute, called ```nLines```, which takes ```1``` as its the default value. The ```nLines``` specifies the number of lines visible in the text field/box. | ||
| ## Mobile Encryption | ||
| You can set the value of the ```type``` attribute to "encrypt" to to tell the mobile app to encrypt the content and send the result back to your application, | ||
| For example, when you would like to display a content with a text box with fix visible text rows: | ||
| ```JavaScript | ||
| ```JavaScript | ||
| const contentField={ | ||
| const contentToEncrypt="..."; | ||
| const encryptField={ | ||
| id: 'content', | ||
| label: 'Content', | ||
| type: "text", | ||
| nLines:5 | ||
| type: "encrypt", | ||
| value:contentToEncrypt | ||
| }; | ||
| ``` | ||
| You can also send the actual value with the form element to pre-populate the text box: | ||
| When you pass it as part of the ```fields``` of the ```form``` contained in the ```initData```, the mobile app prompts the user to encrypt the content in the value attribute, and the result will be sent back to your application bt the ```onInput()``` function. | ||
| In a similar way, setting the type to ```decrypt``` will results in mobile app to decrypt the content: | ||
| ```JavaScript | ||
| const contentField={ | ||
| const contentToDecrypt="..."; | ||
| const decryptField={ | ||
| id: 'content', | ||
| label: 'Content', | ||
| type: "text", | ||
| nLines:5, | ||
| value:"This is a content in the text box" | ||
| type: "decrypt", | ||
| value:contentToDecrypt | ||
| }; | ||
| ``` | ||
| ## Mobile Encryption | ||
| To instruct the mobile app to encrypt the content and send the result back to your application, simply set the ```type``` attribute of the corresponding element to "encrypt". | ||
| ```JavaScript | ||
| const contentToEncrypt="..."; | ||
| const contentField={ | ||
| id: 'content', | ||
| label: 'Content', | ||
| type: "encrypt", | ||
| value:contentToEncrypt | ||
| }; | ||
| ``` | ||
| When you pass this field as part of the ```form``` contained in the ```initData``` , the mobile app prompts the user to encrypt the content specified in the value attribute, and the result will be sent back to your application. You can receive the content through your ```onInput()``` callback function. | ||
| In the similar way, you can send an encrypted content to the mobile app for decryption by setting the type of an element to ```decrypt``` : | ||
| ## Customizing Form Elements & Styled Values. | ||
| The value attribute can be an object containing some styling information: | ||
| ```JavaScript | ||
| const contentToDecrypt="..."; | ||
| const contentField={ | ||
| id: 'content', | ||
| label: 'Content', | ||
| type: "descrypt", | ||
| value:contentToDecrypt | ||
| }; | ||
| const infoField={ | ||
| id: "title", | ||
| type: "info", | ||
| value: { | ||
| type: "text", | ||
| content: "This is a Text", | ||
| style: { | ||
| fontSize: 18, | ||
| marginTop: 20, | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| When you pass this field as part of the ```form``` contained in the ```initData``` , the mobile app prompts the user to decrypt the content specified in the value attribute, and the result will be sent back to your application. You can receive the content through your ```onInput()``` callback function. | ||
| You can display a multi-line text using array as the value of the ````content``` attribute: | ||
| The following example demonstrate the flexibility that you can have when you setting the value of a form element for the connected mobile app: | ||
| ```JavaScript] | ||
| const informationField={ | ||
| id: "informationText", | ||
| type: "info", | ||
| value: { | ||
| type: "view", | ||
| style: { | ||
| borderColor: "#rgba(72,128,237,0.5)", | ||
| backgroundColor: "#rgba(72,128,237,0.5)", | ||
| borderWidth: 1, | ||
| marginTop: 5, | ||
| minWidth: "100%", | ||
| minHeight: 80, | ||
| }, | ||
| content: [{ | ||
| type: "text", | ||
| content: title, | ||
| style: { | ||
| fontSize: 18, | ||
| color: "white" | ||
| } | ||
| }, { | ||
| type: "text", | ||
| content: message, | ||
| style: { | ||
| fontSize: 14, | ||
| color: "white" | ||
| } | ||
| }] | ||
| } | ||
| } | ||
| ```` | ||
| Finally, the examples in the [website](https://globalinput.co.uk/), [tests](https://github.com/global-input/global-input-message/blob/master/test/communication-mobile-app-device-app.test.js) including those in the [test project](https://github.com/global-input/test-global-input-app-libs) contain more information on various use cases that you can implement in your Typescript/JavaScript applications. |
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.05%
1593975
- Lines of code
- increased by0.07%
33094
- Number of lines in readme file
- increased by34.83%
240
No dependency changes