Como construir um simples Front End para o seu contrato inteligente EOS

Nós vamos construir um Front End simples que interage com um contrato inteligente EOS

Shankar Nathan Blocked Desbloquear Seguir Seguindo 30 de dezembro Nosso front end simples: Página de login

Eu sempre fui um grande fã do React desde o começo, mas ultimamente eu tenho brincado com o Vue e tenho que admitir que eu realmente me apaixonei por ele por sua simplicidade. Para manter as coisas o mais simples possível para você, decidi usar o Vue para construir nosso front end dessa vez.

NOTA: Se você ainda não experimentou o Vue, a documentação oficial é o melhor lugar para começar.

Crie um projeto Vue

Comece instalando o Vue, abra o terminal e digite:

 npm i -g @ vue / cli 

Agora que o Vue está instalado, vamos usar o CLI para criar nosso projeto

 vue criar eos-login 

Quando solicitado, selecione “Selecionar recursos manualmente” e use a barra de espaço para selecionar o recurso Babel, Roteador e Vuex. Para o resto das perguntas, você pode simplesmente escolher os padrões.

Uma vez que o Vue CLI criou nosso projeto, podemos mudar o diretório para ele e adicionar plugins. Vamos adicionar o plugin Vuetify para nos ajudar com o design.

 cd eos-login 
 vue add vuetify 

Você será solicitado uma série de perguntas, basta seguir minhas respostas como abaixo:

opções de vuetify

Ok, finalmente vamos precisar instalar a biblioteca de JavaScript oficial da EOS para que possamos fazer chamadas facilmente para o EOS blockchain.

 npm i eosjs @ beta 

NOTA: O pacote npm eosjs @ beta é o mais recente comparado a apenas eosjs

Até agora você terá uma configuração de projeto perfeita para iniciar a codificação.

 npm run saque 

Siga o link no seu navegador e você deverá ver o modelo padrão do Vue funcionando!

Implante nosso contrato inteligente

Antes de começarmos a codificar o front end, vamos implantar nosso mais recente contrato inteligente para o blockchain EOS.

Eu escrevi um contrato inteligente simples que tem uma tabela 'usuários' e um método de login que aceita uma conta EOS como entrada. O método de login armazenará a conta na tabela de usuários se nenhum registro já existir para esse nome. No entanto, se já houver um registro, ele incrementará o valor de reward_points em 1. O login também garante que apenas uma conta EOS válida possa entrar.

Vamos em frente e implantar este contrato. Eu já escrevi um guia passo a passo sobre como fazer isso, por favor clique aqui.

Codificando a parte do front end

Agora que temos nosso contrato de hello implantado, podemos retomar nosso trabalho no front end. Abra a pasta do projeto eos-login no VSCode (ou seu IDE favorito), adicionaremos 4 arquivos ao nosso projeto:

  1. AppTopBar.vue sob a pasta de componentes
  2. EosService.js sob a pasta eosio (crie esta pasta)
  3. Login.vue sob a pasta de visualizações
  4. .env sob a pasta raiz do projeto

Adicione esses arquivos ao seu projeto. Sua estrutura de projeto deve agora parecer como abaixo.

Estrutura de diretórios do projeto

Vamos começar codificando o componente AppTopBar. No Vue, os componentes podem ser facilmente adicionados às páginas, tornando-os muito reutilizáveis. O componente AppTopBar é simplesmente uma barra de cabeçalho com um título de nossa aplicação.

 <! - AppTopBar.vue -> 
 <template> 
<span>
<v-toolbar cor do aplicativo = "preto escurecer-4" escuro>
<v-spacer class = "oculto-md-e-up"> </ v-spacer>
<v-toolbar-title> {{appTitle}} </ v-barra-de-ferramentas-título>
</ v-toolbar>
</ span>
</ template>
 <script> 
exportar padrão {
nome: 'AppTopBar',
data () {
Retorna {
appTitle: 'My EOS Dapp'
};
}
};
</ script>
 <estilo scoped> 
</ style>

Agora abra App.vue sob a pasta src para importar nosso componente. Observe que o AppTopBar foi formatado como <app-top-bar> dentro do modelo.

 <! - App.vue -> 
 <template> 
<v-app>
<app-top-bar> </ app-top-bar>
<transição de v-content = "slide-x-transition">
<visão do roteador> </ exibição do roteador>
</ v-content>
</ v-app>
</ template>
 <script> 
importar AppTopBar de '@ / components / AppTopBar';
 exportar padrão { 
nome: 'App',
components: {
AppTopBar
}
};
</ script>

Para o nosso aplicativo, teremos duas páginas principais, que é a página de login e a página inicial. No App.vue, estamos usando o Vue Router para vincular a ambas as páginas com a tag <router-view> </ router-view>. Abra o arquivo router.js para editar os caminhos.

 //router.js 
 importar Vue do 'vue'; 
import Router do 'vue-router';
import Login a partir de './views/Login.vue';
 Vue.use (roteador); 
 exportar o novo roteador padrão ({ 
modo: 'história',
base: process.env.BASE_URL,
rotas: [
{
caminho: '/',
nome: 'login',
componente: Login
}
{
caminho: '/ home',
nome: 'casa',
component: () => import ('./ views / Home.vue')
}
]
});

Edite nosso Home.vue

 <! - Home.vue -> 
 <template> 
<título principal do v-card-title>
<h4> Bem-vindo à minha página principal do Dapp! </ h4>
</ v-card-title>
</ template>
 <script> 
exportar padrão {
componentes: {}
};
</ script>

Crie o nosso Login.vue

 <! - Login.vue -> 
 <template> 
<v-container>
<classe de linha de layout v = "text-xs-center">
<v-flex xs3 style = "imagem de fundo: url (' http://cdn.wallpapersafari.com/7/86/gqiGH7.jpg' )">
<v-card height = "500px"> </ v-card>
</ v-flex>
<v-flex xs4 classe = "cinza ilumine-4">
<estilo do contêiner v = "posição: relativo; início: 13%;" class = "text-xs-center">
<v-card flat>
<título principal do v-card-title>
<h4> Login </ h4>
</ v-card-title>
<v-form>
<v-text-field
v-model = "accountName"
prepend-icon = "person"
name = "AccountName"
label = "Nome da conta"
> </ v-text-field>
<v-text-field
v-model = "privateKey"
prepend-icon = "lock"
name = "PrivateKey"
label = "Chave privada"
> </ v-text-field>
<ações do cartão v>
<v-btn @click = "handleLogin ()" bloco grande primário> Login </ v-btn>
</ v-card-actions>
</ v-form>
</ v-card>
</ v-container>
</ v-flex>
</ v-layout>
</ v-container>
</ template>
 <script> 
importar EosService de '@ / eosio / EosService';
 exportar padrão { 
data () {
Retorna {
nome da conta: '',
chave privada: ''
};
}
métodos: {
handleLogin: function () {
EosService.login (this.accountName, this.privateKey)
.then (() => {
isso $ router.push ('home');
})
.catch (err => {
alerta (err.toString ());
});
}
}
};
</ script>

A página Login.vue chama a função de login no EosService e passa as entradas para o nome da conta e a chave privada. Se a função de login retornar sucesso, ela simplesmente redireciona para a página Home.vue.

Agora, antes de mergulhar na função de login do EosService, vamos editar nosso arquivo .env com os valores corretos. Abra o arquivo .env no diretório raiz do projeto.

 VUE_APP_SMART_CONTRACT_NAME = "youraccname1" 
VUE_APP_NODE_ENDPOINT = " https://api.kylin.alohaeos.com:443 "

Defina o valor para VUE_APP_SMART_CONTRACT_NAME como o nome da conta que você criou anteriormente na Testnet para implantar o contrato hello. O valor de VUE_APP_NODE_ENDPOINT deve ser definido para um terminal Testnet, neste caso, estou usando o Testnet CryptoKylin. Subsequentemente, se você tiver implementado seu contrato inteligente na Mainnet, deverá definir o valor do terminal para qualquer um dos 21 principais produtores de bloco .

EosService

Finalmente, vamos examinar o código da biblioteca EosService.js que criei. É aqui que a maior parte da ação está acontecendo.

 //EosService.js 
 import {Api, JsonRpc} de 'eosjs'; 
import JsSignatureProvider de 'eosjs / dist / eosjs-jssig';
 função assíncrona invokeAction (action, dataValue) { 
const rpc = new JsonRpc (process.env.VUE_APP_NODE_ENDPOINT);
 const privateKey = localStorage.getItem ('private_key'); 
const signatureProvider = novo JsSignatureProvider ([privateKey]);
 const api = new Api ({ 
rpc,
signatureProvider,
textDecoder: new TextDecoder (),
textEncoder: new TextEncoder ()
});
 experimentar { 
const resultWithConfig = await api.transact (
{
ações: [
{
conta: process.env.VUE_APP_SMART_CONTRACT_NAME,
nome: ação,
autorização: [
{
actor: localStorage.getItem ('name_account'),
permissão: 'active'
}
]
data: dataValue
}
]
}
{
blocksBehind: 3,
expireSeconds: 30
}
);
return resultWithConfig;
} pegar (err) {
jogue errar;
}
}
 classe EosService { 
login estático (acc, key) {
return new Promise ((resolver, rejeitar) => {
localStorage.setItem ('name_account', acc);
localStorage.setItem ('private_key', chave);
invokeAction ('login', {usuário: acc})
.then (() => {
resolver();
})
.catch (err => {
localStorage.removeItem ('name_account');
localStorage.removeItem ('private_key');
rejeitar (err);
});
});
}
}
 exportar EosService padrão; 

Basicamente, o que estamos fazendo aqui é criar uma transação de API passando os parâmetros do arquivo .env anteriormente. Para que isso funcione, precisamos criar um provedor de assinatura com uma chave privada de conta EOS para acessar o contrato inteligente. Uma vez que este é um tutorial simples, estamos lidando diretamente com a chave privada aqui, no entanto, em uma aplicação do mundo real, é melhor integrar com uma carteira de terceiros para lidar com a criação do provedor de assinatura. Dessa forma, você não precisa perguntar diretamente a seus usuários sobre a chave privada, que é insegura.

NOTA: O Scatter é um bom exemplo de uma carteira de terceiros por aí. Eles se estabeleceram como uma solução de carteira confiável na comunidade EOS. Curiosamente, eles já têm uma API existente para você integrar com seus aplicativos.

Ok, terminamos com todo o código de front end. Se você chegou a este ponto, dê um tapinha nas costas para seguir adiante. Acredito que concluímos um front end mínimo para qualquer contrato inteligente EOS. Todo o trabalho que você fará no futuro provavelmente será construído sobre essa base.

Eu postei os arquivos deste projeto no GitHub: https://github.com/shankqr/eos-login . Agora será um bom momento para você comparar seu código e o meu para garantir que tudo esteja igual antes de continuarmos.

Execute nosso código

Vá em frente, entre no diretório do nosso projeto e execute o código:

 npm run saque 

Siga o link no seu navegador: http: // localhost: 8080 / , sua tela deve ficar assim:

Digite os detalhes

Digite o nome da sua conta junto com a chave privada que você criou anteriormente no Testnet. Clique no Login.

Página principal do Dapp

Se você tiver digitado tudo corretamente, você será direcionado para a nossa Página inicial após alguns segundos.

Parabéns! você acabou de construir seu primeiro Dapp.

Antes de encerrarmos esta série, vamos apenas verificar se nosso contrato inteligente registrou esse login em nossa tabela de usuários.

Como você pode ver o retorno que seu registro foi adicionado à tabela de usuários. Agora vamos testar para ver se o reward_points é incrementado se fizermos login novamente. Atualize seu navegador e tente fazer o login novamente. Após o login, vamos verificar novamente:

Fantástico! Nosso contrato inteligente está fazendo o que foi programado para fazer. Você não ama apenas o Blockchain, é tão confiável.

Resumo

Você aprendeu como:

  1. Crie um projeto vazio do Vue
  2. Adicionar um plug-in do Vue
  3. Instale a biblioteca de javascript oficial EOS
  4. Escreva um contrato inteligente EOS que possa armazenar dados em tabelas
  5. Conecte um front end ao EOS

Espero que tenha gostado deste guia, por favor deixe seus comentários abaixo. Estou pensando em escrever sobre a integração da carteira do Scatter em seguida. Eu adoraria ouvir seus pensamentos.

Siga-me no LinkedIn!