blockchain:drizzleを使たdapps開発

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- blockchain:drizzleを使たdapps開発 [2022/04/30 07:35] – dot
+++ blockchain:drizzleを使たdapps開発 [2022/05/06 01:46] (現在) – dot
@@ 行 3: / 行 3: @@
 「truffle unbox drizzle」を実行すると、スマートコントラクトを開発するための truffle プロジェクト、フロントエンドを開発するための drizzle(+React) の雛形を生成することができます。雛形は既に動作しますので、そこに変更を加えることで、独自の DApps を開発していきます。(もちろん手動で各種ファイルを作成していく方法も可能です。)
+===== react-app の生成 =====
-===== プロジェクトの生成 =====
+<code PowerShell>
+> npm install create-react-app
+> mkdir my_drizzle
+> cd my_drizzle
+> create-react-app .
+> npm install --save @drizzle/react-plugin @drizzle/store
+</code>
-:!: Windows の場合、以下作業が必要な場合があります。
+===== デモの実行 =====
-[[https://qiita.com/pokoTan2525/items/144866019dd2646568cf|node.jsのエラー解決方法]]
+==== ビルドに必要なパッケージをインストール ====
+:!: Windows の場合です。
+[[https://visualstudio.microsoft.com/ja/thank-you-downloading-visual-studio/?sku=BuildTools|Windows10にてNode環境構築によくあるエラー]]
+==== プロジェクトの生成 ====
 <code PowerShell>
@@ 行 17: / 行 28: @@
 > truffle unbox drizzle
 </code>
+==== 設定 ====
+生成された「truffle-config.js」は古い形式であるため、「develop:」を「development:」に修正します。
+また、使用する ethereum ブロックチェーンによって host と port も変更します。
+<code JavaScript>
+const path = require("path");
+module.exports = {
+  // See <http://truffleframework.com/docs/advanced/configuration>
+  // to customize your Truffle configuration!
+  contracts_build_directory: path.join(__dirname, "app/src/contracts"),
+  networks: {
+    development: { // default with truffle unbox is 7545, but we can use develop to test changes, ex. truffle migrate --network develop
+      host: "127.0.0.1",
+      port: 8545,
+      network_id: "*"
+    }
+  }
+};
+</code>
+==== npm パッケージのインストール ====
+まずは drizzle_project ディレクトリの直下で npm パッケージをインストールします。
+<code PowerShell>
+drizzle_project> npm install
+</code>
+続いて、drizzle_project/app ディレクトリ直下で npm パッケージをインストールします。
+<code PowerShell>
+drizzle_project/app> npm install
+</code>
+==== スマートコントラクトのデプロイ ====
+drizzle_project ディレクトリの直下で以下を実行します。
+<code PowerShell>
+drizzle_project> truffle migrate
+</code>
+==== 実行 ====
+drizzle_project/app ディレクトリ直下で以下を実行します。
+<code PowerShell>
+drizzle_project/app> npm start
+</code>
+ブラウザが起動してデモが動作しているはずです。
+===== 独自機能の追加 =====

blockchain/drizzleを使たdapps開発.1651304156.txt.gz · 最終更新: 2022/04/30 07:35 by dot