update structure and content for dapps module

README.md

@@ -59,14 +59,12 @@ This repo contains all the content for development of blockchain Learn modules.
 ### Module: Create a decentralized application
 
 1. Introduction
-2. Understand decentralized applications
-3. Learn the options to build decentralized applications
-4. What frontend UI framework you need to know
-5. Exercise: Create the app
-6. UI/UX best practices
-7. Integrate with your smart contracts
-8. Knowledge check
-9. Summary
+2. Learn about dapps
+3. Learn the technologies for building dapps
+4. Exercise - Get started with Drizzle
+5. Exercise - Create a dapp for a shipping contract
+6. Knowledge check
+7. Summary
 
 **Status:** Planning
 

create-decentralized-apps/2-learn-dapps.yml

@@ -1,14 +1,14 @@
 ### YamlMime:ModuleUnit
 uid: 
 metadata:
-  title: Learn about decentralized apps
+  title: Learn about dapps
   description: Understand the importance of dapps for the Ethereum blockchain
   ms.date: 
   author: meaghanlewis
   ms.author: shanama
   ms.topic: interactive-tutorial
   ms.prod: learning-azure
-title: Learn about decentralized apps
+title: Learn about dapps
 durationInMinutes: 1
 content: |
-  [!include[](includes/1-introduction.md)]
+  [!include[](includes/2-learn-dapps.md)]

create-decentralized-apps/3-learn-drizzle.yml

@@ -0,0 +1,14 @@
+### YamlMime:ModuleUnit
+uid: 
+metadata:
+  title: Learn about Drizzle
+  description: Understand what Drizzle is and how it's architecture works.
+  ms.date: 
+  author: meaghanlewis
+  ms.author: shanama
+  ms.topic: interactive-tutorial
+  ms.prod: learning-azure
+title: Learn about Drizzle
+durationInMinutes: 1
+content: |
+  [!include[](includes/3-learn-drizzle.md)]

create-decentralized-apps/4-drizzle-dapp.yml

@@ -0,0 +1,14 @@
+### YamlMime:ModuleUnit
+uid: 
+metadata:
+  title: Exercise -  Get started with Drizzle
+  description: Use Drizzle to create your first dapp.
+  ms.date: 
+  author: meaghanlewis
+  ms.author: shanama
+  ms.topic: interactive-tutorial
+  ms.prod: learning-azure
+title: Exercise -  Get started with Drizzle
+durationInMinutes: 1
+content: |
+  [!include[](includes/4-drizzle-dapp.md)]

create-decentralized-apps/5-shipping-dapp.yml

@@ -0,0 +1,14 @@
+### YamlMime:ModuleUnit
+uid: 
+metadata:
+  title: Exercise - Create a dapp for a shipping contract
+  description: Use Drizzle to create a dapp for a shipping contract.
+  ms.date: 
+  author: meaghanlewis
+  ms.author: shanama
+  ms.topic: interactive-tutorial
+  ms.prod: learning-azure
+title: Exercise - Create a dapp for a shipping contract
+durationInMinutes: 1
+content: |
+  [!include[](includes/5-shipping-dapp.md)]

create-decentralized-apps/7-summary.yml

@@ -0,0 +1,59 @@
+### YamlMime:ModuleUnit
+uid: 
+metadata:
+  title: Summary
+  description: Summary
+  ms.date: 
+  author: meaghanlewis
+  ms.author: shanama
+  ms.topic: interactive-tutorial
+  ms.prod: learning-azure
+title: Summary
+durationInMinutes: 1
+content: |
+  [!include[](includes/7-summary.md)]
+quiz:
+  title: Check your knowledge
+  questions:
+  - content: "What are smart contracts?"
+    choices:
+    - content: "Programs to send cryptocurrency."
+      isCorrect: false
+      explanation: "They are often used for much more than cryptocurrency."
+    - content: "Programs that generate and send tokens"
+      isCorrect: false
+      explanation: "Tokens are often associated with smart contracts but are focused on more than just that aspect."
+    - content: "Programs stored inside of a blockchain that represent an agreement between parties sending digital assets"
+      isCorrect: true
+      explanation: "Correct! Smart contracts are stored in blockchains and can represent the transfer of any digital asset."
+    - content: "Programs stored external to a blockchain that must be signed by participants"
+      isCorrect: false
+      explanation: "Almost there. But smart contracts are stored inside blockchains not externally."  
+  - content: "When you create a new project with the Blockchain Development Kit for Ethereum, what is automatically generated in the project folder?"
+    choices:
+    - content: "A contracts directory"
+      isCorrect: false
+      explanation: "A contracts  directory with a couple contracts is generated, but that's not all."
+    - content: "A tests directory"
+      isCorrect: false
+      explanation: "There is a contracts directory and tests that are generated, but there's more to it than that"
+    - content: "A migrations directory"
+      isCorrect: false
+      explanation: "A migrations directory is created with two migrations. Migrations must exist with a contract, so there must be a contract that exists as well."
+    - content: "All of the above"
+      isCorrect: true
+      explanation: "Correct! A new project generates contracts, migrations, and tests. That way you can build off these examples to create your own smart contract projects."
+  - content: "What option that best completes this sentence: Truffle is ______ ?"
+    choices:
+    - content: "A command line utility to create smart contracts"
+      isCorrect: false
+      explanation: "Not quite. This describes one part of what Truffle helps with, but it provides many more utilities other than creating smart contracts and is typically not described as a command line utility."
+    - content: "A development environment, testing framework, and asset pipeline for blockchains"
+      isCorrect: true
+      explanation: "Truffle is described as a development framework which makes it easy manage smart contracts from creation to testing to deployment."
+    - content: "A personal blockchain Ethereum development tool to deploy contracts"
+      isCorrect: false
+      explanation: "This best describes Ganache, a tool in the Truffle Suite to view the activities happening in your blockchain."
+    - content: "A library to make it easier to write blockchain applications"
+      isCorrect: false
+      explanation: "this best describes Drizzle, a tool in the Truffle Suite to help easily create decentralized applications."         

create-decentralized-apps/includes/1-introduction.md

@@ -1,6 +1,8 @@
 # Introduction
 
-Decentralized apps, or dapps, are UI applications that have backend code running on a decentralize peer-to-peer network. A dapp has frontend code and UI that is hooked up in the backend to smart contracts.
+Blockchain products are useful for a variety of use cases ranging from supply-chain management to decentralized finance. Blockchain technology is being used across major markets and geographies. As the utilization of blockchain has increased and evolved, so has the development of blockchain applications.
+
+Decentralized apps, or dapps, are user interface applications that have code running on a blockchain network. A dapp has frontend code and UI that is hooked up in the backend to smart contracts.
 
 In this module, you'll learn all about dapps and how to build your own.
 
@@ -10,10 +12,11 @@ By the end of this module you will be able to:
 
 - Explain what decentralized apps are
 - Identify the technology needed to create decentralized apps
-- Learn how to use Drizzle to create apps
+- Know how to use Drizzle to create apps
 - Build your own decentralized apps
 
 ## Prerequisites
+
 - [Fundamental knowledge about blockchain](https://docs.microsoft.com/learn/modules/intro-to-blockchain/?azure-portal=true)
 - [Solidity programming knowledge](https://docs.microsoft.com/learn/modules/blockchain-learning-solidity/?azure-portal=true)
 - [Ethereum smart contract knowledge](https://docs.microsoft.com/learn/modules/blockchain-solidity-ethereum-smart-contracts/?azure-portal=true)
@@ -22,4 +25,5 @@ By the end of this module you will be able to:
 - Familiarity with the command line to create new directories and install programs
 - Node.js installed
 - Truffle and Ganache CLI installed
-- Visual Studio Code installed
+- Visual Studio Code installed
+- Blockchain Development Kit for Ethereum installed

create-decentralized-apps/includes/2-dapps.md

@@ -1 +0,0 @@
-# Learn about decentralized apps

create-decentralized-apps/includes/2-learn-dapps.md

@@ -0,0 +1,30 @@
+# Learn about dapps
+
+A [dapp](https://ethereum.org/en/developers/docs/dapps/), or a
+decentralized application,  uses smart contracts which
+execute on a blockchain network and allows users to interact with the application interface either through a web browser or mobile app.
+
+## How do dapps operate
+
+[Dapps](https://ethereum.org/en/developers/docs/dapps/) differ from traditional applications in that they do not rely on a centralized server network, but instead operate on a decentralized peer-to-peer blockchain network.
+
+A dapp can have frontend code written in any language, just like a traditional web app, that can make calls to its backend. With dapps, the backend are smart contracts that are executed on a blockchain.
+
+Dapps are:
+
+- **Decentralized** which means that they execute independently on a decentralized network and not controlled by a centralized authority.
+- **Deterministic** which means that they perform the same function independent of which environment executes the code.
+- **[Turing complete](https://en.wikipedia.org/wiki/Turing_completeness)**, which means that they can perform any action which can be coded.
+- **Isolated** which means they are executed in a virtual environment known as
+[Ethereum Virtual Machine](https://ethereum.org/en/developers/docs/evm/) so that bugs or other problems won't affect other blocks or the normal functioning of the blockchain network.
+
+## Benefits of dapp development
+
+Outside of providing a way for users to interact with the blockchain network in an easy and visual way, dapps also provide the additional benefits:
+
+- **Zero downtime** once the underlying smart contract and app are deployed on the blockchain network, the network will always be available to serve clients looking to interact with the contract.
+- **Privacy** users don't need to provide their true real-world identity to interact with a dapp.
+- **Censorship resistance** no entity on the network can prevent users from using the dapp in any way.
+- **Data integrity** since data stored on the blockchain is immutable, it is not possible for bad actors to modify or falsify data and transactions.
+- **Verifiable behavior** smart contracts and their dapps are guaranteed to execute in a predictable way without a central authority.
+

create-decentralized-apps/includes/3-learn-drizzle.md

@@ -0,0 +1,49 @@
+# Learn about Drizzle
+
+In past modules, we have introduced the [Truffle Suite](https://www.trufflesuite.com/), a set of tools to make blockchain development easier. And we have used [Truffle](https://www.trufflesuite.com/truffle) and [Ganache CLI](https://www.trufflesuite.com/ganache) previously to help with the development, deployment and testing of smart contracts.
+
+In this unit, we will introduce the next member of the Truffle Suite, [Drizzle](https://www.trufflesuite.com/drizzle). Drizzle is a collection of front-end libraries that make writing dapp user interfaces easier and more predictable.
+
+:::image type="content" source="media\drizzle.png" alt-text="Image showing the Drizzle homepage":::
+
+## Drizzle architecture
+
+Before getting into how to use Drizzle, let's focus on the architecture so you know the different parts of the library that you can use to build your dapp.
+
+Drizzle is completely modular, which means you can use as much or as little of the library portions as you like.
+
+There are three core packages:
+
+- **drizzle** The core library responsible for account and contract instantiation and wiring up the smart contracts.
+- **drizzle-react** Makes it easier to connect Drizzle with your React app.
+- **drizzle-react-components** A library of useful components for common dapp functions
+:::image type="content" source="media\modular-overview.png" alt-text="Image showing the Drizzle's architecture overview":::
+
+### Underlying technologies
+
+Drizzle provides the mechanisms for synchronizing and managing smart contract data and is based on a [Redux](https://redux.js.org/) store.
+
+Underlying Technologies for managing the frontend apps which interact with the smart contacts can communicate via an API using a JSON-RPC layer called the Web3 API.
+
+- [JSON-RPC](https://www.jsonrpc.org/specification) is a stateless,light-weight remote procedure call (RPC) protocol using JSON for the payload.
+
+- [Web3](http://web3) is the Ethereum compatible javascript API and bindings which is built using the JSON-RPC spec. Any decentralized app can use this s Web3.js for browser based DApps.
+
+- [Redux](https://redux.js.org/) is a predictable state container for JavaScript apps.
+
+- [React.js](https://reactjs.org/) is a JavaScript library for building user interfaces.
+
+## Drizzle components
+
+Drizzle includes the following components:
+
+- [\@drizzle/store](https://github.com/trufflesuite/drizzle/blob/develop/packages/store/README.md) is the state manager of Drizzle. It handles the boilerplate for web3 connection as synchronizing Smart Contract state and events.
+  - Fully reactive contract data, including state, events and transactions.
+  - Declarative so as not to waste valuable cycles on unneeded data.
+  - Maintains access to underlying functionality. Web3 and contract's methods are still there, untouched.
+- [\@drizzle/react-plugin](https://github.com/trufflesuite/drizzle/tree/master/packages/react-plugin) defines the Drizzle Provider for a React project.
+  - Abstracts away the boilerplate of creating a dapp front-end
+  - Handles instantiating web3 and contracts, fetching accounts, and keeping all of this data in sync with the blockchain.
+- [\@drizzle/react-components](https://github.com/trufflesuite/drizzle/tree/master/packages/react-components) is a collection of primitive web controls that transforms smart contract data types to their appropriate html controls.
+  - Provides a set of useful components for common UI elements.
+- [\@drizzle/vue-plugin](https://github.com/trufflesuite/drizzle/blob/develop/packages/vue-plugin/README.md) a Vue adaptor and collection of html controls to support developing a Vue dapp.

create-decentralized-apps/includes/4-drizzle-dapp.md

@@ -0,0 +1,168 @@
+# Exercise -  Get started with Drizzle
+
+We can use [Truffle Boxes](https://www.trufflesuite.com/boxes) as boilerplates that can contain helpful modules, Solidity contracts & libraries, front-end views and more; all the way up to complete
+example dapps.
+
+For this exercise we'll be using [**Drizzle-box**](https://www.trufflesuite.com/boxes/drizzle) to build our first dapp and give you an overview of Drizzle's capabilities.
+
+The **Drizzle** box comes with several out of the box smart contracts to check out and a
+simplified **truffle-config.js** designed for development and testing.
+If using a prior **truffle project,** first create a clean and empty
+folder, **unbox** **Drizzle**, then copy over the current project -
+smart contracts, migrations, and other project-specific files.
+
+Using Drizzle to wire smart contacts to a front-end server
+----------------------------------------------------------
+
+Unboxing Drizzle results in essentially two separate projects within a
+single directory: a **truffle** project and a **drizzle-react client**
+project**.** If you already have experience with **Truffle**, then
+directory structure will look familiar in the Smart Contract area. The
+primary difference will be how you wire it to **Web3** and
+configurations modification which need to be taken into account.
+
+Step1: Create a clean, empty directory and scaffold out a drizzle-react
+project using the [Truffle Drizzle
+Box](https://www.trufflesuite.com/boxes/drizzle) using the
+following steps:
+
+-   First, create a new empty directory and unbox Drizzle in that
+    directory:
+
+    -   mkdir drizzle_tutorial
+
+    -   cd drizzle_tutorial
+
+    -   truffle unbox drizzle
+
+> ![](media\image7.png)
+-   **Unboxing Drizzle** may take a few minutes and will scaffold out a
+    react app project. There is no need to run "**create-react-app**".
+    Open **VSCode** and the directory structure will look like this:
+
+> ![](media\image8.png)
+-   Unboxing drizzle has installed the node module for \@drizzle under
+    the ./app/node_modules folder:
+
+> ![](media\image9.png)
+-   In the Terminal, run the Truffle development console which spawns a
+    development blockchain. This is very useful for compiling, deploying
+    and testing locally and creates a list of 10 accounts.
+
+    -   truffle develop
+
+> ![](media\image10.png)
+-   From the development console for truffle, compile and migrate the
+    smart contracts to the development blockchain. If desired, both
+    ganache app and ganache-cli can also be used. Please see
+    documentation for how to use it. The development blockchain will be
+    running at [http://127.0.0.1:8545](http://127.0.0.1:8545).
+    Consequently, ./truffle-config.js will require this same host and
+    port address.
+
+> ![](media\image11.png)
+The **Truffle Drizzle-Box** comes with three contracts that use the
+drizzle components for connecting to a Dapp. The contracts directory
+contains the files: **ComplexStorage.sol**, **SimpleStorage.sol** and
+**TutorialToken.sol** which are used by the **Drizzle** tutorial.
+
+Using the Truffle develop console, compile these smart contracts:
+
+> ![](media\image12.png)
+Deploying and Migrating Smart Contracts
+---------------------------------------
+
+-   To deploy a smart contract, Truffle requires a migrations file in
+    the migrations folder. The migration files are numbered and executed
+    in the order in which they are numbers. The initial migration file
+    begins with the number "1" and is called "1_initial_migration.js".
+    Additional migration files need a number larger than 1. All of the
+    contacts can be migrated using a single file or multiple files.
+
+-   The migrations folder has JavaScript files that help you deploy
+    contracts to the network. These files are responsible for staging
+    your deployment tasks, and they're written under the assumption that
+    your deployment needs will change over time. A history of previously
+    run migrations is recorded on-chain through a special Migrations
+    contract. (source: [truffle:
+    running-migrations](https://www.trufflesuite.com/docs/truffle/getting-started/running-migrations))
+
+-   Take a look in the file **2_deploy_contracts.js** located in the
+    migrations folder.
+
+> ![](media\image13.png)
+-   From the development console, execute the command migrate to migrate
+    and deploy the smart contracts.
+
+> ![](media\image14.png)
+>
+> ![](media\image15.png)
+Testing the Smart Contracts
+---------------------------
+
+Truffle has an automated testing framework to facilitate the testing of
+contracts. All test files should be located in the test directory. To
+learn more, go to the Truffle documentation, in the section testing your
+contracts. The Truffle box comes with the file **simplestorage.js** for
+testing the smart contract.
+
+In the Truffle console, test the **SimpleStorage** contract using the
+**test** command:
+
+![](media\image16.png)
+
+The dApp
+--------
+
+The Drizzle Box includes code using the dizzle libraries to connect the
+smart contracts to the dapp's front-end. That code exists within the
+\`app\` directory.
+
+> ![](media\image17.png)
+Wiring up the front-end to the smart contract
+---------------------------------------------
+
+The files in the **/app** folder which are of interest for connecting
+the smart contract to the Dapp are: **app.js**, **drizzleOptions.js**
+and **MyComponent.js.** Using the SimpleStorage contract, below are the
+steps for connecting the contract to the front-end:
+
+-   The file **MyComponent.js** creates the component for connecting the
+    SimpleStorage smart contract with the front-end.
+
+> ![](media\image18.png)
+>
+> ![](media\image19.png)
+-   **drizzleOptions.js** is used to create an **options** object and
+    pass in the desired contract artifacts for **Drizzle** to
+    instantiate. The **options** object sets up and instantiates the
+    Drizzle store. Note that in this example, Web3 is connecting to
+    localhost port
+    8545.![](media\image20.png)
+
+-   **App.js** contains the code for the main app. It requires importing
+    React and the Drizzle libraries. It must also import the component
+    file which interacts directly with the smart contract.
+
+> ![](media\image21.png)
+In another terminal:
+
+Open a new terminal window, and from the **./app** folder start up a
+local browser using this commands:
+
+-   cd app
+
+-   npm rebuild
+
+-   npm run start
+
+> ![](media\image22.png)
+This command starts the web-pack dev server for React and opens up a new
+browser window for the React project which should result in the image
+below. Once this has been tested, close it by either closing the
+terminal window or \<ctrl-c\>. This confirms that react was correctly
+installed. React starts a web browser on
+[http://localhost:3000](http://localhost:3000) and automatically
+opens a browser window.
+
+![](media\image23.png)

create-decentralized-apps/includes/5-shipping-dapp.md

@@ -0,0 +1 @@
+# Exercise - Create a dapp for a shipping contract