React en la Blockchain - la Guía de Inicio que Faltaba

¡Hola a todos, estoy muy emocionado de estar aquí en la Cumbre de React. Hoy hablaré sobre React en la blockchain, y llamo a esta charla la guía que falta para comenzar porque hay mucho material disperso en la web, así que intentaré combinar todo en un solo lugar que te brinde una especie de referencia si quieres comenzar a desarrollar en la blockchain utilizando Solidity y React.

Mi nombre es Vladimir Novik, soy dueño de Vladimir Novik Labs, consultor, arquitecto social, autor, emprendedor. Hago consultoría en varios campos, así que si tienes algo interesante, contáctame o simplemente quieres charlar, contáctame en mi sitio web o en mi Twitter. También soy arquitecto líder en EventLoop, y en EventLoop estamos creando una experiencia de conferencia en línea robusta, eficiente y con muchas funciones, así que puedes visitar nuestro sitio web en eventloop.up o saludar en Twitter.

Así que hablemos de la blockchain. Si busco blockchain en Wikipedia, obtengo este artículo que habla sobre una blockchain siendo una lista creciente de registros llamados bloques, y así sucesivamente. Básicamente habla de árboles de Merkle, criptografía, transacciones y bloques, ¿verdad? Entonces, árboles de Merkle, también llamados árboles hash de Boehner y en criptografía informática, transacciones y bloques, ¿verdad? Entonces, ¿qué es una blockchain? En cierto sentido, es una red, bueno, no en cierto sentido, es una red de nodos. Tienes una dirección que también se llama billetera y te conectas a un solo nodo en la red y todos estos nodos están interconectados.

Blockchain también es una especie de almacenamiento, un almacenamiento distribuido. Entonces puedes pensar en la blockchain como una base de datos en cierto sentido porque almacena información. Está compuesta por transacciones y cualquier cambio es básicamente un registro inmutable. Las transacciones se agrupan en paquetes llamados bloques y todos los bloques se agrupan y forman un libro mayor público. Básicamente significa que es un estado actual de la blockchain en la historia. Combinado con todas las transacciones. Por lo tanto, el estado se deriva de toda la historia de la blockchain.

Entonces también es una computadora. Algunas blockchains admiten formas de ejecutar programas y eso es lo que haremos hoy. Aprenderemos cómo usar contratos inteligentes. Cada nodo en la blockchain es una computadora. Un nodo puede ejecutar cálculos. Hoy hablaremos sobre Ethereum. Ethereum es una blockchain de propósito general que te permite ejecutar tus propios programas. Para usarlo, necesitas tener una cuenta. La cuenta tiene una clave pública y una clave privada. Puedes obtener tu clave pública a partir de la clave privada, pero no puedes hacer lo contrario. El nombre de la clave privada es bastante descriptivo. No puedes compartirlo con nadie. La clave pública es, en cierto sentido, tu nombre de usuario. Puedes tratarlo como nombre de usuario y contraseña.

Si tienes una cuenta y quieres interactuar con la blockchain, básicamente cada nodo en la blockchain tiene un cliente EVM, un cliente de máquina virtual Ethereum. Tiene una copia local de la blockchain, es decir, el estado de la blockchain. Hay múltiples nodos, todos estos clientes EVM, y la blockchain se copia entre estos nodos.

Los nodos mineros deben verificar las transacciones que ingresan a la blockchain. Si quiero hacer algo en la blockchain, llamar a un método en un contrato inteligente o realizar algún cambio en el estado de la blockchain, básicamente necesito enviar una transacción. Ahora, cuando envío una transacción, me cuesta algo de Ethereum. Se llama Gwaii. Es como un lugar decimal de Ethereum. También se llama gas. Hablaremos de eso en un momento.

Envías una transacción y todos los nodos deben verificar la transacción. Necesitan resolver acertijos criptográficos, en cierto sentido. Cuando verifican la transacción, la transacción se escribe en la blockchain y se copia entre todos los nodos. La validación de la transacción se llama mecanismo de consenso. También se llama prueba de trabajo, este tipo de mecanismo que describí. Se llama prueba de trabajo. Todos los nodos deben comunicarse entre sí y deben llegar a un consenso sobre la transacción. Si no llegan a un consenso, la transacción se deshace, básicamente se reconstruye.

¿Cómo funciona la minería? Envías transacciones, pagas en GES. Es una pequeña tarifa. Transacción enviada. Los nodos mineros intentan adivinar los acertijos criptográficos y los nodos que adivinan estos acertijos reciben una recompensa por la prueba de trabajo. Luego, la transacción se considera completada. Todo se hace con hashes en la blockchain. Veamos la transacción, por ejemplo. Tengo la cuenta de prueba aquí y puedo copiar mi cuenta, que es un hash, y puedo ir a la cuenta dos y decir, ok, quiero enviar un Ether, pagando algún tipo de tarifa, con un número abstracto, como el precio del gas, digamos 10, y el límite de gas es de $21,000. Pagaré 21 Gwei. Luego confirmo y veré que la transacción está pendiente, lo que significa que no ha alcanzado un consenso. Como puedes ver, ha alcanzado un consenso.

Las transacciones se aprueban. Fue muy rápido porque está en la blockchain local. Y eso es todo. Entonces, la criptografía, todo lo que se hace en la blockchain, tiene que ver con hashes, tenemos el contenido con diferentes tamaños, se transfiere una función criptográfica y se obtiene un hash. Y como puedes ver, el hash tiene el mismo tamaño.

Entonces, cada vez que envías una transacción, las transacciones se agrupan y se les aplica un hash, y luego los hashes se vuelven a hashear, y luego estos hashes se vuelven a hashear, y eso es lo que se llama árbol de Merkle. Entonces, básicamente, estos estarán en el bloque. Por lo tanto, varias transacciones se agruparán y se combinarán en el bloque. Y así es como se verá. Entonces tenemos el bloque 11, digamos. Y este bloque tiene un árbol de Merkle de transacciones. Por lo tanto, tiene un hash de hashes de transacciones, que también son hashes. Y luego lo que sucede aquí es que todo este bloque, este es el encabezado del bloque, todo este bloque se hashea y existe en el encabezado del siguiente bloque. Y por eso tenemos la blockchain, por eso es una cadena, ¿verdad? Y por eso es seguro, porque si quiero cambiar y maliciosamente ir y cambiar algo en el historial, estos bloques serán inválidos. Como necesito volver a calcular toda la blockchain, lo cual no es realmente posible en términos computacionales. Entonces, ¿cómo funciona? Se solicita una transacción, se crean bloques, los nodos validan la transacción, luego se agrega el bloque a la blockchain, los nodos reciben una recompensa por la prueba de trabajo y la transacción se completa. Ya discutimos eso anteriormente. Así que básicamente es lo mismo, solo agregué el bloque aquí.

Entonces, ¿qué es el gas? Hemos visto cómo pago el gas. Cada vez que enviamos una transacción en la blockchain, necesitamos pagar un gas, que es una tarifa que se entregará al minero, y básicamente leer de la blockchain no costará nada, pero escribir en una blockchain costará porque cambiará el estado de la blockchain, requerirá recursos computacionales. Entonces, cuanto menos gas pagues, más tiempo tomará la transacción. Más tiempo tomará verificar la transacción, básicamente, para alcanzar la prueba de trabajo.

Entonces, ¿qué son las aplicaciones descentralizadas? Las aplicaciones descentralizadas utilizan el navegador o cualquier cliente que desees, en nuestro caso utilizamos el navegador. La interfaz Web3 en el front-end y luego nos conectamos básicamente a la blockchain. Esto debería estar aquí, en realidad. Lo siento por eso. Entonces, estas son aplicaciones descentralizadas y a veces pueden ser híbridas cuando tenemos un back-end o una cloud, y luego interactuamos con la blockchain desde el servidor y tal vez desde el cliente. Entonces, los contratos inteligentes. ¿Qué son los contratos inteligentes? Hablamos de que Ethereum puede ejecutar contratos inteligentes, ¿verdad? Básicamente, es un programa de blockchain que está accesible para cualquier persona en la red. Y se ven así.

Quiero decir, no se ven físicamente así, pero se ejecutan en cada nodo. Así que recuerda, me conecto al nodo, realmente puedo acceder, puedo obtener la dirección del contrato inteligente y puedo ejecutar métodos en el contrato inteligente. Para escribir contratos inteligentes, utilizaremos Solidity. Es un lenguaje que se parece bastante a JavaScript, y utilizaremos el IDE web Remix para trabajar con Solidity. Lo tenía en algún lugar aquí. Sí, solo ábrelo así. De acuerdo, lo tengo aquí. Este es el IDE de remix. Y tengo un ejemplo de contrato que, como puedes ver, se parece mucho a JavaScript. Solo tiene diferentes modificadores para los tipos de diapositivas. Y puedo elegir un entorno. Puedo elegir entre un proveedor web3 inyectado, que en mi caso es Metamask. O puedo simplemente usar JavaScript VM, básicamente su propia blockchain para el IDE de remix, lo cual es agradable. No necesito preocuparme por ninguna extensión ni nada. Puedo jugar con Solidity. Así que te animo, después de esta charla, a que vayas y lo pruebes.

Tengo este contrato y quiero implementarlo. Así que implemento el contrato y ahora puedes ver que el valor predeterminado en el constructor es mi valor. Si lo obtengo, sí, creo que porque ya lo tenía. Sí, eliminemos el contrato, impleméntalo de nuevo, puedo obtener el valor y el valor será mi valor. Ahora, si quiero cambiar eso, verás que el valor ha cambiado, y puedo interactuar, así es como interactúo con el contrato inteligente. Ahora puedes usar contratos inteligentes para construir tus propios tokens, lo cual es bastante bueno porque no necesitas crear tu propia blockchain. Puedes usar la especificación ERC20, que básicamente es una especificación que menciona una lista de funciones que deben estar en tu contrato inteligente. Eso creará un token que puedes intercambiar y utilizar. De hecho, muchos tokens son tokens ERC20. Sí, esa es la especificación. Estas son las funciones. Después de esta charla, tendrás un enlace en el chat con el código de cómo puedes crear ese token tú mismo. Y para interactuar con contratos inteligentes, utilizas Web3. Y la interfaz de Web3 se utiliza para conectarse a un solo nodo de Ethereum.

Ahora, para conectarse al nodo, puedes ejecutarlo localmente o utilizar algún tipo de proveedor de nodos como Ethereum. En nuestro caso, utilizaremos Ethereum. Lo utilicé con MetaMask, aquí utilicé Ganesh, que es nuestro entorno de desarrollo que configuraremos. Y estoy hablando con el cliente de Ethereum utilizando JSON RPC. Y Web3 JS proporciona una forma en JavaScript de interactuar con la cadena de bloques básicamente. Así se ve. Solo requiero Web3, coloco la URL del nodo Enfura y tendrás un enlace para eso. Así que puedes conectarte a la red principal de Ethereum básicamente. Pero para propósitos de prueba, porque todos los costos de transacción son altos, que básicamente es Ethereum, que básicamente es Ether, que básicamente es dinero, al menos cripto, necesitarás tener algún tipo de cuentas de prueba aquí o en la cadena de bloques local o diferentes redes de prueba.

Para configurar el entorno de desarrollo, necesitamos Node.js, Python y una cadena de bloques personal para realizar pruebas. Aquí tienes un ejemplo de cómo se ve. Si deseas una mayor interactividad, puedes usar Ganesh. Ganesh viene con 10 cuentas que puedes utilizar.

También necesitarás configurar el marco de Truffle. En esta charla, utilizaremos el marco de Truffle. Para instalar Truffle, utiliza el comando 'npm install truffle-g'. Es un marco para el desarrollo de contratos pequeños con Solidity.

También necesitarás MetaMask. Seguramente ya lo has visto antes. Es una extensión que se puede conectar a diferentes redes de prueba. Para comenzar con la aplicación React, simplemente crea una aplicación React. Personalmente, me gusta utilizar TypeScript. Crea un proyecto Truffle con el comando 'Truffle init'. Configura tu entorno local para el portal 7.5.4.5. Asegúrate de que todo funcione correctamente ejecutando 'Truffle test'. Después de ejecutarlo, todo debería funcionar correctamente. Necesitarás cambiar la versión del compilador de una versión anterior a una más reciente, lo cual puedes hacer en la configuración de Truffle y en los propios contratos inteligentes.

Este es el contrato predeterminado que se genera con el comando 'Truffle init'. Me gusta mover los archivos generados a un directorio diferente, como 'contratos de origen' o 'ABI de origen', para poder acceder a ellos desde JavaScript y React. Para compilar los contratos, ejecuta 'Truffle compile'. Esto compilará todo. Para las pruebas, utilizaremos Chai y Mocha. No hay nada en particular acerca de las pruebas, simplemente instala todas estas dependencias. Aquí hay algo de matemáticas involucradas con números grandes, ya que la cadena de bloques utiliza números grandes que JavaScript no tiene. Importo una biblioteca para manejar esto. También utilizamos Solidity coverage para el enlace y la interfaz Web3 que discutimos. Para habilitar la escritura, utilizo type-chains, también conocido como type-chain. Para tener tipos, necesito agregar 'tsnode' a mi configuración de Truffle e instalar todas estas dependencias.

Luego, hay muchas cosas que hacer en realidad. Luego necesitas configurar tu truffle.json, así. Con el truffle.json, ts.config.truffle.json no tiene que ser truffle. Puede ser diferente, pero como la aplicación React anula la configuración predeterminada de ts.config, básicamente necesito configurar la mía personalizada. También quiero incluir los archivos ts en el ts.config.

Luego, cambio el nombre de mi carpeta Grations a migration-ts, cambio migration a typescript. Hay varios scripts auxiliares que necesito ejecutar para generar estos tipos en realidad. Este es un ejemplo de contrato inteligente y cómo se ve. Para las pruebas, mencioné que no hay nada en particular, excepto tal vez esto. Altifax require token que realmente trae el contrato inteligente adentro. Y luego, puedo probar diferentes métodos de él. Así que creo el token. Y luego básicamente llamo al nombre para obtener un nombre de token y así sucesivamente. Y aquí, la estructura de esta matriz en el contrato contribuye a estas cuentas de pruebas en Ganache. Así que desplegando.

Entonces, ¿cómo despliego? Para eso, tengo archivos de migración. Hay un archivo de migración inicial que está escrito. Y si quiero desplegar mis contratos inteligentes, necesito escribir mi propio archivo de migración. Y este es el ejemplo de archivo de migración, cómo se ve. Tengo el token requerido que traerá todo como mi contrato inteligente. Y luego usaría deploy o deploy para desplegarlo en la blockchain. Para desplegar en realidad, usaré migrate. Y bajo el capó, simplemente compilará todos mis transmiles o todas mis migraciones a JavaScript y luego ejecutará truffle migrate. Entonces, ¿cómo te conectas a las cosas en el frontend? En el frontend, podemos usar Web 3. Si está inyectado en el navegador usando MetaMask, simplemente podemos usar ethereum.enable. Básicamente, necesitas poner algún tipo de verificación aquí. Podemos obtener redes, obtener cuentas. Así es como se verá el modelo si intentas inyectar cosas. Sí, tenemos la red, tenemos un montón de cuentas en la matriz aquí, y creo que esto es el saldo. También está ether.js, que es otra biblioteca que podemos usar.

Es una sintaxis un poco diferente, pero la idea es la misma. Simplemente estamos obteniendo el Web3 inyectado y utilizando eso. Para trabajar con contratos, necesitamos crear una instancia de contrato utilizando Web3. Podemos llamar a diferentes métodos en estos contratos. Necesitamos proporcionar la dirección real. Podemos obtener esta dirección del token, por lo tanto, de la API. Esa es la razón por la que necesitamos APIs.

Ahora, eso es para ether, por ejemplo, EtherJS. Una sintaxis un poco diferente, pero la idea es la misma. Otra forma de usar Web3 es utilizando el modelo Web3. Esto te permite utilizar diferentes proveedores de Web3. En ese caso, por ejemplo, tengo WalletConnect. Además del inyectado que es MetaMask. Y puedo cargarlo. Puedo cerrar sesión, borrar la caché del proveedor. Así es como se verá. Y básicamente, sí, si inicio sesión con MetaMask, así es como se verá. Iniciará sesión. Lo que puedo hacer, puedo cerrar sesión. Puedo ir a MetaMask y decir, okay, estos son los sitios conectados. Okay, lo siento, esto no estaba conectado. Creo que sí, esto está conectado. Desconectemos este. Y al iniciar sesión en MetaMask, aparecerá esto. Y necesito seleccionar qué cuenta está conectada. Así que he creado el gancho del modelo Use Web3 para tu comodidad. Así que simplemente puedes echarle un vistazo, jugar con él, usarlo para cargar el modelo Web3, cerrar sesión en el proveedor. Y así sucesivamente. E interactuar con él, básicamente, cada vez que cargas todo, simplemente puedo obtener los datos del token. Y has visto este código, es igual que mucho código de ether.

Básicamente obtengo la instancia del token, me conecto a ella.

Y luego llamo a métodos en el token o en el contrato inteligente.

En este caso, es en el token, pero básicamente es en el contrato inteligente.

El siguiente paso después de esta charla es verificar la alternativa a Truffle, que es Hardhat.

Así que ya es demasiado para abarcar en esta charla.

Luego puedes verificar GraphQL para blockchain, que básicamente es la capacidad de consultar el blockchain público con GraphQL.

Flick es para implementar en IPFS.

IPFS y Swarm son blockchains diferentes en los que también puedes almacenar cosas, no solo en Ethereum.

Así que sí, espero que haya ayudado a comprender un poco cómo funciona la blockchain.

Sé que hay muchas cosas que cubrir, pero publicaré enlaces en el chat con muchos recursos, y puedes ver mis videos instructivos en Anka.io y en mi sitio web.

Puedes contactarme, ver videos en mi canal de YouTube y comunicarte en Twitter para saludar.

Gracias y disfruta del resto de la conferencia. Adiós. ¡Increíble! Bueno, esa fue una charla realmente genial, nuevamente, sobre un tema en el que soy completamente nuevo. Veamos los resultados de la encuesta. La respuesta número uno fue: no sé por dónde empezar, lo cual tiene mucho sentido. Pero hay muchas cosas sobre diferentes materiales de aprendizaje que no están necesariamente disponibles. Estábamos hablando entre bastidores sobre cómo el ecosistema es descentralizado, por lo que tal vez la documentación también esté descentralizada.

Bueno, tenemos algunas preguntas increíbles de la audiencia. Así que vamos a sumergirnos en ellas. La primera es de CRS1138. ¿Soy el único que piensa que el mundo blockchain es un universo en sí mismo con una curva de aprendizaje muy pronunciada y un alto nivel de control de entrada? Todavía no tengo la respuesta a por qué. Es una buena pregunta, de hecho. Y sí, siento lo mismo. La blockchain es como un universo en sí mismo. De hecho, esa es la razón principal por la que hice esta charla, para ayudar a las personas a adentrarse en este universo, ¿verdad? Así que la pregunta es por qué y qué hace y qué ventaja me brinda.

Estamos hablando de descentralización aquí. Por ejemplo, en eventos recientes de diferentes redes sociales, tienen diferentes políticas sobre varias cosas, ¿verdad? Tener un sistema que básicamente controla cómo interactúas o controla los servidores y cosas así, eso es básicamente un mundo centralizado, ¿verdad? Cuando hablamos de aplicaciones descentralizadas, nos referimos a aplicaciones que no pueden tener tiempo de inactividad porque tienes nodos de Ethereum, ¿verdad? Tienes diferentes nodos y tienen una copia del blockchain. Tenemos el estado del blockchain, básicamente, el libro mayor público, que es mucho más difícil de hackear. Aunque las criptomonedas han sido robadas antes y es mucho más difícil hacerlo.

Y también como transparencia, porque si colocas un contrato inteligente en la blockchain, básicamente cualquiera puede ver el código y examinar este contrato inteligente, ¿verdad? Así que ahora hay más transparencia y como tener una red descentralizada que se comparte en el mundo, ¿verdad?

En cuanto a los casos de uso, en este momento, la mayoría de los casos de uso son como los llamados DeFi, que es la financiación descentralizada. Por lo tanto, muchas cosas en el lado financiero, principalmente porque hemos visto en la demo que he mostrado, las transacciones en la blockchain, tienen un costo de gas. Por lo tanto, hay algo monetario cuando interactúas con la blockchain. Y sí, por cierto, alguien escribió en el chat que tienen 95 Ethereum. Tú también puedes tenerlo porque es una red de prueba y básicamente cualquiera puede ejecutar una blockchain local o obtener una red de prueba y obtener Ethereum ficticio para jugar y desarrollar contratos inteligentes. Increíble, increíble. Y una pregunta de Klobs. ¿Tienes un artículo o grabación de cómo replicar tu demo desde cero? Oh, eso es realmente... Esta charla, puedes considerarla como un punto de partida para diferentes recursos que publicaré casi cada dos semanas, como comenzar desde... El artículo sobre esta charla en particular se publicará la próxima semana y habrá contenido en video. Haré transmisiones en vivo construyendo cosas. Obviamente, incluir todo este contenido en una charla de 20 minutos fue un poco difícil y puede parecer que estoy pasando rápidamente por el material. Es solo para dar una idea de la simplicidad similar de las cosas desde cero, pero sí, profundizaremos en más detalles más adelante, en las próximas semanas, meses, etc. Y para acceder a este contenido, todo el contenido será gratuito. Estará en mi canal de YouTube, estará en Egghead para la community, no será solo para miembros de pago y las publicaciones en el blog también serán gratuitas para todos. Increíble, increíble. Otra pregunta de Vasilis Shchalkop. ¿Cuándo aprendiste sobre la blockchain y por qué lo aprendiste? Bueno, sobre la blockchain, aprendí cuando Bitcoin estaba, cuando la gente hablaba de Bitcoin. Ahora, desearía haber minado Bitcoin en ese entonces.

Claro, como todos probablemente deseamos eso pero si te refieres a aprender sobre el desarrollo de blockchain, Ethereum en general. Aprendí sobre eso hace algún tiempo, creo que hace unos tres años, algo así. Pero comencé a involucrarme más seriamente el año pasado. Siempre me ha fascinado el tema o tal vez a finales de 20. Siempre me ha fascinado el tema y pensé, bueno, comencemos a involucrarnos y comencé a jugar con diferentes, ya sabes, proyectos y diferentes tipos de configuraciones. Y sí, por eso básicamente sugerí esta charla para el React Summit, para tener más explicaciones sobre cómo comenzar.

Genial. Genial. Y luego otra pregunta, oh, esta es una buena y rápida. ¿Tienes algún nombre de usuario o enlaces que las personas puedan seguir para ver ese contenido próximo? Sí, claro. Están en mis diapositivas, de hecho, pero sí, los compartiré en el chat después de terminar las preguntas y respuestas. Así que estarán en el chat de preguntas y respuestas del summit. No lo haré ahora mismo, pero sí. Genial. Genial. Entonces podrán hacer clic y acceder. Sí. Increíble.

Y luego otra pregunta de Chris Rojas. ¿Qué sitios específicos recomiendas para obtener recursos y aprender sobre blockchain? ¿Cuáles específicamente? Yo comenzaría por comprender cómo funciona blockchain en términos conceptuales, porque hay algo que entender conceptualmente, cómo se estructuran los bloques, más como académico, diría yo. Comprender por qué es tan seguro, por qué es más difícil hackear cosas, y qué es el libro mayor público. Creo que eso es algo en lo que me enfocaría. Aunque puedes comenzar sin entender eso, simplemente configurando HardHat o Truffle y comenzando a codificar contratos inteligentes. Pero creo que es importante comprender lo básico. Y luego, al comenzar a desarrollar, tener tu propia blockchain local en funcionamiento, diría que ese es el segundo paso porque luego puedes jugar con ella, transferir cosas de una cuenta, entender cómo funcionan las transacciones, y así sucesivamente. Y luego puedes comenzar a crear dApps básicas sin tener que pagar nada por las transacciones porque estarás utilizando frameworks de prueba, redes de prueba. Genial. Eso es importante. Bueno, muchas gracias. Aprendí mucho de esta charla.