Bitaigen Research Title: Construir Web3 desde cero: Plataforma de Crowdfunding 2024
Conclusión rápida
Si quieres adentrarte en el desarrollo de aplicaciones descentralizadas (dApps) y aún no sabes por dónde empezar, crear una plataforma de crowdfunding en Web3 es una excelente forma de aprender. En menos de una hora puedes pasar del diseño del contrato inteligente hasta la integración con una interfaz web usando thirdweb, tal como se muestra en el video “如何从零开始构建Web3应用 - 众筹平台项目，智能合约+前端”. Este tutorial práctico te permite comprender cómo se comunican la cadena de bloques y el front‑end, sin necesidad de conocimientos previos profundos en Solidity o React. Al final del proceso tendrás un proyecto funcional que puedes desplegar en una testnet y experimentar con transacciones reales.
Evidencia del proceso paso a paso
A continuación, se resume el flujo completo que el video presenta, dividido en etapas claras y numeradas. Cada paso incluye los comandos esenciales y fragmentos de código que aparecen en la grabación.
1. Preparar el entorno de desarrollo
- Instala Node.js (versión 18 o superior) y npm.
- Crea una carpeta de proyecto y ejecuta:
```bash
npm init -y
npm install --save-dev hardhat @thirdweb-dev/sdk ethers
```
- Inicializa Hardhat, que será el framework para compilar y probar el contrato:
```bash
npx hardhat
```
Selecciona la opción *Create a basic sample project* y confirma los valores por defecto.
2. Escribir el contrato inteligente de crowdfunding
En la carpeta contracts/ crea el archivo Crowdfund.sol con el siguiente código, idéntico al que se muestra en el video:
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;
contract Crowdfund {
address public owner;
uint256 public goal;
uint256 public raised;
mapping(address => uint256) public contributions;
event Funded(address indexed donor, uint256 amount);
event GoalReached(uint256 totalAmount);
constructor(uint256 _goal) {
owner = msg.sender;
goal = _goal;
}
function donate() external payable {
require(msg.value > 0, "Debe enviar ETH");
contributions[msg.sender] += msg.value;
raised += msg.value;
emit Funded(msg.sender, msg.value);
if (raised >= goal) {
emit GoalReached(raised);
}
}
function withdraw() external {
require(msg.sender == owner, "Solo el dueño");
require(raised >= goal, "Meta no alcanzada");
payable(owner).transfer(address(this).balance);
}
}
```
Este contrato permite:
- Definir una meta de financiación (
goal). - Recibir donaciones mediante la función
donate(). - Emitir eventos para que el front‑end pueda reaccionar a nuevas donaciones y al logro de la meta.
- Permitir al creador retirar los fondos una vez alcanzada la meta.
3. Compilar y testear el contrato
Ejecuta:
```bash
npx hardhat compile
```
El video muestra cómo crear un test básico en test/Crowdfund.js usando ethers.js para simular donaciones y verificar que el evento GoalReached se dispara correctamente. Ejecuta los tests con:
```bash
npx hardhat test
```
4. Desplegar en una testnet (Goerli) con thirdweb
Thirdweb simplifica el despliegue sin escribir scripts complejos. En el video se sigue este proceso:
- Regístrate en
https://thirdweb.comy crea un proyecto. - Conecta tu wallet (MetaMask) a la testnet Goerli.
- Usa el CLI de thirdweb:
```bash
npx thirdweb deploy Crowdfund.sol --network goerli
```
El comando devuelve la dirección del contrato desplegado, por ejemplo 0xAbC123....
5. Construir la interfaz front‑end
El tutorial emplea React y la SDK de thirdweb para conectar la UI con el contrato. Los pasos clave:
- Crea una aplicación React:
```bash
npx create-react-app crowdfund-frontend
cd crowdfund-frontend
npm install @thirdweb-dev/react ethers
```
- Configura el proveedor de thirdweb en
src/App.js:
```javascript
import { ThirdwebProvider, useContract, useContractRead, useContractWrite } from "@thirdweb-dev/react";
function App() {
const contractAddress = "0xAbC123..."; // dirección obtenida al desplegar
const { contract } = useContract(contractAddress);
const { data: goal } = useContractRead(contract, "goal");
const { data: raised } = useContractRead(contract, "raised");
const { mutateAsync: donate } = useContractWrite(contract, "donate");
const handleDonate = async (amount) => {
await donate({ value: ethers.utils.parseEther(amount) });
};
return (
<div>
<h1>Plataforma de Crowdfunding</h1>
<p>Meta: {ethers.utils.formatEther(goal)} ETH</p>
<p>Recaudado: {ethers.utils.formatEther(raised)} ETH</p>
<button onClick={() => handleDonate("0.1")}>Donar 0.1 ETH</button>
</div>
);
}
export default function WrappedApp() {
return (
<ThirdwebProvider>
<App />
</ThirdwebProvider>
);
}
```
- Ejecuta la UI con
npm start. La aplicación muestra la meta, la cantidad recaudada y permite al usuario donar directamente desde su wallet. Cada donación actualiza la pantalla en tiempo real gracias a los eventos emitidos por el contrato.
6. Verificar la interacción en tiempo real
El video destaca que, al abrir la consola del navegador, aparecen los logs de los eventos Funded y GoalReached. Esto confirma que la dApp está escuchando la cadena de bloques y que la UI reacciona sin recargar la página.
7. Extender la funcionalidad (opcional)
Una vez que la base funciona, puedes añadir:
- Un listado de donadores usando
contributions(address). - Un botón de *retirar* visible solo para el propietario.
- Soporte para múltiples campañas creando un contrato *Factory*.
Preguntas Frecuentes
Q1: ¿Necesito pagar gas para probar la aplicación?
R: En la fase de desarrollo puedes usar una testnet (Goerli, Sepolia) donde el gas se paga con ETH de prueba que puedes obtener gratuitamente en faucets. No se gasta dinero real.
Q2: ¿Puedo usar otro framework distinto a React?
R: Sí. La SDK de thirdweb está disponible para Next.js, Vue y Svelte. Solo cambia la forma de importar los hooks, pero la lógica de interacción con el contrato sigue siendo la misma.
Q3: ¿Cómo protejo mi contrato de ataques comunes?
R: El ejemplo del video es intencionalmente simple. En producción deberías:
- Validar que la meta sea razonable y no pueda ser modificada después del despliegue.
- Usar ReentrancyGuard para evitar re‑entradas en
withdraw. - Implementar un mecanismo de *pausa* (circuit breaker) en caso de vulnerabilidades.
Contexto y fundamentos
El desarrollo de dApps combina dos mundos: la capa de consenso (blockchain) y la capa de experiencia (front‑end). En el ecosistema Web3, los contratos inteligentes actúan como la lógica de negocio inmutable, mientras que la UI permite a los usuarios interactuar mediante wallets como MetaMask.
El video de thirdweb se ubica dentro del cluster *AI Crypto & Web3 Development*, lo que indica que la comunidad está adoptando herramientas que automatizan tareas repetitivas (compilación, despliegue) y facilitan la integración con frameworks de UI modernos. Al seguir este tutorial, los principiantes no solo aprenden Solidity básico, sino que también comprenden cómo los eventos del contrato pueden ser escuchados en el front‑end para crear experiencias reactivas.
Además, la elección de un crowdfunding como caso de estudio tiene sentido pedagógico: el flujo de fondos es sencillo, los estados (goal, raised) son fácilmente observables y los usuarios pueden ver resultados concretos (una campaña alcanzada o no). Esto refuerza la confianza del desarrollador al ver que la dApp responde a transacciones reales.
En resumen, el proceso completo –desde la instalación de Hardhat, la escritura del contrato, el despliegue con thirdweb, hasta la construcción de una UI React‑based– está totalmente documentado en el video y puede reproducirse paso a paso siguiendo las indicaciones anteriores. Al finalizar, tendrás una base sólida para explorar proyectos más complejos, como mercados NFT, DAO o soluciones de finanzas descentralizadas (DeFi).
Con esta guía invertida, puedes comenzar de inmediato, validar cada etapa con evidencia práctica y, si surge alguna duda, consultar la sección de preguntas frecuentes antes de profundizar en los conceptos subyacentes del ecosistema Web3. ¡Manos a la obra y feliz codificación!
Plataformas Recomendadas
Si buscas un exchange confiable para operar:
- Binance — El exchange de criptomonedas más grande del mundo, con más de 350 pares de trading. Regístrate aquí con el código B2345 para descuentos en comisiones
- OKX — Plataforma profesional de derivados y wallet Web3 integrado. Regístrate aquí con el código B2345 para beneficios de nuevo usuario
