//tips
squid gameを見てみた。３話あたりから面白くなってきた。
//smart contract
Parsiqのチュートリアルを実行してみる。
How to Process Chainlink Price Feeds with Parsiq Smart Triggers in NodeJs Web Applications via Webhook Transport
In this tutorial we demonstrate how to set up a Chainlink price feed Smart Trigger webhook for a NodeJs web application. In this example, we will be using Ngrok to expose a local environment port to the internet and then creating a Smart Trigger for sending Chainlink Oracle price feeds though a webhook.
Webhookとは、Webアプリケーションでイベントが実行された際、外部サービスにHTTP で通知する仕組み。
「きっかけ」により、指定した「宛先」へのHTTP通信が発生 。ここでいう「宛先」とはURLのこと。その上で、 指定した「宛先」へデータを送る。
ngrok はローカルで開発しているWebアプリを簡単にグローバルに公開できてしまうもので、例えば、XAMPPやDockerなどのローカル環境下で開発を進める中で同一ネットワーク外の実機でテストしたいときに使えるとのこと。
ポワードフォワーディングのサービスの一つ。ファイアウォール下でもHTTP等をトンネリングして外部からアクセスできるようにするトンネリングサービス。Webアプリケーション等の開発者向けで、用途としてはローカルで開発中のWebアプリケーション等の動作検証で外部からアクセスしてもらえるようにする。
POSTメソッドを支えるアプリをlocalhost:3000に生成し、We then use a Chainlink price feed to create a Smart Trigger with a webhook to send to our application.をするとのこと。
今のところ Chainlink price feedがどのような操作を指すのか、parsiqのプラットフォームがすでにオラクルに繋がっており、トリガーを作ると自動的にURL操作が発動するのかわからないので先に進めて確認する。
mkdir prq-webhook && cd prq-webhook
npm init
touch index.js
npm install express
expressというものでrequestを処理するよう。
Index.jsに下記を貼り付け。
const express = require('express')
const app = express()
app.use(express.json())
app.post('/', (req, res) => res.json(req.body))
const port = process.env.PORT || 3000
//`を入れてあげないとエラーになる
app.listen(port, () => console.log(`Application listening on port ${port}`))
参考：
https://www.codegrepper.com/code-examples/javascript/app.listen%28PORT%2C%28%29+%3D%3E+console.log%28%27Server+running+on+port+%24%7BPORT%7D%27%29%29%3B+not+working
Ngrokのコマンドエラーが出たのでインストールから。
brew install ngrok/ngrok/ngrok
ngrok http 3000を実行。
ターミナルがすごいことになった。
次はLogin to PARSIQ account. Create a webhook transport then set the ngrok forwarding address to the transport URL
なるほど、さっぱりわからない。
一旦ベースのwebhook transportのやり方を理解しておく。
Ngrokのアドレスは先に指定したhttp://localhost:3000で良いだろう。
見ているとIFTTTというサイトもblockchianとは関係してないが同様のwebhookシステムを備えているよう。
一旦YouTubeをなぞりつつwehookを作ってみる。
https://github.com/twiliodeved/webhooks-course
このgithubのフォークを自身のものに作る。そうするとsettingからwebhookを選択することができる。
そこでadd webhookボタンを押し、新たなwebhookを作成していく。
ここでもURLが出てくるが今回はbeeceptorというものを使ってみる。
https://beeceptor.com/
にてrequestを操作するURLを作成。
https://nakigithub.free.beeceptor.com
これをpayloadURLにアタッチ。
https://nakigithub.free.beeceptor.com/starsに加工しておく。
typeはjsonを選択。
Which events would you like to trigger this webhook?の部分をstarsでスターを押したら知らせるようにする。
これで追加し、starボタンを押すと#nakigithub.free.beeceptor.comのbeeceptorページにきちんと通知が反映される。
Discordでも自身のサーバーでwebhookを作成。
これをgithubの通知と連動させる。
先と同様にpayloadURLに/githubを追加したURLを追加。
https://discord.com/api/webhooks/927440175624224788/qELuZohw0YwOcl01mOX9cdnpbHZC6ltL-KFWAV0luC5XzAPaTyg_Jp9cFYi9wmWpxI2C/github
githubでstarをクリックすると/webhooks-course] New star addedとのgithubbotからの通知が届いた。
次にcodeを書いていく。
git clone …自身のgithubのrepoURL
cd webhooks-course
この中のsever.jsにexpressを使用したwebhookの核となる仕組みが記載されており、インスタンス化されたexpressによってgetやpostが実現できることがコードから読み取れる。
app = express();
app.get("/", (req, res) => res.send
app.post("/github", (req, res) => {
このファイルがある場所へcd code/express-discorderで移り、nodeでローカル環境でもjsを起動させられるようにする。
Package.jsonの記載項目をインストールするためにnpm installする。
次にコードに記載部分のprocess.env.DISCORD_WEBHOOK_URLを入手する必要がある。
これは先のdiscordのURLをとってくる形で良い。念の為privateな形で使用したいので、.envファイルから値を取ってくる形にする。つまり、.envファイルを参照するprocess.env.DISCORD_WEBHOOK_URLで対応できている。
これでローカルサーバーのセットアップ完了。
npm start
http://localhost:3000にきちんと反映できた。
ここからはgithub webhookのeventをうまく取得する必要がある。ただ、現状はローカル環境でonlineでないためgithubの情報を取れない。
そのため別途ツールが必要になる。これでネットからローカル環境に一部アクセス可能にする。
ここで先に出てきたngrokが登場。面白くなってきた。ポートを指定してそこだけをオンライン接続させる技を使う。
今回はngrokのzipをダウンロードする方法を使用する。
cd Downloads
./ngrok --help
./ngrok http 3000
これでターミナルにngrok表示がなされたが、ここにlocalのものをオンライン接続にしたurlが記載されていた。
早速開こうとしたがどうやらngrokのアカウントを作っていないとできないようだったのでアカウント作成。
やっと開けたと思ったら「偽のサイトにアクセスしようとしています」とのグーグルエラー発生。
https://ngrok.com/docs
Ngrokの初期設定の下記を実行すると無事に成功。
Running this command will add your authtoken to the default ngrok.yml configuration file. This will grant you access to more features and longer session times. Running tunnels will be listed on the status page of the dashboard.
./ngrok authtoken …
参考：
https://000dandelion000.blog.fc2.com/blog-entry-284.html
https://qiita.com/da-sugi/items/77f5b9bbbd32d8a79bf3
ここからngrokで生成したurlをgithubのwebhookに連動させる。
これだけでテストが行われ、discordにてguthubからのイベントを感知した表示が行われる。
Ngrokのターミナル画面に記載されているhttp://127.0.0.1:4040からgithubから受け取ったcode内容を確認できる。
ここからは画像を表示するのではなく受け取ったjsonの中身を編集して表示させるようにする。
