Versión en EspañolES

Cómo construir interfaces de usuario para contratos inteligentes

Rahat Chowdhury

Head of Developer Relations at Biconomy

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

Existen muchos caminos que podemos tomar para convertirnos en desarrolladores de web3. No todos los caminos requieren aprender un lenguaje completamente nuevo y convertirse en desarrollador de contratos inteligentes. En este masterclass aprenderemos cómo construir nuestra propia interfaz de usuario React sobre cualquier contrato inteligente existente en la blockchain de Prueba de Participación de Polygon. Exploraremos una visión general básica de las blockchains y aprenderemos sobre las ventajas de construir en Polygon. También obtendremos una comprensión de qué son los contratos inteligentes, aprenderemos cómo encontrar los existentes y conoceremos herramientas que nos ayudarán a interactuar con ellos desde una aplicación React.

This workshop has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

Web3 es un concepto de Internet que utiliza tecnologías blockchain para permitir a los usuarios ser dueños de sus propios datos y realizar transacciones sin intermediarios. La Web3 introduce pagos nativos y almacena datos de manera descentralizada, ofreciendo más control y propiedad a los individuos sobre su información en línea.

Puedes interactuar con contratos inteligentes a través de bibliotecas y frameworks de JavaScript como ethers.js. Estos permiten conectar tu aplicación front-end con la blockchain, realizar transacciones y obtener datos de los contratos inteligentes de forma eficiente.

Polygon es una plataforma de escalabilidad y desarrollo de infraestructura para Ethereum. Proporciona soluciones que ayudan a mejorar la eficiencia y los costos de las transacciones en la red de Ethereum, facilitando que los desarrolladores creen aplicaciones descentralizadas más accesibles y eficientes.

Los smart contracts son programas almacenados en una blockchain que se ejecutan automáticamente cuando se cumplen condiciones predefinidas. Estos contratos son escritos en lenguajes como Solidity y permiten la ejecución de acuerdos de manera transparente y sin necesidad de intermediarios.

Para comenzar a desarrollar en Web3, necesitas entender los principios básicos de blockchain y smart contracts. Aprender lenguajes como Solidity y usar herramientas como Metamask para interactuar con la blockchain son pasos esenciales. Además, participar en hackathons y colaborar con la comunidad puede proporcionarte experiencia práctica valiosa.

Un explorador de bloques es una herramienta que permite visualizar y buscar información en una blockchain, como transacciones, bloques y direcciones de wallets. Es esencial para desarrolladores y usuarios que necesitan entender y verificar las interacciones que ocurren en la red blockchain.

web3 blockchain

Rahat Chowdhury

134 min

04 Jul, 2022

Comments

Video Summary and Transcription

El masterclass de hoy cubrió varios temas, incluyendo una introducción a Web3 y contratos inteligentes, una visión general de la tecnología blockchain, el nacimiento de Bitcoin y su impacto en la blockchain, una introducción a Ethereum, Polygon y las carteras, y el proceso de conectar carteras e interactuar con contratos inteligentes. El masterclass también incluyó ejercicios prácticos sobre cómo configurar Metamask, explorar exploradores de bloques e interactuar con un contrato inteligente. Los participantes aprendieron sobre la importancia de la frase de recuperación secreta, la estructura de los bloques en una blockchain y el papel de las tarifas de gas en incentivar a los mineros. En general, el masterclass proporcionó una visión general completa del desarrollo de Web3 y la tecnología blockchain.

Available in English: How to Build UI's for Smart Contracts

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

Masterclass Web3 - Construyendo Tu Primer Dapp

React Advanced Conference 2021

145 min

Masterclass Web3 - Construyendo Tu Primer Dapp

Top Content

Featured WorkshopFree

Nader Dabit

En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.

react blockchain web development ethereum web3

Consulta de datos de blockchain con GraphQL

JSNation 2023

64 min

Consulta de datos de blockchain con GraphQL

WorkshopFree

Simon Emanuel Schmid

¿Curioso acerca de cómo funcionan los datos en el mundo de la blockchain? Únete a Simon en una sesión interesante sobre The Graph, el protocolo de indexación descentralizado que facilita a los desarrolladores de blockchain buscar y consultar datos de blockchain.
Tabla de contenidos:- Comprendiendo los datos de blockchain- Anatomía de un contrato inteligente- Indexando datos de blockchain con The Graph- Accediendo a datos en The Graph- Subgrafos recomendados- Resumen de la escritura de subgrafos

blockchain graphql web3

Cómo Convertir Criptomonedas con Microservicios GRPC en Node.js

JSNation 2023

117 min

Cómo Convertir Criptomonedas con Microservicios GRPC en Node.js

Workshop

2 authors

El masterclass presenta los principios de arquitectura clave, patrones de diseño y tecnologías utilizadas para construir microservicios en el stack de Node.js. Cubre la teoría del marco de trabajo GRPC y el mecanismo de protocol buffers, así como técnicas y especificaciones para construir servicios aislados utilizando el enfoque de monorepo con lerna y yarn workspaces, TypeScript. El masterclass incluye una tarea práctica en vivo para crear una aplicación de conversión de moneda que sigue los paradigmas de microservicios. Es adecuado para desarrolladores que deseen aprender y practicar el patrón de microservicios GRPC con la plataforma Node.js.
Requisitos previos:- Buen entendimiento de JavaScript o TypeScript- Experiencia con Node.js y escribir aplicaciones de backend- Preinstalar Node.js, npm- Preinstalar el Compilador de Protocol Buffer- Preferimos usar VSCode para una mejor experiencia con JavaScript y TypeScript (otros IDE también son aceptables)

case study node.js microservices web3

Aprende a Construir en WEB3 Como si Fuera WEB2

React Summit 2024

83 min

Aprende a Construir en WEB3 Como si Fuera WEB2

Workshop

David Dal Busco

En esta masterclass, construiremos y desplegaremos una aplicación descentralizada desde cero y exploraremos sus características adicionales, todo ello minimizando la complejidad típicamente asociada con el aprendizaje de la tecnología blockchain.Al final de esta masterclass, espero que los asistentes no solo tengan una comprensión más clara del desarrollo blockchain, sino que también se den cuenta de que construir en este espacio puede ser sorprendentemente sencillo y agradable.Mi objetivo es compartir mi entusiasmo por el desarrollo de código abierto y el potencial de Web3.

web3

Construye aplicaciones Web3 con Javascript

JSNation 2022

49 min

Construye aplicaciones Web3 con Javascript

WorkshopFree

Shain Dholakiya

El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es facilitar a los desarrolladores de JavaScript la construcción de aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.Aprende más sobre el Hyperverse aquí.Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en JavaScript.

blockchain javascript web3

Construye aplicaciones Web3 con React

React Summit 2022

51 min

Construye aplicaciones Web3 con React

WorkshopFree

Shain Dholakiya

El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.
Aprende más sobre el Hyperverse aquí.
Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.

web apps npm web3

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Juegos Web 3: Qué es y por qué es importante

JS GameDev Summit 2022

36 min

Juegos Web 3: Qué es y por qué es importante

Paul Gadi

CTO & Co-founder of OPGames

Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

blockchain web3 game development

Pruebas E2E para Aplicaciones Web3

TestJS Summit 2022

21 min

Pruebas E2E para Aplicaciones Web3

Top Content

Rafaela Azevedo

The Chain Academy

In this Talk, Rafaela discusses Web3, its decentralized and token-based model, and the architecture based on smart contracts. Testing Web3 poses challenges due to the need for third-party providers like MetaMask. Approaches such as mocking the Web3 flow and using end-to-end testing tools like Taskafar are suggested. The trade-offs in Web3 testing include test speed and dependency on third-party apps. Balancing unit, integration, and end-to-end tasks is crucial for a robust testing strategy.

testing javascript e2e testing web3 e2e tests react

Guía para desarrolladores frontend sobre Web3

React Summit 2022

22 min

Guía para desarrolladores frontend sobre Web3

Rahat Chowdhury

Head of Developer Relations at Biconomy

This talk covers an introduction to Web 3 and smart contracts, including deployment and bytecode compilation. It also discusses interacting with blockchain wallets, using RPC endpoints and block explorers, and accessing smart contract data. The talk emphasizes the use of ABIs and JavaScript libraries like ethers for interacting with smart contracts. It mentions the shift in mindset from HTTP requests to using ABI code and libraries for front-end development in Web 3. The talk concludes by mentioning Web3UI and tools like PolygonScan and Etherscan for building on the blockchain.

react fullstack frontend web3

Construyendo Dapps con React

React Advanced Conference 2021

30 min

Construyendo Dapps con React

Nader Dabit

Author, open source developer working in blockchain space with Edge & Node and The Graph Protocol.

The Talk discusses building decentralized applications (DApps) with React and explores the benefits of smart contract technology. It highlights the characteristics and infrastructure of Web 3 applications, including decentralized indexing, off-chain data storage, and decentralized file storage. The Talk also covers identity in Web 3, with a focus on self-sovereign identity and the use of blockchain for identity verification. The process of building a DApp with React and Hard Hat is explained, along with deploying contracts and interacting with them. Overall, the Talk provides insights into the world of DApps and the technologies involved.

react blockchain serverless web3

Construyendo APIs GraphQL en Ethereum

GraphQL Galaxy 2021

8 min

Construyendo APIs GraphQL en Ethereum

Nader Dabit

Author, open source developer working in blockchain space with Edge & Node and The Graph Protocol.

This Talk is about building GraphQL APIs on top of Ethereum and the Ethereum virtual machine. The graph is an indexing protocol for querying blockchain networks like Ethereum and IPFS. Developers can build APIs called subgraphs to efficiently index data and make it available for querying from frontend applications. The graph serves over 1 billion queries per day and is used in various Web3 applications including DeFi, gaming, and NFT marketplaces. The process involves defining the data model using the GraphQL schema and contract addresses, deploying and testing the subgraph, and using a GraphQL client to query the subgraph.

blockchain graphql ethereum api development

Web3.js - Pasado, Presente y Futuro

JSNation 2022

21 min

Web3.js - Pasado, Presente y Futuro

Nazar Hussain

ChainSafe Systems, Germany

Today we will discuss the Web3JS library, its history, maintenance, and community involvement. The upcoming version 4 aims to address challenges faced in version 1 by introducing native TypeScript support, reduced size, improved code readability, and increased test coverage. Version 4 also introduces a new validator for easier Ethereum data validation and allows developers to customize how they handle numbers and bytes. It brings a dynamic data format for custom formatting and introduces TypeScript for contracts without transpiling. The API in version 4 is easy to extend and has future improvements and refactoring.

web3 web3react