テクノロジー

ALIS BOOT CAMPを受けてみた⑥ソースコードの修正/APIを実行する

zap's icon'
  • zap
  • 2020/01/13 11:07
Content image

さあ、やっとプログラムを動かすことができそうです。

とりあえずホーさんに作ってもらったサンプルを使って、全世界に向かって「Hallow world!」と叫んでみます。

/////////////////////////////////////////////////////////////////////////////

ZAP先週土曜日 18:04

よろしくおねがいします

ホーさん先週土曜日 18:04

Zeit Nowへの登録は完了していますでしょうか?

ZAP先週土曜日 18:05

多分。githubでログインすればいいんですかね。

ホーさん先週土曜日 18:05

OKです。そうしましたら、今日はNowを使ってサーバーサイドの開発について説明します

初回のメンタリングで、Liberate liteでで必要なものとして以下をあげました 次に、バックグラウンド処理ですが、ここではゲームに必要な情報を計算したり、ブラウザに渡したりするところです。 ざっと思いつくところだと、 ・BOSSの攻撃力やアイコンのURLを取得 ・自分の所有NFTを取得(サービス名、NFT名など) ・ユニットの能力値を計算 あたりはバックグラウンド処理に該当します。 また、データベースにBOSSの情報を記載しておいて、データベースに接続して読み込む、といった処理もこちらで行います。 学習する必要があるのは、プログラミング言語であるJavaScriptと、 Firebaseか、Zeit Nowというサービスの使い方です。

この部分になります

本日の目標としては、 1. OpenseaのAPIを使って NFTを取得 2. NFTからユニットの能力値を計算 3. 能力値をフロントエンドから取得できるようにAPIを立ち上げ

というところまで(時間が許せば)行います

まずはNowの説明からです。

ZAP先週土曜日 18:07

わかりました。

ホーさん先週土曜日 18:07

NowというのはPaaS(Platform as a Service)の一種で、自分でサーバを立てて環境構築しなくても、Nowが提供しているサーバ上にものすごく手軽にプログラミングをはしらせることができるサービスです。

コマンドでnowと打つだけでデプロイが完了するという、ものすごい手軽さがあります。また、デプロイすると自動的にURLが発行され、しかも最初からHTTPS化されています。便利です。

こちらをまずはインストールしていきましょう。

VSCodeを立ち上げて、WSLに接続してください

ZAP先週土曜日 18:08

あがりました

ホーさん先週土曜日 18:09

それでは、 npm install -g now

と打ってみてください

ZAP先週土曜日 18:10

Update available 5.6.0 → 6.13.6

ホーさん先週土曜日 18:10

あ、nodeのバージョンあげましょう

nvm install v12.13.1

nvm use v12.13.1

node --version

npm i -g now

前回NFT作るのにnodeのバージョンを8にしましたが、 Now Zeitはnode v12への移行を推奨しているので、一度nvmでv12系をインストールします

ZAP先週土曜日 18:11

npm install v12.13.1ですか?

ホーさん先週土曜日 18:11

p出なくvです

nvm

ZAP先週土曜日 18:11

Command 'nvm' not found, did you mean:

ホーさん先週土曜日 18:11

nvmはnodeのバージョン管理ソフトです(編集済)

ZAP先週土曜日 18:12

Try: sudo apt install <deb name>

sudoしないといけない?

ホーさん先週土曜日 18:12

あれ、以前nvm入れたと思ったんですが

ZAP先週土曜日 18:13

npm install -g now

now@16.7.3 preinstall /home/zap/.nvm/versions/node/v8.11.2/lib/node_modules/now node ./scripts/preinstall.js

/home/zap/.nvm/versions/node/v8.11.2/bin/now -> /home/zap/.nvm/versions/node/v8.11.2/lib/node_modules/now/dist/index.js + now@16.7.3 added 1 package in 6.434s

ホーさん先週土曜日 18:13

source ~/.nvm/nvm.sh

これでPATH通ると思います

ZAP先週土曜日 18:14

動いたっぽいです。

ホーさん先週土曜日 18:14

okです。

そうしましたら、私が作ったテンプレートをダウンロードしましょう

git clone https://github.com/hoosan/liberatelite-backend

GitHub

hoosan/liberatelite-backend

Contribute to hoosan/liberatelite-backend development by creating an account on GitHub.

1行です

ZAP先週土曜日 18:16

行けました。

ホーさん先週土曜日 18:16

それでは、 cd liberatelite-backend

でフォルダに入っていただいて

あ、というかVSCodeでそのディレクトリ開いてください

ZAP先週土曜日 18:17

zap@DESKTOP-H0FTP1L:~/liberatelite-backend$ ls -l total 16 -rw-rw-rw- 1 zap zap 23 Jan 11 18:15 README.md drwxrwxrwx 1 zap zap 512 Jan 11 18:15 api -rw-rw-rw- 1 zap zap 273 Jan 11 18:15 now.json -rw-rw-rw- 1 zap zap 15192 Jan 11 18:15 package-lock.json -rw-rw-rw- 1 zap zap 266 Jan 11 18:15 package.json drwxrwxrwx 1 zap zap 512 Jan 11 18:15 util zap@DESKTOP-H0FTP1L:~/liberatelite-backend$

ホーさん先週土曜日 18:17

2020-01-11_18.17.13.png

34.19 KB

右上のファイルみたいなアイコン押すと、Open Folderが出てくるので、それでさっきのフォルダ開いていただけますでしょうか

その方が見やすいです

2020-01-11_18.18.21.png

78.87 KB

うまくいくとこんな感じで一覧で見れます

ZAP先週土曜日 18:18

OKです。

ホーさん先週土曜日 18:19

はい、これがnowで使うファイル群になります

まず、使用言語はNode.jsというものです

ZAP先週土曜日 18:19

はい。

ホーさん先週土曜日 18:19

これを使ってAPIを作っていきます

一番基本的な設定ファイルがpackage.jsonというやつです

開いていただけますでしょうか

ZAP先週土曜日 18:20

はい

ホーさん先週土曜日 18:20

"name"というところにプロジェクトの名前が入っています

-sampleを消しちゃいましょう

ZAP先週土曜日 18:20

liberatelite-backend-sample

ホーさん先週土曜日 18:20

"name": "liberatelite-backend",

ZAP先週土曜日 18:21

OKです。

ホーさん先週土曜日 18:21

"dependencies": {} というところは、関連パッケージが記載されています。

今日使うのは、"express"というパッケージです

これでAPIを立てていきます

dependenciesに記載されているパッケージをインストールするのには、コマンドライン(ターミナル)で npm install と打ちます

node-fetchとurlも一緒にインストールされます

ZAP先週土曜日 18:23

zap@DESKTOP-H0FTP1L:~/liberatelite-backend$ npm install added 54 packages in 2.55s

ホーさん先週土曜日 18:23

OKです

次、now.jsonを開いてください

これはnowで必要な設定ファイルです

さっきと同様に、"name"の-sampleを消しちゃいましょう

ZAP先週土曜日 18:24

aliasもですか?

ホーさん先週土曜日 18:25

そうです!

ZAP先週土曜日 18:25

"name": "liberatelite-backend", "alias": "liberatelite-backend.now.sh",

ホーさん先週土曜日 18:25

aliasのところの文字列が、APIを公開した時のドメインになります(編集済)

ZAP先週土曜日 18:25

シェルなんですね。

ホーさん先週土曜日 18:26

.shってなってますよね〜 詳しいことはわからないですw

次に、app.jsを開いてください

utilってディレクトリに入っています

ZAP先週土曜日 18:26

ありました

ホーさん先週土曜日 18:27

const express = require("express"); ここでさっきインストールしたexpressを読み込んでます

expressという変数に代入してます

JavaScriptでは、変数を宣言するときに、定数であればconstを頭につけます

あとで代入して書き換える場合はletです

const app = express();

この行で、expressの関数を使ってapp (applicationの略)を宣言します

このappでAPIを定義していきます

APIの設定は別ファイルでされているので、ここでは変数の定義(宣言)だけです(編集済)

ZAP先週土曜日 18:30

expressがたくさん出てきて混乱するのですが

ホーさん先週土曜日 18:30

require("express");

最初のexpressは、モジュール名です

これをJavaScriptで呼び出して"const express"変数に代入しています

ここのconst expressはこちらで決めているので、 const exp = requre("express"); でも構いません

ZAP先週土曜日 18:32

そこまではOKです。

ホーさん先週土曜日 18:32

ここで定義したconst expの実態は関数になっています。

ZAP先週土曜日 18:33

この変数が関数になってるんですね。

ホーさん先週土曜日 18:33

exp()とすることで、関数を「実行」して、結果をappに代入します

const app = exp();

ZAP先週土曜日 18:34

わかりました。

ホーさん先週土曜日 18:34

なので、1行目で const app = require("express")();

としても動きます

わかりにくいので分けるのが慣例です

module.exports = app;

最後の行で、他のファイルからappを読み込めるようにしています

ここまで大丈夫でしょうか

ZAP先週土曜日 18:35

意味は分かりました。

読み込み方はわからないでとりあえずOKですか?

ホーさん先週土曜日 18:35

次にappを読み込んでいきます!

api/hello-world/index.jsを開いて見てください

ZAP先週土曜日 18:36

はう

はい

ホーさん先週土曜日 18:36

1行目で、 const app = require("../../util/app");

となっていますよね

これが、先ほどみたapp.jsを開いて、その中でmodule.exportsされた変数を読み込む方法です

require("../../util/app");のappは、「ファイル名」に対応しています(編集済)

app.jsのapp

です

よろしいでしょうか

ZAP先週土曜日 18:38

「module.exports」ってのが、「app.js」の戻り値を設定するみたいなコマンドなんですね。

ホーさん先週土曜日 18:38

そうですそうです

で、次なんですが app.get()という関数でAPIを作っていきます

APIにはGET, POST, PUT, DELETEみたいな、決まりごとがありまして

https://qiita.com/r_fukuma/items/a9e8d18467fe3e04068e

Qiita

HTTPメソッド(CRUD)についてまとめた - Qiita

こんにちは、Webエンジニア2年目の[@r_fukuma](https://twitter.com/r_fukuma)です! アウトプット練習も兼ねて,HTTPメソッド(CRUD)についてまとめました。 # HTTPメソッドの種類は...

あとでこの辺り読んでいただければと思います

ZAP先週土曜日 18:41

わかりました。

ホーさん先週土曜日 18:41

app.getでは

2020-01-11_18.41.35.png

20.36 KB

この部分を定義できます

リソースの取得です

get()の一個めの引数はapiのパス(url)に対応していますが、ここでは"*"になっています

urlはnow側で勝手に設定されます

あとでご説明します

app.get()の二つ目の引数は、関数になってます

JavaScriptではアロー関数といって

() => {}

この形で関数を表現できます

function() {}

でも良いのですが、function書かないで済むので() => {}を多用します

()の中に、関数の引数を設定できます

(req, res)

二つの引数が入っています

reqはrequestの略で、リクエスト時のurlパラメータ(前回メンタリングでやった?owner=みたいなの)などが入っています(編集済)

resはresponseの略で、apiのレスポンスを関数の中で設定していきます。

ZAP先週土曜日 18:47

reqとかresは予約語なんですか?

ホーさん先週土曜日 18:47

いや、なんでも良いです

が、慣例としてreqとresをよく使います

ZAP先週土曜日 18:47

なるほど。

ホーさん先週土曜日 18:47

その他大丈夫でしょうか

ZAP先週土曜日 18:48

これって、reqの内容にかかわらず、resに「hello world!」って返す関数ってことです?

ホーさん先週土曜日 18:48

そうですそうです

ではnow.jsonもう一度見て見ましょう

"builds": [    { "src": "api/**/*.js", "use": "@now/node" }  ],(編集済)

この部分が重要です

api/**/*.js にあるファイルをnowが自動的に見にいきます

今回だと、api/hello-world/index.js

が対応してます

で、hello-worldの部分がurlとして自動的に設定されます

やって見ましょう

ターミナルで、 now dev

と打って見てください

devは開発の意味で、ローカルにAPIを立ち上げて動作確認することができます

ZAP先週土曜日 18:52

zap@DESKTOP-H0FTP1L:~/liberatelite-backend$ now dev

Now CLI 16.7.3 dev (beta) — https://zeit.co/feedback Ready! Available at http://localhost:3000/

Feedback - ZEIT

ホーさん先週土曜日 18:52

OKです

http://localhost:3000/hello-world

ここにアクセスして見てください

api忘れてました

http://localhost:3000/api/hello-world

ここでした

ディレクトリの階層がそのままurlになります

hello world!が表示されればOKです

ZAP先週土曜日 18:54

hello world!ってでました

ホーさん先週土曜日 18:54

OKです〜

これであとは自分の好きな処理するだけです

が、もう少し説明します

ZAP先週土曜日 18:54

これはアップロードをしたわけではなくで

ホーさん先週土曜日 18:54

はい

まだローカルです

ZAP先週土曜日 18:55

ローカルで動かしているってことなんですよね?

ホーさん先週土曜日 18:55

そうです

では今度は now って打って見ましょう

今度はアップロードされます

ZAP先週土曜日 18:55

now

って打つのは、

ホーさん先週土曜日 18:56

ログイン求められるような気がします

ターミナルです

ZAP先週土曜日 18:56

一回now devをキャンセル

ホーさん先週土曜日 18:56

あ、そうです

すみません

ZAP先週土曜日 18:57

ctrl+cです?

ホーさん先週土曜日 18:57

そうですそうです

ZAP先週土曜日 18:57

時間かかります?

Stopping now dev server

この後帰ってこないんですが。

ホーさん先週土曜日 18:58

あ、もう一度ctrl+C必要かもしれません

ログイン求められました?

ZAP先週土曜日 18:59

なんかemail送ったよ的な

ホーさん先週土曜日 18:59

登録したメールアドレスにメール送られてきます

はい、そのメールのverifyってとこクリックします

Githubで登録した場合は、Githubに登録するのに使ったメールアドレスかと思います

ZAP先週土曜日 19:01

Error! The chosen alias "liberatelite-backend-sample.now.sh" is already in use.

ホーさん先週土曜日 19:02

あ、now.json保存しましょう

package.jsonも

ZAP先週土曜日 19:02

これ、エディターって保存しないと変わらないんですか?

ホーさん先週土曜日 19:02

CTRL+Sです

はい、そうです

-sampleは私が使っちゃってるので、さっき変えていただきました

ZAP先週土曜日 19:03

世界中の誰も使ってない名前じゃないといけないってことです?

ホーさん先週土曜日 19:03

そうです!

ZAP先週土曜日 19:03

なるほど。

できたっぽいですね。

ホーさん先週土曜日 19:04

https://liberatelite-backend.zap.now.sh/api/hello-world

こんな感じでしょうか

ZAP先週土曜日 19:04

このサイトは安全に接続できません

ホーさん先週土曜日 19:04

ご自分のユーザー名入ってると思うのでご確認ください

zapの部分ご確認ください

ZAP先週土曜日 19:05

liberatelite-backend.zap.now.sh から無効な応答が送信されました。

ホーさん先週土曜日 19:05

Terminalに

Ready! Deployment complete [17s]

て出てます?その下なんてなってますかね

ZAP先週土曜日 19:06

いけました。

ホーさん先週土曜日 19:06

あ、というかユーザー名入ってないのでいいんでしたすみません

ZAP先週土曜日 19:06

なるほど。そういう事か。

ホーさん先週土曜日 19:06

https://liberatelite-backend.now.sh/api/hello-world

ZAP先週土曜日 19:06

https://liberatelite-backend.haradatakeshi.now.sh/api/hello-world

ホーさん先週土曜日 19:06

こちらですね

あ、名前出ちゃってます

消したほうが

ZAP先週土曜日 19:07

本名じゃないですね。

ホーさん先週土曜日 19:07

そうでしたかw

ZAP先週土曜日 19:07

謎の名前を昔から使ってます。

ホーさん先週土曜日 19:07

いずれにしろこれで全世界公開完了です

ww

ZAP先週土曜日 19:07

なるほど。面白いです。

ホーさん先週土曜日 19:08

簡単ですよね

ZAP先週土曜日 19:08

前回のNFTの情報取るより簡単に見えますが、

前回のやつを組み込める自信がないですね。

ホーさん先週土曜日 19:08

あ、NFTとるコードも作ってます

VSCodeで、

ZAP先週土曜日 19:08

なんと。

ホーさん先週土曜日 19:09

api/opensea-assets/index.js

開いて見てください

ZAP先週土曜日 19:09

はい。

ホーさん先週土曜日 19:10

node-fetchというモジュールを使うことで、前回アクセスしたNFTのAPIにアクセスすることができます

APIのurlはここで定義してます   const url = `https://rinkeby-api.opensea.io/api/v1/assets/?owner=${owner}&format=json`

$(owner)というところに、NFTのアドレスが代入されます

  const { query } = parse(req.url, true);   //owner=0x9ba9105d4a1cde23fa2ae25c67dea928b975d729    const { owner } = query; // 0x9ba9105d4a1cde23fa2ae25c67dea928b975d729

この部分でownerにアドレスを代入していきます

なお、//以降はコメントです

なんの値が入るかわかりやすいように書いて見ました

先ほどreqにはリクエストの情報が入ると申しましたが、 const { query } = parse(req.url, true); //owner=0x9ba9105d4a1cde23fa2ae25c67dea928b975d729

こうすることでurlパラメータの情報を取ることができます

イメージとしては、 http://localhost:3000/api/opensea-assets?owner=0x9ba9105d4a1cde23fa2ae25c67dea928b975d729

ここにアクセスした時に、owner=で定義されたアドレスをindex.js内で取得して、代入して https://rinkeby-api.opensea.io/api/v1/assets/?owner=0x9ba9105d4a1cde23fa2ae25c67dea928b975d729

ここにアクセスするという感じです

{ query }の波括弧の部分は、分割代入というやつで

parse(req.url, true)の返し値はjsonなんですが

{ "query": 〜〜〜, "何か": 〜〜〜 }

こんな感じ

{ query } とすることで、この中のquery部分だけ取り出すことができます

その下のownerも同じで

queryもjsonになってまして

{ "owner": 0x9ba9105d4a1cde23fa2ae25c67dea928b975d729, "他のパラメータ": ~~~ }

{ owner }とすることで0x9ba9105d4a1cde23fa2ae25c67dea928b975d729だけ抜き出すことができます

ここまで大丈夫でしょうか?

ZAP先週土曜日 19:17

分割のされ方がちっとわからないです。

queryの中身が「owner=0x9ba9105d4a1cde2**25c67dea928b975d729」で(編集済)

ownerに代入するときに

「0x9ba9105d4a1cde23fa2ae25c67dea928b975d729」に区切ってるんですよね。

ホーさん先週土曜日 19:18

queryの中身はjsonです

{ "owner": 0x9ba9105d4a1cde23fa2ae25c67dea928b975d729 }

実際はこうです

const { owner } = query とすると、queryのなかの"owner"の値(0x9ba9105d4a1cde23fa2ae25c67dea928b975d729)を、ownerという変数名で定義できます

ZAP先週土曜日 19:20

jsonファイルの変数名に仮に「name」というパラメタがあったら、

const{ name }で取れる的なことですか?

ホーさん先週土曜日 19:21

そうですそうです

ZAP先週土曜日 19:21

queryも分割代入だから、jsonの入れ子になっているってことなんですか?

ホーさん先週土曜日 19:22

そです

ZAP先週土曜日 19:22

なるほど。

ホーさん先週土曜日 19:22

  fetch(url)    .then((result) => {        return result.json();    })    .then((data) => {        res.send(data);    })    .catch(() => {      res.status(401);    });

この部分は説明が必要ですが、ちょっと今日は時間がないので次回にしましょう

非同期の話が必要です

ZAP先週土曜日 19:23

了解です。

ホーさん先週土曜日 19:24

https://liberatelite-backend.now.sh/api/opensea-assets?owner=0x9ba9105d4a1cde23fa2ae25c67dea928b975d729

ここにアクセスしてNFTの情報を取れることを確認しておいてください

ZAP先週土曜日 19:24

とれました。

ホーさん先週土曜日 19:24

OKです〜

では本日はここまでです。 nowを使ったAPIの立ち上げ方のお話でした。

ZAP先週土曜日 19:25

ありがとうございました。あともう少しで内部のことが書けそうな感じですね。

ホーさん先週土曜日 19:26

ですね。次回で非同期の話をして、そのあとはZAPさんの方でロジック書いていく段階になります

やっとプログラミングが始まりますw

 

Article tip 0人がサポートしています
獲得ALIS: Article like 21.48 ALIS Article tip 0.00 ALIS
zap's icon'
  • zap
  • @zap
自作で「LIBERATE」というブロックチェーンゲーム作ってます。URL:https://liberatelite.vercel.app/

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
テクノロジー

オープンソースプロジェクトに参加して自己肯定感を高める

Like token Tip token
85.05 ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう!(難易度低)

Like token Tip token
69.82 ALIS
Eye catch
クリプト

スーパーコンピュータ「京」でマイニングしたら

Like token Tip token
1.06k ALIS
Eye catch
テクノロジー

iOS15 配信開始!!

Like token Tip token
7.20 ALIS
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
他カテゴリ

ALISのシステム概観

Like token Tip token
5.00 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
120.79 ALIS
Eye catch
クリプト

ブロックチェーンの51%攻撃ってなに

Like token Tip token
0.00 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
ゲーム

ドラクエで学ぶオーバフロー

Like token Tip token
30.10 ALIS
Eye catch
クリプト

「ハッシュ」とは何なのか、必ず理解させます

Like token Tip token
0.10 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS