Crea un clon de Twitter de Web3 con Solidez y Polígono

1. INTRODUCCIÓN AL CURSO: Pero esa ha sido una de las plataformas de redes sociales más populares a nivel mundial. Sin embargo, los usos criptográficos se dan cuenta de que una versión descentralizada de Twitter sería altamente beneficiosa ya que eliminaría los aspectos negativos de una plataforma centralizada. En este curso, aprenderás a construir un clon descentralizado de Twitter usando solubilidad y blockchain poligonal, los usuarios podrán autenticarse usando billetera MetaMask y luego podrán compartir sus pensamientos con todos en esa plataforma. Cada usuario tendrá una etiqueta aleatoria generada cuando se inscriba por primera vez. Incluso pueden cambiar su imagen de visualización y banner en su sección de perfil. Posteriormente, comenzaremos escribiendo y probando ese smart contract usando solidaridad y remix. Entonces desplegaremos el contrato, la red de pruebas de Mumbai usando hearted. Después de eso usaremos React js para construir nuestro front-end y finalmente usaremos JS de Ito para interactuar con el contrato diploide. Para subir imágenes, utilizaremos un proveedor de servicios IPFS de almacenamiento web de dos puntos. Al final del curso, aprenderás todo lo necesario para convertirte en un desarrollador web full-stack sin perder más tiempo. Inscríbete ahora y comencemos. 2. Crea un proyecto de hardhat: Hola, bienvenidos al primer video donde configuraremos el entorno de desarrollo. Antes de seguir adelante, discutamos la hoja de ruta del curso. Lo primero que haremos es montar ese proyecto de cabeza dura. Después crearemos un contrato inteligente que rastrea y almacene los datos de los tuits. Después de ella. Pondremos a prueba nuestro contrato inteligente. Puede que no escribamos prueba unitaria, pero la probaremos usando remix. Entonces después de que todos los métodos estén funcionando correctamente, desplegaremos contrato inteligente al destino del polígono. Después de eso, crearemos un front-end de React js y usaremos una ptosis y MetaMask para interactuar con el contrato diploide. En la sesión final, probaremos toda la aplicación y nos aseguraremos de que no haya bugs en ella. También me aseguro de que haya instalado MetaMask y tenga alguna métrica de prueba en su cuenta. Solo puedes buscarlo en Google si quieres. No me voy a montar otra vez. Puedes ver cualquier tutorial. Son sólo unos clics de los botones de apagado y continuar con ese curso. Una vez más, se puede ver toda la pila de tecnología de nuestra aplicación descentralizada. Esa blockchain será solidez poligonal, hardhat. Usaremos mi damasco. El proveedor del nodo será Alchemy. Tiene justo el frente. Después usaremos HTML, CSS, y JS. Entonces empecemos a crear ese proyecto. Ahora empecemos por crear una carpeta. Yo lo nombraré. Tweeter dab. Aquí crearemos un proyecto de hardhat. Por cierto, espero que sepan lo que es duro, duro. Hard hat es un entorno los desarrolladores utilizan para probar, compilar, implementar y depurar aplicaciones descentralizadas basadas en blockchain titanium ayuda a los codificadores a administrar muchas de esas tareas que adquirí, desarrollar y escribir contrato inteligente y facilitar este proceso. Entonces en esta carpeta, saca ese terminal. Y antes de crear o instalar hardhead, tenemos que crear un proyecto vacío y PM usando este comando npm en él. ¿Por qué? Y después de eso, simplemente con estilo. Hardhead usando este comando npm install, save dev. Yo había tenido. Así que lee más sobre hardhat. Simplemente puedes ir a hardhead, digamos aquí. Y se puede leer la documentación también. Porque sea cual sea el código que estamos usando, Todo está escrito aquí paso a paso, así, npm init y, y pagos Teilhard tenía Dev así. Ahora para crear una lógica, tenemos que usar el casco n px. A continuación, seleccionar el primero que hizo es crear un proyecto JavaScript. Presiona y presiona Enter. Ahora, nos está diciendo que instalemos también esta dependencia. Se trata de una caja de herramientas simplemente desperdiciada y presiona Enter. Los paquetes de esta caja de herramientas son paquetes menos utilizados y cómo se recomiendan los inicios de sesión para comenzar a desarrollarse, como los éteres. Ma Cao Dai, había tenido matchers chai, hardhat, va a escanear, etc. Ahora las dependencias están instaladas, solo anexa nuestro proyecto en VS Code. Simplemente escribiré código. Lo abrirá en Código VS. Y también en código VS, asegúrate de tener extensiones como solidez, tailwind, hardhead, este tipo de extensiones que ya tienes instaladas. Pero eso es todo por este video. En el siguiente video, obtendremos las claves de alquimia y MetaMask en nuestro proyecto. Gracias. 3. Teclas de alquimia y metamask: Hola, hardhead nos da pocas carpetas y archivos. Discutiremos todos esos paso a paso. Pero primero, vayamos a hardhead config dot chaires y asegurémonos de que estamos apuntando nuestra red a la red de prueba de polígonos. Y para que eso funcione, necesitamos la URL del nodo poligonal, cualquier dirección válida. Como ya tengo cuentas, no estaría creando una nueva cuenta en alquimia. Simplemente puedes ir aquí, luego puedes iniciar sesión e inscribirte para una nueva cuenta. Si aún no tienes uno. Después de apuntarse a la alquimia. Después de iniciar sesión en alquimia, simplemente crea una nueva aplicación. Yo lo nombraré. Tercero, la cadena de tabulaciones será polígono. Y será polígono medio por eso es esa serpiente de prueba. A continuación, haz clic en Crear app. Aquí, necesitaremos esa llave. Pero antes de eso, asegúrate de haber instalado MetaMask también. Puedes instalar mi Tomas yendo a mi página web Thomas.io e instala la extensión para tu navegador. Asegúrate de pausar el video y ver esa configuración de un nuevo monedero. Cualquier persona en YouTube o Google. Y también saber adivinar, obtener polígono de prueba. Eso es automático en tu cartera. Se puede obtener a través de polígono para el conjunto. De una forma como esta. Sí, sólo tienes que ir a pegar la dirección y obtener tokens de prueba. Digamos esto. Mi máscara. Vamos a requerir esa clave privada. Y almacenaremos esas llaves, esa es la clave de la alquimia y luego mi Dmowski en nuestro proyecto. Y para ello utilizaremos una dependencia llamada punto ENV. Debido a que no se recomienda pegar esa información sensible directamente en nuestros archivos. Eso es como aquí directamente. No quiero que se pegue. Simplemente saca tu terminal y a la derecha. Y PM y estilo punto ENV. Ahora, asegúrate de que esté instalado Sí. En la carpeta raíz. Simplemente crea un archivo llamado punto ENV y crea variables como polígono. Mumbai es igual a como esto. Y que E sea igual a así. Pero el modo polígono simplemente vaya aquí, haga clic en la tecla Ver, esta clave, y pegarla aquí. Para la dirección privada del monedero. Simplemente abre tu máscara Meta. Haga clic aquí. O en este puntitos. Detalles de la cuenta. Exportar clave privada. Simplemente ingrese su clave privada. Eso solo es ingresar tu contraseña. Después te mostrará una clave privada y te asegurarás no exponer tus claves a nadie más. Copia esa llave. Ir al archivo ENV punto y pegarlo. Eso es todo. Guárdalo. Después de eso. Ir a Hardware dot config file e importar esas claves. Con este comando activado nuestro brillante requieren punto ENV. va a enloquecer. Después de eso en el módulo.exportaciones, simplemente escriba redes de red. Entonces lo llamaré Mamá Bye. Entonces en la URL, hay que escribir el nombre de la variable ENV punto de proceso, que es el polígono Mumbai. Y en un const, que es una matriz, simplemente hay que escribir punto de proceso ENV, wallet, vibrar, así. Entonces eso es todo. Su configuración de casco está hecha. En el siguiente video, escribiremos el contrato inteligente. Gracias. 4. Creación de un contrato de Twitter: Hola, bienvenidos de nuevo. Ahora empecemos a trabajar en la redacción de nuestro contrato inteligente. Retire todos los archivos de casco, scripts de contrato y carpeta de prueba. Lo es, simplemente lo eliminaré en los scripts también. Lo quitaré en el contrato. Sólo copia o no, no tienes que copiar. Simplemente puedes renombrar estos puntos alma. Y simplemente mueve todo lo demás. Sólo bandera debe código de solidez. Ahora empecemos a conseguir con un nuevo contrato y ponle un nombre. En primer lugar. Tendremos algunas variables de estado. El primero será dueño. El segundo será contador. Esto es, presentará id, un juguete como este. Luego en el constructor. Inicialicemos que es el ancho variable propietario , remitente del mensaje. Eso es quien despliega el contrato y contrate con 0. Esa es la primera idea. Empezaremos desde 0, así. Ahora ya que estamos escribiendo un contrato el cual consistirá en retozado. Entonces vamos a tener una struct de un nombre it tweet nombre, lo hacemos así. De acuerdo, soy destructor que golpeó. De acuerdo. Ahora consistirá en una dirección de retorno, esa dirección y nombrarla Twitter. Entonces tendrá AD, luego tendrá el peso x. entonces la persona puede o no subir imagen. Será opcional. Entonces si esa persona quiere borrar, es tweet o no. Y por último, tendremos esa marca de tiempo para que podamos mostrar esa fecha de ese juguete. Esta es la estructura de un tuit. A continuación tendremos una estructura de un usuario. Consiste en nombre siendo ese perfilado, es decir, el usuario escribirá un perfil bio India. Tarde. Ese usuario puede tener una imagen de perfil. Después de eso, el usuario puede tener un banner de perfil. Así. Porque si has visto un factible muy pocos incluso lo has visto. Twitter. La persona puede subir una biografía es nombre de usuario, es imagen de perfil, y el perfil Banner también. Después de eso, voy a tener, tener algún mapeo, que vamos primero, se mapeará ahora ID a una estructura de tuit que es id a esperar. Y lo voy a nombrar. Los pesos. Y el segundo mapeo será de dirección. Y apuntará a un usuario. Es decir, usuarios. Simplemente diríjase a un usuario. Por lo que nos acaba su dirección. Podemos conocer la imagen de perfil bio de rodilla de ese usuario en particular. Digamos. También. Tendremos algunos eventos. El primer evento será debido, se creó. Tendrá domicilio. Lo mismo. Contará con identificación. Tendrá texto de peso, cadena. Tendrá la imagen de peso. Ese booleano se retrasa muerto y esa marca de tiempo. Entonces esto será, este es un evento que sí, que se emitirá en la función ad tweet, que crearemos en el siguiente video. El segundo evento vamos a borrar, entonces? Simplemente tendrá esa ID de tuit. elimina ID de Tweet y Boolean. Así. Eso es todo. Eso es todo por este video. En el siguiente video, trabajaremos en la funcionalidad para agregarlo. Gracias. 5. Funcionalidad para agregar un tweet: Sigamos escribiendo el contrato inteligente. Ahora escribiremos la funcionalidad para agregar un tweet de churn. Aceptará el peso y la imagen de peso. Será una función pública así como una función pagadera. ¿Por qué? Bueno, debido a que requeriríamos que esa persona nosenvíe nos 0.01 con el fin de asegurarse de que son con el fin de subir histórico, por favor envíe 0.01 magia. Aquí tenemos que escribir éter, pero estaremos enviando en valor métrico. Si esto está bien, es decir, se cumple este requisito, entonces tendremos un puntero hacia ellos. Es mapeo. El derecho sabía es que vas a hacer los pesos a 0. Es aquí la idea de que 0 ID, comenzaremos añadiendo los datos nuevos a la misma. Texto oscuro es igual al texto aquí, luego Nuevo. Y esto debería ser Tweet. Tweet. Genial. La imagen es igual a esto. Entonces lo haces tú. El punto es igual al mensaje. Remitente. Id es igual a contador. Entonces nuevo tweet se elimina, es igual a falso, obviamente. Entonces, finalmente, la marca de tiempo de punto es igual a block dot timestamp. Después de eso, simplemente emitiremos nuestro tuit. Evento creado. Enviará estos valores así. Twitter es remitente de mensajes, luego contador AD, luego tuitea texto. La forma de administrar que se elimina false, y la marca de tiempo. Marca de tiempo. Así. Por la tarde, solo incrementaré el contador porque el próximo tweet ID debe ser uno. Y por último, le pagaré al dueño. Es decir, simplemente me trasladarán. Ahora valor o nodo, así. Con el dueño, transferiré este valor. Espero que hayan entendido esta línea de código. Era muy básico. Lo primero vamos a requerir 0.01 éter que sea demótico. Entonces solo señalé aquí nuestra variable de estado, que son los tweets. Ese tipo de datos es struct. Por eso no escuché tuit y simplemente agregué todos los datos dentro de él. E hicimos que no estás incrementando el contador y simplemente transportas el valor que es 0.01 Ito. Eso es todo. Eso es todo por este video. Gracias. 6. Funcionalidad para obtener todos los Tweets: Hola, bienvenidos de nuevo. Ahora trabajemos en la funcionalidad para buscar todos los tweets. Es decir, al igual que los tweets se mostrarán en la línea de tiempo del usuario. Simplemente escribir importaba, que son los pesos y Chen, en el que será una función pública. Simplemente verá retornos en una estructura como esta. Ahora. Ahora lo primero que haremos es crear una variable vacía temporal. Es decir, sólo me gustará temporal es igual a nu. Tweet. Estará vacío y la tierra estará en contra. Ese es nuestro número lateral de tuits. Entonces tendré el peso abajo a su es igual a 0. Esto solo contará el número total de tweets que podrías estar pensando en lo que estoy haciendo. Solo estoy teniendo un for-loop para asegurarme de que solo mostramos esos tweets que no se están borrando. Usted int I es igual a 0, yo menos que contador I más, más. Y entonces tendré una declaración if como esta. Si punto se borra es igual a falso, entonces sólo añadirle eso. En este temporal. Eddie, en esa posición, contar hasta ocho es igual a los pesos. Esto me gusta. Y simplemente incremente los tuits de conteo. Después de eso. Tendré placas Alda que no se están borrando. Después de eso simplemente tendré una variable vacía, que será resultado es igual a mu 28. Ahora esa tierra será propia, es decir, contar a su. Si enviamos directamente este, entonces la longitud de la edición E será mucho más grande. Es por eso que acabo de crear, y acabo de crear otra variable de una matriz vacía. Y de nuevo, haces el bucle for. Y esta vez voy a ser menos de contar tuits. Y aquí, simplemente copie todo desde la variable temporal a esta variable de resultado. Y por último, devolveré ese resultado así. N aquí. ¿Qué hice ese error, qué? Deberían ser nuevos tuits pequeños. Eso es todo. Espero que lo hayan entendido. En primer lugar, tendremos una matriz vacía de longitud de contador, que podría ser 50. Entonces tendríamos para loop y Alda tweets que no han sido borrados, que suponen que es tardío. Entonces ya que la longitud es de 50 y en su interior sólo los artículos serán 30. Así que creé otra área con solo una tierra diminuta para que la longitud de la matriz sea igual a los elementos dentro de ella. Eso es todo. Esta es la función. Trae todos los tweets. Lo siguiente voy a escribir. El método para obtener tweets. Pero, pero el usuario más fresco. Porque si el usuario va a su página de perfil, entonces sólo se deben ver los tweets que ha subido. Ahí. Sólo escribiremos función, obtendremos mis tweets. Será una cosa externa, misma, externa o pública, lo que tú quieras. Unosretornos. Devolverá una matriz de estructura de tweets. Nuevamente, aquí haré lo mismo. Dijeron que yo lo hago. Mamaria. Tallo listo es igual a una nueva forma de tierra. Entonces tendré conteo, mis pesos variables. En el bucle for, haré lo mismo que tú fuiste. Int I es igual a 0. Yo menos que contar yo más más. Entonces voy a hacer que if statement, si pesos I partición es igual al remitente del mensaje y me aseguraré de que no se está borrando. Yo punto es el igual, igual falso, entonces sólo vamos a añadir eso en esa variable temporal. En esa partición, cuente mis tweets que posiciono. Y luego incrementaré el recuento de mi valor de tweets. Después del for-loop, cada inicio de sesión. A continuación, haga clic en crear una nueva matriz vacía. Nómbrelo resultado. Lo haces tú. Mi nuevo int, yo igual a 0. Yo menos que contar mis tweets. Yo más, más. Sí, solo intercambiaremos eso es todo, desde variable temporal a la variable resultado, eso es todo, nada más. Y por último, devolveré el resultado donde todos, eso es todo. Esta fue la funcionalidad para obtener tweets de todos los usuarios y obtener tweets de un usuario en particular. Gracias. 7. Funcionalidad para eliminar un tweet: Sigamos trabajando con las funciones. La siguiente función que escribiremos es conseguir un tweet en particular. Por lo que sólo diré mi tercer color. Simplemente me gustará el churn divertido. Llegar a ella. Tenemos que enviar una ID de tuit. Bueno, vuelve la vista sombría. Devolverá cadena mamaria, mamaria, y luego dirección. Lo primero es, que se requiere es asegurarse de que id sea menor que ese contador. Ese es el número máximo de tweets. No, tal a ocho. Entonces sólo tendremos el cómo están muy bien apuntan hacia ese tweet, es decir tweet ID aquí así, luego asegúrate de que no se elimine el peso. El día en caso de que sea falso, se suprime. Y después de eso, si todo está bien, sólo diré devolver el punto, texto, punto, imagen, punto como este. Estos tres valor los enviaré. Este es sólo un método si, si lo que sea, por la razón que sea se te requiere obtener ese tweet. Después de eso, Vamos a crear med tech para eliminarlo, hazlo. Al churn. Peso retrasado. Tenemos los que envían el ID y se elimina el booleano. Externo. Simplemente, requeriremos que la persona sea la propietaria de ese tuit ID. Si no, puedes eliminar honestamente tu propio tweet así. Después de eso simplemente a su id. Se elimina, es igual a, se elimina así. Y voy a admitir que evento eliminado aquí. Como le emitimos creó de la misma manera. En vivo, vamos a enviar, simplemente enviar ese tweet ID, ID y se elimina. Así. Dicho esto, esto fue puñetazos para borrarlo, hacerlo, Fue muy básico. Simplemente cambiamos el valor de E se evalúa a verdadero para que siempre que el usuario quiera obtenerlo, si no puede buscar a los que, que se denotan ya que no podemos eliminar directamente el valor de una blockchain. Simplemente cambiaremos ese valor en particular. Eso es todo. Sepan que si queremos, podemos alterar ese blockchain. Podemos tener una nueva matriz y luego poner esa área dentro de esa área así. Si quieres, puedes hacerlo. Perosimplemente tendré los datos almacenados para siempre en cola. 8. Funcionalidad para actualizar al usuario: Hola, bienvenidos de nuevo. Este es el último video del módulo de contrato. Simplemente anotaremos mi turno para actualizar los datos de los usuarios. Simplemente lo nombraré funtion. El usuario haciendo excepto recordar nuevo nombre. Cadena mamaria, nueva bio, compartiendo memoria, nueva imagen de archivo. Y finalmente cadena de memoria, nuevo archivo, banner. Pierna esto. Será una función pública. Ahora, simplemente tienes que conseguir ese usuario o puedes decir inserta ese usuario en sus usuarios mapeando el remitente del mensaje así. Entonces simplemente escribiré datos de usuario. El nombre del punto es igual al nombre nuevo. Datos del usuario. Bio es igual a nueva bio. Imagen de archivo punto de datos de usuario. Chica dos nueva imagen de perfil. Datos del usuario. Ese banner de perfil es igual a piano de archivo nuevo como este. Dicho esto, así es como actualizas un detalle de usuario. Esa última funcionalidad será importada para obtener detalles del usuario. Es para un usuario en particular. Simplemente divertido Chen, consigue usuario. Enviaremos al usuario un vestido. Será una función de vista pública la cual devolverá a un usuario como este. Y simplemente devolveré la dirección del usuario ya que este mapeo de usuario exceptúa la dirección y le enviará al usuario struct que, digamos, esta es esa función para obtener un usuario. Son todos los detalles del usuario. Y esta es la función a actualizar. El usuario retiene. Eso es todo. Eso es todo por este módulo. En el siguiente módulo, completaremos contrato inteligente. Gracias. 9. Pruebas con Remix IDE: Por lo que nuestro contrato de Twitter está listo. Es hora de probar todos los métodos y asegurarse de que no haya ningún error en él. Estaré usando un remix online ID para este propósito. Si lo desea, también puede escribir prueba unitaria usando mocha y biblioteca infantil. Dependede ti. Pero solo para ahorrar tiempo y hacerlo más rápido, estaré usando remix. Entonces solo ve a remix dot m dot o, r g. luego aquí en esa carpeta Contracts, simplemente crea un nuevo archivo y nombra twitter dot soul. Después de eso, sólo voy a copiar esta licencia. Y pragma solidez. Después de eso, sólo copiaré el contrato y lo pegaré aquí. ver, ya está hecho. De acuerdo. Entonces cuando lo probaremos en el IDE remix, no podemos probar hasta 0.01 eterno porque cuando estamos haciendo la transacción, tenemos que enviar en números sin decimales. Entonces solo escribiré aquí un comedor solo para fines de prueba, pero en el código principal será 0.01 en 30. El día de ayer. ¿Recuerdas eso? De acuerdo, así que aquí voy a ir compilando a inter dot soul. Tenemos esta marca de verificación verde aquí. Eso significa que todo está bien. No hay adulto. Ahora. De acuerdo. Diríjase a esta sección de transacciones de despliegue y ejecución. Simplemente haga clic en el botón Aplicar. De acuerdo. Tenemos esta respuesta. Es decir, nuestra dirección ha sido desplegada. Ver Alda métodos y funciones están ahí. Si hacemos clic en propietario, podemos ver que tenemos la dirección del propietario, es decir esta dirección C4. C4. Se puede ver que esta es la dirección correcta. Ahora bien, lo que haré es simplemente cambiar la cuenta. Y ahora trataremos de agregar un nuevo tuit. Yo sólo voy a dar el valor uno ya que está pidiendo uno. Y ahora tenemos que enviar un tuit de texto. Primero lo hará y lo hará imagen algo así como www dot, URL ficticio, algo así. ¿De acuerdo? Y me limitaré a hacer clic en añadir a ella. Creo que de nuevo fue a 0. Si vuelvo a dar clic, agréguelo. De acuerdo, aquí no debe ser manera, debe ser más devorador. Ahora bien, si intenté dar clic, ver, aquí tenemos esta señal verde. Es decir que se nos ha agregado. Y si revisas esa primera cuenta, ahora es un 100. Debido a que esta función por pagar transfiere esa cantidad de ésta al titular de esa cuenta. Como por eso eso se incrementó. Ahora, si hago clic en, Obtener todos los tweets. Ver tenemos esta dirección, este texto primer tweet, y URL ficticio o listados que tenemos. Y si escribo, si actualizo a un usuario, ese es este usuario, si escribo Arapaho, entonces lo que esta pidiendo. Como puedes ver aquí, tenemos bio web dev. Entonces tenemos imagen de perfil, otra vez, www dot imagen ficticia. Y luego tenemos el perfil. Por ahora sólo escribiré www.banner.com y actualizado. Y ahora si tengo razón, obtener usuarios, esa es la dirección del usuario. Si tengo que enviar una dirección de usuario, y solo haremos clic derecho en Copiar, GetUser, y GetUser ver mapeado a desarrollador, imagen fictita y banner.com para que ese usuario haya sido actualizado. Al igual que esto solo más lejos conseguiría mi tweet en necesitar la dosis a su idea, que son mías. Ahora, si cambio la cuenta a la cuenta número tres, y ahora si escribo, obtengo mi tweet, entonces ve que está vacío porque este usuario no le ha agregado ninguno. Pero si conseguimos todos los tweets, entonces obviamente todos los tweets están ahí, que se están publicando ahí dentro en esta aplicación como esta. Ahora bien, si esta persona quiere eliminar ese tuit, si hace clic, ve revertido, solo puedes eliminar el tuyo propio a él. Pero si voy al segundo y ahora si intento borrar eso, se va a borrar porque él es el dueño de esto. Y ahora si hago clic derecho, Obtener todos los tweets. Sólo espera, vamos a ver qué está pasando. Creo que hay algunas añadidas a ella. Si tiene una identificación, tenemos esta dirección. Primero, hazlo. De acuerdo. Cuando estamos borrando el tweet, tenemos que enviar más valores que está aquí, id así como el valor booleano también. Fue el editor. Si lo deseas, puedes comprobarlo y desviarlo también. Simplemente lo leeré y lo borraré. Si escribo cetonas que ven se ha eliminado. Esto llegar a ello. A ver qué pasa. Transacción revertida diciendo que se elimina porque ese tweet ya fue eliminado. Entonces espero que hayan entendido este ID de remix porque esta fue una forma mejor y más rápida de probar ese contrato inteligente. Si lo desea, puede ingresar múltiples rasgos y contrato STR para cualquier otra casilla que pueda haber faltado. Pero en este momento, todo está funcionando a la perfección. En el siguiente video, desplegaremos este contrato en ellos. Polígono Mumbai prueba red. Gracias. 10. Implementación en la red de pruebas de Mumbai: Hola, bienvenidos de nuevo. En este video, desplegaremos nuestro contrato inteligente a la red de prueba de polígonos. Entonces para eso, vamos como script de despliegue. Primero en la carpeta scripts, crea un nuevo archivo y nombrelo desplegado dot js. Ahora aquí está escribiendo código. Lo primero que se requiere es el laboratorio de casco. Entonces tendremos una función sinc llamada main. Entonces conseguiremos, conseguimos contrato, fábrica conseguirá contrato. Por ejemplo. Este es el nombre de nuestro contrato. Es aquí en decir Twitter. Entonces tenemos que escribir este comando. Es pequeño d y luego desplegar. Se puntean, puntean, despliegan así. Entonces tenemos que ponderar. Se está desplegando tal como es. Se necesita un poco minúsculo. Y son muy fin. Consolaremos la dirección del contrato de registro de puntos, contrato desplegado para luego abordar así. Y ahora tenemos que llamar a esta función principal y simplemente coger cualquier error que se esté lanzando. Console.log dice Código de salida igual a uno como este. Por lo que este es el único código requerido para el despliegue. Ahora, tenemos que traer nuestro terminal en el directorio principal que está en ese directorio de carpetas. Y escribe este comando y px. Había corrido guiones. Entonces el ly dot js. Y hay que mencionar que red, que se mueve por y presiona Enter. Podría tardar unos minutos. Ahora tenemos carpeta de efectos directos creada y vemos su contrato desplegado a esta dirección. asegura de haber copiado esta dirección porque será necesaria en el siguiente video. Entonces solo para asegurarnos de que todo está bien, solo podemos revisar polígonos de Mumbai podemos ir a este sitio web, copiar esa dirección del contrato, estado base aquí, y solo buscar. ver, hace cinco segundos se creó este bloque y esta creación de contrato y tiene 0 podría tomar valor. Esto simboliza que nuestro contrato se despliega con éxito. Eso es todo por este video. En la próxima sesión, trabajaremos en el front end, que es React JS. Gracias. 11. Configuración del proyecto de reacción: Nuestro contrato se implementa con éxito. Ahora es el momento de que trabajemos en el front end de React JS. Por eso. Vamos a crear nuestro proyecto ADF JS de configuración para eso, simplemente escribe np x al ocho cliente de la aplicación React así y presiona Enter. Espero que tengas React js instalado en tu sistema. Si lo tienes, me siento recibiendo alguno y simplemente instalo el edadismo a nivel mundial. Por lo que el proyecto React ya está configurado. Ahora para interactuar con nuestro contrato inteligente implementado, necesitaremos dos cosas, dirección del contrato y el ABA. Para obtener el ABA simplemente copie ese archivo twitter.json de los contratos de artefactos. Aquí. Este archivo simplemente cópielo y vaya a la carpeta del cliente. Entonces fuente aquí, crea una nueva carpeta y asígnele el nombre ABI, y simplemente pega ese archivo JSON de Twitter aquí que está en esa carpeta fuente de línea. Sí. De acuerdo. Entonces tenemos que crear un nuevo archivo llamado config dot js dentro de la carpeta fuente, como ab.js libre de armas. Y aquí pegaremos nuestra dirección de contrato. La dirección del contrato es igual a como esta. Simplemente vaya y copie su dirección. Pégalo aquí, así. Ahora, para seguir adelante, tenemos que instalar pocas dependencias. Simplemente cambie ese directorio a la carpeta del cliente. Aquí, escribe npm con estilo. Éteres, entonces reacciona. Y cúpula exterior. Entonces ese kit de interfaz de usuario web, core. A continuación, agregue que ocho repeticiones, tres kit de interfaz de usuario. Entonces puedo agarrar modelo de árbol y finalmente, guión de dibujos animados. Entonces si ven aquí. Tenemos 123456 dependencias y presiona enter este ocho test.js. Es decir, se requiere ethos para interactuar con el contrato inteligente desplegado. React router dom permite la navegación entre varios componentes en la aplicación React. Web tres, UIKit nos proporciona componentes de interfaz de usuario hermosos y livianos lejos por dos desarrolladores. Esta biblioteca acelerará nuestro desarrollo de dab. Entonces. Entonces tenemos tres modelo que nos permite conectar nuestra app demasiados proveedores válidos como Coinbase wallet, MetaMask, wallet connect. Y por último, esta caricatura Avatar genera avatar aleatorio para nosotros. Utilizaremos esto como una imagen de perfil ficticia más adelante. Ahora si vas a package.json aquí, y sólo vamos a comprobar Web three model is there are out there now. Dibujos animados de éteres, Avatar. Todo está muerto. Ahora. Realmente simplemente voy y escribo npm. Empieza a iniciar nuestro celular React JS. ¿ De acuerdo? Por lo que la aplicación React se está ejecutando con éxito. Ahora es el momento de trabajar en el archivo index.js. Vamos aquí. Estamos importando React, luego la app de CSS de índice de masa. Entonces importaré navegador y externo reaccionaré externo. Y cúpula exterior. E importaré defecación. Proveedor de defecación. Web tres, se escribe código, notificación, proporciona que sólo un impulso. Esa app. Está en el archivo raíz. Permitirá que todos los archivos muestren notificaciones. Por lo que simplemente tenemos que ir a eliminar este modo estricto de tres actos aquí para usar proveedor de defecación, una aplicación que aplicación dentro y proveedor de defecación. Y luego use el router del navegador y envuelva la aplicación dentro del router del navegador. Así. Eso es todo lo que diremos. De acuerdo, está corriendo. Ahora. Crearé nuevos archivos y directorios. Dentro de la carpeta fuente. Voy a crear carpetas y ponerle un nombre. Vamos Nance, componentes, imágenes y páginas. Estas tres carpetas y páginas de insight. Crearé múltiples archivos. Inicio punto js, forma punto CSS. Nuevamente. Un archivo dot js, archivo dot CSS, luego settings.js, configuración punto CSS. ¿ De acuerdo? Estos, estos muchos archivos crearon $9 home dot js. Escribiré el código. Lo primero importaré React. Después importaré enlace desde el domo del router React. Entonces voy a importar aquí en este home dot js, voy a importar home dot archivo CSS forma dot CSS de esta manera, ¿de acuerdo? Entonces simplemente voy a tener un componente de casa y exportar por defecto el final. Después dentro del componente home, regresaré, devolveré algunas etiquetas de enlace como esta. Y lo copiaré. Voy a buscar pagado dos veces. El primero una sola slash. Y en ese día será casa. Entonces el siguiente será perfil. Será de perfil. El siguiente serán escenarios y pesados como lágrimas, escenarios como este. Ahora solo copia todo el código aquí. Ir al perfil dot js. Pégalo aquí. Correcto. Ahora archivo dot archivo CSS y exportar el perfil al final. De igual forma, ve a settings.js, pégalo aquí. Lo es. El mismo código aquí. Voy a importar la configuración. Entonces el nombre del componente será la configuración. Exportaré configuraciones al final. Entonces eso es todo por este video. Aquí hemos hecho mucho. Ahora se inicia nuestro proyecto React JS. Y luego los próximos videos, solo trabajaremos en esa IU básica de nuestra aplicación. Gracias. 12. Trabajar en el componente de la aplicación: Hola, En este video trabajaremos en ese componente de app. Entonces ve al archivo app.js. Aquí. Eliminaré este logo y empezaré a importar dependencias. El primero reaccionará desde React. El segundo estará fuera así como outs. Después importaré componente home de dark pages home. Entonces voy a importar componente de archivo. Después importaré el componente de configuración. Y luego voy a importar ese archivo CSS de punto de aplicación. Ahora en esa función, eliminaré todo y empezaré. Vaciamos los corchetes. Entonces Dave, nombre de la clase, le pondré el nombre pagina. Haré el CSS más adelante. Entonces tendremos el nombre de la clase en vivo, barra lateral, digamos bar. Entonces tendré Dave, ventana principal de ClassName. Entonces tendré algunas rutas. Las rutas que habré señalado, que serán las que serán slash sobre Lee, y el elemento que lo hará mostrará el componente home. De igual manera, tendré refinar. Mostrará el componente Phi, y luego tendré ajustes. Y mostrará el componente de configuración. Después de esta ventana principal tendrá el apellido, ¿verdad? Bar. Y si hubiera leído barra de escritura así. Y al final, está exportando la app. Ahora, tengo estos días, pero definitivamente va a necesitar algunos estilos. Simplemente vaya al archivo CSS de punto de aplicación. Sí. Voy a quitar todo. Y empezar con la página. Escribiré este CSS rápido. Espero que tengas conocimiento de CSS porque este tutorial es sobre Web tres y no sobre HTML y CSS. Semana de píxel pegajoso. Y lee el azul menos 800 Excel en 0.45. Después frontera, a la derecha. Seré un pixel, sólido, RGB. Sesenta y tres. Sesenta y tres, sesenta y tres. Y los coloreó blanco y rojo VH. Entonces tendré la clase de barra de luz. Sólo lo copiaré y pegaré aquí. Volition pegajoso, top 0, peso. Sí, será simplemente frontera, izquierda, no derecha. Días sólidos de un píxel. Y justo por. Entonces, tendremos ventana principal, píxel previsto. Entonces ancla, rep, consigue cualquier enlace. Cualquier cursor de enlace será un puntero. Entonces la decoración del texto para ser ninguno. Y será importante. Entonces la altura será de 0 pixel. Es importante. Entonces tendré la página de inicio de sesión, cual haré más adelante. Pero deberíamos escribir el CSS aquí. Porque como siempre digo, el foco no está en la porción CSS. El enfoque está en la construcción de una aplicación descentralizada completa. Flex de pantalla, centro de contenido justificativo. Dirección de flexión, columna, tapa, el píxel. Y esto se hace para el índice de punto CSS. Pero el único cambio que tenemos que hacer, lo siento, esto fueron secuestros, este es el siguiente cambio. Tenemos que hacerlo en index dot CSS aquí. Después de lo anterior el margen, solo agregaré color de fondo al hash, uno para uno a seis. Eso es todo. Ahora guarde el archivo. Y vamos a echar un vistazo a la salida. C. Tenemos la barra lateral, luego la configuración del perfil de inicio aquí. Y lo hemos hecho y divido aquí, así que tenemos diferentes secciones en nuestra app. En los videos posteriores, trabajaremos en sección particular por separado. Gracias. 13. Creación de un componente Sidebar: Hola, bienvenidos de nuevo. En este video trabajaremos en el componente de la barra lateral. Simplemente vaya a la carpeta de 02 componentes. Aquí, crea dos nuevos archivos. Nombre nos sidebar dot js y otro sidebar dot CSS. En la barra lateral JS, simplemente cerraré todo. Y sólo perspicacia pero punto js. Sí, lo primero, importa, Reacciona, reacciona. Y luego lo siguiente que tenemos que importar el archivo CSS, que es sidebar dot CSS. ¿ De acuerdo? Entonces la barra lateral simplemente gire anti-impuestos por ahora. Y exportar Sidebar por defecto. De acuerdo, en goto app.js, aquí, en la barra lateral desde la barra lateral de componentes. Aquí en esto, Dave hizo este div de la barra lateral, simplemente formas hace componente de la barra lateral como este. Ahora, trabajaremos en estos componentes de la barra lateral. Primero pocas importaciones, que lo harán, que se requerirán. En primer lugar serán algunos pocos íconos. Me gusta mucho Twitter, cubo, usuario y COG, cog de web kids icon aquí. Y lo segundo que se requerirá es el banco de enlaces desde un router Create React. No, sí, no lo hicimos. Declaración de retorno devolverá un div y le dará un nombre de clase de datos, contenido del sitio. Entonces tendré otro div y le pondré el nombre de menú. Ahora, entonces voy a tener otro div y nombrarlo detalles. En esos detalles, simplemente tendré ese logotipo de Twitter o el ícono de Twitter, que tendrá un tamaño de fuente de 50 píxeles. Después de los detalles, simplemente tendré una etiqueta de enlace, que simulará también. La página principal y el nombre de la clase serán un enlace. Entonces debajo de esto, voy a tener otro nombre it elementos del menú. Dentro de los elementos del menú. Ahora. Y este div no está terminado aquí. Voy a tener esta etiqueta de enlace. Y dentro de la etiqueta de enlace estará terminada. Fuera de los elementos del menú. Y en su interior tendrá un logo o icono de cubo con tamaño de fuente de 50 píxeles. Y aquí me relaciono a casa. Así, dicho, sección Detalles. Entonces menú. Ahora, como de la misma manera, voy a copiar este enlace, pegarlo dos veces. Ese segundo será el nombre de la clase de perfil dentro de los elementos del menú. Y aquí sólo voy a escribir phi. Ese tercero será ajustes, LastName, link. Y aquí escribiré configuraciones como esta. De acuerdo, Eso es componente de la barra lateral está hecho. Ahora tenemos que trabajar en sidebar dot CSS porque obviamente habrá algún estilo o de lo contrario se verá muy mal. El primer estilismo será de contenido cida. Acolchado. La parte superior será de 20 píxeles. ciernes, ¿verdad? 90 píxeles. Justificar el contenido. Espacio entre pantalla, flex, flex dirección, columna, altura. Cinco, grabamos elementos alineados. Y luego la clase de detalles tendrá display, flex. Lectura que pixel, gap. Pixel. Justificar contenidos, iniciar. Alinear elementos, centrar. Texto, decoración, ninguno, y será importante. Entonces los elementos del menú, vidrio, pantalla, flex, justifican contenidos que brecha. Pero en pixel, margen, arriba, entre punta Excel. Entonces Elaine. Los artículos serán centrales. Entonces fuente. El peso será de 600. Tamaño de fuente. Entre celda típica, relleno, diez pixeles. radio de la frontera será de mil píxeles. El color será blanco. Y será importante. declaración de cubiertas no será ninguna. Y otra vez es importante. Entonces. Voy a tener elementos de menú. Y lo que pasará si se pasa el cursor sobre él, sobre él, entonces el cursor será puntero. El color de fondo será de 2828 a ocho. Entonces tenemos la clase de perfil. Tendrá pantalla, flex, dirección flex, columna, y la brecha será de cinco píxeles. Ahora guarda todo. Y veamos cómo se ve la IU con esta barra lateral. ver, y ahora qué error hice fue aquí ese cubo. Este será usuario y el último será Kg. Ahora, mira, aquí tenemos iconos diferentes, diferentes. Ajustes de perfil. Ahora esta barra lateral ya está hecha. En el siguiente video trabajaremos en esa barra derecha. Gracias. 14. Creación de un componente de barra de direcciones: Por lo que en el último video, nos hemos formado en la barra lateral izquierda. Es la hora. Aquí trabajamos en la barra derecha, esa es esta sección. Entonces vamos a los componentes. Aquí. Crea dos archivos. Nombrelo, barra derecha dot js. Y el segundo archivo será barra derecha punto CSS, derecha Pod dot js. Simplemente importa lo que es React de la biblioteca. Y segundo, segundo, importaremos el CSS. Eso es correcto, barra de punto CSS como este. Entonces una función. En este momento, solo devolveremos corchetes vacíos. Y finalmente escribiré export default. Barra derecha. Váyase. ¿El archivo CSS está vacío por ahora? Ir a la aplicación dot JS. Sí, importación, componente de barra derecha. Y en esta sección de la barra lateral, simplemente llame. Y compré este así antes aquí tenemos lo que se llama el componente de la barra lateral. En esta sección lo llamaremos correcto, pero guárdelo. Lo siguiente que queremos es en la carpeta fuente ahí tenemos carpeta de imágenes. Pon aquí cualquier imagen ficticia. Puedes descargar la imagen que quieras de Internet y simplemente pegarla aquí. Este será un anuncio fictito o noticias o lo que sea que veas en la de la derecha. He utilizado estas imágenes. Puedes pausar el video si quieres. Después de eso, después de que tengamos imágenes simplemente en la parte superior, importa esas imágenes. Eso es importante. Sólo pondré nombre al primero, casco. A partir de imágenes, r hat dot JPEG. Cópialo tres veces. Segundo, escribiré solidez. El nombre de la imagen es únicamente la D, y la siguiente es Meta mask. Y aquí escribiré mi Dallas. En este momento sólo importaremos tres mayores. De acuerdo, yo también tengo este CD act. Vamos a importar la imagen reactiva que reaccionan es un archivo PNG y un archivo GIF como este. Ahora, como voy a tener datos fictitos aquí, crearé una variable que será una matriz. Constará de objetos. La imagen que había tenido. Aprende a usar hardware dev. Y si lo deseas, puedes usar enlace también. Si quieres que el usuario realmente redirija a alguna parte. Pero en este momento, esto es sólo un enlace vacío y pegarlo tres veces más. En segundo lugar, seremos solidez. Simplemente escribiré contrato maestro inteligente. Desarrollo 30s reaccionan acto de maestría apenas en 2022 o 20, máscara. Sin embargo, me gusta mucho convertirme en desarrollador web. Ahora, estos son solo datos ficticios. Sólo recuerda, después de eso, tendré un casillero de búsqueda ficticio. Tan importante. Entrada de código de interfaz de usuario, web tres código de interfaz de usuario y voy a importar búsqueda y esa entrada voy a ser N mayúscula aquí. Icono de búsqueda de Web tres iconos de interfaz de usuario como este. Ahora, vamos a tener un contenido div . Yo lo nombraré. Entonces tendré una entrada. Así. El nivel será de búsqueda. Nombre, búsqueda. Terminamos por prefijo. Tendré este ícono, ese es el ícono de búsqueda. Así. Y el color de fondo será hashtag. Uno por uno, d pequeño a seis. Así. Entonces tendré otro div. Ese apellido serán tendencias que sólo me voy a dar un rubro préstamos. Y ahora simplemente pasaré por el remolino así. Y regresaré aquí. Dave. Nombre de la clase, tendencia. Al hacer clic. Simplemente escribiré window dot open, E dot link como este. Y dentro de este div habrá imagen E dot simplemente. Será imagen e dot. Nombre de la clase, imagen de tendencia. Lo peinaremos justo después de algún tiempo. Y luego otro div con ese texto que es tendencia. Siguiente. Aquí saldrá texto e dot como este. Eso es todo. Ahora, se verá horrible si no hacemos esa porción de estilismo. Así que vamos a escribir estilo de barra que se lee por punto css. En primer lugar, me quedaré en el contenido de ocho barras agregando unify Fix cell con 80 por ciento. Entonces tendencias oscuras. Color de fondo, azteca para ser 34. Luego border-radio de cinco pixeles. Entonces altura mínima, supongo, ¿tenemos h menos 200 píxeles? Máximo, nominal de 90 píxeles. Margen, punta superior, axila. Al agregar los pixeles. Peso de fuente, negrita, tamaño de fuente, 18 píxeles, desbordamiento. Y entonces voy a estilo tendencia. Esta tendencia. Simplemente exhiba flex. Justificar contenidos. Empezar. Alinear elementos. Centro. Brecha entre el margen de píxel, 15 píxeles superiores. Acolchado, diez pixeles. Después de eso, voy a tener algún efecto hover. Puntero y color de fondo. Cuando rondaba, ¿deberíamos los aztecas? Ver 353 e. entonces imagen de marca. Tú lo hiciste rojo. Y píxel rojo, borde, radio, celda grande. Y por último, a continuación, un tamaño de 15 pixeles. Peso de la fuente, normal. Ahora, guarda todo el código. Deja que se compila. Y ver que solo ves que se ve bien. Creo que el bonsái no se ve bien. A ver. Tenemos un error ortográfico aquí. Tendencia. Ver. Ahora el tamaño de la fuente también es descendiente. Tenemos aquí, estos y todo. Por lo que voy a comprobar y acolchado. Entonces aquí tenemos el contenido adecuado. A ver. Está bien. ¿ Y si hago 90 por ciento? ¿ De acuerdo? Al agregar d, tenemos esto más profundo enviado. ¿ De acuerdo? Luego tendencias, color de fondo, radio de borde, altura mínima, tasa máxima. Si aumento el ancho máximo, nada cambia. Margen, en la parte superior de la talla. Esto, entonces tenemos tendencia, justificar contenido, margen central, top 15% sumando 10%, Veamos cómo se ve. Sólo algunos problemas con este lado. Simplemente siento que si no lo logramos debería estar en una línea como esta y todas. La imagen en la app dot css. ¿ Por qué aquí? De acuerdo, ahora mismo se ve bien. Si quiero cambiar algo, lo haré en el siguiente video. Gracias. 15. Trabajemos en la página de inicio: Hola, bienvenidos de nuevo. En este video trabajaremos en la página principal. Pero antes de seguir adelante, solo quiero hacer un pequeño cambio aquí en la app dot CSS ahí, sección de bus derecha, solo voy a cambiar el ancho de 45 aquí, el 55, eso es todo. Por lo que ahora nuestra aplicación se ve decente competitivamente a antes de que tenga la distancia adecuada y todo. Y además, necesitamos algunas imágenes ficticias. Tengo estas imágenes aquí. Si lo deseas, puedes simplemente Google avatar o cualquier imagen de fondo. Si quieres. Utilízalo solo con el propósito de crear la interfaz de usuario. En fin, se cambiará más adelante. Así que crea un nuevo archivo dentro del directorio fuente y asígele un nombre. Imágenes por defecto dot js. Entonces simplemente escribe export. Const. Por defecto. Las imágenes es igual a n aquí. Simplemente pega esas dos imágenes. Este solo cualquier imagen de avatar al azar. Y este se utiliza para ser utilizado como banner para la sección de perfil. Así. Y guárdalo. De acuerdo. Ahora ve a páginas y en el archivo home dot js. Ahora empecemos a escribir algún código. Entrada desde web. Tres iconos del kit de interfaz de usuario son el núcleo, no, no el código de paso diagonal. Si lo desea, puede ir a revisar el kit de interfaz de usuario Web three y ¿cuáles son los elementos de interfaz de usuario que proporcionan? Y en segundo lugar, voy a importar imagen con tres iconos de interfaz de usuario. Y por último, importaré imágenes por defecto. Imágenes predeterminadas aquí. Ahora como no voy a estar requiriendo ninguno de estos, estos son solo datos ficticios. También eliminaré ese huevo de enlace también. Y empezar, creo desde cero, voy a tener un desarrollo. Y le daremos un nombre de clase, contenido principal. Entonces tendré otro Dave. Nunca creceré de cinco a ocho. Entonces tendré otra sección como esta. Y aquí usaré el elemento avatar del kit Web three UI. Y simplemente voy a estar por ahí muerta, entonces la imagen será, este momento será por defecto. Esta que es por defecto, imágenes en posición 0 en tamaño de imagen 60, así. Entonces tendré un área de texto. Etiqueta. Eso ahorita no estoy planeando nada. Sí. Placa de nombre. A continuación, área, titular del arrendamiento, igual a lo que está pasando. Y el nombre de cristal será texto, área como esta. Entonces tendré a este Dave. Y después de este div tendrá una dirección. Dave. Y le daré el mismo nombre de clase que es sección de tuits. En su interior. Tendré Dave, Este tiene ClassName image div. Entonces usaré el elemento Imagen de imagen obteniendo de los íconos en tamaño será 25. Así. Después de eso hiciste Steve, voy a tener simplemente otro div. Escribiré el peso y el nombre de la clase será para comer. Después del estilismo, lo sabrás, entenderás todas menos secciones justo el momento justo de conseguir el aborto SDM. Después de este div. Aquí. Voy a tener voy a tener simplemente sección neta, la sección de alimentación. Y aquí tendremos la sección de frutas. Tendré la sección de frutas que decía, ok, ahora vamos al home dot CSS. Hagamos un poco de estilismo. Comience con el área de texto. El cinco por ciento coloreó el capital, luego de fondo, transparente. Borde, dos pixeles. Entonces border-radio. Conservar Excel. Entonces altura mínima. Y píxel rojo al agregar 15 celdas grandes. Desbordarlo. Y entonces tendré peso. Un píxel inferior, RGB sólido, 63363. Y acolchado. Estamos en el pixel. Entonces tengo esa sección de tuits. Pantalla. Flex. Justificar el espacio de contenido entre espera, 95 por ciento. Alinear elementos, centro, margen, top ten pixel. Entonces me quedaré llevado a ello. Clase. Color de fondo. Para siete, E5. Después escoge celda y 20 pixel, border-radius, mil pixeles blanco. Entonces martillamos. Entonces imagen, tienen radio de frontera 50 por ciento. Agregando entonces pixel. Margen a la izquierda, representa al vendedor. Y luego agregaré imagen div hover, Curtis, aglutinante, fondo, color. Hazlo, hazlo así. Simplemente lo guardaré todo. Y vamos a ver. En el app.js, tenemos la sección Home. De acuerdo. No está en la configuración. Por eso. Vayamos a casa a ver. Se ve bonito. Ahora lo único es el área de texto. A ver. qué pasa con el área de texto. Simplemente comprobarán CSS. Tenemos borde lateral, muerto ADS, lectura de altura mínima es el desbordamiento oculto. Entonces realmente voy y reviso esto. Ahora está funcionando. Yo no he hecho nada. Simplemente elimino ese código y simplemente escribo lo mismo. Nuevamente. Es como el nombre de la clase textarea, apellido, éste, y hasta marcador de posición, ¿qué está pasando? Eso es todo. Ahora estamos en condiciones de escribir aquí, está funcionando. Lo siguiente en lo que me gustaría trabajar es en esta sección de imagen. Es así como seleccionar una imagen del directorio del usuario. Simplemente importaré de React. Usted indica, usa, ref. Estos dos. Entonces después de algunas variables aquí es decir, archivo de entrada es igual a usar RAF noche. A continuación, const imagen seleccionada, conjunto, imagen seleccionada. Utilizan datos. Entonces requeriría otro texto const. Ese texto va a usar fecha y cadena vacía. Después crearé una función, nombra en imagen, click, archivo de entrada, punto, actual, punto, clic. Y entonces tendré cambio. Manipulador. Evento. Const. El archivo de imagen es igual a los archivos de punto punto de evento 0. Entonces voy a establecer imagen seleccionada objeto URL deimagen seleccionada, archivo de imagen URL como este. Después de eso, simplemente. Pasaremos al área de texto. Sí. Y escribiré su propio método OnChange, que simplemente establecerá texto a lo que sea que se esté escribiendo aquí. E punto, punto, valor de punto, así. ¿De acuerdo? Y luego tengo esta imagen, que voy a dar el onclick y simplemente escribir en imagen, click. Desmarque. Después de eso. En el interior de aquí, tendré una etiqueta de entrada, que eran el archivo. El tipo será cinco. Amigos, será archivo de entrada. Y el cambio, será cambio. Y aprender y estilo. Esto es algo que hay que ver. Simplemente voy a mostrar ninguno. No quiero que se muestre esta etiqueta de entrada, elemento de entrada para mostrar. Solo quiero que los usuarios puedan dar click en esa imagen. Y sólo voy a tener una declaración if-else. Si la imagen seleccionada es verdadera, entonces simplemente mostraré huevo de imagen, qué fuente. ancho de imagen seleccionado será de 150. Y si no lo es, entonces mostraré esta etiqueta. Ese es el icono de la imagen. Eso es todo. Guarde toda la carne. Seleccione el archivo y consulte. Ahora soy capaz de seleccionar una imagen. Y si el usuario quiere, puede cambiarlo de nuevo haciendo clic aquí. Eso es todo. completa esa sección de imagen. En el siguiente video trabajaremos en la sección de pies aquí. Gracias. 16. Creación del componente de alimentación: Hola, bienvenidos de nuevo. En este video, trabajaremos en esta sección de feed. Para eso, tenemos que crear un nuevo componente, ir a la carpeta Componentes y crear un nuevo archivo en feed dot js. Y también tener un archivo CSS para ello. El peso en id dot CSS. En intuir sillas de alimentación Archivo. Importar el acto, y también importar el peso en el punto CSS. Vamos esta noche. Podemos explorar los días de cuello recién descubiertos. Ir a home dot js. Y aquí más el archivo de importación de trigo en componente de alimentación. Y simplemente llame al componente aquí así. Y aquí estoy enviando un prop rho phi es igual a falso. Eso significa que no queremos todo lo que se alimenta aquí, no para un perfil en particular. Entonces. Buen archivo IGS. Tengamos algunas importaciones. Tablero, por defecto, imágenes, entonces. Núcleo de importación. Y en negrita, mensaje, círculo, estrella, y iconos mágicos como este. En la declaración de retorno, Vamos a escribir el nombre de la clase Dave para alimentarlo. Tengamos aquí nuestros datos. Es redondeado. La imagen es igual a las imágenes predeterminadas. Estas son sólo algunas imágenes en estos momentos. Imagen de equipo, dicen 60. Entonces vamos a tener otro Dave. Apellido, gouache completo. En primer lugar, Dave es sostener que esto era lo que tendieron a comer y simplemente escribir una máscara de tierra uno ahora. Y luego. Simplemente un conteo como este. Y aquí tengo una cuenta ficticia como esta. Entonces Dave, ClassName, contenido. Bonito. Están aprendiendo de cero. Y mostraré esa imagen. Había alguna fuente de luz. Se caen imágenes por defecto. Y una imagen de LastName. Entonces. Después de días, Dave, tendré el nombre de la clase. El nombre de la clase es el. Generalmente en sus interacciones. Las interacciones tendrán un div. Con LastName. La interacción adormece. Numbs tendrá aquí mensaje círculo, icono, tamaño de fuente 20. Pierna esta copia pesa dos veces. Entonces aquí estará, simplemente escribiré muerto. Y voy a poner magia. Ahora. Tengo estos dos componentes listos ahora es hora de que hagamos esa porción de estilo. Vayamos a leer tuit. Tasa máxima y porcentaje rojo. Borde inferior. RGB de un píxel. Sesenta y tres. Sesenta y tres. Sesenta árbol. Así. Al agregar verde, pixel, color blanco. Justificar contenido, espacio entre pantalla, flex, cursor, puntero. Entonces tuiteamos nuestro color de fondo. Simplemente lo cambiaré a este código hexadecimal uno. C, hazlo. Antes. Entonces aguantaré eso completo. Tweet. Estas banderas. JUSTIFY-CONTENIDO, INICIO. Relajar la acción de red. Columna, brecha. Después escoge celda D9 por ciento. De acuerdo. Entonces realmente tengo en las elecciones, las elecciones mitogen. Entonces píxel. Esta obra de teatro. Lax. Sí, contenido D5, centro, brecha, 150 píxeles. Entonces voy a cambiar esta interacción nums ash, T F T, F, T F. Display, flex. Justificar contenidos, oscuro, brecha, luego píxel. Al agregar píxel, borde, radio. Mil pixeles. Después de eso. Sé que hay mucho estilismo. Si quería, solo puedo darte el archivo, pero solo estoy escribiendo en todas las cosas en el código CSS también. Porque como ustedes también están construyendo esas cosas, es mejor. Lo hacemos desde cero en el 28600. Y alinear elementos. central Pixelcentral. Entonces estaríamos contentos es flex. Contenido justificativo. Empezar. Dirección flexible, columna, hueco, cilindro delgado. Altura máxima a píxeles. Entonces espera. Imagen, espera, 98 por ciento, radio y altura de píxel 90%. Entonces tendré otra clase aquí, cargando la cual utilizaremos más adelante. Me gusta estática, columna, gap, haciendo el pixel lead, ¿verdad? Sé que había mucho código ahora, ahórrate. Iremos a revisar nuestra página de inicio. Aquí hay algún error. A ver qué es un error tonto. Este nombre de clase. Yo lo escribí mal. Yo sólo le daré una pequeña f aquí. Guardar y ver. No todo es perfecto. Tenemos la cuenta aquí, imagen aquí, ese texto. Si el usuario sube alguna imagen, se mostrará aquí correctamente. Se ve muy bonito. Estos son solo íconos ficticios. Esto demuestra que está en la red de polígonos. Tan bonito. Nuestra página de inicio está hecha. Es decir, se completa la IU. En el siguiente video trabajaremos en esta página de perfil. Gracias. 17. Trabajemos en la página de perfil: Hola. En este video trabajaremos en esa página de perfil. Ir al perfil dot js. Y aquí, el mismo de arriba. Vamos a importar algo. En primer lugar, vamos a importar imágenes por defecto, por defecto de imágenes por defecto como esta. Entonces importaré el peso en componente así. De acuerdo, Vamos a eliminar estos enlaces y empezar con activo, no Dave, voy a empezar con una imagen, archivo de apellido por otra fuente. Imágenes uno. Entonces tendremos otro div, F, B Nombre del contenedor. Nos gustaría este perfil. Y así es como una imagen otra vez. Y ahora esta imagen se muestra imagen. Simplemente escribe imágenes de archivo y z, ya sabes, aquí. Después de esto en HD, no acaban de hacer esta imagen rígida de cierre automático. Tener otro div, que será nombre del perfil, hola. Y cartera Raphael. Sólo tienes una entrada aleatoria aquí. Después tendré un enlace el cual enviará al usuario a la página de configuración. El nombre de la clase. Rafael. Bien. Después de este enlace, Vamos a tener otro día de bio más tres, que soy yo. Entonces vamos a tener y voy a tener un perfil, aplicaciones web. Y dentro de ella solo tendré una lengüeta de mis pesos. Entonces al final, tendré que esperar en fade. Componente. Ancho. El perfil es igual a verdadero. Así. Ahora, obviamente se verá, no se verá bien. Tengo que hacer el estilo para ir al perfil punto CSS aquí, y vamos a hacer ese estilo. Todo. Aquí es sobre el estilismo. Por lo que el porcentaje de peso, el peso máximo por ciento. Altura a estar haciendo celular típico, cheque, cubierta. Y b, f, b, contenedor. Tasa máxima y porcentaje de plomo. Pantalla. Flex. Contenido D5, inicio. Dirección flexible. Columna. Parte inferior. Un píxel. Sólido, RGB, 63. Así. Archivo, VFB. Con Excel. Radio. Más profundo, envió una táctica píxel por píxel, sólido. Uno por un día a seis. Relativo menos 65 píxeles. Izquierda. Representa. Después haz el estilo del archivo. Nombre. Blanco. Lesión relativa menos 55 píxeles. Izquierda. El pixel, tamaño. Punta Excel. Encuentra el peso. Después de eso. Sé que hay mucho estilismo por hacer. Cartera de archivo áspera. No sé que tengamos lo rentable, ¿verdad? Sí. Esta. Color RGB. ¿ Cuándo, cuándo? ¿Cuándo, cuándo es para cuándo, cuándo? Cuando, cuando para ti Shen pariente. Entonces menos 50 píxeles. Pixel izquierdo. Tamaño de fuente 14 pixeles. Entonces cosas de Jane, algo así como bio. Aprende la luz. Bueno no deberías menos relativo para el píxel. Izquierda, lo que el tamaño de píxel, 16 pixeles. Peso de la fuente, 500 dólares, o sólo se aplican cuando las luces correctas. Entonces he fallado. Y su sección, como para la eliminación, relativa menos 1 16º píxel, izquierda, 50 píxeles. Tamaño, 16 píxeles. Peso de la fuente 0.5 pixel. Blanco sólido. Espera. Y pixel rojo, centro de contenido justificado. Esto deja banderas. Entonces archivo crudo en él. Ir al cern. Puntero. Refinar. Aplicaciones. Mostrar flex, justificar contenido centrado, blanco, negrita. Y por último, Perfil. Tab. Parte inferior. Entonces píxel, borde. Abajo, dos pixeles. Sólido. Uno, mayúscula a, mayúscula F. Do. Sé que había mucho CSS en este archivo. Ahora, guárdalo. Y veamos cómo se ve nuestra pantalla de perfil. Ahora. Creo que he cometido algún error aquí porque aprendo así que no estaba ahí. A ver. Refinar. Este fue el error. Guárdalo. Mira que la página de perfil se ve tan bonita. Sé aquí que imagen binaria y esta imagen es la misma porque sólo estamos usando a los mediadores. Posteriormente. Las imágenes serán diferentes, pero supongo que se ve muy hermosa. Nuestra página de inicio y página de perfil está hecha. Lo único que queda es la página de ajustes, que haremos en el siguiente video. Gracias. 18. Trabajaremos en la página de ajustes: Hola. En este video trabajaremos en nuestra página de configuración. Ir a settings.js. Comencemos nuestro trabajo aquí. En primer lugar, eliminaré todas estas longitudes. Entonces voy a importar entrada así como subir. Lo que estoy ahí fueron tres códigos UI. Y usaré estado de uso de React. Ya que esto implicará expedientes y todo. Por lo que voy a crear algunas variables son estados. Primero seremos file, file set, file file llamado para usar fecha como esta. Luego rebotó archivo, set, archivo banner. Utilizan estado. Entonces const nombre. Setname es algo bueno. Fecha de uso. Entonces const bio. Set bio. Para usar estado como este. Entonces tendré dos funciones. Equilibrado. Banner es el evento. Si evento no es igual a nulo. Mismo lugar establecido por ahora archivo. Ese evento. Y el segundo será const file handler. ¿ Se va a hacer evento? Lo mismo. Si evento no es igual a nulo? Entonces ese archivo en bruto. ¿ Deberíamos evento como este? Entonces trabajemos aquí. Esa es la devolución, una declaración de retorno donde Dave, LastName, página de configuración. En primer lugar será la entrada, etiqueta, nombre, nombre, cambio de nombre, tasa y porcentaje de lectura etiquetado por color del suelo. Hashtag uno. Para uno. El 26. Un onchange se establecerá simplemente nombre, valor objetivo. Así. El segundo campo de entrada se llamará bio. Nombre, bio cambio. Y liderar se establecerá bio. Entonces tendré el apellido, PFP, que cambio mi imagen. Voy a usar ese componente brillante o se puede decir, esto nos lo dan ellos en tres UI kit. Y utilizaré Profile handler aquí. Y de igual manera, habré tenido cambio. Imagen binaria. Y aquí se le prohibirá ese manejador. Y por último, tendré el botón Guardar el cual editaré en el CSS. Ir a Settings dot archivo CSS. Digamos página Configuración. Al agregar 1880 píxeles. Flex de pantalla. La dirección de flexión será la brecha de columna. El píxel. Entonces me quedaré con éste. Velar y apilar 6878. El acolchado a la izquierda. Y usaré el CSS para guardar el color de fondo. Una D, A1, F hacer que la lectura será entonces píxel y punta del ala, axila, radio de borde. Después blanco. En peso seis y rojo. Rojo y rojo por ciento. Flex de pantalla. Justificar el centro de contenidos. Entonces a eso sin embargo, sólo voy a decir Kolkata es carceral debe señalarse. Vamos a ahorrar y vamos a ver. Mira nuestra página. Se ve decente. También se realiza la página de configuración del perfil. Tenemos todas nuestras páginas listas. Así que antes de terminar este video, último me gustaría crear una pantalla de inicio de sesión básica para el usuario, porque obviamente el usuario tiene que autenticarse antes de que vaya a esta pantalla de inicio. Hasta ahora que van al archivo app.js. Aquí. En lo más alto. Voy a importar botón. Tres código de interfaz de usuario, así es importante semana y se reunió el icono de la máscara de tres iconos de interfaz de usuario. Ahora aquí me gustaría tener algún estado y espero que lo hayamos usado. No, no tenemos que te quedaste aquí. Entonces solo hay que usar un const. Es nuestra decaimiento diez muertos es diez cerrada. Utilizan los archivos en el primer valor me gustaría tener es falso. Retorno. Sólo voy a tener una declaración if else. Iv, la autenticación es verdadera. Entonces mostraré este div nuestro. Si la autenticación es verdadera, cada show es el flujo de horas aquí. Y si no, entonces mostraré esta pantalla, que será Dave LastName. Ahora página de inicio de sesión. Así. Entonces tendré que decir logo encendido diga D. Y voy a tener un botón. Tendré un botón aquí ahora, que desbloqueará. Simplemente no hará nada. Tamaño X L, X dos. Cuando iniciemos sesión con MetaMask, equipo, icono principal será esta máscara. me puede gustar. N en la app dot CSS, tenemos esta página de inicio de sesión. Css, como se puede ver. Como sólo diré, bueno, si voy a mi página web y si refresco, está compilando, vamos a ver si está ahí en el editor. De acuerdo, mira, nuestra pantalla de inicio de sesión también se ve muy bonita. Es muy básico, pero hace nuestro trabajo. Eso es todo por este video. Espero que hayas aprendido mucho. En el siguiente video, trabajaremos en esas funcionalidades como iniciar sesión con mi máscara. Entonces eventualmente obtendremos datos de nuestra blockchain usando un test.js. Así que solo manténganse atentos y sigan aprendiendo. Gracias. 19. Autenticar al usuario con Metamask: Hola, bienvenidos de nuevo. En este video, autenticaremos la semana del usuario MetaMask. Antes teníamos esta pantalla de inicio de sesión. Ahora es el momento de escribir la funcionalidad. Así que vamos a la aplicación dot JS file. Aquí, me aseguraré lo importantes que son todas las dependencias. Lo primero que necesitaría es efecto usado. Entonces lo he hecho desde un núcleo requerirá notificación usada así como carga rígida. Entonces tengo esto, simplemente puedo rotar. Y después de eso, importaré éteres y Utils de comedores. Esto lo requerimos. Entonces requeriré modelo de árbol web. A partir del modelo de árbol web. Después de eso, requeriremos fuente, Drag, dirección. Rom. Puede enloquentar a phi prime aquí. Después de eso vamos a requerir ABA, carpeta ABA, luego haga clic en ese punto Jason. Y por último, exigir nuestra dependencia. Simplemente me sentaré Como requieres y luego sintonizaré nuestro Todd. Estas son las dependencias. Y creo que tenemos la caricatura. Está nuestro dy instalado ya. A ver, todo está bien ahora algún error está ahí, está compilando. Supongo que todo está bien, está bien. Ahora, necesitamos algunas variables de estado. Al igual que lo haremos, requeriremos este conjunto de datos. El proveedor es un estado fresco de usar y tendremos ventana dot it tedio como la primera fecha. Después de eso, requeriremos la biblioteca de notificaciones del kit Web three UI. Y luego tenemos un estado sólo para mostrar si eso está consiguiendo está cargando no están establecidos. Estado de carga está dispuesto a usarlo. Y lo primero que leemos archivos. Ahora, para leer sobre las notificaciones, puedes ir al sitio web de tres UI Kit, sitio web oficial y ver cómo usar estas notificaciones y todo. Sólo tendré una función de notificación de advertencia. Vacaciones es igual a como esto. Simplemente dirá que no haya defecación. Esa es ésta. Simplemente tendrá esto. Y dentro de ella, tenemos que enviar algunos parámetros como tipo, advertencia, mensaje, cambio, red. ¿ Quién polígono para visitar este sitio? Después de eso, voy a tener que simplemente cambiar a red de polígonos. Y después de eso tendré simplemente la posición de la notificación en la parte superior derecha. Así. Eso es todo. Es así como mostramos una notificación. De acuerdo. Lo mismo, requeriremos otra tendremos otra notificación la cual se conocerá como notificación de información. Tipo estará en su totalidad. Se aceptará y número de cuenta. En ese mensaje simplemente se mostrará el número de cuenta. Y aquí escribiremos que cuento conectado a cuenta de polígono. Es decir, si el usuario cambia Es cuenta de polígono, entonces también mostraremos una notificación porque ese usuario no puede usar otra red como trimestral o Rob Stone y todo. Pero definitivamente puede cambiar cuentas en el polígono Wallach. Eso es todo. Ahora, empecemos a escribir esa función. Voy a ponerle un nombre, conectar, cartera, hundirse, así. Ahora vamos a requerir el modelo Web tres para ello. Simplemente escribiré Web tres en 70, escaparé de ella. El modelo de árbol pequeño es igual al nuevo modelo. Entonces necesitamos conexión igual a esperar model.fit connect. Después de eso, tendremos el proveedor de Cloud es igual a nuevos comedores, que proveedores, Dodd Web tres proveedor. Y vamos a mandar esa conexión aquí así. Después de eso, obtendré la red que es qué red está conectada. Debido a que sólo en la red de polígonos hace sitio se abrirá. Espera proveedor punto obtener red como esta. Y sabemos que para una cadena de polígonos iGA1, id es igual a 80001. Esta es una idea de cadena de una red de polígonos. Ahora tendré una cláusula if else. Si obtener red dot jane ID, no es igual a la idea de cadena de polígonos si no se equipara. Entonces antes que nada, mostraré una notificación de advertencia. Tarde. Voy a hacer agregar nuestro interruptor. Entonces red. A lo que me refiero con eso, sólo voy al extremo. Seleccionémoslo hacia abajo. Entonces simplemente esta otra cosa. Se ejecutará si cadena de polígonos está conectada. ¿De acuerdo? Y ahora trabajaremos en este intento. Simplemente escribiré esperar proveedor, proveedor que la solicitud. Entonces lo que voy a pedir, solicitaré que mi Ted deje que lleve cadena media. Eso es si está conectado a otra cosa que sea piadosa o lo que sea la red entre conmutar la red. Y paradigmas. Paradigmas, escribiremos cadena ID. Utils, valor hexagonal de punto. Simplemente enviará el id del polígono Y aquí, si es exitoso, entonces simplemente te recargaremos, eso es la ubicación de la ventana, no recargaremos así. Y este código de sumador indica que esa cadena no se ha agregado a mis daños. Es decir que el usuario no tiene esa cadena. ¿ De acuerdo? Pero definitivamente hay que sumar esa cadena. Esa es la red de prueba de polígonos a los usuarios Máscara de materia. Solo estamos tratando de que su sitio web esté tan lleno de funcionalidades. ¿De acuerdo? Ahora, eso significa que lo haremos y red de polígonos. Tú. Papá, máscara de mi papá. De acuerdo. Ahora vamos a comprobar si código de punto de switch es igual a 4902. En ese caso, simplemente seca. Sí, yo solo agregaría que editar es mientras estamos agregando ahí, se tiró. De acuerdo. Y aquí sólo intentaré agregar la cuenta. Lo siento hizo eso en el proveedor de blockchain, ese método de solicitud se llama billetera. Añadir. Es tedio. Patrones en profundidad. Tendremos de todo. Eso es. Jane ID será utils, ese valor x. Tenemos que escribir idea de cadena poligonal de línea aérea nombre de cadena ligera polígono neto. Entonces RPC URL's. Simplemente tiene un RPC. O si puedes cambiar el PC, estás listo con solo buscarlo en Google. Si, si esta URL no funciona, Mumbai dot chain, stack, labs.com, block x low URLs, HTTP y HTTPS. Escaneo de polígonos de Mumbai. Es realmente Mumbai, Mumbai dot polygon scan.com. Y entonces tendré jardín nativo. Ver. Yo tendré la moneda nativa. Aquí. Tenemos que enviar. Símbolo, magia y decimales 180 k. y aquí simplemente lo tendré. Entonces eso es un peso. Y después de esto se hace, simplemente la ventana de carga punto ubicación, punto recarga, así. Entonces aquí estamos sumando la cadena del estadio, esa es la cadena de polígonos si el usuario no la tiene ya. Y en el anterior simplemente estamos agregando, cambiando esa cadena. Es decir, si el usuario tiene, si el usuario está utilizando otra cadena, entonces aquí simplemente la cambiará. Espero que no haya error. Todo funcionará. De acuerdo. Y ahora tenemos que trabajar en esta sección L. Se ejecutará si cadena de polígonos está conectada con el MetaMask. Entonces lo que vamos a hacer aquí es verificaremos si el usuario existe no lo son. En nuestro blockchain. Actualizaremos los datos del usuario en nuestro contrato , así como el almacenamiento local. Lo que quiero decir con esto es que utilizaremos el almacenamiento local aquí también. Entonces, en primer lugar, lo que voy a hacer es que me sacaré el registro de escritorio de que siempre y cuando este siempre que consiga firmante como este. Entonces conseguiré este letrero de que me visto, firmante punto get y vestido así. Entonces conseguiré ese contrato. Instancia del contrato, este nuevo contrato, este contrato C tendrá capital así. N aquí, lo que voy a enviar su dirección de contrato de Twitter. Entonces Twitter ABI punto aba. Y finalmente el firmante, así. Y aquí voy a llamar al get user detail fund Chen, eso es GetUser esperar. En pista. Obtener usuario. Si acudes al contrato inteligente que esta solidez uno, verás este método que es getUser, donde está aceptando dirección. Entonces ahora lo que estamos haciendo es comprobar si ese usuario es un nuevo usuario o ya se ha autenticado antes. Eso es todo. ¿ Eso es lo que añadimos? Deuda. Entonces lo que estamos validando el aquí simplemente obtendremos detalle del usuario. Si existe valor de imagen de perfil. Es decir, si existe usuario están aquí, simplemente vamos a obtener un usuario por primera vez y, um, y actualizar en el contrato. ¿ De acuerdo? Esto lo tenemos que hacer. Y después de hacer esto como que está aquí, simplemente tenemos que leer set provider con su valor de proveedor. Y set es nuestro 10º billete a verdadero. Y esta función o esta declaración if-else la escribiremos en el siguiente video. Sé que había mucho que hacer en este video, este video siempre. Pero como ves, este video fue nuestro video más importante en nuestra sección. Gracias. Continuemos en el siguiente video. 20. Verifica si el usuario ya existe: Bienvenido de nuevo. Continuemos con nuestra función connect vallate aquí. En primer lugar, basta con hacer este pequeño cambio IMG que es imagen de perfil. Y si el usuario ya existe, entonces simplemente configuraré que volqué en ese almacenamiento local por el nombre lo primero escribiré cuenta activa como esta. Y le reenvié a Jason dot stringify. Y aquí renunciará a su domicilio, pero simplemente volveré a copiar esto. Y aquí estará, esto será sine en vestirse así. Entonces solo lo estoy almacenando en el navegador del usuario. Es el nombre de su cuenta. Entonces, entonces escribiré, nombre de usuario, estaré aquí, detalle getUser, y vendrá en formato JSON y simplemente escribiré nombre. Y de igual manera copiaré y pegaré. En segundo lugar será la bio del usuario. Será bio, entonces será imagen de usuario. Y el siguiente será banner de usuario. Y aquí cambiarlo a imagen de perfil. Y el segundo será perfil, así. ¿De acuerdo? Entonces esto sucederá si el usuario existe y después de eso, establecerá eso, proveerá eso y establecerá estos autenticados en true. De lo contrario, si el usuario es un usuario por primera vez. Ahora aquí, primero escribiremos conjunto estado de carga es igual a true. Entonces simplemente escribiré LED está de acuerdo para afinar nuestro punto de alquitrán, generar nuestro neumático así. Por lo que voy a tener un banner por defecto aquí. Utilizaré el predeterminado por ahora de las imágenes por defecto. Entonces tengo esta. Lo usaré como banner por defecto. ¿ De acuerdo? Entonces de igual manera, aquí haré lo mismo. Conjunto que almacenamiento local. Por lo que el nombre de usuario estará vacío ya que se trata de un nuevo usuario. Por lo que el nombre de usuario estará vacío. biografía del usuario estará vacía. Ya que el usuario actualizará la biografía más adelante. Imagen de usuario será nuestro Todd. Esta. Sólo un avatar aleatorio. Y el binario de usuario será éste, banner predeterminado como este. Entonces aquí espero que lo hayan entendido hasta aquí. Después de eso, simplemente intentaré tener ese bloque de captura como este. En ese seco, simplemente escribiré const transacción es igual a una tarifa contrato punto actualización usuario. Ahora, tenemos que enviar pocas cosas, nombre de usuario, bio de usuario, perfil, foto y banner como este. Entonces lo haré de inmediato transacción, peso de datos de transacción como este. De acuerdo. Y si hay algún error, primer lugar escribiré console.log sumador. Sólo para propósitos de depuración. Y el usuario no tiene magia en su cuenta. Sólo para ese propósito, mostraré un mensaje de advertencia tipo notificación. Consigue el mejor polígono RAM magnético o un conjunto. Entonces obviamente para esta transacción que es actualizar transacción de usuario, necesitaremos algún tipo de tokens somáticos porque hay gas y todos estos están involucrados aquí. Requerir un mínimo de 0.1 med tech. Esto se requiere para ver en nuestra página web. Y partición. Arriba a la derecha. Así. Después de esta regla de multiplicación, establezca el estado de carga en falso. Y de aquí simplemente regresaré. Entonces este era el bloque else. Es decir, si el usuario es un usuario por primera vez, entonces tenemos el avatar predeterminado, cual será generado aleatoriamente. Por lo que obviamente, cada usuario tendrá su propio avatar. Y más banner predeterminado. No he elegido ninguna otra biblioteca. Tengo simplemente imagen ficticia. Ahora, es hora de que realmente se haga la porción HTML. Entonces aquí tenemos división lateral autenticada es su ventana principal, o k Ahora en la página de inicio de sesión, tenemos esto. Entonces imagen de Twitter. Ahora aquí tendré esta carga. Si y de lo contrario se está cargando. Entonces mostraré una carga rígida. Mismo tamaño de lugar, 50, spinner color verde. Y como voy a mostrar esto, pero hecho. De acuerdo. En esto, pero luego simplemente conectará cartera. Y aparte de eso, tenemos XL. Aquí todo está bien. Guárdalo. Veamos nuestra página web. Espero que todo esté bien aquí. Ahora, lo que voy a hacer es activar esa función de billetera usando el gancho de efecto de Estados Unidos. Aquí. Utilizaré efecto como este. Debe activarse cuando se carga la página. Ahora archivo FASTA, lo que voy a hacer es simplemente escribir si ese proveedor no está ahí, es decir. No hay My Thomas instalado. Simplemente escribiré alerta de punto de ventana. No. Mi máscara instalada así. Y asimilaré window.location dot reemplazar HTTPS. Mask.io irá a la página oficial. Y si no, entonces simplemente llamaré a la función de conectar billetera. Y también voy a tener estos métodos se proporcionan que este proveedor punto en. Lo primero serán las cuentas cambiadas. Habrá un asa de llamada a función en los vestidos cambiados. Entonces habré cambiado. Por lo que tendremos una función llamada manejar gen cambiado. Entonces simplemente escribiré esta conexión. Y simplemente manejará la función más pesada llamada manejar esta conexión. Vamos a crear estas funciones y eliminar cuentas cambiadas. Nos dará cuentas. Aquí. Haré un chequeo. Si proveedor dot chain id es igual a ID de cadena demótica, es decir, este es el identificador de la cadena mitótica. entonces mostraré adentro para notificación y simplemente enviaré cuentas 0, esa es la cuenta número. Por lo que mostrará en la página web qué cuenta se ha elegido. El segundo. Después de eso, quiero que se recargue obviamente. Pero hubo algunos temas. Así que solo para evitar recargar dos veces por primera vez, estoy usando esta declaración if. De lo contrario no era necesario. Pero puedes intentarlo sin esta declaración if. Y verás que ese sitio web se cargó dos veces y estaba pidiendo lo que dices. Esa transacción varias veces para la misma transacción. Por lo que quiero apenas hoy obtener artículo cuenta activa aquí. Si no es igual a nulo. Establecemos tiempo de espera. Simplemente. Escribiré locación de ventana dot reload. Y debería recargarse dentro de los árboles. Eso puede. Sólo lo estoy diciendo otra vez. Puedes probarlo sin esta afirmación, pero se recargará dos veces. Entonces. Ahora tendré otra función llamada cadena cambiada. Entonces aquí tenemos la identificación de la cadena. Entonces si Shane ID no es igual a nuestra mágica, entonces tendremos una notificación de advertencia. Y vamos a simplemente ventana dot, ubicación, recarga de punto. Y por último, como ahora no estoy haciendo nada. En este comunicado. Aquí. Si quieres, puedes hacerlo, haz lo que quieras. Entonces aquí tenemos todo listo. Ahora es el momento de probarlo y hacer, solo recuerda, ya lo he probado. Así que podría tener algún tipo de sesiones o locales en nuestro almacenamiento local anterior. Entonces, antes que nada, estoy tratando de asegurarme de que no haya ninguna cuenta adherida a ella. Creo que no hay cuenta. De acuerdo. Porque activará esta función. De acuerdo, para las pruebas. Vayamos a alguna otra identificación de cadena y sólo te lo mostraremos. Voy a ir temprano a probar la red, ¿de acuerdo? Ahora, si guardo todo, a ver eso primero. Es pedir, Ok, conectar con mi thomas. Diré a continuación. Conéctate. Entonces nos está pidiendo que les adaptemos a su red de prueba de polígonos. Voy a ir y simplemente cambiarlo. Ahora se está cargando, y ahora nos está pidiendo que hagamos esa transacción para actualizar al usuario. Estoy confirmando. Ahora vamos a ver qué pasa. Haz aquí. Tener cualquier editor o todo está bien. Podría llevar algún tiempo. ver, ahora nos envían a la pantalla. Y si lo refresco , A ver qué pasa. Ver nueve enviados directamente a la pantalla de inicio porque esta cuenta ya está siendo conectada. Consulta aquí, esta cuenta está conectada aquí. Y si voy a dirección de contrato y lo recargo, ver tengo esta transacción hace 31 segundos para actualizar al usuario. Ahora se actualiza con éxito. Nuestra parte de autenticación es exitosa. En el siguiente video, escribiremos la funcionalidad para agregar un juguete por este usuario. Gracias. 21. Configuración de Web3 Storage IPFS: Hola. En este video, trabajaremos en la porción de almacenamiento de Tao Te. Es decir, tenemos que habilitar algún tipo de IPFS para asegurarnos de que el usuario pueda subir imágenes también aparte del texto. Por lo que hay múltiples proveedores de almacenamiento IPFS. Una es piñata, la segunda que voy a estar usando es tres de almacenamiento. Si simplemente vas a la página web también. Ver, este es el sitio web oficial, web de almacenamiento de tres puntos. Estamos aquí buscando almacenar archivos. Si desea almacenar LFT, entonces también hay almacenamiento de puntos NFT. Por lo que si lo desea, puede leer la documentación. Yo sólo voy a iniciar sesión. Entonces ahora estoy iniciando sesión en mi cuenta. Mira, este es el tablero. Aquí. Tengo que conseguir una nueva clave token. Obviamente ya hay muchos archivos en mi almacenamiento, pero debes ir a tokens API y crear un nuevo token. Lo llamaré API de Twitter. Y simplemente creado. Después de eso, solo copiado, asegúrate de no compartir esta clave token con nadie más. Definitivamente lo borraré más adelante. Simplemente en ese archivo config dot js aquí, ¿verdad? Exportación. Const tres almacenamiento. Api es igual a y pega la clave aquí. A continuación, vaya al archivo home dot js aquí. Y ahora importa pocas cosas. En la Web tres código UI. Me gustaría imponer notificación de carga y uso. Después de eso. Después de eso, tenemos que esperar en alimentación. Entonces importaré éteres. Éteres, pero de la biblioteca Ethernet, no de cabeza dura. A continuación, importe el modelo de árbol de la web al modelo. Entonces voy a importar estos dos expedientes, que es una dirección de contrato. Y esta, nuestra API de almacenamiento de nivel web. De config. Entonces importaré ABA, ABA slash return json. Y por último importaré las golosinas de laboratorio dicha edad a partir de los 18 años. Um, hemos instalado almacenamiento de árbol web o no. A ver. No me acuerdo. Dots door age, supongo. No hemos instalado el almacenamiento web two dots. Veamos tres puntos. Para enfurecer npm. Tenemos que instalar esto. Simplemente. Ve. Y PM con estilo. El almacenamiento de puntos en T. Después de una instalación exitosa, nuevamente, npm start. Y aquí tenemos esta web t dot storage instalado. ¿De acuerdo? Ahora tenemos este archivo de entrada, la imagen de lactato. Entonces después de eso tendré pocas cosas. Empecemos con const. Usa esa imagen. ¿ Es bueno JSON dot parse, almacenamiento local, punto get item. Así que simplemente estoy obteniendo la imagen del usuario del almacenamiento local como cuando, cuando estábamos autenticando, tuvimos un azar a lo largo del tiempo. ¿ Verdad? Entonces estamos usando eso. Lo estamos obteniendo del almacén local. Después hemos ido archivo seleccionado, archivo seleccionado para usar estado. Entonces tenemos el estado de carga. Carga, set. Subiendo, perdón por no cargar, se está subiendo. Para usar la pausa. Entonces tenemos una URL cargada de BFS vacía. Y por último, hemos hecho notificación es usar notificación. Estas son todas las que, estas son todas las cosas que se requieren. Entonces tendremos una función sinc para almacenar el archivo en nuestro IPFS. Vamos a anotarlo. Puede obtener esos métodos en la documentación así como en el almacenamiento del árbol web si tiene alguna confusión aquí. Simplemente ese cliente const es igual al nuevo almacenamiento web taste. Entonces. También lo puede hacer la API de almacenamiento en árbol. Entonces const root CAD es igual a esperar. Ciegos. Votar. Bien, así. Y por último, voy a tener IPFS URL es igual a esto. Esto está por encima de la pestaña. Botón Tab. Al igual que https slash signo de dólar, raíces CAD punto b, fs de web dot link que slash dollar. Archivo seleccionado. Nombre. Así. Esta era una función para almacenar el archivo sólo esta cantidad. Entonces tenemos click de imagen, Ok, y luego tenemos manejador de cambios. Costo. Archivo de imagen va a archivo de destino, a continuación, establecer la imagen seleccionada. Tenemos esto. Y luego establecer el archivo seleccionado. Evento punto objetivo, encuentra. Eso es todo. Ahorra en. Espero que no haya ningún tema. Entonces en este video, acabamos de trabajar en las funciones de IPFS y todo. En el siguiente video, escribiremos la funcionalidad completa para agregarla. Gracias. 22. Función para agregar un Tweet: Hola. En este video vamos a anotar Panchen para agregarlo. Entonces simplemente, vamos a crear una nueva función cuando Chen y yo la llamemos, agréguela. Entonces, antes que nada, tendré una declaración if else. Si tweet texto dot dream es menos de cinco, entonces tendremos una notificación mostrando una delegación de advertencia. Ese mensaje será mínimo, cinco. dosis Se requerirá dosis. Judíos y erguidos. Y aquí simplemente regresaré. Es decir, no quiero que se ejecuten las otras funciones. Si este no es el caso, simplemente escribiré set uploading. Cierto. Si la imagen está seleccionada, esto, usted ha seleccionado la imagen está ahí. Entonces llamaré a la función de archivo de la tienda. Desde aquí. Es esta función la que nos conseguirá la URL subida de IPFS. Después de eso, simplemente tendré nuestra conexión, es decir Web tres modelo es igual a nuevo modelo. Entonces lo mismo, const, conexión es igual a esperar que los tres puntos se conecten. Contras de altura es igual a nuevo. Prueba que los proveedores Dodd Web tres proveedor. Y enviaré aquí la conexión. Entonces const sine es igual al proveedor que obtiene Signer. Entonces conseguiré el contrato. Ito es el contrato. Contará con la dirección de contrato EVA y cianuro. Entonces tendré que el valor del tweet es igual a 0.01. Contras precio es igual a E punto punto más e valor. Porque si te acuerdas por agregarlo, tenemos que mandar esta magia. Intente. Atrapar, bloquear, Buster más lejos. Hagamos que nuestra transacción sea igual a esperar, contratar y tuitear. Tenemos los enviados a un texto, una URL BFS, y nuestro valor de transacción de precio de esa manera. Y después voy a tener una notificación, ellos éxito. A ello. Y luego con éxito Shen Dao en posición vertical. Después configuraré la imagen seleccionada. Haz otro set. Dos, toma dos conjunto vacío seleccionado. Y finalmente configurar falso contaminante. Y si tenemos una vísera, entonces otra vez, mostraré una notificación. Agregaron. Aquí, escribiré transacción error de transacciónde transacción, mensaje de error. Y después de eso configuramos subir a false así, para que el usuario sepa lo que está pasando. ¿ De acuerdo? Entonces tenemos que devolver el archivo HTML aquí. Vamos a comprobar que todas y cada línea será imagen de usuario. Veamos donde tenemos la imagen del usuario aquí. Y sólo lo haré letra pequeña. Usa esa imagen. Entonces tenemos área de texto. Entonces tenemos cubierta Sadia aquí. El valor será texto y sobre tintes. De acuerdo. Entonces tenemos sección de tweets por Liz, sus amigos onchange mostrar ninguna imagen seleccionada. Espera uno, día, todo está bien. Entonces tenemos esta sección aquí. Al hacer clic. Agrega a ocho divertidos Chen. Y en su interior tendrá una declaración if como si se está subiendo es verdadera, entonces mostraré el indicador de carga como un derecho real, así. Y aquí enviaré subiendo prop también, para que más adelante cuando el usuario agregue nuevo a él, entonces este tweet en componente fluido también refresca eso. Perdón. Nada más. A ver. A ver si hay algún error. Yo no lo creo. ver, tenemos nuestro azar, nuestro tiempo aquí. Entonces eso significa que está funcionando. Entonces solo escribimos, este es mi primer 28. Utilizaré esta imagen. Simplemente le escribiré, digamos que este es el indicador de carga. Ahora comenzará a subir. Después de subir, los llamará Meta mask. Para agregarle eso. Tenemos que dar 0.01 métrico. Estoy confirmando. Obviamente tomará algún tiempo. Tienes que esperar. Ver tweet añadido con éxito. Tenemos una notificación aquí. Y si vamos al contrato y se refresca, a ver. ver, tenemos este complemento. Tres segundos, así que supongo, y el valor es 0 y así todo está funcionando correctamente. En el siguiente video, escribiremos la funcionalidad para mostrar que tuits de la blockchain. Gracias. 23. Función para mostrar los Tweets: Hola, bienvenidos de nuevo. En este video, trabajaremos en la función para mostrar tweets en nuestra casa así como la pantalla de Perfil. Entonces ve a esperar. En feed dot js archivo. Tenemos que conseguir algunas cosas. Tenemos que importar fructificación. Por lo que sólo voy a ver uso. Simplemente copiaré y pegaré esto aquí. Se requerirá uso, afecto, fecha de uso, estas cosas. Después de eso, requeriremos requeriremos que hayan ajustado SCSS desde el núcleo, requeriremos carga de avatar. Usar notificación. Entonces en los iconos, aparte de magia, requeriremos icono bin también. Entonces requerimos un modelo de árbol conciso y dirección de contrato de Twitter. No requerimos la API de almacenamiento del árbol web. Y por último, requerimos que le digamos contrato. Puedes nombrarlo como quieras. No es que tengas que nombrar lo mismo en todos los archivos. Dot Jason. De acuerdo. Vamos a requerir algunos estados. Entonces, antes que nada, deberíamos, estamos enviando algunos apoyos aquí. Es en primer lugar, todos los días dije const en el usuario se va a hacer puntales perfil punto. Y dejar que el componente de carga es igual a props dot reload. Así. Entonces tendré que, está configurado a su es igual a usar el estado EMTALA. Entonces tendré const cargando datos. Conjunto. Estado de carga es igual a usar cosas de estado y no voy a cargar. Y por último, habré hecho notificación es que vas a usar la notificación. ¿De acuerdo? Ahora, escribiré esa función para buscar solo usuarios encendido para relacionar una funtion sinc, cargar mis tweets. Por lo que aquí voy a copiar pegar pocas cosas. Eso es Web tres modelo, conexión y ese contrato aquí. Entonces aquí tenemos el modelo de árbol web, luego la conexión, luego el proveedor, luego firmante y contrato aquí. Será simplemente no tener puntos EBI firmante aquí. Y luego agregaré contras, los datos se van a esperar contrato. Obtener mis tweets de la cadena de bloques. Entonces agregaré const. usuario es igual a JSON.parse, punto de almacenamiento local get item username. Y de manera similar, tendré uso que la imagen es igual a JSON dot parse. Aquí se usará esa imagen. Y luego me relaciono const resultado es igual a esperar. Lo que voy a extrañar, datos de puntos, mapa de puntos. Aquí, un lavabo. En primer lugar, vamos a por eso. Tiempo. Uniques es una buena manera de hacerlo. Marca de tiempo de punto. Entonces pistolas, harán Nueva. Y simplemente convirtiendo la marca de tiempo a la fecha local. Tiempo Unix multiplicado por mil. Esto lo conseguí por Google. puedes buscarlo en Google. Cómo convertir unidades, unidad de una marca de tiempo Unix a la fecha de JavaScript. Fondos a la fecha es la fecha de vencimiento a fecha local string f, RC. ¿ De acuerdo? Entonces agregaré artículo de plomo. Yo lo estoy convirtiendo a un objeto es igual a peso. Twitter. Y esto no será igual. Esta es la columna ID, tweet punto id, texto punto txt. Imagen Gouache. Esa imagen se borra. Tarifa es nombre de usuario. Nombre de usuario. Usa esa imagen. Usa esa imagen. Fecha, fecha. Este es el objeto item, y aquí simplemente devolveré este ítem y crearé un anuncio en esta radio de resultados. Pero entonces simplemente voy a decir resultado dot reverse porque sólo estoy invirtiendo la edición y establecer el estado de carga a cargado así. Después de esto, crearé una función similar Para buscar. Todos los tuits. Eso es para la pantalla de inicio. Yo lo pondré un nombre, carguen nuestros tweets. Entonces esta web para modelar, estas cosas son comunes. Aquí. Ahora van a cambiar algunas cosas, pero no todo en camino. Entonces aquí obtenemos todos los tweets, obtenemos todos los tweets. Entonces aquí no requerimos este nombre de usuario e imagen porque esto será aleatorio para todo el usuario. Obviamente estamos envejeciendo tweets. Por eso. Entonces resultado promesa punto unix tiempo a una fecha de marca de tiempo de punto. Todo está bien. Entonces requerimos obtener detalle del usuario es igual a esperar. Contrato. Dot get usuario. Aquí enviaremos espera punto, Twitter. Obtendremos el detalle del usuario. Tenemos esta función en nuestro contrato inteligente de solidez. Entonces tenemos que devolver es su identificación a un texto. Imagen, es el nombre de usuario será obtener detalle del usuario, y aquí se nombrará y utilizará esa imagen será rho phi i m g image. De manera que ese regreso, entonces todo es igual. Ahora tenemos que devolver HTML en consecuencia. Estaré aquí, ¿verdad? Si el estado de carga es igual a no cargado, entonces aquí. Y devuelva el nombre de la clase. Cargando. Aquí, como cargar widget 60 y etiqueta de color de impresora a 2475. Del mismo modo, tendremos si estado de carga es igual a cargar en y hacer una longitud de punto no está ahí. Después volveremos a un nombre de clase de etiqueta. Yo sólo le daré cargas. Y aquí agregará ningún peso disponible. Si el usuario no ha publicado nada, entonces este será el caso. Y si no, entonces aquí lo tenemos todo. Aquí. Hey les mapa de puntos. Entonces tendremos el peso y el índice. Cortaré todo y lo pegaré aquí. Entonces tenemos que hacer algunos cambios. Obviamente. La imagen será de peso. Usa esa imagen. Entonces aquí, en lugar de una masa de tierra, escribiré nombre de usuario. En esa cuenta. Le escribiré. Entonces en ese contenido de tuit de aquí, tuitearé texto. Y en esa imagen tengo que comprobar si la imagen del iris está disponible o no. Por lo que simplemente escribiré tweet, tweet imagen no igual a vacía. Entonces solo muestra esto. Entonces sólo tenemos que mostrar aquí imagen oscura como esta. ¿ De acuerdo? Entonces en las interacciones el círculo de masas está bien. Entumecido dije círculo, simplemente escribiría 0. Aquí en no arranca. En lugar de este estilo, escribiré calendario y simplemente pegaré fecha de tweet. Y entonces por fin, haré un chequeo. Si, a menos que el usuario sea verdadero. Entonces mostraré una carpeta bin que es Dave, nombre de clase, interacciones num. Y voy a mostrar se ha doblado. Peso, color F, F 0000. Y en este momento esto tendrá en onClick de null. Nulo. ¿ De acuerdo? Y en la porción más, escribiré esto, podría tomar uno. Es aquí en el otro, y sólo los pegaremos Ártico. Eso es lo que está ahí esta lógica. Si se trata de una sección de perfil que el usuario debe poder eliminar utilizando esta bin. Yo puedo hacer sus propios tweets. Ahora, todo está hecho. A lo único que tengo que hacer se le llama efecto enorme. Porque obviamente tenemos que llamar a esta función que es cargar mis tweets y todo. A mí me gusta mucho, si este es un perfil de usuario, entonces llamaré señor, mis tweets. Como llamaré cargar todos los tweets. Y esta página se refrescará. Si mandamos un lago comiendo aquí, el componente de carga y todo. Si esto se cambia, entonces esta página se actualizará. Ahora guarda y veamos si hay algún error o no. Refrescante. A ver, tenemos a nuestros dos. Pero yo ninguno. Y estaba a punto de decir que la imagen no está ahí, pero también se muestra la imagen. Eso significa que todo está funcionando a la perfección. En nuestra sección de perfil también, tenemos esto, que son nuestros tweets y todos esos datos también son correctos. Ver aquí tenemos esta carpeta bin. Pero aquí tenemos este signo de métrica, lo que simplemente significa que podemos eliminar esos tweets de nuestra sección de perfil. Espero que hayan disfrutado y aprendido mucho. En el siguiente video, trabajaremos para mostrar esa información correcta en esta sección de perfil. Gracias. 24. Mostrar datos de los usuarios en la página de perfil: Hola, bienvenidos de nuevo. En este video, trabajaremos en esta sección de perfil. Ir al archivo de perfil dot js. En primer lugar, tenemos que importar pocas cosas. Esta copia, esta cosa CDX que se usa efecto de uso de estatina. Entonces necesitamos en negritas letras de comedores. Importar árbol web, modelo, tres modelos, y luego importar desde iconos. Ahora aquí vamos a requerir de muchos estados. Empecemos por obtener la información activa de la cuenta de ese almacenamiento local. Jason. Barras. Almacenamiento local, punto get item, cuenta activa. De igual forma, sólo copiaré y pegaré pocas veces. El segundo será el nombre de usuario. Aquí será nombre de usuario, luego será bio del usuario. Será bio del usuario. Entonces es imagen de usuario. Tenemos la imagen del usuario, entonces es Usar el banner. Entonces el nombre de la clave es banner de usuario. Entonces tendré un estado llamado saldo de cuenta. El saldo de la cuenta es igual a tu estado. El primer estado será 0. Obtendré ese saldo de la cuenta también de la cartera y lo mostraré en nuestra página web. Así que simplemente escribe una función sinc, consigue contar, balancear. Así. Tendré el verbo tree model, model, new web tree model. Entonces esa conexión, como siempre, conexión de pistolas es la esperaremos Web tres módulo 18. Tendrá que modelar esa conexión. Entonces voy a dejar, vamos. Vida se debe a nuevos comedores, proveedores, web a proveedor. Tenemos que enviar esa conexión. Entonces plomo. Valence es igual a aguardar. O consigue equilibrio. Tenemos que enviar ese número de cuenta, que está en la cuenta activa. Almacenamiento local. Entonces me acaba de convertir por lentes un buen comedores. Haz colas. Formato de punto una tabla. Genial, fuimos número muy largo. Ajustaré genes que equilibren a subcadena. Mostrar cuatro dígitos sólo de 0 a cuatro. Eso es todo. Y voy a dejar establecer saldo de cuenta, va a equilibrar. Entonces en el efecto EU, llamaré a esta función obtener saldo de cuenta. Y mostraré aquí esa información que se presenta por nodo, será banner de usuario. A continuación, perfil, imagen se utilizará nombre de imagen. Si hay algún nombre, nombre de usuario. Aquí, será cuenta activa. Entonces mostraré la magia. Puedo escribir el saldo de la cuenta así. Entonces tienes bio de bluff del usuario. Simplemente escribiré la bio del usuario aquí. Nombre de usuario es su imagen bio por no todo está ahí. Digamos: Bueno, mira, tengo 4.7. Dramático, esta es mi foto de perfil. Número de cuenta, nombre de usuario, cualquier bio de usuario no está ahí en este momento porque es una cuenta nueva. Lo actualizaremos más adelante. Pero esta sección de perfil está funcionando a la perfección. Gracias. 25. Función para eliminar un Tweet: Hola, bienvenidos de nuevo. En este video, trabajaremos en la función para eliminar un tweet. Por lo que obviamente en esa sección de perfil, tenemos ese botón de la deuda es eliminar ocho semanas. Pasemos a este perfil que js y C no en sillas de punto de perfil. Tenemos que codificar para hacerlo en fluido. Aquí. Y aquí verán esto. Esto lo hemos sido. Simplementeve aquí. Entonces la función lo nombra, peso retrasado. Necesitaremos esa ID de tuit para ello para ese fin. Entonces archivo FASTA configuraré el estado de descarga a no cargado. Entonces voy a requerir días pocas cosas para modelar. Conexión de cualquiera de las dos. Datos de Ebi es igual a aquí borrará a ocho. Entonces id, y tenemos que enviar a que esto se borre. A continuación, esperan datos de punto peso de punto. Entonces mostraré en notificación, éxito. Con éxito. Audición. Oscuridad, brillante. Ahora también podemos dar algún defecto. Podemos cambiar el icono. Cambiaré el icono a esta papelera. Y después de eso, llamaré a cargar mis tweets solo para refrescarlo. ¿De acuerdo? Entonces aquí en este onclick, tenemos que escribir, borrar para esperar y hacerlo. ID de punto. Eso es todo. Ese es el cambio no iluminado que se requiere. Ahora guarda todo n Solo por simplicidad, ya he agregado otro tuit, que ahora borraré. ver, esto es un tuit. Sin imagen. Voy a ir y dar clic en este icono y ver donde hay retraso para confirmar que la noche tomará algún tiempo como siempre. Ver, ese tweet se elimina con éxito, que Twitter ahora se ha ido de nuestra pantalla de perfil así como de la pantalla de inicio. Eso significa que la funcionalidad de eliminar también está funcionando perfectamente. Eso es todo por este video en la próxima sesión. Gracias. 26. Función para actualizar los detalles de tu perfil: Bienvenido al video final donde trabajaremos en la página Configuración para actualizar el detalle de un usuario. Ir al archivo settings.js. Y empecemos a trabajar. Desde el núcleo. Requeriré carga así como notificación de uso. Entonces desde React, requeriré fecha de uso y efecto de uso. Entonces importaré cosas. Creo que si voy a perfil, las sillas son home dot js. Encontraré todas estas cosas aquí. Y sólo pegaremos que es web de comedores para modelar con una dirección de contrato y almacenamiento. Entonces decirle a ABI y almacenamiento web. Ahora, en la página de configuración , necesitaré, dejaré primera notificación. ¿ Es bueno usar notificación? Entonces const nombre de usuario? ¿ Se va a Jason, bares, almacenamiento local, punto get item, nombre de usuario. Del mismo modo, requeriré bio del usuario. Usa la imagen y la banda de usuario así. Entonces tengo archivo de perfil Prof, luego nombre de archivo binario. Lo primero que tendrá es nombre de usuario bio, el primer estado que tendrá bio de usuario. Entonces habré rebotado. Estado de carga y carga. Usa las barras. Entonces deja que phi. Señor, vas a usar imagen en el primer comienzo que Ben upload URL es igual a panel de usuario. Te lo explicaré todo. Pero aquí, lo que estoy haciendo es aquí nombre, el primero, en el primer inicio, tendrá nombre de usuario predefinido, que está en el almacenamiento local, mostró eso. Entonces aquí escribiré, escribiré dos o me ayudará como marcador de posición, cualquiera que fuera el nombre anterior. Sólo por esa razón. Ahora, tendré funciones. Por eso. Simplemente volveré a ir a casa dot js, obtener la función de archivo de puerta de polvo aquí, pegarlo. Aquí. Tendrá archivo seleccionado. Habrá seleccionado archivo y todo es ahora k. y voy a devolver esta URL de subida IPFS. Esta URL de subida, la devolveré. Cada otra cosa. Esto será plomo. Porque esto no estaba predefinido. Aquí lo estamos declarando. ¿ De acuerdo? Entonces en su manejador de banners, tenemos esto, que es que no necesitamos cambiar nada en su manejador de perfil. Evento. Dicho perfil. De acuerdo. Y sólo tendremos este enorme efecto se hace con cosas de MDF. Y cambiará de acuerdo, siempre que cambie este estado de carga, refrescará la página. Entonces tenemos que escribir la función. Tenemos que escribir la función para actualizar el perfil. Ahora lo que voy a hacer establece la carga en true. Entonces si el perfil Phi no es igual a nulo, entonces lo que tenemos que hacer es nuevo lead, nuevo archivo. Url es igual a aguardar archivo de tienda. Y tenemos que enviar un archivo de Agregar un perfil como este. Y luego escribiremos carga de perfil. Es aquí. Lo es. Carga útil PHY que se ejecuta. Por. Ahora sube esa URL. De acuerdo. Yo sólo iré e insertaré aquí. Este que es nuevo perfil subido aquí. Será nueva URL subida del archivo Raw si el usuario ha cambiado algo. De igual forma, lo que haré es si cambia el archivo de banner, lo que haré es que realmente escucho como nueva URL cargada de banner. Y sin embargo me gustará archivo banner. Y luego otra vez, aquí voy a cambiar por no subido. Y aquí va a cambiar porque son condiciones porque el usuario puede o no cambiar foto de perfil. Él sólo quiere cambiar su nombre de usuario. Depende de él. Por eso estoy haciendo tantos cheques IF. De acuerdo. Entonces voy a requerir después de eso, voy a requerir, otra vez menos cosas. Peso. Tenía mucho código. Así que ahora solo estoy pensando dónde aquí, este código una y otra vez requerimos ir a ajustes aquí tengo esta fecha base. Tenemos que modelar, tenemos la conexión, se pone centro. Entonces tenemos ese Twitter Aba aquí. Nos aba punto aba. Entonces tenemos que transacción es capaz de contraerse. Usuario de actualización de punto. El nombre de usuario, bio archivo URL subido, banner, URL subido como este. Entonces agregaré esperar transacción que peso y actualizar esto cambió. Ahora lo que tenemos que hacer es asegurarnos de actualizar el almacenamiento local también. usuario, JSON.parse, stringify, nombre. Después usa bio. Jingle fi, bio. Usted es imagen, perfil subido URL, Banner. Por URL no cargada. Entonces solo enviaré una notificación. Éxito. Bien. Audición con éxito en posición vertical. Y por último añadiremos set loading false. Por lo que este tiene la función de subir la URL. Por último, tenemos que devolver HTML también. Aquí. Nombre está muerto. Sobre cambios. El S simplemente tenemos que agregar valor es igual al nombre de usuario. Del mismo modo, aquí tenemos que escribir valor es igual a usar bio. Entonces tenemos la imagen de perfil, que está bien. Tenemos esas imágenes de banner también. ¿Kay? Entonces solo mostraré una carga que si se está cargando, luego mostraré un div LastName Save. Y sólo mostraré aquí el botón de carga. Y si no está cargando ningún onclick, onclick, solo llamaré a la actualización. Esta es esta función. Lo cortaré y lo pegaré aquí. Ahora, hagámoslo todo. A ver, ojalá todo esté bien. Sólo nombrelo. Fueron tres. Imagen de perfil de desarrollador. Voy a cambiar a Ben. Y aquí escribiré. Voy a cambiar eso. Heintentado cambiar el binario a éste. Obviamente tomará algún tiempo porque son dos imágenes subidas a IPFS y todas simplemente se guardan. Espera algún tiempo. Por lo que está pidiendo actualizar. Es por eso que confirma transacción más fuerte. Esperemos. Por lo que el perfil de los muertos con éxito esta muestra. Ahora, vamos a nuestro perfil. ver, se ve tan bonito. Toda nuestra información ya está actualizada. Tenemos esta foto de perfil, tenemos este nuevo banner run. Si voy a Pantalla de Inicio, ver aquí, y también mi foto de perfil ahora se cambia. Por lo que todas las funcionalidades y ahora funcionando a la perfección, nuestra app está completa. Espero que hayan disfrutado y aprendido mucho. En el siguiente video final, solo volveremos a probar esa aplicación completa y veremos si hay algún bug o no. Gracias. 27. Prueba la aplicación completa: Hola, bienvenidos de nuevo al video final de este curso. En este video, probaremos esa aplicación completa. Entonces comencemos. En primer lugar, simplemente copiaré el host local y crearé una nueva ventana de incógnito. Aquí, no he instalado masa de materia. A ver qué pasa. Ver una instalación normal, más tonta. Si hago clic en Ok, entonces va directamente a ellos sitio web de MetaMask. Por lo que el usuario tiene que instalarlo para visitar nuestra aplicación a esta. Entonces esto lo hace libre de errores. Y ahora vamos a cambiar una cuenta. Originalmente tenía esta cuenta ya conectada, y también he agregado un nuevo tweet. Ahora usaremos este árbol de cuentas y haremos click en Conectar máscara metálica. A menudo de forma indefinida se le pedirá actualizar el perfil de profundidad. A ver cuáles son nuestros datos que obtengo. Así que a ver, Esta es la hora que me sale y esta es la página de inicio. Y este tuit se hizo desde mi otra cuenta. Si voy a sección de perfil de aquí, no mostrará ningún tweet disponible. Y además, si lo deseas, solo puedes cambiar el color de este negro a blanco. No se ve bien. Y ahora sólo diré esto también. Es a partir del segundo conteo. Y yo sólo digo retoque. Confirma ese tweet a nosotros, edita con éxito. Obviamente tomó algún tiempo, pero ahora se agrega con este punto r aleatorio. Y se puede ver que tenemos esto así evidenciado ir a e ir a la configuración y simplemente cambiar a. Yo sólo escribiré aquí. Mark Zuckerberg, fundador de redes sociales. Y sólo guárdalo. Guardar perfil actualizado con éxito. Si voy al perfil, llamo Mark Zuckerberg. Y aquí realmente solo está mostrando a Mark Zuckerberg. Todas estas secciones están funcionando perfectamente. En el lado derecho. Simplemente puedes hacer cualquier anuncio que quieras. Supongamos cursos de capacitación, noticias tendencias, blogs de tendencias, lo que quieras, solo puedes codificarlo a tu sitio web. Ahora, me gustaría mostrarles la funcionalidad que agregamos. Supongamos que si cambiamos la cuenta de una con, queremos dar cuenta también. ver si lo conecto. Nuevamente. En realidad conectó el ícono del polígono, este. Y ahora estoy de nuevo, vuelve cambiar a mi primera cuenta. Entonces todo esto se hace dentro de aquí. Lo es. En el app.js. Tenemos un cambio de cuenta y cambiar genes y todo. Entonces qué pasará si voy y cambio la red de polígonos para ir cojeando. ver, entonces es red de dos polígonos. Y ahora si hago clic aquí, nos está pidiendo cambiar de red. Y si cambio de red, entonces otra vez, me envían de vuelta a la página web o de lo contrario no podré visitarla. Por lo que este sitio web tiene todas las funcionalidades. Todo está funcionando. Simplemente puedes hacerlo vivir y eventualmente en tu portafolio, Depende de ti. Espero que hayan disfrutado. Asegúrate de ver mis otros cursos también. Gracias. Que tengas un buen día y sigue practicando.