Para transformar o seu DApp de staking de uma "página estática bonita" em um "aplicativo descentralizado funcional", é necessário completar a injeção da UI (casca) à lógica (alma).
No ecossistema ArcBlock, executar um DApp geralmente é dividido nas seguintes quatro etapas principais:
---
## ## Visão Geral do Tema: através da trilogia "acesso de identidade, interação de contrato, implantação de nó", ativar a UI estática como um aplicativo Web3 funcional.
## ## Análise de Conteúdo: Quatro etapas-chave para executar um DApp
### 1. Ambiente de Implantação: colocar a página "online"
Primeiro, seu código HTML precisa de um lar.
*Execução Local**: Use `blocklet dev` no seu computador, isso irá iniciar um servidor local, permitindo que você acesse através do navegador.
*Execução Oficial**: Você precisa de um nó ArcBlock (ABT Node). Você pode empacotar o código como Blocklet e depois instalá-lo no nó. Assim, usuários de todo o mundo poderão acessar seu DApp através da URL gerada pelo nó.
### 2. Acesso de Identidade: Integre o DID Connect (função de login)
A aplicação de apostas deve saber “quem está apostando”.
*Ação**: você precisa introduzir o componente `did-connect` da ArcBlock.
*Efeito**: Quando o usuário clica em “Connect Wallet”, a página exibirá um código QR. O usuário escaneia com o DID Wallet, e seu DApp pode obter com segurança o endereço da carteira do usuário (DID), sem a necessidade de um nome de usuário e senha tradicionais.
### 3. Lógica Central: Processamento de Transações de Aposta (fluxo de 'dinheiro')
Este é o passo mais crítico. Quando o usuário insere um valor e clica em “STAKE NOW”:
*Disparo no Frontend**: O código JS irá construir uma solicitação de transação (Transaction Request).
*Assinatura da Carteira**: A carteira do celular do usuário receberá uma janela pop-up perguntando “Você concorda em apostar 100 ABT?”.
*Execução na Cadeia**: Após a assinatura do usuário, a transação é enviada para a blockchain (como Asset Chain). O contrato inteligente ou máquina de estados na cadeia irá automaticamente deduzir o ABT do usuário e bloqueá-lo no pool de apostas.
### 4. Feedback de Dados: Exibir rendimentos dinamicamente
Após a aposta ser bem-sucedida, a página não pode ficar inativa.
*Lógica**: Você precisa escrever um pequeno trecho de código JS para puxar dados da blockchain regularmente via GraphQL ou API.
*Efeito**: O usuário pode ver em tempo real o seu “valor apostado” e “rendimentos estimados (Rewards)” em movimento.
---
## ## Dicas para Começar Rápido: Como ver resultados mais rapidamente?
Se você quer ver imediatamente a sensação de “funcionamento”, pode tentar os seguintes caminhos:
1. Use o modelo Blocklet:
Não comece o backend do zero. Quando executar `blocklet create`, escolha um modelo que já tenha um Servidor (como Express ou Koa). Ele já configurou o código subjacente para interagir com a carteira.
2. Aproveite o “Assistente de Desenvolvimento”:
No nó da ArcBlock, há uma ferramenta Data Builder que pode ajudar você a gerar rapidamente interfaces para consultar dados na blockchain, você só precisa conectar essas interfaces à sua UI.
---
## ## Resumo:
A essência de executar um DApp é “apresentação no frontend + autorização da carteira + prova na cadeia”. Sua UI já completou o primeiro passo, o próximo passo central é **integrar a carteira DID**, permitindo que os usuários realmente “invistam” seus ativos na sua página.