Jiraのシンプルかんばんボード

ここでは、QMLとJavaScriptのみを使用して、Jiraでプロジェクトのかんばんボードを作成する方法を説明します。 微調整を行うと、Jiraの代わりにREST APIで他のトラッカーを使用できます。

背景

少し前、今はほぼ別の人生を歩んでいて、私がプロジェクトマネージャーだったとき、プロジェクト参加者の雇用についての考えを失っていることに気付きました。 誰かが大規模で重要なビジネスに従事している、誰かが緊急のバグを修正している、あるいは誰かが私を失礼しているのに、野郎を蹴っているのかもしれませんが、私はそれについて知りません。 そして、私は時事問題を明確に把握したかったのです。



組織がすでに慢性期にかんばんと診断されており、自然で具体的なものすべてに引き寄せられている場合、おそらくボードは次のように見え、プロセスごとに分離されています：







ここから撮影。



私の場合、このオプションはいくつかの理由で機能しません。



まず、チーム全体は、数人を除いて別の都市にいて、ビデオ会議を手配することは合理的ではないようでした。



第二に、私はすべての肉体労働に執versionに嫌悪し、紙片をボードに手動で固定し（他の人はいませんでした、前の段落を参照）、トラッカーでタスクの動きを追跡し、それに応じてボード上の紙片を移動します。 コンピューター、Excel、またはTrelloでカードを引くこともできますが、タスクに従って自分でカードを再度移動する必要があります。



第三に、そして最も重要なこととして、このボードを見ると、一般的な状況を確認し、ソフトウェア生産パイプラインのセクションのボトルネックを見つけることができますが、人とその負荷は見えません。



だから私はボードが必要でした：



a）電子

b）トラッカーに関連付けられている、つまり 現在の状況を反映

c）そして、ボード上の列が特定の人に対応するように









要するに、私はその時にこの問題を解決し、ウェブページでプレゼンテーションを行いました。 しかし、それについては何もお話ししません。トラッカー（PVCSトラッカー）はあまり普及しておらず、APIはDLL上にあり、ページコードは見つかりません。



そして今、私はQMLをツールキットとして、演習を繰り返すことにしました。 選択は簡単に説明されています-Webテクノロジーよりも少し馴染みがあり、PythonとPyQtで書かれたツールに結果のモジュールを埋め込む方法を知っています。

スマートで裕福な人のための選択肢

はい、Jiraには、かんばんボードを持つプラグインが一定数あることを知っています- 市場で「かんばん」という単語を検索すると33のオプションが見つかります。



しかし、プラグインを使用するには、Jira上のすべてのユーザーの数に対応する価格で管理から購入をノックアウトする必要があることを意味し、サーバーにインストールしてサポートするという管理者に同意します....私のニーズに合わせてカスタマイズすることは不可能です プラグインはすべて共有されます。 そして、サーバーに何かがインストールされているかどうかに関係なく使用できるツールを手に入れ、誰も振り返らずにそれを変更したかったのです。

必要な予約

記事に負担をかけないために、ここではその方法を説明しません。

-Jiraでの承認

-JIRAへのコール転送を使用したQMLのカードでの操作-ドラッグアンドドロップなどによるステータスおよびアーティストの編集、変更

-Jiraフィルターを使用する



これのどれかがあなたにとって本当に興味深いなら、コメントでそれについて書いてください。 私はすぐにそれを実行して詳細に署名すると約束しませんが、 nmivanが 言ったように 、「私はそれを計画に入れます」。



用語はまだ確立されていないので、一部の企業では課題と呼ばれ、他の課題ではタスクと呼ばれ、 チケットとアプリケーションが残っています 。 Jiraで問題が選択されているフィルターエンティティには、 filter 、 query 、 selection 、 listという名前の束もあります 。



ローカライズされたJiraで採用されている用語を使用します： 問題 クエリを呼び出し、 リストをフィルターし ます 。

Jira REST APIの使用を開始する

Jira Webインターフェイスの典型的なリクエストアドレスは次のようになります。

  https://jira.mycompany.ru/browse/PROJECT-1234 

プロトコルとホスト名を取得します。つまり、 browse



するアドレスの先頭からrest/api/2/



を追加し、REST APIアドレスの基本部分を取得します。

  https://jira.mycompany.ru/rest/api/2/ 

アトラシアンのWebサイトにあるJira REST APIの詳細な説明 。 すべての種類の関数がたくさんあり、バージョンごとにますます増えていますが、実際に知っておく必要のあるメソッドはごく少数です。



GET https://jira.mycompany.ru/rest/api/2/issue/PROJECT-1234





要求の受信PROJECT-1234-要求フィールドを持つJSONが返されます。 フィールドの名前には、Webインターフェースに表示される名前ではなく、内部名が使用されることに注意してください。 したがって、「Testing Status」フィールドはcustomfield_10234



ます。 どのフィールドがどのフィールドに対応するかを理解するには、request /rest/api/2/field



。



POST https://jira.mycompany.ru/rest/api/2/issue





新しいリクエストを作成します。 呼び出しの本文は、入力可能な要求フィールドを持つJSONを送信します。 渡されなかったフィールドにはデフォルト値が入力されます。



PUT https://jira.mycompany.ru/rest/api/2/issue/PROJECT-1234





リクエストのフィールドを変更（編集）します。 JSONは呼び出しの本文で送信されます。ここには2つのブロックがあります。フィールドを変更するための指示を持つ「更新」と、新しいフィールド値を持つ「フィールド」です。

変数フィールドは、これらのブロックのいずれかにのみ存在する必要があります。





GET https://jira.mycompany.ru/rest/api/2/search?jql=...



...-JQL言語の条件に一致するクエリのリストを取得します





POST https://jira.mycompany.ru/rest/api/2/search



文字列に収まらない複雑な条件でも同じ



GET https://jira.mycompany.ru/rest/api/2/field



クエリで使用できるすべてのフィールドの説明を取得しGET https://jira.mycompany.ru/rest/api/2/field



。



初めてで十分です。



まだ何も変更したり編集したりしないので、アトラシアンのJiraサーバー、 JIRAサーバー（JIRA Coreを含む）プロジェクト 、つまり比ira的に言えばJiraメインプロジェクトで、匿名で作業します。 さらに、そこには私たちの人々もいます









私が最初にお勧めするのは、プロジェクトのWebインターフェースに移動して、次のような条件でクエリを検索することです。

project = JRASERVER and updated <= -1w ORDER BY updated DESC





これは、リクエストを正しく行ったことを確認するために必要です-そうでない場合は、Webインターフェースが通知します。

条件をコピーして、検索関数のjqlパラメーターに代入すると、次のURLが取得されます。

https://jira.atlassian.com/rest/api/2/search?jql=project = JRASERVERおよび更新された<= -1w ORDER BY更新されたDESC

ブラウザで開き、JSONを受け取ります。 ブラウザでJSONを拡張子.jsonのファイルに保存し、Qt Creatorで開きます-ファイル全体が1行になっていることがわかり、その後、あなたの手に従ってください-QMLとしてフォーマットします





別の名前で保存します。 結果のファイルを操作して、ファイル内の必要なフィールドを見つけ、目的の値がどの構造にあるかを確認する方が便利です。 元のファイルは、アトラシアンサーバーに再度アクセスしないように、テストソースとして役立ちます。



rest/api/2/field



リクエストですべてのフィールドのリストを取得して、必要なフィールドがリストされている識別子を判断することも意味があります。

Qt Creatorでプロジェクトを作成する

Qt Creatorでプロジェクトを作成するには、標準のQtクイックコントロールアプリケーションテンプレートを使用します。

これにより、qml.qrcリソースファイルにmain.cppとmain.qmlで構成されるプロジェクトが作成されます。





私たちはまだそれらに触れません;私たちはより差し迫った問題に対処します。

リクエストでカードのデザインを描きます

新しいIssueCard.qmlファイルを作成すると、ウィザードはデフォルトでリソースファイルにドロップします。

リクエストが表示されるカードのデザイン、私はすぐにデザイナーモードでQt Creatorをすぐに投げてから、手動でQMLを完成させました。









ところで、QMLデザイナーは、特に最初のバージョンと比較して、比較的優れています。 要素のバインド位置は明確に表示され、簡単に変更でき、プロジェクト内の他のqmlファイルからコンポーネントを自動的にプルアップします。 ほとんど落ちませんでした-勾配を設定しようとしたときにQtCreatorが2回しか落ちませんでした（何も悪いことはありません-自動保存が機能します）。 Qt WidgetsデザイナーのようなQMLデザイナーには、プレビュー機能があります。









結果は、QMLリクエストカード、IssueCard.qmlファイルです。





リクエストに応じてカードに記入するには、新しいプロパティ（ property ） issueを追加します。 このプロパティを使用すると、1回の割り当てで外部からすべてのコンテンツを含むリクエストをカードに転送できます。

  property var issue: null
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、その変更のシグナルで、値を解析し、それらを必要な視覚コンポーネントに押し込むコードを記述します。

  onIssueChanged: { var self = JS.getValue(issue,"self") var re = new RegExp("(https*:\/\/[^\/]+\/).+") var key = JS.getValue(issue,"key") var url = self.replace(re,'$1')+'browse/'+key keyText.text = key keyText.url = url summaryText.text = JS.getValue(issue,"fields/summary") dateText.text = (new Date(JS.getValue(issue,"fields/created"))).toLocaleString() creatorText.text = JS.getValue(issue,"fields/creator/displayName") var v = JS.getValue(issue,"fields/assignee/displayName") assigneeText.text = v === null ? "(no assigned)" : v var img = JS.getValue(issue,"fields/priority/iconUrl") var txt = JS.getValue(issue,"fields/priority/name") priorityImage.source = typeof img == 'undefined' || img === null ? "" : img img = JS.getValue(issue,"fields/issuetype/iconUrl") typeImage.source = typeof img == 'undefined' || img === null ? "" : img }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、ここではJS.getValue関数をよく使用します。関数自体は非常に単純ですが、複雑なJSON構造（存在する場合）からの値の選択を簡素化するために作成しました。

 function getValue(json, path) { var arr = path.split('/'); for(var i=0; i<arr.length && json; i++) { json = json[arr[i]]; } return json; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数は、IssueCard.qmlの先頭に接続されているmethods.jsファイルにあります。

カードの列について説明します

次に、垂直にスクロール可能な列にカードを整理する必要があります。 多くのカードがある場合、スクロールは非常に便利です。 スクロールするには、ListViewが必要です。 Qtに付属する例には、「QML動的ビューの順序付けチュートリアル3-ドラッグされたアイテムの移動」の例があります。その中でdynamicview.qmlはほとんど必要なもので、KanbanColumn.qmlという名前でプロジェクトにコピーします。



いくつかの改善を行う必要があります

1）列に見出しを追加し、最上位オブジェクトのプロパティを設定して、外部から列の名前を割り当てます。





2）リクエストカードには個別のオブジェクト全体があるので、例で作成した出力をColumnおよび複数のTextを介してIssueCardに置き換えます。







デザイナーは、DelegateModelをダイジェストしないため、列についてはサポートしません。 一方で、実際には必要ありません。すべて手動で行うことができます。

ボードウィンドウ

次に、一般ウィンドウで列を組み立てる必要があります。 KanbanWindow.qmlファイルを作成し、デザイナーが必要なフィールドをその中に配置します。

最も単純な形式では、次のようになります。











ListViewでは、 delegate



プロパティで、モデルの要素がKanbanColumn列の形式で表示されるように指定する必要があります。各列でクエリのリストを渡す必要があるので、 issueList



と呼びましょう。 また、空のモデルを作成し、それにmodel



という名前を付けmodel



。

 Rectangle { property var mainModel: [] ... ListView { ... model: ListModel { id: model } delegate: KanbanColumn { anchors.top: parent.top anchors.bottom: parent.bottom // 'groupName' title: groupName issues: issueList } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記では、 mainModel



プロパティも作成しました。これは、データを一時的に保存するのに役立ちます。



アプリケーションウィンドウにKanbanWindowを挿入することを忘れないでください。

 ApplicationWindow { id: applicationWindow1 visible: true width: 649 height: 480 title: qsTr("Hello World") ... KanbanWindow { anchors.fill: parent } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

REST APIを呼び出すコードを書く

Jiraからクエリのリストを受け取り、QMLでモデルにデータを入力するコードを作成します。



QMLは、制限されていますが、XMLHttpRequestとJSONパーサーをサポートしています（ ハブ に関する詳細な BlackRaven86 記事が あります ）。 したがって、サーバーへの呼び出しを記述し、応答を解析するすべてのものがあります。

 function readIssuesSimple(queryUrl) { var doc = new XMLHttpRequest(); doc.onreadystatechange = function() { if (doc.readyState == XMLHttpRequest.DONE) { var data = JSON.parse(doc.responseText); mainModel = data["issues"] model.clear() var list = mainModel //     var gPath = "fields/assignee/displayName" var models = {} for(var i in list) { var item = list[i] var g = getValue(item, gPath) if(!(g in models)) models[g] = [] models[g].push({ issueRecord: item } ) } //   ,     QML //     ,    for(g in models) { var iss = models[g] if(g === null) g = '(null)' //  'model' -    QML model.append({ groupName: g, issueList: iss }); } } } doc.open("GET", queryUrl); doc.send(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数は、サーバー（またはローカルファイル）からリクエストのリストをリクエストし、レスポンスからjsonを解析し、エグゼキューターごとにリクエストをグループ化し、QMLでモデルを満たします。



関数をボタンに接続します

  Button { id: goButton text: qsTr("Go") anchors.right: parent.right onClicked: JS.readIssuesSimple(queryTE.text) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、作業を確認します。









基本的に、ボードは準備ができています。 さらに、その改善と開発に取り組むことができます。



私はほとんど忘れていました-たとえば、実際のJiraサーバーへのURLを指定しようとすると、

https://jira.atlassian.com/rest/api/2/search?maxResults=50&jql=project = JRASERVERおよび更新された<= -1wで、担当者が空ではないORDER BYが更新されたASC

Windowsを使用している場合、ほとんどの場合成功しません。 SSLの問題は、デバッガーでプログラムを起動するときに、Qt Creatorが環境内のOpenSSLライブラリへのパスを登録しないことです。 libeay32.dllとssleay32.dllを作成された実行可能ファイルにコピーしてお楽しみください。

パラメーターを保存および復元するためのLocalStorage

毎回JiraサーバーにURLを入力しないようにするには、入力した文字列を保存し、起動時に復元する価値があります。 はい、QMLはLocalStorageで実行できます。



パラメーターの読み取りと保存のための関数を作成します。

 function loadSettings() { var dbConn = LocalStorage.openDatabaseSync("JKanban", "1.0", "", 1000000); dbConn.transaction( function(tx) { // Create the database if it doesn't already exist tx.executeSql('CREATE TABLE IF NOT EXISTS Settings(skey TEXT, svalue TEXT)'); var rs = tx.executeSql('select skey, svalue from Settings') var r = "" var c = rs.rows.length for(var i = 0; i < rs.rows.length; i++) { var skey = rs.rows.item(i).skey var svalue = rs.rows.item(i).svalue if(skey === 'query') queryTE.text = svalue } } ) } function saveSetting(skey, svalue) { var dbConn = LocalStorage.openDatabaseSync("JKanban", "1.0", "", 1000000); dbConn.transaction( function(tx) { tx.executeSql('delete from Settings where skey = ?', [ skey ]); tx.executeSql('INSERT INTO Settings VALUES(?, ?)', [ skey, svalue ]); } ) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

パラメータを保存する呼び出しを追加して...

 function readIssuesSimple(queryUrl) { saveSetting('query',queryUrl)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

... KanbanWindowを作成するときの復元

 Rectangle { id: rectangle1 width: 640 height: 480 color: "#e0edf6" clip: true Component.onCompleted: JS.loadSettings() ....
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グループ化オプションを追加する

アーティストごとにグループ化すると、ステータスや優先度など、他のグループ化オプションを選択できるようになるのは理にかなっています。 これがKanbanParams.qmlグループ化オプションパネルの表示方法です。













ご覧のとおり、ここではComboBoxにはグループ化オプションが可能なモデルが含まれており、各要素にはグループを決定するために使用される値へのJSONパスがあります。 したがって、グループ化オプションの数は自由に拡張できます。



最上位では、プロパティが定義されます。そのうちの2つは内部値のエイリアスです。 LocalStorageから読み取って目的の値を割り当てるには、エイリアスが必要です。 groupValuePathプロパティに関して：

  property string groupValuePath: cbGroupField.model.get(cbGroupField.currentIndex).namePath
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、単に現在のグループ化オプションの値へのパスを返します。



KanbanParamsをKanbanWindowに挿入すると、次のウィンドウが表示されます。









この記事を書くのにうんざりしているので 、パラメーターの処理方法については詳しく説明しません。コードを参照してください。

次は？

結果のボードは、リクエストを使用して現在の状況を表示するために既に使用できますが、改善することができます。

1. 列に並べ替えカードを作成します。 たとえば、リクエストの優先度によって。 そして、 ズボンの色の違い、申し訳ありませんが、優先度とリクエストの種類によるリクエスト。 私が試した-非常に快適、お勧めします。
2. 新しい列に対応する値を持つ列間でカードをドラッグアンドドロップします。 ところで、Jiraではステータスは割り当てではなく遷移によって変更されるため、この方法でステータスを変更することはできません。
3. ボード内で新しいクエリを入力します。
4. 前の2つのポイントには承認が必要です。 やらなきゃ。
5. QML以外に何もないので、プロジェクトはAndroidとiOS用に組み立てることができます-変更なしで動作するはずです。

コードはGitHubに投稿されています 。