WEB3DEV

Cover image for Crie um aplicativo full-stack conectado a uma API Solana RPC
Adriano P. Araujo
Adriano P. Araujo

Posted on

Crie um aplicativo full-stack conectado a uma API Solana RPC

Blockchain ainda é um território misterioso para muitos de seus usuários, mas no final, é apenas um enorme banco de dados com informações gratuitas das quais devemos aproveitar. Neste tutorial, abordaremos como se conectar a um endpoint RPC e começar a usar os dados dinâmicos da Solana em seu aplicativo. Usaremos a plataforma Shakudo para acelerar nosso processo de desenvolvimento, para que possamos fazer todo o desenvolvimento, integração e implantação em apenas um lugar. 

Visão geral:

  1. Introdução

2). Construa seu ambiente

  • Crie uma conta Shakudo gratuita

  • Inicie seu ambiente de desenvolvimento

  • Conecte o SSH de seu VS Code à plataforma ( opcional )

  • Instale as dependências necessárias

3). Desenvolva seu aplicativo

  • Conecte-se ao endpoint do RPC 

  • Como chamar métodos diferentes

  • Confirme suas alterações no Github

4). Implantando seu aplicativo

  • Crie arquivos .yaml e .bs

  • Hospede um novo serviço

Construa seu ambiente

Crie uma conta Shakudo gratuita

Vamos começar pela criação de uma conta Shakudo gratuita. Isso lhe dará acesso a todas as ferramentas necessárias para o desenvolvimento de ponta a ponta do seu aplicativo.

Inicie seu ambiente de desenvolvimento

Agora, supondo que você esteja conectado ao Sandbox, o próximo passo é criar uma nova sessão para que seu ambiente de desenvolvimento seja construído. Uma imagem básica é suficiente para os fins deste tutorial, portanto, pode ser acessado em: Sessions > Start a new Session > Session type: Basic > Start. A compilação da imagem pode levar cerca de 3 minutos, dependendo da disponibilidade do nó.

Quando sua sessão estiver pronta, você pode clicar no botão Open your Session para ser redirecionado para o nosso IDE online. Lá você poderá encontrar várias ferramentas do nosso kit de desenvolvimento que você pode usar na Máquina Virtual que você acabou de criar. Mas se você preferir codificar seus projetos usando o VS Code, poderá conectar-se rapidamente ao SSH seguindo estas instruções:

Conecte o SSH de seu VS Code à plataforma ( opcional )

Quando o ambiente estiver pronto, clique no botão < > para copiar o comando SSH necessário para as próximas etapas.

Cole o comando SSH no terminal do seu código VS

1.6 Vá para View > Command Pallet > Pesquise por: Remote Explorer: Focus on SSH Targets View > Add New > Cole o comando SSH > Clique em Connect to Host em uma nova janela.

Agora você está pronto para começar a criar seu aplicativo através do VS Code. Lembre-se de criar seu projeto na pasta ‘ gitrepo ’ para que possa ser facilmente comitado e  posteriormente no tutorial, implantado.

Instale as dependências necessárias

Para iniciar o ambiente do nó Solana, comece instalando os binary ships com o Solana CLI Tool Suite. Você pode fazer isso seguindo o tutorial disponível na página de documentação da Solana.

Se você estiver criando um aplicativo Javascript, use a biblioteca solana-web3.js para interagir com o nó Solana. Você pode ler mais sobre a configuração e a documentação desta biblioteca, examinando o seu repositório github.

Desenvolva seu aplicativo

Conectando à API RPC

Para gerar uma chave na API Shakudo Solana RPC adequada para você ou sua equipe, você pode entrar em contato conosco no Discord e forneceremos rapidamente uma chave adequada para as necessidades de sua aplicação. Depois de receber sua chave da API RPC, conecte sua máquina virtual a ela executando o seguinte comando no terminal:

solana config set --url https://your-url.dev

*Lembre-se de alterar a URL para a URL fornecida pelo serviço

Como chamar métodos diferentes

Agora que seu endpoint está conectado ao servidor de desenvolvimento, mostraremos como chamar os métodos dentro do aplicativo Javascript. Você pode passar pela Documentação Solana para aprender sobre isso e ver mais detalhes sobre todos os métodos disponíveis. Neste exemplo, usaremos o método “getLargestAccounts ”. 

Esse método retorna as 20 maiores contas até o presente momento na rede Solana.

PARÂMETROS:

  • - ( opcional ) Objeto de configuração que contém os seguintes campos opcionais:

  • ( opcional ) Commitment

  • filter ( opcional ): < string > - resultados do filtro por tipo de conta; atualmente suportando: circulating|nonCirculating

O resultado será uma resposta Rpc em JSON contendo informações sobre o endereço do objeto e os lamports. Dado que 0.000000001 SOL é igual a 1 Lamport.

Você pode solicitar este método executando o comando curl:

`'curl http://localhost:8899 -X POST -H "Content-Type: application/json" -d '

 {"jsonrpc":"2.0","id":1, "method":"getLargestAccounts"}

'`

Você também pode usar a seguinte rota para o back-end do seu aplicativo:


import express from 'express';

import solanaWeb3 from '@solana/web3.js';

import axios from 'axios';



let connection = new solanaWeb3.Connection(solanaWeb3.clusterApiUrl('your-url'), 'confirmed')



const router = express.Router();



router.get('/', async (_req, res) => {

 await connection.getLargestAccounts()

 .then(accounts => res.json(accounts.value))

})



router.get('/usd', async(_req, res) => {

 await axios.get('your-rpckey')

 .then(data => res.json(data.data))

})




export const accounts = router;

Enter fullscreen mode Exit fullscreen mode

Confirme suas alterações no Github

Para salvar as alterações de arquivo no servidor, você precisará enviá-las ao Github através do terminal. Lembre-se de adicionar a pasta node_modules ao .gitignore.

Implantando seu aplicativo

Quando estiver pronto para implantá-lo em produção, você pode ir para a guia de Serviço na Plataforma Shakudo

Crie arquivos .yaml e .sh

Esses arquivos são usados para se conectar ao seu ambiente de produção. No arquivo .yaml, cole:


pipeline:

name: "Solana RPC test"

job_type: "basic"

tasks:

name: "st text"

type: "bash script"

port: 8787

bash_script_path: "my-rpcapp-folder/run.sh"

Enter fullscreen mode Exit fullscreen mode

Run.sh é um arquivo bash que você está usando para executar o arquivo .yaml. Aqui adicionamos o comando do terminal necessário para executar seu aplicativo. Adicione aqui todos os pacotes que você pode precisar.


PROJECT_DIR="$(cd -P "$(dirname "${BASH_SOURCE[0]}")" && pwd)"

cd "$PROJECT_DIR"



# install any other packages here

npm start

Enter fullscreen mode Exit fullscreen mode

O próximo passo é editar o arquivo package.json. Vá para package.json e edite o seguinte:

Na linha 4: “ root ”: “ homepage”: “https://sandbox.hyperplane.dev/my-rpcapp-folder/”. Altere  ‘my-rpcapp-folder’’ para o prefixo de sua preferência.

Na linha 16: “ scripts ”: “ start ”: "HOST = 0.0.0.0 PORT = 8787 react-scripts start ”

Hospede um novo serviço

Agora que você configurou todo o seu ambiente, a pior parte acabou e é hora de implantar seu aplicativo! Para isso, vá para Serviços na página inicial do Shakudo Sandbox.

Ao criar um novo serviço, você verá a seguinte página:

Depois de ver isso, siga as seguintes etapas:

  • Dê um nome ao seu site e desmarque o botão “Virtual Service Path Rewrite”.

  • No Prefixo da URL de serviço, combine-o com o mesmo que você usou para a URL da sua página inicial no arquivo package.json.

  • Copie o caminho do seu arquivo .yaml e cole-o no campo Pipeline YAML Path*. A pasta ‘ gitrepo / ’ não deve ser incluída.

  • Clique no botão Create.

  • Atualize a página e você poderá acessar o endpoint do serviço e verificar os logs relativos aos erros no menu View.

É isso aí. Você criou e implantou com sucesso um aplicativo full-stack conectado a uma API  blockchain na Solana. Seu site está online e você pode facilmente criar, testar e implantar apenas clicando em alguns botões. Obrigado por seguir este tutorial, e agora o poder é seu, com acesso a uma enorme fonte de dados de streaming a qual você pode gerar valor, ser criativo e começar a construir!


Sabrina Aquino

Sabrina é uma desenvolvedora de software criativa que conseguiu criar uma enorme comunidade compartilhando suas experiências pessoais com tecnologias e produtos. Uma ótima solucionadora de problemas, uma jogadora de Age of Empires II acima da média e uma usuária medíocre de Linux. Atualmente, Sabrina é graduada em Engenharia da Computação pela UFRN ( Universidade Federal do Rio Grande do Norte ).


Este artigo foi escrito por Sabrina Aquino  e traduzido por Adriano P. de Araujo. O original em inglês pode ser encontrado aqui.

Top comments (0)