Histórico da Página

O Bitcoin (símbolo monetário: BTC ou XBT) é uma criptomoeda descentralizada que forma um sistema econômico alternativo e utiliza como base a Blockchain para realizar a verificar da sua base de dados distribuída. 

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

Requisitos:

1. Projeto do tipo web criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link (Criando Projeto Web).
2. Ter conhecimento básico sobre Bitcoin e Blockchain. Veja conteúdo a respeito nos links abaixo:
   1. Webinar do CronApp: Blockchain: Uma revolução em todos os setores.
   2. Bitcoin for beginners: The economics and use of Bitcoins e Bitcoin as a technology and network.
   3. Explain Bitcoin Like I’m Five.

Visão geral: exemplo

Nesse tutorial iremos criar uma pequena aplicação para criar uma carteira Bitcoin, obter informações dessa carteira e realizar transações entre carteiras. Utilizaremos uma rede Bitcoin de testes (Testnet) para adicionar fundos a uma dessas carteiras e realizar uma transação. (Figura 1).

Figura 1 - Aplicação gerada ao final desse tutorial.

Figura 2 - Modal para transação de fundos.
 

Como funciona a API

Quando criamos uma carteira em um rede Bitcoin são gerados: um arquivo *.wallet (carteira), que é a chave privada; uma chave pública e recebe uma parte da cadeia de blocos ou "livro-razão" da rede Bitcoin em um arquivo *.spvchain.

Quando vamos transferir recursos de uma carteira para outra, precisamos informar a chave privada da carteira que será debitada (equivalente ao número da conta e senha em um banco convencional) e a chave pública da carteira creditada (equivalente ao número da conta corrente).

Ao realizar a transação, uma chave hash única é gerada e disponibilizada na cadeia de blocos de toda a rede para que todos saibam, garantindo que a transação foi feita.

Criando a View da aplicação

Nessa aplicação teremos uma única tela e um modal que usaremos para realizar as transações. Vamos começar a trabalhar na tela principal, vamos utilizar a página home.view.html (Código Fonte / Principal / Código Fonte Cliente / views / logged / ), que já existe no projeto.

1. Editando os componentes

Arraste os seguintes componentes para a tela deixando como mostrado na Figura 1 e renomeie os rótulos de cada componente:

1. Nome da Carteira (Entrada de texto): Usaremos para dar nomes as carteiras criadas, identificar o nome da carteira que iremos receber as informações e identificar a carteira que será debitada na transferência.
2. Criar Carteira (Botão): Chamar a função de bloco que criará uma carteira;
3. Informações da Carteira (Botão): Chamar a função de bloco que retornará algumas informações sobre a carteira;
4. Transferência (Botão): Abre o modal onde informaremos a conta que será creditada e o valor da transação;
5. Endereço local da Carteira (Entrada de texto): Informará o endereço em que está armazenado o arquivo da carteira (*.wallet);
6. Chave pública da Carteira (Entrada de texto): A chave pública da Carteira, esse é o endereço que será passado para as outras pessoas para que realizem transferência de fundos;
7. Saldo da Carteira (Satoshi) (Entrada de texto): Informa o saldo da carteira em valor Satoshi (menor unidade do BitCoin);
8. Saldo da Carteira (tBTC) (Entrada de texto): Informa o saldo da carteira em valor tBTC (Bitcoin de teste);
   

Se preferir, altere o nome dos identificadores dos campos de texto, facilitando nosso trabalho, já que vamos trabalhar com 7 campos (5 na tela e 2 no modal).

2. Criando o modal para transferência 

Para gerar um modal no CronApp, basta clicar no simbolo "+" (Adicionar modal), como mostra na Figura 3.

Figura 3 - Criando um modal.

Arraste os componentes abaixo para modal, deixando como mostrado na Figura 2 e renomeie os rótulos de cada componente:

1. Enviar Fundos (Texto): Adicionar no HEADER do modal;
2. Chave da Carteira Creditada (Entrada de texto): Adicionar no BODY do moda para informar a chave pública da conta que iremos transferir;
3. Valor (tBTC) (Entrada de texto): Adicionar no BODY do modal para o valor que será transferido em tBTC (Bitcoins de teste);
   
4. Enviar (Botão): Adicionar no FOOTER do modal para chamar a função de bloco que irá transferir o valor de um carteira para outra.

Criando a função do lado Cliente

No lado Cliente vamos apenas criar um bloco que chamará a modal quando clicarmos no botão "Transferência". 

1. Função chamar o modal

Figura 4 - Criando o bloco de programação para chamar o modal.

Para essa função de bloco de programação, basta arrastar o bloco "Exibir modal" (seção Formulário) e selecionar o Identificador do modal que criamos na nossa view. (Figura 5)

Figura 5 - Chamada do modal.

Criando as funções do lado Servidor

Vamos criar 3 funções de bloco de programação do lado Servidor: "CriarCarteira", que irá criar uma carteira na rede Bitcoin e retornar os arquivos *.wallet e *.spvchain; "ObterInformações", para retornar o saldo e a chave pública da carteira e a função "EnviarFundos', responsável por realizar transações entre carteiras.

1. Função Criar Carteira

Da mesma forma que criamos uma função do lado Cliente, iremos fazer do lado Servidor.

Clique com o botão direito do mouse na pasta Bloco de Programação ( localizada em "Código Fonte / Principal / Código Fonte Servidor /") e selecione Novo → Bloco de Programação. Ao abrir a janela "Novo", selecione a opção "Bloco de Programação Vazio" e Avance, em seguida adicione o nome do Arquivo ("Carteira") e clique em finalizar.

Renomeie a função para "CriarCarteira" (1), crie uma nova variável (Seção Variáveis) com o nome "novaCarteira" (2) e arraste o bloco "definir novaCarteira para" (3). (figura 6 - Fazer ainda).

Continuando os passos da Figura 6, arraste o bloco "Criar carteira" (Sessão Blockchain Operation) e encaixe na variável "novaCarteira" (4). Esse bloco recebe 3 parâmetros: o primeiro é o endereço onde serão salvos os arquivos *.wallet e *.spvchain, nesse caso arrastar o bloco "Pasta da aplicação" e criar uma subpasta chamada "carteira", para isso basta concatenar o endereço da pasta da aplicação e adicionar "\carteiras" utilizando o bloco "criar texto com" (sessão texto) (5); o próximo parâmetro é o nome da carteira que será informado pelo usuário no campo "Nome da Carteira", arrastamos o bloco "Obter valor do campo" e selecionamos o identificador desse campo (6), por fim, o último parâmetro é a rede Blockchain na qual iremos trabalhar, para esse tutorial iremos utilizar a rede Testnet, então basta digitar "test" que a API do CronApp já reconhecerá que estamos tratando de um teste na rede Testnet (7).

O bloco "Criar Carteira" retorna, além dos arquivos já informados, o endereço da chave pública que será armazenada na variável "novaCarteira" que criamos. Vamos arrastar o bloco "Alterar valor do campo" e selecionar o identificador do campo "Chave pública da carteira" no primeiro parâmetro e a variável "novaCarteira" no último parâmetro, como no passo (8) da figura 6.

2. Função Obter informações

O objetivo dessa função é retornar informações como o saldo e a chave pública de uma carteira, passando para isso o local do arquivo *.wallet.

Crie 2 variáveis ("saldoCarteira" e "enderecoCarteira") como fizemos no passo anterior e arraste-os. Arraste também os blocos "Obter saldo" e "Obter o chave pública" encaixando-os em suas respectivas variáveis.

Os parâmetros dos 2 blocos são idênticos: local do arquivo *.wallet; nome do arquivo, que será informado pelo usuário no campo "Nome da Carteira" e a rede Blockchain, que nesse caso basta digitar "test" que a API reconhece que estamos trabalhando com a rede de teste Testnet. 

No editor de texto rico do CronApp é possível desabilitar alguns ícones que aparecem na barra de tarefas e ocultar as barras de status e menu, além de estilizar o texto do usuário com o uso do CSS.

Essas personalizações podem ser feitas utilizando a propriedade Opções (options) do texto rico, como mostradas nas figura 3 e 4: Selecione o campo texto rico na tela (1), clique na subaba “CAMPO” na aba propriedades (2) e clique em “…” da propriedade Opções (3) para exibir a janela de “Opções do Editor Rico” e selecione a aba "Geral" para Ocultar as barras menu, status e estilizar o texto ou a aba "Barra de tarefas" para desabilitar algumas funcionalidades do editor (4).