@hatiolab/things-shell

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


License
NTP
Install
npm install @hatiolab/things-shell@0.6.150

Documentation

things-shell

npm version

[ 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 ์ œ๊ฑฐ.

lit-html template (๋ฏธ์ง„ํ–‰ - https://github.com/nhnent/fe.javascript/wiki/December-11---December-15,-2017)

  • ๋‚ด๋ถ€์—์„œ 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๋ฅผ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•จ์ž„