Dapplets × Exemplar NEAR é um Dapplet (um aplicativo de Realidade Aumentada) que pode analisar postagens do Twitter e armazená-las no contrato NEAR. Ele também pode exibir seus tweets salvos na página de sobreposição. Parte inferior do formulário.
1. Introdução
Dapplets – aplicativos que interagem com páginas da web, aumentam-nas inserindo diferentes widgets, analisam os dados das páginas e adicionam algumas novas funcionalidades. Eles podem melhorar a experiência do usuário ao usar mídias sociais, serviços de vídeo e outras fontes.
Dapplets usam a extensão que estamos criando. Esta extensão oferece uma API simples para desenvolvedores de dapplets e grandes habilidades para a comunidade de dapplets. Nossa plataforma é descentralizada. Usamos redes NEAR e Ethereum para nossos registros e contratos. Também usamos armazenamentos descentralizados, como Swarm, IPFS e SIA para hospedagem de código de dapplets e multimídia.
Para usar nossa plataforma, primeiro você precisa instalar a Extensão Dapplets . Atualmente está na fase alfa e não foi publicado no Google Chrome ou em qualquer outra loja. Para instalá-lo siga estes passos:
- Abra um dos seguintes navegadores: Google Chrome, Firefox, Brave, Tor.
As etapas a seguir são descritas para o Google Chrome. As etapas podem diferir em outros navegadores.
- Baixe a extensão do navegador de Dapplets.
- Abra chrome://extensions em uma nova guia.
- Ative o modo Desenvolvedor e pressione F5 para atualizar a página.
- Arraste e solte o arquivo baixado na página de extensões. A extensão será instalada automaticamente.
- Clique no ícone da extensão Dapplets na barra de extensão. Experimente o exemplo Dapplets × NEAR.
2. Tutorial
Vamos estudar como esse dapplet funciona e por que o Dapplet é uma plataforma amigável com NEAR.
O objetivo deste exemplo é mostrar a interação entre NEAR e Dapplets. Se este é o seu primeiro encontro com os Dapplets, recomendamos que experimente primeiro a nossa documentação. Ele contém vários exercícios que explicam como criar dapplets e adaptadores, dos mais simples aos mais complexos. Recomendamos ver os exemplos ex01 e ex04 que descrevem como criar os dapplets e os dapplets mais básicos com uma sobreposição. O conhecimento que você obterá facilitará a compreensão do exemplo atual.
O código inicial para este exemplo está em uma ramificação separada: exercício
Você pode clonar este repositório. Não funcionará diretamente. Tente seguir os passos para iniciá-lo.
Vejamos a estrutura. Existem três componentes: dapplet, overlay e contract.
Dapplet é o ponto de entrada do aplicativo. Ele usa adaptadores para interação com páginas da web, definindo contextos para aumentar e widgets para inserir. Você pode encontrar as funções principais da extensão dentro de um dapplet. Usamos TypeScript em nosso projeto.
Definimos o Overlay como um local onde um usuário pode fazer algo com os dados analisados, conectar-se às funções do dapplet principal por meio da ponte do dapplet e gerenciar os parâmetros de aumento. É uma parte importante do aplicativo, mas é executado em outro ambiente e é publicado como um pacote separado. Na maioria dos casos usamos o React como um dos frameworks mais populares. Mas você pode usar uma estrutura de sua preferência ou JavaScript puro ou TypeScript.
O contrato não se conecta diretamente com outros módulos e pode estar localizado fora do dapplet. No entanto, este contrato NEAR simples é criado especificamente para este dapplet. É por isso que é conveniente colocá-lo na estrutura do aplicativo.
Vamos dar uma olhada em cada módulo.
2.1. Dapplet
Olhe para o /dapplet/src/index.ts.
Inicialmente criamos uma classe injetável com decorador @Injectable e usamos @Inject para adicionar o Adaptador do Twitter como o adapter variável de classe. Crie também o método activate. Ele é executado quando o adaptador selecionado encontra um contexto específico e está carregando. Ele conterá toda a lógica principal.
Adicione o botão a cada tweet. Coloque este código em activate:
Olhe para o código. Obtemos o widget button do adaptador. Em seguida, execute o método do adaptador attachConfig. Ele recebe um objeto com os nomes dos contextos, que serão utilizados, como chaves. Os valores são funções que recebem o contexto analisado como o único argumento e retornam um widget ou um array de widgets. Você também pode retornar null, false ou undefined.
Widget é uma função que recebe um objeto que consiste em estados de widget. Os parâmetros de estado são descritos na documentação dos adaptadores. Você pode encontrar a documentação do Adaptador do Twitter aqui. No nosso caso, adicionamos uma imagem ao botão e à dica de ferramenta. exec é uma função que é executada quando clicada. Agora apenas mostramos o contexto analisado no console.
Execute o dapplet:
⚠️ Como o navegador está bloqueando páginas com certificados de segurança problemáticos, acesse https://localhost:3001/dapplet.json quando o aplicativo estiver em execução e concorde em executar no modo inseguro.
Abra a extensão. Vá para a guia Desenvolvedor e ative o servidor de desenvolvimento: https://localhost:3001/dapplet.json.
Ative a guia Dapplets. Você verá o emblema de dev perto do nosso dapplet. Ligue-o.
Agora você pode ver botões adicionais em nossos tweets. Clique no botão e abra o console. Você verá o contexto analisado do tweet.
Você conseguiu! Parabéns!!! Volte para o código.
Queremos mostrar os dados analisados não no console, mas para os usuários. Usaremos uma sobreposição para isso. Mas antes de implementar a sobreposição, adicione a lógica de interação entre o dapplet e a sobreposição ao dapplet.
Vamos alterar nosso código. Adicione a variável _overlay de classe privada do tipo any. No activate adicione o seguinte código:
A função principal Core.overlay (problemas de digitação serão corrigidos em breve) recebe um objeto com o nome da sobreposição e um título da sobreposição e retorna o Overlay objeto que salvamos na _overlay variável.
Vamos adicionar o método openOverlay à classe:
Neste exemplo, chamamos o método send de overlay. São necessários dois argumentos: o nome desses dados e os dados a serem enviados para a sobreposição.
Adicione openOverlay à função exec e passe o contexto analisado para a sobreposição. Este é o código atual do dapplet:
Abra o manifesto ./dapplet/dapplet.json.
⚠️ Como o navegador está bloqueando páginas com certificados de segurança problemáticos, acesse https://localhost:3000 quando o aplicativo estiver em execução e concorde em executar no modo inseguro.
Aqui vemos a URL da sobreposição nomeada ‘overlay‘ que será usada no modo de desenvolvedor. Durante a publicação do dapplet no registro, a sobreposição será publicada no armazenamento descentralizado.
Também vemos o Adaptador do Twitter nas dependências. Estamos usando a versão 0.9.0 no exemplo.
Vamos para a sobreposição
2.2. Sobreposição
Como mencionamos anteriormente, a sobreposição pode ser criada da maneira que você quiser. Usamos React na maioria dos nossos projetos. Não estaremos analisando todo o código de sobreposição, mas apenas os pontos importantes para nossos aspectos de arquitetura.
Para interação com o dapplet, instale o pacote npm @dapplets/dapplet-overlay-bridge:
Para obter os dados do dapplet, precisamos da classe Bridge na parte de sobreposição. Veja o módulo ./overlay/src/dappletBridge.ts. Aqui está o método onData em que assinamos o ‘data‘ evento, que descrevemos no dapplet.
Então nós o usamos no módulo App.tsx.
Agora salve as alterações e recarregue a página do Twitter. Ao clicar no botão, você verá a sobreposição com os dados do tweet selecionado.
Isso é legal! Mas nosso objetivo é salvar esses dados na blockchain NEAR e recuperá-los. Então vamos ver o contrato.
2.3. Contrato Inteligente NEAR
Veja o módulo ./contract. Existe um contrato inteligente NEAR simples escrito em AssemblyScript com create-near-app.
Em ./contract/assembly/index.ts vemos um PersistentUnorderedMap chamado tweetsByNearId. Ele armazena uma matriz de dados de tweets serializados com o ID do usuário atual. Possui métodos para salvar, remover e recuperar tweets salvos.
Você pode encontrar todos os dados necessários sobre como escrever, testar e implantar contratos inteligentes NEAR na documentação oficial e nos cursos e guias do Learn NEAR .
Vamos ver como se conectar ao contrato inteligente e usar seus métodos no dapplet.
Adicione o seguinte código ao activate método do ./dapplet/src/index.ts módulo:
Existe um Core.contract método que recebe 3 parâmetros: nome da rede (‘near’ ou ‘ethereum’), nome do contrato e objeto com visualização e métodos de alteração.
Agora vamos disponibilizar os métodos de contrato na sobreposição. Para passar os métodos pela ponte de dapplets , adicione uma função listen à chamada de sobreposição. Não tenha medo, apenas copie e cole este código 🙂
As três últimas funções assíncronas passam nossos métodos de contrato para a sobreposição. As primeiras quatro funções precisam emparelhar a carteira com o dapplet. Para obter o objeto Wallet usamos o método Core.wallet , com parâmetros nomeados name ( near ou ethereum) e network. A carteira tem métodos isConnected, connect e disconnect parâmetro accountId.
O próximo passo é mudar ./overlay/src/dappletBridge.ts. Temos que tornar as funções que foram descritas no dapplet, disponíveis no overlay. Copie o seguinte código para a Bridgeclasse:
Agora podemos usar métodos de contrato nos módulos de sobreposição. Podemos autorizar o dapplet com a carteira testnet NEAR e salvar os dados dos tweets selecionados no contrato inteligente. Também podemos ver nossos dados salvos na sobreposição.
Complete todo o código confirmado no arquivo ./overlay/src/App.tsx. Salve as alterações e recarregue a página do Twitter.
A cereja do bolo será a adição da capacidade de visualizar tweets salvos sem analisar novos. Para isso, basta adicionar o Core.onAction método ao activate in ./dapplet/src/index.ts e passar a função de abrir o overlay para ele.
Core.onAction(() => this.openOverlay());
Agora você verá o ícone inicial próximo ao nome dos dapplets .
Um clique no botão abre uma sobreposição com tweets salvos.
Parabéns a todos que chegaram ao final do tutorial! Esperamos que tenha dado tudo certo.
Aqui está o resultado: dapplets -near-example
Se algo não deu certo para você, ou você ainda tem alguma dúvida, fique à vontade para nossos bate-papos no Discord e no Telegram .
Obrigado pelo seu tempo. Esperamos que esse novo conhecimento seja útil e você possa desenvolver aplicativos impressionantes e bem-sucedidos na plataforma Dapplets usando os recursos do protocolo NEAR.🚀✨
Contatos:
Web: dapplets .org
Docs: docs.dapplets .org
GitHub: github.com/dapplets
Discord: discord.gg/YcxbkcyjMV
Telegrama: t.me/dapplets
Twitter: @dapplets project
