- Criado por Igor Andrade, última alteração em 13/07/2018
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 2 Próxima »
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:
- Projeto do tipo web criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link (Criando Projeto Web).
- Ter conhecimento básico sobre Bitcoin e Blockchain. Veja conteúdo a respeito nos links abaixo:
- Webinar do CronApp: Blockchain: Uma revolução em todos os setores.
- Bitcoin for beginners: The economics and use of Bitcoins e Bitcoin as a technology and network.
- 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:
- 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.
- Criar Carteira (Botão): Chamar a função de bloco que criará uma carteira;
- Informações da Carteira (Botão): Chamar a função de bloco que retornará algumas informações sobre a carteira;
- Transferência (Botão): Abre o modal onde informaremos a conta que será creditada e o valor da transação;
- Endereço local da Carteira (Entrada de texto): Informará o endereço em que está armazenado o arquivo da carteira (*.wallet);
- 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;
- Saldo da Carteira (Satoshi) (Entrada de texto): Informa o saldo da carteira em valor Satoshi (menor unidade do BitCoin);
- 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:
- Enviar Fundos (Texto): Adicionar no HEADER do modal;
- Chave da Carteira Creditada (Entrada de texto): Adicionar no BODY do moda para informar a chave pública da conta que iremos transferir;
- Valor (tBTC) (Entrada de texto): Adicionar no BODY do modal para o valor que será transferido em tBTC (Bitcoins de teste);
- 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
Clique com o botão direito do mouse na pasta Bloco de Programação ( localizada em "Código Fonte / Principal / Código Fonte Cliente / js /") 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 e clique em finalizar. (Figura 4).
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 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).
- Sem rótulos