====== Drizzleを使ったDApps開発 ======

「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://visualstudio.microsoft.com/ja/thank-you-downloading-visual-studio/?sku=BuildTools|Windows10にてNode環境構築によくあるエラー]]

==== プロジェクトの生成 ====

<code PowerShell>
> mkdir drizzle_project
> cd drizzle_project
> 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>

ブラウザが起動してデモが動作しているはずです。

===== 独自機能の追加 =====