Construyendo dApps con MetaMask

Las aplicaciones descentralizadas (dApps) se implementan diariamente en cadenas de bloques programables como Ethereum . Como desarrollador de blockchain , es esencial utilizar herramientas que hagan que el proceso de desarrollo de dApp sea más sencillo. Como tal, la creación de aplicaciones Web3 con MetaMask y sus funcionalidades de autenticación Ethereum simplifica mucho las cosas. Además, al usar Moralis, puede aprovechar su integración MetaMask predeterminada al crear dApps. Por lo tanto, desarrollar dApps con MetaMask y Moralis es algo que todo desarrollador debería hacer. 

No es de extrañar que MetaMask siga siendo la billetera más popular. No solo entre los usuarios de DeFi sino también entre los desarrolladores. Además, crear dApps con MetaMask en combinación con las herramientas adecuadas se vuelve sencillo. Si hay una herramienta que marca la diferencia, es Moralis . Esta última plataforma de desarrollo Web3 ofrece una integración completa con MetaMask. Por lo tanto, le permite usar esta billetera como puerta de entrada al reino Web3, tanto para usted como para sus usuarios. Como tal, lo invitamos a unirse a nosotros para analizar más de cerca la creación de dApps con MetaMask.  

Creación de dApps con MetaMask: descripción general

Antes de mostrarte cómo puedes construir dApps con MetaMask, necesitamos tener todas las herramientas listas. Como se mencionó anteriormente, MetaMask y Moralis son dos herramientas esenciales si desea implementar dApps rápidamente. Además, también usaremos Visual Studio Code (VSC); sin embargo, no dude en utilizar cualquier otro editor de código que prefiera. Por lo tanto, estos son los pasos que debe seguir si le interesa crear dApps con MetaMask de la manera más rápida posible y con el mínimo esfuerzo:

  1. Descargue / instale la extensión del navegador MetaMask.
  2. Crea tu cuenta MetaMask.
  3. Crea tu cuenta gratuita de Moralis.
  4. Crea tu servidor Moralis. 
  5. Utilice la plantilla de Ethereum dApp definitiva para crear su primera dApp en minutos.

Estos cinco pasos son la esencia de la creación de dApps con MetaMask. Además, son lo que cubriremos aquí, y lo invitamos a seguir adelante. Por lo tanto, si puede comprometerse a tomar medidas, puede crear fácilmente su primera dApp al final de este artículo. 

Creación de dApps con MetaMask - Configuración

Dado que tenemos un artículo separado que responde " ¿qué es MetaMask ?", Preferimos centrarnos en instalar esta billetera y crear su cuenta aquí. De esa manera, podrá recibir y enviar activos criptográficos y utilizar MetaMask como herramienta de autenticación al crear aplicaciones Web3.   

Instalación de MetaMask

Comencemos yendo a “ metamask.io ”. Una vez allí, hacemos clic en el botón "Descargar ahora":

Si bien MetaMask también está disponible para iOS y Android, como desarrollador, lo más probable es que use su extensión de Chrome. Así, nos centraremos en esa opción (normalmente está seleccionada por defecto). A continuación, simplemente haga clic en el botón "Instalar MetaMask para Chrome":

Luego, será redirigido a la tienda web de Chrome, donde deberá hacer clic en el botón "Agregar a Chrome":

Además, también debe confirmar su acción haciendo clic en el botón "Agregar extensión" de la ventana emergente:

Después de eso, debería ser bienvenido a MetaMask, donde deberá hacer clic en el botón "Comenzar":

Crear una nueva billetera con MetaMask

En el siguiente paso, se le preguntará si es nuevo en MetaMask y se le dará la opción de crear su nueva billetera o importar su cuenta existente. A los efectos de este tutorial, nos centraremos en crear una nueva billetera. Como tal, haga clic en el botón "Crear una billetera" en el lado derecho:

A continuación, deberá crear su contraseña y confirmarla (asegúrese de escribirla en un lugar seguro):

A medida que avanza, es posible que se le presente un video instructivo. Puedes verlo si quieres; sin embargo, el siguiente paso importante es una frase secreta de recuperación que debe almacenar de forma segura. 

Una vez que revele las palabras secretas, cópielas en un lugar seguro (es mejor escribirlas a mano y guardarlas en una hoja de papel). Esto es esencial, así que asegúrese de hacerlo correctamente (el orden de las palabras es importante). Con estas frases de recuperación, podrá acceder a su billetera desde cualquier otro dispositivo o recuperar su cuenta si es necesario. Una vez que haya escrito las frases, haga clic en el botón "Siguiente", que lo llevará al siguiente paso, donde deberá ingresar las frases del paso anterior en el orden correcto:

Descripción general de la billetera MetaMask

El anterior es el paso final de la creación de su billetera MetaMask. Una vez que haya ingresado las palabras en el orden correcto, complete el proceso haciendo clic en el botón "Confirmar". Ahora finalmente podrá acceder a su nueva billetera:

Si desea crear dApps con MetaMask, debe familiarizarse con las opciones básicas disponibles con su nueva billetera (vea la imagen de arriba):

  • Selección de red (N): al hacer clic en esta sección, se mostrará un menú desplegable que contiene todas las redes agregadas. Para seleccionar cualquiera de ellos, solo necesita hacer clic en ellos y MetaMask cambiará a esa red. De forma predeterminada, MetaMask viene con la red principal de Ethereum y cuatro opciones de red de prueba de Ethereum . También hay una opción para agregar redes desde dentro de MetaMask; sin embargo, a menudo hay una forma más sencilla disponible para ese propósito (cubriremos un ejemplo a medida que avancemos).
  • Selección de cuenta (A): al hacer clic en este icono, puede importar o crear nuevas cuentas, cambiar entre cuentas existentes (si tiene más de una), conectar una billetera de hardware, bloquear su cuenta y acceder a la configuración avanzada.
  • Su dirección de billetera : al mirar el cuadro "Cuenta 1" en el medio de la parte superior de su billetera MetaMask, puede ver una combinación de dígitos y letras. Esta es la dirección de su billetera. Además, puedes copiarlo simplemente haciendo clic en esa área. Con esta dirección, puede recibir criptoactivos de pares o realizar retiros de un intercambio centralizado (CEX). 
  • Comprar, enviar, intercambiar : cuando desee comprar, enviar o intercambiar monedas y tokens, puede usar estos botones correspondientes.
  • Activos y actividad : la sección de activos muestra todos los activos criptográficos compatibles (también puede agregar tokens usted mismo) en su billetera en la red seleccionada. Además, la pestaña de actividad muestra sus transacciones.

Demostración de MetaMask

En caso de que sienta que no tiene una comprensión clara de cómo funciona MetaMask o cómo usarlo, le recomendamos que consulte el siguiente video a partir de las 4:24: 

https://www.youtube.com/watch?v=9kdVAeZ7knk 

Creación de dApps con MetaMask: soluciones de escalado de capa 2

Si ha estado involucrado con el ámbito de las criptomonedas durante un tiempo, debe haber oído hablar de las soluciones de capa 2. Una de las principales ventajas de este tipo de redes blockchain es que te ayudan a evitar pagar cantidades absurdas de tarifas de gas Ethereum. Como tal, le mostraremos cómo agregar una de las soluciones de escalamiento de capa 2 de mayor reputación (la red Polygon) a su MetaMask. 

Podríamos hacer esto manualmente desde MetaMask; sin embargo, al usar Moralis, podemos hacer esto con un clic de un solo botón. Así es cómo:

  1. Cree su cuenta de Moralis : si aún no ha creado su cuenta gratuita de Moralis, hágalo ahora. Siga el enlace, ingrese su dirección de correo electrónico y cree su contraseña. No olvide completar el proceso confirmando su dirección de correo electrónico (recibirá un correo electrónico con un enlace de confirmación). En caso de que ya tenga una cuenta Moralis activa, simplemente inicie sesión .
  2. Vaya a Speedy Nodes : dentro de su área de administración de Moralis, seleccione la sección Speedy Nodes del menú en el lado izquierdo.

  1. Access Endpoints : haga clic en el botón "Endpoints" debajo de la opción de red Polygon.
  2. Agregar a MetaMask : al hacer clic en el botón "Agregar a MetaMask" (vea la imagen a continuación), puede agregar la red principal de Polygon a su MetaMask. También puede agregar la red de prueba de Polygon (Mumbai) siguiendo los mismos pasos. Después de hacer clic en el botón, MetaMask le pedirá que confirme esta acción. Dado que Moralis es una plataforma confiable, puede hacer clic en el botón "Aprobar". A continuación, también puede hacer clic en el botón "Cambiar de red" para cambiar su red MetaMask a Polygon.

Si ha completado los pasos anteriores correctamente, ahora debería tener la red Polygon disponible en su MetaMask:

Si está interesado en ver una demostración de MetaMask que se usa en Polygon para una transacción simple, asegúrese de ver el video de arriba a las 9:27.

Construyendo dApps con MetaMask y Moralis

Finalmente, llegamos a la parte donde le mostramos cómo Moralis hace que la construcción de dApps con MetaMask sea extremadamente fácil. Al crear una cuenta gratuita de Moralis, obtiene acceso completo a todo el arsenal de esta poderosa herramienta. Esto incluye la API y el SDK de Web3 definitivos , incluida la API de Ethereum , la API de NFT y mucho más. Sin embargo, para simplificar aún más las cosas, hemos creado la mejor plantilla de Ethereum dApp , que está disponible públicamente en GitHub. Este último incluye múltiples componentes, que le permiten implementar tanto la funcionalidad como la interfaz de usuario en minutos. 

Construyendo dApps con MetaMask usando Moralis

Cuando decimos que la creación de dApps con MetaMask y Moralis se puede hacer en minutos, no estamos exagerando. Para lograrlo, debe seguir estos sencillos pasos:

  1. Visite la página de GitHub repetitiva de Ethereum .
  2. Copie la URL de GitHub para nuestro modelo estándar:

  1. Abra VSC, luego abra una nueva terminal y finalmente abra "Git Bash".
  2. Dentro de la terminal, escriba:
    1. $ git clone (pegue la URL de GitHub del modelo estándar)
    2. $ cd ethereum-boilerplate 
    3. $ instalación de hilo
  3. Inserta la URL de tu servidor Moralis y el ID de la aplicación (usa las instrucciones a continuación para obtener estos detalles) dentro del archivo ".env.example":

  1. Nuevamente, use la terminal del VSC y escriba “ $ yarn run start” . Esto iniciará su dApp. 

En caso de que haya partes concretas del texto estándar que no desee utilizar, navegue hasta el archivo "App.jsx" y realice las modificaciones necesarias. Para obtener instrucciones detalladas, vea el video anterior (a las 16:22). El video también cubre todos los pasos anteriores (a las 12:45).

Configuración moral

Cada vez que desee crear un proyecto y construir dApps con MetaMask y Moralis, siempre deberá completar los siguientes pasos:

  1. Inicie sesión en su cuenta de Moralis en este punto, ya debería tener lista su cuenta de Moralis. Entonces, simplemente inicie sesión para acceder a su área de administración. Sin embargo, si aún no ha creado su cuenta gratuita de Moralis, asegúrese de hacerlo ahora.

Crear un servidor nuevo : dentro de su área de administración de Moralis, haga clic en el botón "+ Crear un servidor nuevo" en la esquina superior derecha. En el menú desplegable que aparece, seleccione el tipo de red que mejor se adapte a sus necesidades (consulte la imagen a continuación).

A continuación, aparecerá una ventana emergente solicitando el nombre del servidor (puede ser el que desee), la región, la red y las cadenas. Ingrese esta información y haga clic en "Agregar instancia". El servidor puede tardar algún tiempo en activarse, así que tenga paciencia. 

  1. Acceda a los detalles del servidor : una vez que su servidor esté listo, podrá acceder a sus detalles a través del botón "Ver detalles" junto al nombre de su servidor.


Al hacer clic en el botón "Ver detalles", aparecerá una ventana emergente que contiene toda la información que necesita:

  1. Inicialice Moralis : ahora complete su archivo ".env" con los detalles del servidor de Moralis (ID de la aplicación y URL del servidor) para obtener la funcionalidad de backend requerida cubierta por Moralis:

Nota : asegúrese de utilizar los detalles de su servidor en particular y NO los de la imagen de arriba.

Construyendo dApps con MetaMask - Resumen

Si siguió los pasos anteriores, ahora sabe que crear dApps con MetaMask no es nada complicado. Si bien MetaMask sirve como una puerta de entrada al mundo Web3, puede utilizar todo su poder con la plataforma de desarrollo Web3 definitiva de Moralis (también conocida como Firebase para cripto ). Esencialmente, debe completar los siguientes cinco pasos al crear dApps con MetaMask:

  1. Descargue / instale la extensión del navegador MetaMask.
  2. Crea tu cuenta MetaMask.
  3. Crea tu cuenta gratuita de Moralis.
  4. Crea tu servidor Moralis.
  5. Utilice la plantilla de Ethereum dApp definitiva para crear su primera dApp en minutos.

Por supuesto, esto es solo un punto de partida. Además de usar los componentes de repetición, puede concentrarse en sus ganchos. De esa manera, puede poner en práctica sus habilidades de JavaScript y crear la mejor interfaz de usuario (UI) para facilitar la funcionalidad de backend que Moralis cubre para usted. Con esta excelente herramienta a su disposición, puede crear todo tipo de aplicaciones Web3 sin preocuparse por la programación de backend relacionada con blockchain. 

Además, mientras MetaMask es la herramienta superior para la autenticación de usuarios web, WalletConnect ofrece una mejor solución para los usuarios móviles. Afortunadamente, Moralis también integra WalletConnect. Además, cuando esté listo para dejar atrás el modelo estándar de Ethereum, puede usar OpenZeppelin para acelerar su progreso usando plantillas prácticas.

Originally published at https://moralis.io

What is GEEK

Buddha Community

Mark Anderson

Mark Anderson

1616681478

DApps Development Platform kickstart your business development

We at Blockchain App Factory provide a DApps Development platform for users to connect developers directly with no middleman interaction to handle program and data changes. The DApp focuses on backend programming to run as a decentralized peer-to-peer (P2P) network. The DApp benefits from Zero downtime, secured privacy, complete data integrity, and resistance to censorship.

#dapps platform development #dapps platform development company #ethereum dapp development companies #ethereum dapps platform development company #dapps development company #how to build dapps

walter geed

1606449233

TRON Dapp Development Services Company | TRON Wallet Development

Shamlatech Provide TRON DApps best for your business needs.
TRON DApps with improvised and superfast transactions, high scalability, availability, and adaptability to be best suitable for your business.
This is image title

#tron dapp development services company #tron dapp development services #custom smart contracts on tron blockchain #tron dapp development company #tron dapp development #tron dapp developers

james right

james right

1606378840

DApp Development Company, Hire DApp Developers India

When we talk about a Decentralized Application or Dapp, the first thing that comes to our mind is the blockchain. That’s because the latter is the basis of all types of decentralized solutions. Also, when you apply any such solution in your business, you get to work on the open-source frameworks. The past few years have shown us a spike in Dapp development services and we are seeing a rise in the number of such services everywhere. With this solution, you are able to deliver the most effective outcomes for your enterprise.

Why should we consider Dapp as a dynamic solution for every business?

There are many reasons to do, first of all, your business gets a firm solution for every issue whether it is payments or something else. By inducting this mechanism, you get better power and control both in your service. You provide a somewhat more effective solution to every solution that lasts for every long in every industry. Other than that, you get to have a scalable program that engulfs many things into one bundle. Once you implement it into your business, you have enough entities to support your initiative.

Hire Tron Dapp Developers

Having said that, it is a must that you give a more sophisticated output to all those units of company that depend on each other for optimum performance. You get more power to delve deeper into every concept so you never lose your data. In order to protect your precious information, you gotta have a protective shield around. When that begins to swell, you present your company with the most perpetual model. Even with a perfected structure, it is possible for you to lose track of one or two agents. It keeps you on the right track and gives you a certain level of leverage.

By orientating your enterprise with this mechanism, you enable it to create a system that always produces beneficial results. At the end of every procedure, you get to sustain all the ups and downs in the course of your business. The outlay of every product helps you get rid of all types of risks and it also lets you prepare for a volatile environment. All of this takes place in a very regulated environment, so you need to keep moving from one solution to another. If you cannot do that, you should prepare yourself for the ultimate fall of your venture.

What is the best way to introduce Dapp into your business?

For getting the best benefits out of this solution, it is necessary for you to get things done in a systematic manner. That begins right when you start to distribute the tasks to all the members of your team. At the time of starting this process, you need to get 100% sure of the efficiency and speed of your payment gateway. The methods of giving old or new tools to this program are equivalent to giving power to your dormant projects. That’s why it is very vital that you have a clear answer to every question that pops in the midst of development.

When you are looking for different strategies but you are not totally determined about the number of assets. Irrespective of the type of portfolio you own, you always get to have a more profound way of working with the team. The more you try this solution, the better outputs you receive and you never get stuck in the details. With many other tools and features, you get a proper structure of working that helps you evolve in the most stable way. This disposition helps get more certainty in the execution of tasks even in payments.

The amount of effort that you put into this work is commendable and it gets paid off with the success of your project. Whether you know it for sure or not, you need to help the other members of the network to get better responses. The creative aspects of this tool keep you always one step ahead, it also gives better prospects for good. It is possible that you have a dilemma in choosing between two applications, but you aid from external agents in that. This gives you better prospects in every business and helps you stand strong.

What is the right process to hire Dapp developers for my business?

There is no particular approach that we should adhere to, especially after seeing another company’s success story. However, you should have an impeccable plan to get things going in a particular direction. Before you change the effect of every business, you get to have a strong disposition that keeps you focused on achieving your goals. The strong stand towards the other solutions gives you a proper mechanism to safeguard the assets. And when you want to try something new, you can easily switch to other solutions and give your venture more time to adopt.

The whole thing is about making time in the process of development as well as making payments. Once you are sure about them, you have a big void to fill and things get properly explained. The stability of the ledger along with the capability of expansion prepares you for every solution. It also helps you reckon the power of blockchain without losing the data allotted in different blocks. We already know that all the information in this structure is inalterable and when this becomes more systematic, you get a perfect solution.

To get the best out of this technology, you must be prepared with a proper strategy and helpful tools. When it is time to give great results, you have to be ready for anything and should take the chances too. If you are taking the right approach, there is no risk of losing potential customers. On the other hand, you enable your company to achieve many feats that cannot be acquired otherwise. You get all of that just by making your business more sustainable with the distributed ledger. Your team gets ready for some extreme actions and gives you maximum efficacy by consuming more data or bandwidth.

This is also the best way to hire developers who could develop Dapp with the right standards of your industry. While doing that, they also make sure that nothing goes out of context and you have a suitable program that works for very long. When this process is taking place, you need to be more strategic so there are no mistakes and you have a clear benefit. There could be occasion hiccups but you get to be 100% sure about its ability at different fronts. All of this is only possible when you work with experts in this domain.

Coin Developer India is one of the few companies that never fail in exceeding your expectation when it comes to making the most of crypto-based solutions. We are experts who have been active in this niche for a very long time and we know how to fulfill the needs of the different businesses and industries. Before providing this solution to our clients, we make certain that it is crafted to perfection and there is no loophole in any segment. With our experts, it is possible to get this next-gen technology to accomplish the greatest feats.

Get a perfect Decentralized application for your company and make it great success in any industry. With the experts of Coin Developer India, you can make it possible.

Contact Details:

Call and Whatsapp : +91-7014607737
Email: cryptodeveloperjaipur@gmail.com
Telegram : @vipinshar

#dapp development services company #hire tron dapp developers #dapp development #dapp development services #decentralized application

How to Develop Dapp Front End Page using React, Hardhat, MetaMask

hardhat-react

Preface

The important part of developing Dapp is the front end. The sample will use hardhat combined with react and MetaMask to show how to develop Dapp front end page, the process of developing and the calling of interface. Developers will get the point of the sample code when they have ability to use react.

Put your private key in .env for easy access, formatted with "PRIVATE_KEY=xxxx".

Steps

  1. Install dependencies
npm install

2.   Deploy contracts

npx hardhat run scripts/deploy.js --network kovan

3.   Startup react

cd frontend
npm install
npm start

4.   Try to init a ERC20 transaction in the page and watch the change of account tokens balance.

Reference

Link: https://github.com/Dapp-Learning-DAO/Dapp-Learning/tree/main/basic/09-hardhat-react

#dapp #solidity #blockchain #react #hardhat #metamask 

Blockchain Dev

Blockchain Dev

1666062965

Web3 Messenger Dapp with Nextjs, React, Moralis, Tailwind CSS, MetaMask

In this tutorial, you'll learn how to build a Web3 Messenger Dapp with NEXT.JS, ReactJS, Moralis, Tailwind CSS and MetaMask.

Join me as I build a WEB3 MESSENGER DAPP with NEXT.JS. You'll learn how to do the following in this build:

👉 How to build a Login and Logout Authentication flow with Metamask!
👉 How to implement your own random custom avatar!
👉 How to build a complete 1 - 1 Real Time Messaging Functionality using Moralis!
👉 How to finally deploy the final build on Vercel!

🕐 TIMESTAMPS:
00:00 Introduction
01:32 Build Showcase
03:57 Explaining Moralis
06:41 Setting up Moralis
07:43 Setting up Next.js & Tailwind CSS
10:15 Initialising the Build
13:47 Building the Login Component
27:11 Implementing Moralis
34:36 Implementing Login Functionality
39:31 Implementing Logout Functionality
40:13 Deploying to Vercel (1/2)
47:14 Planning out the Messaging Screen
52:34 Building the Header Component (1/3)
57:17 Building the Avatar Component
58:58 Implementing Random Custom Avatars
1:04:57 Building the Header Component (2/3)
1:08:05 Implementing Username Functionality
1:14:35 Building the Header Component (3/3)
1:19:09 Building the Messages Component (1/2)
1:23:24 Building the Send Message Component
1:28:42 Implementing Messaging Functionality
1:44:40 Building the Message Component
1:51:47 Implementing Timestamp Functionality
1:58:20 Deploying to Vercel (2/2)
2:00:39 Outro

LOOKING FOR THE CODE? 🛠️
https://links.papareact.com/github 

Subscribe: https://www.youtube.com/c/SonnySangha/featured 

#web3 #reactjs #nextjs #dapp #tailwindcss #metamask #moralis