Eli Ara

Posted on Aug 8

Tutorial Completo: De Cero a SpeedRun Ethereum

#apb #programming #learning #blockchain

📚 Índice

Preparación del Entorno
Conceptos Fundamentales
Instalación de Herramientas
Primer Proyecto con Scaffold-ETH
Introducción a Solidity
SpeedRun Challenge 0
Próximos Pasos

🚀 Preparación del Entorno

¿Qué vamos a necesitar?

Una computadora con Windows, Mac o Linux(Team Linux)
Conexión a internet
Ganas de aprender blockchain y Web3

Software que instalaremos:

Visual Studio Code - Nuestro editor de código
Node.js - Para ejecutar JavaScript
Git - Para manejo de versiones
Scaffold-ETH - Framework de desarrollo Web3

🧠 Conceptos Fundamentales

¿Qué es Blockchain?

Imagínate un cuaderno que:

Nunca se puede borrar lo que está escrito
Todos tienen una copia exacta del cuaderno
Cada página nueva debe ser aprobada por la mayoría
Está numerado y cada página hace referencia a la anterior

Bloque 1 → Bloque 2 → Bloque 3 → Bloque 4 → ...
   ↓         ↓         ↓         ↓
 Hash A    Hash B    Hash C    Hash D

¿Qué es Web3?

Web 1.0: Páginas estáticas (solo leer)

Web 2.0: Redes sociales, interacción (leer y escribir)

Web 3.0: Aplicaciones descentralizadas (leer, escribir, poseer)

🚀 Ethereum: El Computador Mundial

Ethereum es como una computadora gigante que:

Funciona en miles de computadoras al mismo tiempo
Ejecuta programas llamados "Smart Contracts"
Usa una moneda digital llamada Ether (ETH)
Permite crear aplicaciones descentralizadas (dApps)

🧩 Conceptos Clave

Wallet: Tu billetera digital (clave privada + clave pública)
Gas: El "combustible" que se paga por usar la red
Smart Contract: Código que se ejecuta automáticamente
Transacción: Cualquier operación en la blockchain

💻 Instalacion de Herramientas

Paso 1: Instalar Visual Studio Code

Ve a https://code.visualstudio.com/
Descarga la versión para tu sistema operativo
Instalar con las opciones por defecto
Abrir VS Code

Extensiones recomendadas:

Solidity (por Juan Blanco)
Hardhat for Visual Studio Code
GitLens

Paso 2: Instalar Node.js

Ve a https://nodejs.org/
Descarga la versión LTS (Long Term Support)
Instalar con las opciones por defecto
Abrir una terminal y verifica:

node --version
npm --version

Paso 3: Instalar Git

Ve a https://git-scm.com/
Descargar e instalar para tu sistema operativo
Verificar la instalación en la terminal:

git --version

Paso 4: Configurar Git (Primera vez)

git config --global user.name "Tu Nombre"
git config --global user.email "tu@email.com"

🏗️ Primer Proyecto con Scaffold ETH

¿Qué es Scaffold-ETH?

Scaffold-ETH es un framework desarrollado por BuidlGuidl que incluye:

Next.js para el frontend
Hardhat/Foundry para smart contracts
TypeScript para tipado
Herramientas integradas para desarrollo Web3

🚧 Creando tu primer proyecto

Crear el proyecto:

npx create-eth@latest mi-primer-dapp

Seleccionar opciones:

Framework: Hardhat ✅
Instalar dependencias: Sí ✅

Entrar al proyecto:

cd mi-primer-dapp

📂 Estructura del proyecto

mi-primer-dapp/
├── packages/
│   ├── hardhat/          # Smart Contracts
│   │   ├── contracts/    # Tus contratos
│   │   └── deploy/       # Scripts de despliegue
│   └── nextjs/           # Frontend
│       ├── pages/        # Páginas de la app
│       └── components/   # Componentes React
└── README.md

🚀 Ejecutando el proyecto

Terminal 1 - Blockchain Local:

yarn chain

Levanta una blockchain local con cuentas pre-financiadas.

Terminal 2 - Desplegar Contratos:

yarn deploy

Despliega el contrato de ejemplo en la blockchain local.

Terminal 3 - Frontend:

yarn start

Inicia la aplicación en http://localhost:3000

🔍 Explorando la Aplicación

Burner Wallet (arriba derecha):

Se genera automáticamente
Cada ventana incógnito = wallet diferente
⚠️ NO es segura para dinero real

Faucet (grifo) de ETH:

Botón para obtener ETH gratis
Solo funciona en redes de desarrollo

Debug Tab:

Interfaz automática para tu contrato
Funciones de lectura (gratis)
Funciones de escritura (cuestan gas)

Block Explorer:

Se ven todas las transacciones
Perfecto para debugging

📝 Introduccion a Solidity

¿Qué es Solidity?

Lenguaje de programación para Smart Contracts
Sintaxis similar a JavaScript / C++
Se compila a bytecode para la EVM (Ethereum Virtual Machine)

📄 Tu Primer Contrato

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract MiPrimerContrato {
    // Variable de estado (se guarda en blockchain)
    string public saludo = "¡Hola Mundo!";
    uint256 public contador = 0;

    // Evento (como un log)
    event SaludoCambiado(string nuevoSaludo, address quien);

    // Función para cambiar el saludo
    function cambiarSaludo(string memory _nuevoSaludo) public {
        saludo = _nuevoSaludo;
        contador++;
        emit SaludoCambiado(_nuevoSaludo, msg.sender);
    }

    // Función de solo lectura
    function obtenerInfo() public view returns (string memory, uint256) {
        return (saludo, contador);
    }
}

🧠 Conceptos Importantes

🛠️ Tipos de funciones:

public: Cualquiera puede llamarla
private: Solo desde el mismo contrato
view: Solo lee, no modifica estado
pure: No lee ni modifica estado

🔐 Modificadores de visibilidad:

public: Genera getter automático
private: Solo accesible internamente
internal: Accesible en contratos heredados
external: Solo desde fuera del contrato

🏃‍♂️ SpeedRun Challenge 0

¿Qué son los SpeedRun Challenges?

Son ejercicios prácticos creados por BuidlGuidl para aprender desarrollo Web3:

Paso a paso
Con explicaciones detalladas
Comunidad que ayuda
Certificados al completar

Challenge 0: Simple NFT Example

Objetivo: Crear y desplegar tu primera colección de NFTs

Paso 1: Clonar el Challenge

git clone https://github.com/scaffold-eth/se-2-challenges.git
cd se-2-challenges/challenge-0-simple-nft
yarn install

Paso 2: Entender el Contrato NFT

contract YourCollectible is ERC721, Ownable {
    uint256 public tokenCounter;

    constructor() ERC721("YourCollectible", "YCB") {
        tokenCounter = 0;
    }

    function mintItem(address to, string memory tokenURI) 
        public 
        onlyOwner 
        returns (uint256) 
    {
        uint256 newItemId = tokenCounter;
        _safeMint(to, newItemId);
        _setTokenURI(newItemId, tokenURI);
        tokenCounter++;
        return newItemId;
    }
}

Paso 3: Personalizar tu NFT

Cambia el nombre y símbolo
Modifica las imágenes en /packages/nextjs/public/
Actualiza los metadatos en /packages/nextjs/public/metadata/

# Terminal 1
yarn chain

# Terminal 2
yarn deploy

# Terminal 3
yarn start

Paso 5: Mintear tu primer NFT

Hay que ir a la pestaña Debug
Buscar la función mintItem
Ingresar una dirección y URI
¡Hacer clic en "Send"!

Paso 6: Desplegar en Testnet

Obtener ETH de prueba de un faucet
Configura la red en hardhat.config.ts
Desplegar:

yarn deploy --network sepolia

🎯 Ejercicios Prácticos

Ejercicio 1: Modificar el Saludo

Cambia el mensaje por defecto del contrato
Agrega una función para contar caracteres del saludo
Despliega y prueba

Ejercicio 2: NFT Personal

Crea metadatos JSON para tus NFTs
Sube imágenes a IPFS
Mintea 3 NFTs únicos

Ejercicio 3: Funcionalidad Extra

Agrega una función reset() que vuelva el contador a 0
Implementa un sistema de "likes" para saludos
Crea eventos para cada acción

🔗 Recursos y Links Útiles

Documentación:

Tutoriales:

Herramientas:

🚀 Proximos Pasos

Challenge 1: Decentralized Staking App

Staking de tokens
Recompensas automáticas
Interacción con DeFi

Challenge 2: Token Vendor

Crear tu propio token ERC20
Sistema de compra/venta
Liquidez automática

Challenge 3: Dice Game

Juego de dados on-chain
Randomness segura
Sistema de apuestas

🎉 ¡Felicitaciones!

Ahora podes decir que tenes:

Un entorno de desarrollo configurado
Conocimientos básicos de blockchain
Tu primer dApp funcionando
Las herramientas para seguir aprendiendo

📞 Ayuda y Soporte

¿Dudas? No te preocupes, es normal:

Podes buscarnos en Git Hub a Tati y a mi para saber más sobre Blockchain y nuestro aprendizaje
Lee los errores - Los errores de Solidity son muy descriptivos
Usa el Debug Tab - Te muestra exactamente qué pasó
Revisa el Block Explorer - Ve las transacciones fallidas

El desarrollo Web3 es un viaje, no un destino. ¡A seguir rompiendo! 🏗️