2019-09-04

DApps作成②

コントラクトというかバックエンド側は一段落したので続いてフロントエンド側を作っていきます。

私はフロントエンド側の経験がほぼないのでここから先はおそらくものすごいペースダウンします＾＾；

せっかくなのでフレームワークを利用してみようかなということでvue.jsを導入して進めていきます！
なぜvueを選んだのかというと…

何か名前よく聞くから覚えておいて損はないかなって適当な理由です；；；

何はともあれvueの導入を進めていきます。

ますはインストール

$ npm install vue
$ npm install --global vue-cli

インストールが完了したらプロジェクトのフォルダにvueのテンプレートを適用します。

プロジェクトのルートで実行
$ vue init webpack-simple

simpleオプションを付けることでその名の通りシンプルな状態で用意してくれるようです。

実行すると何か色々聞かれますがほぼエンターでOK。
他のサイトさんを参考にさせていただいてましたが、vue initはフォルダ内に何かあっても実行できますが、truffle initは空の状態でないと実行できないとのことです。
なのでtruffle init -> vue initの順番で実行しないと失敗します。

initが完了したら

$ npm run dev

と実行するとローカルのブラウザ上で動いてるのが確認できます。

initを実行するとsrcフォルダの中にApp.vueというものが生成されているのでこれを編集していきます。
これをvueとjavascriptを使用してガリガリ編集していくと先ほどのページが編集されていきます。(たぶん)

ただ今vueの参考書を読みつつApp.vueを編集し始めました。

2019-09-03

DApps作成①

制作活動ブロックチェーン

villagerh.hatenablog.com
前回の続き

自作のコントラクトを作ったのでビルドしていきます。

・コントラクトのコンパイル(プロジェクトディレクトリのルートで実行)

$ truffle compile

成功するとbuild/contracts/に.jsが作られます。

これをイーサリアム上にデプロイするといよいよ動きます。

とはいえ削除ができないのにいきなり本番に上げるのは危険すぎるのでテスト環境を用意します。

いくつかあるみたいですが私は
www.trufflesuite.com
こちらのGenacheを導入しました。
導入方法は落としてきてインストールするだけ。

アプリを実行するとどう動かすかが出るのでとりあえずQUICKLYで動かしてます。

ローカルのGenacheにデプロイするようにtruffle-config.jsを編集していきます。

module.exports = {
の中に以下を設定
networks: {
    development: {
        host:'127.0.0.1', // Genacheのアプリ上に表示されているアドレス
        port:7545, // 同上
        network_id:'*'
    }

次にマイグレーフォンファイルを設定します。
migrations/に1_initial_migration.jsが既に入っているはずなのでそれを参考にしつつ作成していきます。
数字の順番にデプロイされていくため2_initial_migration.jsを作成

var UnitFactory = artifacts.require("./UnitFactory.sol"); 
                                                          
module.exports = function(deployer) {                     
  deployer.deploy(UnitFactory);                           
};

これでマイグレーション(デプロイ)するための準備ができたので実行していきます。
プロジェクトのルートで実行

$ truffle migrate

1度マイグレーションを行うと最後に行ったファイルの次のマイグレーションファイルから実行されます。
コントラクトの修正などを行って再度上げたい場合は--resetオプションを付けて実行。

$ truffle migrate --reset

これでローカルのブロックチェーン上に自作のコントラクトがデプロイされるため実行できるようになります。ｄ

2019-09-01

作り始め(Truffle導入)

ブロックチェーン制作活動

せっかく覚えたのでオリジナルのDAppを作ってみなくては！ということで作り始めました。

いきなり重たいものを作るのは難しいと思うのでCryptoZombiesを参考にしつつの簡単なものを作ろうかなと。

DAppの作り方で調べたところTruffleという便利な開発環境があるようなのでそれを導入して覚えつつの制作です。

以下私の環境でのTruffle導入手順です。

○Truffleのインストール
・Truffleをインストールするためにnpmをインストールする

$ brew install npm
インストールされているか確認
$ npm -v
6.10.3

・Truffleのインストール

$ npm install -g truffle
インストールされているか確認
$ truffle version
Truffle v5.0.34 (core: 5.0.34)
Solidity v0.5.8 (solc-js)
Node v12.9.1
Web3.js v1.2.1

○Truffleを用いた環境構築

$ mkdir project
$ cd project
$ truffle init

truffle initを行うことでそのフォルダにTruffle環境を構築してくれます。
contractsといったフォルダができているのでそこにスマートコントラクタをいよいよ自作開始です。

2019-09-01

CryptoZombies

ブロックチェーン

cryptozombies.io
CryptoZombiesの入門的な項目が一通り完了しました！

おかげでようやくブロックチェーンとフロントアプリとの結びつきがわかってきたかなというところです。

最低限の入門周りは済んだのかなという気がしているのでそろそろ実際に手を動かして何か作ってみたいですね！
フロントエンドがさっぱりな人間なので今度はそちらを勉強しつつといった感じではありますが＾＾；；；

2019-08-30

イベント

ブロックチェーン

cryptobowl.connpass.com
こちらのブロックチェーン関連のイベント？勉強会？に参加してきました。
こういった会に参加するのは初めてだったので登壇するわけでもないのにちょっと緊張でしたｗ

内容は完全な技術系というわけでなく業界全体についてのお話がメインでしたが
実際に業界に関わっている方の事業内容や今後の予測などが聞けて非常に有意義な時間でした。

欲を言えばQA時間が足りずに全ての質問の回答がいただけなかったので答えらえなかった問の回答も聞いてみたかったかなというところです。

一番印象に残っているのは登壇者の方の回答ではないのですが
参加されていた方の多くはエンジニアではなかったということです。

こういったイベントに来るのはエンジニアの方が多いのだろうと思っていたのですが
参加希望者の人数からおおよそ50人程度はいらっしゃったかと思われますが私の席から見えた範囲だと数名程度、全体を見渡していないのでわかりませんがおそらく全体で10名前後だったのかなと。
エンジニアの方以外も大勢来ていらっしゃる辺り注目されている技術なんだなということが感じられました。

今までこういったイベントには参加してきませんでしたが
よい刺激になりますし今後はなるべく参加していきたいところです。

2019-08-29

スマートコントラクト関連

ブロックチェーン

CryptoZombiesを進めてますがまだSolidityの文法関連が多めな感じなので
その辺りは一旦スルーしつつ文法以外の部分で覚えておきたい部分のメモ。

・ブロックチェーン上にデプロイしたスマートコントラクトは書き換えや上書きが出来なくなるので注意
・コントラクトを呼び出したりするのにはコストがかかる
・ブロックチェーン上にデータを残せば残すほどコストがたくさんかかる
・string型はもっともコストが高い
・コスト削減のために非効率なコードを書いた方が良い場合もある
・view(参照専用)関数はコストがかからない