Blockstack Tutorialをやってみた

みなさん、こんにちは。HashHubインターンのたかてぃ(冨澤)です。最近同級生(97年世代)が就活を始めたり社会人になる子が増えてきていて、色んな意味で焦ったり働くって何だろうって考えたりしています。


さて今回の記事は、4/3(水)にHashHubで行われるイベントDappsに興味がある人向け「Blockstackを触ってみよう!」で紹介するBlockstackのTutorialまとめです。Blockstackの公式サイトから始める事が出来るので是非確認して下さい。では、Tutorial通りに進めて紹介して行きます。


Hello,Blockstack Tutorial

今回紹介するTutorialのゴールは、Blockstack アプリケーションをビルドする事です。

前提条件

・npmが使える事
・Blockstack IDを持っている事

僕自身Blockstack IDを持っていなかったので、ここからのスタートです。

Blockstack IDを作成

こちらのページに書かれている通りに作成して行きます。

1 上記のURLをクリックし、Create new IDを選択

こちらで作成するBlockstack IDは、Blockstack上で作られた全てのDappsで使用が可能です。つまり、他のDappsで生まれたデータはこのIDに紐づけられているという事ですね。

2 ユーザー名を決定

ここで、ユーザー名を入力します。Check Availabilityをクリックし、使用可能なIDなら左の画像の様にContinueボタンが表示されます。

3 パスワードを作成し、メールアドレスの入力

ここに入力したメールアドレスに、IDを紛失した際の復旧情報が送られます。無くさない様にしましょう。

4 復元する為の単語を入力

Secret Recovery Keyをクリックし、12個の単語を保存します。そしてその後に聞かれた番号の単語を選択し、Continueをクリックすれば完成です!

さて、ここまで上手くいけば10分もかからないと思います。続けて行きます。

npmを使ってYeomanとBlockstack application generatorのインストール

1 Yeoman のインストール

npm install -g yo

2 Blockstack application generatorのインストール

npm install -g generator-blockstack
Blockstack applicationの作成

1 ディレクトリを作成し、移動。

mkdir hello-world-tutorial
cd hello-world-tutorial

2 Yeomanと Blockstack application generatorを使用してアプリケーションを作成

yo blockstack

すると対話型の表示が出てくるので、受け答えをすると、

?====================================================================We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
=================================================================Yes
_-----_     ╭──────────────────────────╮
|       |    │      Welcome to the      │
|--(o)--|    │      Blockstack app      │
`---------´   │        generator!        │
( _´U`_ )    ╰──────────────────────────╯
/___A___\   /
|  ~  |
__'.___.'__
´   `  |° ´ Y `
? Are you ready to build a Blockstack app? Yes

またこれに成功すると、

......
create public/robots.txt
create public/manifest.json
I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.

の様に表示されます。これで、先ほど作成したディレクトリにいくつかのファイルが作られているはずです。確認してみて下さい。

サーバーを起動してアプリケーションを確認する

1 アプリケーションサーバーを起動

npm start

2 自分のブラウザで、https://localhost:8080にアクセス

アクセスに成功するとこの様な画面が表示されます。

3 Sign In with Blockstackをクリックし、先ほど作成したIDでログイン

Sign inをクリックするとこの画面に移り、先ほど作成したIDが選択出来る様になっています。選択すると、上記の画面でログインした状態になります。

Githubにアプリケーションコードを保存

1 リポジトリを作成

git init

2 ファイルを全て加えてコミットする

git add . && git commit -m "first commit"

3 Githubで、hello-blockstackリポジトリを作成。

4 リモートリポジトリの追加

git remote add origin git@github.com:YOUR_USERNAME_HERE/hello-blockstack.git

5 リモートリポジトリのマスターブランチにコードをPush

git push origin master

はい、お疲れ様です。ここまでが、このTutorialの内容でした。今回は内容に沿ってそのまま進めていて、コードの中身はあまり触れていないので次回以降にどの様な処理が行われているかの記事を書こうかなと思っています。僕自身もっとBlockstackの事を勉強しないといけないので、その辺りも随時記事を書いて行きます。


お知らせ

■HashHubでは入居者募集中です!
HashHubは、ブロックチェーン業界で働いている人のためのコワーキングスペースを運営しています。ご利用をご検討の方は、下記のWEBサイトからお問い合わせください。また、最新情報はTwitterで発信中です。

HashHub:https://hashhub.tokyo/
Twitter:https://twitter.com/HashHub_Tokyo

■ブロックチェーンエンジニア集中講座開講中!
HashHubではブロックチェーンエンジニアを育成するための短期集中講座を開講しています。お申込み、詳細は下記のページをご覧ください。

ブロックチェーンエンジニア集中講座:https://www.blockchain-edu.jp/

■HashHubでは下記のポジションを積極採用中です!
・コミュニティマネージャー
・ブロックチェーン技術者・開発者
・ビジネスディベロップメント

詳細は下記Wantedlyのページをご覧ください。

Wantedly:https://www.wantedly.com/companies/hashhub/projects