Comprender los fundamentos de la tecnología NFT y su aplicación en fortalecer la seguridad web. A través de demostraciones prácticas y ejercicios prácticos, los asistentes aprenderán cómo integrar sin problemas mecanismos de control de acceso basados en NFT en sus proyectos de desarrollo front-end.
This workshop has been presented at React Summit 2024, check out the latest edition of this React Conference.
Hi Solange, I'm Enoch Promise. A Blockchain developer. Thanks for sharing.
Video Summary and Transcription
La masterclass de hoy explora el concepto de desbloquear la propiedad digital a través de la tecnología blockchain. Los NFTs son activos digitales únicos que proporcionan transparencia, inmutabilidad y confianza. La masterclass cubre temas como la configuración de billeteras, la seguridad de las billeteras, la obtención de tokens de prueba, la creación de NFTs, la implementación de contratos, la construcción de aplicaciones front-end, la concesión de acceso y las posibilidades de los NFTs. También se discute la importancia de la validación de transacciones y la disponibilidad de blockchains alternativos.
1. Introducción a Desbloquear la Propiedad Digital
Short description:
Hoy discutiremos cómo desbloquear la propiedad digital a través de la tecnología blockchain. Crearemos juntos una aplicación completa, paso a paso. Soy Solange Gaitos, una ingeniera de relaciones con desarrolladores en Chainlink Labs, una empresa enfocada en conectar tecnologías blockchain y no blockchain. Cubriremos NFTs, acceso digital, casos de uso y la conexión de contenido inteligente con el front-end. ¡Vamos a explorar las posibilidades!
Bienvenidos a todos. Hoy hablaremos sobre cómo desbloquear la propiedad digital. ¿Y qué significa esto? Estamos hablando de cómo crear cuentas utilizando la tecnología blockchain. Y por cierto, preparen sus computadoras porque aquí crearemos una aplicación completa. Y estoy segura de que pueden hacerlo conmigo. Lo haremos paso a paso, despacio, y garantizaré que sigan todos los pasos conmigo para asegurarnos de que puedan hacerlo. Permítanme presentarme primero. Pueden llamarme Sol, pero mi nombre es Solange Gaitos y soy una ingeniera de relaciones con desarrolladores en Chainlink Labs. Chainlink Labs es una empresa enfocada en conectar tecnologías blockchain con todo lo que no está en una blockchain. Y por cierto, hoy hablaremos un poco más sobre la blockchain. Estos son mis contactos, y soy de Brasil, pero ahora estoy en Ámsterdam porque estoy aquí. Aquí tienen el Talk en el React Summit y también el JS Nation. Así que estoy lista aquí para conocer a algunos de ustedes si también asistieron al evento. Así que comencemos con el contenido real. Esta es una descripción general de lo que veremos hoy. Tenemos dos horas, y podemos crear una aplicación increíble en estas dos horas y hacerlo juntos. Comenzaremos hablando sobre qué son los NFTs, el acceso digital, algunos casos de uso relacionados con este entorno de desarrollo. Aquí estamos creando un contenido inteligente. Wow. Y luego conectaremos este contenido inteligente con el front-end que estamos construyendo. Y
2. Colaboración e Introducción a los NFTs
Short description:
Colaboremos e hagamos una presentación. Luego, exploraremos los NFTs y su base en la tecnología blockchain. Los NFTs son activos digitales únicos que brindan inmutabilidad y confianza en un entorno transparente. La blockchain es como una cadena de bloques, donde las transacciones son a prueba de manipulaciones y están firmadas por una cuenta. El acceso basado en NFT requiere verificación de identidad a través de la propiedad de una billetera y la firma de mensajes con claves públicas y privadas. La blockchain es descentralizada, lo que garantiza que no esté controlada por una sola entidad.
¿Qué puedes hacer con esto? ¿Cuál puede ser el futuro? Veamos. Así que me gustaría invitarte ahora a ir a este enlace. Estoy agregando este enlace para ti ahora en el chat. Y esta es una página colaborativa. Todos pueden escribir juntos aquí. De la misma manera, pueden borrar todo, así que tengan cuidado. Y mi primera pregunta para ustedes aquí es, ¿cómo se llaman? Yo soy Sol, y vengo de Sao Paulo, Brasil. ¿Y ustedes? Me gustaría saber un poco más sobre ustedes. Hola, Mariano. Bienvenido, Mariano. Qué bueno verte aquí. Wow, eres de España. Sí. Valencia. Me gustaría conocer Valencia. Aún no la conozco. Y tenemos a Mihi. No estoy seguro de cómo se pronuncia tu nombre. Eres de Estados Unidos. Increíble. Y Asanka de Sri Lanka. Wow. Y no sé cómo pronunciar tu nombre. Tuukk hizo esto desde Chipre. Hice mi maestría en Nicosia, en Nicosia, en Chipre. Y Nima, eres de Bélgica. Wow. ¿Estuviste también en tu lugar en julio, en otra conferencia? Y estoy muy emocionada de tenerlos a todos aquí conmigo. Y pueden ver que podemos escribir en la misma línea. Así que tengan cuidado con esto. Pero estamos juntos aquí. Y me equivoqué con algunos espacios aquí. Y casi hemos terminado para seguir adelante. Oh, tenemos a Oleg de Ucrania. Wow. Marco de Italia. Y Haro de India. Estuve en un capítulo increíble en India el año pasado también. Y Marios de Italia. Wow. Bienvenidos, todos. Estoy muy feliz, muy contenta de tenerlos aquí y preparados para crear una aplicación increíble conmigo. Así que sigamos adelante. Esta es nuestra base. Así que cada enlace que pueda abrir en mi computadora, lo compartiré aquí con ustedes. Cada code que pueda hacer, lo agregaré en este documento colaborativo, para que puedan hacerlo conmigo. Así que estamos juntos todo el tiempo. Volvamos a nuestra presentación. Un poco. Y primero que nada, ¿qué son los NFTs? Solíamos decir que un NFT es un activo digital. Pero este es un activo digital único y este activo se basa en blockchain. ¿Y qué significa basado en blockchain? ¿Cómo es esto? Estamos hablando de un tipo diferente de tecnología donde tenemos inmutabilidad y solemos decir que este es un entorno de confianza, especialmente porque cuando tienes una transacción, un registro de activos en una blockchain, no puedes cambiar esto si no tienes permisos, si no tienes el derecho de hacerlo. Y cuando hablamos de las muchas blockchains, estamos hablando de un entorno público, un entorno transparente. Entonces, blockchain nos brinda más transparencia y un lugar en el que podemos confiar un poco más. Podemos decir que blockchain es como una cadena de bloques. Y sí, tenemos bloques, tenemos las transacciones en los bloques, las transacciones pueden ser para crear NFTs, transferir NFTs, hacer lo que quieran con algún activo allí. Y cada transacción está firmada por una cuenta. Y de esta manera, esto es a prueba de manipulaciones. No podemos manipular este tipo de cuentas tampoco. Y esta es la base. Entonces, ¿cómo podemos usar blockchain y los NFTs para acceder, acceder a algo, acceder a una cuenta? Cuando hablamos de acceso de usuario tradicional, estamos hablando de un usuario y una contraseña. Pero cuando hablamos de acceso basado en NFT, estamos hablando de un acceso realizado mediante tu identidad en una billetera. Y debes firmar un mensaje o firmar que eres el propietario de esta billetera para tener este acceso. Cuando hablamos de firmar algo, estamos demostrando que somos los propietarios, estamos hablando de gestionar algunas claves públicas y privadas. Imagina que tienes una cuenta bancaria y solo tú conoces la contraseña. Es algo así. Pero esto es de esta manera porque está en blockchain. Otro punto relacionado con blockchain. Blockchain es descentralizada. Significa que no está controlada por una sola entidad.
3. Cuentas de Blockchain y Configuración de Billetera
Short description:
Blockchain proporciona cuentas descentralizadas, asegurando que ninguna entidad central pueda bloquearlas o comprometerlas. Usamos React, Next.js y el paquete VM para conectarnos a la blockchain. Solidity es el lenguaje para crear contratos inteligentes. Desplegamos en una cadena EVM compatible con Ethereum. Para comenzar, instala una billetera basada en web como MetaMask y asegúrate de tener Node.js y un editor de texto.
una entidad. Y de esta manera, podemos estar seguros de que tu cuenta no será bloqueada por una entidad central, por ejemplo. Y esta es la principal diferencia y una de las ventajas de tener cuentas en blockchain. Estamos en un entorno descentralizado y puedes estar seguro de que no seremos bloqueados. No seremos comprometidos por una entidad central. Y esto, tengo más para hablar sobre esto para ti, pero vayamos al code. Hagamos esto primero y luego podremos entender mejor lo que puedes hacer. Entonces esto es lo que estamos usando. React y Next.js para crear nuestra interfaz de usuario. Además, estamos instalando un paquete llamado VM para conectarnos a la blockchain. Estamos usando Solidity. Este es el lenguaje para crear contratos inteligentes. Y también lo estamos desplegando en una blockchain real y podemos decir que es una cadena EVM, una cadena de máquina virtual Ethereum, compatible con Ethereum. Y luego el propio contrato inteligente estará allí. Así que esto es una visión general de lo que estamos haciendo ahora. Para seguirme, esto es un libro de Git. Este es el primer punto que debo compartir contigo en nuestra clase. Así que tenemos todo el contenido aquí escrito por mí también. Y recuerda, si aún no estás aquí, únete a nuestra clase y menciona tu nombre, tu ciudad o país, y me gustaría estar contigo aquí. Y vamos. Primer paso. Debo comenzar con la parte de blockchain primero. Y debemos tener una billetera. Recuerda que hablamos de billeteras. Hay diferentes tipos de billeteras y estamos usando una billetera basada en web también. Es una extensión para mi navegador. Ahora estoy usando Chrome y estoy en una computadora con Windows. Así que ya sabes en qué me baso aquí. Y aquí estamos. Esta es la forma en que puedo instalar mi billetera y la acabo de desinstalar para hacer todo contigo desde cero. Vamos. Ve aquí. Recuerda, todo estará en la clase y también aquí en la parte de Hola Mundo. Tengo esto relacionado con MetaMask. Y recuerda que debemos usar, debemos tener Node.js y un editor de texto. Estoy usando VS Code. Vamos. Instalemos primero MetaMask. Vine aquí para la descarga. Estoy en Chrome. Así que hagamos clic en Chrome. Y instalemos MetaMask en Chrome. Haz clic en agregar a Chrome y agregar extensión. Espera un poco más. Casi terminado. Bien. Se está instalando. Y para mí es muy importante hacer esto contigo para asegurarme de que no iré tan rápido y tú no puedas seguirme. Quiero decir, hacer esto de una manera en la que puedas seguirme. Así que aquí estamos. Me encanta este zorro saliendo del camino. Es tan lindo. Así que aceptemos los términos de uso de MetaMask y crearemos una nueva billetera. Así que recuerda, crea una nueva billetera. Bien. Y acepta. Este es un punto importante para ti. Cuando tienes una cuenta bancaria y si pierdes tu contraseña, puedes llamar al banco y obtener una nueva contraseña, por ejemplo. Pero cuando hablamos de billeteras en blockchain, estamos hablando de tu propiedad. Así que eres responsable de tu billetera. Y no puedes perder tu contraseña. Ese es el punto. Nadie puede ayudarte si haces eso. Así que es muy importante asumir la responsabilidad y entender lo que estás haciendo. Y esto es lo que MetaMask está diciendo aquí, que no pueden ayudarte si, por ejemplo, pierdes tu billetera. Y también debes tener cuidado con cierta información. Así que acepto. Aquí estamos. Estoy creando una contraseña. Ahora estoy creando una contraseña fácil.
4. Asegurando tu Billetera
Short description:
Para asegurar tu billetera, nunca reveles las 12 palabras a nadie. Copia y guárdalas en un lugar seguro. Los tokens de prueba no tienen valor real, pero es esencial entender todo.
Y recuerda, MetaMask no puede ayudarme. No puede recuperar la contraseña más tarde. Y crea una nueva billetera. Este es un punto importante. Ahora aseguremos las billeteras. De acuerdo. ¿Cómo puedo hacer eso? La billetera en sí está hecha con criptografía. Así que tenemos y esta criptografía se basa en un conjunto de palabras. Tenemos 12 palabras. Y ahora necesito revelar estas palabras. No puedes hacer eso. Nunca, nunca reveles tus palabras a nadie. Y estoy haciendo esto ahora porque te estoy enseñando y espero que no obtengas mis tokens más tarde. Te estoy ayudando. Pero de todos modos, no los usaré. Voy a usarlos. Y voy a usar estos tokens. Estoy usando esta billetera más tarde exactamente porque lo estoy haciendo contigo y compartiendo mi billetera. Así que para asegurar la otra billetera, no puedes compartirla más tarde. De acuerdo. Así es como aprender a hacer eso. Aquí estamos. Así que déjame revelar mis 12 palabras y copiarlas. Haz lo mismo y no las compartas con nadie. De acuerdo. Y después de copiar esto, ve al siguiente y verifica si realmente las sabes copia y guárdalas en un lugar seguro para ti después. Pero ahora tenemos tokens de prueba en esta billetera. Esto significa que estos tokens no valen dinero real. Y está bien. Así es como estamos aprendiendo. Pero incluso de esta manera, es importante que entiendas todo lo relacionado con esto. Creo que es la forma de hacerlo. Sí, tengo razón. Ya sabes que mi billetera está creada. Increíble. Vamos al siguiente. Y no necesito hacer esto ahora. Puedes administrarlo, pero simplemente cierra esto, de acuerdo.
5. Compartiendo la Dirección de la Billetera y Obteniendo Tokens de Prueba
Short description:
Para compartir tu dirección de billetera, cópiala y dásela a otros. Obtener tokens de prueba es importante para publicar contenido inteligente. Utiliza el grifo de la masterclass con la contraseña proporcionada para obtener tokens de prueba.
Esto es, mira en la parte superior de mi pantalla, cuenta uno. Esta es mi billetera. Esta es la dirección de la billetera. Copiemos la dirección de la billetera y compartámosla con nuestros amigos. Esto es como la parte pública, tu cuenta. Si deseas recibir dinero, estás compartiendo tu número de cuenta con alguien más. Así que con esto, esta es la dirección de mi billetera que estoy copiando. Y luego la comparto contigo. Y puedo verificar si quiero recibir algo de ti, puedo recibirlo en esta billetera. Y tú también, si estás recibiendo algo, lo estás recibiendo en tu propia billetera. Así que comparte tu billetera conmigo. Y si acabas de llegar, esta es la mascota en la que estamos ahora. Increíble. Felicidades. ¿Qué pasó con tu cuenta? Estás ahí. Sé que estás ahí. Y esto, recuerda que debajo de la cuenta, uno, tengo la dirección. Y haces clic, la copio y luego puedo pegarla aquí. ¡Hey, felicidades a todos! Increíble. Estoy muy feliz de que estés haciendo esto conmigo. Estamos creando una aplicación increíble ahora. ¡Hey, Nikita, estamos aquí! El único enlace que debemos conocer es este. Ok. Esta es la pizarra en la que estamos ahora. Y te pedí que también añadieras tu nombre y tu país aquí. Y aquí estamos, estamos en Metamask. Acabamos de instalar nuestra billetera. Ok. Y en cada paso estarás aquí y podrás seguirnos. Aquí estamos, tenemos nuestra billetera ahora. Cierremos algo que no es tan útil ahora. Otro punto aquí, importante. Recuerda que te dije que estamos haciendo esto en una red de prueba. Una red de prueba es como una red principal blockchain, pero solo es para pruebas. Y no tiene dinero real, no tiene valor real allí. Y es un lugar seguro para nosotros entender y aprender, y no importa si haces algo mal, porque estás aprendiendo y eso es normal. Así que activemos la red de prueba aquí. Para activar la red de prueba, debo hacer esto en Metamask aquí en la esquina superior izquierda, donde tengo la red principal, voy a mostrar las redes de prueba.
6. Obteniendo Tokens de Prueba y Creando Contenido Inteligente
Short description:
Para obtener tokens de prueba, ve al grifo de la masterclass y usa la contraseña proporcionada. Envía una solicitud para recibir tokens de prueba. Crea un NFT, que es un activo digital único en una cadena de bloques, para controlar el acceso al contenido inteligente.
Mostrar redes de prueba. Lo habilité y luego estoy usando Sepoia. De acuerdo. Y aquí estamos. Nuevamente, en la esquina superior izquierda, ve aquí, muestra las redes de prueba y elige Sepoia, selecciona Sepoia. Y aquí estamos. Otro punto importante es que debemos tener tokens para publicar un contenido inteligente. Y puedo ayudarte con esto. Tengo una forma en la que puedes obtener algunos tokens de prueba y luego aprender juntos. ¿Cómo hacer eso? Vamos a un grifo. Entonces, ¿qué es un grifo? Un grifo es un lugar donde puedes obtener algunos tokens, tokens de prueba para aprender y desarrollar aplicaciones sin estar en un entorno real. Es un lugar seguro para nosotros. Si no estás haciendo esto en vivo conmigo, puedes usar el grifo de Chainlink para obtener los de Sepoia. Debes conectar tu billetera y luego hacer eso. Pero para hoy, tengo uno mejor para ti. Vamos a usar esto. Este es un grifo de la masterclass que uso solo para las masterclass. Y esta es la contraseña, no compartas esta contraseña fuera de esta masterclass, por favor. Y por cierto, solíamos actualizar esta contraseña. Así que esto está funcionando ahora. Ve a esto. Este es el grifo de la masterclass. Esta es la contraseña. Y aquí estamos. Estoy en la cadena de Sepoia y de la misma manera que pego mi dirección en el bloc de notas, pego mi dirección aquí. Así que obtengamos mi dirección nuevamente. Y ve al grifo, no a esto, al grifo de la masterclass y pégalo. Y bien, por ahora, no necesitamos un enlace. Solo estamos obteniendo un poco de él. Y envía una solicitud. ¿Qué está sucediendo ahora? Hay una transacción que está enviando 0.50 de prueba a mi cuenta, a mi billetera. Y recuerda que te dije antes, la blockchain tiene bloques con transacciones y podemos tener transacciones para transferir algunos activos. Y esto es lo que está sucediendo ahora. Si cierro esto y verifico mi billetera ahora, puedes ver que tengo 0.50. Veamos cómo estás. Es increíble tenerte haciendo esto. Si hay más personas haciéndolo, por favor agrega aquí también tu nombre o dirección. Esta es la forma en que puedo saber si me estás siguiendo o no, ¿de acuerdo? Estoy muy feliz de hacer esto contigo juntos. Y si viniste aquí y la contraseña ya no funciona, usa el grifo oficial. Debes tener una cuenta de GitHub aquí, así que tenemos más pasos. Por eso prefiero usar el grifo de la masterclass ahora. Si tienes este problema, no te preocupes porque a veces hacemos esto. Esta no es la única masterclass que está sucediendo ahora. Si solo actualizas esto, estarás bien. Puedes actualizar e intentarlo de nuevo. De acuerdo. Genial. Sigamos adelante. Creo que ahora estamos bien. Así que tengo una billetera. Tengo algunos tokens en mi billetera. Ahora estoy creando mi primer contenido inteligente. Después de eso, estaremos creando el frontend para este contenido inteligente. Por cierto, ¿qué es este contenido inteligente ahora? Volvamos aquí un poco, solo para entender qué estás haciendo ahora. Entonces, este es el contenido inteligente que estamos creando ahora. Es un NFT, como te dije antes, un NFT es un activo digital en una blockchain. Y los NFT tienen identificadores únicos. Esto significa que el NFT en una colección es único, y es único en todas las blockchains. Así que este es el propio NFT. Nos gustaría crear un acceso basado en el NFT. Entonces, si tienes el NFT, tienes el acceso. Si no lo tienes, no tienes este acceso. Y por cierto, cuando hablamos de NFTs, NFT significa token no fungible. ¿Y por qué esto es diferente? ¿Y por qué esto es diferente de un token fungible? Un token fungible es como un billete. Imagina un billete de 100 euros. Si cambias un billete por otro billete, tiene el mismo valor. Es exactamente el mismo. Pero cuando hablamos de cosas no fungibles, estamos hablando de cosas que son únicas. Entonces, si tengo un token que es único, dos tokens no tienen el mismo valor, incluso no funcionan de la misma manera. De acuerdo. Es fácil. Estamos usando NFTs que son únicos.
7. Creando un NFT con Remix y Solidity
Short description:
Para crear un NFT, utiliza el entorno en línea de Remix. Conecta tu billetera y crea un nuevo archivo llamado openaccess.sol. Importa la biblioteca ERC-721 para NFTs y define la versión de Solidity. Ten cuidado al copiar y pegar código. Habilita la compilación automática para asegurarte de que tu contrato esté completo. Utiliza estándares como ERC-721 para una mejor comunicación en la creación de tokens.
Y después del NFT estamos integrando usando React. Esta será la segunda parte. OK. Así que creemos el NFT. Para crear mi NFT estoy utilizando otro entorno, un entorno en línea llamado Remix. Así que vamos a Remix. Aquí estamos. Y probablemente sea la primera vez que estás usando Remix. Así que hagamos que tu Remix sea mejor. Ve al icono número 4, y solía contar esto como el primer hogar. Así que 1, 2, 3, 4, el Compilador de Solidity, y habilita la compilación automática. Esto te será útil en el futuro. OK. Recuerda ese icono número 4, Compilador de Solidity, habilita la compilación automática. Después de eso, vamos al siguiente icono, desplegar y ejecutar transacción. Y allí debemos conectar nuestra billetera con este entorno para desplegar nuestro contrato inteligente. Puedes ver aquí en el entorno que estoy en Remix VM. Este es un simulador de blockchain en la memoria del navegador. Me gustaría actualizar esto y seleccionar el proveedor inyectado. Y puedes ver el MetaMask allí. Significa que estoy conectado con mi billetera que acabo de instalar, y tengo fondos allí para crear mi contrato inteligente. Aquí estamos. Para hacer eso, debo autorizar mi billetera. Así que mi billetera está preguntando, oh, ¿estás autorizando a conectarte con este sitio web, Remix? Sí, lo estoy. Así que vamos a conectar. Y aquí, sí, ahora estoy conectado. Oh, empezando a crear nuestro primer contrato inteligente. Ahora voy al icono número 2, Fio Explorer. Así que 12, Fio Explorer, así que 12, Fio Explorer. Y aquí tengo el botón, crear un nuevo archivo. Y mi archivo se llama openaccess.sol. El otro nombre también, y parece que ya tengo uno. Está bien. Así que aquí estoy ahora. Recuerda que tenemos el cuadro de Git. Ya hice todo en el paquete Hello World, la billetera MetaMask, y estamos aquí en el código de acceso del token. Y todo este código está en GitHub también. Y puedes ver que estamos aquí. Y tenemos un pequeño problema aquí. Este es el contrato inteligente que estoy creando ahora. Así que estamos en Remix y este es mi contrato. OK, vamos. Copiar y pegar. Y, oh, ¿qué es esto? Esto es correcto para mí. Cuando copiamos y pegamos código en Remix, Remix nos alerta de que debemos tener cuidado, debemos conocer y confiar en el código que estamos copiando. Y te estoy enseñando para que ahora puedas confiar en mi código. Pero si estás usando esto con otros códigos que encuentres en Internet, por favor, ten cuidado, ¿de acuerdo? Y aquí estamos. Este es nuestro contrato. Y debido a que habilité la Compilación Automática, tengo el botón verde aquí, mi contrato está completo. Te lo explico ahora. ¿Qué tengo en mi contrato? Mi contrato tiene este comando llamado pragma, donde voy a darte un nombre. Estoy definiendo la versión de Solidity que estoy utilizando, ¿de acuerdo? Es la versión 0.8.20, y diferentes versiones tienen diferentes comportamientos. Así que ten cuidado de no usar una versión antigua. Y estoy importando una biblioteca de OpenXamplin. OpenXamplin es una empresa de auditoría que crea algunos contratos inteligentes que podemos importar cuando estamos creando los nuestros, y nos facilita la vida. Así que vamos a usar eso. Estoy importando algún tipo de NFT, el ERC-721. Wow, ¿qué es esto? Entendamos esto mejor. Así que cuando hablamos de tokens, también estamos hablando de estándares. Así que un estándar no es algo que realmente debas seguir, pero un estándar es una sugerencia para que lo sigas con el fin de tener una mejor comunicación. Así que nuestro NFT está con este estándar, ERC-721, y aquí añadí cómo es esto cómo es, ¿de acuerdo? Y también puse algunas referencias relacionadas con esto en OpenXamplin también. Tenemos que aprender más cómo hacer eso. El asistente de OpenXamplin es muy útil. Si viniste aquí directamente, actualicemos a una mejor biblioteca para ti. Aquí en el asistente, puedes crear algunos tokens de manera fácil. Esto está importando OpenXamplin y ahora el código de OpenXamplin también. Casi lo estamos logrando, ¿de acuerdo? Cerrémoslo. Cierremos esto, y esto, y volvamos a Rebix. Así que lo que tengo aquí, mi contrato es este tipo de NFTs, y aquí puedes ver que estoy gestionando los IDs de los tokens.
8. Inicializando y Desplegando el Contrato NFT
Short description:
Para crear un NFT, inicialízalo con un ID único, nombre y símbolo. Utiliza la función de otorgar acceso para garantizar un acceso especial. El contrato es simple y fácil de usar. Despliega el contrato autorizando la transacción con Metamask.
Así que tengo una colección, esta es mi colección de NFTs. El NFT tiene un ID único, y esto hace que el NFT sea único. Aquí estoy inicializando mi NFT, por lo que solo estoy definiendo el nombre y el símbolo de mi token, y tengo una función llamada otorgar acceso, y esta es la función que estoy utilizando para garantizar que las personas que tienen este NFT, tengan acceso a algo que estoy definiendo, ¿de acuerdo? Este es el acceso especial que estoy creando ahora. ¿Y qué es otorgar acceso? Otorgar acceso es crear un nuevo token, es un mint, solíamos decir que estamos acuñando un nuevo token para el remitente, la cuenta, la persona que está llamando a esta función, y este es el ID único de este activo en la colección. Así que es esto. De hecho, si quitas los comentarios, puedo decirte que nuestro contrato es realmente simple. Nuestro contrato es el mismo aquí, solo tiene una, dos, tres, cuatro, cinco, seis, siete, ocho, nueve líneas cerrando todo. Así que este es un contrato inteligente fácil de usar, y esto es genial porque esta es la mejor manera de aprender, comenzando con un contrato simple, ¿de acuerdo? Nuestro contrato está aquí, está en verde, está compilado, estamos listos para desplegar este contrato, vamos.
Desplegar y ejecutar transacciones. Así que entré en el icono número cinco, nuevamente, y en el icono número cinco, ahora debo desplegar. Así que regresa aquí y despliega. Y estoy en el icono número cinco nuevamente, haz clic en desplegar. Y si lo estás haciendo conmigo, y si quieres tener tu token conmigo, también puedo interactuar con tu token más tarde. Vamos a desplegarlo. Aquí estamos. Tengo mi contrato, si me desplazo hacia abajo aquí, icono número cinco, desplegando transacciones, desplázate hacia abajo hasta encontrar desplegar, y haz clic. Lo que estoy haciendo ahora, Remix está creando una transacción que se envía a Metamask, y debo autorizar en mi billetera para desplegar este contrato inteligente. Y cada vez que estamos
9. Construyendo el Front-end con Next.js y Vim
Short description:
Pagamos una tarifa de gas en el token nativo para confirmar la creación del contrato. Guarda la dirección del contrato ya que se utilizará en la implementación del front-end con Next.js. Crea un nuevo proyecto utilizando los comandos y configuraciones especificados. Instala Vim en el directorio del proyecto.
Al enviar una transacción a la blockchain, estamos pagando algo por esto. Estamos pagando, lo llamamos una tarifa, una tarifa de gas, pagando en el token nativo. De esta manera, estamos usando este Epoli8 que obtuvimos antes en el archivo de configuración. Y esta es la tarifa que estoy pagando ahora, y hago clic en confirmar. Y ahora estoy esperando que se confirme. Además, si vengo aquí en las extensiones de rompecabezas, puedo conectar mi Metamask aquí y hacer que sea fácil de ver y cerrar todo. Y puedes ver que el contrato fue confirmado. Entonces mi contrato está creado. Si vuelvo a Remix y me desplazo hacia abajo hasta encontrar este contrato desplegado sin anclar, este es mi contrato. Así que ve aquí, y aquí puedes copiar la dirección de tu contrato. Así como las cuentas y las billeteras tienen direcciones, los contratos inteligentes también tienen una dirección, por lo que cada contrato inteligente tiene una dirección única. Y esta es la dirección de nuestro contrato inteligente ahora. Así que la copiaré y la compartiré contigo. Así que si quieres hacer esto y compartirlo conmigo también, estaré muy feliz, y puedo interactuar contigo. Sí, cosa buena. No conozco tu nombre. Mini y Olek y Tolkididis e Ivan, y Asanka. Wow, estoy muy feliz por ustedes. Me alegra mucho que estén creando su contrato inteligente y siguiendo la masterclass conmigo paso a paso. Y si acabas de llegar, recuerda que estamos aquí en este pad colaborativo haciendo todo juntos. Mini, oh, perfecto, Mini, ahora sé cómo pronunciar tu nombre. Así que estoy feliz, Mini, de que estés haciendo esto. Increíble. Sí, tenemos nuestro contrato inteligente, y por cierto, es muy importante que guardes esta dirección, porque la usaremos en nuestro front-end. ¿De acuerdo? Sí, es hora de construir el front-end ahora. Así que déjame ir aquí. Este es el punto en el que estamos construyendo el front-end, y estamos utilizando Next.js para crear nuestro front-end. Primero que nada, abre nuestra terminal. Vamos, creo que te tengo aquí. Aquí estamos, y me gustaría ir a un lugar específico, y allí, vamos a crear un proyecto. Entonces el comando para crear un proyecto, vamos a ayudarte. Será este. Así que estoy usando este comando ahora. Y ten cuidado. Si necesitas instalar algún paquete, está bien. Yo lo hice antes, así que no estoy recibiendo este mensaje, pero lo estoy comenzando ahora, y el nombre de nuestro proyecto será este. Así que este es el nombre del proyecto. ¿De acuerdo? Vamos. Así que este es el comando que debo ejecutar ahora en mi terminal. Estoy en la terminal ahora, y el nombre del proyecto, recuerda que te dije, Next Open Token. Este es el nombre de nuestro proyecto, Next Open Token. Ahora, tengo algunas configuraciones predeterminadas aquí, pero estoy usando TypeScript. Sí. ESLint, sí. Tywin. ESLint, sí. Directorio de búsqueda, sí. Afterpay, sí. Personalizar importación predeterminada, sí. No. Y esto es todo. Así que esta es la configuración que estoy usando ahora, y se está instalando. Estoy agregando la configuración para ti también. Así que esta es la configuración que estás usando, ¿de acuerdo? Y después de eso, ve a tu proyecto. Todavía se está instalando. Si tienes alguna duda, puedes escribir en el chat. Estoy aquí contigo todo el tiempo. Sí, instalando, instalando. Y este es un buen momento, buen momento para volver a nuestras diapositivas un poco más para entender qué está sucediendo aquí. Así que en unos minutos, estamos creando este cliente de billetera y estás usando Vim para conectarte con nuestra cuenta también. Y esto será la implementación del front-end . Estamos usando la dirección del token de acceso que es el contrato inteligente que creaste antes. Y esta será la implementación del front-end cuando creemos nuestro componente. Y esta será la implementación del front-end cuando creemos nuestro componente, ¿de acuerdo? Veamos cómo estamos ahora. Bien, aquí estamos. Así que voy a mi directorio, mi carpeta. Ahora, aquí estamos. Y vamos a instalar Vim. Y sí. Así que ahora estamos aquí, en el repositorio de git, estamos instalando Vim.
10. Instalando Vim y Actualizando la Configuración de Next
Short description:
Instala Vim y actualiza el archivo de configuración de Next en VSCode. Crea un archivo .env con la dirección del token de acceso público de Next y actualízalo con la dirección de tu contrato inteligente. Inicia el servicio ejecutando 'npm run' en la terminal.
Aquí, instala Vim, ¿de acuerdo? Y luego, actualiza la configuración de Next. Hagamos ambas cosas. Así que, instalando Vim, es solo este comando. Hagámoslo. Después de instalar Vim, abriré mi code en VSCode, esperando la instalación de Vim, listo. Y ahora, abramos esto en - no esto. Abramos esto en VSCode. Aquí estamos. Entonces, donde estoy. Instalamos Vim y ahora lo abro en VSCode. Con mi proyecto abierto en VSCode, me gustaría actualizar la configuración de Next NGS. Y estoy usando algunas imágenes, así que es importante actualizar aquí para que esta sea la URL de mis imágenes confiable. Hago eso, estoy aquí, y estoy agregando este dominio allí. Entonces, la forma más fácil es copiar esto directamente, luego borrar todo y pegar. De hecho, solo agregué esto en el medio. Esto es para asegurarme de que Next JS pueda usarlo para obtener mi imagen. Y no olvides guardarlo.
El siguiente paso es crear un archivo .env. Porque allí, estamos - y antes del archivo, hagamos eso. Creemos un archivo .env. Y debes agregar esto en tu archivo. Y después de eso, actualiza la dirección de tu contrato inteligente. Mi turno. Hagámoslo. Crea el archivo .env. Aquí estoy. Entonces, en el directorio principal, crea el archivo .env. Está aquí. Luego, agrego la dirección del token de acceso público de Next. Y actualizo esta dirección con la dirección de mi contrato inteligente. Obtengamos la dirección de mi contrato inteligente. Me alegra tenerla aquí en la ruta. O puedes obtenerla directamente en remix. Es lo mismo. Y actualízala aquí. Aquí estamos. Guarda el archivo. Y recuerda, creé el archivo .env con esta configuración. Este es mi contrato inteligente. ¿De acuerdo? Genial. A continuación, podemos iniciar el servicio. ¿Cómo puedo iniciar el servicio? Por ejemplo, aquí en VS Code, voy a la terminal. Así que vayamos a una nueva terminal. Y luego, ejecuto el npm run allí. Puedes verlo aquí abajo. Permíteme iniciar el servidor. Peguemos esto para ti también. Entonces, ¿qué estoy haciendo ahora? Entonces, ¿qué estoy haciendo ahora? Así que estamos iniciando el servicio. ¿De acuerdo? De esta manera. Perfecto. Bien. Cuando veas que esto se pone rojo aquí. Es mío. Ahí lo tienes.
11. Estilizando el Sitio Web y Agregando Constantes
Short description:
Ve a localhost para ver el sitio web. Estiliza el sitio web actualizando los archivos CSS globales y de diseño. Asegúrate de tener la versión mínima requerida de Node. Agrega las constantes creando el archivo constants, ABI.cs en la aplicación de búsqueda.
Está listo. Puedes ver aquí que está listo. De acuerdo. Así que puedo ir a localhost y ver mi sitio web. Cerraremos las marcas que no estoy usando. Incluso guardar aquí. En unos minutos, tendré mi sitio web listo aquí. Veamos qué ha sucedido. Puedes ver que se está compilando. Y si tienes alguna duda, por favor avísame en el chat. Estoy aquí para ayudarte y asegurarme de que puedas hacer esto conmigo. Compilando. Compilando. De acuerdo. Probablemente ya esté listo. Veamos. Sí. Este es mi sitio web ahora. Nada relacionado con mi acceso, tu sitio web. Mi acceso aún, pero construyamos nuestro proyecto. Siguiente paso. Vamos a estilizarlo. Hagamos algo de estilo. Así que la idea es ir a la tercera aplicación y estamos actualizando estos dos archivos. Y seguiré el Gitbook. Estilo. Aquí estamos. Global. CSS. Así que copia esto y reemplaza el contenido. ¿Dónde está? StirstyApplications.global.css. Hagamos un control A para seleccionar todo y borrar. Ahora, pega el contenido que obtuve allí y guárdalo. Debo hacer lo mismo con el diseño. Así que borremos todo primero. Ve aquí. Hice el global. Así que baja un poco, también puedes ver el diseño. Debe estar en la copia. Y hacer lo mismo. Aquí estamos. Hagamos algo cambiando nuestro proyecto. Sí. El color cambia ahora. Está bien. Mínimo. Sí. Debemos tener Node, el mínimo es 18.17. Sí. Lo siento por eso. Puedes intentar instalarlo ahora. No hay problema. Esta vez está listo. Es hora de agregar las constantes. Es hora de agregar las constantes. Así que aquí estamos. Ahora voy a la parte de agregar las constantes. Vamos aquí. No en la agenda. Construir el front-end. Estamos aquí. Recuerda. Y a veces esto puede ayudar. No me lo digas. Y agregar las constantes. Aquí estoy. De acuerdo. Debo crear estas constantes, ABI.cs. Y si voy aquí a la aplicación de búsqueda y creo de esta manera, estoy creando directamente la carpeta y el archivo. Veamos.
12. Creando las Constantes, Imágenes y Cliente de Billetera
Short description:
Crea el archivo de constantes ABI.cs. Crea el archivo images.ts para las imágenes base y VIP. Conéctate con la cadena de bloques creando el cliente de billetera.
Vamos. Estoy aquí. Y estoy en la aplicación. Ve al nuevo archivo, constants, ABI.cs. Y aquí estamos. Tengo la carpeta, tengo el archivo. Luego puedo copiar desde aquí el contenido de mi archivo. Es una copia. Vuelve aquí. Pega. Y guarda. Está hecho. Ahora estoy creando en esta misma carpeta, estoy creando la imagen. Entonces, ¿cómo puedo hacer eso? Aquí que estoy directamente en las constantes ahora, vamos a crear el archivo images.ts. Vamos. Estoy aquí. Images.ts. Y luego puedo desplazarme un poco hacia abajo. Y este es, este es el archivo images.ts. Copia. Pega. Y puedes ver aquí que tengo una imagen base, una URL de una imagen base y de una imagen VIP. Y este es el acceso que estamos haciendo ahora. De la misma manera que estoy actualizando, puedes tener un acceso básico o un acceso VIP. Puedes desbloquear cualquier tipo de contenido utilizando el NFT de esta manera. Y la imagen proviene del NFT.
De acuerdo. Así que veamos la imagen. Si vengo aquí, puedes ver una y la otra, no aquí. Si vengo aquí, esta es una de las imágenes también. No hay imagen por ahora. Esta es una de ellas. De acuerdo. Así que tenemos dos imágenes allí. Y ahora es el momento de hacer la conexión con la blockchain. Estamos creando el cliente de billetera. Así que vamos aquí ahora. Crea el cliente de billetera. Así que estoy en esta parte del Gitbook, crea el cliente de billetera. En esta parte, estoy creando el archivo lipywalletclient.ts. Inserta, crea esto. Vamos. Ahora, no en F en inicio. Ahora estoy en inicio. Crea la carpeta lipy y luego el archivo walletclient.ts. Aquí estamos. Ahora tenemos la aplicación y lipy. De acuerdo. Cliente de billetera.
13. Creando Billetera, Control de Acceso y Conceder Acceso
Short description:
Crea el cliente de billetera, contenido controlado por acceso y vista de concesión de acceso. Importa el cliente de billetera y conéctate con la billetera usando VIM. Crea el componente de billetera para conectar el frontend con la billetera Metamask. Crea la vista del controlador de acceso para manejar el contenido controlado basado en el acceso NFT. Verifica el token de acceso y crea la vista de concesión de acceso para importar el cliente de billetera y ABI.
Allí, vamos a copiar el contenido. Así que este es el cliente de billetera, y debo explicarte muy bien este code. Esto es importante. Vamos a entender esto. Entonces, ¿qué tengo aquí? En primer lugar, recuerda que escribimos VIM para usarlo y conectarnos con nuestra billetera, ¿de acuerdo? Aquí estoy importando el cliente de billetera de VIM, también el personalizado. Y estamos en Sepolia, así que estamos importando la red de Sepolia. Y esta ventana de VIM, es una importación de componente que hace la conexión con la billetera. ¿De acuerdo? Tenemos esta función para hacer la conexión con stealth. El transporte, verifica esto. Esto es un estándar antiguo de las blockchains que usamos para conectarnos a la billetera, la window.ethereum. La mayoría de los clientes de billetera Web3 tienen este window.ethereum. ¿De acuerdo? Y si lo tenemos, el transporte va por ahí. Si no lo tenemos, tenemos un error que debemos instalarlo. Ya lo hemos instalado, así que ahora estamos bien. Después de instalarlo, después de conectarnos y identificar nuestra billetera, debemos hacer la conexión en sí. Así que creamos un componente que es la billetera en Sepolia con esa conexión con nuestra billetera Web3, ¿de acuerdo? Y este es, este es el componente para conectar nuestro frontend con la billetera que instalamos antes, la billetera Metamask. Creo que debo guardar algo aquí. Aquí, y esto. Perfecto. Siguiente. De acuerdo. Es hora de crear el contenido controlado. E imagina que puedes ser cualquier cosa que desees tener. Así que crea el contenido controlado por acceso. En el futuro, puede ser un acceso exclusivo que desees hacer. Este es el punto. Este es el acceso. Entonces, ¿qué estamos haciendo ahora? Vuelvo a la aplicación y creo la carpeta de componentes y la vista del controlador de acceso. Así que hagámoslo. Y estamos en este punto ahora, ¿de acuerdo? Exactamente esto, crea el contenido controlado por acceso. Así que creemos esto. Ven aquí, abre aquí. Y debo estar en la aplicación ahora, no en la biblioteca, voy a la aplicación. Nuevo archivo. Pega. Y puedes ver que ahora en la aplicación tengo el contenido, tengo los componentes. Acabamos de crear esto ahora. Dentro de los componentes, tengo la vista del controlador de acceso. Y peguemos el contenido allí. Aquí estamos, también ingresé al Gitbook. Y copio el contenido, pego en mi VS Code. Aquí estamos. Vamos a entender esto, ¿qué tienes? Estás usando el cliente. Básicamente, esto es en Next.js. Estás usando la imagen para seleccionar entre la imagen básica y la imagen VIP. Recuerda que hicimos esto antes. Esto es lo importante para nosotros. Debemos descubrir si el usuario tiene acceso o no. Si se le ha concedido acceso o no basado en el NFT, ¿de acuerdo? Entonces, si se le ha concedido, estamos devolviendo la imagen VIP. Si no, tenemos la imagen básica. Así es. Esta es la vista del controlador de acceso que tendrás en unos minutos. De acuerdo, sigamos adelante. Ahora debemos verificar el token de acceso. Este es el punto clave. Entonces, ¿cómo puedo hacer eso? Y recuerda que puedes seguir el Gitbook directamente, y voy a pegar algunas partes en el bloc de notas para ayudar, ¿de acuerdo? Pero ahora estoy aquí, verificando el token de acceso. ¿Cómo puedo hacer eso? En los componentes, ahora estoy creando la vista de concesión de acceso. Hagámoslo. Así que aquí estoy en la carpeta de componentes y creo la vista de concesión de acceso. Copiemos el contenido, que es, luego pega aquí. Y te explicaré lo que tengo aquí. Aquí estamos. Puedes ver que estoy importando VIM, pero esta es la parte importante. Estoy conectando mi billetera, importando el cliente de billetera. Estoy obteniendo el acceso, los ABI. Hablemos un poco, el ABI. API, es la interfaz binaria de la aplicación. Y esta es una parte de nuestro contenido inteligente donde tenemos las definiciones del propio contexto inteligente. Entonces, si vuelvo aquí y obtengo la parte de constantes del ABI, puedes ver que el ABI tiene toda la información que
14. Actualizando Página Principal y Conectando Billetera
Short description:
Esta parte explica las funciones de lectura y escritura en el ABI. En la vista de concesión de acceso, se utiliza la dirección de acceso al contenido inteligente para conectar y conceder acceso. La actualización de la página principal implica eliminar y agregar nuevo contenido al archivo de página.cfx. El contenido principal se importa desde el componente de vista de concesión de acceso y se aplica estilo. Conectar la billetera autoriza a la aplicación a interactuar con la billetera.
Necesito acceder a algunas funciones dentro de mi contenido. Mi contenido tendrá algo como un punto de saldo. Esto es una función de lectura, y debo tener la dirección allí, o tengo la concesión de acceso. Esto es la función de escritura, estoy escribiendo una transacción, y no necesito pasar ningún parámetro allí. Estas son las cosas que debo tener en el ABI para conectar y comunicarme con mi contenido inteligente. Y volvamos aquí a la vista de concesión de acceso. Y allí, puedes ver que también estoy importando la vista de control que muestra la imagen VIP o la imagen básica. Y solo estoy controlando el estado de todo aquí. Y aquí puedes ver que estoy usando el acceso al contenido inteligente, la dirección de mi contenido inteligente. Si no, tenemos esto que fue desplegado antes. También puedes usar eso. Y primero hacemos la conexión. Y también obtengo la información allí. Aquí está la concesión de acceso. Podemos conectar, podemos conceder acceso. Bien. Y parece que esto está bien. Sigamos adelante. Y ahora es el momento, casi hemos terminado. El último punto es actualizar la página principal. Hagámoslo. ¿Cómo puedo actualizar... Me gusta esto. Sí. Oh, también me gusta esta imagen. Veamos tu imagen. Oh, tan lindo. Me encanta tu imagen. Sí. Me gustas. Sí, tal vez puedas cambiar. Siéntete libre de usar esta imagen, es tan linda. Tan linda. Me encanta. Y de hecho, cambiaré la mía. Realmente me encanta. No está cambiando en nuestro GitHub, pero puedo cambiarlo aquí. Es lindo. Y me encanta cuando los estudiantes como tú interactúan conmigo. Es tan lindo. Entonces, volvamos. Debemos actualizar nuestra página principal, el archivo page.cfx. Aquí estamos. De hecho, lo mejor es eliminar todo y luego actualizar los nuevos contenidos. Es fácil. Ve allí, actualiza la página principal. Ahora solo tenemos esto. Entendamos qué tenemos aquí. Entonces, lo que tengo aquí, estoy importando mi contenido principal. Todo está en este componente, la vista de concesión de acceso. Y es solo esto. Estoy aplicando estilo y vista de concesión de acceso. ¿Está hecho? Veamos si funciona. Crucemos los dedos. Vamos. Tal vez deba actualizar. Probablemente sí. Sí, también lindo. Me encanta. Y bien, estamos esperando. No tenemos acceso. ¿Qué podemos hacer ahora? Primero, conectemos nuestra billetera para descubrir si tienes acceso o no. Tal vez incluso al conectar, aún no tienes acceso porque no tienes el NFT. Vamos. Conectar billetera. Y puedes ver aquí que estoy conectando mi billetera. Y como hicimos con Remix, ahora lo hacemos con nuestra aplicación. Entonces, estamos autorizando a nuestra aplicación a interactuar con nuestra billetera. Ese es el objetivo. Y veamos. Probablemente estoy conectado. Para asegurarme de que estoy conectado,
15. Concediendo Acceso y Usando Otras Billeteras
Short description:
Concedemos acceso enviando una transacción a la cadena de bloques para crear un NFT y otorgar acceso al contenido. Después de confirmar la transacción, la billetera debe volver a conectarse. Tener múltiples billeteras significa que cada una tiene un acceso diferente a los NFT. El acceso y los tokens pueden ser otorgados a nuevos usuarios en el futuro. También es posible acceder al token de otra persona. El contenido controlado por el propietario del token determina el acceso otorgado.
Puedo venir aquí y cerrar esto. Ahora no lo necesitamos. Pero aquí puedes ver que tengo un botón verde allí y la cuenta está conectada. Es un poco pequeño, pero creo que puedes verlo. De acuerdo, estoy conectado. Todavía no tengo acceso. ¿Qué estamos haciendo ahora? Necesito conceder acceso. Imagina que puedes tener algunas condiciones para hacer esto. Tal vez debamos pagar, tal vez tu acceso se base en el tiempo y tengas acceso por un mes, un año o un día, o para tener acceso, debemos tener otro NFT, lo que sea. O nos gustaría asegurarnos de que tengas acceso, debes tener este NFT y también verificar el clima en tu ciudad y verificar alguna API que no esté en blockchain. También es posible. Pero hagamos esto. Debemos conceder acceso ahora mismo. Hago clic en el botón de conceder acceso. Y ahora puedes ver que estoy enviando una transacción a la blockchain. Cuando conecté mi billetera, solo estoy autorizando a mi aplicación a interactuar con la billetera. Ahora estoy enviando una transacción a la blockchain para crear un NFT. Y este NFT me da acceso a este contenido. De acuerdo, confirmar. Debo esperar a que se confirme mi transacción. Y nuevamente, cierro esto. Está confirmado. Puedes ver aquí una interacción de contrato confirmada. Entonces, si vuelvo aquí, no se actualiza automáticamente nada. Entonces, si vuelvo aquí y actualizo mi sitio web ahora, mi aplicación, debo volver a conectar la billetera. Vamos a conectar. Sí. Ahora no necesito conceder acceso. Y soy un VIP. Tengo acceso a un contenido increíble, servicios increíbles, tengo acceso a un contenido increíble que antes no podía ver. E imagina qué tipo de contenido te gustaría compartir con nuestra audiencia. Podemos usar esto para crear cualquier tipo de cuenta. Esta es una nueva forma de acceder al contenido y crear cuentas. Y creo que esto es realmente genial. ¿Y qué sucede si tengo otra billetera? Veamos. Me gustaría cambiar mi billetera ahora. Entonces, en Metamask. Cuando tengo la cuenta 1, en la flecha hacia abajo, puedo agregar la cuenta y agregar la nueva cuenta. Llamémosla cuenta 2. Crear. Y esta es la cuenta 2. Y ni siquiera tengo nada aquí. Y si vuelvo aquí, puedo ver que la cuenta 2 no está conectada. Entonces, veamos si aquí puedes ver que no está conectada. Y vamos a conectar la billetera. Pero parece que está conectada a mi primera cuenta. Sí, debo conectarme también a la segunda cuenta. Estoy conectado. Si actualizo nuevamente, puedes ver que esta cuenta no tiene acceso a este NFT. E incluso no puedo tener acceso porque no tengo ningún token en esta billetera. Nada por ahora. Pensemos en el futuro cómo puedes otorgar acceso y tokens a alguien nuevo que está comenzando y aún no tiene tokens. Podemos hacer eso. Pensemos en el futuro. Otro punto que me gustaría hacer, me gustaría acceder a tu token, no al mío. Veamos. Entonces, si volvemos aquí y obtenemos tu contenido, como, estoy usando tu contenido ahora. Esto es tuyo, no mío. Entonces, si vengo aquí y voy a .envy y uso tu contenido ahora, no el mío. Guardar. Además, me gustaría ir a mi cuenta 1 donde al menos tengo dinero. Tengo algunos tokens. Y actualízalo aquí. Conecta mi billetera nuevamente. Y puedes ver que estoy en el mini NFT ahora, no es mío. Entonces, el contenido de ella controla el acceso, ya no es mi contenido más. Entonces, puedo hacer clic en conceder acceso y estoy creando un NFT que no es mío sino de ella. Y tenemos esto funcionando localmente, pero imagina que si ya tienes esto, lo haré público. También podemos interactuar con los demás.
16. Acceso VIP y Resumen de Contenido Inteligente
Short description:
Ahora soy un VIP en el contenido de Mini, capaz de acceder al contenido de otras personas también. Solidity es el lenguaje utilizado para crear contenido inteligente en las cadenas de bloques de EVME, compatible con Ethereum. La implementación del front-end es crucial para gestionar el acceso. Existen soluciones para utilizar las cadenas de bloques de manera más económica, como las cadenas de bloques de capa 2. Se abordan las preguntas de Olek sobre el costo de utilizar Ethereum mainnet y la disponibilidad de otras cadenas de bloques. Hay una diapositiva pública con ejemplos de código disponibles como referencia. Se demuestra cómo conectar una nueva billetera y otorgar acceso, con confirmación pendiente. Es posible que sea necesario solucionar problemas de caché para actualizar el acceso.
Veamos, probablemente confirmarlo. Conectar. Y sí, ahora soy un VIP en el contenido de Mini también. Tan genial. Esto es interesante porque viste que incluso puedo acceder al contenido de otras personas también. Y Mini está en Estados Unidos. Ahora estoy en Ámsterdam. Estoy en los Países Bajos y puedo acceder a esto en todo el mundo. Así que esto es genial. Y si tienes alguna duda, avísame y continuaré con el contenido. Tengo un poco más para comenzar. Entonces, recapitulemos lo que hicimos. Este es el NFT. Esto es tan básico, tan fácil. Recuerda que esta es la versión de Solidity. Importamos una biblioteca que está auditada, en la que podemos confiar. Creamos nuestro contenido, importamos esta biblioteca, lo gestionamos para tener identificadores de tokens únicos. Creamos el nombre y el cuadro de selección. Y el símbolo de nuestro token y tenemos la función de otorgar acceso que gestiona el ID y acuña los tokens. Puedes crear la función de revocar acceso, puedes hacer otras cosas más adelante con esto. Pero este es nuestro contenido inteligente básico y esto es Solidity. El lenguaje que puedes usar para crear contenido inteligente en las cadenas de bloques de EVME. Cadenas de bloques compatibles con Ethereum. Y esta es la forma en que interactuamos. Así que tenemos el cliente de billetera para hacer la conexión en sí Y esta fue la implementación del front-end donde obtenemos la dirección de nuestro contenido inteligente, lo publicamos y obtenemos todo dentro de eso. Y el front-end, este es el punto clave para descubrir si está funcionando o no, el acceso. Y oh, tengo algunas preguntas aquí de Olek. Oh, Olek, sí. Oh, sí. Olek, tal vez, depende del tipo de aplicación, hacer cosas para tener en Ethereum mainnet solía ser más caro. Estoy totalmente de acuerdo contigo. Pero de la misma manera, cuando hablamos de cadenas de bloques, tenemos muchos, lo llamamos capa 2, que son otras cadenas de bloques que son más rápidas. Son realmente, realmente más baratas, como 100,000, 100 menos que Ethereum. Y puedes usar este tipo de cadenas de bloques y tener solo algunas validaciones en Ethereum también. Entonces, hoy en día hay muchas soluciones para utilizar cadenas de bloques de una manera muy económica. Sí, y este es un comentario realmente increíble, Olek. Tienes toda la razón. Pero tenemos soluciones para hacer eso. Y cada vez es más fácil utilizar cadenas de bloques, al menos otras cadenas de bloques. Y nos gustaría ver estas diapositivas. Oh, tenemos las diferentes. Entonces, si vinieron aquí, estaría aquí para ustedes. Vamos al final. Y tengo esta diapositiva pública para ustedes. Y pueden ver que esta es la imagen antigua, y el código también está aquí. Tenemos el botón adicional con el código, porque es una diapositiva. Y puedo conectar mi billetera aquí. Y mi billetera no está, creé esta billetera con pocas líneas, así que es totalmente nueva. Y probablemente pueda actualizar. Ah, ahora no estoy conectado. No te preocupes. Otorgar acceso. Ahora, estoy acuñando el token en mi billetera. Y después de eso, digamos que soy un VIP en la aplicación real, está pendiente, así que aún no está confirmado. Debemos tener este acceso aquí para que se confirme. Y tengo una línea aquí, otra en el chat, así que puedo hablar contigo. Está confirmado. Así que vamos a actualizar. Conectar. Y qué hice mal. Tendrías razón. Actualicemos de nuevo, porque probablemente lo hice. Creo que tengo el acceso. Pero creo que lo tengo. Cuando estoy usando la aplicación real, tengo algunos problemas con la caché. Y realmente no pude actualizar esto. Veamos si mi billetera está conectada. Probablemente tuve algunos problemas con la conexión entre esto y los demás. Porque ambos son iguales, tal vez. Veamos. Puedo quitar mi conexión aquí.
17. Posibilidades de los NFT y Validación de Transacciones
Short description:
Presento algunas posibilidades para utilizar NFTs, incluyendo ejemplos de la NBA, juegos con monstruos adorables y bienes raíces tokenizados. Los NFTs pueden ser dinámicos y representar identidades únicas, incluyendo NFTs vinculados al alma. También se comparten artículos sobre NFTs para activos del mundo real y coleccionables. Hay recursos adicionales y bootcamps disponibles para aprender. Se discute la importancia de la validación de transacciones en la cadena de bloques y la asignación de tarifas.
Desconectado. De acuerdo. Ya no estoy conectando. Veamos si ahora puedo darte el acceso, el acceso correcto. Sí. Ahora sí. De acuerdo. Ahora puedo otorgar acceso nuevamente. De acuerdo. Actualizar. Espera. Creo que aún no. Sí, está pendiente. Esperemos esto. Y bien. Estoy esperando. Sigamos adelante. ¿Cuáles son las posibilidades de esto? ¿Qué crees que puedes hacer con esto? ¿Tienes alguna idea? Primero te presentaré algunas posibilidades. Esto será en unos minutos. Así que algunos ejemplos relacionados con esto. Tengo algunos aquí. Imagina, ¿sabías que la NBA utilizó NFTs para crear algunos NFTs dinámicos y esto fue para cada jugador en los playoffs de la NBA de 2022. Y esto fue una colección de NFTs. Así que, imagina que puedes usar esto con 240 jugadores y teníamos 30,000 NFTs. Y esto fue realmente, realmente genial para los jugadores. ¿Y qué tal algunos monstruos? Hablaré sobre el fizz un poco más tarde. De acuerdo. No te preocupes por eso. Entonces, ¿qué tal un juego con monstruos, monstruos adorables, creo? Me gusta eso. Son tan lindos, pero son monstruos. De acuerdo. Y agregué el enlace aquí, esto es un caso útil. Cómo también utilizan los NFTs. Y esto es tan interesante para ti también. Y además, ¿qué tal dos usos en bienes raíces? ¿Has pensado en eso? Tengo aquí, como un artículo para ti. Y puedes ver cómo puedes tener un bien raíz tokenizado. Y es interesante cómo puedes hacer eso. Es como un NFT, los NFTs son tokens únicos. Entonces, ser dueño del NFT puede ser ser dueño de la propiedad o transferir el NFT puede cambiar la propiedad de la propiedad o puedes tener alguna parte crítica, como una dirección o un identificador único en la cuenta, algo así. E incluso un punto importante. Cuando hablamos de NFTs, los NFTs pueden ser dinámicos. Imagina que eres un NFT, yo soy un NFT, y así, somos únicos, tenemos un ADN único. Pero no somos iguales, vamos envejeciendo día a día. Espero no cambiar demasiado, pero cambiaré. Y también soy un NFT dinámico. Y imagina que cualquier persona puede ser representada como un NFT e incluso tener una identidad única. Y hablando de identidad única, imagina que podemos tener diferentes tipos de identidades, como solíamos decir que son los NFTs vinculados al alma. Este es otro estándar donde no se pueden transferir los tokens no transferibles o tenemos algunas reglas como si es tu identidad, no puedes transferir tu identidad a otra persona. Entonces, podemos tener diferentes tipos de NFTs. Solíamos decir que son el alma del usuario y no se transfieren. Entonces, esto es un tipo diferente de NFT también. Y veamos qué más tengo relacionado con el acceso. Oh, tengo uno más para compartir contigo que tal vez te interese. Puedes ver este artículo más tarde relacionado con los NFTs para activos del mundo real. Estamos hablando mucho de esto en los nuevos tiempos y todos los tipos de activos del mundo real que puedes tener y aplicaciones, como coleccionables físicos, no solo relacionados con el arte sino también con otras cosas. Esto es interesante para ti. Y veamos qué más hay. Me gustaría compartir otro enlace contigo relacionado con los coleccionables también, cómo los cerebros están utilizando los NFTs. Ya te conté algo relacionado con esto. ¿Y qué más? De acuerdo, mi última diapositiva, casi la última diapositiva. Estoy casi terminando, así que volvamos aquí. Si quieres aprender más, acabo de agregar muchos enlaces para que aprendas y también puedes ir a nuestro centro de desarrolladores. Puedes ver algunos casos de uso allí y videos y más tutoriales. Y tenemos algunos bootcamps que comienzan desde cero para principiantes, no relacionados con la parte del front-end. Estamos en una conferencia de React en la conferencia de JavaScript, así que eres un experto aquí. Pero en la otra parte, puedes aprender más, así que relacionado con las cosas de blockchain, puedes aprender más en los bootcamps. Y volvamos y hablemos sobre las tarifas. ¿A dónde van las tarifas? Cuando hablamos de blockchain, el blockchain tiene las transacciones en los bloques. Entonces, para que estas transacciones estén en el bloque, debemos tener a alguien validando
18. Validación de Transacciones y Comentarios Finales
Short description:
Pagamos una tarifa a los validadores de nodos para agregar transacciones a la cadena de bloques. Los validadores verifican la validez de las transacciones antes de agregarlas. Ethereum, la cadena de bloques más antigua, no es la opción más económica. Hay capas compatibles en la parte superior de Ethereum que son más rápidas y más baratas. La tarifa se destina al validador de nodos. Un agradecimiento especial a Richard y Valentina por su ayuda en la creación de la presentación y el taller.
las transacciones. Solíamos decir que tenemos computadoras, los nodos, que validan las transacciones. Y tenemos personas detrás de los nodos que gestionan los nodos. Entonces, los nodos deben recibir algo para validar la transacción. Y esto es la tarifa. Así que pagamos a un validador de nodos, obtienen la transacción y agregan la transacción dentro de un bloque en la blockchain. Antes, ¿viste que tenía algunas transacciones que estaba gastando? En ese momento en que la transacción se gasta, la transacción está en la blockchain, pero está en el grupo principal. Es como una área de espera, esperando estar en un bloque. Para estar en un bloque, el validador de nodos, obtienes mi transacción y verificas si mi transacción es válida. Estoy haciendo algo que realmente no puedo hacer en la blockchain. Estoy tratando de gastar el mismo token dos veces. Estoy tratando de implementar un contrato inteligente de una manera que no está compilada de manera exitosa. ¿Estoy haciendo algo mal? El validador está verificando eso antes de agregar mi transacción dentro de la blockchain. Y si el validador agrega una transacción no válida en la blockchain, será penalizado. Y para asegurarnos de que se encargará de nuestra transacción, debemos pagar una pequeña tarifa para hacer eso. Y está bien, es una tarifa pequeña, pero como Ethereum es la blockchain más antigua con contratos inteligentes y no es la más barata en este momento. Pero como dije antes, también tenemos algunas capas. Esa es otra capa encima de Ethereum, que tenemos. Son como otras cadenas de bloques, más rápidas, más baratas, que hacen una validación en Ethereum, pero no son Ethereum directamente. Son compatibles y son más baratas. Así que es bueno usarlas también. Y puedes informarte sobre cualquier tipo de cadenas de bloques compatibles con EVM. Pero, ¿a dónde va la tarifa? La tarifa va al validador de nodos. Este es el punto. Y casi terminando aquí. Esta es la presentación. Mantengamos esto unos segundos aquí para que puedas copiarlo. Y todavía estoy aquí si tienes más preguntas. Espero tus preguntas. Me gustaría agradecerles mucho por estar aquí conmigo y especialmente por hacer el masterclass conmigo. Realmente me encanta cuando las personas interactúan conmigo durante los talleres. Realmente me hace feliz y siento que estoy haciendo una diferencia en nuestra vida porque estamos aprendiendo algo juntos. Y aquí puedes ver que también agradezco especialmente a Richard y Valentina porque me ayudaron a crear esta presentación y este masterclass. Solía viajar por todo el mundo para ir a conferencias de blockchain, para hacer un masterclass en muchas conferencias, y a veces tengo personas que me ayudan a crear el material, y me ayudan aquí. Y estoy muy contento y les agradezco especialmente a ellos también. Y esto es todo. Espero verte por aquí. Si estás en Ámsterdam, si estás en persona en la conferencia, tengo algunas charlas. Tengo una charla el jueves y otra charla el viernes. No dudes en venir a hablar conmigo y estar en la vida real también. Y esto es todo. ¡Adiós!
Comments