@things-factory/reference-app 6.0.25 → 6.0.28

package/dist-client/helps/integration/ui/connection.md

@@ -0,0 +1,16 @@
+# Connection
+
+커넥션 페이지에서는 시나리오에서 사용될 연동 대상에 대한 커넥션 정보를 정의한다.
+
+## properties
+
+- name
+- description
+- active flag
+- connector type
+- endpoint
+- parameters
+
+## operation
+
+- connect / disconnect

package/dist-client/helps/integration/ui/crontab-editor.md

@@ -0,0 +1,9 @@
+# Schedule Editor
+
+- 시나리오의 자동 실행 스케쥴을 설정하는 화면이다.
+- 유닉스계열의 [cron](https://en.wikipedia.org/wiki/Cron) 명령의 설정 방식을 따른다.
+
+## 예시
+
+- '예시'는 cron 설정을 어려워하는 사용자를 위해서 다양한 스케쥴의 예시를 만들어 놓은 것이다.
+- 사용자는 유사한 스케쥴 예시를 선택하고, 그에 따라 설정된 cron의 각 항목(초, 분, 시간, 날짜, 월, 요일)을 적절하게 조정해서 의도하는 스케쥴 설정을 완료할 수 있다.

package/dist-client/helps/integration/ui/integration-monitor.md

@@ -0,0 +1,29 @@
+# Integration Monitor
+
+인티그레이션을 위한 커넥션의 연결 상태와 시나리오 실행 상태, 그리고 지연 큐에 대기 중인 시나리오 리스트를 전체적으로 모니터링 하기 위한 페이지이다.
+또한, 커넥션을 연결 및 시나리오의 실행/정지를 컨트롤 할 수 있다.
+
+## Connection (커넥션 상태)
+
+- 등록된 모든 커넥션 리스트를 커넥션 카드 형태로 볼 수 있다.
+- 커넥션의 현재 연결 상태를 표현한다.
+  - 연결 중인 커넥션은 해당 카드의 배경색이 연한 녹색으로 표현된다.
+  - 또한, 커넥션 카드의 연결/해제 버튼으로 현재 연결 여부를 판단할 수 있다.
+- 커넥션 카드의 연결/해제 버튼으로 해당 커넥션을 연결 시도하거나 해제 시킬 수 있다.
+
+## Scenario (시나리오 상태)
+
+- 등록된 모든 시나리오 리스트를 시나리오 카드 형태로 볼 수 있다.
+- 시나리오의 현재 실행 여부 상태를 표현한다.
+  - 실행 중인 시나리오는 해당 카드의 배경색이 연한 녹색으로 표현된다.
+  - 또한, 시나리오 카드의 실행/정지 버튼으로 현재 실행 여부를 판단할 수 있다.
+- 시나리오 카드의 실행/정지 버튼으로 해당 시나리오를 실행하거나 정지 시킬 수 있다.
+
+## Pending Queue (지연 큐)
+
+- 지연 큐는 bookup-scenario 태스크에 의해서 일정 시간 후에 실행될 시나리오를 등록할 수 있는 대기 큐이다.
+- 지연 큐에 보관된 지연 시나리오는 지연 시간이 만료되면 pickup-scenario 태스크에 의해서 꺼내져서 실행되게 된다.
+- 인티그레이션 모니터에서는 지연 큐에 대기 중인 시나리오의 시간 축으로 정렬된 리스트를 보여주게 된다.
+- 지연 큐에 시나리오는 시간 축상에 한 줄로 표시되며, 그 줄의 색상은 시나리오 리스트에 표현된 각 시나리오 카드 중에서 해당 시나리오의 색상과 동일하게 표현된다.
+- 지연 큐에 보관되는 시나리오는 등록시에 tag를 지정할 수 있으며, tag별로 pickup될 수 있다. 지연 큐 모니터링에서는 tag별로 선택해서 모니터링할 수 있다.
+  - tag를 '*'로 선택하면, 모든 tag의 시나리오를 모니터링하게된다.

package/dist-client/helps/integration/ui/scenario-detail.md

@@ -0,0 +1,35 @@
+# Scenario Detail
+
+시나리오 상세 정의 화면에서는 시나리오를 구성하는 스텝 리스트를 구성한다.
+
+## step
+
+스텝은 시나리오의 진행 순서대로 구성되는 단위 태스크이다.
+각 스텝의 이름(name)은 전체 시나리오의 생명주기동안 관리되는 컨텍스트 데이타를 접근하는 이름이다.
+시나리오를 구성하는 스텝은 시나리오엔진에 의해서 순서대로 수행되게되며, 특별히 플로우 컨트롤 태스크에 의해서 실행순서가 변경될 수 있다.
+
+## flow control task
+
+- end
+- goto
+- switch (switch-goto)
+- switch-range (switch-range-goto)
+- throw
+
+## properties
+
+- name
+- description
+- skip
+- log
+- connection
+- task
+- parameter
+
+## operations
+
+- add step
+- remove step
+- sequence move up / down
+- save
+- delete

package/dist-client/helps/integration/ui/scenario.md

@@ -0,0 +1,35 @@
+# Scenario
+
+시나리오 정의 화면에서는 시스템에서 운영될 시나리오를 (생성/수정/삭제/테스트) 관리한다.
+
+## properties
+
+- name
+  - 시나리오의 이름을 지정
+  - 이름은 유니크해야함
+- description
+- [schedule](./crontab-editor.md)
+- timezone
+  - 스케쥴이 운영될 기준 시간대를 설정한다.
+- active flag
+  - 어플리케이션 시작 시점에 자동으로 시작여부 지정
+- progress (모니터링중에만 표시되는 정보임)
+  - (현재 스텝 번호 / 시나리오의 전체 스텝수) %
+  - 메인 시나리오 기준이며, 서버시나리오는 하나의 스텝으로 계산된다.
+- round (모니터링중에만 표시되는 정보임)
+  - 반복되는 경우 현재 몇번째 반복횟수인지를 표현
+- message (모니터링중에만 표시되는 정보임)
+  - 시나리오 인스턴스의 최종 상태와 관련한 메시지
+
+## operations
+
+- start monitoring
+  - [인티그레이션 모니터링](./integration-monitor.md) 화면으로 이동한다.
+- copy scenario
+  - 선택된 시나리오를 복사한다
+- save scenario
+  - 시나리오 수정사항을 저장한다.
+  - 실행중 시나리오는 수정할 수 없다.
+- delete scenario
+  - 선택된 시나리오를 삭제한다.
+  - 실행중 시나리오는 삭제할 수 없다.

package/dist-client/helps/module/api.md

@@ -0,0 +1,117 @@
+# API module
+
+외부 클라이언트에 RESTful 서비스를 제공하기위한 기본 모듈이다.
+
+- openapi V3 [Swagger](https://swagger.io/) 명세를 지원한다.
+- (서버) Graphql Resolver로 구현된 기능 중에서 외부 클라이언트를 위한 RESTful API로 노출하는 패턴을 제공한다.
+- (클라이언트) API 테스트를 위한 API Sandbox를 제공한다.
+- 각 모듈별로 제공된 API 기능은 최종 Application에 통합된다.
+
+## 모듈에서 API 기능 제공하기 (기본 구조)
+
+- API를 제공하고자하는 모듈의 package.json에서 API 모듈을 dependency에 추가한다.
+- openapi 명세
+  - 각 모듈의 root 폴더에 'openapi' 라는 폴더를 만들어서 제공한다.
+  - 각 API 버전별로 {version}.yaml 파일을 생성하고 openapi V3 명세에 맞게 API 명세를 작성한다.
+  - API 내용이 많아서 하나의 파일로 작성하기 어려운 경우 openapi/{version} 폴더를 만들고, {version}.yaml 의 일부 내용을 분리해서 폴더에 추가할 수 있다.
+  - 프레임워크는 openapi/{version}.yaml 과 openapi/{version}/\*.yaml 을 모두 합해서 해당 버전의 API 명세로 이해한다.
+  - openapi/{version}.yaml 에는 openapi 명세의 공통 정의만 가지고, openapi/{verion}/{tag}.yaml 에 명세의 각 tag에 해당하는 내용을 담는 것을 추천한다.
+- 서버
+  - server/restful 폴더를 생성
+  - server/restful/{version} 폴더를 생성. 버전은 API 버전을 의미하며, 'unstable', 'v1', 'v2' 식으로 네이밍할 수 있다.
+  - server/restful/{version} 폴더에 구현될 API는 @things-factory/api 모듈에서 정의한 restfulApiRouter에 endpoint를 추가하는 방법으로 정의한다.
+  - 'get', 'post', 'put', 'delete' 메쏘드를 각 API의 의미에 맞게 사용할 것을 권장한다. (get => retrieve, post => create, put => update, delete => delete)
+- 클라이언트
+  - 각 모듈 또는 어플리케이션의 client/api/api-sandbox-{version}.js 에 구현할 것을 권장한다.
+  - 현재는 이 페이지에 APIS 명세를 별도로 정의하고 있으나, 향후 openapi 명세를 활용하는 것으로 통합될 예정이다.
+
+## 클라이언트 사이드 기능
+
+### 클라이언트 라우팅
+
+- 클라이언트 페이지명 : 'api-swagger'
+  - 'api-swagger' 페이지로 이동하면, openapi 명세에 기반한 swagger 페이지를 볼 수 있으며, 샌드박스 테스트를 해볼 수 있다.
+
+### APIPageTemplate
+
+- API 샌드박스 구성 시에 활용.
+- APIPageTemplate
+
+```
+import { APIPageTemplate } from '@things-factory/api'
+
+const APIS = [
+  {
+    name: 'scenario',
+    path: 'scenario/:id',
+    method: 'get',
+    parameters: [],
+    description: 'get scenario information'
+  }
+]
+
+class APISandbox extends APIPageTemplate {
+  constructor() {
+    super()
+  }
+
+  get APIS() {
+    return APIS
+  }
+
+  get context() {
+    return {
+      title: 'API Sandbox',
+      apiCategory: 'Integration',
+      description: 'Scenario control, connection control, ...'
+    }
+  }
+}
+
+window.customElements.define('api-sandbox', APISandbox)
+```
+
+## 서버 사이드 기능
+
+- RESTful API router
+  - 외부 클라이언트에 RESTful 엔드포인트를 제공
+  - 내부적으로는 Graphql Resolver를 호출하여 그 결과를 외부 클라이언트에 제공하는 패턴을 권장
+  - endpoint 패턴
+    - '/api/{version}/...'
+
+```
+/* API implementation sample */
+
+import gql from 'graphql-tag'
+import { restfulApiRouter as router } from '@things-factory/api'
+
+/* restfulApiRouter의 prefix가 '/api' 이므로, 그 이후의 path를 지정 */
+router.get('/unstable/scenario/:id', async (context, next) => {
+  const { client } = context.state
+  const { id } = context.params
+
+  context.body = await client.query({
+    query: gql`
+      query($id: String!) {
+        scenario(id: $id) {
+          id
+          name
+          description
+        }
+      }
+    `,
+    variables: {
+      id
+    },
+    context
+  })
+})
+```
+
+## Swagger API Page 제공
+
+- about [Swagger](https://swagger.io/)
+- [/api-docs](/api-docs)
+  - 시스템의 대표 버전의 API 도큐먼트(Swagger) 페이지로 redirect됨
+- [/api-docs/{version}](/api-docs/{version})
+  - 시스템의 해당 버전의 API 도큐먼트(Swagger) 페이지를 제공함

package/dist-client/helps/module/dashboard.md

@@ -0,0 +1,27 @@
+# Dashboard module
+
+- 어플리케이션의 대표 대시보드 페이지 설정을 위한 모듈이다.
+
+## 사용 방법
+
+- 대시보드 기능을 사용하고자 하는 어플리케이션의 모듈 디펜던시로 @things-factory/dashboard를 설정한다.
+
+```
+$ yarn workspace @things-factory/{target-application} add @things-factory/dashboard
+```
+
+```
+# package.json
+dependencies: {
+  ...
+  "@things-factory/dashboard": "^...",
+  ...
+}
+```
+
+- 위와 같이 패키지 디펜던시에 추가되면, 어플리케이션의 세팅 화면에 대시보드 세팅 기능이 추가되게 된다.
+  - 대시보드 설정은 '데스크탑용 대시보드'와 '모바일용 대시보드'를 설정할 수 있다.
+  - '모바일용 대시보드'를 따로 설정하지 않으면, '데스크탑용 대시보드'가 같이 적용된다.
+- 대시보드 클라이언트 페이지는 'dashboard' 로 지정되어있다.
+- 대시보드 설정은 개개인별로 적용되지 않고, 해당 어플리케이션의 도메인별로 적용된다.
+  - 대시보드 설정이 변경되면, 해당 도메인의 모든 유저의 대시보드가 변경되므로 주의하여야 한다.

package/dist-client/helps/module/help.md

@@ -0,0 +1,40 @@
+# HELP module
+
+사용자에게 어플리케이션 사용과 관련한 온라인 도움말을 제공하는 목적의 모듈이다.
+
+각 도움말 컨텐츠는 계층 구조의 topic으로 작성되며, 내용은 [Marked Documentation](https://marked.js.org/) 형식으로 작성된다.
+
+## 토픽 작성
+
+- 온라인 헬프를 제공하고자 하는 모듈에서는 각 모듈의 루트 폴더 아래에 'helps' 폴더를 생성한다.
+- 'helps' 폴더 이하의 패스이름이 도움말 'topic' 에 매핑된다. 예를 들어, '/helps/module/help.md' 파일은 topic 'module/help' 의 내용이 된다.
+- 파일 확장자 .md 는 markdown 파일임을 의미하며, 그 내용은 [Marked Documentation](https://marked.js.org/) 형식으로 작성한다.
+- 각 모듈별로 작성한 도움말들은 프레임워크에 의해서 최종 어플리케이션 레벨에서 통합된다. 그러므로 각 모듈에서 작성되는 도움말의 토픽이 중복되지 않도록 토픽 구조의 관습을 따르는 것을 권장한다.
+- 토픽 구조
+  - 'module/{module-name}'
+    - 각 모듈에 대한 설명을 제공한다. 이 토픽은 주로 things-factory 프레임워크를 이해해서 어플리케이션을 개발하고자하는 개발자를 대상으로 하는 매뉴얼에 연결될 것이다.
+  - '{module-name}/...'
+    - 각 모듈에서 제공하는 기능을 어플리케이션 사용자를 위해 작성하는 경우에는, module-name 으로 시작하는 토픽 구조에 작성한다.
+    - 각 모듈내에서는 자유로운 하위 구조로 작성한다.
+    - module-name 은 심플하지만 유일한 이름을 사용하는 것을 권장하며, 모듈 뒤의 'base', 'ui' 등의 postfix를 빼는 것을 권장한다.
+      - integration <= integration-base, integration-ui
+      - grist <= grist-ui
+      - import <= import-base, import-ui
+    - scene 모듈의 경우에는 각 scene 컴포넌트의 통합된 구성을 위해서 'scene/component/{component-name}' 과 같이 만드는 것을 관습으로 정한다.
+      - 'scene/component/connection-control'
+      - 'scene/component/simple-switch'
+- Assets
+  - 각 헬프 페이지에서 참조되는 이미지 동영상 등 asset들은 /helps/{asset-type}s/{module-name}/.. 에 두도록 한다.
+  - 이 파일들 역시 최종 어플리케이션 레벨에서 통합되므로, 다른 모듈의 파일들과 중복되지 않도록 module-name 폴더 아래에 위치하도록 한다.
+  - 예시
+    - /helps/images/integration/abc.png
+    - /helps/videos/integration/xyz.mov
+
+## 다국어 제공 (i18n)
+
+- The help(markdown) file is selected in response to the user's language information.
+- help file finding order (ie. user language is 'ko-KR' and topic is 'about/things-factory' and fallback language is 'en')
+  1. /helps/about/things-factory.ko-KR.md
+  2. /helps/about/things-factory.ko.md
+  3. /helps/about/things-factory.en.md
+  4. /helps/about/things-factory.md

package/dist-client/helps/module/lite-menu.md

@@ -0,0 +1,112 @@
+# Lite Menu module
+
+간편하게(Menu 모듈 대비) 메뉴 구성을 할 수 있도록 제공되는 모듈이다.
+
+| 항목             | Menu 모듈 | Lite Menu 모듈 | 설명                                                                                                    |
+| ---------------- | --------- | -------------- | ------------------------------------------------------------------------------------------------------- |
+| 정적메뉴제공     | x         | o              | 정적메뉴는 메뉴 구성의 베이스가되어, 도메인이나 사용자의 권한 등과 무관하게 항상 보여지는 메뉴를 말한다 |
+| 동적메뉴제공     | o         | o              | 도메인별로 커스터마이징되는 메뉴                                                                        |
+| 사용자 권한 연동 | o         | x              |                                                                                                         |
+| 메뉴 depth       | 2         | 2              |                                                                                                         |
+
+## features
+
+- 반응형 디자인
+- 2 레벨 메뉴
+  - 톱레벨의 두가지 기능
+    - 페이지 라우팅
+    - 하위 메뉴 펼치기
+- 정적/동적 메뉴 구성 (from lite-menu entity)
+  - 부가메뉴관리페이지에서 동적인 메뉴를 관리할 수 있다.
+- 메뉴와 페이지 연결
+  - 톱레벨은 현재 페이지가 자신의 페이지이거나 하위 메뉴의 페이지이면 강조되어 표현되어야 한다.
+  - 또한, 톱레벨이 강조되어 표현되는 경우에 하위 메뉴는 펼쳐져야 한다.
+  - 톱레벨과 하위 메뉴의 연결 관계는 하위 메뉴 페이지의 regexp 등으로 설정가능해야 한다.
+  - 전체 메뉴에서 하나의 톱레벨만이 강조될 수 있다.
+
+## Look & Feel
+
+- 두 가지 레이아웃을 제공
+  - Portrait
+    - nav 또는 aside 영역에 추가되는 경우
+    - 상하로 길죽한 형태의 메뉴 구조
+    - 레벨 1 메뉴를 기본으로 트리형태의 메뉴 구조
+    - 레벨 2를 펼치거나 숨기는 과정에 슬라이딩 애니메이션
+  - Landscape
+    - header 영역에 추가되는 경우
+    - 좌우로 넓적한 형태의 메뉴 구조
+    - 모든 레벨의 메뉴가 한번에 보이는 메뉴 구조
+
+## 구현
+
+- LiteMenu를 배치하는 적절한 포인트는 클라이언트 모듈의 bootstrap.js 이다.
+- setupMenuPart(option: {hovering?: boolean, position?: string})
+  - 주어진 옵션에 따라서 LiteMenu를 생성한다.
+  - hovering: true | false
+    - hovering 메뉴인지, 고정자리를 차지하는 메뉴인지를 설정한다
+  - position: VIEWPART_POSITION.NAVBAR | VIEWPART_POSITION.ASIDEBAR | VIEWPART_POSITION.HEADERBAR
+    - LiteMenu가 위치할 포지션을 설정한다.
+    - NAVBAR와 ASIDEBAR를 지정하면 portrait 스타일의 메뉴가 추가되며, 그 외에는 landscape 형태의 메뉴가 추가된다.
+- updateMenuTemplate(menutemplate)
+  - 정적인 메뉴구조를 설정한다.
+  - 만약 메뉴구조를 변경하고 싶을 때에 호출할 수 있다.
+
+```
+import { updateMenuTemplate, setupMenuPart } from '@things-factory/lite-menu'
+import { VIEWPART_POSITION } from '@operato/layout'
+
+...
+
+setupMenuPart({ hovering: false, position: VIEWPART_POSITION.HEADERBAR })
+updateMenuTemplate([{
+  name: '생산',
+  icon: 'business', /* Material Icon의 이름 */
+  menus: [
+    {
+      name: '생산계획',
+      path: 'production-plan', /* page 이름 */
+      icon: 'add_circle_outline'
+    },
+    {
+      name: '작업지시',
+      path: 'production-order',
+      icon: 'add_circle_outline'
+    },
+    {
+      name: '로트추적',
+      path: 'lot-tracing',
+      icon: 'add_circle_outline'
+    },
+    {
+      name: '자재투입추적',
+      path: 'material-tracing',
+      icon: 'add_circle_outline'
+    }
+  ]
+},
+{
+  name: '설비',
+  icon: 'groups',
+  menus: [
+    {
+      name: '설비상태',
+      path: 'equipment-state',
+      icon: 'add_circle_outline'
+    },
+    {
+      name: '설비별데이타이력',
+      path: 'equipment-data-history',
+      icon: 'add_circle_outline'
+    },
+    {
+      name: '설비 정비계획',
+      path: 'equipment-maintenance-plan',
+      icon: 'add_circle_outline'
+    }
+  ]
+},
+{
+  ...
+}])
+
+```

package/dist-client/helps/module/notification.md

@@ -0,0 +1,161 @@
+# module - Notification
+
+- 사용자에게 알림을 전달하는 기능
+- 백그라운드 알림 (Push notification)
+  - 사용자가 어플리케이션을 사용하는 중이 아니더라도 알림을 전달
+  - 웹푸시 기능을 사용하며, Firebase Cloud Messaging (FCM)을 사용한다.
+- 클라이언트 알림 (In-app messaging)
+  - 사용자가 어플리케이션을 사용하는 중에 알림을 전달
+  - 웹푸시 기능을 사용할 수 없거나, 백그라운드 알림 기능 사용을 원하지 않을 때, 웹소켓을 사용하여 어플리케이션 사용 중에만 알림을 전달한다.
+- 오류 알림
+  - 사용자가 어플리케이션 조작 중에 발생하는 오류 등을 유지
+
+## terminology
+
+- notification
+  - 코드 상의 notification 용어는 주로 알림과 관련한 데이타 형식을 의미한다.
+- notify
+  - 사용자에게 알림을 전달하는 행위를 의미한다.
+
+## techonologies
+
+- web push notification
+- fcm
+- service worker
+
+## middlewares
+
+- notification-middleware
+  - koa-context의 state에 notify 라는 함수를 전달한다.
+  - 코드 내에서는 notify함수를 사용해서 알림을 전달할 수 있다.
+  - notify 기능의 표준화를 위해서 제공된다.
+- directive-notification
+  - resolver 수행 이후에 자동으로 해당 도메인의 사용자들에게 알림을 전달한다.
+  - TODO more descriptions about directive notification
+
+## security
+
+- 매우 강력한 보안 기준을 만족해야 pubsub 채널에 조인할 수 있다.
+- websocket은 tenancy 인증을 완료한 사용자로부터의 연결 요청만을 허가한다.
+- 해당 tenancy(domain)의 jwt-authentication을 가지고 있어야만 pubsub 그룹에 조인할 수 있다.
+
+## common elements
+
+### notification-setting-let
+
+![notification-setting-let](./notification-images/element-notification-setting-let.png)
+
+### notification-badge
+
+![notification-badge](./notification-images/element-notification-badge.png)
+
+### notification-list
+
+![notification-list](./notification-images/element-notification-list.png)
+
+## usages
+
+### configuration
+
+- config.(development|production).js
+
+```
+  notification: {
+    fcm: {
+      serviceAccount: {
+        project_id: "----",
+        private_key: "-----BEGIN PRIVATE KEY-----\nMIIEvQIB-----END PRIVATE KEY-----\n",
+        client_email: "-----"
+      },
+      appConfig: {
+        apiKey: '-----',
+        projectId: '-----',
+        messagingSenderId: '-----',
+        appId: '-----'
+      },
+      serverKey: '-----'
+    },
+    vapidKey: {
+      subject: 'mailto:abc@def.xyz',
+      publicKey: '-----',
+      privateKey: '-----'
+    }
+  }
+```
+
+- you can get serviceAccount configuration from firebase console
+
+![get service account config](./notification-images/config-service-account.png)
+
+- you can get app configuration from firebase console
+
+![get app config menu](./notification-images/config-app-1.png)
+![get app config](./notification-images/config-app-2.png)
+
+- you can get serverKey from firebase console
+
+![get server key config](./notification-images/config-server-key.png)
+
+- you can get vapidKey from firebase console
+
+![get vapidkey menu](./notification-images/config-vapidkey-1.png)
+![get vapid public key](./notification-images/config-vapidkey-2-get-public-key.png)
+![get vapid private key](./notification-images/config-vapidkey-3-get-private-key.png)
+
+## test
+
+### test on chrome dev
+
+- push test on chrome samples (outside url)
+
+```
+{
+  "notification": {
+    "title":"Congratulations on your performance",
+    "body": "Daily Acheivement",
+    "image": "https://d2mvzyuse3lwjc.cloudfront.net/doc/en/UserGuide/images/Pie_Of_Pie_Chart/Pie_Of_Pie_Chart.png?v=83478",
+    "url": "https://github.com/klaude416/wms-notebook/blob/master/step5_shipping.ipynb"
+  }
+}
+```
+
+- inside url sample
+
+```
+{
+  "notification": {
+    "title":"Congratulations on your performance",
+    "body": "Daily Acheivement",
+    "image": "https://d2mvzyuse3lwjc.cloudfront.net/doc/en/UserGuide/images/Pie_Of_Pie_Chart/Pie_Of_Pie_Chart.png?v=83478",
+    "url": "http://board.localhost:3000/system"
+  }
+}
+```
+
+- sample with actions
+
+```
+{
+  "notification": {
+    "title":"Congratulations on your performance",
+    "body": "Daily Acheivement",
+    "image": "https://d2mvzyuse3lwjc.cloudfront.net/doc/en/UserGuide/images/Pie_Of_Pie_Chart/Pie_Of_Pie_Chart.png?v=83478",
+    "url": "https://github.com/klaude416/wms-notebook/blob/master/step5_shipping.ipynb",
+    "actions": [{
+      "action": "save", "title": "save"
+    }, {
+      "action": "delete", "title": "delete"
+    }]
+  }
+}
+```
+
+![push test on chrome](./notification-images/push-test-on-chrome-1.png)
+![push test on chrome result](./notification-images/push-test-on-chrome-2.png)
+
+### test on firebase
+
+![push test on firebase](./notification-images/push-test-on-firebase-1.png)
+![push test on firebase](./notification-images/push-test-on-firebase-2.png)
+![push test on firebase](./notification-images/push-test-on-firebase-3.png)
+![push test on firebase result](./notification-images/push-test-on-firebase-4.png)

package/dist-client/helps/oauth2-client/code-verifier.md

@@ -0,0 +1,5 @@
+# code verifier
+
+A random, 43-128 character string used to connect the authorization request to the token request.
+
+Uses the following characters: [A-Z]/[a-z]/[0-9]/"-"/"."/"\_"/"~".