WEB3DEV

Guilherme Boaventura
Guilherme Boaventura

Posted on

Azle: Crie canisters na ICP utilizando o Typescript

Artigo escrito por: @guilhermeboaventurarodrigues

Nesse artigo iremos abordar o Azle, o Azle é um Typescript CDK (Canister Development Kit) criado pela "demergent-labs", que nos permite desenvolver Canisters na ICP utilizando o Typescript.

Canisters é a forma que é denominado os "smarts contracts" na ICP, quando nós desenvolvemos um contrato ele é compilado em WebAssembly, e a partir daí ele é executado dentro de uma unidade computacional especial, chamada Canisters.

Pré-Requisitos:

Levando em consideração que você tenha os pré-requisitos instalados, vamo pro código!

1 - Abra seu VSCode e inicie um novo projeto.

Novo projeto vscode

Após iniciar um novo projeto, abra seu terminal integrado.

2 - Criando as pastas, instalando as dependencias e desenvolvendo o código.

Para começar, iremos criar uma pasta com o nome backend

mkdir backend && cd backend
Enter fullscreen mode Exit fullscreen mode

Digitando esse comando, nós iremos criar uma pasta e entrar dentro dela. Você também pode fazer esses passos manualmente.

Após ter criado a pasta e entrado dentro dela, iremos criar nosso arquivo package.json, para fazer isso digite no seu terminal:

npm init -y
Enter fullscreen mode Exit fullscreen mode

Nosso projeto atualmente está assim:

vscode package.json criado

Pronto, package.json criado, agora é hora de instalar as dependências.

Abra seu terminal e digite:

npm install azle
Enter fullscreen mode Exit fullscreen mode

Agora iremos criar o arquivo dfx.json, que vai ser responsável pelos diretórios do pŕojeto.
Para cria-ló, abra seu terminal e digite:

touch dfx.json
Enter fullscreen mode Exit fullscreen mode

Dentro do arquivo dfx.json, iremos colocar o seguinte código:

{
    "canisters": {
        "backend": {
            "type": "custom",
            "build": "npx azle backend",
            "root": "src",
            "ts": "src/index.ts",
            "candid": "src/index.did",
            "wasm": "target/wasm32-unknown-unknown/release/backend.wasm"
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Nesse código, estamos instanciando o caminho onde nós iremos desenvolver nosso Canister (ts), caminho onde nosso código compilado em wasm vai ficar (wasm), e etc.

Após terminar o nosso dfx.json, iremos criar nosso arquivo ts, onde nós iremos desenvolver nosso canister.

Abra seu terminal e digite:

mkdir src && cd src && touch index.ts
Enter fullscreen mode Exit fullscreen mode

Nesse comando, estamos criando uma nova pasta chamada src, entrando dentro dela, e criando um arquivo chamado index.ts.

Nesse artigo iremos desenvolver um canister muito simples, uma função que vai retornar "Hello World".

Dentro do arquivo index.ts, digite o seguinte código:

import { Query } from 'azle';

export function hello_world(): Query<string> {
    return 'Hello world!';
}
Enter fullscreen mode Exit fullscreen mode

E assim ficou nosso projeto, vamos testa-lo?
projeto final

3 - Executando o código

Para executar o código, iremos precisar de dois terminais.

No TERMINAL A digite:

dfx start
Enter fullscreen mode Exit fullscreen mode

No terminal TERMINAL B digite:

dfx canister create backend
dfx build backend
dfx canister install backend --wasm target/wasm32-unknown-unknown/release/backend.wasm.gz
Enter fullscreen mode Exit fullscreen mode

(Caso seu código estiver dado algum erro, instale o "cmake" - sudo apt install cmake)

PRONTO! Criamos e instalamos nosso canister!

Agora vamos interagir com o nosso canister, para chamar uma função, digite no TERMINAL B:

dfx canister call <nome_do_canister> <nome_da_função> <parametrôs>
Enter fullscreen mode Exit fullscreen mode

No nosso caso, vai ser o seguinte comando:

dfx canister call backend hello_world
Enter fullscreen mode Exit fullscreen mode

Caso estiver dado tudo certo, ele deve retornar isso pra gente:
resposta canister

PRONTO! Nesse artigo nós conseguimos entender o que é o Azle, criamos um Canister bem simples em Typescript, instalamos esse Canister e ainda conseguimos interagir com ele, olha que legal!

Top comments (0)