Dapplets × Exemplar NEAR

8 min read
To Share and +4 nLEARNs

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:

  1. 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.

  1. Baixe a  extensão do navegador de Dapplets.
  2. Abra  chrome://extensions  em uma nova guia.
  3. Ative o  modo Desenvolvedor  e pressione  F5  para atualizar a página.
  4. Arraste e solte o arquivo baixado na página de extensões. A extensão será instalada automaticamente.Se você estiver usando o Ubuntu ou possivelmente outro sistema operacional Linux, a extensão Dapplets pode desaparecer das extensões do Chrome após reiniciar o PC. Para evitar isso, descompacte o arquivo e use o  Load unpacked botão para adicionar a extensão.
  5. 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  isConnectedconnect 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

15
Scroll to Top