Skip to content

Development

Yuki Ueda edited this page Nov 2, 2018 · 17 revisions

アプリ開発

このページでは実際にProbotアプリケーションを作る方法を紹介します.

最初のアプリケーション

どんなProbotアプリケーションも最初の作成手順は基本的に同じです.npm init probot-app --typescriptコマンドを実行して作成します.このコマンドを実行するだけで,指定のディレクトリにProbotアプリケーションのスケルトンを簡単に作成します.

cd # ホームディレクトリに移動
mkdir Probot # Probotディレクトリを作成
cd Probot    # Probotディレクトリに移動
npx create-probot-app --typescript my-first-app

実行後にでてくる下記の質問には自由に答えてください (あとで変更できます). 面倒な場合はエンターキーを押し続けるだけでも大丈夫です.

Let's create a Probot app!
? App name: my-first-app
? Description of app: A Probot app
? Author's full name: YukiUeda
? Author's email address: ikuyadeu@yahoo.co.jp
? Homepage:
? GitHub user or org name: Ikuyadeu
? Repository name: my-first-app
created files...
Finished scaffolding files!

Installing Node dependencies!

Done! Enjoy building your Probot app!

もしここでnpm ERR! cb() never called!が出力された場合は

cd my-first-app
npm install

を実行してみてください

できあがったソースコードは

cd my-first-app
code .

で確認することができます.

ここで重要なファイルはsrc/index.tspackage.jsonです.src/index.tsにはProbotアプリケーションのコードを記述します.package.jsonには利用する外部のパッケージやモジュールを記述します(詳しい記述サイト).

手動でGitHub Appの設定

以下の手順で自動的にGitHub Appの設定を行います.

  1. ローカルでnpm run build, npm run devを実行します.
  2. 次にlocalhost:3000にアクセスします (またはカスタム Glitch URL).
  3. 以下のようなページが見れます: screen shot 2018-09-25 at 10 01 28 pm
  4. Register a GitHub App ボタンをクリックします.
  5. 次にapp名を選びます.
  6. GitHub App登録後,アプリケーションのインストールにリダイレクトされます. 同時に, ローカルの.envの確認しましょう.リダイレクトで登録された情報が送られているはずです.
  7. テスト用リポジトリにインストールし,webhookを起動させましょう!
  8. 完了です [デバッグ](# デバッグ) でさらにProbot Appについて,勉強し開発しましょう.

GitHub App Manifests--otherwise known as easy app creation--make it simple to generate all the settings necessary for a GitHub App. This process abstracts the Configuring a GitHub App section. You can learn more about how GitHub App Manifests work and how to change your settings for one via the GitHub Developer Docs.

手動でGitHub Appの設定

アプリケーションを実行するためには,ローカルマシンにwebhooksを配信するようにGitHub Appを設定する必要があります.

  1. .env.example.envという名前に変更して,あなたのローカルマシン上にコピーしてください.
  2. smee.io を開き,**"Start a new channel"**をクリックしてください. Webhook Proxy URLが生成されます.(例:https://smee.io/XXXXXXXXXXXXXXX.envに記述されているWEBHOOK_PROXY_URLを直前にsmee.ioで生成したWebhook Proxy URLに設定(置換)してください.
  3. Register new GitHub App にアクセスして以下の設定でGitHub Appを作成します.:
    • GitHub App name:任意のGitHub Appの名前を記述してください.
    • Homepage URLhttp://localhost:1410
    • User authorization callback URLhttp://localhost:1410/auth.callback
    • Webhook URL:前の手順にもある WEBHOOK_PROXY_URLを使用してください.
    • Webhook Secret:development と記述してください.(注:GitHubではオプションとなっていますが,最適なセキュリティ設定のために,Probotでは,これを設定してください.).
    • Permissions:基本は全てを Read & write にすることを推奨します.アプリにアクセスさせたいデータを選択することができます.(注:Issuesのみを読み,書くようなアプリを作成する場合はIssuesのみを Read & write にします.)
    • Subscribe to events:基本は全てをチェックすることを推奨します.購読したいイベントを選択することができます.基本は上記Permissionsと似たようなものと思ってもらって良いです.(例:Label の生成,編集,削除など)
    • Where can this GitHub App be installed?:公開時は Any account である必要がある.
  4. 秘密鍵(private key)をダウンロードし,あなたのプロジェクトのルートディレクトリに移動させます.プロジェクトのルートにある限り,Probotはファイル名に関係なく自動的にファイルを探します.private-key
  5. .envを編集し,作成したアプリのIDにAPP_IDを設定します.

App IDは,アプリ設定ページで以下のように記述されています. app-settig

リポジトリにアプリをインストール

テストリポジトリを作成し,アプリの設定ページで"Install"ボタンをクリックしてアプリをインストールします.(例:https:// github.com / apps / your-app

アプリをローカルで実行

これでローカルマシン上でアプリケーションを実行する準備が整いました. $ npm run devを実行してサーバを起動します.

$ npm run build # アプリをコンパイル
$ npm run dev # アプリを実行

> my-app@1.0.0 dev /Users/z/Desktop/foo
> nodemon --exec "npm start"

[nodemon] 1.17.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `npm start`

> my-app@1.0.0 start /Users/z/Desktop/foo
> probot run ./index.js

Yay, the plugin was loaded!
18:11:55.838Z DEBUG Probot: Loaded plugin: ./index.js

devスクリプトはnodemonを使ってあなたのアプリケーションを起動します.これはあなたのローカル開発環境のファイルの変更を監視し,サーバを自動的に再起動します. もし,nodemonが実行できない場合は

npm install -g nodemon

でインストールしてください. またnpm run devに失敗した場合は npm run rebuildを実行することで成功することがあります.

その他の利用可能なスクリプト

  • $ npm startはファイルを見ずにアプリを起動します.
  • $ npm run lintを実行すると,standardを使ってコードをlintすることができます.

デバッグ

  1. 常に $ npm installを実行させておきます.そして,package.jsonを変更した場合はサーバを再起動してください.
  2. 冗長なロギングを有効にするには,次のコマンドを実行してサーバを起動します. $ LOG_LEVEL = trace npm start

次のWebhooksではGitHub Webhooksを使ったGitHubのイベントを取得します.

目次

初級

発展

リファレンス (外部リンク)

更新予定

  • Hello Worldチュートリアルの追加
  • 全体の推敲
  • 発展項目は優先度低め
Clone this wiki locally