@hatiolab/things-shell
Release
0.5.31
Things Shell is a user development tool for Things Board platform. # How to install ## Pre-requisites * nodejs - v7.6.0 or greater * yarn - https://yarnpkg.com/ ## Install from github source ``` $ git clone https://github.com/hatiolab/things-shell.git $ c
Homepage
npm
JavaScript
Download
License
NTP
Install
npm install @hatiolab/things-shell@0.5.31
Documentation
things-shell
[ Application ๊ตฌ์กฐ ]
app-layout ์ ์ฉ (deprecated ์ปดํฌ๋ํธ๋ค ์ ๊ฑฐ)
paper-drawer-panel => app-drawer-layout
paper-menu => paper-listbox
iron-flex-layout => display=flex, flex-direction, flex
app-route ์ ์ฉ
redux ํจํด ์ ์ฉ
polymer-redux ์ ์ฉ
src/reducer ํด๋์ ์ปดํฌ๋ํธ๋ค์ ์ฐธ์กฐ
i18n
๋ชจ๋๋ณ i18n ์ ์ ๊ธฐ๋ฅ์ ์ง์ํ๊ธฐ ์ํจ์.
app-localize-behavior ์ ์ฉํจ.
๊ธฐ์กด ๋ฆฌ์์คํ์ผ์ ์ฌํ์ฉํ๊ธฐ ์ํด webpack-json-loader ๋ฅผ ์ ์ฉํจ.
webfont (๋ฏธ์งํ)
์๋ฒ๋ฆฌ์ค ๊ตฌ์ฑ์ ์ํ ๋ฐฉ์ ํ์ํจ.
์นํฐํธ ๊ธฐ๋ฅ์ Model์ ์ถ๊ฐํ๋ ๋ฐฉ์.
things-resource-combo ์ ๊ฑฐ.
๋ด๋ถ์์ HTML ํ
ํ๋ฆฟ์ ๋์ ์ผ๋ก ๋ง๋๋ ๊ฒฝ์ฐ์ ์ ์ฉ.
ํฅํ Polymer 3 ๋ด๋ถ์์ ๊ด๋ฒ์ํ๊ฒ ์ฌ์ฉ๋ ๊ฒ์ผ๋ก ์์๋๋ฏ๋ก, ๋ฏธ๋ฆฌ ์ต์ํด์ง๊ธฐ ์ํจ์.
ํด๋ ๊ตฌ์กฐ
src : ์์คํด๋
libs : import ํ ์ ์๋(๋ชจ๋ํ ์ง์ํ์ง ์๋) javascript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ๋ฐฐ์นํจ (์๋ฅผ ๋ค์ด dataludi๋ ๋ชจ๋์ ์ง์ํ์ง ์์ผ๋ฏ๋ก libs์ ๋ณ๋๋ก ๋ฐฐ์นํ๋ค.)
licenses : ํ์ํ ๋ผ์ด์ ์ค ํ์ผ์ ๋ฐฐ์นํจ
assets : ๊ฐ์ข
์ด๋ฏธ์ง, ์์ด์ฝ, ๊ทธ ๋ฐ์ manifest ๊ด๋ จ ๋ฆฌ์์ค
์์ค(src) ํด๋ ๊ตฌ์กฐ
components : ์ดํ๋ฆฌ์ผ์ด์
์ข
์์ฑ์ด ์๋ ๋
๋ฆฝ ์ปดํฌ๋ํธ๋ค์ ๋ฐฐ์นํจ (Redux Pattern์ ์ฌ์ฉํ์ง ์์์ผ ํจ.)
commons : ์ดํ๋ฆฌ์ผ์ด์
๋ด๋ถ ์ฌ๋ฌ๊ณณ์์ ์ฌํ์ฉ๋๋ ์ปดํฌ๋ํธ๋ค๊ณผ ์ ํธ๋ฆฌํฐ ์ปดํฌ๋ํธ๋ค์ ๋ฐฐ์นํจ
app-shell : ์ดํ๋ฆฌ์ผ์ด์
Shell ์ ๋ฐฐ์นํจ
layouts : ์ต์์ ๋ ์ด์์์์ ๋
๋ฆฝ์ ์ผ๋ก ์ฌ์ฉ๋ ๊ตฌ์ฑ๋ค์ ๋ฐฐ์นํจ (drawer, sidebar ๋ฑ)
pages : ๋ผ์ฐํ
์ ์ฐ๊ฒฐ๋ ํ์ด์ง๋ค์ ๋ฐฐ์นํจ
reducer : Redux ํจํด์ ์ํ Mixin๊ณผ reducer๋ค์ ๋ฐฐ์นํจ
styles : ์ ์ฒด ์ดํ๋ฆฌ์ผ์ด์
์ ๊ณต์ ์คํ์ผ๊ณผ ํ
๋ง ์คํ์ผ์ ๋ฐฐ์นํจ
shared-styles : ์ดํ๋ผ์ผ์ด์
์ข
์์ฑ์ด ์๋ ๋
๋ฆฝ ์ปดํฌ๋ํธ๋ค์ ์ ์ธํ๊ณ , ๋๋ถ๋ถ์ ์ปดํฌ๋ํธ์์ shadow dom ๋ ๋๋ง์ ์ํด include ํจ.
things-shell-theme : custom-style ๋ก ๊ฐ ์ปดํฌ๋ํธ์์ ์ ์ํ ์คํ์ผ ๋ณ์๋ฅผ ์ค์ ํ๋ ํ์ผ์.
[ Polymer 3 ]
bower => npm
npm group ์์ฑ (@hatiolab, @things-scene, ..)
@hatiolab
@hatiolab/things-scene
things-scene-core ๋ถํ์
@things-scene
@things-scene/table
@things-scene/chartjs
@things-scene/form
@things-scene/gauge
@things-scene/mqtt
@things-scene/firebase
@things-scene/stomp
@things-scene/random
@things-scene/restful
@things-scene/google-map
@things-scene/indoor-map
@things-scene/wheel-sorter
...
HTML import => ES6 import
Component Migration
๊ตฌ์กฐ
๊ธฐ์กด things-designer-elements ์ editor ์ปดํฌ๋ํธ๋ค์ ํ๋ก์ ํธ์ components ์์ ๋ด์ฅํจ
things-scene-viewer ๋ ํ๋ก์ ํธ์ components/things-scene-viewer ์ปดํฌ๋ํธ๋ก ๋ด์ฅํจ
paper-color-picker ๋ ํ๋ก์ ํธ์ components/paper-color-picker ์ปดํฌ๋ํธ๋ก ๋ด์ฅํจ
polymer 3๋ฅผ ์ํ ์์
hybrid ๋๋ polymer 2 ๋ชจ๋ธ๋ก ๋ง์ด๊ทธ๋ ์ด์
npm dependency์ import ์ฐ๊ฒฐ ์์
js์ฝ๋ ๋ด๋ก template ํฌํจ์์
- ์ผ๋ถ polymer modulizer ๋ฅผ ํ์ฉํด์ ๋ณํ, ์ผ๋ถ๋ Polymer 2(ES6 ํด๋์ค๋ชจ๋ธ)๋ก ์ ํํจ
behaviors properties => Behaviors Mixin
listner property ๋ง์ด๊ทธ๋ ์ด์
'is' ์ปดํฌ๋ํธ๋ค ๋ง์ด๊ทธ๋ ์ด์
. dom-if, dom-repeat, things-editor-number-input, things-editor-angle-input
content => slot
$$ => root.querySelectorAll
..
์ปดํฌ๋ํธ๋ค
paper-color-picker
polymer 3 ์์
things-editor-color ์์ ํ์ฉํ ๋, paper-color-picker๋ฅผ ๋์ ์ผ๋ก ์์ฑํ๊ณ ์ฌ์ฉํ ์๋ฉธ์ํค๋๋ก ํจ.
paper-tree
paper-fab-speed-dial
things-scene-viewer
things-player
things-editor-xxxx
things-editor-properties์ things-editor-property ์ด๋ฒคํธ ์ฐ๊ฒฐ ๊ด๊ณ ๋จ์ํ ์์
things-editor-script ๋ฅผ ๋์ฒดํ ์ ์๋ things-editor-code ๋ฅผ ์ถ๊ฐ
things-editor-image๋ ์ ๊ฑฐํ๊ณ , ๋จ์ํ text input ์ผ๋ก ๋์ฒดํจ.
[ Webpack ์ ์ฉ ]
[ Serverless - ์๋ฒํ๋ ์์ํฌ ์ข
์์ฑ์ ์ ๊ฑฐํ๊ธฐ ์ํจ์ ]
1. Firebase App ์ ์ฉ - ์งํ๋ณด๋ฅ
polymer-firebase์ polymer 3 ๋ฏธ์ง์์ผ๋ก ์งํ ๋ณด๋ฅ์ค์
2. Github integration ์ ์ฉ - ์งํ์ค
Online ๋ชจ๋ธ ๋ฆฌํ์งํ ๋ฆฌ ์ฉ๋๋ก github ๋ฆฌํ์งํ ๋ฆฌ๋ฅผ ํ์ฉํ๋ ๋ฐฉ์์.
github API๋ฅผ ํ์ฉํ์ฌ ๋ชจ๋ธ์ ๊ด๋ฆฌํ๋ ๊ธฐ๋ฅ์ ๊ตฌํ ์์ ์.
3. Electron ์ ์ฉ - ์งํ์ค
Online ๋ชจ๋ธ ๋ฆฌํ์งํ ๋ฆฌ ์ฉ๋๋ก ๋ก์ปฌํธ์คํธ ํด๋๋ฅผ ํ์ฉํ๋ ๋ฐฉ์์.
4. image embedding model
์๋ฒํ๋ ์์ํฌ์ ์ข
์์ฑ์ ์์ ๊ธฐ ์ํด์, ์ด๋ฏธ์ง ๋ฆฌํ์งํ ๋ฆฌ ๊ธฐ๋ฅ์ ์ ๊ฑฐํจ
๋ชจ๋ธ์ ์ด๋ฏธ์ง ์ฝ์
์ ๋ก์ปฌํธ์คํธ์ ์ด๋ฏธ์ง๋ฅผ ๋๋๊ทธ&๋๋กญ ๊ธฐ๋ฅ์ผ๋ก ๋ฃ๊ฑฐ๋, ์ธ๋ถ์ ๋ฆฌ์์ค URL์ ์
๋ ฅํ๋๋ก ํจ
[ Component Generator ]
์ปดํฌ๋ํธ ๊ฐ๋ฐ ๋ฐ ํ
์คํธ ํ๊ฒฝ์ ๋ง๋ค๊ณ ์ ํจ.
things-shell ์ ํฌํจํ ๊ฐ๋ฐ ํ๊ฒฝ์ผ๋ก ๋ ๊ฒ์.
๋ก์ปฌํธ์คํธ์ ์ฝ๋์ ๋ชจ๋ธ์ ์ฐธ์กฐํ ์ ์๋๋ก ์๋ฒ๋ฆฌ์ค ๊ตฌ์ฑ์ด ํฌํจ๋ ๊ฒ์.
๋งค๋ด์ผ ์๋ํ ์์
์ด ํฌํจ๋ ๊ฒ์.
[ Styling - ์งํ์ค ]
shadow-dom v1์ ๋ง๊ฒ selector ์์
:before => ::before
/deep/ ::shadow ์ ๊ฑฐ => ::slotted(..) ์ ์ฉ
:host.. => :host(..)
display: grid ์ ์ฉ
[ ๊ธฐํ ]
ace-builds => codemirror
ace-builds์ API ๋ณต์ก์ฑ๋๋ฌธ์ ๋์์ผ๋ก codemirror๋ฅผ ์ ์ฉํ์ฌ things-editor-code ๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ ์ถ๊ฐํจ.
์๋ํฐ๋ทฐ๊ฐ inactive ์ํ์์ ์๋ํฐ value๊ฐ ๋ฐ๋๊ณ , ์๋ํฐ๊ฐ active ๋์์ ๋ ๋ฐ๋ value๊ฐ ๋ฐ์๋์ง ์๋ ๋ฌธ์ ๋ ์ฌ์ ํ ํด๊ฒฐ๋์ง ์์.
ํ
์คํธ ๋ฐ์ดํ overflow์ scroll ๊ด๋ จํ ์คํ์ผ๋ง์ ๋ณด์ํ ํ์๊ฐ ์์.
Grid replacement for Table and Chart Data - ๋ฐฉ์ ๊ณ ๋ฏผ์ค
dataludi๋ฅผ ์ ๊ฑฐํ๊ธฐ ์ํจ์