You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The example dapp shows how to build a very basic dapp with both backend and frontend, using Motoko for the backend functionality and plain HTML and JavaScript for the frontend. The dapp is a simple counter, which will increment a counter by clicking a button in the frontend.
13
+
The example dapp shows how to build a very basic dapp with both backend and frontend, using Motoko for the backend functionality and plain HTML and JavaScript for the frontend. The dapp is a simple counter, which will increment, decrement or reset a counter by clicking a button in the frontend.
14
14
15
-
The purpose of this example dapp is to build a minimalistic dapp, based on the default dapp template, installed by `dfx` when creating a new project. The dapp is a simple website with a counter. Every time a button is pressed, a counter is incremented.
15
+
The purpose of this example dapp is to build a minimalistic dapp, based on the default dapp template, installed by `dfx` when creating a new project.
16
16
17
17
This example covers:
18
18
19
19
- Create a new canister smart contract using the IC SDK (`dfx`).
20
20
- Use the default project as a template as the starting point for the new project.
21
-
- Add backend functions for a counter (count, get count, and reset count).
21
+
- Add backend functions for a counter (increment, getCount, decreent and reset).
22
22
- Implement backend functions in the frontend.
23
23
- Deploy the canister smart contract locally.
24
24
- Test backend with Candid UI and command line using `dfx`, and test frontend in browser.
@@ -27,10 +27,10 @@ This example covers:
27
27
28
28
This example requires an installation of:
29
29
30
-
-[x] Install the [IC SDK](https://internetcomputer.org/docs/current/developer-docs/setup/install/index.mdx).
30
+
-[x] Install the [IC SDK](https://internetcomputer.org/docs/current/developer-docs/getting-started/install).
### Step 3: Open the `minimal_dapp_assets` URL in a web browser.
64
+
### Step 3: Open the `minimal_dapp_frontend` URL in a web browser.
63
65
64
-
You will see a GUI interface with a button that says **Click Me!** followed by a counter number. Each time the button is clicked, the counter value will increase by 1.
66
+
You will see a GUI interface with following buttons:
67
+
68
+
-**Increment** - On click, the counter value will increase by 1.
69
+
-**Decrement** - On click, the counter value will decrease by 1.
70
+
-**Reload** - On click, the counter value will be reloaded. This is useful in case the value has been changed via Candid interface.
71
+
-**Reset** - On click, the counter value will be reset to 0.
65
72
66
73
## Architecture
67
74
The three main parts of the example dapp are the backend, the Candid interface, and the frontend. This example project is based on the default project, which is created when running the `dfx new project_name` command, but most of the default project code is replaced to create the counter functionality in this project.
68
75
69
76
### Motoko backend
70
-
The backend functions are located in the `src/minimal_dapp/main.mo` Motoko file. The backend stores the counter value and has functions to get, increment, and reset the counter value.
77
+
The backend functions are located in the `src/minimal_dapp_backend/main.mo` Motoko file. The backend stores the counter value and has functions to get, increment, decrement and reset the counter value.
71
78
72
79
73
80
#### Counter variable
74
-
Three functions are created to make the counter work: `count()`, `getCount()` and `reset()`. The current counter value is stored as a number in the actor.
81
+
Four functions are created to make the counter work: `increment()`, `decrement()`, `getCount()` and `reset()`. The current counter value is stored as a number in the actor.
75
82
76
83
77
84
```javascript
@@ -80,18 +87,33 @@ actor {
80
87
}
81
88
```
82
89
83
-
#### count()
84
-
The `count()` function increments the counter variable. This function is invoked when the user clicks the button on the frontend, or when the function is called through the Candid interface.
90
+
#### increment()
91
+
The `increment()` function increments the counter variable. This function is invoked when the user clicks the`Increment` button on the frontend, or when the function is called through the Candid interface.
85
92
86
93
```javascript
87
-
public func count() :async Nat {
94
+
public func increment() :async Nat {
88
95
counter +=1;
89
96
return counter;
90
97
};
91
98
```
92
99
93
100
The function returns the incremented counter variable.
94
101
102
+
#### decrement()
103
+
The `decrement()` function decrements the counter variable. This function is invoked when the user clicks the `Decrement` button on the frontend, or when the function is called through the Candid UI.
104
+
105
+
```javascript
106
+
public func decrement() :async Nat {
107
+
// avoid trap due to Natural subtraction underflow
108
+
if(counter !=0) {
109
+
counter -=1;
110
+
};
111
+
return counter;
112
+
};
113
+
```
114
+
115
+
The function returns the decremented counter variable.
116
+
95
117
#### getCount()
96
118
The `getCount()` function returns the current counter value.
The Candid interface is automatically created, and it has a convenient UI, which provides an easy, user-friendly way to test the backend. Learn how to access the Candid UI in the **Testing** section below.
116
138
117
139
### Frontend
118
-
The default project installed with `dfx new project_name` has an `index.html` file with page HTML and an `index.js` file with an implementation of the backend functions. These two files are modified in this example project to support the counter functionality and the backend functions.
119
-
120
-
#### HTML
121
-
All HTML code is in the `src/minimal_dapp_assets/src/index.html` file, and most of the HTML is carried over from the default project. The button is kept and so is the section showing the result, just simplified.
Two `eventlisteners` are added to the JavaScript file, `src/minimal_dapp_assets/src/index.js`, the existing JavaScript file from the default project. One `eventlistener` is for detecting button clicks, and it's calling the `count()` function in the backend, and an `eventlistener` for page load is added to get the initial value of the counter with `getCount()`. The backend functions are imported through the Candid interface.
The default project installed with `dfx new project_name` implements the logic that serves the frontend in the `src/minimal_dapp_frontend/src/App.js` file, and most of the HTML is carried over from the default project.
141
+
142
+
The required JavaScript code to interact with the backend canister is automatically generated by `dfx` and can be found in the `src/declarations/minimal_dapp_backend` folder. The code creates an actor that enables the frontend to call the public functions of the backend canister.
`dfx` has a subset of commands for canister operations, and one of them enables calling the public functions added to the `main.mo` file in the previous step. In the following examples the initial value is 0. `count` will increment value and return 1, `getCount` will return the current value, and `reset` will set the value to 0.
216
+
`dfx` has a subset of commands for canister operations, and one of them enables calling the public functions added to the `main.mo` file in the previous step. In the following examples the initial value is 0. `increment` will increment value, `getCount` will return the current value,`decrement` will decrement the value and `reset` will set the value to 0.
@@ -197,8 +261,4 @@ This project is licensed under the Apache 2.0 license, see LICENSE.md for detail
197
261
198
262
## Security considerations and best practices
199
263
200
-
If you base your application on this example, we recommend you familiarize yourself with and adhere to the [security best practices](https://internetcomputer.org/docs/current/references/security/) for developing on the Internet Computer. This example may not implement all the best practices.
201
-
202
-
For example, the following aspects are particularly relevant for this app:
203
-
*[Use HTTP asset certification and avoid serving your dApp through raw.ic0.app](https://internetcomputer.org/docs/current/developer-docs/security/security-best-practices/overview), since this app serves a frontend.
204
-
*[Certify query responses if they are relevant for security](https://internetcomputer.org/docs/current/references/security/general-security-best-practices#certify-query-responses-if-they-are-relevant-for-security), since this app uses query calls.
264
+
If you base your application on this example, we recommend you familiarize yourself with and adhere to the [security best practices](https://internetcomputer.org/docs/current/developer-docs/security/security-best-practices/overview) for developing on the Internet Computer. This example may not implement all the best practices.
0 commit comments