差分

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

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