Como conectar uma carteira Web3 a um site

Como conectar uma carteira Web3 a um site

Uma carteira Web3 é essencial para a experiência Web3. Neste artigo, explicamos exatamente como conectar uma carteira a um site Web3 usando o Moralis.

Para muitos desenvolvedores, construir uma página da Web é um passeio no parque. Mas, ao converter ou implementar Web3 , muitos ficam confusos. Isso é especialmente verdade quando um programador tradicional tenta enfrentar a etapa inicial de implementação da autenticação Web3 , que pode permitir que os usuários conectem uma carteira Web3 a um site. Se você é um daqueles que acham esse processo complicado, não se preocupe, temos uma solução só para você. Na verdade, com sua proficiência em JavaScript, você pode utilizar o Moralis para implementar o login Web3 facilmente. Assim, para aqueles que desejam uma resposta ao “como se conectar ao site Web3?” pergunta, este guia "como conectar a carteira ao site" será altamente benéfico.

Mostraremos como você pode conectar facilmente uma carteira Web3 a um site (também conhecido como autenticar com MetaMask ) nas seções a seguir. Apresentaremos uma boa alternativa ao React , pois criaremos um dapp simples usando Next.js. O último é uma estrutura de desenvolvimento web de código aberto que inclui recursos interessantes. No entanto, outras ferramentas poderosas também nos permitem conectar ao site Web3. Assim, vamos explorar o poder do MetaMask – a carteira Web3 mais popular . Além disso, usaremos a melhor plataforma de backend Web3 , a Moralis , para implementar o recurso “conectar carteira ao site”. Este " Firebase para criptografia” nos permite incluir essa funcionalidade essencial com uma única linha de código. Para fazer isso, você deve primeiro concluir algumas etapas de configuração inicial, pelas quais o guiaremos aqui. Então, para ter certeza de que você está pronto para o desafio de hoje, crie sua conta Moralis gratuita antes de continuar.  

Conectar a carteira ao site – Explicação sobre o login na Web3

Quando se trata de login Web3 ou inscrição Web3, geralmente nos referimos a isso como “autenticação Web3”. Como o título deste artigo sugere, usamos carteiras criptográficas ou carteiras Web3 para esse fim. Se você é novo no reino das criptomoedas, isso pode parecer complicado. No entanto, é bastante simples quando você usa as ferramentas certas.

Como mostra a imagem acima, geralmente é uma questão de clicar em um único botão. Além disso, os usuários também precisam confirmar seu login dentro de suas carteiras (também uma ação de clique único). Como tal, as coisas são bastante simples no frontend. Embora isso não signifique necessariamente que o back-end seja fácil de implementar. Na verdade, ainda existem muitos desenvolvedores que desenvolvem o dapp construindo diretamente sobre os nós Ethereum RPC . Como tal, eles enfrentam todas as limitações dos nós RPC . Portanto, eles não conseguem obter resultados adequados ou gastam muito tempo apenas para incluir o recurso “conectar-se à Web3”. 

Ao contrário da maioria dos sites Web2, onde os usuários usam seus combos de e-mail e senha ou contas sociais para fazer login, no Web3, os endereços criptográficos dos usuários servem como chaves. Claro, usando algumas ferramentas legais, autenticação Web3 via e-mail , ou mesmo login social Web3 , também são possíveis. No entanto, no núcleo do login da Web3, os usuários precisam ter seus endereços de blockchain para interagir com a cadeia. Além disso, você deve saber que a criptografia é uma coisa bastante “complicada”. Como tal, seria completamente impraticável e fácil de usar esperar que os usuários insiram seus endereços de criptografia manualmente. Felizmente, como mencionamos na introdução, podemos contar com as ferramentas existentes para tornar a autenticação Web3 muito mais simples. Isso é o que faremos em nosso projeto de exemplo aqui.

Por que conectar a carteira ao site?

Ao cobrir a explicação acima, você entende o que implica quando os usuários conectam a carteira ao site – eles basicamente se conectam ao site Web3. Isso permite que eles interajam com a cadeia na qual o site se baseia. Uma vez conectados, os usuários podem enviar, receber e armazenar tokens fungíveis e não fungíveis (NFTs). Além disso, usando o método “conectar carteira ao site”, os usuários acessam mercados NFT , jogos GameFi ou NFT , plataformas DeFi e outros sites de criptografia. Em última análise, você não pode ser um usuário da Web3 ou se tornar um desenvolvedor de blockchain sem uma carteira de criptomoedas. 

Como mencionado, você pode pegar o atalho final – Moralis. Este auge da atual pilha de tecnologia Web3 vem com integrações MetaMask e WalletConnect . Assim, você pode fazer com que seus usuários se conectem ao site Web3 sem nenhum problema.  

Conecte-se ao site Web3 usando uma carteira de criptografia

No futuro, mostraremos como conectar uma carteira Web3 a um site e como implementar essa opção para seus usuários. Ao longo do caminho, usaremos nosso IDE preferido – Visual Studio Code (VSC), Next.js, SDK da Moralis e MetaMask para desenvolvedores . Além disso, ao contrário de alguns outros métodos que incorporam o login do Web3, usando as ferramentas acima, você pode personalizar completamente sua interface de usuário do Web3 . No entanto, esta não é a maneira mais rápida de se conectar ao site Web3. Caso você queira implementar o recurso “conectar carteira ao site” em alguns minutos, você deve explorar o melhor padrão do Ethereum dapp .

À medida que desenvolvemos nosso projeto de exemplo, primeiro concluiremos as configurações do projeto Next.js. Em seguida, construiremos nosso frontend de exemplo. Em seguida, concluiremos a configuração inicial do Moralis e a integração do Moralis. Depois de concluir o frontend e o backend, também verificaremos como lidar com erros. No entanto, vamos começar com uma demonstração rápida para ter uma ideia melhor do que vamos construir.

Conectar a carteira ao site – Demonstração

Tal como acontece com todos os nossos projetos de exemplo, a simplicidade é onde está para o nosso dapp. Então, aqui está o nosso exemplo de login Web3:

Como você pode ver, a tela inicial possui um logotipo e o botão “Login With Moralis”. Uma vez que os usuários clicam no botão acima, o MetaMask solicita que eles confirmem sua ação:

Como mencionado anteriormente, garantiremos que nosso dapp “conectar ao site Web3” também seja capaz de lidar com vários erros. Por exemplo, digamos que os usuários cliquem no botão “Cancelar” em vez de “Assinar” quando solicitado pelo MetaMask, então esta é a mensagem que queremos que eles vejam nesse caso:

Claro, também precisamos oferecer aos usuários alguma indicação de que eles fizeram login com sucesso. Assim, esta é a página que os usuários autenticados acessam:

A página apresentada acima também inclui o botão “Sair”. Assim, os usuários não precisam permanecer conectados. Além disso, olhando para a captura de tela acima, você pode ver que focamos na página de login. O último é uma página de login “dev-level” adequada. Então, agora é hora de arregaçar as mangas e se juntar a nós enquanto criamos um dapp “conectar ao site Web3”.

Como se conectar ao site Web3 usando o Next.js – Configuração do projeto

Primeiro, use seu terminal para navegar até a pasta que deseja usar para o projeto de exemplo de hoje. Em seguida, verifique se você está executando a versão mais recente do nó. Ao trabalhar com Next.js, você começa com o comando “ npx create-next-app@latest ”. O último solicitará que o terminal solicite que você insira o nome do seu projeto. Sinta-se à vontade para ser criativo ou usar o mesmo nome que o nosso – “página de entrada”. Em seguida, aguarde alguns segundos enquanto o novo projeto está sendo criado:

Após a conclusão da instalação, você precisa digitar “ cd sign-in-page ”. Em seguida, você pode executar seu aplicativo clean slate com o comando “ npm run dev ”. Se você concluiu todas as etapas acima conforme as instruções, você deve estar olhando para isso:

Agora, abra o projeto criado acima no VSC (ou seu editor de código preferido). Para sua conveniência, o aplicativo clean slate vem com várias pastas e arquivos padrão:

Além disso, há algum conteúdo de modelo que nosso aplicativo inicial contém. Como não precisamos disso, queremos excluí-lo. Portanto, abra seu arquivo “index.js” e exclua tudo entre as tags “<head>” e “<footer>”. Além disso, exclua todas as linhas “import” e o “className” dentro de “<div>”. Isto é o que você deve observar depois de organizar o arquivo “index.js”:

Além disso, se esta for sua primeira vez trabalhando com Next.js, recomendamos assistir ao vídeo abaixo em 0:52. Lá, um especialista da Moralis comparará rapidamente o Next.js com o ReactJS. 

Frontend para conectar a carteira ao site

Como mencionado acima, combinar habilidades de JavaScript com MetaMask e Moralis pode te levar longe. Então, se você é proficiente em JavaScript, use o vídeo abaixo (a partir de 5:12) como um guia através do processo de desenvolvimento de front-end. Um especialista da Moralis mostrará primeiro como usar o arquivo “global.css” para deixar sua página “conectar carteira ao site” organizada. Em seguida, ele mostrará como criar um novo componente de login com seu próprio arquivo CSS. Ao longo do caminho, você descobrirá o básico sobre flexboxes. Em cerca de 17 minutos, você terá a parte do frontend finalizada, conforme apresentado na demonstração acima. No entanto, caso você não queira codificar o frontend, você pode acessar todo o código no GitHub . 

Conecte-se ao site Web3 usando o Moralis – cubra o back-end

Ao decidir usar o Moralis para suas necessidades de back-end, você precisa concluir algumas etapas iniciais de configuração do Moralis. Abaixo estão as etapas que você deve seguir para se conectar ao site Web3 com o SDK da Moralis. 

• Faça login na sua conta Moralis – Neste ponto, você provavelmente já tem sua conta Moralis pronta. Portanto, faça o login usando suas credenciais. No entanto, se você ainda não o criou, use o link anterior no início deste artigo e crie uma conta.
• Crie um servidor Moralis – Dentro da área de administração do Moralis, você precisará criar um novo servidor. Isso inclui escolher um tipo de servidor e inserir os detalhes do servidor. Você pode acessar instruções bem detalhadas clicando no link “Create a Moralis Server”.

• Instale o Moralis SDK – Instale o Moralis SDK usando seu terminal digitando “ npm install moralis ” seguido de “ npm install react-moralis ”. Por fim, digite o comando “ npm run dev ”.

Conecte a carteira ao site integrando a Moralis

Com seu servidor Moralis funcionando, você pode integrar o Moralis ao seu código. Isso cuidará das necessidades de back-end e permitirá que os usuários conectem facilmente a carteira ao site. Comece acessando o arquivo “_app.js” dentro do VSC. Você precisará adicionar algumas linhas de código antes de colar os detalhes do servidor Moralis. Para obter detalhes, use o tutorial em vídeo acima a partir de 24:02.

• Obtenha os detalhes do seu servidor Moralis – Você precisa do URL do servidor e do ID do aplicativo, que você pode visualizar clicando em “Ver detalhes” na página “Servidores” dentro da área de administração do Moralis:

Use os ícones de cópia ao lado dos detalhes necessários:

• Inicialize Moralis – Cole os detalhes copiados acima dentro de “_app.js”:

• Adicionando a funcionalidade “Conectar ao site Web3” – Esta é a parte em que você oferece aos usuários do seu exemplo dapp para conectar facilmente a carteira ao site. Comece acessando o arquivo “Login.js” e deixe o vídeo acima (26:08) guiá-lo. Você adicionará algumas linhas de código; no entanto, “ onClick=(authenticate) ” fará o trabalho pesado .

Conecte-se ao site Web3 – Lidando com Erros

Neste ponto, você tem um dapp totalmente funcional que permite que seu usuário se conecte ao site Web3. No entanto, como mencionado em nossa demonstração, ser capaz de lidar com erros corretamente também é muito importante. Como tal, recomendamos que você também aborde esse aspecto do nosso projeto de exemplo. Portanto, use o vídeo acima a partir das 28:00. Ao concluir esta parte final de nossa missão “conectar carteira ao site”, você garantirá uma UX mais suave.  

Resumo

Nós cobrimos uma grande distância neste artigo. Neste ponto, você sabe como se conectar ao site Web3 usando carteiras criptográficas. Você também sabe como oferecer aos usuários uma maneira de conectar a carteira aos dapps do site. Além disso, além de cobrir a teoria sobre autenticação Web3 e carteiras Web3, também concluímos um projeto de exemplo bastante útil. Como tal, você teve a chance de criar sua própria versão de um dapp simples que inclui login Web3. Além disso, você teve a chance de se familiarizar com o Next.js.

Fonte do artigo original em https://moralis.io

What is GEEK

Buddha Community

Does My Site Work?

EPISODE SUMMARY

On this episode, we will discuss how you can verify that your site works and continues to work. We’re digging into automated testing and how to write tests for your Django apps.

Full show notes are available at https://www.mattlayman.com/django-riffs/13.

EPISODE NOTES

Full show notes are available at https://www.mattlayman.com/django-riffs/13.

#does my site work? #your site is #episode summary #episode notes #the site. #my site work

Como conectar uma carteira Web3 a um site

Como conectar uma carteira Web3 a um site

Uma carteira Web3 é essencial para a experiência Web3. Neste artigo, explicamos exatamente como conectar uma carteira a um site Web3 usando o Moralis.

Para muitos desenvolvedores, construir uma página da Web é um passeio no parque. Mas, ao converter ou implementar Web3 , muitos ficam confusos. Isso é especialmente verdade quando um programador tradicional tenta enfrentar a etapa inicial de implementação da autenticação Web3 , que pode permitir que os usuários conectem uma carteira Web3 a um site. Se você é um daqueles que acham esse processo complicado, não se preocupe, temos uma solução só para você. Na verdade, com sua proficiência em JavaScript, você pode utilizar o Moralis para implementar o login Web3 facilmente. Assim, para aqueles que desejam uma resposta ao “como se conectar ao site Web3?” pergunta, este guia "como conectar a carteira ao site" será altamente benéfico.

Mostraremos como você pode conectar facilmente uma carteira Web3 a um site (também conhecido como autenticar com MetaMask ) nas seções a seguir. Apresentaremos uma boa alternativa ao React , pois criaremos um dapp simples usando Next.js. O último é uma estrutura de desenvolvimento web de código aberto que inclui recursos interessantes. No entanto, outras ferramentas poderosas também nos permitem conectar ao site Web3. Assim, vamos explorar o poder do MetaMask – a carteira Web3 mais popular . Além disso, usaremos a melhor plataforma de backend Web3 , a Moralis , para implementar o recurso “conectar carteira ao site”. Este " Firebase para criptografia” nos permite incluir essa funcionalidade essencial com uma única linha de código. Para fazer isso, você deve primeiro concluir algumas etapas de configuração inicial, pelas quais o guiaremos aqui. Então, para ter certeza de que você está pronto para o desafio de hoje, crie sua conta Moralis gratuita antes de continuar.  

Conectar a carteira ao site – Explicação sobre o login na Web3

Quando se trata de login Web3 ou inscrição Web3, geralmente nos referimos a isso como “autenticação Web3”. Como o título deste artigo sugere, usamos carteiras criptográficas ou carteiras Web3 para esse fim. Se você é novo no reino das criptomoedas, isso pode parecer complicado. No entanto, é bastante simples quando você usa as ferramentas certas.

Como mostra a imagem acima, geralmente é uma questão de clicar em um único botão. Além disso, os usuários também precisam confirmar seu login dentro de suas carteiras (também uma ação de clique único). Como tal, as coisas são bastante simples no frontend. Embora isso não signifique necessariamente que o back-end seja fácil de implementar. Na verdade, ainda existem muitos desenvolvedores que desenvolvem o dapp construindo diretamente sobre os nós Ethereum RPC . Como tal, eles enfrentam todas as limitações dos nós RPC . Portanto, eles não conseguem obter resultados adequados ou gastam muito tempo apenas para incluir o recurso “conectar-se à Web3”. 

Ao contrário da maioria dos sites Web2, onde os usuários usam seus combos de e-mail e senha ou contas sociais para fazer login, no Web3, os endereços criptográficos dos usuários servem como chaves. Claro, usando algumas ferramentas legais, autenticação Web3 via e-mail , ou mesmo login social Web3 , também são possíveis. No entanto, no núcleo do login da Web3, os usuários precisam ter seus endereços de blockchain para interagir com a cadeia. Além disso, você deve saber que a criptografia é uma coisa bastante “complicada”. Como tal, seria completamente impraticável e fácil de usar esperar que os usuários insiram seus endereços de criptografia manualmente. Felizmente, como mencionamos na introdução, podemos contar com as ferramentas existentes para tornar a autenticação Web3 muito mais simples. Isso é o que faremos em nosso projeto de exemplo aqui.

Por que conectar a carteira ao site?

Ao cobrir a explicação acima, você entende o que implica quando os usuários conectam a carteira ao site – eles basicamente se conectam ao site Web3. Isso permite que eles interajam com a cadeia na qual o site se baseia. Uma vez conectados, os usuários podem enviar, receber e armazenar tokens fungíveis e não fungíveis (NFTs). Além disso, usando o método “conectar carteira ao site”, os usuários acessam mercados NFT , jogos GameFi ou NFT , plataformas DeFi e outros sites de criptografia. Em última análise, você não pode ser um usuário da Web3 ou se tornar um desenvolvedor de blockchain sem uma carteira de criptomoedas. 

Como mencionado, você pode pegar o atalho final – Moralis. Este auge da atual pilha de tecnologia Web3 vem com integrações MetaMask e WalletConnect . Assim, você pode fazer com que seus usuários se conectem ao site Web3 sem nenhum problema.  

Conecte-se ao site Web3 usando uma carteira de criptografia

No futuro, mostraremos como conectar uma carteira Web3 a um site e como implementar essa opção para seus usuários. Ao longo do caminho, usaremos nosso IDE preferido – Visual Studio Code (VSC), Next.js, SDK da Moralis e MetaMask para desenvolvedores . Além disso, ao contrário de alguns outros métodos que incorporam o login do Web3, usando as ferramentas acima, você pode personalizar completamente sua interface de usuário do Web3 . No entanto, esta não é a maneira mais rápida de se conectar ao site Web3. Caso você queira implementar o recurso “conectar carteira ao site” em alguns minutos, você deve explorar o melhor padrão do Ethereum dapp .

À medida que desenvolvemos nosso projeto de exemplo, primeiro concluiremos as configurações do projeto Next.js. Em seguida, construiremos nosso frontend de exemplo. Em seguida, concluiremos a configuração inicial do Moralis e a integração do Moralis. Depois de concluir o frontend e o backend, também verificaremos como lidar com erros. No entanto, vamos começar com uma demonstração rápida para ter uma ideia melhor do que vamos construir.

Conectar a carteira ao site – Demonstração

Tal como acontece com todos os nossos projetos de exemplo, a simplicidade é onde está para o nosso dapp. Então, aqui está o nosso exemplo de login Web3:

Como você pode ver, a tela inicial possui um logotipo e o botão “Login With Moralis”. Uma vez que os usuários clicam no botão acima, o MetaMask solicita que eles confirmem sua ação:

Como mencionado anteriormente, garantiremos que nosso dapp “conectar ao site Web3” também seja capaz de lidar com vários erros. Por exemplo, digamos que os usuários cliquem no botão “Cancelar” em vez de “Assinar” quando solicitado pelo MetaMask, então esta é a mensagem que queremos que eles vejam nesse caso:

Claro, também precisamos oferecer aos usuários alguma indicação de que eles fizeram login com sucesso. Assim, esta é a página que os usuários autenticados acessam:

A página apresentada acima também inclui o botão “Sair”. Assim, os usuários não precisam permanecer conectados. Além disso, olhando para a captura de tela acima, você pode ver que focamos na página de login. O último é uma página de login “dev-level” adequada. Então, agora é hora de arregaçar as mangas e se juntar a nós enquanto criamos um dapp “conectar ao site Web3”.

Como se conectar ao site Web3 usando o Next.js – Configuração do projeto

Primeiro, use seu terminal para navegar até a pasta que deseja usar para o projeto de exemplo de hoje. Em seguida, verifique se você está executando a versão mais recente do nó. Ao trabalhar com Next.js, você começa com o comando “ npx create-next-app@latest ”. O último solicitará que o terminal solicite que você insira o nome do seu projeto. Sinta-se à vontade para ser criativo ou usar o mesmo nome que o nosso – “página de entrada”. Em seguida, aguarde alguns segundos enquanto o novo projeto está sendo criado:

Após a conclusão da instalação, você precisa digitar “ cd sign-in-page ”. Em seguida, você pode executar seu aplicativo clean slate com o comando “ npm run dev ”. Se você concluiu todas as etapas acima conforme as instruções, você deve estar olhando para isso:

Agora, abra o projeto criado acima no VSC (ou seu editor de código preferido). Para sua conveniência, o aplicativo clean slate vem com várias pastas e arquivos padrão:

Além disso, há algum conteúdo de modelo que nosso aplicativo inicial contém. Como não precisamos disso, queremos excluí-lo. Portanto, abra seu arquivo “index.js” e exclua tudo entre as tags “<head>” e “<footer>”. Além disso, exclua todas as linhas “import” e o “className” dentro de “<div>”. Isto é o que você deve observar depois de organizar o arquivo “index.js”:

Além disso, se esta for sua primeira vez trabalhando com Next.js, recomendamos assistir ao vídeo abaixo em 0:52. Lá, um especialista da Moralis comparará rapidamente o Next.js com o ReactJS. 

Frontend para conectar a carteira ao site

Como mencionado acima, combinar habilidades de JavaScript com MetaMask e Moralis pode te levar longe. Então, se você é proficiente em JavaScript, use o vídeo abaixo (a partir de 5:12) como um guia através do processo de desenvolvimento de front-end. Um especialista da Moralis mostrará primeiro como usar o arquivo “global.css” para deixar sua página “conectar carteira ao site” organizada. Em seguida, ele mostrará como criar um novo componente de login com seu próprio arquivo CSS. Ao longo do caminho, você descobrirá o básico sobre flexboxes. Em cerca de 17 minutos, você terá a parte do frontend finalizada, conforme apresentado na demonstração acima. No entanto, caso você não queira codificar o frontend, você pode acessar todo o código no GitHub . 

Conecte-se ao site Web3 usando o Moralis – cubra o back-end

Ao decidir usar o Moralis para suas necessidades de back-end, você precisa concluir algumas etapas iniciais de configuração do Moralis. Abaixo estão as etapas que você deve seguir para se conectar ao site Web3 com o SDK da Moralis. 

• Faça login na sua conta Moralis – Neste ponto, você provavelmente já tem sua conta Moralis pronta. Portanto, faça o login usando suas credenciais. No entanto, se você ainda não o criou, use o link anterior no início deste artigo e crie uma conta.
• Crie um servidor Moralis – Dentro da área de administração do Moralis, você precisará criar um novo servidor. Isso inclui escolher um tipo de servidor e inserir os detalhes do servidor. Você pode acessar instruções bem detalhadas clicando no link “Create a Moralis Server”.

• Instale o Moralis SDK – Instale o Moralis SDK usando seu terminal digitando “ npm install moralis ” seguido de “ npm install react-moralis ”. Por fim, digite o comando “ npm run dev ”.

Conecte a carteira ao site integrando a Moralis

Com seu servidor Moralis funcionando, você pode integrar o Moralis ao seu código. Isso cuidará das necessidades de back-end e permitirá que os usuários conectem facilmente a carteira ao site. Comece acessando o arquivo “_app.js” dentro do VSC. Você precisará adicionar algumas linhas de código antes de colar os detalhes do servidor Moralis. Para obter detalhes, use o tutorial em vídeo acima a partir de 24:02.

• Obtenha os detalhes do seu servidor Moralis – Você precisa do URL do servidor e do ID do aplicativo, que você pode visualizar clicando em “Ver detalhes” na página “Servidores” dentro da área de administração do Moralis:

Use os ícones de cópia ao lado dos detalhes necessários:

• Inicialize Moralis – Cole os detalhes copiados acima dentro de “_app.js”:

• Adicionando a funcionalidade “Conectar ao site Web3” – Esta é a parte em que você oferece aos usuários do seu exemplo dapp para conectar facilmente a carteira ao site. Comece acessando o arquivo “Login.js” e deixe o vídeo acima (26:08) guiá-lo. Você adicionará algumas linhas de código; no entanto, “ onClick=(authenticate) ” fará o trabalho pesado .

Conecte-se ao site Web3 – Lidando com Erros

Neste ponto, você tem um dapp totalmente funcional que permite que seu usuário se conecte ao site Web3. No entanto, como mencionado em nossa demonstração, ser capaz de lidar com erros corretamente também é muito importante. Como tal, recomendamos que você também aborde esse aspecto do nosso projeto de exemplo. Portanto, use o vídeo acima a partir das 28:00. Ao concluir esta parte final de nossa missão “conectar carteira ao site”, você garantirá uma UX mais suave.  

Resumo

Nós cobrimos uma grande distância neste artigo. Neste ponto, você sabe como se conectar ao site Web3 usando carteiras criptográficas. Você também sabe como oferecer aos usuários uma maneira de conectar a carteira aos dapps do site. Além disso, além de cobrir a teoria sobre autenticação Web3 e carteiras Web3, também concluímos um projeto de exemplo bastante útil. Como tal, você teve a chance de criar sua própria versão de um dapp simples que inclui login Web3. Além disso, você teve a chance de se familiarizar com o Next.js.

Fonte do artigo original em https://moralis.io

Role of Professional Brand Consulters to Make Your Brand Successful

Each company wishes to remain present in the industry, and for that purpose, it indulges in user profile creation sites list to become popular in the online field. To achieve this, however, you need robust and productive strategies to maintain your existing customers’ loyalty. These plans should also attract new customers at precisely the same time.

Only the latest consulting firms are effective enough to observe the suitable approaches that can help you transform your business into your favourite brand. At Vowels Advertising in Dubai, Abu Dhabi, we offer various courses and suggestions to help your business and building to be effective by becoming a brand consultant. Branding advisers build new communication methods and a new identity. These advisers offer the brand of goods as required. They research your brand, which is made up of its identity and values. Brand Advisors have fantastic ideas and approaches to branding your products.

The most significant advantage of hiring a new consulting firm is that it has years of experience combined with the latest construction approaches. Since then, such companies are used to market trends and are continually being improved; they can quickly assess the competition and track competitor companies. In this way, they can analyze the manufacturer’s promotional requirements and evaluate the market to target a new product more effectively.

None of the other popular brands you see in the market today have started on a large scale right from the start. They achieved their present position thanks to ongoing trials and planned procedures. The whole long-term strategy was to introduce a new identity, place it precisely in the current market, and strengthen it by copying it to acceptable masses. Planning these elements and then implementing them appropriately is not a simple job. That is why companies from all over the world employ new consulting companies to implement the project.

If best, a new consulting firm can be tricky as there are an endless number of firms offering such services? The key to finding the perfect supplier for you is to analyze your condition first. As soon as you write down all the things, you can compare providers on the Internet and look for any gaps that may be useful to you. Also, start looking for reviews and connect with all previous customers to find out how satisfied they were with all the services.

By opting for Enterprises, they are responsible for creating the perfect brand identity for virtually any business, placing or repositioning it according to the market in which it operates, designing campaigns that advertise the business professionally and economically, and conducting thorough target market, competition, and market research. Thanks to all these activities, companies help to establish a small business and increase its visibility on the market. In the case of your small business, you can undoubtedly see it grow and reach a wider audience. You can find suitable new employees for a consulting company.

So this is how you can hire professional brand consulters to promote your brand amongst the customers effectively.

#profile creation sites #profile creation sites 2021 #profile creation sites list #high pr profile creation sites #free profile creation sites list #high da profile creation sites

Como conectar um aplicativo Unity a uma carteira Web3

Você deseja conectar um aplicativo Unity a uma carteira Web3? Se sim, este é o guia para você! Certifique-se de verificar como conectar carteiras criptográficas aos dApps do Unity.

Neste artigo, mostraremos como conectar um aplicativo Unity a uma carteira Web3. No entanto, se você preferir pular o tutorial e ir direto para o código e o repositório do projeto, verifique a seguinte página do GitHub: 

Documentação completa – https://github.com/MoralisWeb3/youtube-tutorials/tree/main/unity-wallet-mobile 

O desenvolvimento de jogos e aplicativos Web3 para várias plataformas pode ser uma tarefa cansativa. Assim, é lógico utilizar ferramentas de desenvolvimento que potencialmente tornam esse processo mais acessível. Uma dessas ferramentas é o Unity . O Unity permite desenvolver rapidamente aplicativos multiplataforma para vários dispositivos diferentes. Além disso, quando se trata de desenvolvimento de blockchain, é ainda mais interessante permitir que os usuários conectem sua carteira Web3 aos aplicativos Unity. Tradicionalmente, este tem sido um processo complexo; no entanto, com Moralis , podemos fazê-lo em alguns minutos. Como tal, mostraremos como conectar um aplicativo móvel Unity a uma carteira Web3 com o Moralis!

De uma perspectiva tradicional, o processo tem sido bastante complicado quando alguém deseja conectar uma carteira criptográfica a um dApp móvel , pois esse processo exigiria uma extensa quantidade de desenvolvimento de blockchain de back-end. Com a Moralis, isso é resolvido – poupando você da necessidade de reinventar a roda. A Moralis fornece uma infraestrutura de backend pronta para todos os usuários, tornando o desenvolvimento Web3 mais simples. Como tal, você pode reduzir significativamente o tempo de desenvolvimento de todos os seus futuros projetos de blockchain com uma média de 87% ao trabalhar com o sistema operacional Moralis. 

Portanto, se você deseja se tornar um desenvolvedor de blockchain , o passo inicial em sua jornada é se inscrever na Moralis. Isso permitirá que você se mova muito mais rapidamente para o mercado e forneça a melhor experiência de desenvolvedor do mercado! Além disso, você poderá concluir a missão “conectar aplicativo Unity à carteira Web3” de maneira rápida e fácil! 

Como conectar um aplicativo Unity a uma carteira Web3

Nesta seção do artigo, vamos nos aprofundar em como conectar um aplicativo Unity a uma carteira Web3. Para ilustrar o poder de trabalhar com o Moralis, criaremos um aplicativo Android Unity simples ao qual os usuários podem conectar sua carteira MetaMask e assinar uma mensagem. Em troca, o aplicativo exibirá uma mensagem de sucesso junto com o endereço da carteira do usuário. 

Agora, para tornar o tutorial mais compreensível, vamos dividir o processo de como conectar uma carteira criptográfica a um dApp móvel nas cinco etapas a seguir: 

1. Desenvolvimento de uma interface de usuário front-end.
2. Configurando um servidor Moralis.
3. Configurando a conexão da carteira Web3.
4. Adicionando o script do gerenciador de aplicativos.
5. Ajustando a interface do usuário.

Etapa 1: como conectar um aplicativo Unity a uma carteira Web3 – desenvolvendo uma interface do usuário de front-end

A primeira coisa que você precisa fazer é baixar o Unity e instalar o Unity Hub. Além disso, como estamos prestes a criar um aplicativo Android, há alguns ajustes a serem feitos. Para tornar o Unity adequado para o desenvolvimento Android, precisamos garantir que as "Configurações de compilação" estejam definidas para a plataforma Android.

Como tal, a primeira coisa que você precisa fazer é instalar o Android SDK. Para fazer isso, você precisa abrir o Unity Hub, navegar até a guia "Instalações", clicar na roda dentada e clicar em "Adicionar módulos". Você precisará então instalar o “Android Build Support” e incluir o Android SDK. 

Com a plataforma alterada para Android, podemos continuar criando uma nova cena que vamos chamar de “Principal”. Depois disso, o próximo passo é criar e adicionar uma nova tela e painel ao “Principal”. Dentro do painel, adicionamos um botão, que vamos chamar de ”ConnectButton”, e um elemento ”TextMeshPro” que vamos chamar de “WalletAddressText”. Além disso, também adicionaremos um texto ao botão dizendo ”Connect to Wallet”. 

Agora, isso é essencialmente para a interface do usuário do aplicativo de demonstração. No entanto, a interface do usuário deve ser baseada em suas preferências. Como tal, você está livre para brincar no Unity e adicionar seu toque à interface do usuário de seus aplicativos para que ela atenda às suas necessidades de desenvolvimento. No entanto, é basicamente assim que a estrutura do aplicativo que estamos criando se parece: 

Além disso, se você quiser saber mais sobre o desenvolvimento de UI (interface do usuário) dentro do espaço criptográfico, recomendamos dar uma olhada no kit Web3UI da Moralis . Agora, vamos seguir em frente em nossa busca para conectar um aplicativo Unity a uma carteira Web3 configurando um servidor Moralis!

Etapa 2: Como conectar um aplicativo Unity a uma carteira Web3 – Configurando um servidor Moralis

Quando estiver satisfeito com a interface do usuário do seu aplicativo, a próxima etapa do processo é baixar o Moralis Metaverse SDK . Para fazer isso, tudo o que você precisa fazer é clicar no link anterior e clicar no botão "Iniciar agora" mais abaixo na página da web. Em seguida, você precisará navegar até “Releases”, que pode ser encontrado no lado direito da página da Web, e, finalmente, baixar o pacote Unity.

Depois de baixar o SDK, você pode arrastar o arquivo para o campo "Ativos" no Unity, que solicitará a importação dos arquivos. Com os arquivos importados, você terá acesso a uma pasta com todos os elementos do Moralis Metaverse SDK. 

Depois disso, você adicionará o elemento ”MoralisSetup” à cena ”Main”. Isso pode ser feito arrastando e soltando o arquivo no campo "Hierarquia" da cena. 

Assim que o elemento ”MoralisSetup” for incorporado ao seu projeto Unity, você notará que precisará adicionar algumas informações. Por exemplo, você precisa adicionar uma URL de servidor, ID de aplicativo e uma URL do Moralis Speedy Node. Como tal, você precisará do seu próprio servidor Moralis.

Criando um servidor Moralis e adquirindo um nó Blockchain

Se ainda não o fez, o próximo passo é criar uma conta Moralis. Isso é totalmente gratuito e você poderá fazer isso em questão de segundos. Depois de ter uma conta à sua disposição, você pode criar um novo servidor clicando no botão "Criar um novo servidor" no canto superior direito do painel de administração do Moralis. Isso fornecerá um menu suspenso com três alternativas. Para este tutorial, optamos por um “Servidor Testnet”.

Depois de selecionar essa alternativa, uma nova janela aparecerá onde você precisa adicionar um nome de servidor, escolher uma região e, finalmente, selecionar a(s) cadeia(s). Para este tutorial, vamos escolher a alternativa ”Eth (Ropsten)”. Como tal, se você estiver acompanhando, recomendamos que faça o mesmo. Agora, tudo o que resta é clicar no botão "Adicionar instância" no canto inferior direito. 

Isso irá ativar o servidor, e você poderá encontrar a URL do servidor e o ID do aplicativo clicando no botão ”Ver detalhes” para o servidor em questão. Você pode então copiar e colar essas informações nos campos correspondentes do Unity.

A parte final desta etapa é adquirir um nó blockchain. Para obter um nó, você precisa clicar na guia ” Speedy Nodes ” na extremidade esquerda do painel de administração do Moralis. Isto irá fornecer-lhe um monte de redes. Como escolhemos ”Eth (Ropsten)” quando criamos o servidor, você pode clicar no botão ”Endpoints” para a rede Ethereum , copiar o URL do Ropsten e colá-lo no campo apropriado no Unity.

Isso é tudo para configurar um servidor Moralis e conectá-lo com sucesso ao seu projeto Unity! 

Etapa 3: Como conectar uma carteira criptográfica a um dApp móvel – Configurando a conexão da carteira Web3

Agora que você tem seu servidor Moralis conectado ao aplicativo, o próximo passo é configurar a conexão da carteira Web3. Você precisa adicionar o elemento "WalletConnect" ao seu projeto "Principal". Você pode fazer isso novamente simplesmente arrastando e soltando o componente no campo "Hierarquia". 

Com o elemento adicionado ao projeto, você precisará fazer alguns ajustes. Primeiro, você deseja marcar as opções "Auto Save and Resume" e "Connect On Start". Você pode então prosseguir com a exclusão de todos os eventos conectados.

Em seguida, vamos ativar o ”ConnectButton” que criamos na primeira etapa. Com o botão ativado, adicionaremos um evento ”On Click()” e arrastaremos o arquivo ”WalletConnect” para o campo que diz ”None (Object)”. Em seguida, você também precisará clicar no menu suspenso "Sem função" e escolher "OpenDeepLink ()". Assim, sempre que um usuário clicar no botão, ele abrirá automaticamente seu aplicativo MetaMask. 

No entanto, também gostaríamos que o MetaMask tratasse de todas as informações de retorno. Como tal, vamos precisar de um script. Assim, usaremos a seção a seguir para mostrar como adicionar o script e fazer algumas alterações no código para que ele se adeque ao nosso aplicativo. 

Etapa 4: Como conectar um aplicativo Unity a uma carteira Web3 – Adicionando o script do App Manager

Nesta etapa, adicionaremos um script que gerenciará o aplicativo. Felizmente para você, estamos fornecendo um script já preparado chamado “ AppManager ”. Assim, antes de começarmos, você pode ir em frente e visitar o repositório GitHub e baixar o script. Em seguida, vamos criar um novo objeto Unity e nomeá-lo ”AppManager”. Você pode navegar até o objeto, clicar em "Adicionar componente" e selecionar o script recém-baixado. 

Agora, se você der uma olhada mais de perto no código real, você notará uma seção de campos. Como tal, precisaremos adicionar cada campo/botão e conectá-los ao nosso projeto. Para fazer isso, você pode simplesmente arrastar e soltar "MoralisSetup" no campo "MoralisController" e "WalletConnect" no campo "Wallet Connect" no módulo "Inspector" no Unity. Depois disso, também vamos adicionar o ”ConnectButton” ao campo ”Connect Button” e ”WalletAddressText” ao campo ”Wallet Address” através do mesmo processo. 

Com os campos conectados ao script, devemos também adicionar a função ”WalletConnectHandler()” à ”Connected Event Session” para o elemento ”WalletConnect” no Unity. Como tal, podemos simplesmente arrastar o elemento ”AppManager” para o campo ”Missing (Object)” para a ”Connected Event Session”. Depois disso, podemos clicar no menu suspenso "Sem função" e selecionar a função "WalletConnectHandler()". 

Por fim, a parte final da quarta etapa é adicionar a função ”WalletConnectSessionEstablished()” ao aplicativo Unity. Para isso, podemos adicionar um evento ”New Session Connected” e um evento ”Resumed Session Connected” onde nós, através do mesmo processo descrito no parágrafo anterior, chamamos ”WalletConnectSessionEstablished()”. Isso será algo assim na interface do Unity: 

Etapa 5: como conectar uma carteira criptográfica a um dApp móvel – Ajustando a interface do usuário

Na etapa final, tornaremos a interface do usuário um pouco mais amigável. Como tal, você pode voltar para o script e voltar para a seção de campos. Você notará um campo adicional chamado ”infoText”, que ainda não conectamos à nossa cena do Unity, que é o próximo da agenda. 

Você pode voltar para o Unity e adicionar um novo texto dentro do ”UI_Panel” (o mesmo que o objeto “Panel”, apenas um novo nome) e nomeá-lo como ”InfoText”. Depois disso, talvez seja necessário fazer alguns ajustes para que o elemento se ajuste à interface do usuário do seu aplicativo. No entanto, como isso pode diferir dependendo de suas preferências, não vamos nos aprofundar nisso. 

Com este texto informativo, queremos exibir uma mensagem se um usuário logar com sucesso ou não. Além disso, também queremos informar aos usuários se suas carteiras se conectam com sucesso ou se a conexão falha. Por esse motivo, precisamos adicionar um "Evento Conectado ()" e um "Evento Desconectado ()" para chamar as funções "HandleWalletConnected()" e "HandleWalletDisconnected()" do script. Como tal, isso será algo assim no Unity:

Finalmente, a última coisa que precisamos fazer é adicionar o ”InfoText” ao nosso ”AppManager” simplesmente arrastando este elemento para o campo ”Info Text”. 

Tudo o que resta a partir daqui é clicar em "Build Settings", adicionar a cena e depois clicar no botão "Build And Run" no canto inferior direito. Agora é isso para este tutorial; Se você seguiu as cinco etapas acima, deve saber como criar e conectar um aplicativo Unity a uma carteira Web3 com facilidade!

Além disso, se você quiser dar uma olhada mais de perto em todo o código e o aplicativo em sua totalidade, você pode visitar o repositório GitHub ao qual criamos um link na seção inicial deste artigo. 

Como conectar um aplicativo Unity a uma carteira Web3 — Resumo

Conectar um aplicativo Unity a uma carteira Web3 não precisa ser difícil ao trabalhar com o sistema operacional Moralis. A Moralis fornece uma infraestrutura de back-end já desenvolvida, permitindo conectar uma carteira criptográfica a um dApp móvel em apenas alguns minutos. Na verdade, é possível conseguir isso através das cinco etapas a seguir: 

1. Desenvolvimento de uma interface de usuário front-end.
2. Configurando um servidor Moralis.
3. Configurando a conexão da carteira Web3.
4. Adicionando o script do gerenciador de aplicativos.
5. Ajustando a interface do usuário.

Seguir este processo permite que você crie um aplicativo de demonstração simples onde os usuários podem se autenticar com sua carteira MetaMask e assinar uma mensagem. Como tal, isso demonstra claramente o poder de trabalhar com Moralis. 

Fonte do artigo original em https://moralis.io

How to Build a 2D Web3 Game

Do you recall the early days of the video game industry when classic games in 2D environments had everyone stuck to their screen for hours? Retro games are still quite popular, and even modern game developers still create 2D games today. However, Web3 brings new concepts to the gaming industry, such as the play-to-earn (P2E) model, where players can earn fungible and non-fungible tokens (NFTs). Thus, if we combine popular 2D environments and Web3, offering earning potentials, the ability to use NFTs as in-game assets, etc., our 2D Web3 game would attract numerous users. As such, we decided to illustrate herein how to build a 2D Web3 game using the right Web3 tech stack and accomplish this process in a matter of minutes.

Moving forward, we’ll incorporate a publicly available 2D game into a React application. In addition, to include Web3 functionality, we’ll use the ultimate Web3 development platform, Moralis. This “Firebase for crypto” platform will enable us to easily incorporate Web3 authentication using the most popular Web3 wallet – MetaMask. Also, with Moralis’ SDK, we will get a chance to add other on-chain features to our 2D Web3 game example. Plus, we’ll rely on some other phenomenal tools to get us to the finish line, such as Phaser and Visual Studio Code (VSC). Nonetheless, we encourage you to follow our lead and join us by tackling this example project. By doing so, you will not only learn to create a 2D Web3 game but also get familiar with the tools mentioned above. So, create your free Moralis account, which you’ll need as we move on.    

Preview of Our 2D Web3 Game Example

Before we start our example project, we want to do a quick demo of our example 2D Web3 game. This will help you determine whether or not you want to roll up your sleeves and follow our tutorial as we move on. 

First, users are greeted by the “Start” button:

Web3 Game Login

By clicking on the above button, users are prompted by their MetaMask extensions to sign the “Log in using Moralis” message. Essentially, this is how to authenticate with MetaMask:  

After receiving the above signature request, users need to click on the “Sign” button. By doing so, they complete their Web3 login for our game. 

Also, keep in mind that there are different ways to implement Web3 authentication. However, when using Moralis, things are made as simple as possible. For web dapps (decentralized applications), MetaMask integration is the go-to tool. On the other hand, WalletConnect is the best solution for mobile dapps. Nonetheless, Moralis also offers Web3 authentication via email and Web3 social login. Both of these options are excellent to boost Web3 user onboarding success rates.

The Aim of Our 2D Web3 Game

Once users confirm the sign-in message, they are presented with the game’s main menu screen: 

Then, users need to click anywhere on the screen to start the game. This loads the game: 

Moreover, the purpose of the game is to click (shoot) the bandits (cowboys with the guns) before they shoot you. As you can see in the screenshot above, there are also characters with money bags. Players are not supposed to shoot them. In addition, the numbers at the top indicate the money bags that players need to collect to complete the level. However, if any of the bandits shoot the player before getting shot, it is game over:

Now you know what we will be creating. Hence, you can decide whether or not you want to follow along with our progress moving on. However, we need to point out that we will not be dealing with the frontend of the above-presented game. By using Phaser, we will use an existing Web2 game as a boilerplate and then just add Web3 backend features.  

Build a 2D Web3 Game with Phaser and Moralis

As mentioned, we will use Phaser, the most popular open-source studio game engine, to find a finished 2D game. Then, we will use the best Web3 backend platform, Moralis, to incorporate the above-presented blockchain functionality. Essentially, we will take a 2D Web2 game and convert it into a 2D Web3 game.

Obtaining an Existing Game from Phaser

So, we start by going to Phaser’s official website. There, we select “Examples” from the top menu. On the next page, we scroll down a bit and click on the “Games” folder. From there, we select the “Bank Panic” game:

Now that we’ve set up our minds on a particular example game, we can use Phaser’s code and assets available on GitHub. Hence, use the “Download” option in the top menu:

On the “Download” page, we get to download Phaser:

Then, click on the “clone” option on the next page to get to Phaser’s GitHub:

There, click on “photonstorm”:

Next, we will select “phaser3-examples” to ensure that the “Bank Panic” game files are included:

Inside “phaser3-examples”, open the “public” folder:

Then, inside the “public” folder, click on the “assets” folder:

Next, open “games” and finally “bank-panic”:

When we look inside the “bank-panic” folder, we see that it contains sounds, images, and other files required for this game to function properly. As such, we have a green light to clone the code. Thus, we go back to the “phaser3-example” page, where we click on “code” and then ”Download ZIP”:

Using VSC to Set Things Up Properly

Note: We use VSC in this example; however, feel free to use your preferred code editor.

We start by creating a React app template. We do this by entering the “npx create-react-app phaser-moralis” command into VSC’s terminal:

Also, keep in mind that “phaser-moralis” is the name we decided to use for our dapp. You can follow our lead or use any name you want. To finally create our React app, enter “yes” next to “Ok to proceed? (y)”. Once that folder is created, we add it to our IDE workspace:

Then, select the “phaser-moralis” folder and click on “Add”:

Now, we unzip the “phaser3-examples-master.zip” file that we downloaded previously. Once unzipped, we navigate to the “bank panic” folder (phaser3-examples-master > public > src > games > bank panic). This is where our example game’s scene files are:

As you can see in the screenshot above, we select all files except the “main.js” file. We move those files into a new “scenes” folder, within our “src” folder inside our React app’s folder (created above):

Now that we’ve transferred our example game’s scene files, we need to do the same for all of the image and sound files. To do this, we have to locate the “bank panic” folder inside “assets” and then “games”. Then, we copy or move the entire folder into the  new “assets” folder inside the “public” folder of our project:

By moving these files, we are essentially integrating Phaser’s example game into our ReactJS application.  Next, we navigate into the “phaser-moralis” folder by entering the “cd phaser-moralis” command in VSC’s terminal.

2D Web3 Game Code Walkthrough – Tweaking Phaser Files

All of you who want to access the finished code of our 2D Web3 game, you can do so on GitHub. Though, we recommend following along with our steps and making the necessary tweaks to get the most out of this article. We start by changing the title inside the “index.html” file from “React App” to “Phase x React x Moralis”:

Then, change “.js” extensions into “.jsx” extensions for “App.js” and for “index.js”:

Next, we tweak the “index.jsx” file by adding a container to which our canvas element will attach to. Above the “<App />” line, we add the following:

<div id= “game-container”></div>

Moreover, we wrap the above container around the “App” component:

Then, we open the “App.jsx” file, where we first import our Phaser files at the top:

This is also our cue to install Phaser by entering “npm i phaser” into VSC’s terminal. Next, still inside the “App.jsx” file, we initiate our “game” variable using “let game = null;”. Then, we need to add some additional imports and tweak the “App()” function. This is also where we add the following “config” object, through which our Phaser game gets initiated:

  if (!loaded) {
    setLoaded(true);
    const config = {
      type: Phaser.AUTO,
      //gameTitle: "Phaser x Moralis",
      parent: "game-container",
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
      autoFocus: true,
      fps: {
        target: 60,
      },
      physics: {
        default: "arcade",
        arcade: {
          gravity: { y: 200 },
          debug: false,
        },
      },
      backgroundColor: "#282c34",
      scale: {
        mode: Phaser.Scale.ScaleModes.NONE,
      },
      scene: [Boot, Preloader, MainMenu, MainGame],
    };
    // init 2d game (Phaser canvas element)
    if (game === null) {
      // init instance of phaser game as per config
      game = new Phaser.Game(config);
      // listen to in-game events
      // before starting we sign in with wallet
      game.events.on("LOGIN_PLAYER", (event) => {
        console.log("⛓⛓⛓ Login via Web3 Wallet ⛓⛓⛓");
        // trigger wallet authentication
        login();
      });
    }

Importing Phaser

For the above code to function, we also need to import Phaser in our scene files (“Boot.js”, “Door.js”, “Game.js”, “MainMenu.js”, and “Preloader.js”) using the ‘import phaser from “phaser”;’ line. Moreover, we also need to assign the initial values inside the “Game.js” file:

Furthermore, we need to change some file paths inside the “Preloader.js” and “Boot.js” files. Inside the former,  we change the “assets/game/bank-panic/” value inside “this.load.setPath” to “assets/bank-panic/”. Moreover, inside the “Boot.js”, we change “assets/game/bank-panic/loading.png” to “assets/bank-panic/loading.png”.

Going From 2D Web2 Game to 2D Web3 Game with Moralis 

With all of the above tweaks applied, we have a functioning 2D game available. However, it currently has nothing to do with Web3. Fortunately, we can use Moralis to include all sorts of Web3 features seamlessly. Though, for this example project, we will focus on adding Web3 authentication.

We start by importing React Moralis with the “npm i react-moralis” command in VSC’s terminal. Then, we revisit the “index.jsx” file, where we import “react-moralis” with the ‘import { MoralisProvider } from “react-moralis”;’ line. Next, we add a standard “Application” function (video below at 12:05). The latter serves as a standard login to our Moralis server. To make that work, we also create a new “.env” file (12:52), where we add our Moralis server’s details:

The next task is to obtain our Moralis server’s details. If you’re new to Moralis, here are the steps to get the details (13:15):

• Log in to your Moralis account or create your free Moralis account.
• Create a Moralis server.
• Access the server’s details and copy them.
• Paste the server’s details (server URL and app ID) into the “.env” file.

Moving forward, we made some small tweaks to the “index.jsx” file (14:10). Then, we add React-Moralis functions in “App.jsx” (14:36), which gives us the power of Moralis’ SDK. As such, we easily cover authentication with MetaMask. Finally, we include Redux for dispatching events from our 2D Web3 game to our React hooks and vice versa (15:13). 

Note: Make sure to watch the video below and watch closely to get all the steps right.

https://www.youtube.com/watch?v=Z4dWavvyhbA

How to Build a 2D Web3 Game – Summary

At this point, you should have your own 2D Web3 game functioning properly. Using Phaser, MetaMask, and Moralis, you’ve been able to do that in less than thirty minutes. Along the way, you’ve learned how to use Phaser’s example games. Moreover, you’ve learned how to complete the initial Moralis setup and then use it to include Web3 functionality. As such, you can now use these skills to create your own 2D Web3 games. However, you may not yet be confident enough to start your own projects. Thus, taking on other example projects may be the right direction for you. On the other hand, you may want to explore other blockchain development topics.  

  This story was originally published at https://moralis.io/how-to-build-a-2d-web3-game-full-guide%ef%bf%bc/ 

#web3 #web3