Cómo crear una aplicación de gestión de bibliotecas descentralizada

1. INTRODUCCIÓN AL CURSO: Blockchain es la fuerza impulsora de la próxima generación, que también se conoce como el árbol de verbos. Blockchain reinventa la forma en que se almacenan y administran los datos. El árbol web abraza la descentralización y se está construyendo y es propiedad de sus usuarios. Ya que está en muchas oportunidades nuevas para desarrolladores como nosotros en este dominante. En este curso, aprenderemos a construir una completa aplicación descentralizada de gestión de celebridades desde cero, estaremos utilizando la solidaridad para el paradigma de desarrollo de contratos inteligentes para prueba y despliegue parte nos dio sed de comunicarnos con el contrato, MetaMask para firmar la transacción, React JS por el financiamiento y alquimia es que blockchain les proporcionará. Al final del curso, entenderás sobre los conceptos requeridos para solicitar que pongan un trabajo o incluso construyan tu propia aplicación en la cadena de bloques akadiana sin perder más tiempo. Inscríbase ahora y comencemos. 2. Crea un nuevo proyecto de hardhat: Hola, bienvenidos al primer video del curso, donde aprenderemos a construir una aplicación de gestión de bibliotecas descentralizada. Entonces no perderé tu tiempo explicando qué es la Web tres, qué es la descentralización y todo. Si lo desea, puede Google por su cuenta. Simplemente voy a ir estáticamente al currículo del curso o a la hoja de ruta del curso. Por lo que el curso se divide en pasos D7. El primer paso será establecer el entorno de desarrollo. Entonces crearemos un contrato inteligente. Entonces escribiremos prueba unitaria. Entonces desplegaremos contrato inteligente. Después de todas esas pruebas son exitosas. Entonces usaremos un framework, React framework conocido como próximos dos años para construir un front-end. Y luego usaremos sillas éteres en el front-end para interactuar con el contrato inteligente. Y por último, probaremos toda la aplicación si todo está funcionando bien o no. Entonces antes de avanzar, sólo me gustaría asegurarme de que haya instalado máscara Matter y tener algunos intereses académicos de prueba en su cuenta. No voy a armar con, de nuevo. Por favor, vea cualquier tutorial sobre él y continúe con el curso. Apenas va a tecnologia cinco minutos, eso es todo. Ahora, antes, antes de trabajar en la aplicación, al menos deberías conocer esa pila tecnológica. Así que obviamente estamos usando una cadena de bloques de titanio. Y la solidez es ese lenguaje de programación para escribir contratos inteligentes. Entonces usaremos hard hat como herramienta de despliegue. Entonces billetera MetaMask. Entonces la alquimia es un proveedor de nodos ocultos. Te dice que este es un laboratorio para comunicarte con el contrato inteligente, luego HTML, CSS, y finalmente, React JS, o puedes decir Next JS. Eso es todo. Empecemos con el entorno de desarrollo. Primero, crea una carpeta. El nombre es gestión de bibliotecas. Eso está bien, si quieres, puedes nombrarlo cualquier cosa, luego anexar una terminal en ella. Y para instalar hearted, primero necesitas crear un paquete NPM ejecutando el comando y VM en él. ¿ Por qué? Se inicializará un paquete NPM vacío. Eso es todo. Para que puedas ver este archivo package.json está ahí. Entonces haciendo estilo hardhead. Ese comando es npm. Instala, dash, dash, save, tab, hard hat, and press Enter. Ok. Los paquetes hardhead son la dependencia más difícil que se instala. No para crear un proyecto hardhat, usaremos este comando, que nos dará una estructura mínima desnuda, es decir NP hard hat. A continuación pulse Enter. A continuación selecciona el primero que es crear un proyecto de muestra B6 y pulsa Intro de nuevo, luego otra vez, Enter, luego ingresa. Eso es todo. Ahora, se crean pocas carpetas y archivos. El proyecto de muestra te pedirá instalar duro encabezado por un completo más duro es terroristas y pocas otras dependencias lo que hace hardhead compatible con prueba fallará y tiene celebridad para simplemente copiar esta línea y pegarlo y presionar enter. Se descargarán todas las dependencias requeridas para el proyecto. Ok. Dejar dependencias que he instalado con éxito. Ahora simplemente anexa VS Code Editor y anexa tu carpeta de proyecto en ella. Estos son los archivos ficticios que hardhead nos proporcionan. En el siguiente video, incluiremos claves de alquimia y máscara Meta en el despliegue de la configuración Hardhead. Gracias. 3. Claves de alquimia y Metamask: Hola. Por lo que un sombrero duro nos da pocas carpetas y archivos. Entenderemos todos esos paso a paso. Pero primero, vamos a ir al archivo de punto js de conflicto de cabeza dura. Y asegúrate de que estamos señalando nuestra red para correlacionar la red de pruebas de itanio. Y para que eso funcione, necesitamos ir temprano itanium node URL y una dirección de billetera. Vr usando rizado y no robar Stone ni ningún otro porque en Alquimia, esas redes se están depreciando. Entonces bien, no la mejor opción sería utilizar caudally network. Como ya tengo una cuenta en Alchemy, no voy a estar creando una nueva cuenta, sino simplemente ir a alchemy.com. Y estoy haciendo click en Login. Tienes que registrarte. Es muy sencillo. Simplemente conecta tu cuenta de Google y todo. Nada elegante. Y luego aquí, después de crear una nueva cuenta en alquimia, serás redirigido a esta pantalla de tablero. Aquí, simplemente haga clic en el botón Crear App. Y ahora llenemos esa información. Mi nombre de aplicación será Gestión de bibliotecas, tab. Entonces la cadena será tedio, pero la red será piadosa. Y como dije, esto está depreciado, depreciado. Por lo que es mejor usar solo red fríamente y luego hacer clic en Crear aplicación. Por lo que has creado con éxito una app en la Alquimia. Ahora, el siguiente paso es conseguir la clave privada de MetaMask. Puedes instalar Meta mask yendo a la mascota Madame en tu sitio web e instalar la extensión para tu navegador. Como ya lo tengo, solo puedes pausar el video y ver la configuración de una nueva billetera y cómo conseguir los comedores de prueba en tu cuenta. Porque definitivamente para que funcione, debes tener alguna prueba. Una prueba como esta. Esta es mi billetera. Y solo iniciando sesión. Entonces se puede ver, tengo esto mucho en la prueba. Comedores y asegúrate de que tonta. Selecciona la red oralmente entre las opciones. Después para obtener la clave privada, tienes que hacer click en los detalles de la cuenta, exportar clave privada, y escribir tu contraseña. Eso es todo. Entonces obtendrás tu clave privada. Y esto, este 0 x a d, Esta cosa es tu clave pública, que en este momento no se requiere, pero al menos debes saber. Ahora, hay que instalar algunas dependencias para escribir estas claves. Porque escribiremos URL de alquimia y clave privada MetaMask en nuestra configuración de hardhead. Y para eso, lo instalaremos y utilizaremos dependencia llamada dot ENV porque no se recomienda pasar esa información sensible directamente en nuestro código. Por lo que simplemente anexa tu terminal y escribe npm install dot ENV. Pero también estoy Instalando de Penn Zeplin anexa un avión es decir biblioteca de contratos modulares, reutilizables, inteligentes que regresan sólidos. Por lo que es simplemente código preescrito que puedes usar directamente. Nada más. Acabo de escribir npm instalar un adjunto directo Zeplin slash contratos, y luego espacio D, O, D E, y V dot ENV. Esta es otra dependencia. Eso significa que hay dos dependencias. Y luego solo presionaremos Enter. Entonces está hecho. Ahora. Usa ese punto ENV primero. Voy a crear un nuevo archivo en el directorio raíz por el nombre dot ENV. Eso es así. puede ver que está en el directorio raíz. Y entonces aquí voy a crear un muy bien. O puedes decir algo que almacenará el valor. La URL de alquimia es igual a esto, y let g es igual a esto. Recuerde que no hay nada que sea mina de carbón todo todavía directamente. Lo estoy escribiendo. Ahora para obtener la URL de alquimia, simplemente vaya a su app y haga clic en Ver clave. Entonces verás esta cookie HTTP simplemente copiarla y pegarla en tu URL de alquimia como esta. Y luego para conseguir la clave privada billetera , anexar máscara de método. Entonces aquí los detalles de la cuenta, exportar clave privada y Dario contraseña válida y confirmar. Copia esta clave y pegarla aquí en la clave privada violeta. Eso es todo. Guárdala, y ciérrala. Ahora, queremos esas claves en nuestra configuración de hardhead. Para eso acaba de abrir un archivo de configuración de cabeza dura. Y dentro de los módulos o exportación, ¿verdad? Redes, luego llaves rizadas. Entonces dentro de ella, como el nombre de la red, estoy usando femenina. Entonces otra vez llaves rizadas. Entonces una propiedad es URL, cual usamos esos datos de archivo de puntos ENV. Tenemos que escribir proceso dot ENV alquimia URL. Y para que funcione en la parte superior, tenemos el primero requieren el paquete dot ENV. Eso es dot ENV dot config así. De esta manera podemos acceder al archivo dot ENV. Y luego se da la URL. Y el segundo parámetro tenemos que enviar estas cuentas. Está en la NA, simplemente tenemos que escribir proceso dot ENV, dot wallet, clave privada. Eso es todo. Eso es todo para la cabeza dura puede fertirrigación. Ahora, nuestro proyecto está apuntando hacia la red de escritorio de correlación alquimia. En entonces próximo video, trabajaremos en la creación del contrato. Gracias. 4. Cómo crear el contrato de biblioteca: Por lo que ahora es el momento de que trabajemos en nuestro contrato inteligente. Crea un nuevo archivo dentro de la carpeta Contratos y nombra Biblioteca dot soul. Entonces lo primero que tenemos que hacer cualquier contrato es licencia delta y desvío de DVR sólido, sólido usando el contrato correcto y el nombre del contrato. Daremos el contrato llamado biblioteca. Ahora, soy Wesley biblioteca tendrá libros. Entonces lo primero que haremos es crear una estructura de libro. Es decir, un libro tendrá algunas ideas, algún nombre así. Simplemente escribe libro. Entonces. Tendrá un ID de libro. Entonces el nombre del libro. Entonces sí, publica. Entonces, ¿quién es el Arthur? Y por último, ya sea que hayamos terminado de leer este libro o no, así, porque ese concepto será que tendremos nuestra propia biblioteca donde podamos escribir. Este libro se deja para leer. Ya he leído este libro así. Entonces la estructura está lista. Ahora, voy a crear una variable de listas de libros, que será una lista de libros tipo. Es decir, sostendrá la estructura del libro. Será un privado y lo nombraré vocalista. Entonces mapearemos ese ID de libro a la dirección de la billetera del usuario que está agregando ese libro. Para que más adelante podamos buscar directamente ese libro de usuarios sin ningún tema. Así que simplemente escribiré mapeo. Entonces terminas a 56 será mapeado a domicilio, y será simplemente reservar a dueño. De nuevo, estoy diciendo que es un mapeo de ID de libro a la dirección de billetera del propietario. Eso es todo. Entonces la primera función que crearemos es agregar un libro. Así que simplemente agrega bulto. Entonces esta función será una función externa. Recordará desde fuera. Y aceptará pocos valores como el nombre mamario de cuerda que en 16 año. Entonces cuerda arteria mamaria. Entonces un booleano de terminado. Estas cosas va a aceptar. Ahora para agregar un libro, debemos tener un ID de libro y debe ser único. El servicio simplemente no usará ninguna dependencia externa en este momento. Simplemente le daré al ID la longitud de nuestros folletos. Esa es ésta. Ya que obviamente, después de añadir un libro, seguirá incrementándose. Por lo que siempre esto será único. Sí supone lo primero, vamos a empezar desde 0, entonces ese es el id del libro será 0, luego uno, luego dos como este. Entonces en la lista de libros, empujaremos el valor de la estructura. Es decir, de la estructura libro lo empujará. Y lo primero que tomará es el ID de libro. Entonces nombra eso aquí. Después terminó así. Por lo que esto vamos a empujar en ella. Por lo que automáticamente la longitud aumentará de 0 a uno. Entonces en el mapeo también, voy a hacer el mapeo de libro. Id pertenece al remitente del mensaje así. Entonces este libro pertenece a esto, a quien esté llamando a esta función. Y al final, me gustaría emitir un evento. El evento será añadir libro. Simplemente. Se pedirá identificación de destinatario, destinatario y libro. Por lo que esto se acaba de iniciar sesión en esa blockchain. Cualquier externamente lo podamos leer es información. Simplemente véalo como una función de inicio de sesión. Añadir evento de libro. El destinatario será remitente de mensajes y el ID de libro será ID de libro. Por eso espero que hayan entendido que este es un código muy básico. Si vienes de cualquier otro lenguaje de programación, entenderás el concepto. Obviamente, estas cosas como algo nuevo. Si aún tienes dudas, solo puedes leer sobre mapeo y eventos. Y en el siguiente video, trabajaremos en otras funcionalidades en nuestro contrato inteligente. Gracias. 5. Funcionalidad para encontrar libros: Ahora trabajemos en la funcionalidad para conseguir todos los libros de ese usuario en particular. Así que yo lo nombraría, simplemente conseguir lista de libros. Será una función privada. Te diré por qué. Solo te dará la información de que estoy usando la palabra clave view y devolverá este libro de cosas que es así. Podrías estar pensando por qué esta privada, porque solo quiero pasar argumentos como booleanos terminados. Eso quiere decir si es si estamos pidiendo los libros que están terminados o que no hemos leído. Entonces con esta una función podemos llamar o podemos implementar dos funcionalidades. Empecemos a trabajar. Lo entenderás todo. ¿ De acuerdo? Función ortografía mal. ¿ De acuerdo? Ahora, lo primero que haría es crear una variable, nombrarla. Entonces será una nueva lista de libros. Y esa tierra sería vocalista, tierra oscura como esta. De acuerdo, así que ahora al principio, contaremos cuántos libros tiene este usuario. Porque en esta lista de libros habrá muchos libros de diferentes, diferentes usuarios. Lo primero que tenemos que iterar o recorrer esa lista para encontrar al dueño de. Es decir, definir los libros que son propiedad de este usuario. Significa eso. Simplemente crea un bucle for. Será cuando sea igual a 0. Yo menos que lista de libros, lista de libros, tierra I plus plus, así. Entonces lo primero que tenemos que comprobar es si el dueño del libro, es decir este ID de libro pertenece a este mensaje dot remitente o no. Lo es. Ya que sabemos el ID de libro comienza desde 0. Y por eso hemos iniciado esto desde el 0. Y preguntamos que el mapeo está ahí con esta dirección, por lo que sólo podemos comprobar si pertenece a este remitente. Y otra condición que revisaremos es lista de libros. I. Terminado igual a, igual a terminado. Así. Simplemente es decir, que significa que este libro lista punto terminado. Esa es esta propiedad. Si es igual a la variable que estamos enviando es este booleano, sea igual o no. Si está ahí, entonces en esta variable temporal, simplemente en esta ubicación de contador, inserte este valor que es valor contable. Entonces incrementa ese contador como este. ¿ De acuerdo? Así que ahora, sin duda tenemos todos los libros que son propiedad del usuario en esta variable, pero esa longitud se define una mayor, es decir, toda la lista de libros. Podría ser un 100. Y sólo cinco libros estarán ahí. Para solo ahorrar algo de memoria y espacio. Creará otra variable. Es decir, todas estas son variables temporales que es resultado final. Y será, de nuevo. Una nueva área de libros, pero esta vez, la duración de la que contaba esta tierra real. Y usaré el bucle for para simplemente recuperar todos los datos de estos dos distintos. Ahora otra vez usado new int I es igual a 0. Yo menos que contrarrestar I plus plus. Aquí, simplemente, en la matriz de resultados. Copia todo de esa matriz temporal. Eso es todo. Es sólo una simple copia. Y finalmente regresó. Eso es así. Por lo que de nuevo, me gustaría explicar primero, esta es una función privada que sólo ve. No hace nada en la blockchain. En esta función estamos enviando un parámetro llamado terminado, es decir si verdadero o falso. Entonces enviaremos. Entonces. Lo primero que hemos creado una variable por el nombre temporal. Es una matriz vacía. Con eso es con el tamaño de la matriz igual al tamaño del folleto estable. Podría ser, supongamos, supongamos 500. Entonces hemos creado este contador que parte desde 0. Y simplemente piénsalo. ¿ Cuántos libros son propiedad del usuario? Si es propiedad y se va a implementar. Y como lo sé arranca desde 0, Por eso en lo temporal, acabo de enviarlo a la posición 0. O bien cómo enviaremos un valor dentro de él. Entonces si lo desea, puede devolver el temporal también, pero la longitud es mucho cerdo. Para eliminarlo, acabo de crear una nueva matriz con esa longitud de contador, es decir, diez y horas, solo por ejemplo. Y simplemente copie pegue todo desde temporales dos días, resultado, variable y devuelva el resultado. Ahora, el propósito de hacerlo privado era usar estos dos porque estamos creando para funcionar. En primer lugar, el nombre de la función es conseguir terminado. Libros. externa Vistaexternadevuelve memoria de libro. Y simplemente devolverá esta función que es obtener lista de libros con valor terminado a true. Y otra función vamos a crear y nombrarla, subir terminada. Libros. Vista externa devuelve una matriz de estructura de libros. Y devolverá lo mismo que es, obtener lista de libros, pero definitivamente valor con false. Entonces con esta una función, somos capaces de escribir dos funciones más o de lo contrario tenemos que escribir deseo, podríamos tener que escribir por separado, por separado. Será, de nuevo, el código se repetirá y todo. Entonces es muy sencillo. Lo entenderás paso a paso o bien por favor pausa el video e intenta entender la lógica detrás de él. Ahora, la funcionalidad final que necesitamos es establecer este valor terminado de false. Es decir, de verdadero a falso y todo. Porque obviamente si usan la lectura de ese libro, tal vez quiera actualizarlo. Así que simplemente escribir la función. Castigado. Entonces será una función externa. Ahora esta función pedirá ese ID de libro y un valor booleano. Terminado. En primer lugar, comprobaremos si el usuario es el propietario de este libro o no, porque sólo puede leer o ver sus propios libros. ¿ Este ID de libro pertenece al remitente de puntos de mensaje? Esta cosa estará aquí así. Entonces simplemente lista de libros. ID de libro, punto terminado será este valor. Y después de esto, me gustaría, nuevo, hice un evento. Por lo que al igual que el conjunto de eventos terminado, se pedirá ID de libro. Y el valor booleano. Aquí. Emitamos set terminado. Y estamos enviando este ID de libro y el valor terminado. Entonces eso es todo. Para nuestra biblioteca, contrato inteligente. Lo hemos escrito todo. En el siguiente video, escribiremos una prueba unitaria para asegurarnos de que todo esté funcionando correctamente. Gracias. 6. Crea un nuevo archivo de prueba: Hola, bienvenido de nuevo. Dado que Blockchain es inmutable, por lo que antes de desplegar nuestro contrato inteligente, debemos escribir pruebas unitarias para asegurarnos de que todas nuestras funciones y variables en nuestros contratos funcionen correctamente. Y devolviendo los valores correctos. Estaremos usando Mocha Chai para este propósito. Entonces dentro de esa carpeta de prueba, crea un nuevo archivo y nombra Biblioteca dot test, lo siento, biblioteca dot js. Ahora, vamos a Derecha, lo requerido que son las importaciones y toda esa biblioteca que usaremos es Chai, eso es así, tenemos que escribir. Y entonces lo siguiente que vamos a requerir es comedores es igual a requerir e tos. Tenemos estas dependencias cuando creamos un nuevo proyecto hardhead. Así que vamos a crear nuestro escritorio. Y escribiremos contrato de biblioteca. Entonces dentro de ella. Espero que sepas escribir prueba usando sombrero duro. Por lo que ahora antes de ejecutar las funcionalidades y todo, debemos escribir algunos datos o algunas variables. Como en primer lugar, definitivamente, deberíamos tener nuestro contrato bibliotecario y así sucesivamente. Vamos a escribir estas variables. Entonces, el dueño que está desplegando el contrato. Esta segunda biblioteca que es letras pequeñas será como un objeto y chequeo de nuestro contrato. Y esta será una fábrica, se puede decir. Entonces debemos agregar algunos datos ficticios a nuestra biblioteca al principio. Por lo que acabaremos de escribir número de número de libro terminado es igual a cinco. Sólo datos ficticios. Y secundaria const num, libro terminado, error ortográfico. Cuando el libro de nicho es igual a tres. Entonces hayamos terminado libros sin terminar y otra lista de libros terminada. Entonces Mark II utiliza ganchos para organizar la estructura. Esta palabra clave de escritorio lloró se usa para agrupar todas nuestras pruebas y podemos ir como Nest MLL. Podemos anidarla. Es decir, de nuevo, podemos escribir este gráfico. De nuevo, podemos hacer así para que podamos anidar todo. Después está IT cook, son los casos de prueba y todo lo que usaremos más adelante. Entonces tenemos antes de h, Es un gancho. Es decir, tenemos esto. Tenemos esto antes de cada gancho también. Entonces es un gancho que correrá ante todo el escriba y funciona. Entonces en palabras simples, lo que escribas dentro de esto antesCada uno se ejecutará cuando nuestros casos de prueba que se construyen sobre cuatro escritorio separado. Bien, ahora sigamos adelante. Empecemos con antes de cada gancho. En su interior, ganarán una función sinc. Ahora, usaremos esta palabra clave de biblioteca, es decir variable de biblioteca. Y simplemente escribiremos espera éteres, dot get, contrata fábrica. Y el nombre de nuestro contrato es este. Elaboración. De acuerdo, entonces tendremos éste. Deje que la biblioteca, que estará a espera, la biblioteca dot despliegue. Nuevamente, aguardan esto. No tenemos que escribir directamente. Ahora podemos conseguir al firmante así. Propietario es igual a esperar. Inicio. Consigue firmantes así. Ok. Justo, sólo estoy revisando. Lo tengo todo. Todo está ahí. Ahora. Esta es la estructura. Es decir, tendrá una lista de valores. El primer valor irá dentro de esta variable. Esto es, este es el significado de esta afirmación. Ahora inicialicemos este vocalista sin amueblar a esta lista vacía y el lugar más amable a esta lista vacía. Ahora, lo que haremos es añadir cinco datos ficticios a esta lista de libros pendientes y tres datos ficticios a esta lista de libros terminados. Ahora, para eso, voy a utilizar un bucle for que está lejos lead I es igual a 0. Yo menos de número de libro inconcluso I plus, plus. Así, entonces simplemente, voy a crear un objeto de libro. Objetar o se puede decir así. Entonces tendrá nombre. Tendrá año. Tendrá, tendrá un valor de terminado. Esto será falso. Ahora, obtén valores aleatorios de nombre aquí en Arthur, ya que será bucle a través de él. Voy a crear una función aleatoria básica aquí. Así. Función. Obtener entero aleatorio. Ahora acabaré de establecer los dígitos mínimos y máximos y todos y simplemente devolveré Matemáticas dot floor. Entonces no al azar. Multiplicar por máximo menos mínimo. Así. Esta es una función entumecida muy básica. Si estás usando algunos más complejos, si quieres algunos números más complejos, entonces deberías usar algunas otras bibliotecas. Pero ahora mismo, esto hará ese trabajo. Esto es sólo un propósito de prueba. Simplemente obtendré entero aleatorio. Necesito, ¿es de uno a 10 mil? Y sólo voy a llegar a ensanchar así. Nuevamente, para el año. Será cualquier cosa entre 1800 supongamos a 2022. Entonces nuestro tercero sería solo este número aleatorio. Solo recuerda, esto es sólo para pruebas. Quiero unos pocos datos de ese lado. Ahora, después de este objeto de libro, simplemente escribiré await, biblioteca, dot, agregaré libro y libro. Libro, nombre de punto, libro, oreja de punto, gancho. Nuestro tercer libro, terminado. Y entonces empujaré esta información en detalle, esta lista inconclusa. Ese es este valor de libro como este. Así que sencillamente, de nuevo, esto antes de que h se ejecute antes de cada prueba definida, definiremos total para prueba unitaria aquí. Y antes de cada prueba, se ejecutará este pedazo de código. Aquí primero estamos desplegando nuestro contrato y luego obteniendo la instancia del mismo, y luego agregando alguna caja ficticia. Ahora, de nuevo, de manera similar, tenemos que sumar datos para esto que está terminado libro también. Después de este libro inconcluso, nuevamente, escribiremos algo mismo. Entonces lo que voy a hacer es copiarlo, pegarlo aquí. Entonces lo primero que haré es conseguir este número de libro terminado. Aquí. Yo igual a 0 menos que número de libro terminado. Entonces de nuevo, estos serán los libros y esto aquí, valor de definición será cierto. Entonces escribiré espera biblioteca punto, añadir libro, Libro nombre de punto. Entonces aquí empujaré esta información a esta lista de libros terminada. Eso es todo. Por lo que finalmente, ahora estamos terminados con esto antes de cada gancho. En el siguiente video, escribiremos la prueba unitaria para agregar un libro y obtener todos los libros. Gracias. 7. Prueba de unidad para agregar y buscar libros: Así que ahora vamos a escribir nuestra primera prueba para agregar un libro. Después de esto, ante cada cláusula. Escribamos de nuevo que describan grupo y añada libro. Esta será una función. Entonces dentro de ella, úsalo. Ese es el esto viene de la biblioteca también. Estos son los casos de prueba. El primer caso de prueba será, debemos reunirnos y reservar evento. Apenas escríbelo. Si no estás entendiendo, entonces definitivamente al final de la prueba entenderás lo que significa esta línea. Nuevamente, vamos a crear un libro aleatorio. Para esto. Copia, este objeto de libro. Aquí. Todo está bien. Después de esto, simplemente escribe esperar x de nuevo adentro, nuevo dentro de él de inmediato. Biblioteca punto, añadir, reservar. Entonces escribe esas cosas dentro de ella. Simplemente copie y pegue si lo desea. Entonces esto emitirá un valor que es emitir. Entonces nuestra instancia de biblioteca, es decir instancia de contrato. Eso entonces emitirá un evento llamado Add book con argumentos o dirección NOR. Entonces número de libro y terminado más número de terminado un libro como este. Entonces, a qué me refiero con este código, ya que al final de nuestra función ad book en ese contrato bibliotecario, eso es esto, estamos emitiendo esto, ¿verdad? Entonces este evento es éste, que es receptor, que es quien es el dueño del libro. Y esa identificación de libro. Y puesto que el id del libro es la longitud de la lista de libros. Y en nuestra, antes de cada libro, ya insertamos este número de libros que es 53 en la lista. Ese limón arranca desde 0. Entonces en palabras sencillas, lo que quiero decir es que ya tenemos una tarea que es esta tarea ficticia en esa lista. Y esta será la tarea nueve que somos, es decir nueve libro, que estamos agregando, que tendrá un id ocho. Esto tendrá un índice ocho porque en la lista de correo electrónico el índice comienza desde 0. Por lo que este libro tendrá una identificación ocho. Eso es todo. Así. Este libro tendrá una identificación ocho. Simplemente comprobaremos si el evento emitirá esta información o no. Eso es todo. Y para hacer chequear la igualdad o comparar los resultados esperados contra resultado real, podemos usar Chai, lo que nos da tres aseveración es decir, esto espera que haya un tercio también y hay debe también, pero vamos a utilizar sólo esperar. Ahora. Esto añade que se hace una prueba de libro. Después de esto, escribiremos otra prueba unitaria, que será conseguir libros. Vamos a escribirlo. Será una función de nuevo. El primer caso de prueba, realmente, debemos devolver el número correcto de eso es correcto. Libros inacabados. Habrá una función sinc. Ahora, vamos a conseguir los libros de nuestro contrato. Eso es libros de encadenados. Esta blockchain será punto de instancia de biblioteca. Consigue un libro inconcluso que está aquí. Consigue libros sin terminar como este. Entonces lo que esperamos es, en primer lugar, los libros de longitud de punto de cadena deben ser iguales a número de libros sin terminar. Y entonces lo que vamos a hacer es también verificaremos que los libros es decir, que los libros dentro de esta matriz sean iguales a los libros dentro de esta lista de libros de su contrato. Para eso, tenemos que crear una función que verificará los libros y así simplemente anotarlo. El código que estoy a punto de escribir. La primera función será verificar un solo libro, ¿de acuerdo? Se llevará cadena de libros y libro. Por lo que tendremos esperar que el nombre del punto del libro sea igual al nombre de punto blockchain. Entonces tendremos otra espera. Libro. Dot ir dot dos cadenas será igual a punto blockchain, punto a cadena. Entonces esperaremos libro. Nuestro tercero debe ser lo mismo que n igual a blockchain dot Arthur. Y ahora vamos a tener otra función, verificar lista de libros. Entonces serán libros de cadena y lista de libros. Primero esperemos libros de la cadena. Longitud no debe ser igual a lo que es, no es igual. No es igual a 0. Entonces segundo esperar será lalongitud de la cadenade libros longitud de la cadena es esta lista de libros longitud de punto. Entonces ya que tenemos muchos libros, eso es en esta área también y esta área también tendremos muchos libros. Por lo que tenemos que recorrer cada libro y luego revisar. Entonces tenemos, vamos a tener un bucle de barra. Entonces. Se iniciará de I igual a 0, yo menos que lista de libros dot longitud I plus plus. Así que simplemente escribe const. La cadena de libros es igual a los libros de la cadena. Supongo que 0 índice primer índice como este. Entonces el libro será lista de libros, que es aquí que no es una prueba. Y entonces vamos a utilizar este verificable, que esto verifica solo libro. Esto, para este libro en particular, comprobaremos ese nombre o si tanto el nombre como el autor, Eric color, no así en la blockchain y el libro. Entonces simplemente estamos comparando libros almacenados en ese contrato y libros almacenados en la variable local de esta prueba. Eso es todo. Así que de nuevo, ve aquí abajo. Lo que escribiré esta lista de libros verifica. Entonces simplemente enviaré libros de cadena. Y luego lista de libros pendientes. Por lo que definitivamente debería darnos lista de libros inconclusos de esa cadena. Y luego listas de libros inconclusos desde aquí que está en esta prueba. Y de igual manera, tendremos otra condición para obtener el número correcto de libros terminados. Aquí. Esto vamos a conseguir terminado el libro, libros. Entonces los libros de Jane es igual a número de terminados. Esto se terminarán libros iguales. Y luego verifica folletos, eso es libros de Jane. Y este libro terminado enumera, sea igual o no. Entonces eso es todo. Hemos creado con éxito la prueba unitaria para agregar un libro e incluso buscar nuestros libros. Se trata de buscar libros que están inconclusos y buscar libros que están terminados. Eso es todo por este video. Nos vemos en la próxima sesión. Gracias. 8. Realiza las pruebas: En este video, acabaremos de escribir nuestro caso de prueba final y luego, y luego ejecutar toda nuestra prueba y ver si es, si está funcionando correctamente o no. Por último, la prueba será fijar un libro terminado, es decir un libro inconcluso. Vamos a cambiarlo por terminado. Así que volvamos a así, este gris. A continuación, establecer la función terminada. Ese caso de prueba realmente deberíamos establecer evento terminado. Entonces escribe nuestra función. Supongamos que tomemos ese ID de libro a ser 0. Ese es el primer libro. Después miró. Libro. Terminado es igual a verdadero. Entonces simplemente escribir esperar, esperar. Entonces biblioteca dot set función terminada. Enviaremos el ID del libro. Y ese es el decimal qué genes a verdad. Entonces emitirá. Emitirá una función o un evento que se llama set. Los capitalistas fijaron terminado con argumentos, argumentos, ID de libro, y un valor que es cierto. Entonces cuando llamamos a este conjunto terminado aquí, se puede ver que emite un evento cual tiene el ID del libro y un booleano terminado. Eso es todo. De eso estamos hablando aquí. Vamos a comprobar si se trata de una reunión o no. Ahora, es el momento. Ejecutamos nuestra prueba. Asegúrate de guardar todos tus archivos. Entonces en el directorio de tu proyecto, simplemente trae tu terminal y derecha y px, hardhat, prueba y presiona Enter. Recuerde que si alguna vez obtiene algún error aquí después de terminar ese agregado o después de arreglar ese error, use NP x hardhead clean y luego ejecute la prueba de nuevo. Eso es volver a ejecutar esta prueba. Nuestro contrato de biblioteca hash algunos temas. Ya lo puedes ver. Ok. Vamos a revisar. Tenemos algunos temas. Te responderé con una solución. Entonces conseguí la solución. El error que hice fue el primer error fue, es decir, en la cuarta línea, debería tener este sombrero duro, no una biblioteca de pruebas. Estas cartas deben provenir de la biblioteca principal de Howard. Y un segundo error fue, Esta espera debe venir de la biblioteca infantil, pero no debe ser mayúscula, debe ser letra pequeña que sea CHA, pequeña. Vamos a guardarlo. Y de nuevo, conseguiré una nueva terminal. Voy a leer y px. Yo había tenido limpio. Entonces agregaré NP x había tenido prueba. Veamos. Ahora todo está funcionando correctamente o no. Entonces, por fin, puedes ver que todos los casos de prueba están mostrando, vale, eso significa que estamos listos para irnos. En el siguiente módulo, cargaremos nuestro contrato inteligente a la blockchain. Gracias. 9. Cómo escribir el guion de despliegue: Hola, bienvenido de nuevo. En este video, escribiremos esos scripts de despliegue para nuestro contrato inteligente. Simplemente vaya a la carpeta scripts y cree un nuevo archivo por el nombre deploy dot js. Ahora empecemos a trabajar en ello. Exijamos el paquete ethers de la dependencia de hardhead. Ahora simplemente escribe esta pieza de código que se requiere para el propósito de despliegue. En primer lugar, crearemos una fábrica de contratos. Y espero que los comedores consigan contrato de fábrica. El nombre es biblioteca. Entonces crea una instancia que sea contrato por punto comercial. Despliegue. Un contrato de peso desplegado. Solo esperaremos para asegurarnos de que se esté desplegando ese contrato. Y tras día. Después de eso, vamos a consola log dow contract address, que es muy importante. Utilizaremos esta dirección contractual más adelante en el frente. Simplemente escriba la dirección del contrato. Y luego escribiremos otra función. Para ejecutar la función anterior así. Tener un try catch block. Nos referimos entonces procesar esa salida 0 si todo está bien. Y si tenemos algún adder, entonces lees consola dot log, tal vez error registrado. Y escribiremos salida proceso. Uno. Podemos editar es botón de salida adder. Y finalmente escribiremos y correremos main aquí, digamos. Entonces este es el script de despliegue. Solo guarda todo. Entonces para desplegar simplemente anexado terminal en la carpeta raíz. Y simplemente escriba NP x. Heart había corrido guiones. Despliega dot js. Red es piadosa y presiona Enter. Veamos si todo está bien, entonces conseguiremos nuestra dirección contractual. Cómo se ha desplegado con éxito nuestro contrato. Simplemente copia esta dirección y simplemente consigue una coma, eso es Comando. Y simplemente guárdalo para que no perdamos esta información. Ahora, si lo desea, también puede consultar el contrato. Información en. Piadoso. Ethers puede simplemente ir a este sitio web y simplemente pegar su dirección de contrato y simplemente buscar. Ver, tenemos este contrato que se está subiendo se despliegan hace 52 segundos. Simplemente puedes comprobar que sí, nuestro contrato se ha desplegado días exitosos, no hay problema en él. Entonces eso es todo para este video. El siguiente módulo, vamos a trabajar en el front-end y luego interactuar con nuestro contrato diploide. Gracias. 10. Trabaja en el siguiente frontend de js: Hola. En este módulo, vamos a trabajar en el front-end de nuestra aplicación y estaremos utilizando el próximo JS, que es área todavía framework. Ahora en la carpeta del proyecto, simplemente escriba el comando npm. Crear, próxima aplicación. Entonces vamos a estar usando los vivos allí también. Simplemente escribe tailwind css y lo nombraré cliente y presionaré enter. Creará una próxima aplicación básica de JS. De acuerdo, por lo que nuestra siguiente aplicación sillas se crea con éxito. Ahora para interactuar con nuestro contrato inteligente desplegado, necesitaremos dos cosas. Dirección del contrato y que ABI. Para obtener el ABI simplemente copie el archivo json dot de biblioteca, que se encuentra dentro de la carpeta de artefactos y Contratos, luego biblioteca. Entonces tenemos este archivo de biblioteca dot json también. Este cliente. Y este cliente crea una nueva carpeta llamada ABI. Nueva carpeta aquí, ABI. Y luego dentro de esta carpeta, simplemente pegue ese archivo de biblioteca dot json. Es decir, esta es la ABI que se requiere para la tarea, es decir, para esta dirección contractual. Simplemente cree un nuevo archivo llamado config dot js dentro del directorio cliente. Directamente eso está dentro de este crear un nuevo archivo llamado config dot js. Y por dentro, simplemente escribir exportación, const tarea. O simplemente se puede decir que no contrato, simplemente puede escribir contrato. Dirección es igual a y luego copia directamente esta dirección aquí y guárdela. Usaremos esto más adelante. Ahora, si quieres, solo puedes quitarlo. El domicilio aquí. Eso es todo. Ahora también tendremos, necesitaremos instalar pocas dependencias para nuestra, para nuestro próximo proyecto JS. Así que simplemente vaya a ese directorio de clientes en la terminal es cliente de CD. Y simplemente escribir npm, instalar comedores, tipos de componentes con estilo, y pulse Enter. Por lo que los comedores es un bastante interactuar con el contrato inteligente. Tipos revisarán los apoyos y vamos a ver qué me equivoqué. No hice componentes extendiéndose un poco. Combo. Los tipos de Nance comprobarán que los apoyos pasen a tus componentes, coincidirán con tus condiciones. Y asegúrate de que los datos que recibas sean válidos. Quizás tipos, que es sólo para asegurarse que los datos que se envían al componente sean válidos, entonces esos componentes de estilo nos permiten crear componentes y adjuntar estilos a él usando etiqueta ES6, plantilla literales, los estilos que están devolviendo CSS. En palabras simples, es un paquete de terceros utilizando el cual podemos crear un componente como una variable JavaScript que ya está estilizada con código CSS. Lo entenderás más adelante. Así que ahora acaba de ejecutar, nuestra aplicación es npm run dev. Vale, ahora simplemente vayamos a esto. Es host local y ver nuestra próxima aplicación JS está escrita con éxito. Entonces eso es todo. De nuevo, ¿qué lo haré? Sólo voy a hacer esto pequeño. Es así. El domicilio del contrato, justo el CamelCase cartas posteriores me gusta, me gusta así. Entonces lo siguiente que haremos es trabajar en el archivo índice, que está dentro de las páginas. Aquí. Tenemos este índice dot TypeScript archivo. Y voy a quitar todo de aquí y simplemente empezar a escribir desde cero. Lo primero que haré que te quedes y utilices afectan a la gente de React. Entonces tendré domicilio contractual. Dirección del contrato del archivo de config, que está fuera de esto, ese es este archivo de config. Entonces voy a importar éteres, paquete éteres. Entonces voy a importar nuestra ABA que esta biblioteca de ABA slash library dot json. Entonces voy a importar la siguiente página a partir de la siguiente. Entonces también simplemente voy a declarar ventana de plomo. Para que más adelante no dé ningún error. Eso es genial. Nuestro componente que es hogar explorado por la tardanza. Por lo que ahora tenemos nuestro componente irradiado es nuestra próxima aplicación está lista. En el siguiente video, trabajaremos en cómo conectarlos billetera MetaMask en nuestra aplicación. Gracias. 11. Funcionalidad para confinar MetaMask: Hola. En este video, trabajaremos en esa funcionalidad para conectar nuestro Liam válido es la masa molar a nuestra aplicación. Así que primero trabajemos en la función y llamémosla conectar. O vamos. Envolvamos todo en ella. Intenta atrapar. Block simplemente escribirá console.log adder console.logconectándose a mi termostato. Y sencillamente escribiremos eso agregado. Ahora primero, vamos a conseguir el objeto estadio, este que se inyecta a nuestro navegador. Entonces veremos si tenemos un TDM o no. Si no tenemos un TDM, simplemente escribiremos console.log. Es posible que no se detecte la máscara y regrese. Y si lo tenemos, entonces comprobaremos si está conectado a la red correcta, eso es red Garlin o no, simplemente conseguirá la solicitud para ellos mi turno, que se conoce como ayudante en cadena. Y entonces sabemos que sabemos que ID femenina es 0, X5, esto es cartílago e identificación. Entonces lo compararemos si Shane AD no es igual a correlacionar la cadena AD. En ese caso, simplemente alerta alerta de que no está conectado a una red y simplemente regresa desde aquí. Y si esto también está bien, entonces simplemente conseguirá que cuente. Esta m dot una solicitud. Esa solicitud y escucharemos solicitar que mi tercera, que se conoce como cuentas de solicitud, así. Y entonces deberíamos tener un estado que sea variable aquí. Yo lo nombraré cuenta corriente. Para cambiarlo, simplemente estableceré cuenta corriente. Espero que sepan que usted dice enganchar en React. Simplemente significa que esta es una variable y su valor inicial estará vacío. Esta es una función que se utilizará para asignar valor a esta variable. Eso es todo. Entonces así, copio esta función, luego la pongo aquí y simplemente escribo cuentas. El primero. Apenas, así como esto, tendremos múltiples cuentas en MetaMask, solo consigue la primera. Esta es la función que es la función para conectar billetera. Ahora, trabajemos en la porción HTML. Simplemente devuelva un div. Vamos a darle algunos nombres de clase de CSS. Flex, flex llama artículos. Si lo desea, sólo puede copiar lo que todo esto significa. Porque este es un código CSS de viento de cola, F3, F6 para. Entonces. Esto es solo un estilo básico. Eso es todo. Nada más. 68508. Principalmente mamá estará dentro este relleno inferior 20. Entonces tenga otra clase. Me dio el nombre de la clase. Transición sobre la fecha. Cuando dio. Entonces sobre escala, cuando 05, transición, duración 500. Facilidad de entrada, salida. Entonces no dentro de ella. Fuera de ella. Dado H2. Es que cubiertas C x negrita, y B es margen inferior. Para agregar un margen, top 12. Y nómbralo. Gestiona tu biblioteca personal. Así. Entonces, ahora viene nuestra porción es decir, comprobaremos si cuenta corriente igual a vacía, entonces tendremos un botón o de lo contrario tendremos algo más. ¿ De acuerdo? Veamos. Si está vacío, entonces tendremos un botón. El nombre del botón será conectar. Vamos. Ahora vamos a dar un poco de estilo. Nombre de clase. Texto, fuente a base. Al sumar mis tres. Apuestas x 12. Antecedentes. Uno, C, 232, gran margen, fondo. Después escala 105, transición. Y en el evento onClick, simplemente escribiremos connect, bien función de TI. Lo asignaremos este n Si ya están conectados. Entonces tendremos una etiqueta div, que tendrá una ventaja para eso. Entonces billetera, billetera conectada y su dirección de billetera que esta cuenta corriente. Y vamos a darle un poco de estilo también. A continuación, excel. En el día 12, manejando dot. Vamos a guardarlo. Quiero añadir un C. Tenemos esta hermosa billetera de botón completo, cuello. Si hago clic en él, traerá mi MetaMask. Y mi tarea ya está conectada a la red Golgi. Simplemente escribiré a continuación, conectar y decir, bien conectado, este es mi domicilio público. Por lo que hemos creado con éxito esteadies. Hemos trabajado con éxito en la funcionalidad para conectar nuestra billetera My Thomas a la aplicación. En los próximos videos, trabajaremos en el front-end y la funcionalidad para agregar y eliminar libros y todo. Entonces eso es todo. Nos vemos en el siguiente video. 12. Funcionalidad para agregar un libro: Hola. En este video, trabajaremos en una finca que permitirá al usuario enviar un libro. Y diré que tenemos que escribir una función que inserte esa información en esa blockchain. Tan fuerte, Empecemos con la función. Para que la función funcione. En primer lugar, deberíamos tener algunos estados. Se trata de algunas variables. Se puede decir const, nombre del libro. Por lo que definitivamente leer el libro tendrá un nombre. Y para actualizar esa variable, tenemos este nombre de libro conjunto. Te quedaste desde el principio. Estará vacío. Entonces tendremos autor de libros. Y entonces se habrá puesto. El libro está de acuerdo con el estado de uso. Nuevamente, será y entonces ese libro tendrá un año. Es rico oído, ese libro fue publicado. Reserva aquí. Usted dice MD. Y luego finalmente tendremos libro terminado. Eso es muy que este libro está terminado o no. Dicho libro terminó. Entonces, al principio, será no. Obviamente cuando agregamos, agregando un libro, se debe conocer el valor predeterminado. Entonces vamos a trabajar en su función y nombrarla. Enviar libro. Será una función sinc. Entonces vamos a crear el objeto Book. Simular. La clave se llamará BlockName. Entonces tu jefe. ¿ No tenemos que cambiarlo a entero, esa cadena. Esa es la más voluminosa. Entonces tenemos el tercer libro. Entonces tenemos valor terminado. Si el valor terminado del libro es sí, entonces será verdadero o falso. Entienderás esto de lo que estoy hablando, porque se trata de una biblioteca personal. Por lo que tal vez quieras insertar tu un libro que ya está siendo rojo, pero quieres agregarlo en la blockchain. Eso está bien. Entonces, entonces hagamos el bloque try-catch. Intenta atrapar bloque. Tenemos console.log y presentando nuevo libro. Y luego escribe el editor, trae diarrea. Y lo que vamos a hacer es primero sacaremos el estadio desde esa ventana. Entonces si lo tenemos objeto KTM, entonces vamos a escribir const. Proveedor es igual a los nuevos proveedores de comedores. Proveedor de la Web tres. Y pasaremos ese objeto Itanium. Entonces vamos a conseguir el firmante. Firmante será proveedor dot, consiga firmante así. Y luego tendremos una instancia de contrato. Biblioteca. Contrato es igual a nuevo contrato, esta dirección contractual, entonces deberíamos tener la ABA, ABA, y después tenemos que dar al firmante. Y ahora tenemos que llamar a la función agregar libro de ellos. Um, blockchain. Ahora dejar que la transacción de la biblioteca es igual a esperar contrato de laboratorio. Contrato de biblioteca dot añadir libro. Esto está devolviendo el contrato inteligente. Enviaremos libro, nombre de punto, libro, ese libro de oídos. Nuestro libro. Terminado así. Y luego simplemente vamos a registrar la consola esta transacción, es decir transacción de biblioteca. Y si el objeto Tanium no está disponible, que no será el caso. Pero como no tomaremos ningún riesgo, va a escribir, lo escribiremos. No existe el chequeo. Entonces eso es todo. Que esta es la función para nuestro envío de un libro. Simplemente nombraremos esta función enviar libro. Ahora, trabajemos en la porción HTML. Vamos abajo. Aquí. Es decir, en esta billetera conectada. Quieres que se muestre el formulario porque al principio el usuario tiene que conectarlos a una billetera mezquita. Entonces debajo de esto, debajo de esto tendremos, en primer lugar, lo que haré es envolver esta cosa dentro de un div. Dave, sólo espera, sólo estoy pensando en qué se puede hacer? Sí. Sólo dale un div. Cierre este div. Ok. Ahora, después de que esta billetera conectada, Dave, vamos a escribir esa forma que es rápida. Nuevo div. Voy a dar algunos vientos de cola, CSS a ella. Estas cosas serán texto, fuente, semi negrita, y serán Duan De margin, top four. Entonces vamos a tener nuestros campos de entrada. El primer ingreso será texto de tipo entrada, luego el titular del lugar será el nombre del libro. Y este valor será esa variable que mencionamos anteriormente. Y OnChange. Lo que vamos a tener. Cuando obtengamos el valor. Eso es lo que sea que esté ahí, vamos a poner el nombre del libro. Simplemente estableceremos el nombre del libro y pasaremos e punto, punto, valor de punto. Así. Vamos a darle un poco de estilo también. Así que sólo voy a dar algún nombre de clase. No va a enviar texto Excel a bordo. Margen, margen inferior, top one. Así. Entonces le daré un BR, tag. de línea. Y luego otra vez, tendré otro campo de entrada. Así que sólo cópielo y péguelo aquí. ¿ El estilo será igual. Sólo el marcador de posición será libro. El valor será libro y sin cambios. Se establecerá libro. Así. otra parte, tendré el mismo campo de entrada. Así que sólo estoy copiando la BR, eso es salto de línea también. Ese tercero será el valor contable será la oreja del libro. Sin cambios, dicho libro aquí, así. ¿ De acuerdo? Entonces simplemente tiene una etiqueta BR, luego una etiqueta. Simplemente ¿verdad? ¿Has terminado de leer este libro? ¿ Entonces? Tendremos algunos, tendremos una opción para seleccionar esta etiqueta selecto HTML. El valor será libro terminado. Entonces onchange será de manera similar. Como lo que consigamos, lo cambiaremos para poner el libro terminado. E dot, dot, dot, dot. Dentro de esta etiqueta selecto, deberíamos tener opciones. La primera opción será de valor. Sí, ese es el que he leído este libro. Y la segunda opción, ¿sabremos? Es decir, obviamente este libro no es correcto para él. Obtener. Ahora, después de esta etiqueta, deberíamos tener un botón. Sólo estoy pegando ese código porque en el último grabé este curso y acabo de tener un pequeño error. Para que puedas ver esto es un botón con un nombre de clase de texto, Excel, fuente, negrita POR tres, relleno en x2. Después fondo, color off, hash F1, C, 232, redondeado, amplio margen, fondo diez, margen izquierdo cinco. Después pasa el cursor, escala. 105, luego transición. Duración 500, facilidad de entrada, salida. Y onclick. Sólo estoy asignando la función de botón de enviar y darle un nombre del libro. Eso es todo. Entonces si corres, solo puedes pausar el video y escribirlo. Es sólo una línea de código. Ahora guárdalo y ve a tu aplicación. Basta con hacer clic en Connect wallet. Ver el formulario está aquí. Puedes nombrarlo cualquier cosa. Ya tengo un libro porque como te dije, lo hice que hice las pruebas en él. Así que aprende libro de cabeza dura o ella Eso es correcto. Bill Gates. No sé que esté interesado en esto o no y se lo dio 2019. Agrega un libro, entonces. Thomas pedirá aprobación. Simplemente confirmarlo. Veamos si en la consola obtenemos nuestra transacción o no. Sólo estoy revisando, todavía está pendiente. Ya está hecho. Ahora haga clic en Inspeccionar. Y en esa consola tenemos este objeto, que es la transacción completa C. Así que eso es todo para este video. La funcionalidad para agregar un libro está funcionando perfectamente. En el siguiente video, trabajaremos en cómo buscar esos libros de la blockchain. Gracias. 13. Funcionalidad para encontrar libros: Así que ahora vamos a trabajar en la funcionalidad para buscar libros de la blockchain. En primer lugar, necesitaremos algunos estados. Simplemente escribe libros const. Terminado y dicho cuadro. Terminado es igual al estado de uso. Será una matriz. De igual manera, tendremos otra caja. Y terminaron dichos libros y bienes terminados. Ellos usan fecha. Nuevamente, será una matriz vacía. Ahora, trabajemos con la función debajo de esta función de enviar libro. Voy a escribir const, conseguir libros es igual a un fregadero. Entonces obtengo una, igual manera tendremos un try catch block. Si hay algún error ahí, simplemente consolaré console.log. En esa sección try. Nuevamente, tendremos esta línea de código. Sólo copia esto mucho en licencia. Simplemente copiaré dentro. Voy a quitar, lo cual no es necesario. Simplemente eliminaré estas dos líneas porque necesitaremos el contrato de la biblioteca Itanium. El caso del contrato para trabajar para obtener la función de la blockchain. Ahora, simplemente, vamos a conseguir libros. Amueblado es igual a esperar. Contrato de biblioteca dot get. Ahora vamos a revisar. Consigue trabajos terminados. Consigue libros terminados. Y de igual manera, habremos dejado que los libros sin amueblar, contract dot queden inconclusos. Y entonces simplemente vamos a establecer el valor del estado. Eso se establece libros terminados. El libro está terminado. Y los libros inacabados serán iguales a la lista proveniente de libros sin terminar. Entonces así, tenemos nuestra función get booked también. Ahora, para mostrarlo en el front-end, crearemos un componente separado. Entonces dentro de esta carpeta Pages llamada Come on Nance, gumbo, Nance. Y dentro de ella crea un archivo llamado Book JS. Eso es todo. Por lo que será sólo imaginar libro separado, separado. Simplemente vamos a dar un bucle for y va a devolver este componente. Entonces aquí usaré algún estilo si quieres. De nuevo, estoy diciendo que puedes hacer por tu cuenta estas propiedades que hemos instalado al principio, estas dependencias, tipos de prop, y luego importar marcos clave estilo desde componentes de estilo. Ahora, vamos a la derecha, pocos marcos clave de estilo. Y esto. Entonces dentro de esto tendremos, puedes simplemente escribir este código mismo porque como estoy una y otra vez diciendo, no me importa el estilo. Sólo para filtrarse, sólo para lucir decente. Al menos estoy dando a este estilo transformarse. Escala 0.5. Entonces lee por ciento. Nuevamente, acabaré de copiar estas dos líneas. Pegado. Escala uno. Y luego escalamos uno. ¿ De acuerdo? Entonces con componentes de estilo polvo, tendré un contenedor. Entonces esto es sólo estamos dando estilos a un componente directamente. De esto se trata de las dependencias de componentes de estilo . Quedarse eso. Dave, vamos a anotarlo. Animación uno por uno. Deslizando 0.82 cúbicos Bezier en su interior. ¿ Verdad? W 0.390.5750.5651. A continuación, mostrar rejilla. Entonces las columnas de plantilla de cuadrícula serán 38 porcentaje, 20 por ciento, edad de cinco años, porcentaje, 37 porcentaje. Entonces estamos agregando dos REMs, 0.1881.625168, fecha REM, border, solid, un pixel. Frontera, radio. Para celular grande. Línea, altura. Normal. Transición de nuevo suelo, 0.40 como lineal. Margen. Brillante. Uno, soy tasa a 50 pixel. Mostrar bloque en línea. Eso es todo. Entonces eso es todo por la porción de estilo. Si lo desea, solo puede pausar este video y escribirlo de nuevo. Si fui un poco rápido. Entonces en el siguiente video, trabajaremos en el componente del libro. Gracias. 14. Cómo crear un componente de libro: Así que ahora vamos a crear ese componente de libro. Debajo de este pedazo de código. Digamos que const book es igual a esto. Y en este componente aceptaremos algunos apoyos como id, nombre. Aquí se castigan, y una función que será Click book. Terminado así. Volvamos. Volvamos, vamos entonces este contenedor, que ya está estilizado así. Entonces por eso usamos estos componentes de estilo para que cuando lo usamos, ya esté predefinido y funcione como si estuviera funcionando como un componente. Se puede ver, supongamos algún tipo de componente contenedor. Usted lo nombra, usted lo nombra container y podemos usarlo así. Ahora, vámonos. Ese es Dave, nombre. Entonces. Entonces tenemos aquí. Entonces esta etiqueta span, simplemente diremos si terminado igual a, igual a pausa. Si el libro no se está terminando, entonces tendremos algo o más, o bien, simplemente tendremos una etiqueta p. Entonces tendremos un botón. Entonces esta etiqueta p más adelante. Entonces aquí, si tenemos esto, entonces tendrán un botón. Y vamos a darle un poco de estilo al botón. Fuente, negrita, boda en x, y, romper. Ceniza, F, F, 77, F. Entonces tendremos a Dexter White. Después redondeado. Gran margen, top cinco. Nuestra escala 105. Transición. Duración. 500 está en esta carga. Entonces en este botón, lo que tendremos es que tendremos también el método on click. Está, está adentro, por aquí afuera. Vamos a tener el on click. Cuando el usuario hace clic en un clic, entonces se ejecutará esta divertida función, que es Glick Book amueblado. Y tenemos que mandar el DNI. Eso es libro rico. Tenemos que borrar y simplemente nombrarlo. Libro de nicho como este. Entonces esto será cuando, cuando el, cuando la propiedad sea falsa y si es verdad, entonces simplemente podemos dar un párrafo y darle un poco de estilo. Fuente. Bola, negrita, texto, altura 0 d, 71 E. Y se escribirá libro terminado. Digamos. Entonces. Ahora, después de este componente, tendremos algunos tipos de prop que realmente es asegurarnos de que estas propiedades asciendan en este orden. tiempos de prop es, tenemos algunas condiciones que deben cumplirse al principio. Es decir, esta es la cosa donde es como id se adquiere así. Prop tipos número de punto, que debe ser numerado y se requiere. Eso es un nombre. Tipos de prop. requiere cadena, punto. Prop tipos B cadena de capital se requiere de lo que tenemos. Tenemos nuestro talento terminado. Entonces acabamos de copiar. Tenemos lo hemos terminado. Así. Esto, esta cosa es un número. Y por último, simplemente vamos a exportar libro predeterminado, así. El componente de libro está listo. Ahora vamos a mostrar este libro en la página de índice que no es que las páginas de inicio lo muestran. Después de esto. Tenemos este botón Agregar. Entonces tenemos a este Dave. Tenemos este debate a las 132 horas tras día, tras día es Dave. Tendremos otro div el cual contendrá cual contendrá la lista de libros. Demos un poco de estilo a esto también. Flex, flex, columna, justificar, centro, elementos centro como este. Entonces de nuevo, tendremos un Nombre de Clase Dave. No son texto semi negrita, texto grande, centro, administrando el fondo cuatro. Y lo nombraré lista de libros. ¿ De acuerdo? Entonces tendremos una, entonces tendremos un botón. Entonces tendremos un botón y llamará get books. Y este botón volverá a tener clases como Excel a bordo, como esta. Y si eres bueno con Tailwind CSS, también puedes cambiarlo. Estos son solo un estilo básico. Después redondo, redondeado, margen inferior. Entonces nuestra escala cuando 05, duración de transición, 500 está adentro, out. Entonces este es el botón. Y debajo de este botón, haremos nuestra lógica. Simplemente. Lo que vamos a hacer son libros sin terminar. Esa tierra. Si es mayor que 0, entonces tendremos un div. Si la longitud es 0, entonces lo tendremos div, que como me dirijo, simplemente escribirá libro sin terminar. Y dentro de esto habrá número de libros. Es decir, libros sin terminar, no aterrizar así. Y vamos a darle un poco de estilo básico a esto. Fuente. Texto semi negrita, centro, margen, fondo. Para el margen, los cinco primeros. Y si no lo es, entonces simplemente tendremos algún div vacío. Así. No mostrará ningún rumbo a ella porque será, no se ve bien. Entonces por debajo de esto, por debajo de esto, déjame ver. Debajo de esto, vamos a tener otro div nombre de clase será flex. Fila Flex justifica centro, centro de artículos. Y aquí tendremos como estos libros, inacabados, mapa, así. Y aquí vamos a conseguir libros individuales. Y en estos libros individuales, llamaremos el componente del libro. Vamos, vamos a importar doble componente aquí. Importar componentes libro como este. Ahora esto aceptará algunas propiedades. Libro clave que ID, ID, parse int. Sólo diremos libro. Nos aseguramos de que sea una identificación. Es decir, es n tasa numérica. Digamos que el editor irá más tarde. El nombre del punto del libro es igual a las barras. Libro, la oreja. String, así así son terribles. Libro. No. Después terminó. Libro. Dot, terminado, punto dos. String. Entonces Haga clic en libro. Terminado será la función click, click Reservar amueblado. Tenemos que crear esta función. Digamos que tenemos este componente de libro. Está bien, aquí. Esto será esto. Veamos. ¿Hay algún editor? Simplemente llamaremos a este componente Este click libro terminado. Aquí. Click Ok, la ortografía, supongo, terminó C. Ok. Ahora, estos están funcionando correctamente. Se puede ver que tenemos que crear una función flip book terminado también. Y para estas líneas rojas y todo, si quieres, solo puedes ir al archivo ts config dot JS, eso es aquí. Y luego aquí, cambia el valor estricto a false. El distrito a falso, Eso es todo. Si haces esto, esas líneas rojas y esas cosas se resolverán. C, Esos ahora están resueltos. Entonces eso es todo para este video. En el siguiente video, trabajaremos bajo funcionalidad para cambiar la librería hace a terminado. Gracias. 15. Funcionalidad para cambiar el estado del libro: Así que bienvenidos de vuelta. Trabajemos en nuestra aplicación. V4. Bueno, para asignar esta función es decir, obtener libros. Ese botón. El botón aquí, que es cuál es este. Así que simplemente escribe onclick y eso es un buen libro. Y también de igual manera, esto mostrará todos los libros que están terminados. Entonces de igual manera, tendremos, tendremos que mostrar libros que son, que son, que están terminados en ello de esta manera. Se trata de libros que no están terminados y tenemos que mostrar libros que están terminados. Entonces lo que voy a hacer es simplemente copiar este trozo de líneas. Digamos que supongamos lo primero que copiaré esto y lo pegaré aquí. Será escribir libros. Libros, terminados. Libros, terminados. Dot longitud en lugar de lo mismo y realmente libro terminado, eso es todo. Y luego volveré a hacer el mapeo así. Así que sólo cópielo y pegarlo abajo aquí. Haré ese mapeo con libros, terminados, mapa de puntos. Y tendrá libros en estos días terminados. Y ahora vamos a trabajar en la función aquí y la nombraremos. Libro, terminado, copiado y pegado aquí también. Esta será la función que vamos a crear ahora. Libro del lago terminado. Sube aquí. Función creativa. Const así. Un fregadero. Aceptará identificación, así. ¿ De acuerdo? Por lo que ahora de nuevo, tendremos try-catch y todo. De igual manera como siempre, ya que tenemos que conectarnos al contrato inteligente, que ya está desplegado, simplemente escribe console.log y cambiando estado del libro. Simplemente imprima el encabezado también. Entonces en ese bloque try, simplemente tendremos, vamos a copiar de, copiar desde aquí. Sólo copia estas líneas. Pega aquí. Bien, tenemos al proveedor. Entonces la transición de la biblioteca será, simplemente se establecerá. Terminado id a través de esta manera, digamos consola dot log. Entonces esta es la función. Y la mayoría de las funciones son algo similares. Nada tan elegante. Sólo estamos llamando a este que está listo terminar esto aquí. Éste, se necesita un ID de libro y un booleano terminado. Entonces simplemente vamos y mandamos el ID y el booleano, eso es todo. Entonces, por último, hemos escrito todos esos códigos para la aplicación. Me alegra que hayas visto cosa ahora, en el siguiente módulo, probaremos nuestra aplicación si todo está funcionando correctamente o no. Y si obtenemos algún error, lo resolveremos lo antes posible. Gracias. 16. Prueba la aplicación completa: Hola. En este video, realmente hemos probado el funcionamiento de nuestra aplicación. Hemos estado citando de los últimos videos, pero en este momento, es hora de probar si todas las funcionalidades están funcionando o no. Entonces lo primero que voy a hacer son genes que red de mis tomates de Gormley para ser supongamos. Y luego haré clic en Connect wallet. Mira, no estás conectado para llamarla red, por lo que nos está incitando a cambiar nuestra red. Esto está funcionando bien. Vamos a la colina. Entonces cuando hago clic en Conectar violeta, MetaMask anexa, y luego a continuación y conecto. Ok. Ahora tenemos estos libros. Si te acuerdas, ya agregamos un libro azul antes. Entonces si hago click en Get Books, entonces tenemos dos libros inconclusos. Mira, este es uno, aprende árbol web y el otro es aprender sombrero duro. Entonces esto se ve muy bonito. Y además si escribo aprender, hay una fecha de comercio es la próxima. Js. Mark Zuckerberg y 2018. Supongamos que si simplemente escribo encendido, si lo cambio a sí, vamos a ver qué pasa. Se pueden formar alertas. Veamos si la transacción sigue pendiente. Tomará algún tiempo. Ya está hecho. Por lo que ahora, si hago click en Get Books, mira que tengo libros terminados. Pero estoy bien. Este error. Entendí por qué son dos porque aquí nos olvidamos de cambiar. Entonces los libros terminados serán de esta longitud. Digamos eso, ese es un error muy pequeño. Es, está corregido. Libros terminaron uno. Y si hago click en este libro terminado, aprende sombrero duro. Nuevamente. Mostrando esto, luego hago clic en confirmar. Ese motivo principal de este curso fue entender los fundamentos de la blockchain. La tecnología no es esa interfaz de usuario. Si lo desea, puede usar cualquier herramienta de interfaz de usuario front-end y hacerla muy hermosa. Porque podrías estar pensando que esto es muy simple, pero lo principal es esa funcionalidad. Ahora, es gasto conjunto función terminada. Este gasto. Ahora está hecho. Si hago click en Obtener Libros. Ver, esto también está en la sección terminada y ahora tenemos un libro inconcluso y al libro terminado. Para que la aplicación completa esté funcionando impresionante. Y creo que estamos orgullosos de nosotros mismos que tengamos construyendo una aplicación descentralizada desde cero. Por lo que espero que hayan disfrutado del curso. Asegúrate de ver otros cursos míos también. Gracias. Que tengas un buen día.