@things-factory/reference-app 6.0.27 → 6.0.28

package/dist-client/helps/about/framework/redirection.md

@@ -0,0 +1,45 @@
+# redirection
+
+사용자가 브라우저에서 어플리케이션을 사용하는 경우에 사용자의 액션에 의한 URL 요청이 서버쪽에서 여러가지 상황에서 다른 URL로 리디렉트될 수 있다.
+(HTTP 응답코드 302(임시이동)로 응답되는 상황을 의미한다.)
+URL 리디렉션으로 브라우저에는 사용자가 요청한 URL이 아닌 리디렉트된 페이지가 보여지게 된다.
+통상적으로 리디렉트된 페이지는 적절한 과정을 거쳐서 최종적으로는 항상 사용자가 최초에 요청한 URL에 해당하는 페이지로 도달하게 된다.
+
+## URL 리디렉션이 배제되는 경우
+
+- 데이타만을 요청하는 API호출인 경우에는 리디렉션이 동작하지 않는다.
+  - 모든 graphql 요청은 API 호출이다.
+  - Restful 요청의 경우에도 API로 호출된 경우가 있다.
+  - 클라이언트 요청이 API 호출인지 여부는 accept 헤더에 'text/html', '\*/\*\' 이 포함되어있는지로 판단한다. 즉, accept 헤더에 'text/html', '\*/\*'중의 하나라도 포함되어있으면, API호출이 아니라고 판단한다.
+
+## GET/POST method Routing Pair (리디렉션과 서버사이드 페이지 렌더링)
+
+사용자의 페이지 요청에 대해 리디렉션을 사용하는 경우와 서버사이드 페이지 렌더링이 사용되는 경우를 판단할 필요가 있다.
+클라이언트 페이지 네비게이션이 동반되는 플로우는 엄밀하게 이 원칙을 따라야 한다.
+다음 사례를 생각해보자
+
+- signin
+  - 사용자가 보낸 요청이 인증 정보를 필요로 하는 요청인 경우, 서버에서는 요청 패킷과 세션정보를 분석해서 현재 사용자 인증여부를 판단한다.
+  - 만약 인증에 실패하였다면, 사용자의 요청을 처리하게 전에 먼저 인증을 요청하는 페이지(signin)로 리디렉트 된다.
+  - 사용자의 최초 요청은 리디렉트 URL(signin)에 (redirectTo - URL Query String 파라미터로) 포함되어서 계속 유지되게 된다.
+  - 사용자 인증 페이지(signin)는 서버사이드 페이지 렌더링을 통해서 사용자에게 제공된다.
+  - 사용자는 인증 정보를 작성한 후 (signin) POST 요청으로 서버에 전달된다. POST 요청에도 최초 요청 URL은 (redirectTo Body 파라미터로) 계속 포함되어있다.
+    - 인증정보가 잘못되었다면, 다시 서버사이드 페이지 렌더링을 통해서 signin 페이지가 다시 제공된다.
+  - 서버에서는 사용자가 선택한 도메인 정보와 사용자가 원래 요청한 URL을 조합한 URL로 다시 리디렉트 한다.
+- checkin
+  - 사용자가 보낸 요청이 도메인(테넌시) 정보를 필요로하는 요청인 경우, 서버에서는 요청 패킷을 분석해서 어떤 도메인에서 서비스되어야 하는 지를 판단한다. (도메인을 판단하는데 세션정보를 사용해서는 안된다.)
+  - 만약 요청 패킷에서 도메인 정보를 찾을 수 없는 경우, 사용자의 요청을 처리하기 전에 먼저 도메인 선택을 요구하는 페이지(checkin)로 리디렉트 된다.
+  - 사용자의 최초 요청은 리디렉트 URL(checkin)에 (redirectTo - URL Query String 파라미터로) 포함되어서 계속 유지되게 된다.
+  - 도메인 선택을 요구하는 페이지(checkin)는 서버사이드 페이지 렌더링을 통해서 선택할 수 있는 도메인의 리스트를 포함해서 사용자에게 제공된다.
+  - 사용자가 도메인을 선택한 결과는 (checkin) POST 요청으로 서버에 전달된다. POST 요청에도 최초 요청 URL은 (redirectTo Body 파라미터로) 계속 포함되어있다.
+  - 서버에서는 사용자가 선택한 도메인 정보와 사용자가 원래 요청한 URL을 조합한 URL로 다시 리디렉트 한다.
+
+위의 사례에 따른 원칙은
+
+- 리디렉션 프로세스를 위해서는 각 페이지 PATH(eg. signin, checkin) 별로 2개의 라우팅 구현을 제공한다.
+  - get 메쏘드
+    - 리디렉션의 목적을 위한 페이지를 서버사이드에서 렌더링해서 브라우저에 제공한다.
+    - 원래의 요청 페이지 정보는 redirectTo URL Query String 파라미터로 포함한다.
+  - post 메쏘드
+    - 사용자의 대응을 통해 리디렉션의 목적을 처리하고, 원래의 요청 페이지로 리디렉션하는 기능을 제공한다.
+    - 원래의 요청 페이지 정보는 redirectTo Body 파라미터로 유지한다.

package/dist-client/helps/about/framework/typegraphql.md

@@ -0,0 +1,74 @@
+# TypeGraphql을 적용하는 이유.
+
+[Modern framework for GraphQL API in Node.js](https://typegraphql.com/)
+
+## 이전 방식에서 아쉬운 점
+
+[관련 이슈 - [shell] typegraphql fully support](https://github.com/hatiolab/things-factory/issues/770)
+
+- graphql의 타입이 typescript의 타입형태가 아니므로 resolver 구현시 명시적인 타입 적용이 어려워서 typescript의 장점이 반감됨.
+- 사실상 graphql타입과 entity는 거의 동일한 경우가 많은데, graphql의 타입이 entity의 타입과 일치하지 않으므로, resolver 구현시 typescript 타입을 다시 정의하게되는 경우도 있음.
+- graphql 관련된 구현(타입, 리솔버, 엔티티)가 분산되어 있으므로, redundant한 느낌이 있으며, 오류를 인식하거나 찾아내기가 어려웠음.
+
+## typegraphql을 적용시 개선되는 점
+
+- resolver를 구현할 때, typescript 타입을 온전히 적용할 수 있으므로, 타입관련된 코드 오류를 코딩 시점에 인지할 가능성이 높다.
+- gql template literal을 사용하여 graphql 타입을 정의하지 않아도 되므로, gql template literal과 관련된 오류가 방지된다.
+- resolver 구현시 graphql 타입정보가 같이 있으므로(타입과 구현이 분산되지 않으므로), 코드 오류가 방지된다.
+
+## 적용 방법
+
+- 이전방식과 typegraphql 방식이 혼용될 수 있도록 구성하였으므로, 신규로 개발하는 모듈부터 적용할 것을 추천함.
+- 다른 entity와 resolver에서 많이 레퍼런스되는 것들 우선하여 typegraphql을 적용하였음 (domain, auth-base, ..)
+  - shell
+  - auth-base (일부)
+  - setting-base
+  - integration-base
+  - board-service
+  - lite-menu
+  - ..
+- plop template - 'entity' generator 를 'service' generator 로 변경 적용하였음
+
+![Screen Shot 2021-08-08 at 11 55 41 AM](https://user-images.githubusercontent.com/1239480/128619236-3a5b52d6-e760-48dd-a9b1-78a6f89bedf1.png)
+
+## 유의 사항
+
+### types mapping
+
+| description       | typescript        | typegraphql                                | graphql         |
+| ----------------- | ----------------- | ------------------------------------------ | --------------- |
+| 문자열            | string            | String (tyepgraphql 자동 매핑)             | String          |
+| 정수형            | number (Integer)  | Int                                        | Int             |
+| 실수형            | number (Float)    | Float                                      | Float           |
+| 날자형            | Date              | Timestamp (tyepgraphql 자동 매핑)          | Timestamp       |
+| 오브젝트형        | ScalarObject      | ScalarObject                               | ScalarObject    |
+| any               | any               | ScalarAny                                  | ScalarAny       |
+| 사용자정의 클래스 | SomeClass         | SomeClass (ObjectType or InputType로 정의) | SomeClass       |
+| 사용자정의 Enum   | SomeEnumeration   | SomeEnumeration                            | SomeEnumeration |
+| 어레이형          | SomeType[]        | [SomeType]                                 | [SomeType!]     |
+| mandatory         | 변수명: SomeType  | SomeType with nullable => false (default)  | SomeType!       |
+| optional          | 변수명?: SomeType | SomeType with nullable => true             | SomeType        |
+
+### Annotations
+
+- ObjectType / InputType
+- Field
+- Resolver
+- Query / Mutation
+- Directive
+- Arg / Args
+- Context
+
+### Query sample
+
+![Screen Shot 2021-08-08 at 12 27 54 PM](https://user-images.githubusercontent.com/1239480/128619799-8ef2b3c7-dc12-48f5-9683-794636de2cd1.png)
+
+### Resolver sample
+
+![Screen Shot 2021-08-08 at 12 41 11 PM](https://user-images.githubusercontent.com/1239480/128619978-2ac766e1-f276-4013-87a4-5eec3083bae3.png)
+
+### 기존 방식과 새로운 방식의 혼용
+
+- auth-base 모듈에 기존 방식과 새로운 방식이 혼용되어 있으므로 참고.
+
+![Screen Shot 2021-08-08 at 12 21 27 PM](https://user-images.githubusercontent.com/1239480/128619652-d838f165-26f1-4cd3-8e4e-21d33cc46abb.png)

package/dist-client/helps/about/framework.md

@@ -0,0 +1,10 @@
+# Things Factory Framework
+
+## Developers Guide
+
+[Things Factory Framework Developers Guide](http://www.hatiolab.com/things-factory-doc/ko/intro/framework/)
+
+## Framework Concepts
+
+- [redirection](/helps/about/framework/redirection.md)
+- [typegraphql](/helps/about/framework/typegraphql.md)

package/dist-client/helps/about/modules.md

@@ -0,0 +1,7 @@
+# Things Factory Modules
+
+- [API](/helps/module/api.md)
+- [Dashboard](/helps/module/dashboard.md)
+- [Help](/helps/module/help.md)
+- [LiteMenu](/helps/module/lite-menu.md)
+- [Notification](/helps/module/notification.md)

package/dist-client/helps/about/things-factory.en.md

@@ -0,0 +1,255 @@
+# about things factory
+
+Things-Factory is an framework to develop web-based apps for desktop, mobile and edge device environment.
+
+Things-Factory framework is managed as a monorepo that is composed of hundreds of npm packages.
+These modules compose together to help you create performant modern JS apps that you love to develop and test. These packages are developed primarily to be used on top of the stack we like best for our JS apps; Typescript for the flavor, Koa for the server, LitElement for UI, Apollo for data fetching, and Jest for tests. That said, you can mix and match as you like.
+
+- [Contents for modules](./modules.md)
+- [Contents for components](./components.md)
+
+## features
+
+- It is based on module structure.
+  - You can configure related feature sets for each module.
+  - It is removable by module.
+  - You can define dependencies between modules. Apply nodejs module dependency structure.
+  - [Things Factory Modules](./modules.md)
+  - [What modules does this application consist of ? (click here with holding ALT key.)](/dependencies)
+- Responsible Web App
+  - by Service Worker, Webpush notification, Manifest
+  - application layout for mobile
+- Help
+  - markdown based online help
+- Support Theme
+- Monorepo managed by lerna and yarn
+  - [things-factory github repository](https://github.com/hatiolab/things-factory)
+- Powerful Graphic UI design & viewing tools (board modules)
+- Redux pattern
+- Use i18next for internationalization
+- Simple datagrid
+  - responsible design
+- Packaging function uses webpack
+- The code set is based on es6,7,8, and transpiling with babel
+  - class-properties
+  - decorators
+  - object-rest-spread
+- Using Web Component-based DomElement - Defining custom element with LitElement
+- It is activated by linking with URL path and history in Single Page Application.
+- Each page is loaded at the time of initial activation. (lazy loading)
+- Zero Configuration function. It uses SSDP (Service Discovery Protocol) to automatically find services to be connected automatically and provide related functions. For example, it attempts to connect automatically by finding a server to connect to.
+- JWT based authentication (requires improvement to be supported by the server framework)
+- Oauth2 based extern interface
+  - as a Oauth2 Server
+  - as a Oauth2 Client
+- Free branding
+- Deploy
+  - [docker](http://docker.com) ready
+  - [kubernetes](http://kubernetes.io) ready
+
+## structural conventions
+
+- Redux
+  - The way to manage the overall state of an Application is using Redux pattern.
+  - The application, or base modules, can prepare points in the store that can be extended by a sub-module and provide an action.
+  - The sub-modules connect to the extension structure of the application or parent module using the action defined in the parent (base) module.
+- Page, Layout and Component
+  - Pages are activated by associating with the URL. (route)
+  - Layouts provide a framework for the layout and structure of the entire application UI elements.
+  - The components provide independent (atomic) functionality.
+    - The component excludes dependencies on the application in order to maintain implementation independence.
+      - Style maintains its independence by using css variables.
+      - Multilinguals maintain independence by using ox-i18n components. (Only have dependencies on ox-i18n.)
+      - The component does not have a premise for the layout (display, position) of the host (container) to which it will be used.
+  - page, layouts are connected to redux.
+  - Components do not connect to redux, but they work with pages through properties.
+- Base Module and extension (common) Modules (ex. provider, ui)
+  - The Base Module provides an abstract definition of special functions.
+  - The Base Module is said to provide functional services to the extension module.
+  - The extension module can add the base module as a dependent module and directly use the functions defined in the base module.
+  - Another way the extension module extends the Base Module is by using the reducer and action added to the store.
+  - The Base Module is a base module that reads a group of modules. For example, board-base module is a base module for all board functions. In addition, label-base module defines and implements functions related to the label, including barcode label pop-up, barcode label scanning, barcode label rendering and printing.
+  - The naming convention of base module for xxx module is 'xxx-base'.
+- Provider Module
+  - Sub-module that fills the data of Base module
+  - It mainly serves to fill the data defined in Base module from the external server.
+  - The naming convention for Provider module of xxx module is 'xxx-provider'.
+  - If it is necessary to be distinguished by the way data is provided, the naming convention for Provider module of xxx module using yyy method can be defined as 'xxx-provider-yyy'.
+- UI Module
+  - Sub-module responsible for the screen configuration related to Base module
+  - The naming convention for UI module of xxx module is 'xxx-ui'.
+  - If it is necessary to be distinguished by UI configuration method, the naming convention for UI module of xxx module using yyy method may be 'xxx-ui-yyy'.
+- Shell, Module and Application
+  - Shell provides all the structures that enable the module structure in the development and execution stages.
+    - redux, assets, routing
+    - build module, build application
+  - Module is only responsible for implementing its own purpose in the Shell base.
+  - Application is the final product that consists of the modules necessary for the purpose of Shell and the user.
+    - Configurations by Application
+      - Manifest file (brand-related - application name, logo image)
+      - Other brand related - homepage link, banner logo
+      - Style : Representative color table, other css variables
+      - Server connection IP
+      - Other source/resource override
+
+## Other coding conventions
+
+- Source file length recommended
+  - Each source file implements one of the most important purposes. (Be responsible for simple purposes rather than multiple purposes.)
+  - If there is no specific reason for each source file, it is recommended not to exceed 200 lines.
+- Naming
+
+  - class
+    - Class name : starts with uppercase, camel-case
+    - private property, method : starts with \_(underscore), camel-case
+    - public property, method : starts with lowercase, camel-case
+    - class property, method : starts with lowercase, camel-case
+    - Event handler : starts with on + EventName, camel-case
+
+- Localization
+  - Don’t capitalize explicitly in locale file
+
+```
+"field.system brief": "System Brief" (x)
+"field.system brief": "system brief" (o)
+```
+
+You can set it to style where you need it.
+
+```
+text-transform: capitalize;
+text-transform: uppercase;
+```
+
+- If possible, use ‘ms.json’ rather than ‘ms-My.json’. In particular, use ‘ms-My’ only if it is a Malay language that is used differently only in Malaysia.
+
+## authentication
+
+### things-factory/shell
+
+- Control the authentication process through auth base.
+  - Set authentication through auth base.
+- Provide auth action.
+  - You can change store through authentication related action.
+- Provide auth reducer.
+- That is, it sets through auth base and provides auth-related extension point.
+- In particular, auth base function is provided directly in things-factory shell.
+
+### things-factory/auth-ui
+
+- Provide the client side authentication process based on JSON webtoken.
+
+## prerequisites
+
+- Install Windows Subsystem for Linux on Windows (Windows)
+  - Install WSL using Ubuntu following https://docs.microsoft.com/en-gb/windows/wsl/install-win10
+- VS Code Extensions
+  - Prettier - Code formatter
+  - es6-string-css
+  - lit-html
+- VS Code Configuration
+  - Format on save: true
+- nodejs (v8.0.0 and above)
+- yarn
+- Chrome Browser Extension
+  - https://github.com/zalmoxisus/redux-devtools-extension
+- Node-gyp (For Ubuntu)
+  - npm install -g node-gyp
+- Python2 (For Ubuntu)
+  - sudo apt-get install python
+  - npm install --python=python2.7
+  - npm config set python python2.7
+- mdns (For Ubuntu)
+  - sudo apt-get install build-essential
+  - sudo apt-get install libavahi-compat-libdnssd-dev
+- node-printer (For Ubuntu)
+  - sudo apt-get install libcups2-dev
+
+## Usages
+
+The things-factory repo is managed as a monorepo that is composed of hundreds of npm packages.
+Each package has its own `README.md` and documentation describing usage.
+
+```
+# very first time
+$ yarn install
+$ yarn build # build all packages
+$ DEBUG=things-factory:*,typeorm:* yarn workspace @things-factory/operato-mms run migration
+$ DEBUG=things-factory:* yarn workspace @things-factory/operato-mms run serve:dev
+```
+
+```
+# after a new module package(ie. @things-factory/newbee) added
+$ yarn install # make newbee package join
+$ yarn workspace @things-factory/newbee build
+$ DEBUG=things-factory:* yarn workspace @things-factory/operato-mms run serve:dev
+```
+
+```
+# after a dependent package(ie. @things-factory/dependa) modified
+$ yarn workspace @things-factory/dependa build
+$ DEBUG=things-factory:* yarn workspace @things-factory/operato-mms run serve:dev
+```
+
+```
+# run application (ie. @things-factory/operato-mms) in production mode
+$ yarn workspace @things-factory/dependa build
+$ yarn workspace @things-factory/dependa build:client
+$ yarn workspace @things-factory/operato-mms run serve
+
+# The way to use the config file is the same as before.
+# Don't forget to give a config file to make the app run.
+```
+
+```
+# generate new application (ie. @things-factory/operato-xyz)
+$ yarn generate app
+  ? What should this application's name be? Ex. operato-abc > # type "operato-xyz"
+
+# generate new module (ie. @things-factory/notification)
+$ yarn generate module
+  ? What should this module's name be? Ex. menu > # type "notification"
+
+# generate new entity in a module (ie. "sms" entity in @things-factory/notification module)
+$ yarn generate entity
+  ? What is target package's name? Ex. biz-base, operato-mms > # type "notification"
+  ? What should this entitie's name be? Ex. company, company-ext > # type "sms"
+
+# generate new page in a module (ie. "sms-view" page in @things-factory/notification module)
+$ yarn generate page
+  ? What is target package's name? Ex. biz-base, operato-mms > # type "notification"
+  ? What should this pages's name be? Ex. abc-viewer > # type "sms-view"
+
+# generate new scene-module from scratch (ie. @things-factory/scene-random)
+$ yarn generate app
+  ? What should this module's name be? Ex. random > # type "scene-random"
+
+# generate new scene-component in a module (ie. "button" component in @things-factory/scene-switch module)
+$ yarn generate component
+  ? What is target package's name? Ex. switch > # type "switch"
+  ? What should this component's name be? Ex. button > # type "button"
+
+# generate new container component in a module (ie. "button" container component in @things-factory/scene-switch module)
+$ yarn generate container
+  ? What is target package's name? Ex. switch > # type "switch"
+  ? What should this component's name be? Ex. button > # type "button"
+
+# generate new html base scene component in a module (ie. "button" html-component in @things-factory/scene-switch module)
+$ yarn generate html-component
+  ? What is target package's name? Ex. switch > # type "switch"
+  ? What should this component's name be? Ex. button > # type "button"
+
+# generate new data source scene component in a module (ie. "button" component in @things-factory/scene-switch module)
+$ yarn generate data-source
+  ? What is target package's name? Ex. switch > # type "switch"
+  ? What should this component's name be? Ex. button > # type "button"
+
+# generate new data transform scene component in a module (ie. "button" component in @things-factory/scene-switch module)
+$ yarn generate data-transform
+  ? What is target package's name? Ex. switch > # type "switch"
+  ? What should this component's name be? Ex. button > # type "button"
+```
+
+## References
+
+- https://github.com/material-components/material-components-web-components

package/dist-client/helps/about/things-factory.ko.md

@@ -0,0 +1,258 @@
+# about things factory
+
+Things-Factory는 데스크톱 및 모바일 그리고 엣지 디바이스 환경에서 구동되는 웹기반 어플리케이션을 개발하기위한 프레임워크입니다.
+
+Things-Factory 프레임워크는 수많은 NPM 패키지들로 구성된 모노리포 개발환경을 제공합니다.
+이 패키지들은 잘 조합되어 고성능의 자바스크립트 앱을 개발하는데 있어서 최신의 개발 및 테스트 환경을 제공합니다.
+이 패키지들은 자바스크립트 앱을 개발하기위한 최적의 계층적 구조를 구성하도록 개발되었습니다.
+Typescript를 포함하여, 서버사이들의 Koa, 웹컴포넌트 UI를 위한 LitElement, 클라이언트 서버간의 Graphql 통신을 위한 Apollo 그리고 테스트를 위한 Jest 등이 적용되었습니다. 이들을 잘 연결하고 조립하여 최고의 어플리케이션을 만들어보세요.
+
+- [Contents for modules](./modules.md)
+- [Contents for components](./components.md)
+- [Concepts for framework](./framework.md)
+
+## features
+
+- It is based on module structure.
+  - You can configure related feature sets for each module.
+  - It is removable by module.
+  - You can define dependencies between modules. Apply nodejs module dependency structure.
+  - [Things Factory Modules](./modules.md)
+  - [What modules does this application consist of ? (click here with holding ALT key.)](/dependencies)
+- Responsible Web App
+  - by Service Worker, Webpush notification, Manifest
+  - application layout for mobile
+- Help
+  - markdown based online help
+- Support Theme
+- Monorepo managed by lerna and yarn
+  - [things-factory github repository](https://github.com/hatiolab/things-factory)
+- Powerful Graphic UI design & viewing tools (board modules)
+- Redux pattern
+- Use i18next for internationalization
+- Simple datagrid
+  - responsible design
+- Packaging function uses webpack
+- The code set is based on es6,7,8, and transpiling with babel
+  - class-properties
+  - decorators
+  - object-rest-spread
+- Using Web Component-based DomElement - Defining custom element with LitElement
+- It is activated by linking with URL path and history in Single Page Application.
+- Each page is loaded at the time of initial activation. (lazy loading)
+- Zero Configuration function. It uses SSDP (Service Discovery Protocol) to automatically find services to be connected automatically and provide related functions. For example, it attempts to connect automatically by finding a server to connect to.
+- JWT based authentication (requires improvement to be supported by the server framework)
+- Oauth2 based extern interface
+  - as a Oauth2 Server
+  - as a Oauth2 Client
+- Free branding
+- Deploy
+  - [docker](http://docker.com) ready
+  - [kubernetes](http://kubernetes.io) ready
+
+## structural conventions
+
+- Redux
+  - The way to manage the overall state of an Application is using Redux pattern.
+  - The application, or base modules, can prepare points in the store that can be extended by a sub-module and provide an action.
+  - The sub-modules connect to the extension structure of the application or parent module using the action defined in the parent (base) module.
+- Page, Layout and Component
+  - Pages are activated by associating with the URL. (route)
+  - Layouts provide a framework for the layout and structure of the entire application UI elements.
+  - The components provide independent (atomic) functionality.
+    - The component excludes dependencies on the application in order to maintain implementation independence.
+      - Style maintains its independence by using css variables.
+      - Multilinguals maintain independence by using ox-i18n components. (Only have dependencies on ox-i18n.)
+      - The component does not have a premise for the layout (display, position) of the host (container) to which it will be used.
+  - page, layouts are connected to redux.
+  - Components do not connect to redux, but they work with pages through properties.
+- Base Module and extension (common) Modules (ex. provider, ui)
+  - The Base Module provides an abstract definition of special functions.
+  - The Base Module is said to provide functional services to the extension module.
+  - The extension module can add the base module as a dependent module and directly use the functions defined in the base module.
+  - Another way the extension module extends the Base Module is by using the reducer and action added to the store.
+  - The Base Module is a base module that reads a group of modules. For example, board-base module is a base module for all board functions. In addition, label-base module defines and implements functions related to the label, including barcode label pop-up, barcode label scanning, barcode label rendering and printing.
+  - The naming convention of base module for xxx module is 'xxx-base'.
+- Provider Module
+  - Sub-module that fills the data of Base module
+  - It mainly serves to fill the data defined in Base module from the external server.
+  - The naming convention for Provider module of xxx module is 'xxx-provider'.
+  - If it is necessary to be distinguished by the way data is provided, the naming convention for Provider module of xxx module using yyy method can be defined as 'xxx-provider-yyy'.
+- UI Module
+  - Sub-module responsible for the screen configuration related to Base module
+  - The naming convention for UI module of xxx module is 'xxx-ui'.
+  - If it is necessary to be distinguished by UI configuration method, the naming convention for UI module of xxx module using yyy method may be 'xxx-ui-yyy'.
+- Shell, Module and Application
+  - Shell provides all the structures that enable the module structure in the development and execution stages.
+    - redux, assets, routing
+    - build module, build application
+  - Module is only responsible for implementing its own purpose in the Shell base.
+  - Application is the final product that consists of the modules necessary for the purpose of Shell and the user.
+    - Configurations by Application
+      - Manifest file (brand-related - application name, logo image)
+      - Other brand related - homepage link, banner logo
+      - Style : Representative color table, other css variables
+      - Server connection IP
+      - Other source/resource override
+
+## Other coding conventions
+
+- Source file length recommended
+  - Each source file implements one of the most important purposes. (Be responsible for simple purposes rather than multiple purposes.)
+  - If there is no specific reason for each source file, it is recommended not to exceed 200 lines.
+- Naming
+
+  - class
+    - Class name : starts with uppercase, camel-case
+    - private property, method : starts with \_(underscore), camel-case
+    - public property, method : starts with lowercase, camel-case
+    - class property, method : starts with lowercase, camel-case
+    - Event handler : starts with on + EventName, camel-case
+
+- Localization
+  - Don’t capitalize explicitly in locale file
+
+```
+"field.system brief": "System Brief" (x)
+"field.system brief": "system brief" (o)
+```
+
+You can set it to style where you need it.
+
+```
+text-transform: capitalize;
+text-transform: uppercase;
+```
+
+- If possible, use ‘ms.json’ rather than ‘ms-My.json’. In particular, use ‘ms-My’ only if it is a Malay language that is used differently only in Malaysia.
+
+## authentication
+
+### things-factory/shell
+
+- Control the authentication process through auth base.
+  - Set authentication through auth base.
+- Provide auth action.
+  - You can change store through authentication related action.
+- Provide auth reducer.
+- That is, it sets through auth base and provides auth-related extension point.
+- In particular, auth base function is provided directly in things-factory shell.
+
+### things-factory/auth-ui
+
+- Provide the client side authentication process based on JSON webtoken.
+
+## prerequisites
+
+- Install Windows Subsystem for Linux on Windows (Windows)
+  - Install WSL using Ubuntu following https://docs.microsoft.com/en-gb/windows/wsl/install-win10
+- VS Code Extensions
+  - Prettier - Code formatter
+  - es6-string-css
+  - lit-html
+- VS Code Configuration
+  - Format on save: true
+- nodejs (v8.0.0 and above)
+- yarn
+- Chrome Browser Extension
+  - https://github.com/zalmoxisus/redux-devtools-extension
+- Node-gyp (For Ubuntu)
+  - npm install -g node-gyp
+- Python2 (For Ubuntu)
+  - sudo apt-get install python
+  - npm install --python=python2.7
+  - npm config set python python2.7
+- mdns (For Ubuntu)
+  - sudo apt-get install build-essential
+  - sudo apt-get install libavahi-compat-libdnssd-dev
+- node-printer (For Ubuntu)
+  - sudo apt-get install libcups2-dev
+
+## Usages
+
+The things-factory repo is managed as a monorepo that is composed of hundreds of npm packages.
+Each package has its own `README.md` and documentation describing usage.
+
+```
+# very first time
+$ yarn install
+$ yarn build # build all packages
+$ DEBUG=things-factory:*,typeorm:* yarn workspace @things-factory/operato-mms run migration
+$ DEBUG=things-factory:* yarn workspace @things-factory/operato-mms run serve:dev
+```
+
+```
+# after a new module package(ie. @things-factory/newbee) added
+$ yarn install # make newbee package join
+$ yarn workspace @things-factory/newbee build
+$ DEBUG=things-factory:* yarn workspace @things-factory/operato-mms run serve:dev
+```
+
+```
+# after a dependent package(ie. @things-factory/dependa) modified
+$ yarn workspace @things-factory/dependa build
+$ DEBUG=things-factory:* yarn workspace @things-factory/operato-mms run serve:dev
+```
+
+```
+# run application (ie. @things-factory/operato-mms) in production mode
+$ yarn workspace @things-factory/dependa build
+$ yarn workspace @things-factory/dependa build:client
+$ yarn workspace @things-factory/operato-mms run serve
+
+# The way to use the config file is the same as before.
+# Don't forget to give a config file to make the app run.
+```
+
+```
+# generate new application (ie. @things-factory/operato-xyz)
+$ yarn generate app
+  ? What should this application's name be? Ex. operato-abc > # type "operato-xyz"
+
+# generate new module (ie. @things-factory/notification)
+$ yarn generate module
+  ? What should this module's name be? Ex. menu > # type "notification"
+
+# generate new entity in a module (ie. "sms" entity in @things-factory/notification module)
+$ yarn generate entity
+  ? What is target package's name? Ex. biz-base, operato-mms > # type "notification"
+  ? What should this entitie's name be? Ex. company, company-ext > # type "sms"
+
+# generate new page in a module (ie. "sms-view" page in @things-factory/notification module)
+$ yarn generate page
+  ? What is target package's name? Ex. biz-base, operato-mms > # type "notification"
+  ? What should this pages's name be? Ex. abc-viewer > # type "sms-view"
+
+# generate new scene-module from scratch (ie. @things-factory/scene-random)
+$ yarn generate app
+  ? What should this module's name be? Ex. random > # type "scene-random"
+
+# generate new scene-component in a module (ie. "button" component in @things-factory/scene-switch module)
+$ yarn generate component
+  ? What is target package's name? Ex. switch > # type "switch"
+  ? What should this component's name be? Ex. button > # type "button"
+
+# generate new container component in a module (ie. "button" container component in @things-factory/scene-switch module)
+$ yarn generate container
+  ? What is target package's name? Ex. switch > # type "switch"
+  ? What should this component's name be? Ex. button > # type "button"
+
+# generate new html base scene component in a module (ie. "button" html-component in @things-factory/scene-switch module)
+$ yarn generate html-component
+  ? What is target package's name? Ex. switch > # type "switch"
+  ? What should this component's name be? Ex. button > # type "button"
+
+# generate new data source scene component in a module (ie. "button" component in @things-factory/scene-switch module)
+$ yarn generate data-source
+  ? What is target package's name? Ex. switch > # type "switch"
+  ? What should this component's name be? Ex. button > # type "button"
+
+# generate new data transform scene component in a module (ie. "button" component in @things-factory/scene-switch module)
+$ yarn generate data-transform
+  ? What is target package's name? Ex. switch > # type "switch"
+  ? What should this component's name be? Ex. button > # type "button"
+```
+
+## References
+
+- https://github.com/material-components/material-components-web-components