Crea una aplicación Todo descentralizada con Solidity

1. INTRODUCCIÓN AL CURSO: Blockchain es la fuerza impulsora de la próxima generación, a la que también se le conoce como nunca tratar. Blockchain reinventa la forma en que se almacenan y administran los datos. Web tres abraza la religión decente y se está construyendo y es propiedad de sus usuarios. Entonces como resultado, muchas nuevas oportunidades para desarrolladores como nosotros en este dominio. En este curso, aprenderemos a crear un completo descentralizado para hacer replicación desde cero. Estaremos usando solidez para el hardhead de desarrollo de contratos inteligentes para pruebas y despliegue. Sed es comunicarse con el contrato. Mcnemar's para firmar la transacción, React JS para el Fontan, y en última instancia como la blockchain les proporcionaría. Al final del curso, comprenderás todos los conceptos requeridos para solicitar un trabajo de desarrollador ni siquiera son construir tu propia aplicación en la blockchain Akkadian sin perder más tiempo. Inscríbase ahora y comencemos. 2. Cómo hablar de el plan de estudios: Hola, bienvenidos al primer video de este curso, donde aprenderemos a construir una aplicación descentralizada del mundo real. Entonces en la actualidad, todo el mundo está hablando del árbol web. E incluso si conoce los fundamentos del árbol web, hasta y a menos que desarrolle una aplicación de pleno derecho utilizando todas las tecnologías, no se le considera como desarrollador. Obviamente, debes saber solidez, reaccionar, hardhead, un E test.js. Al menos debes tener algún conocimiento de lo que hace estas tecnologías para poder continuar con este curso. Porque aquí nuestro enfoque principal será construir la aplicación completa. Entonces, antes de avanzar, discutamos sobre el curso. estudios son, cuáles son todos los pasos que vamos a dar en este curso. El primer paso será configurar el entorno de desarrollo utilizando hardhead y más nodo KTM. Utilizaremos el servicio de alquimia. Después después, escribiremos la lógica del contrato inteligente usando solidez para esa aplicación de tareas pendientes. Es decir, cómo agregar nuestra pantalla o eliminar esas tareas pendientes de la blockchain a nuestra aplicación. Después escribiremos la prueba unitaria con el fin probar el funcionamiento de la lógica del contrato inteligente. Entonces desplegaremos contrato inteligente a la red que es esa red de prueba. Después, después crearemos el front-end de la aplicación utilizando el framework React, vamos a desarrollar una app muy básica. Después usando un dot js sed y MetaMask, vamos a interactuar con el contrato inteligente, que ya se está desplegando a la red de pruebas. Y al final, revisaremos todas las funcionalidades y el funcionamiento de la aplicación descentralizada. Entonces eso es todo. Y también asegúrate de tener instalado MetaMask y tener algunos detalles de prueba fríamente en tu cuenta. No voy a volver a montar como ya tengo, decilitros y todo en mi billetera. Así que por favor ver cualquier tutorial sobre él y continuar con ese curso. Es muy sencillo. Entonces eso es todo por este video. Nos vemos en la próxima sesión. Gracias. 3. Cómo configurar el proyecto de gorro: En este video, aprenderemos a configurar el entorno de desarrollo para nuestra aplicación con hardhead. Entonces surge la pregunta, lo que está caliente en hardhat es un entorno que los desarrolladores utilizan para probar, compilar, implementar y depurar aplicaciones descentralizadas basadas en la blockchain de Itanium. Su competidor es conocido como trufa. En este curso, usaremos hardhead, pero más adelante, si quieres explorar la trufa, por favor adelante porque nunca sabes cuál se utilizará en el proyecto de tu empresa. Ahora, empecemos a hacerlo creando una carpeta llamada aplicación de tareas pendientes. Primero crea una carpeta. Después dentro de esa carpeta de Penn ocho terminal. E inicializar un paquete NPM vacío usando este comando y BM en él guión. ¿ Por qué? Ahora tenemos este archivo package.json. Después para instalar hardhead. Simplemente recuerda este comando, npm, install, dash, dash, save, dev, hard hat. Tomará muy poca fracción de tiempo. Depende de tu conexión a Internet. Pero el sombrero duro ha ganado mucha tracción dentro de este televidentes antes solo era trufa. También. Está hecho. Simplemente se puede ver que hay algunos y el IMC alguna vez, no es tan importante. Después de eso, solo escribe np x hardhat. Nos ayudará a crear un proyecto hardhat. De las opciones, seleccione el primero que es crear un proyecto de muestra básico. Luego presione Entrar, pulse Enter. Ver. Estas carpetas se han creado automáticamente. Y también hardhead nos está diciendo que instalemos estas dependencias. Esto nos ayudará con la prueba, bien con cuidadosa y biblioteca de éteres para interactuar con el contrato inteligente. Por lo que simplemente copie esto y pegue y presione Enter. Solo recuerda, estas dependencias son importantes cada vez que estés usando sombrero. Además, si quieres saber más sobre hardhead, puedes ir a su página web oficial, hard hat dot ORG y acaba de leer sobre este material. En este momento solo asumo que conoces los fundamentos de Hardhead. Cualquiera que sea el código que he escrito, lo puedes encontrar en la sección de documentación de su página web. Ver npm install save-dev escuchado tenía un NP x que nos da esta opción. Entonces nos dirá que instalemos estas dependencias. Eso es todo. Ahora, veamos. Todavía está instalando esto. Esto también llevará algún tiempo. Hasta entonces. Simplemente puedes consultar la documentación oficial. Está bien, ya está hecho. Ahora. Instalaremos algunas otras dependencias también, lo cual no está relacionado con hardhead. Simplemente escribe npm install, entonces. Ben Zeplin recorta contratos y dot ENV. Es decir, se trata dos dependencias diferentes de plumas hasta plano es, tiene métodos predefinidos los cuales ya están probados y probados para ser utilizados en cualquier proyecto. Si más adelante lo necesitaremos, entonces sólo lo usaremos. Y dot ENV proporciona funcionalidad para escribir datos sensibles en un archivo separado importado. Ahora, tenemos listo nuestro proyecto, proyecto hardhead. Simplemente anexar nuestro proyecto en el archivo de código VS, abrir proyecto de tres. Y para ello, K. Y también solo nos aseguramos de que tengas instaladas estas extensiones. Eso es principalmente sólido. El d esta extensión de solidez se está instalando en su código VS. Sí, esa es la única dependencia requerida. No hay una extensión de dependencia. Eso es todo. El proyecto hardhead ahora está configurado con éxito. En el siguiente video, incluiremos nuestra configuración, cómo Alchemy y MetaMask. Gracias. 4. Teclas de alquimia y Metamask: En el último video, hemos configurado con éxito este proyecto. Ahora es el momento. Incluimos alquimia. Alchemy es una plataforma de desarrolladores que nos permite construir aplicaciones descentralizadas y escalables y confiables sin la molestia de administrar la infraestructura blockchain por nuestra cuenta. Así que simplemente ve a alchemy.com y crea una nueva cuenta. Ya tengo una cuenta, así que ingresaré a ella. Redirigiremos a nuestro tablero de instrumentos. Aquí. Lo primero que tenemos que hacer es crear una nueva app haciendo clic en este icono. Simplemente haz clic aquí, luego dale un nombre. Yo se lo daré. Para hacer eso. Será una cadena media y la red será coherente. Y ahora simplemente haz clic en Crear app. Entonces aquí, debajo de esta clave API, haz clic en Ver clave y copia este enlace HTTP. Usaremos esta clave HTTP más adelante. Ahora, lo siguiente que tenemos que hacer es obtener la clave privada de nuestro MetaMask. Se puede instalar matemáticas yendo a la página web de matter mass dot au, y luego instalar la extensión para el navegador. Si estás aquí, estoy usando Chrome. Es posible que estés usando algún otro navegador. No voy a montar la cartera desde cero porque ya tengo sed y todo en ella. Asegúrate de pausar este video y ver la configuración de la nueva cartera de MetaMask. Y también cómo conseguir probar una prueba en esa cuenta desde YouTube o vía Google. Así que simplemente haga clic en este icono y luego ingrese su contraseña. Y asegúrate de cambiar la red a fríamente. Aquí tengo polígono hardhead, estas son redes personalizadas, pero se asegura de tener red coli y tener algunas pruebas éteres en ella. Simplemente para obtener esa clave privada, haga clic en los detalles de la cuenta aquí, luego haga clic en Exportar clave privada e ingrese su contraseña. Asegúrate de nunca revelar estas claves con nadie más. Su dirección de cuentas, es decir, esta dirección es su clave pública. Si se requiere más adelante. Ahora, usaremos URL de alquimia y clave privada de Matt Thomas en nuestra configuración de hardhat. Para eso, acude a tu proyecto. Y ya tenemos instalada la dependencia requerida, que es ese punto ENV. Como ya dije, no se recomienda pegar esa información sensible directamente en el código. Ahora, en esa carpeta de proyecto, crea un nuevo archivo llamado dot ENV. Digamos que esto está en el directorio raíz. Y luego pega la pasta aquí, todas las claves, es decir creando variables, alquimia, URL y wallet. Clave privada, privada. Después copia y pega. De nuevo, sólo basta con ir a mis Tamas. Entonces cuento es exportar clave privada y copiarla y pegarla aquí. Eso es todo. Ahora tenemos las llaves. Tenemos que configurar nuestro archivo hard hat dot config dot json para esas claves simplemente en la parte superior. Este código requiere nuestro paquete dot ENV dot config. Y luego en este módulo que exporta archivo, simplemente escribe redes, luego ve red lineal. Y aquí en la URL, escribiremos proceso punto ENV, dot alquimia URL. Y en las cuentas, que es una lista, escribiremos proceso punto ENV, vallate, clave privada. Eso es todo. Es así como configuramos alquimia y MetaMask con nuestros proyectos hardhead para que posteriormente podamos desplegarnos a la red de deuda. Gracias, Eso es todo por este video. En el siguiente módulo, crearemos el contrato inteligente para nuestra aplicación Todo. 5. Crea un contrato de tarea: Bienvenido de nuevo. Ahora es el momento de crear nuestro contrato inteligente de solidez. Simplemente ve a carpeta de contrato aquí verás un contrato ficticio el cual es mayor que alma, no lo necesitamos. No le haremos nada. Simplemente crea un nuevo archivo y nombra tarea, contrato, alma. Y ahora vamos a crear un nuevo contrato antes de eso. En la parte superior, solo asegúrate incluir esa licencia y así versión de solidez. Después crearemos un contrato y ellos hicieron el contrato de tarea. Ahora empecemos con la nueva estructura, que es tarea. Nuestra tarea tendrá identificación. String, hace ese texto, ese es el título de tarea, y se elimina un booleano. Entonces este camión, vamos a tener una matriz que sostendrá toda esta estructura de tarea, que será una matriz privada, y lo nombraremos tarea. Entonces definitivamente alguien agregará una tarea. Por lo que mapearemos ID de tarea a la dirección del dueño de la muerte. Por lo que acabaremos de escribirla tarea al dueño. Y también tendremos algunos eventos. Es decir, nuestro primer evento será al anochecer. Tendrá identificación del anochecer del destinatario. Y nuestro segundo evento se retrasará el anochecer. Tendrá ID de anochecer y un booleano. Entonces vamos a entender este código. Nuevamente. Los eventos se utilizan para iniciar sesión información en esa cadena de bloques. Creamos una estructura de tareas. La solidez permite al usuario crear su propio tipo de datos en forma de estructura. La estructura contiene un grupo de elementos con un tipo de datos diferente es entero, string, booleano, lo que queramos. Entonces tenemos esta tarea que llevará a cabo toda esa tarea que están presentes en nuestro contrato inteligente. Y entonces simplemente estamos mapeando ese ID de tarea a la dirección de la tarea o no para que podamos conseguir o podamos buscar con mucha facilidad. Lo siguiente que haremos es crear funciones. La primera función será función para agregar una nueva tarea. Simplemente escriba la función al anochecer. Aceptará texto de tarea. Esto es simplemente es el booleano muerto y hacerlo externo. Definitivamente se llamará desde front-end externo. Entonces lo primero que tenemos que conseguir es el id de tarea Y simplemente lo que vamos a hacer es hacer esa longitud de esta matriz ese ID de tarea. Entonces el primero será 0, luego será uno. Y definitivamente después de incrementarse, será diferente. Entonces simplemente presionaremos a esta tarea, Eddie, nuestra nueva tarea. Vamos a crear esta tarea. Y como nos está pidiendo id, vamos a dar aquí el id de tarea, luego hace el texto y se retrasa. ¿ Viste estos todos estos todo lo que tenemos que enviar. Entonces mapearemos esta información en nuestra tarea para honrar el mapeo, simplemente escribiendo los EU al propietario, luego el ID del anochecer. Y esto le pertenece a esto, un remitente de mensajes que esté solicitando o esto llamando a esta función, almacenará un remitente de mensajes que esté solicitando o esto llamando a esta función,la de esa persona en reposo. Y sencillamente, al final. Vamos a escribir eso. Llamaremos al evento. Y el nombre del evento es add. Tarea. Destinatario será remitente de mensajes. Y el ID de tarea es ese ID de tarea. Por lo que esta información será almacenada en esa blockchain. Entonces eso es todo. Espero que hayas entendido esta función. Simplemente una función llamada Add task. Está aceptando, hace escritorio y se elimina valor. La visibilidad es externa, ya que no estamos llamando a esta función dentro de este contrato. Por lo que acabamos de escribir simplemente externo. Entonces para el id de tarea, que es simplemente hacer la longitud que está al principio, será 0. Entonces una vez que se agregue el anochecer, la longitud será una. Y será aleatorio, siempre S, ya que estamos empujando esta tarea dentro de ella. Por lo que se incrementará automáticamente. Entonces estamos mapeando a la tarea dos, dueño. Y luego finalmente estamos emitiendo este evento. Pero eso es todo por este video. En el siguiente video, escribiremos las otras dos funcionalidades. Eso es que Eliminar tarea y recuperar mi tarea. Gracias. 6. Función de tarea de eliminación y búsqueda: Ahora en este video, escribiremos la funcionalidad para eliminar una tarea. Simplemente escribe el nombre de la función, eliminamos tarea. Entonces será un externo. También. Para eliminar la tarea, pediremos ese ID de tarea. Y se elimina booleano, lo cual será cierto. Ahora, primero, revisaremos el mapeo, es decir, si este remitente es dueño o no de esta tarea, sugiero que escribiremos dos propietarios esta identificación del anochecer igual, remitente de mensaje igual. Si es cierto, simplemente iremos a la estructura de tareas. Es a este ID de tarea. Entonces se elimina punto, igual a se elimina. Entonces me encuentro con ese suceso de borrado atardecer y dar hace Eddie y se borran parámetros. Así que simplemente, escribimos esta función de eliminación. Se está pidiendo ID de tarea y se elimina. Se trata de una función externa. Entonces antes de eliminar, sólo estamos teniendo un pequeño cheque si esta tarea pertenece o no a la dirección de esta Cenicienta. Si vamos a ir a esta tarea, Eddie. Y simplemente en ese ID de tarea, esa es la posición de la tarea en esta matriz como ver este id de tarea El id es la posición también. Entonces simplemente iremos y escribiremos, ¿id dot se elimina igual a esto eliminado? Lo que sea que estemos enviando, lo cual definitivamente será cierto. Y luego simplemente, estamos emitiendo estos retrasos, borrar tarea, incluso. Entonces, la funcionalidad final será buscar o conseguir nuestra propia tarea. Así que simplemente escribe función, consigue mi tarea. Será una función externa. Simplemente verá que no va a cambiar nada y volverá tarea. Eso es un hecho realmente pedir un fastidio de tarea. Dentro de eso. En primer lugar, vamos a crear una tarea temporal al nombrarlos bonitos. Y renovamos. La longitud será la longitud del punto del anochecer. Entonces lo que tenemos que hacer es definitivamente en esta tarea en absoluto, las tareas están siendo buenas en es este usuario o lo que sea, 1015 usuarios, sean cuales sean los usuarios que sean, toda la tarea estará en este array. Entonces ahora lo que tenemos que hacer, tenemos que recorrer este array y averiguar cuáles son las tareas que son pertenecen a este remitente y luego almacenar esas tareas en esta matriz temporal. Entonces ya que vamos a hacer un bucle, primero vamos a tener esto. Es decir, este será el recuento del número de tarea propiedad de este usuario. Entonces tendremos un bucle for. Tú y yo somos iguales a 0. Yo menos que anochecer, longitud oscura. Y simplemente yo plus plus. Entonces mapeamos, vamos a hacer qué? Usaremos el mapeo. Entonces ¿id comienza a partir de 0? Si es igual al remitente del mensaje. Y si la propiedad de tarea que es esta se elimina es falsa, eso aún no se está eliminando. Entonces en esta matriz temporal con esta posición de contador, simplemente a esta estructura de tareas, definitivamente en esta tarea editar estructuras de datos. Entonces se almacenará en esta matriz temporal en esta posición que es 0. Y entonces vamos a aumentar el contador que es ahora, tendrá una tarea en ella. Y luego otra vez, se bucle. Si encuentra que el propietario es el mismo. Entonces de nuevo, en una, en una posición en esta matriz, almacenará esta siguiente tarea de NESC y cambiará el contador a dos. Entonces así es como está funcionando. Ahora. Tenemos la variable temporal, esa tarea que está siendo propiedad del usuario, pero esa longitud de esa tarea es mayor y los elementos serán menores. Por lo que sólo ocupará espacio innecesario. Entonces lo que vamos a hacer es crear una nueva variable llamada resultado. Y será una matriz de contador de longitud que es sólo deuda. Y simplemente, vamos a recorrer esta variable temporal, U int I es igual a 0 I menos que contador I plus plus. Y eso es simplemente copiar y pegar todo lo que hay ahí en ese temporal. Y al final, devuelva esta variable de resultado. Entonces esta es la lógica detrás de eso. Obtener toda la funcionalidad de mi tarea. Lo que hemos hecho es primero, vamos a crear, primero hemos creado esta función. La visibilidad es externamente. No cambia nada así que es vista. Por lo que definitivamente no está tomando ninguna fase gaseosa. Entonces tenemos que precisar lo que está regresando. Esa es una matriz de estructura de tareas. Simplemente, al principio, tenemos esta variable temporal, que es simplemente almacenar la memoria. Y es una matriz de longitud, longitud de punto de tarea, que se puede suponer 100. Entonces tenemos este contador es 0. Es decir, ¿cuál es el orden? Se puede decir, ¿cuántas tareas tiene este usuario? Entonces en eso for loop, simplemente estamos haciendo un bucle a través de toda esa tarea presente aquí y comprobando si el dueño de ese ID, ya que la idea también comienza desde 0, este ID de tarea, ver aquí. Entonces el ID de tarea pertenece al mensaje punto remitente y tarea que posiciono que es 0 posición. Supongamos que se iniciará y se elimina. Se elimina. Se puede decir que la propiedad es falsa porque queremos, no queremos mostrar tarea que se borran o que esta función la hará eliminar. Y vamos a encontrar, vamos a almacenar aquí todos los de esta variable temporal. Y ahora ya que la longitud es más grande, o la tarea podría ser diez, pero la longitud es de 100. Por lo que sólo estamos creando otra variable llamada resultado. Y copiar y pegar todos los elementos presentes en esta variable temporal a esta resultado y será menor que contador. Y por último, estamos devolviendo el valor. Entenderás el concepto una vez que lo uses. O si lo desea, solo puede pausar el video e intentar entenderlo una y otra vez. Porque estos conceptos son muy importantes. Eso es todo. Hemos creado con éxito nuestro contrato inteligente. En el siguiente video, haremos las pruebas de este contrato inteligente. Gracias. 7. Prueba de escritura de nuestro contrato: Hola. Entonces ya que tenemos nuestro contrato listo en este video, probaremos todas las funcionalidades. Ya sabemos que blockchain es inmutable. Entonces antes de desplegar nuestro contrato, escribimos pruebas unitarias para asegurarnos de que todas nuestras funciones y variables en nuestros contratos inteligentes estén funcionando. Y devolviendo esos valores correctos. Estamos utilizando Mocha Chai para este propósito. Simplemente recuerda, hemos instalado estas dependencias mientras llevamos Instalando y configuramos en instalar hardhead en nuestro proyecto. Así que simplemente ve a la carpeta dest y dentro de ella, crea un nuevo archivo con el nombre dusk, contract, test dot js. Y el primero, importa nuestras bibliotecas que necesitaremos esperar de la biblioteca infantil. Y luego necesitamos e tos de la interbiblioteca, saudita de la biblioteca hardhat. Ahora, vamos a escribir nuestro código de prueba. Describa, lo nombraremos contrato anochecer. Entonces tendremos esta función. Simplemente eliminando la función de flecha. Si lo desea, puede tener la función de flecha. Y antes de escribir la prueba, tendremos algunas variables a este contrato. Entonces vamos a tener esto dentro de esta pequeña carta, vamos a tener sí contrato. Será el objeto o la instancia de nuestro contrato. Esto lo entenderás más adelante. Entonces tendremos al dueño. Y ahora, como es una prueba, deberíamos tener algunos datos ficticios. Por lo que el número del hotel o la tarea ficticia será de cinco. Y también tendremos una variable llamada el ask. Más auto utiliza ganchos para organizar su estructura. Este escritorio lloró G palabra se usa para agrupar nuestra prueba, que puedes anidar ser como, siempre y cuando lo quieras. Esto es, de nuevo se puede escribir descrito. Entonces otra vez puedes escribir esto así. Entonces tiene otros ganchos también. Es yo d, este también es un gancho. Se trata de un caso de prueba que utilizaremos en los próximos videos. Entonces tenemos antes de enganchar aquí en la biblioteca más tranquila. Esto antes de gancho se ejecuta antes de la primera comer. Nuestro escribano de escritorio. Es decir, si escribimos justo antes, se ejecutará antes de que los primeros sean el bloque describe, entonces tenemos ante cada uno, que lo usaremos para correr antes de cada uno. Es decir, correrá antes de cada cláusula o de la declaración, o comer o describir las huellas. Entonces tenemos después de él. Es un gancho para correr después de eso. ¿ Es realmente huida? Se describen ocho. Al principio mismo. Te hablé de esto. Id. Gancho. Ese caso de prueba. Casos como este, tenemos. Ganchos y lo más importante es antes de cada guía de escritorio. Y digamos ahora, utilicemos eso antes de cada uno. Antes de cada uno. Lo siento, será así. Y dentro de esto tendremos una función sinc. Aquí desplegaremos nuestra tarea Contrato. Con esta variable. Estamos utilizando esta variable primero y simplemente escribir await, comedores, dot get, contract factory. Nuestro nombre del contrato es sí contrato. Entonces tenemos el dueño, que vendrá de un peso, comedores punto consiguen firmantes. Entonces dentro de este contrato de pequeñas tareas, tendremos esa instancia de este contrato desplegado. Esto es sólo una simulación. Entonces esta tarea será una matriz vacía. Y insertaremos tarea ficticia dentro de esta tarea total. Es yo es igual a 0. Seré menor que número de tarea total, que será de cinco. Yo más, plus. Vamos a conseguirlo. Lo hace. Check is text será simplemente que lo que quieras agregar hace número parece hacerlo aleatorio. Además i entonces se elimina, es falso. Entonces vamos a tener un peso sí contrato DOD. En la función pass estamos utilizando. Anochecer, oscuro, se elimina el texto. Esta funcionalidad es esta que está en lo hace es pedir tareas que texto y valor booleano. Entonces simplemente empujaremos, luego Bush anochecer. Entonces en esta variable, estamos empujando este valor. Por lo que esto antes de h se ejecutará, antes de cada prueba definida. Posteriormente definiremos 23 pruebas unitarias. Y antes de cada prueba se ejecutará esta pieza de código. Sí, lo estamos, estamos desplegando nuestro contrato y luego obteniendo una instancia y luego agregando cinco tarea ficticia en ella. Ahora, después de esto, simplemente creemos un nuevo escritorio que sea prueba unitaria para agregar una tarea. Describiremos, como dije, podemos anidarla. Es para la funcionalidad Agregar tarea. Funtion. Entonces ahora usaremos la TI, la cláusula it. Y esto sólo la sugerencia auto. Entonces id, la condición del escritorio es debe cumplir en evento de tarea. Será una función sinc. En la parte superior, simplemente escribiremos, crearemos una nueva tarea ficticia. Tarea. El texto es igual a, nuevo. Tarea, se retrasa entonces será falsa. Entonces esperaremos y usaremos la palabra clave expect de esa biblioteca infantil. Esperaremos que primero el contrato de tarea. En la tarea, agregaremos esta nueva tarea, anochecer, el atardecer, elimina el anochecer, el atardecer, el texto, y el anochecer. Emitirá. Lo va a m. Primero tenemos que mandar la instancia. Y lo que emitirá hace eso es éste. Esto al atardecer, emitirá argumentos, argumentos, propietario, dirección, y número de tarea total. Entonces tal vez te estés confundiendo. Entonces esto se debe a que al final de la función de tarea, estamos emitiendo el evento Add task. Con argumentos, se puede ver remitente del punto del mensaje y el ID de tarea. Y desde esto antes de cada cláusula, ya tenemos cinco tareas. Es decir, aquí estamos agregando cinco tareas. Entonces esta sexta tarea que estamos agregando aquí, vamos a tener el ID cinco como índice de inicio desde 0. Entonces es por eso que esto es correcto. El ID será de cinco, porque en ella hay cinco tareas. Y el índice es que siempre vamos a empezar desde 0 en esta tarea, este ID de tarea. Si quieres, solo puedes esperar e intentar entenderlo una y otra vez. Porque esto es muy importante. Y haces un cheques de calidad o para comparar los resultados esperados con un resultado. Podemos utilizar la biblioteca Chai, que nos da tres aserción. Ese es primero uno que estamos usando expect, luego hay aseverar y hay debe. En este tutorial, solo usaremos este esperando que este plato emita el valor esperado o de lo contrario mostrará error y la tarea no será exitosa. Se puede decir ejecutado. Entonces eso es todo por este video. En el siguiente video completaremos las otras dos tareas y realizaremos nuestra prueba. Gracias. 8. Ejecuta la prueba de unidad: Hola. Ahora es el momento de escribir esa prueba unitaria final. Ya hemos escrito la prueba para agregar una tarea. Ahora vamos a escribir una prueba para conseguir todo lo que hace, eso es ponerse en función de tarea. Entonces en la cláusula, dejar que se devuelva el número correcto de tarea total. Fregadero. Almuerzo. Entonces vamos a haber continuado. Mi tarea es igual a esperar. ¿ Obtiene el punto contractual mi tarea? Es decir, esto consigue mi tarea, es ésta. Consigue mi tarea. Después comprobaremos en qué vamos a comprobar. Mi punto de anochecer. La longitud debe ser igual. Éste que es número total de anochecer. Entonces lo que estamos comprobando es agregar esto antes de cada cláusula. Estamos agregando cinco tareas en esto, usando esto, ¿verdad? Usando esto, estamos agregando cinco tareas. Por lo que cuando esta condición se dispare ya, habrá cinco tareas en nuestro contrato inteligente. Por lo que sólo vamos a comprobar si está siendo correctamente lo que se inpute o se puede decir que está ahí o no, solo comprobaremos eso. Ahora. La siguiente prueba simplemente será eliminar el polvo que se retrasa al anochecer. Funtion. Entonces esa condición debe ser que emita tardía anochecer. Debe emitir. Eliminar tarea incluso. Entonces es una función sinc. Entonces const dusk id es igual a 0. Entonces const es igual a verdadero. Ahora simplemente esperan. Esperar. Contrata Dot Dot Date Tarea cuando la llamamos enviando este ID de tarea y pide borrado, debe emitir. Debe este evento delete task con argumentos id y dusk borrado. Entonces simplemente, lo que estamos haciendo es que estamos llamando a esta funcionalidad Eliminar tarea. Y como aquí emitirá este evento de tarea de eliminación, estamos comprobando si se trata de una reunión o no con ese ID de tarea y este booleano. Y solo recordamos aquí simplemente estamos actualizando que se elimina valor ya que no podemos eliminar un dato de una blockchain. Eso es todo. Ahora, salva todo. Y puesto que tenemos listas todas esas condiciones de prueba, es hora de ejecutar nuestra prueba. Simplemente agregue un terminal en su directorio raíz y escriba el comando y px hard hat test. Veamos si todo está bien. O podría haber algunos errores. No lo sabemos. Veamos, vamos a ver si trabajar o no compila con éxito. Esta mayor es la predeterminada. No tenemos nada que ver con ello. Ver toda la tarea, todas las pruebas unitarias han pasado con éxito, es decir, al anochecer, obtener todo lo hace eliminar, hace todo, está funcionando. Solo recuerda si alguna vez recibes algún error, luego después de arreglar ese error, usa el comando y px hard hat clean, y luego ejecuta esa prueba de nuevo porque puede haber algo de efectivo y no quieres conseguir atascado ahí. Pero en nuestro caso, no hay nada malo. Todo está funcionando. Felicitación. Entonces eso es todo para la porción de pruebas unitarias. En el siguiente módulo, desplegaremos nuestro contrato a la VLR, a la red de prueba. Gracias. 9. Escribir el guion de la implementación: Entonces como nuestra lógica de contrato está funcionando, en este video, escribiremos las implementaciones, crearemos e implementaremos nuestro contrato a esa red de pruebas. Dentro de la carpeta scripts, simplemente crecer e ir y crear un nuevo archivo y nombrarlo desplegado dot js. Ahora vamos a escribir el código requerido. Esto primero, necesitaremos la biblioteca de Ito. Entonces vamos a crear una función llamada main. Será una función sinc. Y entonces de igual manera, tendremos una pista libre de hechos por contrato. Tres, comedores Obtener contrato. Fábrica, el nombre es anochecer. Contrato de esto es el nombre de nuestro contrato. Entonces tendremos una instancia con este código, contrato para trade dot deploy. Entonces esperaremos y nos aseguraremos de que el contrato se esté desplegando con éxito. Y después de eso, escribiremos console.log y vamos a salir dirección desplegada. Es muy importante. Recuerda este contrato, lo usaremos apenas dicho contrato punto dirección. Ahora, tenemos que llamar a esta función principal. Y simplemente para eso, tenemos que crear otra función llamada fregadero. Ya que este es el procedimiento y solo recuerda hacerlo como tenemos que llamar a la función principal. Y si lo es, todo está bien, entonces saldremos del proceso. Y si no, cogeremos el error. Consola registraremos el error y simplemente escribiremos proceso que salga y un editor. Y al final, simplemente llame a la función principal. Eso es todo. Esta es la forma de desplegar un script. Sólo tenemos que recordar, eso es todo. Ahora, Eso es guión está escrito. Desplegarla. Tenemos que usar un comando. Nuevamente. Trae tu terminal y escribe np x sombrero duro. Luego ejecuta scripts en esa carpeta, ve a desplegar dot js. Entonces la red que usaremos se llama temprano como este nombre, este G, E, LI, lo mencionamos en el archivo de config hardhead dot. Después de eso, solo presiona enter. Tomará algún tiempo. Por lo que sólo hay que esperar. Porque ahora esto se cargará o esto desplegará este contrato inteligente a la red de prueba real. ¿De acuerdo? Ahora está hecho. Este es ese contrato a vestida. Asegúrate de copiarlo y pegarlo en algún lugar, como aquí. Porque lo necesitaremos más adelante y no queremos simplemente olvidarlo. Ahora para comprobar que si este contrato está ahí con éxito, debemos ir al sitio web de escaneo de éter cortés. Basta con hacer click sobre esto, el primero. Después aquí, pega esa dirección del contrato y haga clic en la búsqueda. Esto dará toda esa información de bloque. Ver, hace 50 segundos, se creó este bloque. Y con esto, nos aseguramos, estamos seguros de que todo salió bien. Si lo desea, solo puede hacer click sobre él y ver desde qué dirección fue empujada, precio del gas y todo. Entonces eso es todo para este video. Ahora todo se hace desde la parte backend. En el siguiente módulo, configuraremos el front-end usando el framework React. Gracias. 10. Cómo trabajar en el frontend de React: Hola, bienvenido de nuevo. En este video, trabajaremos en la sección front-end usando el framework React. React JS es una biblioteca JavaScript que es muy popular. Y solo espero que conozcas lo básico de ello porque definitivamente este no es el tutorial de React. Nuestro enfoque principal será solo construir una interfaz de usuario básica y probar nuestro contrato inteligente. Ahora para configurar un React proyectos, simplemente vaya a la abierta la terminal y vaya a eso. Tienes que hacer directorio DHAP y ejecutar ese comando y px, Create, React, app, name it client. Ahora, pocas carpetas, estructuras y archivos serán descargados. Para la aplicación React. Tomará algún tiempo. Entonces solo puedes revisar tu código y ver lo que has hecho. Esa es la tarea contrato de escritorio anochecer. Y debido a que estos conceptos son muy importantes, ya que una vez que construyas un proyecto, entonces podrás construir múltiples proyectos utilizando los mismos conceptos. ¿ De acuerdo? Tomó un poco de tiempo, pero ahora todo se está instalando. Acude a este cliente y se puede ver que tenemos fuente oblicua y todas las carpetas creadas. Ahora, para interactuar con nuestro contrato inteligente desplegado, necesitaremos dos cosas. En primer lugar, es el contrato abordado y el segundo es el ABI. Para conseguir el ABA, simplemente copie ese archivo de contrato de tarea dot json, que está dentro de artefactos, es decir estos artefactos. Entonces tenemos contratos. Entonces tenemos puntos de contrato de tarea vendidos. Y tenemos este expediente. Simplemente copie este archivo y vaya a la carpeta del cliente. Y crea aquí, justo dentro de la carpeta fuente, crea una nueva carpeta llamada EBI y pegarla. Eso es todo. Eso está dentro de la carpeta fuente del cliente. Creamos una nueva carpeta llamada ABI y pegamos ese archivo JSON, que contiene el contrato ABI. Lo primero que dije fue esa dirección contractual. Ya tenemos esa dirección contractual cuando la desplegamos en nuestro video anterior. Simplemente crea un nuevo archivo y nombrelo, config dot js dentro de la carpeta fuente del cliente directamente que está aquí. Y nómbralo, config dot js. Y simplemente escriba el comando export, const, task, contract, address, y pegue nuestra dirección, esa es ésta. Aquí. Estos dos fueron requeridos. Ahora, tenemos que instalar pocas dependencias también. Simplemente ve a ciego doblado, no me gusta este cliente de CD. Asegúrate de estar en la carpeta del cliente e instalar ethers. Eso es npm instalar éteres. Esto es necesario para interactuar con el contrato inteligente desde el front-end. Y luego siguiente dependencia, que se requiere es npm install emotion slash edX. Entonces estilo. En MU I. puedo hacer ADL. Entonces MU una deidad. Eso es npm, instalar emoción slash reaccionar emociones menos que MU I, iconos material que MUS slash material. Estos son simplemente algunos archivos relacionados con la interfaz de usuario de estilo y material que usaremos más adelante. Ok. Todas las dependencias ya están instaladas. Sólo quería ver a Jason de Becky. Sí. Todo está ahí. Ahora trabajemos en ese frente. Lo primero que haremos es dentro de la carpeta fuente, tenemos, tenemos app.js. Quitaremos todo aquí y comenzaremos a escribir desde cero. Lo primero que haremos es importar, React, use date, hook, use, effect from React. Entonces vamos a importar el siguiente campo Martin del material de MU. Entonces vamos a importar tarea, archivo de tarea. Y recuerda, este archivo que no hemos creado. Tenemos que crear y enfermar. Y luego vamos a importar. Simplemente vamos a importar dot CSS, notas dulces, sss como este. Entonces lo siguiente a importar es la dirección del contrato. Acabamos de decir la dirección del contrato del anochecer de ese archivo de configuración. Archivo de config. Entonces lo importaremos desde la biblioteca. Entonces finalmente, vamos a importar esa tarea ABI desde la carpeta EBI, luego hace contrato adyacente. Por lo que estos fueron todos los insumos requeridos. Entonces esto tenemos que escribir y crear un componente de app y exportar componente. Y de nuevo, espero, ya sabes todos estos conceptos reaccionan. Vamos a crear algunos estados. Tarea. Y pondremos al anochecer. Usar estado. Será una matriz vacía. Mantendrá nuestra tarea. Entonces el siguiente será de entrada. Entrada. Afirma que esta es esa entrada de texto de ese campo de texto. Entonces tenemos cuenta corriente. Cuenta corriente. Usa el mismo comprobará si mi damasco está conectado y luego es la dirección de la cuenta. Y el último que vamos a tener aquí es la red correcta. Y se pondrá. Correcto. Red es igual al estado de uso. El defecto será falso. Se asegurará de que se seleccione la red de pruebas de ajo. De lo contrario, se le pedirá, alertará al usuario para que cambie su red. Ahora. En primer lugar, vamos a crear dos nuevos archivos dentro del directorio fuente. En primer lugar será tarea dot js. Como ya mencioné que tenemos que crear aquí, simplemente aquí, ¿verdad? Importar hace dot CSS, que vamos a crear justo ahora. Y este componente, esa es la tarea y exportación por defecto. Anochecer. Posteriormente enviaremos algunos apoyos también. Y en esa fuente, de nuevo, crea un archivo llamado dot CSS. Entonces eso es todo para este video. Hemos escrito mucho código. En el siguiente video, trabajaremos en configurar nuestra máscara Meta y cómo conectarnos con ella. Gracias. 11. Conecta la cartera de Metamask: Hola, bienvenido de nuevo. Por lo que ahora lo primero que haremos es conectar nuestra billetera MetaMask. Claro, tenemos que escribir una función para eso. Vamos a escribirlo desde cero. Yo lo voy a nombrar, conectar billetera. Será una función sinc. Ahora, dentro del bloque try catch escribirá toda la lógica requerida. Y en herramientas CAD en el registro de consola AD Connect cosa para hacer una máscara, el encabezado. Y en ese bloque try, primero, conseguiremos el tedio. Tedium, musical a objeto Window, objeto de ventana. Entonces comprobaremos si tenemos el objeto bacterium o no. Si no tenemos objeto italiano, entonces simplemente vamos a consola log met damasco. Damasco no detectado. Es decir, el usuario no ha instalado esa materia extinción masiva en su navegador. Y si todo está bien, entonces comprobaremos qué red es entonces un Dharma, mi damasco, rosa conectado, eso es rinky sé piadoso, lo que sea. Por lo que vamos a conseguir el ID de la cadena. Jane id es igual a esperarlo tedium, esa petición. Entonces en ellos a las diez, le daremos identificación de cadena. Y luego simplemente vamos a consola registrar el AD de la cadena también solo para nuestro para nosotros porque para las pruebas y lo conectaré a la cadena, cadena AD. ¿ De acuerdo? Ahora escribiremos la idea de cadena de la red central, que es 0, pequeña x cinco. Solo recuerda que esta es la idea de cadena de red cortesana. Si está utilizando la arruga B, entonces será 0 X4. Esta información se puede obtener en internet también. Solo puedes Google ella. Entonces lo primero que haremos es comprobar si j no es igual a j en ID, entonces simplemente vamos a alertar, ¿verdad? No vas a ir temprano a la red y simplemente regresar de aquí. Y si todo está bien, esa es la red está bien, entonces vamos a cambiar el estado que se establece la red correcta a true. Al menos sabemos que la red está conectada. Es decir, la red correcta está conectada. Entonces vamos a conseguir las cuentas con este pedazo de código que Tanium dot request. Entonces aquí método que usaremos es solicitar cuentas y consola registrar esta información también. Entonces la cuenta de la herida de registro, y luego la primera cuenta. Cuenta el índice 0 y los genes sí establece. Ese es este valor de cuenta corriente a mi cuenta de damasco. Ok. Por eso espero que hayas entendido este código. Esta es sólo la forma en que conectamos a mi Damasco. Sólo tenemos que entender qué es eso. Primero estamos comprobando si está conectado ir contigo o no. Y segundo directamente, estamos solicitando que cuente. Eso es todo. Nada elegante. Simplemente eso con la práctica, recordarás esos códigos. Eso es todo. Ahora se realiza la función o la porción del método. Es hora de que escribimos la parte HTML también. Entonces dentro de la función, este tercero, está fuera de esta función de conexión válida. Simplemente devolveremos ese componente. Eso es retorno. Y Dave, primer lugar, comprobaremos si esa cuenta corriente está vacía en el usuario se ha conectado, es Matter mask o no. Entonces cuenta corriente. Si está vacío, entonces haremos algo. O si no vamos a hacer otra cosa. Si está vacío, entonces simplemente escribiremos al ganar la etiqueta central, le daremos un botón. Botón. El nombre de la clase será simplemente botón. Y en el on click, evento asignará la función de conexión válida. ¿ De acuerdo? Y vamos a nombrar a este conectar como guerra. Ok. Ahora, en la otra parte, nuevo, comprobaremos si la red correcta está ahí. Entonces vamos a hacer algo. O como vamos a hacer otra cosa. Y si la red correcta está ahí, simplemente podemos emitirla Dave. Simplemente emita un Dave, lo nombraré. App. Entonces. Simplemente escribe etiqueta H2 y administración de tareas, nuestra aplicación de tareas pendientes, sea cual sea la aplicación de gestión de tareas. Entonces me gustará la etiqueta del formulario. Voy a usar una etiqueta de formulario. Y entonces le daré un campo de texto. Marco de texto. Cualquier botón. Botón será mayúscula. Ahora, solo escribe este HTML conmigo. Nuestro enfoque está más en la porción blockchain. Estas son muy básicas. Estos en Blake al primer evento onclick. Simplemente le daré otro ahora mismo. No quiero hacer nada. Este botón tendrá al anochecer escrito en él. Y en ese campo de texto, simplemente escribiré ID, ID, delineado, básico, luego etiquetar, hacer que hacer. Entonces variante. Delineado. Entonces estilo. Simplemente tendré margen 0 píxeles y cada píxel es pequeño. Valor. El valor será de entrada. Es decir, esta entrada. Y sin cambios. Onchange simplemente escribirá que esto, lo que sea que obtengamos estos textos en la e, establecerá entrada e punto, punto obtener valor. ¿ De acuerdo? Estos son todos los textos relleno de aceite proviene del paquete de material MUN. Entonces, si lo deseas, puedes buscar al respecto en Google. Depende de ti. Entonces en la porción S, simplemente escribiremos un div. Simplemente escríbelo, Dave. Y dentro de ella escribiremos. Por favor vaya al núcleo ESNet y vuelva a cargar la pantalla. Quiero decir, solo darán algunos nombres de clase si quieres. Estas banderas. Llama solo la cara centrada, centrada, mi juego. Junta. Los dos siguientes Excel. ¿Por qué? Más adelante si lo desea, puede usar CSS como tailwind CSS, y depende de usted. Entonces eso es todo. Para la función Connect vallate. Y la porción HTML. Es decir, si esa violeta actual está vacía, entonces le mostraremos el botón. Si no, eso es si la red está ahí y también la cuenta corriente está bien, entonces tendremos el botón Agregar. Simplemente tendremos el botón Agregar o de lo contrario acabaremos de leer. Por favor, conéctese a la red de esta manera. Entonces eso es todo por hoy. En el siguiente video, escribiremos otras funcionalidades también. Gracias. 12. Añade funcionalidad de tarea: Hola, bienvenido de nuevo. En este video, trabajaremos en la funcionalidad Agregar tarea. Pero antes de eso, ejecutemos nuestra aplicación. Simplemente vaya a la carpeta, abra la terminal y npm. Inicio. Veamos cómo está funcionando. Lo sentimos, primero tenemos que ir a la carpeta cliente y luego escribir npm start. Porque el cliente es la parte React js. Puede llevar algún tiempo. Tenemos que probar que conecta la funcionalidad de la billetera, ya sea que esté funcionando correctamente o no. Veamos. Espero que no hayamos hecho ningún error ya que lo está haciendo por primera vez. Es por eso que esto tomando tanto tiempo. Pero ver servidor de desarrollo. Empezó. Es algo tomándolos demasiado. Lo sé. Sí. Ya está hecho. Pero hombre. Ok. Sé que no hay nada como el CSS y ahora lo haremos, vamos a darle estilo más adelante. Pero en este momento solo hago clic en Connect wallet. Ok. Sucedió. Podrías estar pensando cómo sucedió, pero porque ya tenía esta cuenta conectada en este momento, si actualizo y hago clic en Conectar o vamos a ver, ha llegado la notificación. Y si leo a continuación y los conecto, entonces aplicación de gestión de tareas. Esto está funcionando correctamente. Trabajemos ahora en la funcionalidad Agregar tarea. Simplemente. Y el anochecer es igual a un fregadero. E dot prevenir el defecto. Esto se utiliza para no presentar el formulario. Eso es todo. Para evitar el comportamiento por defecto de esa forma. Entonces crearé un objeto de tarea. Anochecer. El texto será de entrada se retrasa, serán falsos. Entonces vamos a trabajar en ese trate catch block. Aquí. Simplemente voy a presentar esa tarea. Entonces en ese intento, nuevo, tendremos un TDM o revisado. Entonces simplemente comprueba si está ahí o si no, si no está ahí, entonces solo estoy revisando todo. Sé que ya se ha iniciado sesión la cuenta, pero aún así sólo para estar a salvo. No existe el chequeo. Entonces si está presente. Ahora, trabajemos. Proveedor de Const es igual a nuevos éteres que los proveedores, Dodd, Web tres, Heider. Es Hadean. Entonces conseguiremos al firmante. Es const diciendo que es igual a proveedor, no conseguir Signer. Entonces nos pondremos en buen camino. Instancia, hace contrato es igual a mu comedores que contraigan. Entonces tenemos que mandar tres cosas. En primer lugar, ¿el contrato aborda esa tarea, ABI y hace cianuro. Y luego finalmente, con ese contrato de tarea, llamaremos a la función llamada add, que está en el contrato inteligente. Enviaremos anochecer. Texto Anochecer. Se elimina la tarea. Y como esta es una tarea de sincronización, entonces obtendremos la respuesta. Y esta respuesta. Aquí, simplemente lo escribiremos en ese conjunto de datos. ¿ Eso es esta matriz dicha tarea. Y vamos a anexar todas las tareas que ya están ahí con esta nueva tarea que estoy usando el operador spread aquí con esta nueva tarea, ¿de acuerdo? Y luego si hay algún error y lo cogeremos. Si también obtenemos algún error, entonces simplemente lo atraparemos. Y registro de consola que agregó. Eso se añade ocurrió. ¿ Por qué agregar una nueva tarea? Eso es todo. Y al final de la función volverá a hacer vacío el InputField. Establezca la entrada vacía. Eso es todo. Entonces así es como escribimos la funcionalidad Agregar tarea. Apenas llevamos la web a proveedor desde la biblioteca Keras. Y mandamos a mi Damasco, Los cuentos y conseguimos ese Firmante. Después creamos el objeto contract y simplemente llamamos a la tarea Agregar. Entonces lo que hice es en la respuesta, simplemente actualizo eso hace estas cosas para que en la interfaz de usuario las cosas se pongan, también se cambien. En esta tarea. Añejo este anochecer también. Entonces eso es todo. Para este video. En los próximos videos, completaremos las principales funcionalidades. Gracias. 13. Cómo eliminar y averiguar la funcionalidad de la tarea: Hola, bienvenido de nuevo. Ahora trabajemos en la funcionalidad de tareas tardías de ese día. Simplemente vamos a crear la función IF, eliminar tarea. Tenemos que mandar una llave también. Esa es la clave es el ID del elemento. Primeras cosas. Envolvamos todo en el bloque try catch como de costumbre. Después V, la consola lo registraremos. Entonces en ese intento, las mujeres simplemente hacen lo mismo, que entonces antes. Es un objeto de ventana. Entonces si ADM está ahí, entonces esa cosa como consola dot log check no existe. Si tomamos modismo está ahí, entonces lo que tenemos que hacer es lo mismo. Esto, estas líneas, sólo copia las tres primeras líneas. Aviso nuevo proveedor es KTM, luego el firmante del contrato y todo. Y por último, simplemente escriba delete. ¿ La transacción es igual a esperar, anochecer contrato Dot Dot Dot Dot Dot Task. Y esa clave y se borra será verdad. Entonces. Entonces lo que haremos es conseguir toda esa tarea de la funcionalidad que ya tenemos en el contrato inteligente. Es conseguir mi tarea. De verdad llamarlo tarea contrato dot, consigue mi anochecer. Y luego dijo ese valor de tarea aquí, usando set dusk y sesgo que son objeto atardecer, ese es el resultado. Entonces esto simplemente fue que la tarea sólo esta línea de código era nueva. Y de igual manera, tendremos una funcionalidad de adder llamada tarea de cat all. También será igual. Entonces lo que voy a hacer es en primer lugar, este const de escritura, conseguir tarea se va a hundir. Y luego lo mismo. Intenta atrapar bloque. Aquí. Cancelaremos ese adder de ley. Y en ese intento, cuelga, simplemente copie esto, pegarlo aquí, y eliminar esa tarea de eliminación. De acuerdo, entonces tenemos al proveedor, tenemos el firmante, tenemos el contrato de tarea. Entonces tenemos plomo. Todas las tareas es igual a esperar contrato de tarea dot conseguir mi tarea. Y simplemente diremos esa tarea aquí, eso es todo. Entonces esta es la funcionalidad para conseguir todas las tareas. Esos códigos son realmente muy similares. Si tienes otra forma de escribirlo para que la repetición no esté ahí, será muy bueno. Pero para un principiante, esto es suficiente. Entonces eso es todo por este video. Nos vemos en la próxima sesión. Gracias. 14. Creación del componente de tarea: Hola, bienvenido de nuevo. En este video, crearemos ese componente de tarea. Entonces si recuerdas, hemos creado este punto que es archivo test.js. Aquí. Trabajemos en ello. Importaremos pocos elementos de la interfaz de usuario material. Esta lista, lista, elemento, lista, elemento, lista, elemento, texto del material MU I. Y lo segundo que vamos a importar eliminar puedo de mi TV es Iconos de UI ese material luego eliminar. El componente de tarea. Aceptaremos dos inmuebles, es decir anochecer, atardecer y en función Lago. Entonces devolverá la lista. Devolverá una lista Lista Nombre de Clase Por Hacer. Entonces lista, ítem. Y al menos un texto DEM. Pero podría comer es igual a es igual al anochecer. Texto anochecer. Entonces tendremos un ícono Eliminar. El tamaño de la fuente será grande. B, C, D, 0.7. Y al hacer clic la funcionalidad estará en el click, que estamos pasando como propiedad. Ahora, tenemos que trabajar en el archivo app.js. Es decir, en primer lugar, usaremos el efecto estadounidense Hooke. Y al principio, estas funciones deben llamarse una vez es decir, ponerse en tarea y conectarse a todo ello. Tan pronto como se renderice la aplicación, se deben llamar a estas dos funciones. Entonces lo que vamos a hacer es en este botón que está al atardecer, tenemos que quitar el null y derecho y asignarle la funcionalidad Agregar tarea. Y luego después de que finalice suficiente granja, tendremos algunos, ustedes gravarán. Es lista desordenada. Y en eso tendremos mapa de puntos de anochecer. Entonces yo DM. Cada ítem será tendremos ese componente de tarea. Y dentro del componente de tarea le enviaremos, tal vez sea item.name ID. Entonces El siguiente ítem, no texto al anochecer. Después en Blake, enviaremos funcionalidad simplemente retrasada con el ID del artículo. El ID es la clave o puedes decir que mi día, lo que quieras. Entonces lo adeuda. Ahora, todo está ahí. Que nuestra app esté terminada. En el siguiente video, solo le daré algún CSS básico. Y luego finalmente, probaremos nuestra aplicación. Gracias. 15. Estilos básicos de CSS: Hola, bienvenido de nuevo. En este breve video, acabaremos de implementar algún estilo CSS básico para nuestro componente de tarea. Así que solo tienes que ir a este archivo CSS de punto de tarea que creamos anteriormente, y luego simplemente escribe el nombre de clase lista de tareas pendientes. Vamos a dar un poco de estilo. Display. Carece. Justificar, contenido centrado. Alinear, artículos. Centro. Entonces serán 800 pixeles. Frontera un píxel. Entonces ln, gris claro. Y luego margen, abajo. Entonces escoge celular. Y hagámoslo importante. Entonces. Lo siguiente que me gustaría dar indicando es que por diez, eso es 18 conectar billetera. Pero entonces tenemos esta clase. El color de fondo será para C, E, F, 50, este es el verde. Entonces frontera será ninguna. Entonces coloreado. Blanco. Embolsado. Pixel a pixel. Entonces texto, alinear, centrar. Cubiertas, decoración, ninguno. Display. En línea. Bloquear. El tamaño será de 16 píxeles. Margen. Darán haciendo d por ciento. Y por último, alinear los artículos al centro y simplemente guárdelo. Este es un estilo muy básico. Y también hemos importado el archivo style.css. Sólo me aseguraré de que sea importante ese fin. Simplemente me gusta así. Entonces eso es todo por este video. Ya está terminada toda la solicitud. En el módulo final, simplemente comenzaremos a trabajar de esa obligación. Y también agregaré ese código en algún lugar al final. Simplemente lo puedes encontrar para que puedas, si tienes algún problema, puedes compararlo con tu código. Gracias. 16. Cómo probar la aplicación completa: Hola, bienvenido de nuevo. Por lo que hemos completado con éxito la solicitud. En este video, simplemente pasaremos por el trabajo de la aplicación y comprobaremos si todo está funcionando bien o no. Ahora, iré a la carpeta, carpeta raíz, luego cd a cliente y escribiré npm. Inicio. Espero que todo funcione bien. Y de todos modos, si K está en algún editor, intentaremos resolverlo. Veamos, vamos a ver si ya se ha conectado. Digamos que en primer lugar eliminaré la conexión. Simplemente elimine C. Si actualizo, entonces automáticamente esa función de conexión válida se ejecuta a través de ese efecto de uso. Si lo hago cancelar y si cambio la red para traer QB. Y luego haga clic en Conectar billeteras, vea que no está conectado a la red. Esta alerta está funcionando correctamente. otra parte, simplemente cambiaré de red demasiado girly. Y luego haga clic en Conectar violeta. Ahora la billetera está mostrando la notificación. Simplemente iré y haga clic en Siguiente conectar. ¿ De acuerdo? Por lo que trataré de comprobar que al anochecer, aprender únicamente el idioma y al atardecer no está funcionando. ¿ Por qué no funciona? Veamos. Aprende únicamente mordió D. Y al anochecer, tienen que comprobar. Tengo esto al anochecer evento. Ahora revisemos la consola de Inspeccionar. Presentar eso hace Contrato. Jason sí sometió esa tarea. Algo no está bien. En ocasiones relacionadas con el vago. Hace contrato o queso en una multa democrática de la EPA también. 07 tarea Pregunta a un VI cianuro. Ok. Tercero, revisando en pocas cuadras. Lo que hice fue simplemente cambiar esto. Eso es const, un BA va a requerir. Y luego esta ABA, escribiré por todas partes que esté aquí, así como eliminar, así como obtener todas las tareas. Veamos si está funcionando correctamente o no. Ahora, veamos. Si voy y aprendo solidez. Añade dass, sie. Ahora mismo. Por último, al menos que ahora se muestra mi máscara. Simplemente iré y escribiré, confirmaré. Y ahora está funcionando correctamente. En mi Thomas también se puede ver que la interacción contractual está ahí. Simplemente dejará que sea éxito porque éste venía del sitio local, es decir de la variable local. Pero ahora se hace la instrucción del contrato. Y si refresco, esto ahora viene del contrato inteligente. Ahora, ese error, espero que hayas entendido, simplemente quita esta línea de código y escribe const ABI va a requerir esto. Volveré a aprender gorro duro y simplemente añadirnos. Y ahora voy a dar click en confirmar. Nuevamente, asegúrate de que diga lo que diga si ahora refresco y solo vendrá uno porque el otro no estaba almacenado correctamente en esa blockchain. Mira, es gasto. Entonces hay que esperar. Esta transacción está terminada. Con el fin de mostrarlo en tu UI. Esperemos. Ahora, está bien, instantáneo. Ahora si refresco ahora, entonces están a las dos. Y tratemos de trabajar en la funcionalidad de eliminación. Doy click en el Eliminar. Metamask nos está mostrando. Ahora. Si simplemente hago clic en el Eliminar y confirmo, veamos qué pasa. Asegúrate de dejar que se complete la transacción. ¿ De acuerdo? no se ha completado la transición. Ahora si actualizo, puedo verlo eliminado con éxito. Sólo hay una tarea. Y si voy con mi id de contrato, si voy a ella tiene tipo de networking. Haga clic en Buscar y luego ver qué pasa. Vale, obviamente, todo está funcionando correctamente. Toda nuestra app está terminada. Espero que hayan disfrutado el curso. Has entendido cómo se desarrolla una aplicación básica, muy básica. Y con este conocimiento, podrás desarrollar cualquier aplicación que quieras. Eso es todo. Gracias. Que tengas un buen día.