зеркало из https://github.com/microsoft/Reactors.git
Merge branch 'main' of https://github.com/Kiresorg/Reactors into pr/208
This commit is contained in:
meaghanlewis
Коммит
8cec628f98
|
|
@ -1,10 +1,4 @@
|
|||
2.3 Post workshop challenge:
|
||||
----------------------------
|
||||
|
||||
[For Reactors repository:](https://github.com/microsoft/Reactors/tree/main/workshop-resources/emerging-tech)
|
||||
|
||||
Create a GameToken using an ERC-721 Non-Fungible Token
|
||||
------------------------------------------------------
|
||||
# Post workshop challenge
|
||||
|
||||
### Fungible vs. Non-Fungible Tokens
|
||||
|
||||
|
|
@ -16,8 +10,7 @@ A fungible token ([ERC-20](https://docs.openzeppelin.com/contracts/2.x/api/token
|
|||
|
||||
**ERC-721** was the first non-fungible token standard and currently still the most popular standard for representing **non-fungible digital assets**. The most important properties for this kind of asset is to have a way to check who owns what and a way to move things around.
|
||||
|
||||
Create a Crypto GameToken using ERC-721
|
||||
---------------------------------------
|
||||
## Create a GameToken using an ERC-721 Non-Fungible Token
|
||||
|
||||
Create a non-fungible GameToken using the [OpenZeppelin ERC-721](https://docs.openzeppelin.com/contracts/2.x/api/token/erc721) libraries. To simplify the exercise, create a token that provides functions where an administrator can **mint** tokens and users can **transfer** tokens from one user to another.
|
||||
|
||||
|
|
@ -39,21 +32,21 @@ This project assumes that **node.js** and **truffle** are already installed. In
|
|||
|
||||
From the terminal command line, do the following:
|
||||
|
||||
\$ mkdir GameToken
|
||||
$ mkdir GameToken
|
||||
|
||||
\$ cd GameToken
|
||||
$ cd GameToken
|
||||
|
||||
\$ truffle unbox drizzle
|
||||
$ truffle unbox drizzle
|
||||
|
||||
For this tutorial, use **ganache-cli** which listens on 127.0.0.1:8545. If using the ganache application, adjust **truffle-config.js** accordingly.
|
||||
|
||||
Open the **GameToken** project in **VS Code**. This example will not be using the pre-installed contracts, they can be removed. The file structure looks like this:
|
||||
|
||||
|
||||
|
||||
|
||||
Next, to create the game token, create a file in the **./contracts** folder called **GameToken.sol** which uses Open Zeppelin libraries to create the ERC-721 token.
|
||||
|
||||
```
|
||||
```solidity
|
||||
pragma solidity ^0.5.0;
|
||||
|
||||
import "@openzeppelin/contracts/token/ERC721/ERC721Full.sol";
|
||||
|
|
@ -110,7 +103,7 @@ Create three files in ./app/src for the ERC-721 functionality split between admi
|
|||
|
||||
Create the file **./app/src/Admin.js** to represent the Administrator account which is the only account that can mint tokens. The administrator account (Account 0) needs to be connected to Metamask which will be discussed below. It checks to see if the account is Admin ("0") and if so, the mint() function is listed on the web-page:
|
||||
|
||||
```jsx
|
||||
```javascript
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
import { drizzleReactHooks } from "@drizzle/react-plugin";
|
||||
|
|
@ -178,7 +171,7 @@ export default () => {
|
|||
|
||||
**Create ./app/src/TokenMetadata.js -** this file implements the meta-data functionality which prints out the **account id of the Administrator**, the **Owner of a token**. They are more meta-data functionality that can be implemented as well, but for this example, we are keeping it simple.
|
||||
|
||||
```jsx
|
||||
```javascript
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { drizzleReactHooks } from "@drizzle/react-plugin";
|
||||
|
|
@ -270,7 +263,7 @@ export default () => {
|
|||
|
||||
**Create ./app/src/TokenWallet.js** manages the functionality associated with the wallet. In this example, the **Balance** and **Transfer** functions are implemented:
|
||||
|
||||
```jsx
|
||||
```javascript
|
||||
import React from "react";
|
||||
|
||||
import { drizzleReactHooks } from "@drizzle/react-plugin";
|
||||
|
|
@ -336,7 +329,7 @@ export default () => {
|
|||
|
||||
**Replace ./app/src/App.js** with the below instructions which executes the GameToken user interface to include **Admin**, **TokenMetadata** and **TokenWallet**:
|
||||
|
||||
```jsx
|
||||
```javascript
|
||||
import React from "react";
|
||||
|
||||
import { Drizzle } from "@drizzle/store";
|
||||
|
|
@ -422,8 +415,8 @@ function LoadingContainer({ children }) {
|
|||
export default LoadingContainer;
|
||||
```
|
||||
|
||||
Compiling, migrating and running the Tutorial
|
||||
---------------------------------------------
|
||||
## Compile, migrate and run the Tutorial
|
||||
|
||||
|
||||
Open a terminal window in VS Code and start up the Ganache client (by typing ganache-cli):
|
||||
|
||||
|
|
@ -439,10 +432,9 @@ From a second terminal window, run the following:
|
|||
|
||||
The output will look like this:
|
||||
|
||||
|
||||
|
||||
|
||||
Starting and Running the server:
|
||||
--------------------------------
|
||||
## Start and run the server
|
||||
|
||||
Open another terminal window in VS Code, cd to the app folder and run **npm install** then **npm run start** to start the server. This will bring up the server on localhost:3000.
|
||||
|
||||
|
|
@ -456,43 +448,40 @@ In another terminal window, **cd ./app** and start the server using the commands
|
|||
|
||||
Don't worry if there are some warnings. These lines are just additional ERC721 functionality that isn't being used in this example:
|
||||
|
||||
|
||||
|
||||
Initially, it will say GameToken Loading because the MetaMask accounts have not yet been connected.
|
||||
|
||||
Setting up the Accounts in MetaMask
|
||||
-----------------------------------
|
||||
## Set up the Accounts in MetaMask
|
||||
|
||||
Open your MetaMask browser and import the Administrator Account by copying the private key for Account (0). Open MetaMask and choose the network that ganache-cli is using: **Localhost 8545.** Then import an account for the Game Administrator on account (0) into Metamask using account (0)'s private key. In practice, you would not share this private key with anyone!
|
||||
|
||||
First, connect Metamask Account 1 to Localhost:3000.
|
||||
|
||||
|
||||
|
||||
|
||||
Import Account (0) from the **ganache-cli** into **Metamask** using the private key for that account then connect Account 2 to localhost 3000.
|
||||
|
||||
In this example, it will be imported into MetaMask Account 2:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
When you have everything connected, select the account connected to the **ganache-cli account (0), refresh the browser window** and you will see:
|
||||
|
||||
|
||||
|
||||
|
||||
Minting and Transferring Tokens
|
||||
-------------------------------
|
||||
## Mint and transfer Tokens
|
||||
|
||||
Now that the server is running on localhost:3000, mint and transfer tokens using the Administrator Account which has been imported into Metamask Account 2:
|
||||
|
||||
|
||||
|
||||
|
||||
Using the Admin Account id: 0xe4F6962dC983d69953fF16dF43650Be5c7e7cD02 mint Token \#1. Notice, the balance has been increased to 1 and when inspecting Metamask, token has been minted.
|
||||
|
||||
|
||||
|
||||
|
||||
Conclusion
|
||||
----------
|
||||
## Conclusion
|
||||
|
||||
Continue to work with the GameItem to extend the functionality for developing other properties, minting additional tokens and transferring them between users. Import another account from ganache-cli to Metamask, connect it to the localhost:3000 network. Transfer a token from Account 2 to the new MetaMask account. Spend some time playing with the simple commands then try extending the example implementing new functionality of the ERC721 token.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,18 @@
|
|||
Build your first dapp using Drizzle and VS Code
|
||||
-----------------------------------------------
|
||||
# Build your first dapp using Drizzle and VS Code
|
||||
|
||||
### Setting up the environment:
|
||||
|
||||
## Setting up the environment:
|
||||
|
||||
- Pre-requisites:
|
||||
|
||||
- Git - [git](https://git-scm.com/) or [github](https://github.com/) and create an account
|
||||
|
||||
- Node.js - 'node -v' returns the version of node which is installed. If it is not installed, it can be installed from the [node.js](https://nodejs.org/en/) website.
|
||||
|
||||
- Solidity - included with VS Code Solidity Extension, dependency of the Blockchain Development Kit Extension
|
||||
- Truffle and Ganache-cli - included with VS Code Blockchain Development Kit
|
||||
|
||||
> 
|
||||
|
||||
- Truffle and Ganache-cli - included with VS Code Blockchain Development Kit. Truffle and Ganache can be installed using npm install from a terminal window which will also install ganache-cli. If using this:
|
||||
|
||||
- npm install -g truffle
|
||||
|
||||
> 
|
||||
|
||||
- Web3 1.0+ - check the version using "npm view web3 version"
|
||||
|
||||
- Web Sockets - check if web sockets are installed via the extensions for VS Code
|
||||
|
||||
> 
|
||||
|
||||
[**Drizzle-box**](https://www.trufflesuite.com/boxes/drizzle) 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
|
||||
## 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.
|
||||
|
||||
|
|
@ -41,20 +26,20 @@ Step1: Create a clean, empty directory and scaffold out a drizzle-react project
|
|||
|
||||
- truffle unbox drizzle
|
||||
|
||||
|
||||
|
||||
|
||||
- **Unboxing Drizzle** may take a few minutes and will scaffold out a react app project. . Open **VSCode** and the directory structure will look like this:
|
||||
|
||||
> 
|
||||
> 
|
||||
|
||||
- Unboxing drizzle has installed the node module for \@drizzle under the ./app/node_modules folder:
|
||||
|
||||
> 
|
||||
> 
|
||||
- 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
|
||||
|
||||
> 
|
||||
> 
|
||||
|
||||
- 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.
|
||||
|
||||
|
|
@ -86,9 +71,9 @@ The **Truffle Drizzle-Box** comes with three contracts that use the drizzle comp
|
|||
|
||||
Using the Truffle develop console, compile these smart contracts:
|
||||
|
||||
> 
|
||||
> 
|
||||
|
||||
### Deploying and Migrating Smart Contracts
|
||||
## 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.
|
||||
|
||||
|
|
@ -123,21 +108,21 @@ module.exports = function(deployer) {
|
|||
>
|
||||
> 
|
||||
|
||||
### Testing the Smart Contracts
|
||||
## Test 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:
|
||||
|
||||
|
||||
|
||||
|
||||
### Explore and run the dapp
|
||||
## Explore and run 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.
|
||||
|
||||
> 
|
||||
> 
|
||||
|
||||
### Wiring up the front-end to the smart contract
|
||||
## Wire up the front-end to the smart contract
|
||||
|
||||
The files installed when unboxing drizzle contain templates and tutorial code which demonstrate how to wire up drizzle to several different contracts. The folder **./contracts** contains: **SimpleStorage.sol**, **ComplexStorage.sol** and **TutorialToken.sol**. Using these three solidity smart contract files, the tutorial demonstrates how to connect them using the **drizzle** components to the front-end. All front-end code is in the **./app/src** folder. The files which contain **drizzle** specific instructions are: **app.js**, **drizzleOptions.js** and **MyComponent.js.**
|
||||
|
||||
|
|
@ -147,7 +132,7 @@ The file **MyComponent.js** contains the code for connecting the **SimpleStorage
|
|||
|
||||
- To create a drizzle component, import [react](https://reactjs.org/docs/react-api.html) and [@drizzle/react-components](https://github.com/trufflesuite/drizzle/tree/develop/packages/react-components) and create a component with AccountData, ContractData and ContractForm called newContextComponents.
|
||||
|
||||
```jsx
|
||||
```javascript
|
||||
import React from "react";
|
||||
|
||||
import { newContextComponents } from "@drizzle/react-components";
|
||||
|
|
@ -330,7 +315,7 @@ export default options;
|
|||
|
||||
- **Const drizzle = new Drizzle (drizzleOptions);**
|
||||
|
||||
```jsx
|
||||
```javascript
|
||||
import React from "react";
|
||||
import { DrizzleContext } from "@drizzle/react-plugin";
|
||||
import { Drizzle } from "@drizzle/store";
|
||||
|
|
@ -379,4 +364,4 @@ If you have MetaMask installed, you may need to close and re-open [http://localh
|
|||
|
||||
You should see the following in your browser window. In this dapp, you can now interact with the contracts directly.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,61 +18,3 @@ The primary reasons for creating blockchain products include:
|
|||
- Trust anchor defines who represents the highest authority of a given system that is entitled to grant and revoke read and write system access.
|
||||
|
||||
- Valid network environments ensure that exchanged information, file storage and other transactions among devices are carried out in a reliable and transparent manner.
|
||||
|
||||
Public, Private and Hybrid/Consortium Blockchain
|
||||
------------------------------------------------
|
||||
|
||||
There are several types of blockchains that manage the way that the blockchains are accessed and utilized as well as how the blockchains perform and whether the blockchain will be public, private or a hybrid.
|
||||
|
||||
- **Public blockchains** are broadly available.
|
||||
|
||||
- Anyone can access transaction history, create new transactions, and validate them into new blocks.
|
||||
|
||||
- No need for trust, everything is recorded on the blockchain.
|
||||
|
||||
- Higher level of security since the more people using the blockchain, the more difficult it is to attack.
|
||||
|
||||
- Transparency of public blockchain increases potential use cases.
|
||||
|
||||
- **Private/permissioned blockchains** provide infrastructure,
|
||||
handling and validating data transactions.
|
||||
|
||||
- Cost-effective because they don't require mining based consensus mechanisms and provide overall management over transactions within the chain.
|
||||
|
||||
- Only allows certain entities to participate.
|
||||
|
||||
- Participants are granted specific rights and restrictions in the network, so someone could have full access or limited access at the discretion of the network.
|
||||
|
||||
- More centralized in nature as only a small group controls the network.
|
||||
|
||||
- Private blockchains have fewer participants and thus are faster to achieve consensus.
|
||||
|
||||
- Private blockchains are more scalable since only a few nodes are authorized and responsible for managing data, the network is able to process more transactions.
|
||||
|
||||
- **Hybrid/Consortium** blockchains are a combination of private and public blockchains.
|
||||
|
||||
- Used by a group of organizations that work jointly on developing different solutions.
|
||||
|
||||
- Restricted-access blockchain, each organization is able to maintain its intellectual property rights within the consortium.
|
||||
|
||||
- Hybrid between low-trust public blockchains and the highly-trusted private blockchains.
|
||||
|
||||
- The consortium is permissioned for a predetermined group of enterprises.
|
||||
|
||||
- It is semi-decentralized and under the supervision of a limited set of members.
|
||||
|
||||
- Utilizes multi-party consensus in that all operations are verified by special pre-approved nodes, not by the world community, like in bitcoin blockchain.
|
||||
|
||||
Some commonly used blockchains include:
|
||||
|
||||
- [Ethereum](https://ethereum.org/en/developers/docs/intro-to-ethereum/): A public blockchain which is shared and utilized across a global network.
|
||||
|
||||
- Each new block is added utilizing the proof of work consensus model.
|
||||
|
||||
- [Azure Blockchain Service](https://docs.microsoft.com/en-us/azure/blockchain/): A fully managed ledger service that enables users the ability to grow and operate blockchain networks at scale in Azure.
|
||||
|
||||
- [Multichain](https://www.multichain.com/): MultiChain helps organizations to build and deploy blockchain applications.
|
||||
|
||||
- [Hyperledger Besu](https://www.hyperledger.org/use/besu): Designed to be enterprise-friendly for both public and private permissioned network use cases.
|
||||
|
||||
Refer to the documentation for the [Microsoft Blockchain development kit](https://marketplace.visualstudio.com/items?itemName=AzBlockchain.azure-blockchain) for building, testing and deploying blockchain applications.
|
||||
|
|
@ -60,11 +60,11 @@ The [Truffle Framework](https://www.trufflesuite.com/), which provides a set of
|
|||
|
||||
- [**@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.
|
||||
|
||||
[](https://www.trufflesuite.com/drizzle)
|
||||
[](https://www.trufflesuite.com/drizzle)
|
||||
|
||||
|
||||
|
||||
-----------------------------------------------------------------
|
||||
|
||||
Below is a good visual representation of how Drizzle works with the dap and keeps track of the data.
|
||||
|
||||
[](https://www.trufflesuite.com/docs/drizzle/reference/how-data-stays-fresh)
|
||||
[](https://www.trufflesuite.com/docs/drizzle/reference/how-data-stays-fresh)
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче