Start 2nd edition

Improve structures, wordings, correct typos, and etc. based on the later published blog posts elsewhere.
protocol · Mar 18, 2022 · 63fb7ea · 63fb7ea
1 parent c70b3a2
commit 63fb7ea
Show file tree

Hide file tree

Showing 4 changed files with 389 additions and 3 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -85,6 +85,7 @@ module.exports = {
               '/tutorial/first-steps',
               '/tutorial/minting-service',
               '/tutorial/lazy-minting',
+              '/tutorial/mint-nftstorage-polygon',
               '/tutorial/gallery-app',
               '/tutorial/using-nfts-in-games',
               '/tutorial/flow-nft-marketplace'

diff --git a/docs/tutorial/first-steps.md b/docs/tutorial/first-steps.md
@@ -73,7 +73,7 @@ On [the getting started page for Ethers](https://docs.ethers.io/v5/getting-start
 
 ### Gather the needed details
 
-For this tutorial, we're going to connect to a smart contract called `Greeter` that's included with a new [Hardhat](https://hardhat.io) project. It's been deployed to the Ropsten testnet at the address `0xE0282e76237B8eB19A5D08e1741b8b3e2691Dadd`, and you can find details about it on the [EtherScan Ropsten block explorer](https://ropsten.etherscan.io) by searching for that address, which should take you to [the address detail view](https://ropsten.etherscan.io/address/0xE0282e76237B8eB19A5D08e1741b8b3e2691Dadd).
+For this tutorial, we're going to connect to a smart contract called `Greeter` that's included with a new [Hardhat](https://hardhat.org/) project. It's been deployed to the Ropsten testnet at the address `0xE0282e76237B8eB19A5D08e1741b8b3e2691Dadd`, and you can find details about it on the [EtherScan Ropsten block explorer](https://ropsten.etherscan.io) by searching for that address, which should take you to [the address detail view](https://ropsten.etherscan.io/address/0xE0282e76237B8eB19A5D08e1741b8b3e2691Dadd).
 
 Ethers has a [Contract API](https://docs.ethers.io/v5/api/contract/contract/) that abstracts over the details of the blockchain and lets us interact with smart contracts as if they were regular JavaScript objects named `Contract`.
 
@@ -95,6 +95,9 @@ In the `hello-eth` folder, next to `ethers-5.1.esm.min.js`, create a file called
   <script type="module">
       import { ethers } from "./ethers-5.1.esm.min.js";
       //const ethers = require('ethers')
+      
+      //Create a constant to maniputale the DOM:
+      const contractReturn = document.querySelector('.output');
 
       const GREETER_ADDRESS = '0xE0282e76237B8eB19A5D08e1741b8b3e2691Dadd'
       const GREETER_ABI = `[{"inputs":[{"internalType":"string","name":"_greeting","type":"string"}],"stateMutability":"nonpayable","type":"constructor"},{"inputs":[],"name":"greet","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"string","name":"_greeting","type":"string"}],"name":"setGreeting","outputs":[],"stateMutability":"nonpayable","type":"function"}]`
@@ -110,13 +113,14 @@ In the `hello-eth` folder, next to `ethers-5.1.esm.min.js`, create a file called
         const greeting = await greeterContract.greet();
 
         // Write the greeting result to the DOM.
-        document.getElementById('output').innerHTML = greeting;
+        contractReturn.textContent = greeting;
       }
       getGreeting();
   </script>
   </head>
   <body>
-    <div id="output" />
+    <div class="output"> 
+    </div>
   </body>
 </html>
 ```

diff --git a/docs/tutorial/flow-nft-marketplace.md b/docs/tutorial/flow-nft-marketplace.md
@@ -7,6 +7,7 @@ related:
   'Mint an NFT with IPFS': https://docs.ipfs.io/how-to/mint-nfts-with-ipfs/#a-short-introduction-to-nfts
 ---
 
+<<<<<<< HEAD
 # Build an NFT pet store on Flow
 
 This tutorial will teach you to create a simple NFT marketplace on the [Flow][flow] blockchain from scratch, using the Flow blockchain and IPFS/Filecoin storage via [NFT.storage][nft-storage]. The end project is a React app that lets you mint pet NFTs and query on-chain metadata and photo of the pets, as shown below:
@@ -38,12 +39,33 @@ You're free to use any code editor, but [VSCode][vscode] with [Cadence Language
 ## What you will learn
 
 As we build a minimal version of [this NFT pet store][flowwow] together, you will learn the basic NFT building blocks from the ground up, including:
+=======
+# Building a Flow NFT pet store
+
+This tutorial will teach you to create a simple NFT marketplace on the [Flow][flow] blockchain from scratch, using the Flow blockchain and IPFS/Filecoin storage via [nft.storage][nft-storage]. Although we will be building a pet store using pet images, you are free to use your own images and change the metadata.
+
+## Prerequisites
+
+Although this tutorial is built for Flow, it focuses on building up a basic understanding of smart contract and NFTs. You are expected to bring a working JavaScript and basic [React.js][React] skills to the table, but a passing familiarity with blockchains, web3, and NFTs will be just fine if you are happy to catch up.
+
+You will need to install [Node.js][nodejs] and npm (comes with Node.js), [Flow command line tool][flow-cli], and [Docker compose][docker-compose] to follow this tutorial. You're free to use any code editor, but [VSCode][vscode] with [Cadence Language support][vscode-cdc-ext] is a great option.
+
+> **💡 Using React**
+> React.js is the most widely-used UI library that arguably takes away the tediousness of setting up a JavaScript app. You are welcome to work with another library/framework if you are happy to take on the additional work of taking the [road less travelled][robert-frost-poem] approach.
+
+If you are very new to the concept of smart contracts and NFTs, it is worth checking out [blockchain][blockchain-basic] and [NFT][nft-basic] basics before diving in.
+
+## What you will learn
+
+As we build a minimal version of the [Flowwow NFT pet store][flowwow] together, you will learn the basic NFT building blocks from the ground up, including:
+>>>>>>> main
 
 - Smart contracts and the [Cadence language][cadence]
 - User authentication
 - Minting tokens and storing metadata on Filecoin/IPFS via [NFT.storage][nft-storage]
 - Transferring tokens
 
+<<<<<<< HEAD
 ## 1. Understanding ownership and resource
 
 A blockchain is a digital distributed ledger that tracks an ownership of some type of resource. There is nothing new about the ledger part—Your bank account is a ledger that keeps track of how much money you own and how much is spent (change of ownership) at any time. The key components to a ledger are:
@@ -55,13 +77,27 @@ A blockchain is a digital distributed ledger that tracks an ownership of some ty
 ### Resource
 
 A resource can be any *thing* — from currency, crop, real estate, to digital monster — as long as the type of resource is agreed upon commonly by all accounts. This is the basis of any trade economy.
+=======
+## Understanding ownership and resource
+
+A blockchain is a digital distributed ledger that tracks an *ownership* of some *resource*. There is nothing new about the ledger part—Your bank account is a ledger that keeps track of how much money you *own* and how much is spent (change of ownership) at any time. The key components to a ledger are:
+
+- [Resource](resource) at play. In this case a currency.
+- [Accounts](accounts) to own the resource, or the access to it.
+- [Contract](contract) or a ruleset to govern the economy.
+
+### Resource
+
+A resource can be any *thing* — from currency, crop, to digital monster — as long as the type of resource is agreed upon commonly by all accounts.
+>>>>>>> main
 
 ### Accounts
 
 Each account owns a ledger of its own to keep track of the spending (transferring) and imbursing (receiving) of the resource.
 
 ### Contract
 
+<<<<<<< HEAD
 A contract is a ruleset governing how the "game" is played. Accounts that break this may be punished in some way. Normally, it is a central authority like a bank who creates this contract for all accounts.
 
 Because the conventional ledgers are owned and managed by a trusted authority like your bank, when you transfer the ownership of a few dollars (`-$4.00`) to buy a cup of coffee from Mr. Peet, the bank needs to be consistent and update the ledgers on both sides to reflect the ownership change (Peet has `+$4.00` and you have `-$4.00`). Because either ledger is not openly visible to both Peet and you (Peet only sees their ledger, and you only sees your ledger), there is no guarantee that the bank won't mistakenly or intentionally update either ledger with the incorrect value, in the process making either Peet or you richer or poorer than what's supposed to be.
@@ -76,6 +112,22 @@ A good analogy is an umpire-less tennis game where any dispute (like determining
 "Why such emphasis on ownership?" you may ask. This is because Flow has the concept of resource ownership baked right into the smart contract core. Learning to visualize resource will help you in understanding concepts in Flow, as you shall see very soon.
 
 ## 2. Tour of Cadence
+=======
+A contract is a ruleset governing how the "game" is played. Accounts that break the ruleset may be punished in some way. Normally, it is a central authority like a bank who creates this contract for all accounts.
+
+Because the conventional ledgers are owned and managed by a trusted authority like your bank, when you transfer the ownership of a few dollars (`-$4.00`) to buy a cup of coffee from Mr. Peet, the bank needs to be consistent and update the ledgers on both sides to reflect the ownership change (Peet has `+$4.00` and you have `-$4.00`). Because both ledgers are not openly visible to both of Peet and you and the the currency is likely digital, there is no guarantee that the bank won't mistakenly or intentionally update either ledger with the incorrect value.
+
+> **💡 Do you know your bank owes you?**
+> If you have a saving account with some money in it, you might be loaning your money to your bank. You are trusting your bank to have your money when you want to withdraw. Meanwhile, your money is just part of the stream of your bank is free to do anything with. If you had a billion dollars in your bank and you want to withdraw tomorrow, your teller might freak out.
+
+What is interesting about a blockchain is the distributed part. Because there is only a single *decentralized* ledger that's open to everyone, there is no central authority like a bank for you to trust with bookkeeping. In fact, there is no need for you to trust anyone at all. You only need to trust the copy of the common ledger software run by other people in the network to uphold the bookkeeping, and it is very hard for someone to run an altered version of that software and attempt to break the rule.
+
+A good analogy is an umpire-less tennis game where any dispute (like determining if the ball lands in the court) is distributed to all the audience to judge. Meanwhile, these audience members are also participating in the game, with the stake that makes them lose if they judge wrongly. This way, any small inconsistencies are likely caught and rejected fair and square. You are no longer trusting your bank. The eternal flow of ownerships hence becomes *trustless* because everyone is doing what's best for themselves.
+
+"Why such emphasis on ownership?" you may ask. This is because Flow has the concept of resource ownership baked right into the smart contract core. Learning to visualize resource will help in understanding concepts in Flow, as you shall see very soon.
+
+## Quick tour of Cadence
+>>>>>>> main
 
 Like Solidity language for Ethereum, Flow uses [Cadence][cadence] language to code smart contracts, transactions, and scripts on Flow. Cadence's design is inspired by the [Rust][rust] and [Move][move] languages. In Cadence, the runtime tracks when a resource is being *moved* from a variable to the next and makes sure it can never be mutually accessible in the program.
 
@@ -948,7 +1000,13 @@ Very often, especially for [decentralized applications][dapps] whose back-ends r
 
 In this section, we will be working on the UI for the pet store app in React.js. While you're expected to have some familiarity with the library, I will do my best to use common features instead of trotting into advanced ones.
 
+<<<<<<< HEAD
 After we are done, we will end up with a simple marketplace app that users can mint and query their NFTs.
+=======
+After we are done, we will end up with a simple marketplace app that users can mint and query their NFTs. It will be similar to this:
+
+![finished-marketplace](./images/flow-nft-marketplace/flow-nft-marketplace-finish.png)
+>>>>>>> main
 
 ### Setting up