@ekidpro/bridge

Bridge to communicate with mobile application.

Mục lục

• Tạo application trong app
• Cấu hình CRA
• Cài đặt SDK
• Test tích hợp với app
• Usage

Tạo application trong app

// TODO

1. Cho phép tạo workspace với cms
2. Cho phép tạo, invite, assign role cho new user
3. Gắn application cho workspace
4. Tạo application, set app public hoặc visible cho các workspace cụ thể
5. ...

Cấu hình CRA

1. Tạo mới project

• Tạo mới project với CRA theo LINK

• Thêm homepage vào trong package.json thành:

  {
    ...
    "homepage": "."
    ...
  }
  

• Nếu trong project đang sử dụng React Router vui lòng sử dụng HashRouter thay cho BrowserRouter

$ import { HashRouter } from "react-router-dom";

• Xuất project để upload lên cms:

$ npm run build

OR

$ yarn build

Sau đó zip folder build rồi up lên CMS

// TODO: Hướng dẫn up build lên cms

Cài đặt SDK

$ npm install --save @ekidpro/web

Hoặc

$ yarn add @ekidpro/web

Test tích hợp với app

// TODO:

• Download application từ AppStore/PlayStore
• Nhập link đường dẫn vào trong app

Usage

1. Lắng nghe sự kiện từ app truyền vào

import { controller } from '@ekidpro/web'
...
controller.start()

...
controller.stop()

...

Example:

useEffect(() => {
  controller.start();

  return () => {
    controller.stop();
  };
}, []);

1. Lắng nghe event

// TODO: Danh sách event sẽ được cập nhật sau

import {Listener} from '@ekidpro/web';

const listener = Listener.start();

listener.onNetworkChange = e => {
  console.log(e);
};

listener.onOrientationChange = e => {
  console.log(e);
};

Example:

useEffect(() => {
  const listener = Listener.start();

  listener.onNetworkChange = (e) => {
    console.log(e);
  };

  listener.onOrientationChange = (e) => {
    console.log(e);
  };

  return () => listener.stop();
}, []);

1. Gửi yêu cầu lấy dữ liệu

import {command} from '@ekidpro/web';

• command.device.getDeviceInfo() => Promise

• command.userinfo.getUserInfo() => Promise

• command.userinfo.scanQr() => Promise

• command.device.setButtonStatus() => Promise<'show' | 'hidden'>

• command.device.setStatusBarStyle() => Promise<'default' | 'light-content' | 'dark-content'>

• command.device.goBack() => Promise

• // TODO: getUserInfo()

1. Lắng nghe thay đổi từ trong app

window.ekp.emitter;

Đây là object Emitter dành cho việc giao tiếp. Nếu như khó trong việc quản lý state, việc thay đổi emitter thành object|events khác hoàn toàn khả thi.

First example:

const handler = data => console.log(data);

window.ekp.emitter.add('INSETS_CHANGE', handler);

// Later
// IMPORTANT: do not forget to remove handler
window.ekp.emitter.remove('INSETS_CHANGE', handler);