Aula 051: Integrando Programas Solana com Interfaces Web
Nesta aula, vamos explorar como integrar programas Solana com interfaces web. Usaremos JavaScript para interagir com nossos contratos inteligentes (programas) Solana a partir de uma aplicação web. Isso fornecerá uma maneira fluida de se comunicar com a blockchain, permitindo que possamos construir aplicações dinâmicas em tempo real.
Pré-requisitos
Antes de começarmos, assegure-se de que você possui o seguinte:
- Conhecimento básico de Rust e contratos inteligentes Solana.
- Familiaridade com JavaScript e conceitos básicos de desenvolvimento web.
- Um programa Solana básico (contrato inteligente) implantado em uma testnet.
Configurando o Nosso Ambiente
Vamos assumir que você já tem um programa Solana implantado e que sabe como interagir com ele usando a CLI Solana. Se você não completou isso, por favor, consulte aulas anteriores sobre como criar e implantar programas Solana.
Vamos criar uma interface HTML simples que interaja com um programa Solana usando a biblioteca @solana/web3.js.
Instalando Dependências
Você precisará ter o Node.js e o npm instalados na sua máquina. Crie um novo projeto e instale os pacotes necessários:
mkdir solana-web-interface
cd solana-web-interface
npm init -y
npm install @solana/web3.jsCriando a Interface Web
Agora, crie um arquivo index.html e adicione o seguinte código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interface Web Solana</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Interação com Programa Solana</h1>
<button id="connectWallet">Conectar Carteira</button>
<button id="sendTransaction">Enviar Transação</button>
<div id="response"></div>
<script src="app.js"></script>
</body>
</html>Escrevendo o Código JavaScript
Crie um arquivo app.js no mesmo diretório e escreva o seguinte código:
const { Connection, PublicKey, clusterApiUrl, SystemProgram, Transaction, sendAndConfirmTransaction } = require('@solana/web3.js');
const connection = new Connection(clusterApiUrl('devnet'), 'confirmed');
async function connectWallet() {
const provider = window.solana;
if (provider && provider.isPhantom) {
const response = await provider.connect();
console.log('Conectado à carteira:', response.publicKey.toString());
alert(`Conectado à carteira: ${response.publicKey.toString()}`);
return response.publicKey;
} else {
alert('Por favor, instale uma extensão de carteira como o Phantom.');
}
}
async function sendTransaction() {
const walletAddress = await connectWallet();
const transaction = new Transaction().add(
SystemProgram.transfer({
fromPubkey: walletAddress,
toPubkey: new PublicKey('SUA_CHAVE_PUBLICA_RECEPTORA_AQUI'),
lamports: 1000000000, // Enviar 1 SOL
})
);
try {
const signature = await sendAndConfirmTransaction(connection, transaction, {
skipPreflight: false,
preflightCommitment: 'confirmed',
});
console.log('Transação bem-sucedida com a assinatura:', signature);
alert(`Transação bem-sucedida! Assinatura: ${signature}`);
} catch (error) {
console.error('Transação falhou:', error);
alert('Transação falhou. Verifique o console para mais detalhes.');
}
}
document.getElementById('connectWallet').onclick = connectWallet;
document.getElementById('sendTransaction').onclick = sendTransaction;Explicação do Código
-
Conectando à Carteira:
- Utilizamos o provedor de carteira Phantom para conectar a carteira do usuário.
- A função
connectWalletverifica se o usuário possui a carteira Phantom instalada e solicita que ele se conecte.
-
Enviando uma Transação:
- Na função
sendTransaction, criamos uma nova transação que transfere SOL da carteira do usuário para uma chave pública específica (altereSUA_CHAVE_PUBLICA_RECEPTORA_AQUIpara o endereço do receptor). - Em seguida, enviamos e confirmamos a transação usando
sendAndConfirmTransaction.
- Na função
Executando a Aplicação
Para executar sua aplicação web, abra index.html em um navegador. Certifique-se de que você tenha a carteira Phantom instalada e configurada.
Quando você clicar no botão "Conectar Carteira", deverá aparecer um prompt para conectar sua carteira Phantom. Após conectar, ao clicar no botão "Enviar Transação", ele tentará enviar 1 SOL para o endereço do receptor especificado.
Conclusão
Nesta aula, aprendemos como integrar programas Solana com interfaces web usando JavaScript. Criamos com sucesso uma aplicação web simples que permite que os usuários conectem suas carteiras e enviem transações para um endereço designado na blockchain Solana.
Este é apenas o ponto de partida—você pode expandir isso adicionando mais recursos, como recuperar dados on-chain, exibir saldos de contas ou interagir com programas Solana mais complexos. O céu é o limite ao construir aplicações descentralizadas na Solana!