Experimente o Symbol usando o Console do desenvolvedor do Google Chrome!

Este guia foi traduzido do artigo original do Qiita em japonês de nem_takanobu, também conhecido como @xembook

Muito obrigado por nos permitir postar novamente!

Introdução

Publicamos um artigo recentemente sobre o envio de XYM usando o SDK do Python, mas isso exigia um pouco de configuração para começar. Eu li este artigo de nem_takanobu (@xembook ) recentemente mostrando a você uma forma alternativa de enviar XYM programaticamente, mas desta vez sem configurações e dependências complexas, apenas usando o Google Chrome . Literalmente, qualquer um pode tentar – é muito legal!😎

O exemplo é escrito em Javascript e não o usei antes, mas tentarei explicar em termos simples o que cada uma das etapas faz e por que precisamos delas (me deseje boa sorte)! Pode ser difícil de entender no início, mas espero que lhe dê algumas dicas de como o processo funciona e o que acontece no envio de uma transação no blockchain do Symbol.

Este exercício usará o testnet e eu recomendaria não enviar transações no mainnet usando este método. É apenas para fins educativos

Pré-requisitos

  • Uma conexão de internet
  • Navegador Google Chrome

(é realmente tão simples quanto isso!)

O código que você executa também usa pacotes externos, mas você não precisa instalá-los localmente em sua máquina . Especificamente requer @xembook ‘s nem2-browserify que por sua vez depende da Symbol Typescript / Javascript SDK .

Você também terá que usar o faucet testnet Symbol para obter algum XYM para este exercício e usaremos o explorador testnet para visualizar as transações.

Iniciar o console do desenvolvedor e chamar o SDK do símbolo

Primeiro, precisamos navegar até o nó que usaremos para fazer nossa transação. Pode ser qualquer nó da API testnet. Neste exemplo, usaremos o nó testnet http://ngl-dual-001.testnet.symboldev.network:3000/node/info .

Este URL mostrará algumas informações sobre o nó e você deverá ver uma tela semelhante a esta.

Em seguida, precisamos abrir o console do desenvolvedor no Google Chrome. É aqui que executaremos nosso código para enviar uma transação testnet da Symbol. Você pode fazer isso pressionando F12 quando a janela do navegador estiver ativa. Dica – se estiver usando um Mac como o meu, você precisará segurar a tecla de função (fn) e pressionar F12.

Alternativamente, você pode navegar para “Exibir” -> “Desenvolvedor” -> “Ferramentas do desenvolvedor”. Você deverá ver um painel adicional à direita da tela. Apenas certifique-se de que você está na guia “Console” nas Ferramentas do Desenvolvedor.

OK, agora estamos prontos para ir, então vamos começar!

Configuração inicial e importação de biblioteca

Antes de prosseguirmos, precisamos definir alguns parâmetros básicos e importar o nem2-browserify Symbol SDK.

Definimos os seguintes parâmetros:

  1.  – este é o nó que estamos visualizando no momento em nosso navegador da web
  2. hash de geração de rede – o valor de hash do primeiro bloco criado no testnet (podemos encontrar isso nos detalhes do nó exibidos no navegador)
  3. ajuste de época – este é o ajuste de tempo de época do bloco de gênese

Esses valores estão corretos para testnet (mas serão diferentes para mainnet). Os valores não precisam ser alterados se você usar um nó testnet diferente, pois o endereço do nó é obtido automaticamente na janela do navegador.

NODE = window.origin;
GENERATION_HASH = '3B5E1FA6445653C971A50687E75E6D09FB30481055E3990C84B25E9222DC1155';
EPOCH_ADJUSTMENT = 1616694977;

(script = document.createElement('script')).src = 'https://xembook.github.io/nem2-browserify/symbol-sdk-1.0.1.js';
document.getElementsByTagName('head')[0].appendChild(script);

Podemos copiar e colar o código acima no console de ferramentas do desenvolvedor e, após pressionar Enter, vemos que a tag de script foi incorporada com êxito.

Importando a biblioteca Symbol SDK

Em seguida, simplesmente precisamos importar o SDK do símbolo. Basta digitar o seguinte no console e pressionar Enter.

nem = require("/node_modules/symbol-sdk");

Crie uma nova conta testnet Symbol

Vamos configurar uma nova conta Symbol no testnet. Iremos armazenar os detalhes da conta como alice. Observação – isso irá gerar uma nova conta toda vez que você executar este comando. Portanto, o endereço que você vê no meu exemplo será diferente daquele que você mesmo gerou.

alice = nem.Account.generateNewAccount(nem.NetworkType.TEST_NET);

Se digitarmos a linha acima no console, uma nova conta será gerada. Se você clicar na seta à esquerda de Account, verá o endereço da conta e outros detalhes.

Aqui podemos ver que o endereço que criamos é o TCE6GXZCRTTYKGVQRDKM2WB6EHV7DDNN56K566Iseu obviamente será diferente!

Financiando nossa nova conta

Temos uma conta, mas no momento ela está vazia. Queremos ser capazes de enviar algum XYM testnet, então precisamos usar a torneira para fazer isso. Agora você pode fazer isso abrindo uma nova guia, acessando a torneira e inserindo seu endereço acima, mas também podemos fazer isso usando o console.

"http://faucet.testnet.symboldev.network/?recipient=" + alice.address.plain() +"&amount=10"

Este comando gera uma URL de faucet e preenche previamente o endereço que geramos. Ele também pede 10 XYM. Se você inserir esta linha no console, ela gerará a URL na qual você precisa clicar. Depois de clicado, ele o levará ao site da torneira e você precisará clicar no botão “REIVINDICAR!” botão. Após este 10 XYM será enviado para o seu novo endereço.

Verificando nosso saldo

Você pode visitar o testnet explorer e pesquisar seu endereço manualmente ou apenas colar este código no console do desenvolvedor, pressionar Enter e clicar no link.

"http://explorer.testnet.symboldev.network/accounts/" + alice.address.plain()

Você verá que sua conta agora contém 10 XYM!

Ao executar esta linha de código no console, você criará o SignedTransactionchamado signedTX. Você deve ver uma saída semelhante a esta se a transação foi assinada com sucesso.

Enviando uma transação

Agora configuramos tudo, criamos e financiamos uma nova conta. Estamos prontos agora para enviar uma transação.

Vamos criar uma transação para enviar 1 XYM de volta ao endereço da torneira TCKTHE-UKYN6R-Z64QDP-LIBIJV-KYJ5B4-KV7NIE-YYIe anunciar isso no testnet.

Vamos dividir esse processo em suas partes componentes:

  1. Criando a transação
    • Configure os detalhes da transação, por exemplo, qual mosaico queremos enviar, quanto devemos enviar etc.
  2. Assinando a transação
    • Assine a transação com a chave privada da nossa conta
  3. Anunciando a transação
    • Envie a transação assinada para o nó para inclusão no blockchain

Criando nossa transação

Aqui definimos a criação de uma nova transação com nem.TransferTransaction.create. Incluímos o parâmetro que definimos anteriormente, o endereço do destinatário e definimos o ID do mosaico. Neste caso, estamos usando testnet XYM e o ID do mosaico é .EPOCH_ADJUSTMENTTCKTHEUKYN6RZ64QDPLIBIJVKYJ5B4KV7NIEYYI091F837E059AE13C

Também especificamos a quantidade de XYM que gostaríamos de enviar. XYM tem uma divisibilidade de 6 e a unidade base está em microXYM (1 milionésimo de 1 XYM). Portanto, temos que dizer que estamos enviando 1.000.000 de unidades que enviarão uma transação de 1 XYM.

Queremos incluir uma mensagem “Hello Symbol from NEM!” usando .nem.PlainMessage.create

Por fim, configuramos a rede para testnet e definimos uma taxa máxima para a transação em 100.000 microXYM (ou 0,1 XYM).

tx = nem.TransferTransaction.create(
    nem.Deadline.create(EPOCH_ADJUSTMENT),
    nem.Address.createFromRawAddress("TCKTHEUKYN6RZ64QDPLIBIJVKYJ5B4KV7NIEYYI"), 
    [new nem.Mosaic (new nem.MosaicId('091F837E059AE13C'),nem.UInt64.fromUint(1000000))],
    nem.PlainMessage.create('Hello Symbol from NEM!'),
    nem.NetworkType.TEST_NET,
    nem.UInt64.fromUint(100000)
);

Se executarmos este código no console, podemos ver que configuramos um novo TransferTransactione se clicarmos na seta de expansão ela mostra todos os detalhes que configuramos acima.

Assinatura

Em seguida, precisamos assinar a transação que acabamos de criar. Isso pode ser feito simplesmente executando esta única linha de código no console.

Estamos assinando a convocação que acabamos de configurar. Precisamos também fornecer o hash de geração de rede que configuramos anteriormente.TransferTransactiontxGENERATION_HASH

signedTx = alice.sign(tx, GENERATION_HASH);

Anuncie a transação assinada para a rede

Até agora, criamos uma nova transação e a assinamos com a chave privada de nossa conta. A próxima etapa é anunciar essa nova transação ao nó para inclusão no blockchain.

Podemos fazer isso criando um novo especificando o nó que estamos usando. Se você se lembra até agora, definimos a variável para o nó ao qual estávamos conectados em nosso navegador, que em nosso caso era http://ngl-dual-001.testnet.symboldev.network:3000/node/info .TransactionHttpNODE

Em seguida, apenas anunciamos a transação assinada para esse nó.signedTx

new nem.TransactionHttp(NODE)
    .announce(signedTx)
    .subscribe((x) => console.log(x), (err) => console.error(err));

Se a transação foi anunciada com sucesso, você verá a mensagem "packet 9 was pushed to the network via /transactions"exibida.

Nota: A aceitação de uma transação por um nó não é uma garantia de que ela foi aprovada no blockchain da Symbol. Precisamos, portanto, verificar o status de aprovação separadamente.

Verificar se a transação foi confirmada

O código a seguir irá gerar um URL onde você pode verificar o status da transação usando o hash da transação assinada.

console.log(NODE + "/transactionStatus/" + signedTx.hash);

Se você clicar no link, verá o status da transação. Aqui podemos ver que foi confirmado com sucesso. Como o “grupo” mostra confirmado e o “código” mostra Sucesso .

Se você preferir uma saída mais bonita, você pode confirmar no explorador. Este código irá gerar o URL para você.

console.log("http://explorer.testnet.symboldev.network/transactions/" + signedTx.hash);

Basta clicar no link gerado e você poderá ver os detalhes da sua transação no testnet explorer.

E novamente vemos que foi bem-sucedido e podemos ver os detalhes da transação!

E é isso!

Acho que este guia é excelente, então muito obrigado @xembook por tornar possível fazer tudo isso por meio do console do desenvolvedor e por seu guia completo que tornou fácil para mim seguir.

Como de costume, eu encorajo vocês, leitores, a darem isso atrás e se divertirem, não tenham medo de experimentar suas próprias idéias e ajustes no código.

Estou surpreso que você possa fazer isso através do Google Chrome e não há dor de cabeça em configurar qualquer coisa, então não há realmente nenhuma desculpa para você não tentar! 😆

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: