Si eres nuevo con la Web3 y te sientes abrumado sobre cómo comenzar, no te preocupes, te tenemos cubierto. En este artículo te agarraremos de la mano y te guiaremos, paso a paso, para que construyas tu primer dApp usando la API de QuickNode.
No te preocupes si no estás familiarizado con el término “dApp”. Comenzaremos con las cosas básicas y explicaremos todo en el camino.
Tanto si eres un desarrollador experimentado o totalmente novato, ¡te garantizamos que serás un profesional en poco tiempo!
Así que, empecemos.
¿Qué es una dApp?
Si no estás familiarizado con el término “dApp”, significa aplicación descentralizada (decentralizaded application), una aplicación software que opera en una red descentralizada como Ethereum.
Uno de los beneficios principales de las dApps es su capa adicional de seguridad ya que las transacciones son encriptadas y distribuídas entre la red blockchain, haciendo que sea difícil para los hackers tomar acceso sin autorización.
Además, las dApps operan, a menudo, en un código abierto y transparente, alentando la innovación en el espacio blockchain y permitiendo a los desarrolladores escribir nuevas aplicaciones que aprovechen las herramientas e infraestructuras existentes. Desde las finanzas a los videojuegos, el networking y mucho más, las dApps tienen un gran rango de aplicaciones potenciales.
Este artículo usará las API de QuickNode para construir tu primera dApp con facilidad. Tanto si eres un desarrollador experimentado o un novato curioso, ¡prepárate para embarcarte en una aventura emocionante del mundo de las dApps!
QuickNode y las API de QuickNode: Un Vistazo
QuickNode es una plataforma blockchain con tecnología de punta que empodera a los desarrolladores a construir y desplegar sus aplicaciones basadas en la blockchain de forma fácil y eficiente. Una de las características principales de QuickNode es su entorno de desarrollo amigable, el cual simplifica el proceso de construir aplicaciones basadas en la blockchain.
QuickNode también ofrece APIs, lo cual quiere decir Interfaz de Programación de Aplicaciones (Application Programming Interface), un software intermediario que permite que dos aplicaciones diferentes se comuniquen. Aprovechando las APIs de QuickNode, los desarrolladores se pueden enfocar en construir aplicaciones y servicios innovadores que satisfacen las necesidades de los usuarios sin añadir las complejidades y riesgos asociados con construir soluciones basadas en la blockchain desde cero. Esto permite a los desarrolladores crear soluciones escalables, de alta performance y seguras, en poco tiempo.
Ahora que ya estás al día sobre qué es una dApp y entiendes qué es QuickNode, ¡es hora de trabajar y construir!
Construye un explorador blockchain con la API central de QuickNode y Next.js
En esta sección, te guiaré a través del proceso de construir un explorador blockchain usando la API central de QuickNode, React, Javascript, Next.js y Tailwind CSS. El resultado será una aplicación web que muestre las transacciones de la blockchain Ethereum más recientes, similar a Etherscan. Además, podrás ver información esencial como el número del bloque, el hash de la transacción y el timestamp.
Prerrequisitos
- Entendimiento básico de JavaScript, Next.js y TailwindCSS
- Tener el runtime de NodeJS instalado en tu máquina local
- Tener npm instalado como administrador de paquete
Paso 1: Crea un proyecto Next.js
Next.js es una herramienta que permite a los desarrolladores construir cualquier sitio web de forma más fácil y más rápida, desde simples blogs a grandes tiendas onlines y aplicaciones web. Está basado en el framework de React y tiene características que son amigables con el SEO, haciendo que sean fáciles para los motores de búsqueda encontrar y ponerle una clasificación a la página web.
Para comenzar a usar Next.js, debes configurar tu entorno e instalar las dependencias necesarias. Abre una ventana terminal y navega a la carpeta en dónde quieres guardar tu proyecto Next.js.
Escribe el siguiente comando:
npx create-next-app@latest .
Una vez que ejecutes este comando, creará un nuevo proyecto Next.js en tu lugar elegido. Luego, para comenzar el servidor de prueba en tu computador, usa este otro comando:
npm next dev
Luego de ejecutar el comando, tu entorno de desarrollo local será configurado. Para ver el proyecto de inicio de Next.js, coloca “http://localhost:3000/” en tu navegador web. La página mostrada en tu página web debería verse similar a esta:
Paso 2: Añade TailwindCSS a tu proyecto
TailwindCSS es una herramienta que asiste a los desarrolladores a darle estilo a sus páginas y aplicaciones web rápida y fácilmente, proporcionando clases CSS pre construidas para aplicar elementos HTML. Esta herramienta ofrece flexibilidad y personalización, haciendo que sea fácil crear diseños modernos y receptivos sin tener que escribir un CSS personalizado desde cero.
Para instalar TailwindCSS y sus dependencias requeridas usando npm, ejecuta el siguiente comando en el terminal:
npm install -D tailwindcss postcss autoprefixer
Ejecuta el comando init para generar ambos, los archivos tailwind.config y postcss.config.
npm tailwindcss init -p
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Para asegurar que TailwindCSS sea correctamente aplicado a todas las plantillas de los archivos, añade el siguiente código al archivo tailwind.config.js, incluyendo los caminos a todos los archivos de la plantilla.
Luego, añade las directivas @tailwind para cada capa Tailwind de tu archivo globals.css. Al principio de tu archivo globals.css, debería parecerse así:
Lugar del archivo ./styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Paso 3: Añadir Estilo y Diseño
Crea un nuevo directorio en la raíz llamado “components”. Crea dos archivos nuevos en el directorio components: Header.jsx y Main.jsx. Coloca el siguiente código en Header.jsx:
Lugar del archivo: ./components/Header.jsx
import React from "react";
function Header() {
return (
<>
<div className="Header-contaniner flex justify-center my-8 ">
<h2 className="text-blue-600 text-2xl">Xyz Explorer</h2>
<img></img>
</div>
</>
);
}
export default Header;
Luego, ve al archivo Main.jsx y copia y pega el siguiente código.
Archivo: ./components/Main.jsx
import React, { useEffect , useState} from "react";
function Main() {
return (
<div className= "flex justify-center">
<table className="table-auto shadow-lg bg-white w-4/5 text-center" >
<thead className=" bg-gray-800 border-b">
<tr>
<th scope="col" className="text-center px-8 py-4 font-medium text-white">#</th>
<th scope="col" className="text-center px-8 py-4 font-medium text-white">hash </th>
<th scope="col" className="text-center px-8 py-4 font-medium text-white">timestamp</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
)
}
export default Main;
Importa el Header.js y Main.js y el archivo Index.js
import Head from 'next/head';
import Header from '@/components/Header';
import Main from '@/components/Main';
export default function Home() {
return (
<div>
<Head>
<title>Quick node explorer</title>
<meta name= "description" content=" Generated by create next app"/>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header/>
<Main />
</div>
)
}
Ahora, abre http://localhost:3000/ en tu navegador. Aquí está cómo debería verse tu navegador web:
Paso 4: Configura en Endpoint Ethereum con QuickNode
En el siguiente paso, debes configurar un endpoint Ethereum usando QuickNode. Si aún necesitas crear una cuenta, visita este enlace.
Luego que hayas iniciado sesión, ve a esta página y haz click en el botón “Create an endpoint”. Luego, selecciona “Ethereum mainnet” y haz click en “Continue”, seguido por “Create endpoint”.
Tu endpoint será creado y puedes copiar el link HTTP proporcionado para continuar al siguiente paso.
Paso 5: Leyendo los Datos Blockchain
Para interactuar con la blockchain de Ethereum, necesitamos instalar Web3.js, una biblioteca diseñada para este propósito. Para instalarlo, abre tu terminal y ejecuta el siguiente comando:
npm install web3
Navega al archivo Main.jsx y copia y pega el siguiente código entre las líneas 1–3 para importarlas a tu proyecto Web3.js:
import web3 from 'web3';
Luego pon el siguiente código en Main.jsx:
import React, { useEffect , useState} from "react";
import Web3 from 'web3';
function Main() {
var url = "https://tiniest-icy-diamond.discover.quiknode.pro/92aec0ae5b783d3066424796421b50dd718ffd14/"
var provider = new Web3.providers.HttpProvider(url);
var web3= new Web3(provider)
const [number, setNumber]= useState(null);
const [hash , setHash] = useState(null);
const [time , setTime] = useState(null);
useEffect ( () => {
const blocknumber = async () => {
var data = await web3.eth.getBlockNumber()
for (var i =0 ; i < 1 ; i++){
var block = web3.eth.getBlock(data - i);
var number = (await block).number;
var hash = (await block).hash;
var time = (await block).timestamp;
setNumber(number);
setHash(hash);
setTime(time);
}
}
blocknumber()
},[])
return (
<div className= "flex justify-center">
<table className="table-auto shadow-lg bg-white w-4/5 text-center" >
<thead className=" bg-gray-800 border-b">
<tr>
<th scope="col" className="text-center px-8 py-4 font-medium text-white">#</th>
<th scope="col" className="text-center px-8 py-4 font-medium text-white">hash </th>
<th scope="col" className="text-center px-8 py-4 font-medium text-white">timestamp</th>
</tr>
</thead>
<tbody>
<tr>
<td>{number}</td>
<td>{hash}</td>
<td>{time}</td>
</tr>
</tbody>
</table>
</div>
)
}
export default Main;
El código de arriba hace un par de cosas:
Primero, importamos React, useEffect, useState y las bibliotecas Web3 dentro del componente, luego está declarado las tres variables de estado usando el hook useState number, hash y time.
Usamos el hook useEffect para buscar el último número del bloque desde el nodo Ethereum, llamado al método getBlockNumber del objeto web3.eth. El método getBlockNumber regresa una promesa que resuelve al último número del bloque; luego el código usa un for-loop para retirar el objeto del bloque para ese último bloque, y prepara las variables number, hash y time state usando las funciones setNumber, setHash y setTime.
Finalmente, render regresa a una tabla con tres columnas: el número del bloque, hash y timestamp. Mostramos la información del bloque en una sola fila en el cuerpo de la tabla y usa el atributo className para añadir estilo a la tabla usando las clases de Tailwind CSS.
¡Felicidades! Ahora sabes cómo retirar y mostrar datos desde la API central de QuickNode y tu aplicación React.
Nota: si planeas publicar tu código públicamente, te recomiendo usar un archivo
.envpara almacenar tu endpoint QuickNode RPC para prevenir que sea comprometido.
Conclusión
Con la API de QuickNode, construir tu primera dAPP es un proceso directo que envuelve configurar un endpoint Ethereum, instalar las herramientas necesarias e implementar la lógica de tu dApp. Conectar tu aplicación a la blockchain de Ethereum te permite aprovechar su seguridad y descentralización para crear soluciones innovadoras para varias industrias.
Así que, ¿qué estás esperando? Sigue los pasos mostrados en este artículo y comienza a construir tu primera dApp con QuickNode. Tu nuevo conocimiento hace que las posibilidades para aplicaciones emocionantes e impactantes sean ilimitadas.
¿Crearás una plataforma financiera pionera, un juego divertido e interactivo o algo totalmente nuevo? ¡La elección es tuya! Vamos a comenzar y veamos qué puedes crear.
Base Total del Código
https://github.com/Vickyabiodun/Building-your-first-dapp-with-quick-node-api
API de QuickNode
https://www.quicknode.com/core-api?utm_source=developerdao&utm_medium=article&utm_content=explorer
Este artículo es una traducción de Victoria, hecha por Héctor Botero. Puedes encontrar el artículo original aquí.
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_es en Twitter.
Discussion (0)