Skip to content
This repository was archived by the owner on Feb 17, 2025. It is now read-only.

Commit ee2cc43

Browse files
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]>
1 parent 7f9e28c commit ee2cc43

17 files changed

+3634
-19
lines changed

.prettierrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"singleQuote": true
3+
}

docs/tutorials.mdx

+33-9
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,38 @@ title: Tutorials
44

55
These tutorials can help you get started developing different kinds of applications on Tezos in as little as 15 minutes.
66

7-
import TutorialCard from '@site/src/components/TutorialCard';
8-
import TutorialCardContainer from '@site/src/components/TutorialCardContainer';
7+
import TutorialCard from "@site/src/components/TutorialCard";
8+
import TutorialCardContainer from "@site/src/components/TutorialCardContainer";
99

1010
## Beginner
1111

1212
These tutorials are intended for developers who are starting work with Tezos:
1313

1414
<TutorialCardContainer>
1515

16+
<TutorialCard
17+
title="Create a minimum dApp"
18+
emoji="🏆"
19+
href="./tutorials/dapp"
20+
description="Create your minimum dApp from the smart contract to the frontend, using Typescript React and Typescript-like JsLigo language"
21+
link="Start tutorial"
22+
/>
23+
1624
<TutorialCard
1725
title="Deploy a smart contract"
1826
emoji="🚀"
1927
href="/tutorials/smart-contract"
2028
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"
2129
link="Start tutorial"
22-
/>
30+
/>
2331

2432
<TutorialCard
2533
title="Mint NFTs from a web app"
2634
emoji="💻"
2735
href="/tutorials/create-an-nft/nft-web-app"
2836
description="Create a web app that uses an existing contract to create NFTs"
2937
link="Start tutorial"
30-
/>
38+
/>
3139

3240
</TutorialCardContainer>
3341

@@ -37,29 +45,37 @@ These tutorials contain multiple parts and are intended for developers with some
3745

3846
<TutorialCardContainer>
3947

48+
<TutorialCard
49+
title="Learn about tickets"
50+
emoji="🎫"
51+
href="./tutorials/dapp/part-3"
52+
description="Learn about a Tezos unique feature named Tickets, using Typescript React and Typescript-like JsLigo language"
53+
link="Start tutorial"
54+
/>
55+
4056
<TutorialCard
4157
title="Build your first app on Tezos"
4258
emoji="💡"
4359
href="/tutorials/build-your-first-app/"
4460
description="Learn how to set up and create a decentralized web application on Tezos using TypeScript, Taquito, and Svelte"
4561
link="Start tutorial"
46-
/>
62+
/>
4763

4864
<TutorialCard
4965
title="Create a contract and web app that mints NFTs"
5066
emoji="📦"
5167
href="/tutorials/create-an-nft/nft-taquito"
5268
description="Create your own NFTs with contracts and web applications"
5369
link="Start tutorial"
54-
/>
70+
/>
5571

5672
<TutorialCard
5773
title="Create an NFT from the command line"
5874
emoji="⚡️"
5975
href="/tutorials/create-an-nft/nft-tznft"
6076
description="Learn about NFTs and how to create them from files on your computer"
6177
link="Start tutorial"
62-
/>
78+
/>
6379

6480
</TutorialCardContainer>
6581

@@ -69,20 +85,28 @@ These tutorials are intended for developers who are familiar with Tezos and want
6985

7086
<TutorialCardContainer>
7187

88+
<TutorialCard
89+
title="Upgrade your smart contract"
90+
emoji="⬆️"
91+
href="./tutorials/dapp/part-4"
92+
description="Learn the different ways of upgrading your smart contract, using Typescript React and Typescript-like JsLigo language"
93+
link="Start tutorial"
94+
/>
95+
7296
<TutorialCard
7397
title="Build an NFT marketplace"
7498
emoji="🛒"
7599
href="/tutorials/build-an-nft-marketplace"
76100
description="Learn how to build a marketplace to buy and sell different kinds of tokens with LIGO smart contract templates"
77101
link="Start tutorial"
78-
/>
102+
/>
79103

80104
<TutorialCard
81105
title="Deploy a smart rollup"
82106
emoji="🏎"
83107
href="/tutorials/smart-rollup"
84108
description="Learn how to deploy a smart rollup to handle large amounts of processing off the main chain"
85109
link="Start tutorial"
86-
/>
110+
/>
87111

88112
</TutorialCardContainer>

docs/tutorials/dapp.md

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: Create your minimum dapp on Tezos
3+
authors: "Benjamin Fuentes"
4+
last_update:
5+
date: 27 November 2023
6+
---
7+
8+
> 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.
9+
10+
This tutorial shows you how to create a poke game on smart contract.
11+
The game consists on poking the owner of a smart contract. The smart contract keeps a track of user interactions and stores a trace.
12+
13+
Poke sequence diagram.
14+
15+
```mermaid
16+
sequenceDiagram
17+
Note left of User: Prepare poke transaction
18+
User->>Smartcontract: poke()
19+
Note right of Smartcontract: store(pokeTrace)
20+
```
21+
22+
You will learn :
23+
24+
- How to create a Tezos project with Taqueria.
25+
- How to create a smart contract in jsLigo.
26+
- How to deploy the smart contract a real testnet named Ghostnet.
27+
- How to create a frontend dApp using Taquito library and interact with a Tezos browser wallet.
28+
- How to use an indexer like TZKT.
29+
30+
## Prerequisites
31+
32+
This tutorial uses Typescript, so it will be easier if you are familiar with JavaScript.
33+
34+
1. Make sure that you have installed these tools:
35+
36+
- [Node.JS and NPM](https://nodejs.org/en/download/): NPM is required to install the web application's dependencies.
37+
- [Taqueria](https://taqueria.io/), version 0.45.0 or later: Taqueria is a platform that makes it easier to develop and test dApps.
38+
- [Docker](https://docs.docker.com/engine/install/): Docker is required to run Taqueria.
39+
- [jq](https://stedolan.github.io/jq/download/): Some commands use the `jq` program to extract JSON data.
40+
- [`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/)).
41+
- Any Tezos-compatible wallet that supports Ghostnet, such as [Temple wallet](https://templewallet.com/).
42+
43+
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.
44+
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.
45+
46+
## The tutorial application
47+
48+
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.
49+
50+
The application looks like this:
51+
52+
![Example of the table of addresses and which addresses poked them](/img/tutorials/dapp-table.png)
53+
54+
The code for the completed application is in this GitHub repository: [solution](https://github.com/marigold-dev/training-dapp-1/tree/main/solution)
55+
56+
When you're ready, move to the next section [Create your minimum dApp on Tezos](./dapp/part-1) to begin setting up the application.

0 commit comments

Comments
 (0)