すべての機会にダッシュボードをガッシュする方法は？

ほとんどすべての人の仕事には、すべてが依存する数字が確かにあります。 Webサイトのトラフィック、応答時間、またはコミット数-何でも！ そして、これらの数値を最も目に見える場所に配置すると、すぐに意思決定を行うための優れた方法、または動機付けのための視覚的なツールになります。 そして、これを行うための最良の方法は、あなた自身の降下ボード、オフィスの目立つ場所に掛けることができる情報ボードを持つことです。

ダッシュボードが必要な理由

Google翻訳によると、ダッシュボードはダッシュボードです。 実際、この記事で説明するダッシュボードでは、飛行機の計器盤のように、さまざまなパラメーターの変化をすばやく監視できます。 飛行機の代わりに条件付きで起動し、高度、ロール、および温度の代わりに-オンラインの訪問者の数、サービスのさまざまなコンポーネントのステータス、サーバーの負荷。



本質的に、ダッシュボードは、リアルタイムデータが美しく明確な形式で、たとえばグラフ、数字、またはチャートの形式で表示される画面です。 このような画面は、多くのクールな企業のオフィスの壁にかかっています。たとえば、ユーザーが現在入力する検索クエリは、Yandexオフィスの画面に表示されます。 多くの技術系スタートアップでは、技術者向けの画面にあらゆる種類の監視からのデータが表示されます。 私も似たようなことをしたかったので、数日間コーディングの準備をしていましたが、私がすでにやったことはすべて分かっていました。

ダッシュボードを作成する方法は？

Shopifyの腸で開発された無料のダッシュフレームワークを使用してダッシュボードを構築します。 組み込みアーキテクチャは、ダッシュボードが以下で構成されることを意味します。

• 「手」、つまりグラバーから、一定の間隔で必要なデータを収集します。
• 「Brain」、つまり、このデータをリアルタイムで処理するパーサー。
• 「マズル」-これらのデータが美しく明確に表示されるフロントエンド。

ほとんどすべてのデータを収集して処理でき、どこからでもそれを取得することに慣れています。たとえば、サーバーから、負荷、ping時間、サービスの登録数を削除できます。 ソーシャルネットワークから-トピックに関する最新の投稿、Twitterフォロワーの数、最も人気のあるredditトピック。 他のサービス-天気、世界のニュース、githubのプルリクエストから。 一般的に、必要なものはほぼすべて収集して表示できます。 そして今、私はその方法を正確に教えます。 手を見てください-動きを繰り返してください。

ヘロカによるとみんな

Herokuは、Dashingを無料でホストするための理想的なプラットフォームです。



これを行うには、 Herokuメインページで[サインアップ]ボタンをクリックし、表示されるページにメールを入力し、受信したレターで確認リンクをクリックし、パスワードを作成して[保存]をクリックします。 できた！ クラウドには、エレガントなWebアプリケーションをすばやく作成できる、小さくても誇らしげなコーナーがあります。



私たちが見つけたページでは、クラウドを操作するためのユーティリティであるHeroku Toolbeltのインストールを提案しています。 これを否定しません。 私、Ubuntu、Debianのように、コンソールに気軽に書いてください：

wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

WindowsまたはOS Xの場合、それらのサイトからexeまたはpkgをダウンロードしてインストールします。



第二に、突然物事を台無しにした場合にすべてをすぐに元の場所に戻し、誰かがすべてを台無しにした場合に誰が帽子をかぶるかを知るために、バージョン管理システムが必要になります。 Herokuのクリエイターは、これらの目的のためにGitを推奨しています。 拒否しないでください-Gitは本当に良いです。 インストールは簡単です。

 sudo apt-get install git
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

別のオペレーティングシステムの場合、Gitは公式サイトから簡単にダウンロードでき、インストールも簡単です。 これで、すべてを開始できます。

ダッシュをインストールする

開始するには、Herokuにログインします。 これを行うには、コマンドラインを開き、次のように記述します。

 heroku login
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

登録時に指定したメールアドレスとパスワードをここに入力してください。 将来のリポジトリ用のフォルダーを作成し、そこに移動します。

 mkdir dashing cd dashing
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Dashing Gitリポジトリのクローンを作成します。

 git clone https://github.com/Shopify/dashing.git
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、アプリケーションをインストールし、新しいGitリポジトリを初期化して、クローンしたばかりのすべてをコミットする必要があります。

 bundle install git init git add . git commit -m "My beautiful dashboard"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Herokuでアプリケーションを作成する

 heroku apps:create xakepdashboard
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、 xakepdashboard.herokuapp.com



で入手できますが、何もありません。 しかし、Herokuユーティリティは別のheroku



リポジトリheroku



作成しました。 そこでアプリケーションをコピーします。

 git push heroku master
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Gemfile.lockファイルが存在しているにもかかわらずコンソールが存在しないと誓う場合は、.gitignoreファイルを開きます

 gedit .gitignore
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてそこから行./Gemfile.lock



を削除します



その後、プッシュは成功し、その後インストールが自動的に開始されます。 ああ、この美しい時代のスマートカー！ インストールの進行中に、コーヒーを飲んで同僚に郵送することができます。これにより、20分以内に、信じられないほどの美しさと明瞭さを備えた企業データ視覚化サービスの準備が整います。

最初のダッシュボード

DashingはRubyで記述されているため、最初のダッシュボードを簡単に作成できます。 適切なgemをインストールします（Ruby 1.9+がシステムにインストールされていることを確認してください）：

 $ gem install dashing
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、新しいプロジェクトを生成します。

 $ dashing new sweet_dashboard_project
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

sweet_dashboard_projectディレクトリに移動し、gems gang：

 $ bundle
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これでサーバーを起動できます：

 $ dashing start
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが順調に進んだ場合、3030番目のポートでWebサーバーが起動し（ダッシュはSinatraに基づいています）、ブラウザーでlocalhost：3030を安全に開くことができます。



ダッシュボードには、デモウィジェットと必要なファイルが付属しています。これらは、ダッシュボードを作成するための出発点として最適です。 画面には、任意に移動および交換できるウィジェットがいくつかあります。 開発者は、このようなセットを特別に選択して、さまざまなデータ視覚化方法を示します：ウィジェットの1つは特定のパラメーター（プロセッサー負荷など）のグラフを表示し、2つ目は価値と証券の変化を視覚化するのにより適し、3つ目はデジタル値を視覚化しますが、円形インジケーターを使用します、速度計と同様に、4番目には特定の統計情報を含むプレートが表示され、もう1つにはテキストが表示され、カウントダウンが進行中です。







ところで、ダッシュボードに表示されるデータに影響を与える方法の例を次に示します。 コンソールで入力してみてください。

 curl -d '{ "auth<em>token": "YOUR</em>AUTH_TOKEN", "text": "     " }' \http://127.0.0.1:3030/widgets/welcome
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ウィジェットの1つでは、テキストが変更されます。 これについてさらに説明します。

ダッシュ構造

最初に、アプリケーションの単純な構造を理解する必要があります。

• アセット-このフォルダーには、画像、フォント、js / coffeescriptライブラリが含まれます。
• ダッシュボード-各ダッシュボードには、ウィジェットの場所とパラメーターを記述する独自のerbファイルがあります。
• ジョブ-データを収集するためのスクリプト（たとえば、外部サービスのAPIを呼び出す）。
• Lib-必要なオプションのRubyヘルパーファイル。
• パブリック-静的なダッシュボードファイル（ファビコンまたはカスタム404ページがここにあります）。
• ウィジェット-独自のウィジェット用のすべてのHTML / CSS /コーヒーコード。

以下は、2つのウィジェットで構成されるシンプルなダッシュボードの例です。

 <% content_for(:title) { "Xakep dashboard" } %> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div data-id="karma" data-view="Number" data-title="Karma" style="background-color:#96bf48;"></div> </li> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div data-id="valuation" data-view="Number" data-title="Current Valuation" data-prefix="$"></div> </li> </ul> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

各ウィジェットには2つの重要なパラメーターがあります：data-id（これは後でファイルを更新するときに使用されるウィジェット識別子です）とdata-view（ウィジェットのタイプを示し、この場合は両方のウィジェットが数値です）。 データ行（行）およびデータ列（列）パラメーターで記述されたグリッドをコンストラクターとして使用して、必要なウィジェットからダッシュボードを収集します（デフォルトでは、Dashinはクロック、コメント、グラフ、iframe、画像、リスト、メーター、数値、テキストを実装します）







誰もあなたのウィジェットを書くことを気にしません（深くは行かないで、すべてはドキュメントにあります）が、最初は間違いなく十分な標準のものがあります。 しかし、対処することが重要なのは、データを更新することです。これはさらに視覚化されます。 結局のところ、これは最も重要なことです。

データを更新する方法

ウィジェットへのデータの転送は非常に簡単です。 使用するウィジェットを（ウィジェットIDを使用して）指定し、JSONの形式でデータを渡すだけです。 これを行うには2つの方法があります。

スケジューラータスク（ジョブ）

ダッシュには、ジョブフォルダーにあるジョブスクリプトを解析し、指定されたアクションを目的の頻度で実行する特別なスケジューラーが組み込まれています。 ジョブファイルを作成するには、生成ジョブsample_jobを使用します。

 SCHEDULER.every '1m', :first_in => 0 do |job| send_event('karma', { current: rand(1000) }) end
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このタスクは毎分実行され、データIDがkarmaに等しいすべてのウィジェットにランダムな値を送信します。 したがって、send_eventメソッド（widget_id、json_formatted_data）を使用して値を転送します。



タスクは、データベースからデータを収集したり、サードパーティAPIを呼び出したりする必要がある場合に非常に役立ちます（DashingはTwitterからのデータ集約を実装します）。

API

別の方法は、HTTPを介してデータを直接更新することです。

 curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "current": 100 }' http://localhost:3030/widgets/karma
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

セキュリティのために、トークンが使用されます（config.ruに記述されています）。 ダッシュボードのテキストフィールドの値を更新したときに、Dashingがデフォルトで作成するこのようなリクエストの例をすでに見ました。

私のオフィスのダッシュボード

Dashinを中心に大きなコミュニティが形成され始めており、特別なページgithub.com/Shopify/dashing/wiki/Additional-Widgetsとdashing.challengepost.comには多くの既製のウィジェットが収集されています。



オフィスのダッシュボードをすぐに収集できました。 私は何をしたいのですか？ リリースまでカウントダウンする必要があります（または、アジャイルが使用されている場合は、反復の最後まで）。 また、現在サイトにアクセスしている訪問者の数を監視する必要もあります（Google Analyticsからデータを取得します）。 これに加えて、サーバーの負荷を監視して、訪問者の波やDDoS攻撃によってサイトが突然崩壊するのを防ぐために、何をどこで最適化するのか、どのような対策をとるのかを時間内に把握しておくとよいでしょう。 そして最後に、ソーシャルネットワーク上で私たちについて書かれた内容に従います。Twitterからの最新メッセージをサービス名とともに表示します。



最後に、次の一連のウィジェットをまとめました。

1. カウントダウンカウントダウンウィジェット 。
2. 訪問者の監視。 Google Analyticsウィジェット。
3. サーバーの負荷。 Load Averagesウィジェット。
4. 信号の形でのプロジェクトのステータス。 プロジェクトのGithubステータスウィジェットを書き換えます 。
5. Twitter Twitter検索ウィジェット。

テレビに表示する方法は？

もちろん、ダッシュボードはコンピューター上でのみ使用できます（スタートページとしてインストールできます）が、それでも伝統的に、このすべての美しさの画像がテレビに表示されます。 最新のテレビにはブラウザもありますが、私はそのブラウザを持っていないことを正直に認めているので、この設定を試したことはありません。



私のオプションは、出力にRaspberry Piを使用することです。 理想的には、テレビのUSBポート（現在ほとんどどこにでもあります）を介して給電され、HDMIで接続されています。 唯一の問題はネットワーク接続である可能性があります。余分な配線が必要ない場合は、USB Wi-Fiモジュールを使用できます（手順はこちら ）。 残念ながら、Dashingはリソースに非常に貪欲であることが判明したため、Chromium- HexxehのChromeの特別なアセンブリをインストールして、画像のリフレッシュレートを制限する必要がありました。







まとめます。 人件費-1日。 プログラミングはほとんど不要です。 必要な鉄-Raspberri Pi、ワンピース。 その結果、オフィスで最もクールなダッシュボードが作成され、誰もが改善したいと考えています。 美人！

ダッシュは行かなかった。 他に何？

Dashingフレームワークが収束しなかったことは明らかです。 GitHubをすばやく検索すると、使用できる興味深い開発がいくつか得られました。

• チームダッシュボード 。 ダッシュボードを作成するための優れたフレームワークは、Dashingの機能について議論することができます。 チームダッシュボードは、主に技術チームを対象としています。 したがって、監視システムErrbit、New Relic、Pingdom、CI（Continous Integration）Jenkins、Travis CIシステム用の既製のモジュールがすでに用意されています。 グラフの形式でデータを視覚化するモジュール（GraphiteとGangliaを使用）、デジタルデータとその変化を表示するウィジェットなどがあります。
• グラファナ 統計機能を備えた豊富な機能パネル（およびグラフエディター）。 グラファイトの美しい代替品として提供されます。
• Linux Dash PHPで記述されたLinuxマシンのリモート監視用の便利でシンプルなWebダッシュボード。 稼働時間、RAMロード、空きディスク容量、接続ユーザー、インストール済みソフトウェア、実行中のプロセスなどが表示されます。
• レポーター RunKeeperのスポーツアクティビティからGitHubでのコミット数まで、毎日のアクティビティに関するさまざまなデータを視覚化するパーソナルダッシュボード。
• パーソナルダッシュボードとAPI 。 実装が非常に簡単な別のパーソナルダッシュボード。
• sDashboard ダッシュボードを作成するためのJSフレームワークで記述されています。 実際、これはjQueryのプラグインであり、さまざまなデータとイベントを視覚化できます。
• ダシュク 。 Node.jsでアジアの開発者が作成した完全なダッシュボードフレームワーク。

2014年4月からHacker誌に最初に掲載されました。



Issuu.comに公開する



ハッカーを購読する

• 紙版
• iOS / iPadのハッカー
• Androidのハッカー