Este artículo es una traducción de Jessie Mongeon, hecha por Freddy Serrano. Puedes encontrar el artículo original [aquí]https://jmongeon.medium.com/quicknode-create-a-token-dapp-using-quicknode-ac5c17f55b19).
Sería genial escucharte en nuestro Discord, puedes contarnos tus ideas, comentarios, sugerencias y dejarnos saber lo que necesitas.
Si prefieres puedes escribirnos a @web3dev_eshttps://twitter.com/web3dev_es en Twitter.Esta guía fue originalmente publicada en https://docs.filebase.com. Revisa el sitio de documentación de Filebase para ver los últimos tutoriales de Web3 usando IPFS a través de Filebase.
Aprende a cómo crear un Token dApp usando QuickNode
¿Qué es QuickNode?
QuickNode es una plataforma que permite desplegar dApps y otras aplicaciones entre 12 diferentes networks de blockchain con aprovisionamiento y disponibilidad inmediata. QuickNode ofrece una variedad de herramientas y análisis potentes, todo presentado a través de un panel de control sencillo, en el dashboard.
Prerrequisitos
- Una criptocartera, como MetaMask
- Instalar Node.js y npm
- Descargar e instalar un IDE de tu preferencia, como VSCode
- Regístrate para que tengas una cuenta gratis en Filebase
- Ten tu acceso a Filebase y claves secretas (Secret Keys). Aprende a cómo ver tus claves de acceso acá
- Crea un depósito del Filebase (Filebase Bucket). Aprende a cómo crear el depósito acá
1. Primero, descarga e instala S3FS-FUSE en tu ambiente local
Esta herramienta está disponible en sistemas Linux o macOS.
2. Configura un archivo Access Key para usarlo con S3FS-FUSE.
Configura los archivos para las credenciales S3FS en ${HOME}/.passwd-s3fs. Vas a tener que guardar tu acceso de Filebase y claves secretas a este archivo y darle permisos de propietario. Puedes hacerlo también con los siguientes comandos:
echo ACCESS_KEY_ID:SECRET_ACCESS_KEY > ${HOME}/.passwd-s3fs
chmod 600 ${HOME}/.passwd-s3fs
ACCESS_KEY_ID es tu la clave de tu acceso al Filebase y SECRET_ACCESS_KEY es tu clave secreta del Filebase. Para más información en claves de acceso al Filebase, revisa acá.
3. Monta tu bucket
Puedes montar un bucket de Filebase IPFS con el comando:
s3fs mybucket /path/to/mountpoint -o passwd_file=${HOME}/.passwd-s3fs -o url=https://s3.filebase.com
- mybucket: nombre de tu Filebase bucket
- /path/to/mountpoint
4. Ahora, navega en el mounted Filebase bucket
Crea un proyecto React para tu aplicación:
npx create-react-app my-dapp
Esto va a crear un nuevo directorio del proyecto llamado my-dapp. Navega en este directorio con este comando:
cd my-dapp
Antes de poder instalar Hardhat, necesitamos remover el archivo por defecto ‘README.md’, porque esto va a causar un conflicto en la inicialización de Hardhat. Usa el siguiente comando para remover este archivo:
rm README.md
5. Instala Hardhat con el siguiente comando:
npm install --save-dev "hardhat@^2.9.3" "@nomiclabs/hardhat-waffle@^2.0.0" "ethereum-waffle@^3.0.0" "chai@^4.2.0" "@nomiclabs/hardhat-ethers@^2.0.0" "ethers@^5.0.0"
6. Inicia el prompt de configuración de Hardhat con el siguiente comando:
npx hardhat
Elige ‘Create a Basic Sample Project’ > ‘Create a Basic Project’, luego selecciona el directorio actual como la raíz del proyecto y luego selecciona ‘Y’ para incluirlo a .gitignore.
Este comando creó algunos archivos del proyecto, como los directorios de contratos y scripts.
7. Ahora, vamos a dirigirnos al dashboard de QuickNode. Selecciona ‘Create an endpoint’:
8. Selecciona el blockchain de Ethereum, luego elige la red de Rinkeby
9. Selecciona cualquier add-ons si lo deseas.
Este tutorial no usa ningún add-ons. Luego selecciona ‘Continue’
10. Selecciona tu nivel de plan de pago e introduce la información de tu método de pago. Luego selecciona ‘Pay & create’.
11. Una vez creado, copia la URL de la API del endpoint HTTP:
12. Luego, toma nota de la clave de acceso de tu criptobilletera
Si estás usando Metamask, sigue las instrucciones que encontrarás acá.
13. Navega en la carpeta de los contratos de tus proyectos.
Quita el archivo predeterminado llamado Greeter.sol , después crea un nuevo archivo llamado dApp.so l.
Inserta el siguiente contenido a tu nuevo archivo:
Este contrato crea un token personalizado que vamos a usar luego para tu dApp. Reemplaza el nombre y símbolo público del token con lo que tú quieras.
14. Ahora queremos desplegar nuestro contrato
Para hacer esto, vamos a desplegarlo en un nodo local HardHat. Para obtener una lista de las cuentas locales ficticias creadas por HardHat, ejecuta el comando:
npx hardhat node
El output de tu consola se verá así:
Desde acá, podemos ver que tenemos 20 cuentas de prueba para usar.
15. Después, abre el archivo hardhat.config.js en el directorio de tu proyecto. Reemplaza el contenido con el siguiente código:
Reemplaza los siguientes valores:
- QUICKNODE_API_URL: El endpoint del URL de tu QuickNode
- WALLET_PRIVATE_KEY: La clave privada de tu criptocartera
16. Crea un nuevo archivo en el directorio de tus scripts llamado deploy.js.Ingresa el siguiente código dentro de este archivo:
17. Antes de desplegar este contrato, necesitamos algunos fondos en la red Rinkeby.
Primero, asegúrate que tu criptocartera esté configurada para el uso de la red Rinkeby. Si estás usando Metamask, sigue las instrucciones que encontrarás acá.
18. Luego, dirígete al faucet de Rinkeby y solicita algunos fondos de prueba:
Una vez la transacción haya sido completada, deberías tener 0.1ETH para usar:
19. Luego, es hora de despegar nuestro contrato. Para hacerlo, usa el siguiente comando:
npx hardhat run –network rinkeby scripts/deploy.js
Toma nota de esta dirección del token.
20. Haz click en la extensión de tu Metamask. Selecciona ‘Import Tokens’:
21. Ingresa la dirección del contrato del token.
El símbolo del token debería aparecer automáticamente después de agregar la dirección del contrato. Desplázate hacia abajo hasta ‘Token Decimal’. En este tutorial, nuestro contrato usa el decimal 0.
22. Confirma que te gustaría importar tu token a Metamask:
23. Una vez importado, vas a ver el balance de tus tokens en tu billetera:
24. Luego, inicia tu aplicación React con el comando:
npx start
25. Navega a la aplicación React que se está ejecutando en localhost:3000:
26. Edita el archivo src/App.js. Reemplaza el contenido existente con el siguiente código:
Reemplaza ‘CONTRACT_ADDRESS’ con la dirección del contrato de tu token del paso 19. Una vez guardado, se verá así:
Usando esta aplicación, vas a poder obtener el saldo actual de la billetera del token dApp en nuestra billetera, envía dApp Tokens a otras billeteras como las de prueba, de las que obtuvimos la dirección anteriormente y obtén los datos del dApp Token.
Este front-end React de nuestra app puede ser personalizada a tu gusto y puede incluir otros scripts, funciones, o hasta imágenes y animaciones.
¿Quieres aprender más de Filebase? Puedes registrarte para una cuenta gratis hoy para empezar con IPFS.
Discussion (0)