Creación de Interfaces Web3 con React y Ethereum

Contenido del curso

Graduación

1
Desarrollo de Proyectos Blockchain en Latinoamérica
127:14 min

Introducción al Ethereum Developer Program

Semana 1: Importancia del Manejo de Memoria

Semana 2: Web3-react

Semana 3: Ethereum Virtual Machine y Criptografía

Semana 4: Creando tu primer Smart Contract

Semana 7: Testing Tools y Despliegue

Semana 9: Auditoría y Seguridad de Smart Contracts

Semana 10: Integraciones en Web3: Web3.js vs. Ether.js

25
Integración de librerías en contratos inteligentes Ethereum
103:30 min

Semana 11: Monetización para Blockchain Developers

26
Monetización para Desarrolladores Web3: Estrategias y Oportunidades
51:36 min

Recursos Adicionales

Cursos Empresas Blog Live Conf Eventos Precios

Si quieres obtener los mejores resultados de este programa es importante que completes los retos y actividades que son asignadas durante las clases.

A continuación encuentras las actividades a completar de React-Web3 y Salto de Web2 a Web3

1. ¿Cuáles son las características que debe tener la web3 y explica brevemente cada una de ellas?

2. ¿Qué compone el stack sugerido por Óscar para la creación de interfaces en la Web3?

3. React Ethereum Challenge

Es hora de ir agregando retos y contenido a tu CV, para ello debes hacer Fork al repositorio del reto y completar las asignaciones.

Puedes encontrar el repositorio aquí: https://github.com/gndx/react-eth-challenge

Crear los componentes del proyecto
Añadir estilos
Crear función getData.js
Integrar API
Personalizar API
Documentar
Deploy (Opcional)

Recomendaciones:

Leer detenidamente el READ.me que está en el repositorio
Hacer un fork del proyecto para trabajarlo desde la propia cuenta
Para entregarlo deben hacer pull request que te dirá si resolviste 100% el reto

Cursos de la Semana

Si aún no eres parte de nuestra comunidad, no es obligatorio que cumplas los cursos de cada semana. Tenemos un precio especial para ti, y así puedas ser parte de Platzi y la Escuela de Blockchain y Criptomonedas.

Curso de Estrategias para Aprender en Línea

Aprender es todo un hábito y detrás de ello muchas estrategias, disciplina y esfuerzo para reinventarte y construir sin parar.

Te esperamos el jueves en el chat de Discord a las 2:00 pm 🇨🇴🇲🇽/3:00 pm🇻🇪/4:00 pm 🇦🇷/8:00 pm🇪🇸 para hablar con los Platzi Mentores sobre crecimiento profesional y responder todas tus dudas y preguntas.

Curso de React Avanzado

React es uno de los frameworks y herramientas que nos permiten dar el salto a web3 y posicionarnos laboralmente por su alta demanda, sabemos que ya conoces React, sin embargo siempre hay espacio para potenciar tus habilidades. Además, te ayudará a poder completar el reto de la semana.

Comparte tu certificado y cada uno de tus logros con tus amigos y la comunidad, esto es solo el comienzo 💚

Recursos recomendados

Comparte tus respuestas en los aportes de esta clase y en el discord de tu mentor asignado (si eres parte de la comunidad)

Vienen muchas sorpresas, hackatons, retos y premios.

Sigamos construyendo 🔥

Creación de Interfaces Web3 con React y Ethereum

Ethereum Developer Program 1ª Edición

Clase 10 de 28

Clase 10 / 28

Comentarios (8)8 comentarios

Tini Cassi

Hace 4 años

Hola comunidad! 👋 Dejo por aquí mi aporte:

Reto Github

Características WEB3

Infraestructura distribuida, trustless y robusta.
- La web 3.0 se asienta sobre el concepto de la distribución, la eliminación de intermediarios en las transacciones de datos y algoritmos criptográficos de consenso que gozan de altos niveles de seguridad. En su infraestructura, utiliza una base de datos distribuida en nodos, que es una Blockchain o cadena de bloques de datos unidos por hashes, y que guarda la información almacenada de forma asíncrona.
Propiedad de los datos, contenidos y plataformas.
- A diferencia de la web 2.0, donde el usuario genera datos en su interacción con plataformas centralizadas y estas últimas son dueñas de esos datos y la información que se obtiene del procesamiento de los mismos, en la web 3.0 el usuario es dueño de sus datos y puede disponer de ellos a su voluntad.
Pagos digitales nativos.
- Cada red tiene un token que cumple la función de medio de pago nativo de la red en cuestión. Así mismo, puede existir el lanzamiento de un Airdrop, que es un tipo de token especial que se entrega a los usuarios que interactuaron con la red en sus inicios y que da la posibilidad a su holder de formar parte de procesos de toma de decisiones sobre el funcionamiento de la red, como así también proponer mejoras sujetas a votación.
Identidad auto-soberana.
- El usuario de la web 3.0 es el dueño de toda su información y su identidad en línea.
Backend abierto, público y componible.
- Alineado al concepto de ser una opción alternativa a la utilización de intermediarios para lograr la confianza, el código y los smart contracts son públicos, y los usuarios pueden acceder a ellos y verificarlos.

Stack sugerido por GNDX 🙂

JAVASCRIPT
NEXTJS 12
ETHEREUM
POLYGON
FIREBASE
IPFS
JSON-RPC
SOLIDITY
METAMASK
VERCEL

Rafael Livise Larico

Hace 4 años

A alguien le sale el mismo error en los test, revise en la api de enzymejs, lo compare y no veo nada mal

Mario Andrade

Hace 4 años

Caracteristicas web3

Descentralizada. Una base de datos que se encuentra distribuida entre los participantes de la red, tanto validadores como usuarios en general, y no en una entidad central,.
Trustless. "No confies en nadie". La red no confìa ni en si misma.
Propiedad de la data. Es tuya si tu interacción es con wallets y smartcontracts. Si tu interacciòn es con exchange centralizados, es del exchange la información. Ojo.
Direcciòn, Identidad. Una wallet es tu direcciòn y tu identidad, a menos que utilices servicios como el ENS dentro de la red ethereum.
Pagos Nativos. No se depende de terceros, los contratos envìen los fondos por si mismos al ejecutarse en blockchain.

Stack Oscar: Vercel. Next. JS ts SOLIDITY metamask ipfs poligon

Leandro Alvarez

Hace 4 años

Tarea 2:

A. ¿Cuáles son las características que debe tener la web3 y explica brevemente cada una de ellas?

Infraestructura distribuida, trust-less y robusta:

Su descentralización se basa en la estructura de varios nodos y no de uno solo, al no confiar en terceros, si no en los consensos conseguidos con encriptación y smart contracts a través del trabajo en computo y de la comunidad (nodos). Esto resulta una infraestructura que crece en función de los nodos y se vuelve más robusta.
Propiedad de los datos, contenido y plataformas: Haciendo una mención a la Web2 donde los datos pertenecen a las diferentes plataformas disponibles en la Web. En Web3 cada uno de los usuarios son dueños de la información que generan cuando interactúan con la red.
Pagos digitales nativos:

Las plataformas centralizadas al funcionar con la blockchain permiten registrar transacciones en su red, así que pueden hacerlo con la moneda nativa de cada blockchain.
Identidad auto-soberana:

El gran superpoder que posse web3 es que cada uno de los usuarios puede elegir que información compartir, cuándo compartirla y hasta cuando sin tener que pedir autorización a una entidad central.
Backend abierto, público y componible: En la web3, aporta al estado del arte los Whitepaper, esto permite comprender el funcionamiento de las blockchain existentes, así poder ser parte como nodo en la red y así poder crear aplicaciones descentralizadas
Resistente a la censura: No existe una entidad central que pueda censurar dentro de la red.

B. ¿Qué compone el stack sugerido por Óscar para la creación de interfaces en la Web3?

Aplicación Web:
1. JavaScript
2. NextJS 12
Lenguaje de Programación
1. Solidity
Blockchain:
1. Ethereum
2. Polygon
Kit de desarrollo multiplataforma
1. FireBase
Protocolo P2P
1. IPFS
Protocolo
1. JSON-RPC
Deploy
1. Vercel

C. React Ethereum Challenge

Repositorio de la solución

Leandro Gavidia Santamaria

Hace 4 años

Yo les adjunto mi solución a las 3 actividades en un repositorio en GitHub.

Gustavo César Ramírez Bautista

Hace 4 años

Web3 characteristics:

One of the primal characteristics of Web3 is decentralization, among other ones, i.e. developers build applications that either run on blockchains, decentralized networks of many peer-to-peer nodes, or a combination of the two forms.

The common term to refer to an app built on top of Web3 is “Dapp”.

In addition to decentralization we can list a few other characteristics:

Distributed, robust, and reliable infrastructure.

As I can see we refer to an infrastructure with mentioned characteristics when we can build without concerns about the owner of the data because all the data is shared on every node that participates in the web3 network protocol.

When we have a network of nodes across the world, with a consensus protocol and every actor of the environment has an incentive to grow the network then we can stay confident in the infrastructure in which we participate.
Ownership (of data, content, and platform).

There is no more one and only one owner of the data, content, or platform, all of the actors of the network can agree on the path/decision to make about the data, content, or platform.
Native digital payments.

The concept of a token within Web3 can lead us to a new completely borderless and frictionless world of payments and transactions.

Crypto wallets like MetaMask and Torus enable you to integrate easy, anonymous, and secure international payments and transactions into Web3 applications.
Self-sovereign identity.

The final user is the owner of its own identity information and does not belong to a third party entity, not Facebook, Google, Microsoft, or other great inc have ownership of the identity data of the user. In the same way, the user chooses with which apps to share or set public information.

So many benefits we can accomplish with this approach but certainly the most important for me is that my data is mine, not anyone else.
Open, public, composable back ends.

In the search for providing the highest quality, the developments must be open, public, and composable. The incentives for the developers are there, and the network as a whole can constrain the possibility of a leak, but the developers must warranty the correct implementation of the security protocols, best practices, and iteration over its own errors.

Oscar Barajas's Web3 stack

Javascript like front-end programming language
Next.js like Javascript framework
Ethereum and polygon
Firebase for auth web2 protocol
IPFS for data storage
JSON-RPC for JSON over web3
Vercel for infra topics
Solidity

React Ethereum Challenge

gusram01 challenge repo

Rafael Livise Larico

Hace 4 años

Tarea 2:

JS - La conexcion con web2 y base para interactura con el usuario.
NEXTJS 12 - React con esteroides - framework frontend y también para tener un buen SEO.
Ethereum - Blockchain con la que interactuaremos.
Poligon - Blockchain de L2 para solucionar problemas que puede dar Ethereum.
Firebase - Mantenimineto de autenticación y soporte.
IPFS - Almacenamiento de archivos.
JSON-RPC - Comunición con la blockchain.
Vercel - para poder desplegar las aplicaciones de manera sencilla y escalable.
Solidity - Lenguage de programancion para contratos inteligentes.

Rafael Livise Larico

Hace 4 años

Tarea 1:

Infraestructura dsitribuida, trust-less y robusta
- Trust-less se refiere que la confianza del usuario es dada gracias codigo mas que a la organizacion o nombre que lo represente.
Propiedad de los datos, contenido y plataformas son del usuario- cualquier accion sobre ellas deber aprovado por todo los usuarios.
Pagos digitales nativo - tokens - puede tener diferente funciones: gobernanza, transaccion, insentivos, decisión, etc
Identidad soberana - la dentidad creada en linea de usuario es completamente suyo, por lo que si el usuario quiere desaperecer de la aplicacion lo puiede hacer sin pedir permiso a nadie
Backend abierto, publico y disponible
- Abierto todo pueden ver el codigo que lo compone
- publico cualquiera puede participar
- Siempre debe tener un punto de acceso (no puede ser censurado)

Graduación

Desarrollo de Proyectos Blockchain en Latinoamérica

Introducción al Ethereum Developer Program

Desarrollo Full Stack Blockchain: Fundamentos y Herramientas Esenciales

Programa de Desarrollo Ethereum: Construcción en Blockchain

Conceptos Básicos de Web3 y Gestión del Tiempo

Desarrollo Blockchain con Ethereum: Programa de Capacitación Completo

Semana 1: Importancia del Manejo de Memoria

Manejo de Memoria Web2 a Web3 y Optimización de Recursos

Manejo de Memoria en Sistemas de Ascensores

Estructura de Datos Trie en Ethereum: Funciones y Aplicaciones

Semana 2: Web3-react

Desarrollo de Aplicaciones Web3 con React y Blockchain Basics

Creación de Interfaces Web3 con React y Ethereum

Desarrollo de Aplicaciones Descentralizadas en Web3

Desarrollo de dApps en Ethereum con Web3-react y React

Semana 3: Ethereum Virtual Machine y Criptografía

Ethereum Virtual Machine: Fundamentos y Funcionamiento

Criptografía y Seguridad en Ethereum Virtual Machine

Ethereum Virtual Machine para Desarrolladores Blockchain

Semana 4: Creando tu primer Smart Contract

Desarrollo y despliegue de contratos inteligentes con Solidity

Desarrollo de Smart Contracts con Solidity y Pokémon

Semana 5: Solidity

Programación en Solidity: Crea una Lotería Descentralizada

Superando la primera etapa del Ethereum Developer Program

Creación de NFTs dinámicos con Solidity y Chainlink

Semana 6: Tokens y Tokenización

Tokenización y Creación de Aplicaciones Descentralizadas

Semana 7: Testing Tools y Despliegue

Testing y Despliegue de Contratos en Blockchain

Testing y Despliegue de Aplicaciones Web3 con Foundry y OpenZeppelin

Semana 9: Auditoría y Seguridad de Smart Contracts

Auditoría de Seguridad en Blockchain: Conceptos y Herramientas Básicas

Auditorías de Seguridad en Contratos Blockchain

Semana 10: Integraciones en Web3: Web3.js vs. Ether.js

Integración de librerías en contratos inteligentes Ethereum

Semana 11: Monetización para Blockchain Developers

Monetización para Desarrolladores Web3: Estrategias y Oportunidades

Recursos Adicionales

Seguridad en Contratos Inteligentes: Fundamentos y Mejores Prácticas

Diferencias entre `memory` y `storage` en Solidity

Creación de Interfaces Web3 con React y Ethereum