マイクリハッカソン -ディレクトリ構造編-

コロナです。
今回は、マイクリハッカソン報告の続きでディレクトリ構造編となります

ソースコードのURLはこちらになります

スマートコントラクトを実行するときですが、以下のようなディレクトリ構成で開発をしていました。

ディレクトリ構成

.firebase
firebaseのキャッシュファイルを格納
firebase.json
ログイン用のhtmlファイルのリダイレクト設定。
　 ファイルの除外設定
app
css
default.css アプリ上で実際に使っているCSS
images PWA用の画像ファイルを格納しているディレクトリ
js
extension_asset_abi.js エクステンションのコントラクトアドレスと、abiファイル設定を記述したjs
hero_asset_abi.js ヒーローアセットのコントラクトアドレスと、abiファイル設定を記述したjs
　　land_logic.js マイクリランドの表示用ロジックを記述したjs
land_sector_asset_abi.js 本アプリでは使わず
mch_meta_marking_abi.js 本アプリでは使わず
netowrk.js マイクリapi実行用のメソッドを集めています。jqueryで作成しています
404.html 実行されたURLが存在しないときに開かれるhtml
heroDetail.html ヒーロー情報の詳細html
index.html ランド展示場のトップページのhtml
login.html ランド展示場のログインページのhtml
manifest.json firebaseのトップページ、アイコン情報などを含めたjsonファイル
registPlusMeta.html コメント登録ページ ＊こちらは、チームメイトのbankerさんに作成していただきました

概要レベルでスマートコントラクトの処理の追加例

1. app/jsフォルダに xxxx_asset_abi.jsというファイル名を用意する
1-1.スマートコントラクトの設定内容を記述します
xxxAssetAbi = ethscan等にあるabiファイルの内容;
xxxAssetAddress = "スマートコントラクトのアドレス";
1-2.htmlかロジック用のjsファイルに内容を記述する

// ヒーローアセットに接続するインスタンスを返す
function getHeroAssetContract() {
// ヒーローアセットの例
const abi = heroAssetAbi;
// スマートコントラクトで通信するアドレスを設定する
const contractAddress = heroAssetAddress;
// 設定しているabiとアドレスで、インスタンスを生成する
const contract = web3js.eth.contract(abi).at(contractAddress);
// ヒーローアセットコントラクトを生成して返す
return contract;
}

// ヒーローアセットのインスタンス生成を呼び出す
heroAsset = getHeroAssetContract();

// ヒーローの一覧総数を取得する場合
// ownerAddressがログインしているアドレス
heroAsset.balanceOf(ownerAddress, (err, result) =>{
// ヒーローの総数に応じて、一覧画面を生成する
});

過去の記事に書いていた通りブロックチェーン×エンタメでの個人的な活動を定期報告をしてまいります。
本ブログ記事が学生さんたちの目に留まってブロックチェーンエンジニア増加に役立ってくれればと思います
jqueryで実装しているので、「フレームワークjsまではまだ...」というかたのお手伝いになれば幸いです
＊「もっといい感じに作っているよ」等がある方はどんどん共有してください

web3jsのコード改修もしていきます