blockchain:drizzleを使たdapps開発

差分

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

この比較画面へのリンク

--- blockchain:drizzleを使たdapps開発 [2022/04/30 07:48] – 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>
@@ 行 18: / 行 29: @@
 </code>
-===== 設定 =====
+==== 設定 ====
 生成された「truffle-config.js」は古い形式であるため、「develop:」を「development:」に修正します。
@@ 行 39: / 行 50: @@
 };
 </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開発.1651304891.txt.gz · 最終更新: 2022/04/30 07:48 by dot