差分

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

--- blockchain:drizzleを使たdapps開発 [2022/04/29 07:49] – dot
+++ blockchain:drizzleを使たdapps開発 [2022/05/06 01:46] (現在) – dot
@@ 行 1: / 行 1: @@
 ====== Drizzleを使ったDApps開発 ======
+「truffle unbox drizzle」を実行すると、スマートコントラクトを開発するための truffle プロジェクト、フロントエンドを開発するための drizzle(+React) の雛形を生成することができます。雛形は既に動作しますので、そこに変更を加えることで、独自の DApps を開発していきます。(もちろん手動で各種ファイルを作成していく方法も可能です。)
-===== インストール =====
+===== react-app の生成 =====
-:!: Windows の場合、以下の npm パッケージが必要な場合があります。
 <code PowerShell>
-> npm install --global --production windows-build-tools
+> npm install create-react-app
+> mkdir my_drizzle
+> cd my_drizzle
+> create-react-app .
+> npm install --save @drizzle/react-plugin @drizzle/store
 </code>
+===== デモの実行 =====
+==== ビルドに必要なパッケージをインストール ====
-<code PowerShell>
+:!: Windows の場合です。
-my_project> npx create-react-app client
-Need to install the following packages:
-  create-react-app
-Ok to proceed? (y) y
-npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
-Creating a new React app in C:\Users\shinobu\NoNameSeminer\ethereum\my_project\client.
+[[https://visualstudio.microsoft.com/ja/thank-you-downloading-visual-studio/?sku=BuildTools|Windows10にてNode環境構築によくあるエラー]]
-Installing packages. This might take a couple of minutes.
+==== プロジェクトの生成 ====
-Installing react, react-dom, and react-scripts with cra-template...
+<code PowerShell>
+> mkdir drizzle_project
+> cd drizzle_project
+> truffle unbox drizzle
+</code>
-added 1379 packages in 7m
+==== 設定 ====
-packages are looking for funding
+生成された「truffle-config.js」は古い形式であるため、「develop:」を「development:」に修正します。
-  run `npm fund` for details
+また、使用する ethereum ブロックチェーンによって host と port も変更します。
-Initialized a git repository.
+<code JavaScript>
+const path = require("path");
-Installing template dependencies using npm...
+module.exports = {
-npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
+  // 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>
-added 39 packages in 42s
+==== npm パッケージのインストール ====
-packages are looking for funding
+まずは drizzle_project ディレクトリの直下で npm パッケージをインストールします。
-  run `npm fund` for details
-Removing template package using npm...
+<code PowerShell>
+drizzle_project> npm install
+</code>
-removed 1 package, and audited 1418 packages in 17s
+続いて、drizzle_project/app ディレクトリ直下で npm パッケージをインストールします。
-packages are looking for funding
+<code PowerShell>
-  run `npm fund` for details
+drizzle_project/app> npm install
+</code>
-moderate severity vulnerabilities
+==== スマートコントラクトのデプロイ ====
-To address all issues (including breaking changes), run:
+drizzle_project ディレクトリの直下で以下を実行します。
-  npm audit fix --force
-Run `npm audit` for details.
+<code PowerShell>
+drizzle_project> truffle migrate
+</code>
-Created git commit.
+==== 実行 ====
-Success! Created client at C:\Users\shinobu\NoNameSeminer\ethereum\my_project\client
+drizzle_project/app ディレクトリ直下で以下を実行します。
-Inside that directory, you can run several commands:
-  npm start
+<code PowerShell>
-    Starts the development server.
+drizzle_project/app> npm start
+</code>
-  npm run build
-    Bundles the app into static files for production.
-  npm test
+ブラウザが起動してデモが動作しているはずです。
-    Starts the test runner.
-  npm run eject
+===== 独自機能の追加 =====
-    Removes this tool and copies build dependencies, configuration files
-    and scripts into the app directory. If you do this, you can’t go back!
-We suggest that you begin by typing:
-  cd client
-  npm start
-Happy hacking!
-PS C:\Users\shinobu\NoNameSeminer\ethereum\my_project>
-</code>