Tutorial dapp (#197)

* first commit * review wording * change small thing * order list * part 2 committed * preparing all entries * part 3 of dapp tutorial * ongoing work * numerotation * Update docs/tutorials/dapp/part-1.md yep Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-2.md thanks Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-3.md thanks Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-4.md thanks Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-1.md thanks Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-2.md thanks Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-3.md thanks Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-4.md thanks Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials.mdx weird duplication Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp.md ok Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-1.md ok Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-2.md ok Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-3.md ok Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-3.md ok Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-3.md ok Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-3.md ok Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-3.md Co-authored-by: Tim McMackin <[email protected]> * reformulate swear words * adding to sidebar and dApp renaming * move links to docs.tezos.com * numbering the steps * numbering other steps * sentences with a period * changing indents on numbering * no spaces before colon * removed the mdx extension as it is buggy and duplicated import lines * Update docs/tutorials/dapp/part-1.md Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-1.md Co-authored-by: Tim McMackin <[email protected]> * changing section * reformulation * Update docs/tutorials/dapp/part-2.md Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-2.md Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-3.md Co-authored-by: Tim McMackin <[email protected]> * Update docs/tutorials/dapp/part-3.md Co-authored-by: Tim McMackin <[email protected]> * more explicit instruction * js files with single quote * remove space * shorter sidebar title * last fixes * if prettier is activated, it forces to use singlequote --------- Co-authored-by: Tim McMackin <[email protected]>
trilitech · Dec 8, 2023 · ee2cc43 · ee2cc43 · vercel · Dec 8, 2023
1 parent 7f9e28c
commit ee2cc43
Show file tree

Hide file tree

Showing 17 changed files with 3,634 additions and 19 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/docs/tutorials.mdx b/docs/tutorials.mdx
@@ -4,30 +4,38 @@ title: Tutorials
 
 These tutorials can help you get started developing different kinds of applications on Tezos in as little as 15 minutes.
 
-import TutorialCard from '@site/src/components/TutorialCard';
-import TutorialCardContainer from '@site/src/components/TutorialCardContainer';
+import TutorialCard from "@site/src/components/TutorialCard";
+import TutorialCardContainer from "@site/src/components/TutorialCardContainer";
 
 ## Beginner
 
 These tutorials are intended for developers who are starting work with Tezos:
 
 <TutorialCardContainer>
 
+<TutorialCard
+  title="Create a minimum dApp"
+  emoji="🏆"
+  href="./tutorials/dapp"
+  description="Create your minimum dApp from the smart contract to the frontend, using Typescript React and Typescript-like JsLigo language"
+  link="Start tutorial"
+/>
+
 <TutorialCard
   title="Deploy a smart contract"
   emoji="🚀"
   href="/tutorials/smart-contract"
   description="In 15 minutes, go from zero to hero and deploy your first smart contract with your choice of JavaScript, OCaml, or Python-like languages"
   link="Start tutorial"
-  />
+/>
 
 <TutorialCard
   title="Mint NFTs from a web app"
   emoji="💻"
   href="/tutorials/create-an-nft/nft-web-app"
   description="Create a web app that uses an existing contract to create NFTs"
   link="Start tutorial"
-  />
+/>
 
 </TutorialCardContainer>
 
@@ -37,29 +45,37 @@ These tutorials contain multiple parts and are intended for developers with some
 
 <TutorialCardContainer>
 
+<TutorialCard
+  title="Learn about tickets"
+  emoji="🎫"
+  href="./tutorials/dapp/part-3"
+  description="Learn about a Tezos unique feature named Tickets, using Typescript React and Typescript-like JsLigo language"
+  link="Start tutorial"
+/>
+
 <TutorialCard
   title="Build your first app on Tezos"
   emoji="💡"
   href="/tutorials/build-your-first-app/"
   description="Learn how to set up and create a decentralized web application on Tezos using TypeScript, Taquito, and Svelte"
   link="Start tutorial"
-  />
+/>
 
 <TutorialCard
   title="Create a contract and web app that mints NFTs"
   emoji="📦"
   href="/tutorials/create-an-nft/nft-taquito"
   description="Create your own NFTs with contracts and web applications"
   link="Start tutorial"
-  />
+/>
 
 <TutorialCard
   title="Create an NFT from the command line"
   emoji="⚡️"
   href="/tutorials/create-an-nft/nft-tznft"
   description="Learn about NFTs and how to create them from files on your computer"
   link="Start tutorial"
-  />
+/>
 
 </TutorialCardContainer>
 
@@ -69,20 +85,28 @@ These tutorials are intended for developers who are familiar with Tezos and want
 
 <TutorialCardContainer>
 
+<TutorialCard
+  title="Upgrade your smart contract"
+  emoji="⬆️"
+  href="./tutorials/dapp/part-4"
+  description="Learn the different ways of upgrading your smart contract, using Typescript React and Typescript-like JsLigo language"
+  link="Start tutorial"
+/>
+
 <TutorialCard
   title="Build an NFT marketplace"
   emoji="🛒"
   href="/tutorials/build-an-nft-marketplace"
   description="Learn how to build a marketplace to buy and sell different kinds of tokens with LIGO smart contract templates"
   link="Start tutorial"
-  />
+/>
 
 <TutorialCard
   title="Deploy a smart rollup"
   emoji="🏎"
   href="/tutorials/smart-rollup"
   description="Learn how to deploy a smart rollup to handle large amounts of processing off the main chain"
   link="Start tutorial"
-  />
+/>
 
 </TutorialCardContainer>
diff --git a/docs/tutorials/dapp.md b/docs/tutorials/dapp.md
@@ -0,0 +1,56 @@
+---
+title: Create your minimum dapp on Tezos
+authors: "Benjamin Fuentes"
+last_update:
+  date: 27 November 2023
+---
+
+> dApp : A decentralized application is a type of distributed open source software application that runs on a peer-to-peer (P2P) blockchain network rather than on a single computer. DApps are visibly similar to other software applications that are supported on a website or mobile device.
+
+This tutorial shows you how to create a poke game on smart contract.
+The game consists on poking the owner of a smart contract. The smart contract keeps a track of user interactions and stores a trace.
+
+Poke sequence diagram.
+
+```mermaid
+sequenceDiagram
+  Note left of User: Prepare poke transaction
+  User->>Smartcontract: poke()
+  Note right of Smartcontract: store(pokeTrace)
+```
+
+You will learn :
+
+- How to create a Tezos project with Taqueria.
+- How to create a smart contract in jsLigo.
+- How to deploy the smart contract a real testnet named Ghostnet.
+- How to create a frontend dApp using Taquito library and interact with a Tezos browser wallet.
+- How to use an indexer like TZKT.
+
+## Prerequisites
+
+This tutorial uses Typescript, so it will be easier if you are familiar with JavaScript.
+
+1. Make sure that you have installed these tools:
+
+   - [Node.JS and NPM](https://nodejs.org/en/download/): NPM is required to install the web application's dependencies.
+   - [Taqueria](https://taqueria.io/), version 0.45.0 or later: Taqueria is a platform that makes it easier to develop and test dApps.
+   - [Docker](https://docs.docker.com/engine/install/): Docker is required to run Taqueria.
+   - [jq](https://stedolan.github.io/jq/download/): Some commands use the `jq` program to extract JSON data.
+   - [`yarn`](https://yarnpkg.com/): The frontend application uses yarn to build and run (see this article for details about [differences between `npm` and `yarn`](https://www.geeksforgeeks.org/difference-between-npm-and-yarn/)).
+   - Any Tezos-compatible wallet that supports Ghostnet, such as [Temple wallet](https://templewallet.com/).
+
+2. Optionally, you can install [`VS Code`](https://code.visualstudio.com/download) to edit your application code in and the [LIGO VS Code extension](https://marketplace.visualstudio.com/items?itemName=ligolang-publish.ligo-vscode) for LIGO editing features such as code highlighting and completion.
+   Taqueria also provides a [Taqueria VS Code extension](https://marketplace.visualstudio.com/items?itemName=ecadlabs.taqueria-vscode) that helps visualize your project and run tasks.
+
+## The tutorial application
+
+In this tutorial, you create a simple game where the user is poking though a dApp. The user interacts with the smart contract through a web interface, where they can see the current state of the contract and send poke commands to it. The contract responds by updating its storage with the user's address. Alternately, a user can also poke the contract deployed by other users.
+
+The application looks like this:
+
+![Example of the table of addresses and which addresses poked them](/img/tutorials/dapp-table.png)
+
+The code for the completed application is in this GitHub repository: [solution](https://github.com/marigold-dev/training-dapp-1/tree/main/solution)
+
+When you're ready, move to the next section [Create your minimum dApp on Tezos](./dapp/part-1) to begin setting up the application.