ALIS BOOT CAMPを受けてみた⑦ソースコードの共有/デバック用ソフトの使い方

この回でプログラミングの下準備は終了です。

後は今までの内容を振り返ってプログラミングを進めていきます。

つまり、①～⑦の内容を一度振り返って整理しないといけないわけですね。

いやこの文章量どうしようかな。

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

これ、今はプログラムを開始するときにパラメタを渡す手段がわからないんですが、それさえわかれば自動戦闘ゲームみたいなものは作れますよね。

現在は指定のURLにログインするだけなんですけど、指定URL＋パラメタみたいな書き方で、受け取れそうなので。

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

自動戦闘ゲームできます！(liberate liteも自動戦闘含まれるイメージでいました）(編集済)

ＺＡＰ先週土曜日 21:27

もし簡単であれば、指定URL＋パラメタの書き方だけ教えてもらえませんか？

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

パラメタというのは、先ほどでいうownerとは違いますか？

?owner=.... 

は、URLパラメータと呼ばれているものです

URLはここまで https://liberatelite-backend.now.sh/api/opensea-assets

?owner=0x9ba9105d4a1cde23fa2ae25c67dea928b975d729(編集済)

ここがパラメータ

ＺＡＰ先週土曜日 21:33

const app = require("../../util/app"); app.get("*", (req, res) => { res.send("hello world!"); }); module.exports = app;

ここに、const { owner }があれば取得できるってことですかね？

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

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

これを追加すればできます！

あ、あと const { parse } = require("url");

このモジュール必要です

api/opensea-assets/index.jsみて真似してみてください

ＺＡＰ先週土曜日 21:36

わかりました。ありがとうございます

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

ホーさん今日 18:26

.then((result) => {}) のところは大丈夫でしょうか

ＺＡＰ今日 18:26

はい。

ホーさん今日 18:27

OKです。最後に .catch(() => { res.status(401); });

この部分ですが、

これはエラーをキャッチした際の処理を定義しています

fetch(url) .then((result) => { console.log(result) return result.json(); }) .then((data) => { res.send(data); })

ここまでの処理でエラーが発生した場合に、 .catch(() => { res.status(401); });

でステータス番号401を返しています

ステータス番号というのはhttp通信した場合の成功や失敗を表す番号で

成功が200です

内部エラーは502

ページが見つからない場合に401、など

ここで返すのを401とするのが適切かというと若干違うような気がしますが、とりあえずエラーを返すということでそうしています

ＺＡＰ今日 18:30

わかりました。

ホーさん今日 18:31

はい、以上が非同期処理の扱い方でした。 次ですが、今後ZAPさんに開発を進めていただく上で、Githubを使っていただきたいと思っています。(編集済)

コードの共有や確認がしやすいので

ＺＡＰ今日 18:31

例の苦手なやつですね。

ホーさん今日 18:32

そうなんですね。Githubの簡単な使い方を今日はお伝えしようと思ってます

前回メンタリング終了後、liberatelite-backendのコントリビュータとしてzapさんを追加しました

これで、私のリポジトリにzapさんが開発者として参加することができるようになります

で、前回いくつかファイルを変更していただいたので、これをGithubに反映していきます

ＺＡＰ今日 18:34

sample切ったやつですね。

ホーさん今日 18:34

VSCode開いてますかね

そうです！

ＺＡＰ今日 18:34

はい。

ホーさん今日 18:34

ターミナルを開いていただいて、liberatelite-backendのディレクトリに移動してください

ＺＡＰ今日 18:35

OKです。

ホーさん今日 18:35

次に、リモートのURLを変更します

今、 git remote -v

は何を返すでしょうか

ＺＡＰ今日 18:36

zap@DESKTOP-H0FTP1L:~/liberatelite-backend$ git remote -v origin https://github.com/hoosan/liberatelite-backend (fetch) origin https://github.com/hoosan/liberatelite-backend (push)

GitHub

hoosan/liberatelite-backend

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

ホーさん今日 18:36

はい、ありがとうございます

https://github.com/hoosan/liberatelite-backend に、httpsで接続するようになってます

GitHub

hoosan/liberatelite-backend

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

が、このままだと接続時にパスワードなど毎回要求されるので、ssh接続に変更します

git remote set-url origin git@github.com:hoosan/liberatelite-backend.git

1行です

こちら打ってみてください

ＺＡＰ今日 18:38

うちました

ホーさん今日 18:38

ではもう一度 git remote -v

ＺＡＰ今日 18:38

zap@DESKTOP-H0FTP1L:~/liberatelite-backend$ git remote -v origin git@github.com:hoosan/liberatelite-backend.git (fetch) origin git@github.com:hoosan/liberatelite-backend.git (push)

ホーさん今日 18:39

OKです。変更されました

Gitですが、今は「master」ブランチというところを操作していることになります

ですが、gitはブランチを枝分かれさせることで複数の人がそれぞれ修正したりすることができます

今回は私とzapさんが修正していくことになるので、二人とも同じところを修正すると修正が衝突したりします

これを避けるため、ブランチを新たに作成して、そこを修正していきましょう

今回、masterブランチですでに修正していますので、この修正を新たなブランチに引き継がせます

ＺＡＰ今日 18:42

いったん分けて、「masterに反映」ボタンを後で押すみたいなイメージですか？

ホーさん今日 18:42

そうですそうです

ＺＡＰ今日 18:42

OKです。

ホーさん今日 18:43

では、早速 git checkout -b removesample

git checkout -bが、現在の修正を保持したまま新たなブランチを作成するコマンドです

最後のremovesampleがブランチ名になります

ＺＡＰ今日 18:44

Switched to a new branch 'removesample'

ホーさん今日 18:44

OKです

ＺＡＰ今日 18:44

でOKということですね

ホーさん今日 18:44

はい

それでは、修正を反映しましょう

git add .

これで、今のディレクトリ以下の階層で修正した全てのファイルの修正が反映されます(編集済)

ＺＡＰ今日 18:45

なるほど。

ホーさん今日 18:45

打ちましたか？

ＺＡＰ今日 18:45

うちました。

ホーさん今日 18:45

では、git status

として反映状況を確認しましょう

ＺＡＰ今日 18:46

zap@DESKTOP-H0FTP1L:~/liberatelite-backend$ git status ]On branch removesample Changes to be committed: (use "git reset HEAD <file>..." to unstage) modified: now.json modified: package-lock.json modified: package.json modified: util/app.js zap@DESKTOP-H0FTP1L:~/liberatelite-backend$

ホーさん今日 18:46

OKです。

ここまでの操作で、「どのファイルを反映させるか」を定義したことになってます

実際の反映は、次のコマンドです

git commit -m "removed -sample"

コミットというコマンドが、

ファイルの修正をgitに登録するコマンドです

ブロックチェーンに情報を記載するイメージです

ＺＡＰ今日 18:48

あやしいです。

zap@DESKTOP-H0FTP1L:~/liberatelite-backend$ git commit -m "removed -sample" *** Please tell me who you are. Run git config --global user.email "you@example.com" git config --global user.name "Your Name" to set your account's default identity. Omit --global to set the identity only in this repository. fatal: empty ident name (for <zap@DESKTOP-H0FTP1L.localdomain>) not allowed zap@DESKTOP-H0FTP1L:~/liberatelite-backend$

ホーさん今日 18:48

なるほど、gitの設定をしましょう

git config --global user.email "何か（適当でいいです）"

git config --global user.name "ht991121"

ＺＡＰ今日 18:49

本物じゃなくていいんですか？

ホーさん今日 18:49

確か大丈夫です

特にメール来たりしないので

私は捨てメールアドレス登録してます

ＺＡＰ今日 18:50

うちました。

ホーさん今日 18:50

git commit -m "removed -sample"

をもう一度やってみましょう

ＺＡＰ今日 18:51

よさげです。

zap@DESKTOP-H0FTP1L:~/liberatelite-backend$ git commit -m "removed -sample" [removesample 49b9ebf] removed -sample 4 files changed, 48 insertions(+), 48 deletions(-) zap@DESKTOP-H0FTP1L:~/liberatelite-backend$

ホーさん今日 18:51

OKです

ここまででgitへの反映ができましたが、「ローカル」での話なので、これを「リモート（githubサーバ上）」に反映させる必要があります

git push origin removesample(編集済)

ＺＡＰ今日 18:52

あ、まだサーバではないんですね。

ホーさん今日 18:52

はい

あ、ブランチ名違うかも

ＺＡＰ今日 18:52

zap@DESKTOP-H0FTP1L:~/liberatelite-backend$ git push origin removedsample error: src refspec removedsample does not match any. error: failed to push some refs to 'git@github.com:hoosan/liberatelite-backend.git' zap@DESKTOP-H0FTP1L:~/liberatelite-backend$

ホーさん今日 18:53

さっき追加したブランチ名、removesampleでしたかね

ＺＡＰ今日 18:53

removesampleですね。

ホーさん今日 18:53

ちょっとそちらで

git push origin removesample

ＺＡＰ今日 18:54

zap@DESKTOP-H0FTP1L:~/liberatelite-backend$ git push origin removesample The authenticity of host 'github.com (52.192.72.89)' can't be established. RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8. Are you sure you want to continue connecting (yes/no)? y Please type 'yes' or 'no': yes Warning: Permanently added 'github.com,52.192.72.89' (RSA) to the list of known hosts. Counting objects: 25, done. Delta compression using up to 12 threads. Compressing objects: 100% (17/17), done. Writing objects: 100% (25/25), 7.25 KiB | 1.04 MiB/s, done. Total 25 (delta 4), reused 0 (delta 0) remote: Resolving deltas: 100% (4/4), done. remote: remote: Create a pull request for 'removesample' on GitHub by visiting: remote: https://github.com/hoosan/liberatelite-backend/pull/new/removesample remote: To github.com:hoosan/liberatelite-backend.git * [new branch] removesample -> removesample zap@DESKTOP-H0FTP1L:~/liberatelite-backend$

GitHub

Build software better, together

GitHub is where people build software. More than 40 million people use GitHub to discover, fork, and contribute to over 100 million projects.

ホーさん今日 18:55

お、

ＺＡＰ今日 18:55

通ったっぽいです。

ホーさん今日 18:55

ナイスです

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

GitHub

hoosan/liberatelite-backend

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

ここみていただくと

2020-01-13_18.55.40.png

54.65 KB

ブランチが追加されているのがわかると思います

そのよこの、New pull requestというの押してみてください

baseをmaster, compareをremovesampleにします

Able to mergeというコメントが表示されたら、Create pull requestの緑のボタンを押します

2020-01-13_18.57.32.png

78.42 KB

来ました

承認しましたので、これで先ほど行っていただいた修正がmasterに反映されました

ＺＡＰ今日 18:59

なるほど、HP上で承認を要求するんですね。

ホーさん今日 18:59

そうです！

masterでどんどん修正していってもいいんですが、せっかくメンタリングしているので、修正をこちらで確認して問題なければmasterに反映する、という形を取りたいと思います

さて、今ローカルはremovesampleブランチになっています

ローカルをmasterに一度戻しましょう

git checkout master

ＺＡＰ今日 19:01

はい。

ホーさん今日 19:01

今、「ローカルの」masterブランチに切り替わりました

now.jsonを開いていただくと

-sampleがついたままなのではないかと思います

ＺＡＰ今日 19:02

あ、ついてますね。

ホーさん今日 19:02

はい、ではリモートのmasterブランチをローカルに持って来ましょう

git pull

ＺＡＰ今日 19:03

sampleとれました。

ホーさん今日 19:03

OKです

お疲れ様でした

ＺＡＰ今日 19:03

表示されたまま更新されるんですね

ホーさん今日 19:03

そうなんです

VSCodeがその辺自動で再表示してくれます

ということで、流れとして 1. git checkout -b ***** でブランチを作成 2. ファイルを修正 3. git add . 4. git commit -m "コメント" 5. ファイルをさらに修正 6. git add . 7. git commit -m "コメント" ..

として一つのブランチにある程度修正を"コミット"していって

ある程度溜まったらgit push origin ブランチ名

でリモートに反映

メンタリング時に私が確認して、masterに反映

になります

よろしいでしょうか？

ＺＡＰ今日 19:06

わかりました。

これ、masterに反映しない状態で、動作確認ってできるんですか？

ホーさん今日 19:07

はい

ローカルでnow devできます

ブランチ変更した状態でnow devできます

ＺＡＰ今日 19:08

了解です。

ホーさん今日 19:09

最初は私が承認するという形を取りますが、ある程度進んで来てZAPさんのご自分の判断でmasterに反映できるくらいになれば、masterへの反映なども全てご自分でやっていただければと思います

ＺＡＰ今日 19:09

わかりました。

ホーさん今日 19:10

ということで、今後の流れなのですが、zapさんに手を動かしていただきます

ＺＡＰ今日 19:10

はい。

ホーさん今日 19:10

NFTを取得し、その情報を元に、能力値を計算する部分を作りましょう(編集済)

ＺＡＰ今日 19:11

お。

一番不安なのは、今のサンプルで、どんな値が返ってくるのかがわからないことです。

ホーさん今日 19:12

はい

ここで入れていただいたpostmanを使いましょう

Postman立ち上げてみてください

ＺＡＰ今日 19:12

「Good evening, zap!」だそうです。

ホーさん今日 19:13

ww

2020-01-13_19.13.09.png

112.63 KB

こんな感じの画面になってます？

ＺＡＰ今日 19:13

だいたいそうです。

ホーさん今日 19:14

まず、APIの結果の確認ですが

ブラウザでもできますが、こちらを使った方がずっとわかりやすいです

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

これをEnter request urlに入れていただき、

sendを押すと

結果が返って来ます

APIの返値の確認はこれを使います

NFTのAPIを叩いた時にどんな変数が定義されているかを確認するのにお使いください

次に、プログラム中に変数に何が入っているか確認する方法ですが

ＺＡＰ今日 19:17

すいません、

ホーさん今日 19:17

はい

ＺＡＰ今日 19:17

こんな感じの画面ではあったんですが、

今の画面にenter request URL無いんです。

ホーさん今日 19:18

もしかすると左上のNEW押す必要があるかもです

NEW->requestかな。。

ＺＡＰ今日 19:20

できました！

ホーさん今日 19:20

了解です！

次に、プログラム中に変数に何が入っているか確認する方法ですが

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

例えばresultの変数に何が入っているか確認するには ```

console.log(result)

とします

console.log(変数)

です

now devでlocalhostにAPIを立ち上げて

Postmanでhttps://localhost:3000/api/opensea-assets　などAPIを叩くと

Terminalにconsole.logの結果が表示されます

ＺＡＰ今日 19:23

なるほど。

ホーさん今日 19:24

それでは、次回までに、「NFTのAPIを叩いた時のどの変数を使って、どんなロジックで能力値を計算するか」を決めていただいて、

決めたロジックに沿って実際に計算した結果を出力するAPIを作りましょう

次回からは、ZAPさんが書いたコードを元にメンタリングします

ＺＡＰ今日 19:25

わかりました。これ言語の名前なんでしたっけ？

ホーさん今日 19:25

Node.jsです

これまでのメンタリングで、API立ち上げまで一気に説明したので、詳しいところは学習いただければと思います

ＺＡＰ今日 19:26

その辺で検索すれば、今一覧としてデータを取得している中で「２個めのNFTのデータを参照する」とかはわかりそうですかね。

ホーさん今日 19:26

ですね！

今日は以上になります

ＺＡＰ今日 19:27

では、今度はこちらの進捗次第ってことになりますかね。

ホーさん今日 19:27

そうですね、DMやGithubで状況を共有しながら次回日程を決めましょう

ＺＡＰ今日 19:27

わかりました。

ホーさん今日 19:28

それでは、お疲れ様でした！

ＺＡＰ今日 19:28

ありがとうございました。