Ethereum matsushin

Solidity × Nuxt.jsで投票アプリを実装してFirebaseに公開してみた

Solidity、Nuxt.jsを利用して簡単な投票アプリを実装しました。

最近はNEM関連の記事をいくつか書いていましたがそろそろEthereumの方ももっと理解を深めたいと思っていました。

 また成果物が大事と最近記事を書いたばかりなので、転職するわけではないですが成果物にこだわってみようと思い誰でもアクセスして触れるところまで作ってみました！

現役エンジニアが語る！中途採用・未経験でwebエンジニアに転職したいなら成果物にこだわろう

2018年8月7日

 

さらには最近Nuxt.jsが注目されていると聞いたので、使っています。

 

実装した感想としてはSolidityでも少しハマりましたが、Nuxt.jsでハマっている時間の方が長かった気がします。

Nuxt.jsの公式サイトにはお世話になりっぱなしでした。

ただ以前Solidityの学習から少し期間が空いていたので開発の流れを思い出したりNuxt.jsもイチから学んで動くものが作れたので、ハマった分かなり良い勉強になりました。

ちなみに実装開始して公開するところまでざっと1日半ほどかかっています。

 

SolidityとNuxt.jsで作ったアプリについて

できることとしては投票なので候補者一覧を取得して、投票して結果を見れます。スマートコントラクト側では候補者情報、投票処理、投票結果を管理しています。

あと公開の流れとしてはInfuraを利用してRopstenテストネットにコントラクトをデプロイし、そしてFirebaseにコードをデプロイして公開しました。

なのでアプリを利用する際はMetaMaskでRopstenテストネットのアカウントに切り替えてお試しください。

完成したアプリはこちら。コードはこちら。

Dapps nuxt vote

 

Solidityのコードは公式ドキュメントのものを参考にしているのでまだ良いのですが、Nuxt.jsのコードはまだまだ改良の余地がありそうです。

もう少しリファクタを進めるか、また次のアプリ開発に進むか迷うところです。

もしくはSolidity側も改良して候補者もブラウザ側から選択して自由に投票イベントまで作れるようにすると面白いかもしれません。

 

実装のポイント

 Solidityの特徴としてはメソッドの返り値として多次元配列を返却できません。さらにはstringの配列も2次元配列扱いされるので返却できないです。

なので候補者名を1つずつ表示するために、まずは候補者数を取得してからループで候補者名を1人ずつ取得するという手順になっています。

 

実装でハマった箇所

色々ハマりました。。

 

SolidityではGasの利用周りと、Nuxt.jsではストアを利用したコードの書き方がよくわからず少し時間かかりました。

ですが、Nuxt.jsでのvuexという技術ではReactでいうReduxと基本的な考え方は同じFluxなので理解自体はすぐできました。

あとweb3の設定においてfetchメソッド内でwindowオブジェクトを取得しようとしたのですがコンポーネントがロードされる前に毎回呼び出しているため、おそらくレンダリングがされていないため取得できなかったです。ここは結局解決方法は分からず、レンダリング後のイベントにフックさせたタイミングでwindowオブジェクトを取得するようにしました。

ちなみに後々わかりましたがwindowオブジェクトを利用する必要自体はなかったぽいです。

 

今回実装にあたって参考にした記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。