Hola Mundo DApp 👋

Desarrollo de Blockchain de Pila Completa en Español ✨

English Version: Hello World DApp

Un proyecto de cajón y una guía para comenzar a construir rápidamente con Polygon y The Graph. Ideal para hackatones.

Aprende a hacer lo siguiente:

• Crear, compilar y desplegar un contrato inteligente en la red de prueba de Polygon Mumbai usando Hardhat.
• Verificar su contrato inteligente usando la API de Polygonscan.
• Interactuar con su contrato inteligente implementado desde su front-end usando Wagmi React Hooks.
• Utilizar Web3Storage para almacenar imágenes y datos de usuario.
• Crear, compilar e implementar un Subgraph en el servicio alojado de The Graph. (The Graph's Hosted Service)
• Consultar/Query su Subgraph desde su front-end usando GraphQL para mostrar datos de blockchain e ipfs.
• Aprenda a buscar, filtrar y ordenar sus datos usando The Graph.

Diapositivas de Presentación

Subgraph

Contrato Inteligente

Interfaz

🤖 Stack De Tech e Información De Cadena

Stack De Tech utilizado:

• Javascript
• Next.js
• Tailwind CSS
• Chakra UI
• Rainbow Wallet
• IPFS / Web3 Storage
• The Graph
• GraphQL
• WAGMI
• Hardhat
• Ethers.js

Red de Blockchain:

• Polygon Mumbai: https://mumbai.polygonscan.com/

Otras Características:

• Monorepo

---

🏄‍♂️ Inicio Rápido Para Ejecutar Localmente

Antes de clonar este proyecto, asegúrate de tener instalado lo siguiente en tu máquina (en este orden)!

• Node.js
• Yarn
• Git

Puedes verificar ejecutando estos comandos en tu terminal para revisar si ya los tienes instalados:

node -v
npm -v
yarn -v
git --version

Si alguno no devuelve la información de la versión, debe instalarlos para asegurarse de que su máquina cumpla con los requisitos previos.

Fork y clonar este proyecto

• Primero, Fork este proyecto haciendo clic en el botón de Fork en la esquina superior derecha de la página del repositorio.
• Segundo, abre tu terminal y ejecuta el siguiente comando con tu usuario de github.

git clone https://github.com/<TU-USUARIO>/hola-mundo-polygon-y-elgraph

Instala todas las dependencias del proyecto

• En el directorio raíz instala las dependencias del proyecto ejecutando yarn install

cd hola-mundo-polygon-y-elgraph
yarn install

---

🛠 Configuración de Entorno y Wallet

Crea una wallet de desarollo con Metamask, una cuenta de Alchemy, de Web3Storage y de PolygonScan

• Metamask
  • IMPORTANTE: se recomienda crear una wallet solamente para desarrollo, ¡evita usar tu wallet normal!
  • Guarda la frase semilla (mnemotécnica) de esta wallet de desarrollo en tus notas.
• Alchemy
  • Genera una clave api GRATIS para mumbai.
  • Guarda tu clave en tus notas.
• PolygonScan
  • Genera una clave api GRATIS.
  • Guarda tu clave en tus notas.
• Web3Storage
  • Genera una clave api GRATIS.
  • Guarda tu clave en tus notas.

¿Porque se necessita claves de API? Una clave API es una combinación única de letras y números que autoriza a nuestro proyecto a realizar solicitudes al servicio que queremos usar, como Alchemy, Polygonscan y Web3Storage. Es una llave para desbloquear el acceso. ✨

Agrega las redes Testnet para Polygon Mumbai en Metamask:

• Cómo agregar Polygon Mumbai Testnet en Metamask: https://docs.polygon.technology/docs/develop/metamask/config-polygon-on-metamask/

¿Que es una red de prueba? Usar Polygon Mainnet cuesta dinero real, pero existen Redes de Prueba o 'Testnets' como Polygon Mumbai que los desarrolladores usan para probar sus contratos inteligentes y cuesta dinero falso (dinero de prueba). Todas los Blockchains tienen sus propias redes de prueba.

Fondea tu Cuenta con MATIC de prueba:

• Polygon Faucet (Mumbai Network)

¿Que es un Faucet?? Un 'Faucet' es un lugar donde puedes solicitar dinero de prueba para probar tu contrato inteligente. Hay límites sobre cuánto puedes recibir diariamente.

Configurar Variables de Entorno:

# navegue a la carpeta 'hardhat'
cd packages/hardhat 
# copie el contenido dentro de .env.example a .env
cp .env.example .env

# navegue a la carpeta 'next-app'
cd packages/next-app
# copie el contenido dentro de .env.example a .env
cp .env.example .env

• Complete los variables dentro de .env usando sus claves, URLs y frase inicial que guardó durante los pasos anteriores.

¿Por qué necesitamos establecer variables de entorno? En nuestro archivo .env es donde almacenaremos las claves API, las direcciones URL y la frase inicial que usará nuestra DApp. Es una buena práctica no exponer estos valores en nuestro código y almacenarlos en un archivo que estará oculto. De esa manera, cuando ingresemos a GitHub, nuestras cuentas con dinero falso no se agotarán. (Los hackers drenan cuentas en Testnet tambien. 🙃)

---

📱 Ejecutar frontend en localhost

• En la misma ventana, ejecutar el comando yarn dev

yarn dev

• Abre http://localhost:3000 para ver la interfaz de la aplicación!

---

🚀 Despliega tu front-end en Vercel!

Clic Para Desplegar

---

❓ Necesitas ayuda?

• Mándame un mensaje por twitter o telegram: @hello_dayana
• Abre un Github Issue

---

📚 Recursos Para Desarrollo

Chainlink Bootcamp De Smart Contracts (Español): https://chain.link/es/bootcamp
30 Dias De Web3: https://www.30daysofweb3.xyz/es/curriculum/1-introducci%C3%B3n/0-bienvenidos
Documentación de Solidity: https://docs.soliditylang.org/en/v0.8.15/
Tutorial de Solidity: Crypto Zombies https://cryptozombies.io/es/course
Documentación de Next.js: https://nextjs.org/docs
Documentación de Tailwind CSS: https://tailwindcss.com/docs/installation
Documentación de Chakra-UI: https://chakra-ui.com/
Chakra Templates: https://chakra-templates.dev/
Documentación de Hardhat: https://hardhat.org/getting-started/
Documentación de Ethers.js: https://docs.ethers.io/v5/
Documentación de Rainbow Kit: https://www.rainbowkit.com/docs/introduction
Documentación de Wagmi: https://wagmi.sh/docs/getting-started
Markdown Cheatsheet: https://www.markdownguide.org/cheat-sheet/
El Libro de Git (Español): https://git-scm.com/book/es/v2
Atlassian Git Guru: https://www.atlassian.com/git/tutorials
Git Comandos Cheatsheet: https://www.hostinger.com/tutorials/basic-git-commands
Visual Studio Code: https://code.visualstudio.com/
Dev Setup for Mac: https://www.youtube.com/watch?v=KwYqtbSwnH8

📚 Herramientas Para Hackatones

Canva: Para Crear Presentaciones De Pitch Deck https://www.canva.com/
Miro: Para planificar tu DApp: https://miro.com/
Figma: Wireframes: https://www.figma.com/
Notion: Para compartir archivos y colaborar con tu equipo: https://www.notion.so/
Plantilla de Notion para hackatones (De: Women in Web3): https://womeninweb3.notion.site/womeninweb3/Mini-Hack-Community-Template-65e5ee56505a49ec8c0a884ca4c63be0
Web3athon Notion: https://project-cradl.notion.site/Welcome-to-Web3athon-e0b17fe0a41b441fb33e6154adb5795e

---

⭐️ Si te ha gustado este proyecto, ¡dale una estrella!

---

🚀 WAGMI

theLovelaceProject