Blockchain code Metaverse VR

Crypto×VR×SmartContract(434)

スポンサーリンク

//tips

squid gameを見てみた。3話あたりから面白くなってきた。

//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の中身を編集して表示させるようにする。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.