Skip to content

Commit

Permalink
procedural edits
Browse files Browse the repository at this point in the history
  • Loading branch information
geopor committed May 2, 2023
1 parent 39e5aba commit 2d5d066
Show file tree
Hide file tree
Showing 21 changed files with 110 additions and 93 deletions.
Binary file modified docs/_gitbook-dev-docs/.DS_Store
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,14 @@ To install the dev environment in your local machine, you'll need some prerequis
* Node.js
* Rust

Note that you'll need to use node version 14.14.0 for this tutorial:
`nvm use 14.14.0`
Note that you'll need to use node version 14.14.0 for this tutorial. Make sure you have nvm 14.14.0 installed and set as default:

````
nvm install 14.14.0
nvm use 14.14.0
````

You can check which version of node is active using `nvm current`.

If you haven't installed wasm32-unknown-unknown target or the nightly version, you might be prompted to `rustup` and install them according to the instructions.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,16 +77,18 @@ We highly recommend to write and run a unit test whenever you add / modify code.

## Run sample-front-end

First from the code root `cd sample-front-end`, then run `npm install` to install dependencies.

If your backend has different IP or port number other than the default localhost:8000, please edit the `.env.test` file to edit in your customized values:
First from the root of the code repo, `cd sample-front-end`. If your backend has different IP or port number other than the default localhost:8000, please edit the `.env.test` file to edit in your customized values:

````
VUE_APP_LAYER2_URL=http://127.0.0.1:8000
````

This address will be your backend service address.
Start the frontend local web server by running `npm start`

Run the following to install dependencies:
`npm install`
Then start the frontend local web server by running:
`npm start`

If you can see the following:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,13 @@ In our next session we'll create a sample-front-end project. It will run such re

### Start the front end

Make sure you're in the `sample-front-end` folder of the `tutorial-v1` repo and run `npm start`.
Make sure you're in the `sample-front-end` folder of the `tutorial-v1` repo and to start the front-end run the following commands:

Open a browser and vlisit \[[http://127.0.0.1:3200](http://127.0.0.1:3200/)\].
````
npm start
````

Open a browser and visit \[[http://127.0.0.1:3200](http://127.0.0.1:3200/)\].

You should see a page with the text "Welcome to Sample Actor testing page" and a single button, "click here to send request".

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Deploy Hello World on Testnet

**NOTE: this section is currently under development. We'll remove this notice when it's ready to be deployed**

In this section of the tutorial, we'll use the dev portal to deploy the **Hello World** boilerplate to the TEA testnet. The goal is to see the `Hello [developer's name]` TApp in the browser after launching such a TApp from the TAppStore.

## Prerequisites
Expand All @@ -19,11 +21,6 @@ Run `git clone https://github.com/tearust/tutorial-v1.git` to clone code to loca

If you'd like to check in any of your modified code to your own git repo, please rename the project to avoid any conflicts.

## Switch to testing branch

We'll switch to the following branch to access the IPFS scripts:
`git checkout jacky_test`

## Setup TApp

* Login to the Devportal with Metamask: [http://54.180.82.194:8080/ipfs/QmQ7rStyKjfHjZfySo36wgNiBtciEjV4CYRWy6tYrNrjT2](http://54.180.82.194:8080/ipfs/QmQ7rStyKjfHjZfySo36wgNiBtciEjV4CYRWy6tYrNrjT2)
Expand All @@ -34,7 +31,7 @@ We'll switch to the following branch to access the IPFS scripts:

<img width="1198" alt="Screenshot 2023-04-14 at 4 52 21 PM" src="https://user-images.githubusercontent.com/86096370/232627849-ca3a14cb-d3b5-4358-b022-ee86652d7187.png">

We will add this token_id minus the leading `0x` to `jacky_test/sample-actor/impl/manifest.yaml` at line 3. You should also change the actor name from `sample-actor` to a unique name.
We will add this token_id minus the leading `0x` to `~/sample-actor/impl/manifest.yaml` at line 3. You should also change the actor name from `sample-actor` to a unique name.

![image](https://user-images.githubusercontent.com/3214173/231840591-775730aa-1900-4c76-adb6-791f9dd2f467.png)

Expand All @@ -43,7 +40,7 @@ We will add this token_id minus the leading `0x` to `jacky_test/sample-actor/imp
You can build your actor using the same commands we used in the previous step:
`cd sample-actor` and run `./build.sh` to build the actor.

To upload the actor to IPFS, run `jacky_test/sample-actor/ipfs.sh` which executes the following script:
To upload the actor to IPFS, run `./ipfs.sh` from the same directory which executes the following script:

![image](https://user-images.githubusercontent.com/3214173/231841142-35201bb1-a818-4dc0-b754-d9fca8e04b51.png)

Expand Down Expand Up @@ -75,14 +72,7 @@ Here you can set the spending limit up to the amount you have in your TEA wallet

## Build and upload front-end

Build the front-end code (jacky_test/sample-front-end/) and upload to IPFS using `jacky_test/sample-front-end/ipfs.sh`.

If you have any errors during the build process, make sure you have nvm 14.14.0 installed and set as default:

````
nvm install 14.14.0
nvm use 14.14.0
````
Build the front-end code (jacky_test/sample-front-end/) and upload to IPFS using `~/sample-front-end/ipfs.sh`.

Upon succesful completion you'll save the CID of the front-end to use in the next section (the CID is on the last line ending with `dist`).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Run `git checkout login` to switch to the login branch.

Now you'll use what you've learned in previous steps to build and run the code on top of "dev-runner" and see how it works.

Build the [actor](../../z_glossary/actor.md) in sample-actor folder by running `./build.sh`.
Build the [actor](../../z_glossary/actor.md) in the `sample-actor` folder by running `./build.sh`.

Go to your local `dev-runner` folder and check that the `local/b-node/sample-actor.wasm` file is the most recent version.

Expand All @@ -30,24 +30,23 @@ If the `sample_actor.wasm` file isn't recent, check if your build failed.

From the **dev-runner** repo root directory, run `docker compose up`. **Make sure you wait** about 2 minutes untill all actors are successfully activated.

In a different terminal window, go to the `tutorial-v1` repo and `cd sample-front-end`. From this directory you can start the frontend by using `npm start`
In a different terminal window, go to the `tutorial-v1` repo and `cd sample-front-end`. From this directory you can start the frontend:

````
npm install
npm start
````

Then start your browser go to http://localhost:3200/

You should see a page that looks like the following:

![Pasted image 20230311141039.png](../../../Pasted%20image%2020230311141039.png)

Also you should notice the Metamask popup opens prompting you to connect:
When you click the login button the Metamask popup opens prompting you to connect with Metamask:

![Pasted image 20230311141155.png](../../../Pasted%20image%2020230311141155.png)

If you didn't see the Metamask popup, the most common reason is that you haven't installed Metamask. Install Metamask before continuing this walkthrough.

Please connect Metamask to this local address:

![Pasted image 20230311141251.png](../../../Pasted%20image%2020230311141251.png)

### Q: Why do I need to connect Metamask?

>
Expand Down Expand Up @@ -96,6 +95,4 @@ When you click the "Faucet" button, a transfer request is sent to the backend. I

Once the Faucet transfer has completed, you'll see your new 1000 TEA balance after the follow up balance query completes.

So that's a recap of the steps that just happened.

In the next article, we'll walkthrough the source code, and you can clearly see how the logic works in the code. Stay tuned.
That's a recap of the steps that just happened. For more detailed information please see the code walkthrough articles in the sidebar.
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ You may have already noticed that the destination folder is an **a-node** instea

In the txn.rs file, we have Task, Status, And Txns definitions.

````#[derive(Debug, Clone, Serialize, Deserialize)]
````
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Task {
pub creator: Account,
pub subject: String,
Expand Down
19 changes: 12 additions & 7 deletions docs/_gitbook-dev-docs/020_tutorial/050_sql_crdt/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Although the step to get free test tokens should technically be in the next tuto

## Understand the sample-txn-executor actor

You'll need to `git checkout sql` to the SQL branch. You'll notice that a new folder `sample-txn-executor` has been added. This [actor](../../z_glossary/actor.md) is usally called "A-actor" internally. The previous `sample-actor` is usually called "B-actor". Although the official names for A-actor should be state machine actor and B-actor should be called hosting actor. Just to be clear, some old documents will still use the old "A" and "B" node names.
You'll need to `git checkout sql` to switch to the SQL branch. You'll notice that a new folder `sample-txn-executor` has been added. This [actor](../../z_glossary/actor.md) is called an "A-actor" internally. The previous `sample-actor` is called a "B-actor" internally. Although the official names for A-actor should be state machine actor and B-actor should be hosting actor. Just to be clear, some old documents will still use the old "A" and "B" node names.

Similar to 3-tier architecture in traditional web2 development, the hosting actor is the lambda function running inside the Web Server, while the state machine actor is running inside the [state machine](../../z_glossary/state_machine.md) similar to a database stored procedure.

Expand All @@ -40,7 +40,7 @@ In this step, we'll use SQL as an example to demo how this workflow works. All o

## Build the "sql" branch

First you'll need to switch to the `sql` branch of `tutorial=v1`:
First you'll need to switch to the `sql` branch of `tutorial-v1`:
`git checkout sql`

If you get an error about `sample-actor/Cargo.lock` you can delete that file. Alternately you can also do `git checkout —force sql` if there are any uncommited changes preventing you from switching branches.
Expand All @@ -50,11 +50,16 @@ In your local `tutorial-v1` repo, you'll need to build the two wasm files that a
* `sample-actor/build.sh`
* `sample-txn-executor/build.sh`

The target wasm files will be copied to the `dev-runner` repo: specifically to `/local/b-node` and to `dev-runner/local/a-node` respectively. Note: unlike the `sample_actor.wasm` file that goes to the **b-node**, this `sample_txn_executor.wasm` goes to the **a-node**. This is because it runs in the state machine.
The target wasm files will be copied to the `dev-runner` repo, specifically to `/local/b-node` and to `dev-runner/local/a-node` respectively. Note: unlike the `sample_actor.wasm` file that goes to the **b-node**, this `sample_txn_executor.wasm` goes to the **a-node**. This is because it runs in the state machine.

Start the dev-runner by running `docker compose up`.

Back in your `tutorial-v1` local folder, start the front end by running `npm i` and `npm start` from the sample-front-end folder.
Back in your `tutorial-v1` local folder, start the front-end by running the following commands from the `sample-front-end` folder:

````
npm install
npm start
````

## Admin page and initialization

Expand All @@ -70,10 +75,10 @@ There are two new pages in our app, a **Task** page and an **Admin** page. The n

So please always click those two buttons in the Admin page whenever:

* It's the first time you're running this TApp in Dev-Runner. Or,
* Everytime after you've deleted the `.tokenstate` local state persistent storage.
* It's the first time you're running this TApp in Dev-Runner.
* Or everytime after you've deleted the `.tokenstate` local state persistent storage.

You'll need to delete the `.tokenstate` everytime you modify your code that's related to any state or SQL database. Consider it a "purge" operation. After such a purge, your whole state and SQL databse would be **brand new**. That's why you'll need to initialize it before using your TApp. In the real production environment, there won't be such a "refresh". It'll only be initialized once at your TApp initial deploy.
You'll need to delete the `.tokenstate` everytime you modify your code that's related to any state or SQL database. Consider it a "purge" operation that resets the whole state making the SQL databse **brand new**. That's why you'll need to initialize it before using your TApp. In the real production environment, there won't be such a "refresh". It'll only be initialized once at your TApp's initial deploy.

You'll only need to run those two initialization tasks once. If you click it the second time, you'll be prompted with an error but it won't cause any damage at all. So if you're not sure if you've initialized it or not, feel free to click them again, and take any generated errors as a harmless sign you've already completed these steps.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,12 @@ In order to clean up the [state](../../z_glossary/state.md) data from previous

Start dev-runner by running `docker compose up` from the root of the dev-runner directory.

Now from the `sample-front-end` directory of the `tutorial-v1` repo, run `npm start`.
Now from the `sample-front-end` directory of the `tutorial-v1` repo, run the following commands:

````
npm install
npm start
````

## Initialization steps in the browser

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ In the `tutorial-v1` terminal window, switch to new gas branch by running the fo

Run `./build.sh` specifically in the `sample-actor` and `sample-txn-executor` folders. Verify the two actor wasm files are newly built in `dev-runner/local/a-actor` and `dev-runner/local/b-actor`.

Now we can start the dev-runner by issuing `docker compose up`, then in `tutorial-v1/sample-front-end` run `npm install` and `npm start`. Go to the http://localhost:3200/ url in your browser.
Now we can start the dev-runner by issuing `docker compose up`, then in `tutorial-v1/sample-front-end` run `npm install` and `npm start`. Nest go to the http://localhost:3200/ url in your browser.

## Test locally

Expand All @@ -38,4 +38,4 @@ You can run some test tasks as you did in last tutorial step. This is a helpful

Assuming you have done some operations such as creating a task or taking a task, you should be able to see a record of your actions in the Log page after a few minutes. The records will show your consumption and how much you paid for the gas fee.

Note that in the log page, you'll see all banking transactions including gas fees as well as in-app purchases and fund transfers.
Note that in the log page, you'll see all TEA transactions including gas fees as well as in-app purchases and fund transfers.
2 changes: 1 addition & 1 deletion docs/_gitbook-dev-docs/020_tutorial/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ A standalone github repo. Third party developers can use this project as the sta
* A simple cargo.toml with our wrapped basic crates.
* The UI display "hello world!"

For more information on what skills are required to complete this tutorial as well as the proficiency required to be a TApp developer, read more in [dev prerequisites](t-rust/obsidian/_gitbook-dev-docs/020_tutorial/Developer_requirements.md).
For more information on what skills are required to complete this tutorial as well as the proficiency required to be a TApp developer, read more in [dev prerequisites](./020_tutorial/Developer_requirements.md).
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,14 @@ To install the dev environment in your local machine, you'll need some prerequis
- Node.js
- Rust

Note that you'll need to use node version 14.14.0 for this tutorial:
`nvm use 14.14.0`
Note that you'll need to use node version 14.14.0 for this tutorial. Make sure you have nvm 14.14.0 installed and set as default:

```
nvm install 14.14.0
nvm use 14.14.0
```

You can check which version of node is active using `nvm current`.

If you haven't installed wasm32-unknown-unknown target or the nightly version, you might be prompted to `rustup` and install them according to the instructions.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,16 +76,18 @@ We highly recommend to write and run a unit test whenever you add / modify code.

## Run sample-front-end

First from the code root `cd sample-front-end`, then run `npm install` to install dependencies.

If your backend has different IP or port number other than the default localhost:8000, please edit the `.env.test` file to edit in your customized values:
First from the root of the code repo, `cd sample-front-end`. If your backend has different IP or port number other than the default localhost:8000, please edit the `.env.test` file to edit in your customized values:

```
VUE_APP_LAYER2_URL=http://127.0.0.1:8000
```

This address will be your backend service address.
Start the frontend local web server by running `npm start`

Run the following to install dependencies:
`npm install`
Then start the frontend local web server by running:
`npm start`

If you can see the following:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,12 @@ In our next session we'll create a sample-front-end project. It will run such re

### Start the front end

Make sure you're in the `sample-front-end` folder of the `tutorial-v1` repo and run `npm start`.
Make sure you're in the `sample-front-end` folder of the `tutorial-v1` repo and to start the front-end run the following commands:
```
npm start
```

Open a browser and vlisit [[http://127.0.0.1:3200](http://127.0.0.1:3200/)].
Open a browser and visit [[http://127.0.0.1:3200](http://127.0.0.1:3200/)].

You should see a page with the text "Welcome to Sample Actor testing page" and a single button, "click here to send request".

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Deploy Hello World on Testnet
**NOTE: this section is currently under development. We'll remove this notice when it's ready to be deployed**

In this section of the tutorial, we'll use the dev portal to deploy the **Hello World** boilerplate to the TEA testnet. The goal is to see the `Hello [developer's name]` TApp in the browser after launching such a TApp from the TAppStore.

Expand All @@ -18,9 +19,6 @@ Run `git clone https://github.com/tearust/tutorial-v1.git` to clone code to loca

If you'd like to check in any of your modified code to your own git repo, please rename the project to avoid any conflicts.

## Switch to testing branch
We'll switch to the following branch to access the IPFS scripts:
`git checkout jacky_test`

## Setup TApp
- Login to the Devportal with Metamask: [http://54.180.82.194:8080/ipfs/QmQ7rStyKjfHjZfySo36wgNiBtciEjV4CYRWy6tYrNrjT2](http://54.180.82.194:8080/ipfs/QmQ7rStyKjfHjZfySo36wgNiBtciEjV4CYRWy6tYrNrjT2)
Expand All @@ -30,15 +28,15 @@ We'll switch to the following branch to access the IPFS scripts:

<img width="1198" alt="Screenshot 2023-04-14 at 4 52 21 PM" src="https://user-images.githubusercontent.com/86096370/232627849-ca3a14cb-d3b5-4358-b022-ee86652d7187.png">

We will add this token_id minus the leading `0x` to `jacky_test/sample-actor/impl/manifest.yaml` at line 3. You should also change the actor name from `sample-actor` to a unique name.
We will add this token_id minus the leading `0x` to `~/sample-actor/impl/manifest.yaml` at line 3. You should also change the actor name from `sample-actor` to a unique name.

![image](https://user-images.githubusercontent.com/3214173/231840591-775730aa-1900-4c76-adb6-791f9dd2f467.png)

## Build and upload actor to IPFS
You can build your actor using the same commands we used in the previous step:
`cd sample-actor` and run `./build.sh` to build the actor.

To upload the actor to IPFS, run `jacky_test/sample-actor/ipfs.sh` which executes the following script:
To upload the actor to IPFS, run `./ipfs.sh` from the same directory which executes the following script:

![image](https://user-images.githubusercontent.com/3214173/231841142-35201bb1-a818-4dc0-b754-d9fca8e04b51.png)

Expand Down Expand Up @@ -68,14 +66,7 @@ Here you can set the spending limit up to the amount you have in your TEA wallet
![Screenshot 2023-04-18 at 12 29 24 PM (2)](https://user-images.githubusercontent.com/86096370/232887293-16ba1b14-10b3-473c-b38c-f8170ee02630.png)

## Build and upload front-end
Build the front-end code (jacky_test/sample-front-end/) and upload to IPFS using `jacky_test/sample-front-end/ipfs.sh`.

If you have any errors during the build process, make sure you have nvm 14.14.0 installed and set as default:

```
nvm install 14.14.0
nvm use 14.14.0
```
Build the front-end code (jacky_test/sample-front-end/) and upload to IPFS using `~/sample-front-end/ipfs.sh`.

Upon succesful completion you'll save the CID of the front-end to use in the next section (the CID is on the last line ending with `dist`).

Expand Down
Loading

0 comments on commit 2d5d066

Please sign in to comment.