ElectronでJIRAの未解決のチケット一覧を確認できるツールを作ってみた。

勢いだけでNodejs Advent Calenderに登録した。
後で、やりたかったのはElectronじゃないかと気がついたけど、
Node.jsのAdvent Calenderに投稿させていただきます。🙇
##### JIRAのチケットを確認したい🎫
**わざわざサイト開いてボードみるの嫌**😣なんて思っていたところ、このAPIを見つけたのでとりあえず今まだ解決していないチケットを見たくてElectronでアプリ作りました。
#### 事の発端は日報文化📄
**会社で毎日日報書く必要があり**、日々の予定思い起こすの面倒😣だし、
担当してるタスク書くのも😣なあ、APIでとって半自動でやりたいなと思ったところにあります。
そこで、Electronはずっと興味はあったものの小さくても何かを作ったことがなかったが、
この機会に乗じて最初の練習としてJIRA APIと連携する何かを作ることにしました。

JIRAの[REST API](https://docs.atlassian.com/jira/REST/cloud/)、色々できそうです🤗
#### パッケージの選定📦
[node-jira](https://github.com/steves/node-jira)とか[jira-connector](https://github.com/floralvikings/jira-connector)とか、JIRAのAPIに対応したパッケージは存在しますが、
メンテナンスのされ具合と、認証周りのシンプルさからjira-connectorを選びました。
### API : jira-connector
##### 接続する
一番大元のJiraClientを用いて機能を使います。
インスタンスを生成する際に認証情報を渡します。

```js:JiraClient
    let jira = new JiraClient( {
        host: "hogehoge.atlassian.net",
        basic_auth: {
            username: "kawabata_lemon",
            password: "xxxxxxxxxx"
        }
    });
```

##### 検索する

SearchClientというのがJiraClientにぶら下がっているのでそれを用います。

```js:SearchClient

    let jql = 'resolution=Unresolved'
    jira.search.search({ 
        jql: jql
    }, (error, result)=>{

      if (error) {
        console.log(error);
        return;
      }
    });
  });

```

###### JQL
JQLはJIRAのSearchAPIを叩く際に用いるクエリです。チケットの担当者、プロジェクトなど様々な条件で絞り込めます
例えば、pairsというプロジェクトで、自分が担当しており、未解決のチケットを取得するときのJQLは次のようになります。

```text:JQL

project=pairs&assignee=lemon.kawabata&resolution=Unresolved

```

かなり多くのパラメータを使えるので、よく使う設定をしらべたほうがいいです。
具体的にはJIRAのサイト上で、検索画面のURLにパラメータが付与されてるのでそれを参考にするといいとおもいます。

ex:<img width="489" alt="jira_url.png" src="https://qiita-image-store.s3.amazonaws.com/0/21184/7f8100bb-df21-94d5-bf44-cfb736821a13.png">

=> jira-connectorのドキュメントをみていただくとかなりのことができることが確認できます

### Electron
Nodeでデスクトップアプリを作るのに必要なライブラリです。
レンダリングプロセスとバックエンドとなるプロセスのやりとりが少しなれるまでややこしい。
割と結構自由なことができます。[electron-sample-app](https://github.com/hokein/electron-sample-apps)をみていただくと良いかと思います。
乱暴なことを言えば、WebなのでWebでできることはできる。
サンプルにもあるんですが、WebGL動かしたりもできるのでかなりリッチなことができることがわかりますね。

##### IPC
![electron_process.png](https://qiita-image-store.s3.amazonaws.com/0/21184/02f25be4-2ac0-27e4-11e6-a32e3d95441e.png)
electronでは、フロントエンド側をBrowserWindow/バックエンド側をAppが動かします。
フロント・バックのプロセス間処理においては、レンダリングプロセスからバックエンドにイベントを送るときに**ipcRenderer**を使い、バックエンドからレンダリング側へは**ipcMain**を使ってイベントを送ります。これによりイベントの通知でバックとフロント間でデータのやりとりをしたり画面遷移を行うことができます。


### とにかく最小構成で何か作ってみる
最終的に日報の半自動化を目的なので、今回は限りなく最小構成で作りました。

雰囲気: [ ログイン ]->[ 画面遷移 ] -> [ チケットの一覧がテーブルで表示される ]
結果:
ログイン
<img width="406" alt="スクリーンショット 2016-12-15 16.10.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/21184/1e464ced-c012-4536-f0ef-3ec4ae946884.png">

=>シンプルにボタンのイベントを通じて、メインプロセスにイベントを送っています。

```js
  function proceed() {
        const { ipcRenderer } = require('electron');
        let url      = document.getElementById('url').value
        let username = document.getElementById('username').value
        let password = document.getElementById('password').value
        ipcRenderer.send('login-jira',url,username,password);
        document.location.href = "tickets.html"
    }

```

バックのプロセスはイベントを受けて待機するようになっています

```js
  // イベント送信
  ipcMain.on('login-jira',(event, atlassian,username,password)=>{

    // 受けた名前とパスワードをつかって
    let jira = new JiraClient({
        host: atlassian,
        basic_auth: {
            username: username,
            password: password
        }
    });

    // プロジェクトのチケットを取得する
    jira.search.search({
        jql: 'resolution=Unresolved'
    }, (error, result)=>{

      if (error) {
        console.log(error);
        return;
      }

      var tickets = []

      for (let i = 0; i < result.issues.length; i++) {

        let issue = result.issues[i];
        tickets.push(issue.fields.summary)
        console.log(`${issue.fields.summary} : `)
      }

      // チケットを見つけた通知をする
      event.sender.send('onFindIssues',tickets)
    });
  });
```

// チケット取得
<img width="408" alt="スクリーンショット 2016-12-15 16.11.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/21184/648f19c0-60e6-261d-97c4-6011135bf6c7.png">
チケット表示画面では、チケット取得後のイベントを待機し、受けた後表示するようになってますね。

```js
const { ipcRenderer } = require('electron');

  ipcRenderer.on('onFindIssues',(event, issues)=>{
    document.getElementById("loading").style.visibility = "hidden";
    for(let i = 0; i < issues.length;i++) {
    var ul = document.getElementById("tickets");
        var li = document.createElement("li");
    li.appendChild(document.createTextNode(`${issues[i]}`));
    li.className += 'ticket'
    ul.appendChild(li);
    }
  });
```

#### 終わりに
非常にわずかなコードで小さくともアプリーケションが作れることがわかりました。
jQueryやRxなどを使ってアプリケーションに深みを出していけばしっかりしたものも作れそうですね。
がっつりいろんなライブラリを合わせて作ってみたいなあと思いました。

[こちら](https://github.com/KawabataLemon/jira-issue-watcher)に今回作ったものをあげておきますので興味がございましたら...!