kitto
v0.4.0
Kitto는 Elixir/React로 작성된 대시보드 생성을 돕는 프레임워크입니다.
데모 대시보드의 소스는 kittoframework/demo에서 찾을 수 있습니다.
자신만의 만들기를 시작하려면 아래를 읽어보세요.
최신 아카이브 설치
mix archive.install https://github.com/kittoframework/archives/raw/master/kitto_new-0.9.2.ezElixir : >= 1.3Erlang/OTP : >= 19Node : 14.15.1npm : 6.14.9위 버전 이외의 버전에서는 실수로 작동할 수 있지만 철저한 테스트를 거치지는 않았습니다(정의된 빌드 매트릭스는 .travis.yml 참조).
공식 Docker 이미지를 사용할 수도 있습니다.
특정 플랫폼에 대한 지원을 요청하려면 문제를 열어주세요.
mix kitto.new < project_name > 종속성 설치
mix deps.get && npm installKitto 서버 시작(자산 변경 사항도 감시)
mix kitto.serverhttp://localhost:4000/dashboards/sample에서 샘플 대시보드를 사용해 보세요.
구성 옵션 및 문제 해결에 대해서는 위키를 참조하세요.
Kitto는 여러 대시보드를 제공할 수 있습니다. 각각은 /dashboards/<dashboard_name> 형식의 경로에서 제공됩니다.
대시보드는 React 위젯을 포함하는 Gridster 그리드로 구성됩니다.
dashboards/sample 아래에서 샘플 대시보드를 찾을 수 있습니다.
아래 스니펫은 대시보드에 간단한 Text 위젯을 배치합니다.
< li data-row =" 1 " data-col =" 1 " data-sizex =" 2 " data-sizey =" 1 " >
< div class =" widget-welcome "
data-widget =" Text "
data-source =" text "
data-title =" Hello "
data-text =" This is your shiny new dashboard. "
data-moreinfo =" Protip: You can drag the widgets around! " > </ div >
</ li >여기서 가장 중요한 데이터 속성은 다음과 같습니다.
data-widget 사용할 위젯을 선택합니다. 참조: 위젯data-source 위젯을 채울 데이터 소스를 선택합니다. 참조: 채용정보다른 데이터 속성은 React 위젯에 props로 전달되는 옵션입니다.
mix kitto.new <project_name> 사용하여 새 대시보드를 생성하면 jobs/ 디렉터리에 몇 가지 샘플 작업이 생성됩니다.
작업 파일은 다음과 같이 구성됩니다.
# File jobs/random.exs
use Kitto.Job.DSL
job :random , every: :second do
broadcast! :random , % { value: :rand . uniform * 100 |> Float . round }
end 위의 내용은 매초 random 이름의 서버 전송 이벤트를 내보내는 감독 프로세스를 생성합니다.
작업은 서버에서 명령을 실행할 수도 있습니다. 명령을 사용한 데이터 브로드캐스트는 {exit_code: integer, stdout: String.t} 형식입니다. 예를 들어 다음 작업은 curl 문의 결과로 kitto_last_commit 이벤트를 브로드캐스트합니다.
job :kitto_last_commit ,
every: { 5 , :minutes } ,
command: "curl https://api.github.com/repos/kittoframework/kitto/commits ? page = 1 & per_page = 1" first_at 옵션을 사용하여 작업이 나중에 시작되도록 설정할 수 있습니다.
# Delay the first run by 2 minutes
job :random , every: :second , first_at: { 2 , :minutes } do
broadcast! :random , % { value: :rand . uniform * 100 |> Float . round }
end 위젯은 widgets/ 에 존재하며 Webpack을 사용하여 컴파일되고 대시보드에 자동으로 로드됩니다. 자산은 개발 변경 시 재구축되지만 프로덕션을 위해 컴파일해야 합니다. 빌드 옵션은 webpack.config.js 참조하세요.
예제 위젯( widgets/text/text.js )
import React from 'react' ;
import Widget from '../../assets/javascripts/widget' ;
import './text.scss' ;
Widget . mount ( class Text extends Widget {
render ( ) {
return (
< div className = { this . props . className } >
< h1 className = "title" > { this . props . title } < / h1 >
< h3 > { this . state . text || this . props . text } < / h3 >
< p className = "more-info" > { this . props . moreinfo } < / p >
< / div >
) ;
}
} ) ; 각 위젯은 data-source 속성을 사용하여 지정된 한 소스의 데이터로 업데이트됩니다.
증류소 | 도커 | 헤로쿠 | 체계화된
프로젝트 컴파일
MIX_ENV=prod mix compile프로덕션용 자산 컴파일
npm run build서버 시작
MIX_ENV=prod mix kitto.server다음을 사용하여 새 대시보드를 스캐폴딩합니다.
mix kitto.new Dockerfile 도 얻을 수 있습니다.
배포할 준비가 된 코드를 포함하는 이미지를 빌드합니다.
docker build . -t my-awesome-dashboard이미지 컨테이너 생성
docker run -i -p 127.0.0.1:4000:4000 -t my-awesome-dashboard위키의 자세한 지침을 읽어보세요.
위키의 업그레이드 가이드를 읽어보세요.
mix test mix credo질문이 있나요?
Shopify/Dashing에서 많은 영감을 받았습니다. ❤️
Erlang / Elixir로 가는 길은 Kitto에서 시작됩니다.
저작권 (c) 2017 Dimitris Zorbas, MIT 라이센스. 자세한 내용은 LICENSE.txt를 참조하세요.
Vangelis Tzortzis의 로고(github / 사이트).
