Haskell-servant,Elm,Material UIの構成でダッシュボードを作る。

今はこんな感じのダッシュボード(開発中)

ログイン不要なAPIは発行できるので、雰囲気だけでもどうぞ。

個人用なので”Sign in with Slack”をクリックしてログインしてもサーバーのオーナー以外は名前が出るだけで何が出来るわけでも無い。

(もちろん自分自身は自分の情報を見られる。個人用ですもんね)

このアプリケーションは

  • APIサーバーがHaskell-servant
  • クライアントがElm

のサーバー/クライアント構成になっています。

Sign in with Slack

個人情報を世界に公開するわけにいかないので、認証機能を付けないといけない。
ちょうどSlackに目的にぴったりのサービスがありました。

“Sign in with Slack”(スラックでサインイン?かな)

Let users sign in to your product using Slack.
It’s fast, simple, and secure

Sign in with Slack extends our existing OAuth 2.0 application approval flow to simplify logging in users to your website, service, or application.

  • It’s fast. Log members in without repetitive ceremony.
  • It’s simple. Implementation is swift, and it’s easy for users to understand.
  • It’s secure. Slack interfaces with SSO providers, handles two-factor authentication, and confirms email addresses, so you have less to worry about.
    Use your favorite library or build it yourself; logging users in is just a few simple HTTP requests away.

Sign in with Slack

ということで認証機能は”Sign in with Slack”にたよることにした。

NginxによるSSL/TLSリバースプロキシ

このアプリケーションのサービス窓口は”http://localhost:8739″なんですが、
“Sign in with Slack”のネゴシエーションフローはhttpsを前提にした物なので、ファイアウォールを開けるのはやめておく。

NginxがフルSSL/TLSのWordpress(つまりこのサイト)をhttpsでサービスしているので、https://tractor.ak1211.com/をhttp://localhost:8739/にリバースプロキシすることにした。

ローソク足チャート

ローソク足チャートを出せるようにした。

CSVアップロード

CSVファイルをデーターベースにアップロードできるようにした。

ビルド方法

サーバー側Haskellプログラム
~/tractor/ > stack install
Copying from tractor/.stack-work/install/x86_64-linux/lts-11.7/8.2.2/bin/tractor to .local/bin/tractor

Copied executables to .local/bin:
- tractor

初回実行時は恐ろしく時間が掛かるのでそのつもりでいること。(GHCのダウンロードから始まるから。)

Haskellプログラムからservant-elmでElm側のAPI型を自動生成すると同時にservant-docでAPIドキュメントを自動生成する
~/tractor/ > stack test --skip tractor-test
tractor-0.4.5: unregistering (dependencies changed)
tractor-0.4.5: configure (lib + exe + test)
Configuring tractor-0.4.5...
tractor-0.4.5: build (lib + exe + test)
Preprocessing library for tractor-0.4.5..
Building library for tractor-0.4.5..
Preprocessing test suite 'code-gen' for tractor-0.4.5..
Building test suite 'code-gen' for tractor-0.4.5..
[1 of 2] Compiling Main             ( code-generator/Main.hs, .stack-work/dist/x86_64-linux/Cabal-2.0.1.0/build/code-gen/code-gen-tmp/Main.o )
[2 of 2] Compiling Paths_tractor    ( .stack-work/dist/x86_64-linux/Cabal-2.0.1.0/build/code-gen/autogen/Paths_tractor.hs, .stack-work/dist/x86_64-linux/Cabal-2.0.1.0/build/code-gen/code-gen-tmp/Paths_tractor.o )
Linking .stack-work/dist/x86_64-linux/Cabal-2.0.1.0/build/code-gen/code-gen ...
Preprocessing executable 'tractor' for tractor-0.4.5..
Building executable 'tractor' for tractor-0.4.5..
tractor-0.4.5: copy/register
Installing library in tractor/.stack-work/install/x86_64-linux/lts-11.7/8.2.2/lib/x86_64-linux-ghc-8.2.2/tractor-0.4.5-LCTypwMspXv7MgRanjzRRT
Installing executable tractor in tractor/.stack-work/install/x86_64-linux/lts-11.7/8.2.2/bin
Registering library for tractor-0.4.5..
tractor-0.4.5: test (suite: code-gen)
             
Progress: 1/2Writing: elm-src/Generated/WebApi.elm
             
tractor-0.4.5: Test suite code-gen passed
Completed 2 action(s).
~/tractor/ > 

skipしているのは本体のテストスイート。初回なら実行してもいいかもね。

Elmをビルド
~/tractor/elm-src/ > make
elm-make --yes Main.elm --warn --output=public/main.js
Success! Compiled 5 modules.                                        
Successfully generated public/main.js
~/tractor/elm-src/ > 

サーバーの起動

~/tractor/ > tractor       
Missing: (--webapi | --standalone | --normal)

Usage: tractor [--conf CONFIG_FILE] (--webapi | --standalone | --normal)
    • APIしかいらないなら –webapi
    • API不要なら–standalone
    • 両方必要なら–normal

を選択して動かしてください。
例えば

~/tractor/ > tractor --webapi

の状態でlocalhost:8739にアクセスすると上のダッシュボードに入れます。

変更

Elm0.18版で採用していたhttps://github.com/debois/elm-mdlがElm0.19では使えなくなったので、https://github.com/surprisetalk/elm-bulmaを採用しました。

Elm0.19版はこれですhttps://github.com/ak1211/tractor/tree/ef33871659281327fd71f4ee8b4f4abb72c2560f/frontend

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください