Crie um clone do Twitter Web3 usando o Solidity e o Polygon

1. INTRODUÇÃO DO CURSO: Mas essa tem sido uma das plataformas de mídia social mais populares em todo o mundo. No entanto, os usuários de criptografia percebem que uma versão descentralizada do Twitter seria altamente benéfica , pois eliminaria os aspectos negativos de uma plataforma centralizada. Neste curso, você aprenderá a construir um clone descentralizado do Twitter usando solubilidade e blockchain de polígono, os usuários poderão se autenticar usando carteira MetaMask e compartilhar seus pensamentos com todos nessa plataforma. Cada usuário terá uma tag aleatória gerada ao se inscrever pela primeira vez. Eles podem até alterar a imagem de exibição e o banner na seção do seu perfil. Mais tarde, começaremos escrevendo e testando esse contrato inteligente usando solidariedade e remix. Em seguida, implantaremos o contrato, a rede de testes de Mumbai usando o coração. Depois disso, usaremos o React js para construir nosso front-end e finalmente, usaremos o JS de Ito para interagir com o contrato diplóide. Para fazer upload de imagens, usaremos um provedor de serviços IPFS de armazenamento de dois pontos na web. Ao final do curso, você aprenderá tudo o que é necessário para se tornar um desenvolvedor web full-stack sem perder mais tempo. Inscreva-se agora e vamos começar. 2. Crie um projeto hardhat: Olá, bem-vindo ao primeiro vídeo que configuraremos o ambiente de desenvolvimento. Antes de avançar, vamos discutir o roteiro do curso. A primeira coisa que faremos é montar esse projeto de cabeça dura. Em seguida, criaremos um contrato inteligente que rastreia e armazena dados de tweets. Depois disso. Vamos testar nosso contrato inteligente. Podemos não escrever teste unitário, mas vamos testá-lo usando remix. Depois que todos os métodos estiverem funcionando corretamente, implantaremos o contrato inteligente no destino do polígono. Depois disso, criaremos um front-end React js e usaremos uma ptose e MetaMask para interagir com o contrato diplóide. Na sessão final, testaremos todo o aplicativo e garantiremos que não haja bugs nele. Também me certifico de que você tenha instalado MetaMask e tenha alguma métrica de teste em sua conta. Você pode simplesmente pesquisar no Google se quiser. Não vou configurar de novo. Você pode assistir a qualquer tutorial. São apenas alguns cliques nos botões e continue com esse curso. Mais uma vez, você pode ver toda a pilha de tecnologia de nosso aplicativo descentralizado. Esse blockchain será a solidez do polígono, capacete de segurança. Usaremos meu damasco. O provedor do nó será o Alchemy. Tem apenas a frente. Em seguida, usaremos HTML, CSS e JS. Então, vamos começar a criar esse projeto. Agora vamos começar criando uma pasta. Vou dar um nome a ele. Tweeter dab. Aqui, criaremos um projeto de capacete de segurança. A propósito, espero que você saiba o que é difícil, difícil. Hard hat é um ambiente os desenvolvedores usam para testar, compilar, implantar e depurar aplicativos descentralizados baseados em blockchain de titânio que ajuda os codificadores a gerenciar muitas das tarefas que adquiri, desenvolver e redigir contratos inteligentes e facilitar esse processo. Então, nesta pasta, traga esse terminal. E antes de criar ou instalar o hardhead, temos que criar um projeto vazio e PM usando esse comando npm nele. Por quê? E depois disso, simplesmente com estilo. Hardhead usando este comando npm install, save dev. Eu tive. Então leia mais sobre capacete de segurança. Você pode simplesmente ir para o cabeça-dura, digamos aqui. E você também pode ler a documentação. Porque qualquer que seja o código que estamos usando, está tudo escrito aqui passo a passo, assim, npm init y, e pagamentos Teilhard tinha Dev assim. Agora, para criar uma lógica, temos que usar um capacete rígido de n px. Em seguida, selecione o primeiro que fiz é criar um projeto JavaScript. Pressione e toque em pressione Enter. Agora, ele está nos dizendo para instalar essa dependência também. É uma caixa de ferramentas simplesmente desperdiçada e pressione Enter. Esses pacotes de ferramentas são pacotes menos usados e como os logins são recomendados para começar a desenvolver, como éteres. Ma Cao Dai, eu tinha chai matchers, hardhat, ele vai escanear, etc. Agora as dependências estão instaladas, basta anexar nosso projeto no VS Code. Vou apenas escrever código. Ele o abrirá no VS Code. E também no código VS, certifique-se de ter extensões como solidez, vento de cauda, hardhead, esse tipo de extensão que você já instalou. Mas é isso para este vídeo. No próximo vídeo, obteremos as chaves alquimia e MetaMask em nosso projeto. Obrigada. 3. Teclas de alquimia e metamask: Oi, hardhead nos dá algumas pastas e arquivos. Discutiremos tudo isso passo a passo. Mas primeiro, vamos para as cadeiras de pontos de configuração hardhead e garantir que estamos apontando nossa rede para a rede de teste de polígono. E para que isso funcione, precisamos da URL do nó poligonal, qualquer endereço válido. Como eu já tenho contas, eu não estaria criando uma nova conta na alquimia. Você pode simplesmente ir aqui, então você pode fazer login e se inscrever para uma nova conta. Se você ainda não tiver um. Depois de entrar na alquimia. Depois de entrar no Alchemy, basta criar um novo aplicativo. Vou dar um nome a ele. Terceiro, a cadeia de abas será um polígono. E será polígono que significa que é aquela cobra de teste. Em seguida, clique em Criar aplicativo. Aqui, precisaremos dessa chave. Mas antes disso, certifique-se de ter instalado o MetaMask também. Você pode instalar meu Tomas acessando meu site Thomas.io e instalar a extensão para o seu navegador. Não deixe de pausar o vídeo e assistir à configuração de uma nova carteira. Qualquer pessoa no YouTube ou no Google. E também sabe como adivinhar, obter polígono de teste. Isso é automático na sua carteira. Você pode obtê-lo via polígono para definir. De um jeito assim. Sim, basta colar o endereço e obter tokens de teste. Vamos dizer isso. Minha máscara. Exigiremos essa chave privada. E vamos armazenar essas chaves, essa é a chave da alquimia e, em seguida, meu Dmowski em nosso projeto. E para esse propósito, usaremos uma dependência chamada ponto ENV. Porque não é recomendável colar essas informações confidenciais diretamente em nossos arquivos. É como aqui diretamente. Não quero que seja colado. Basta trazer seu terminal para a direita. E PM e estilo dot ENV. Agora, verifique se ele está instalado Sim. Na pasta raiz. Basta criar um arquivo chamado ponto ENV e criar variáveis como polígono. Mumbai é igual a assim. E deixe E ser igual a assim. Mas o modo polígono simplesmente vá aqui, clique na tecla View, esta chave e cole-a aqui. Para o endereço privado da carteira. Basta abrir sua máscara Meta. Clique aqui. Ou nesses pontos. Detalhes da conta. Exportar chave privada. Basta inserir sua chave privada. Isso é só digitar sua senha. Em seguida, ele mostrará uma chave privada e garantirá que você não exponha suas chaves a mais ninguém. Copie essa chave. Vá para o arquivo ponto ENV e cole-o. É isso aí. Salve isso. Depois disso. Vá para o arquivo de configuração de ponto de hardware e importe essas chaves. Com este comando ativado, nosso brilhante requer ponto ENV. Vou enlouquecer. Depois disso, no module.exports, basta escrever redes de rede. Então eu vou chamá-lo de “Mom Bye”. Em seguida, no URL, você deve escrever o nome da variável ENV do ponto do processo, que é o polígono Mumbai. E em uma const, que é uma matriz, você simplesmente tem que escrever process dot ENV, wallet, vibrate, assim. Então é isso. Sua configuração de capacete está concluída. No próximo vídeo, escreveremos o contrato inteligente. Obrigada. 4. Criando contrato no Twitter: Oi, bem vindo de volta. Agora vamos começar a trabalhar na redação do nosso contrato inteligente. Remova todos os arquivos de capacete, scripts de contrato e pasta de teste. É, vou apenas removê-lo nos scripts também. Eu o removerei no contrato. Basta copiar ou não, você não precisa copiar. Você pode simplesmente renomear esses pontos de alma. E simplesmente mova todo o resto. Apenas sinalize o código de solidez obrigatório. Agora vamos começar com um novo contrato e dar um nome a ele. Primeiro. Teremos algumas variáveis de estado. O primeiro será o dono. O segundo será o contador. Isto é, ele vai apresentar id, um brinquedo como este. Em seguida, no construtor. Vamos inicializar que é a largura da variável do proprietário , remetente da mensagem. Ou seja, quem implanta o contrato e contraria com 0. Essa é a primeira ideia. Começaremos do 0, assim. Agora, já que estamos escrevendo um contrato que consistirá em ajustes. Então, vamos ter uma estrutura de um nome que tuíte nome, fazemos assim. Ok, eu sou destruidor que atacou. OK. Agora, ele consistirá em um endereço de retorno, esse endereço e nomeie-o como Twitter. Em seguida, ele terá AD, depois terá o peso x. Então a pessoa pode ou não fazer upload da imagem. Será opcional. Então, se essa pessoa quiser excluir, é tweet ou não. E, finalmente, teremos esse carimbo de data/hora para que possamos mostrar a data desse brinquedo. Essa é a estrutura de um tweet. Em seguida, teremos uma estrutura de um usuário. Consistirá no nome sendo esse perfil, ou seja, o usuário escreverá um perfil bio da Índia. Tarde. Esse usuário pode ter uma imagem de perfil. Depois disso, o usuário pode ter um banner de perfil. Assim. Porque se você viu um possível, muito poucos até o viram. Twitter. A pessoa pode fazer upload de uma biografia é nome de usuário, é imagem de perfil, e o banner do perfil também. Depois disso, terei algum mapeamento, que vamos primeiro, ele mapeará agora o ID para uma estrutura de tweet que é id para esperar. E eu vou dar um nome a ele. Os pesos. E o segundo mapeamento será o endereço. E isso apontará para um usuário. Ou seja, usuários. Basta dirigir-se a um usuário. Então, nós apenas seu endereço. Podemos descobrir a imagem do perfil biológico do joelho desse usuário em particular. Digamos que. Além disso. Teremos alguns eventos. O primeiro evento será devido, ele criou. Ele terá endereço. A mesma coisa. Ele terá identificação. Ele terá texto de peso, string. Ele terá a imagem do peso. Esse booleano está atrasado morto e esse carimbo de data/hora. Então isso vai, este é um evento que será emitido na função de tweet do anúncio, que vamos criar no próximo vídeo. O segundo evento será excluído, então? Ele simplesmente terá esse ID do tweet. ID do Tweet e o Boolean são excluídos. Assim. É isso aí. É isso para este vídeo. No próximo vídeo, trabalharemos na funcionalidade para adicioná-la a ela. Obrigada. 5. Funcionalidade para adicionar um tweet: Vamos continuar escrevendo o contrato inteligente. Agora, escreveremos a funcionalidade para adicionar um tweet de rotatividade. Ele aceitará o peso e a imagem do peso. Será uma função pública e também pagável. Por quê? Bem, como exigiríamos que essa pessoa nos enviasse nos 0,01 para ter certeza de que estamos a fim de carregar o histórico, envie 0.01 mágica. Aqui temos que escrever éter, mas enviaremos valor métrico. Se estiver tudo bem, ou seja, esse requisito for cumprido, teremos um ponteiro para eles. É mapeamento. O certo é que você vai fazer os pesos em 0. É aqui a ideia de que 0 ID, vamos começar a adicionar os dados novos a ele. Texto escuro é igual ao texto aqui, depois Novo. E isso deveria ser Tweet. Tweet. Ótimo. A imagem é igual a isso. Então você faz isso. Ponto é igual a mensagem. Remetente. Id é igual ao contador. Em seguida, o novo tweet é excluído, é igual a falso, obviamente. Finalmente, o carimbo de data/hora do ponto é igual ao carimbo de data/hora do ponto do bloco. Depois disso, simplesmente emitiremos nosso tweet. Evento criado. Enviarei esses valores assim. O Twitter é o remetente da mensagem, depois o contador de anúncios e o texto do tweet. A maneira como você gerencia que é excluído false e o carimbo de data/hora. Timestamp. Assim. À tarde, vou apenas incrementar o contador porque o próximo ID do tweet deve ser um. E, finalmente, vou pagar ao dono. Ou seja, vou simplesmente ser transferido. Agora, valorize o nó, assim. Com o proprietário, vou transferir esse valor. Espero que você tenha entendido essa linha de código. Foi muito básico. Em primeiro lugar, exigiremos 0,01 éter que é demótico. Então eu apenas apontei aqui para nossa variável de estado, que são tweets. Esse tipo de dados é struct. É por isso que eu não ouvi um tweet e simplesmente adicionei todos os dados dentro dele. E fizemos que você não está incrementando o contador e simplesmente transportando o valor que é 0,01 Ito. É isso aí. É isso para este vídeo. Obrigada. 6. Funcionalidade para obter todos os Tweets: Oi, bem-vindo de volta. Agora vamos trabalhar na funcionalidade para buscar todos os tweets. Ou seja, como os tweets serão exibidos na linha do tempo do usuário. Basta escrever importada, que são os pesos e Chen, sobre os quais será uma função pública. Ele simplesmente visualizará os retornos em uma estrutura como essa. Agora. Agora, a primeira coisa que faremos é criar uma variável vazia temporária. Ou seja, eu vou apenas como temporário é igual a nu. Tweet. Estará vazio e a terra será contrária. Esse é o nosso número lateral de tweets. Então eu terei o peso reduzido para ser igual a 0. Isso contará apenas o número total de tweets que você pode estar pensando no que estou fazendo. Estou apenas fazendo um loop para garantir que exibamos apenas os tweets que não estão sendo excluídos. Você int I é igual a 0, eu menos que o contador I mais, mais. E então eu terei uma declaração if como esta. Se o ponto I for excluído for igual a false, então apenas adicione isso a ele. Neste temporário. Eddie, nessa posição, contar até oito é igual aos pesos. Eu gosto disso. E simplesmente incremente a contagem de tweets. Depois disso. Terei placas Alda que não estão sendo apagadas. Depois disso, simplesmente terei uma variável vazia, que será o resultado igual a mu 28. Agora essa terra será adequada, ou seja, conte até a sua. Se enviarmos diretamente este, a duração da edição E será muito maior. É por isso que acabei de criar e acabei de criar outra variável de um array vazio. E novamente, você faz o loop for. E desta vez terei menos do que contar tweets. E aqui, basta copiar tudo da variável temporária para essa variável de resultado. E, finalmente, retornarei esse resultado assim. N aqui. O que eu fiz esse erro, o quê? Devem ser novos tweets pequenos. É isso aí. Espero que você tenha entendido. Primeiro, teremos uma matriz vazia comprimento do contador, que pode ser 50. Então teríamos tweets for loop e Alda que não foram excluídos, o que suponha que esteja atrasado. Então, como o comprimento é 50 e dentro disso apenas os itens serão 30. Então eu criei outra área com apenas um pequeno terreno para que o comprimento da matriz seja igual aos itens dentro dela. É isso aí. Essa é a função. Busque todos os tweets. A próxima coisa que vou escrever. O método para obter tweets. Mas, mas o usuário mais legal. Porque se o usuário acessar sua página de perfil, somente os tweets que ele enviou devem ser vistos. Lá. Vamos apenas escrever a função, pegar meus tweets. Será uma coisa externa, mesma coisa, externa ou pública, o que você quiser. Alguns retornos. Ele retornará uma variedade de estruturas de tweets. Novamente, farei a mesma coisa aqui. Eles disseram que eu faço isso. Mamária. O caule pronto é igual a uma nova forma de terra. Então eu terei count, meus pesos variáveis. No loop for, farei a mesma coisa que você. Int I é igual a 0. Eu menos do que conto eu mais mais. Então farei isso se a instrução, se os pesos da partição forem iguais ao remetente da mensagem e me forem iguais ao remetente da mensagem certificarei de que não está sendo excluído. Eu ponto é igual, igual falso, então só vamos adicionar isso nessa variável temporária. Nessa partição, conte meus tweets que eu posiciono. E então vou incrementar a contagem do valor dos meus tweets. Depois do loop for, cada login. Em seguida, clique em criar uma nova matriz vazia. Dê o nome de resultado. Você faz isso. Meu novo int, eu igual a 0. Eu menos do que conto meus tweets. Eu mais, mais. Sim, vamos apenas trocar isso é tudo, desde a variável temporária até a variável de resultado, é isso, nada mais. E, finalmente, retornarei o resultado onde todos, é isso. Essa era a funcionalidade para obter tweets de todos os usuários e obter tweets de um usuário específico. Obrigada. 7. Funcionalidade para excluir um tweet: Vamos continuar trabalhando com as funções. A próxima função que escreveremos é obter um tweet específico. Então, vou dizer apenas minha terceira cor. Eu só vou gostar de diversão. Chegue lá. Temos que enviar um ID de tweet. Bem, a visão sombria retorna. Ele retornará string mamária, mamária e, em seguida, endereço. A primeira coisa é, o que é necessário é garantir que o id seja menor que esse contador. Esse é o número máximo de tweets. Não, tal para oito. Então, teremos apenas o como estamos muito bem apontados para esse tweet, que é o ID do tweet aqui assim, então certifique-se de que o peso não seja excluído. O dia em que deveria ser falso, é excluído. E depois disso, se tudo estiver bem, direi apenas retorne o ponto, texto, ponto, imagem, ponto assim. Esses três valores eu enviarei. Este é apenas um método se, se for o caso, por qualquer motivo, você for obrigado a receber esse tweet. Depois disso, vamos criar tecnologia médica para excluí-lo, faça isso. Quando agitar. Peso atrasado. Temos aqueles que enviam o ID e o Boolean é excluído. Externo. Simplesmente, exigiremos que a pessoa seja a proprietária desse ID do tweet. Caso contrário, você pode excluir honestamente seu próprio tweet assim. Depois disso, simplesmente para o seu id. É excluído, é igual a, é excluído assim. E vou admitir que excluiu o evento aqui. Como emitimos para ele, criamos da mesma maneira. Ao vivo, enviaremos, simplesmente enviaremos esse ID do tweet, ID e será excluído. Assim. Dito isso, isso foi um soco para deletar, fazer isso, foi muito básico. Nós apenas alteramos o valor de E é avaliado para true para que sempre que o usuário quiser obtê-lo, se ele não puder buscar aqueles que, que são denotados, pois não podemos excluir diretamente o valor de um blockchain. Vamos apenas mudar esse valor específico. É isso aí. Saiba que, se quisermos, podemos alterar essa blockchain. Podemos ter uma nova matriz e , em seguida, colocar essa área dentro dessa área assim. Se você quiser, você pode fazer isso. Mas simplesmente terei os dados armazenados para sempre na fila. 8. Funcionalidade para atualizar o usuário: Oi, bem-vindo de volta. Este é o último vídeo do módulo de contrato. Vamos apenas anotar minha vez atualizar os detalhes do usuário. Vou apenas chamá-lo de funtion. O usuário está fazendo, exceto lembrar o novo nome. Sequência mamária, nova biografia, compartilhamento de memória, nova imagem de arquivo. E, finalmente, memória de string, novo arquivo, banner. Perna isso. Será uma função pública. Agora, basta pegar esse usuário ou você pode dizer inserir esse usuário em seus usuários mapeando o remetente da mensagem assim. Em seguida, simplesmente escreverei os dados do usuário. O nome do ponto é igual ao novo nome. Dados do usuário. Biografia é igual a nova biografia. Imagem do arquivo ponto de dados do usuário. Nova imagem de perfil da garota dois. Dados do usuário. Esse banner de perfil é igual a um novo piano de arquivo como este. Dito isso, é assim que você atualiza um detalhe do usuário. Essa última funcionalidade será importante para obter detalhes do usuário. É para um usuário específico. Simplesmente divertido Chen, obter usuário. Enviaremos ao usuário um vestido. Será uma função de visualização pública que retornará um usuário assim. E eu simplesmente retornarei o endereço do usuário pois esse mapeamento de usuário exclui o endereço e ele enviará a estrutura do usuário que, digamos, essa é a função para obter um usuário. São todos os detalhes do usuário. E essa é a função a ser atualizada. O usuário retém. É isso aí. É isso para este módulo. No próximo módulo, concluiremos o contrato inteligente. Obrigada. 9. Teste usando o Remix IDE: Portanto, nosso contrato com o Twitter está pronto. É hora de testar todos os métodos e ter certeza de que não há nenhum bug nele. Vou usar um ID online de remix para essa finalidade. Se você quiser, você também pode escrever teste unitário usando mocha e biblioteca infantil. Depende de você. Mas só para economizar tempo e fazer isso mais rápido, vou usar o remix. Então, basta ir para remix dot m dot o, r g. Então aqui na pasta Contracts, simplesmente crie um novo arquivo e nomeie-o twitter dot soul. Depois disso, vou apenas copiar esta licença. E solidez pragmática. Depois disso, vou apenas copiar o contrato e colá-lo aqui. Veja, está feito. OK. Então, quando vamos testá-lo no IDE de remix, não podemos testar até 0.01 eterno porque quando estamos fazendo a transação, temos que enviar números sem decimal. Então, vou escrever aqui apenas um comedor apenas para fins de teste, mas no código principal será 0,01 em 30. Ontem. Lembra disso? Ok, então aqui vou compilar para inter dot soul. Temos essa marca de seleção verde aqui. Isso significa que está tudo bem. Nenhum adulto está lá. Agora. OK. Vá para esta seção de transações de implantação e execução. Basta clicar em Aplicar. OK. Temos essa resposta. Ou seja, nosso endereço foi implantado. Veja que os métodos e funções da Alda estão lá. Se clicarmos em proprietário, podemos ver que temos o endereço do proprietário, que é esse endereço C4. C4. Você pode ver que esse é o endereço correto. Agora, o que vou fazer é simplesmente mudar a conta. E agora vamos tentar adicionar um novo tweet. Eu vou apenas dar o valor um, já que ele está pedindo por um. E agora temos que enviar um texto de tweet. Ele primeiro fará isso e fará a imagem de algo como www dot, URL fictício, algo assim. Ok? E vou clicar em adicionar a ele. Acho que foi novamente para 0. Se eu clicar novamente, adicione-o. Ok, aqui não deveria ser assim, deveria ser comedor. Agora, se eu tentasse clicar, veja, temos esse sinal verde aqui. Isso é que nós fomos adicionados. E se você verificar a primeira conta, agora é 100. Porque essa função a pagar transfere esse valor para o proprietário dessa conta. É por isso que isso foi incrementado. Agora, se eu clicar em, Obter todos os tweets. Veja que temos esse endereço, este primeiro tweet de texto e URL fictício ou listagens que temos. E se eu escrever, se eu atualizar um usuário, esse é esse usuário, se eu escrever Arapaho, então o que isso está perguntando. Como você pode ver aqui, temos o bio web dev. Então temos a imagem do perfil, novamente, www dot dummy image. E então temos o perfil. Agora vou apenas escrever www.banner.com e atualizado. E agora, se eu estiver certo, obter usuários, esse é o endereço do usuário. Se eu tiver que enviar um endereço de usuário, basta clicar com o botão direito do mouse em Copiar, GetUser e GetUser, veja mapeado para desenvolvedor, imagem fictícia e banner.com para que o usuário seja atualizado. Assim, só mais adiante, eu recebia meu tweet sobre preciso da dose para sua ideia, que são minhas. Agora, se eu alterar a conta para a conta número três, e agora se eu escrever, receber meu tweet e ver que está vazio porque esse usuário não adicionou nenhum a ele. Mas se recebermos todos os tweets, então obviamente todos os tweets estão lá, que estão sendo postados lá neste aplicativo como este. Agora, se essa pessoa quiser remover esse tweet, se ele clicar, ver revertido, você só poderá excluir o seu próprio. Mas se eu for para o segundo e agora se eu tentar excluir isso, ele será excluído porque ele é o dono disso. E agora, se eu clicar com o botão direito, Obter todos os tweets. Espere, vamos ver o que está acontecendo. Acho que há algo adicionado a isso. Se for um documento de identidade, temos esse endereço. Primeiro, faça isso. OK. Quando estamos excluindo o tweet, temos que enviar mais valores que estão aqui, id e também o valor booleano. Foi o editor. Se você quiser, você pode verificar isso e desviá-lo também. Vou apenas ler e deletar. Se eu escrever cetonas que veem que foram excluídas. Isso chega lá. Vamos ver o que acontece. Transação revertida dizendo que foi excluída porque o tweet já foi excluído. Espero que você tenha entendido esse ID de remix porque essa foi uma maneira melhor e mais rápida de testar esse contrato inteligente. Se você quiser, você pode inserir várias características e contrato STR para qualquer outra caixa que eu possa ter perdido. Mas agora, tudo está funcionando perfeitamente. No próximo vídeo, implantaremos esse contrato neles. Rede de testes Polygon Mumbai. Obrigada. 10. Implemente a rede de teste de Mumbai: Oi, bem-vindo de volta. Neste vídeo, implantaremos nosso contrato inteligente rede de teste de polígonos. Então, para isso, vamos gostar do script de implantação. Primeiro na pasta de scripts, crie um novo arquivo e nomeie-o como implantado como ponto js. Agora aqui está escrevendo código. A primeira coisa que é necessária é o laboratório de capacetes. Então teremos uma função sinc chamada main. Então vamos conseguir, obter contrato, fábrica vai conseguir contrato. Por exemplo. Esse é o nome do nosso contrato. Está aqui, digamos, no Twitter. Então temos que escrever esse comando. É pequeno d e depois implantado. É ponto, ponto, implanta assim. Então temos que pesar. Ele está sendo implantado como está. Demora um pouco. E eles são muito finais. Consolaremos o endereço do contrato de registro de pontos, contrato implantado para, em seguida, endereçar assim. E agora temos que chamar essa função principal e simplesmente capturar qualquer erro que esteja sendo lançado. Console.log diz Código de saída igual a um como este. Portanto, esse é o único código necessário para a implantação. Agora, temos que colocar nosso terminal no diretório principal que está nesse diretório de pastas. E escreva esse comando e px. Eu tinha executado scripts. Em seguida, o ponto ly é. E temos que mencionar que a rede, que é movida e pressione Enter. Pode levar alguns minutos. Agora temos a pasta de efeitos diretos criada e vemos seu contrato implantado neste endereço. Verifique se você copiou esse endereço , pois ele será necessário no próximo vídeo. Então, só para ter certeza de que está tudo bem, podemos apenas verificar se os polígonos de Mumbai podem acessar este site, copiar o endereço do contrato, estado base aqui, e apenas pesquisar. Veja, cinco segundos atrás esse bloco foi criado e essa criação de contrato e ele tem 0 pode ter valor. Isso simboliza que nosso contrato foi implantado com sucesso. É isso para este vídeo. Na próxima sessão, trabalharemos no front-end, que é o React JS. Obrigada. 11. Configurar o projeto reage: Nosso contrato foi implantado com sucesso. Agora é hora de trabalharmos no front-end do React JS. Para isso. Vamos criar nosso projeto ADF JS de configuração para isso, basta escrever np x nos oito clientes do aplicativo React assim e pressionar Enter. Espero que você tenha o React js instalado em seu sistema. Se você tem, eu sinto que estou recebendo algum e eu simplesmente instalo o preconceito de idade globalmente. Então, o projeto React agora está configurado. Agora, para interagir com nosso contrato inteligente implantado, precisaremos de duas coisas, endereço do contrato e a ABA. Para obter o ABA, basta copiar esse twitter.json dos contratos de artefatos. Aqui. Este arquivo basta copiá-lo e ir para a pasta do cliente. Em seguida, crie uma nova pasta e nomeie-a como ABI, e cole o arquivo JSON do Twitter aqui que está nessa pasta de origem de linha. Sim. OK. Em seguida, temos que criar um novo arquivo chamado config dot js dentro da pasta de origem, como o ab.js livre de armas. E aqui vamos colar nosso endereço de contrato. O endereço do contrato é igual a este. Basta ir e copiar seu endereço. Cole aqui, assim. Agora, para seguir em frente, precisamos instalar algumas dependências. Basta alterar esse diretório para a pasta do cliente. Aqui, escreva npm com estilo. Éteres, então reagem. E cúpula externa. Em seguida, aquele kit de interface do usuário da web, core Em seguida, adicione oito repetições, três kits de interface do usuário. Posso então pegar o modelo da árvore e finalmente, traço de desenho animado. Então, se você ver aqui. Temos 123456 dependências e pressione enter este oito test.js. Ou seja, o ethos é necessário para interagir com o contrato inteligente implantado. dom do roteador React permite a navegação entre vários componentes no aplicativo React. Web três, o UIKit nos fornece componentes de interface do usuário bonitos e leves por dois desenvolvedores. Esta biblioteca acelerará nosso desenvolvimento dab. Então. Em seguida, temos três modelos que nos permitem conectar nosso aplicativo a muitos provedores válidos como carteira Coinbase, MetaMask, wallet connect. E, finalmente, este desenho animado Avatar gera avatar aleatório para nós. Usaremos isso como uma imagem de perfil fictícia mais tarde. Agora, se você for para package.json aqui, e vamos apenas verificar se o modelo de três da Web está lá fora agora. Desenho de éteres, Avatar. Tudo está morto. Agora. Eu simplesmente vou e escrevo npm. Comece a iniciar nosso celular React JS. Está bem? Portanto, o aplicativo React está sendo executado com sucesso. Agora é hora de trabalharmos no arquivo index.js. Vamos aqui. Estamos importando o React, depois o aplicativo CSS de índice de massa. Em seguida, vou importar navegador e outer react. E cúpula externa. E eu vou importar a defecação. Provedor de defecação. Web três, você escreve código, notificação, fornece isso apenas um impulso. Esse aplicativo. Está no arquivo raiz. Isso permitirá que todos os arquivos exibam notificações. Então, simplesmente temos que remover esse modo estrito de três atos aqui para usar o provedor de defecação, um aplicativo que app interno e provedor de defecação. Em seguida, use o roteador do navegador e envolva o aplicativo dentro do roteador do navegador. Assim. É tudo o que diremos. Ok, está rodando. Agora. Vou criar novos arquivos e diretórios. Dentro da pasta de origem. Vou criar pastas e dar um nome a elas. Vamos Nance, componentes, imagens e páginas. Essas três pastas e páginas de insights. Vou criar vários arquivos. Ponto inicial js, formulário ponto CSS. Novamente. Um arquivo dot js, arquivo dot CSS, depois settings.js, configurações dot CSS. Está bem? Esses, esses muitos arquivos criaram $9 home dot js. Eu escreverei o código. Primeira coisa que vou importar o React. Em seguida, vou importar o link da cúpula do roteador React. Então vou importar aqui neste ponto js home, vou importar o formulário do arquivo CSS do ponto inicial formulário do arquivo CSS do ponto ponto CSS desta forma, ok? Então, simplesmente terei um componente doméstico e exportarei o padrão no final. Então, dentro do componente home, eu retornarei, retornarei algumas tags de link como esta. E eu vou copiá-lo. Eu vou olhar para cima pago duas vezes. A primeira barra única. E nesse dia ele estará em casa. Em seguida, o próximo será o perfil. Será o perfil. O próximo será cenários e pesados como lágrimas, cenários como este. Agora é só copiar todo o código aqui. Vá para o perfil dot js. Cole aqui. Certo. Agora arquive o arquivo CSS de ponto e exporte o perfil no final. Da mesma forma, vá para settings.js, cole-o aqui. É isso. O mesmo código aqui. Vou importar as configurações. Em seguida, o nome do componente será configurações. Vou exportar as configurações no final. Então é isso para este vídeo. Nós fizemos muito aqui. Agora nosso projeto React JS foi iniciado. E, em seguida, nos próximos vídeos, trabalharemos apenas na interface básica do nosso aplicativo. Obrigada. 12. Trabalhando no componente de aplicativo: Olá, Neste vídeo, trabalharemos nesse componente do aplicativo. Então vá para o arquivo app.js. Aqui. Vou remover esse logotipo e começar a importar dependências. O primeiro reagirá do React. O segundo estará fora, assim como os eliminados. Em seguida, vou importar o componente home da página inicial das páginas escuras. Em seguida, vou importar o componente do arquivo. Em seguida, vou importar o componente de configurações. E então vou importar esse arquivo CSS de ponto do aplicativo. Agora, nessa função, removerei tudo e começarei. Nós esvaziamos colchetes. Então Dave, nome da classe, vou dar o nome de página. Eu farei o CSS mais tarde. Em seguida, teremos o nome da aula ao vivo, barra lateral, digamos barra. Então eu terei Dave, janela principal do ClassName. Então eu terei algumas rotas. As rotas que eu escolhi, que serão cortadas em Lee, e o elemento que exibirá o componente doméstico. Da mesma forma, terei que refinar. Ele exibirá o componente Phi e, em seguida, terei configurações. E ele exibirá o componente de configurações. Depois dessa janela principal terá o sobrenome, certo? Bar. E se eu tivesse lido uma barra de escrita assim. E, no final, ele está exportando o aplicativo. Agora, eu tenho esses dias, mas definitivamente vai precisar de alguns estilos. Basta acessar o arquivo CSS do ponto do aplicativo. Sim. Eu removerei tudo. E comece com a página. Vou escrever esse CSS rapidamente. Espero que você tenha conhecimento de CSS porque este tutorial é sobre Web três e não sobre HTML e CSS. Semana de pixels pegajosos. E leia o azul menos 800 Excel em 0,45. Em seguida, fronteira, à direita. Eu serei um pixel, sólido, RGB. Sessenta e três. Sessenta e três, sessenta e três. E colorei-os de branco e vermelho VH. Então eu terei a classe da barra de luz. Vou apenas copiar e colar aqui. Volition sticky, top 0, peso. Sim, será simplesmente fronteira, esquerda, não direita. Dias sólidos de um pixel. E ao lado. Então, teremos janela principal, pixel pretendido. Em seguida, ancorar, representante, obter qualquer link. Qualquer cursor de link será um ponteiro. Então a decoração do texto não será nenhuma. E isso será importante. Em seguida, a altura será de 0 pixel. É importante. Então terei a página de login, que farei mais tarde. Mas devemos escrever o CSS aqui. Porque, como eu sempre digo, o foco não está na parte CSS. O foco está na construção um aplicativo descentralizado completo. Exibir flex, justificar o centro de conteúdo. Direção flexível, coluna, tampa, o pixel. E isso é feito para o índice de ponto CSS. Mas a única mudança que precisamos fazer, desculpe, isso foi rapto, essa é a próxima mudança. Temos que fazer isso no índice de ponto CSS aqui. Após a margem acima, vou apenas adicionar a cor de fundo ao hash, um para um a seis. É isso aí. Agora salve o arquivo. E vamos dar uma olhada na saída. C. Temos a barra lateral e, em seguida, as configurações do perfil inicial aqui. E nós fizemos e eu divido aqui, então temos seções diferentes em nosso aplicativo. Nos vídeos posteriores, trabalharemos em uma seção específica separadamente. Obrigada. 13. Criando componente da barra lateral: Oi, bem-vindo de volta. Neste vídeo, trabalharemos no componente da barra lateral. Basta ir para a pasta 02 componentes. Aqui, crie dois novos arquivos. Primeiro nome nós barra lateral ponto js e outra barra lateral ponto CSS. Na barra lateral JS, vou fechar tudo. E apenas insight, mas ponto js. Sim, a primeira coisa, importar, reagir, reagir. E então, a próxima coisa que temos que importar o arquivo CSS, que é o ponto CSS da barra lateral. Ok? Em seguida, a barra lateral simplesmente vira anti-impostos por enquanto. E exporte a barra lateral padrão. Ok, em goto app.js, aqui, na barra lateral da barra lateral de componentes. Aqui nisso, Dave fez essa div da barra lateral, simplesmente maneiras de fazer o componente da barra lateral como este. Agora, trabalharemos nesses componentes da barra lateral. Primeiras importações, o que será, o que será necessário. Primeiro serão alguns ícones. Eu realmente gosto do Twitter, cubo, usuário e COG, engrenagem do ícone infantil da web aqui. E a segunda coisa que será necessária é o banco de links de um roteador Create React. Não, sim, não fizemos. instrução Return retornará uma div e dará a ela um nome de classe de dados, conteúdo do site. Em seguida, terei outro div e chamarei de menu. Agora, terei outra div e nomearei detalhes. Nesses detalhes, simplesmente terei o logotipo do Twitter ou o ícone do Twitter, que terá um tamanho de fonte de 50 pixels. Depois dos detalhes, simplesmente terei uma tag de link, que simulará também. A página inicial e o nome da classe serão um link. Então, abaixo disso, terei outro nome para itens de menu. Dentro dos itens do menu. Agora. E essa div não está terminada aqui. Eu terei essa tag de link. E dentro da tag do link será concluído. Fora dos itens do menu. E dentro dele terá um logotipo ou ícone de cubo com tamanho de fonte de 50 pixels. E aqui eu me relaciono com o lar. Assim, dito isso, seção Detalhes. Em seguida, menu. Agora, da mesma forma, vou copiar este link, colar duas vezes. Esse segundo será o nome da classe de perfil dentro dos itens do menu. E aqui só vou escrever phi. Esse terceiro será configurações, sobrenome, link. E aqui vou escrever configurações como essa. Ok, esse componente da barra lateral está pronto. Agora temos que trabalhar no CSS de pontos da barra lateral porque obviamente haverá algum estilo ou ficará muito ruim. O primeiro estilo será o conteúdo cidal. Estofamento. O topo terá 20 pixels. Brotando, certo? 90 pixels. Justifique o conteúdo. Espaço entre exibição, flexão, direção flexível, coluna, altura. Cinco, gravamos itens de alinhamento. E então a classe de detalhes terá display, flex. Leitura do que pixel, lacuna. Pixel. Justifique o conteúdo, comece. Alinhe itens, centralize. Texto, decoração, nenhum, e será importante. Em seguida, os itens de menu, vidro, display, flex, justificam o conteúdo dessa lacuna. Mas em pixel, margem, topo, entre dicas do Excel. Depois Elaine. Os itens serão centralizados. Em seguida, fonte. O peso será 600. Tamanho da fonte. Entre célula típica, preenchimento, dez pixels. raio da borda será de mil pixels. A cor será branca. E isso será importante. declaração dos decks não será nenhuma. E novamente é importante. Então. Eu terei itens do menu. E o que acontecerá se você passar o mouse sobre ele, então o cursor será ponteiro. cor de fundo será de 2828 a oito. Então temos a classe de perfil. Ele terá display, flex, flex direction, column e gap será de cinco pixels. Agora salve tudo. E vamos ver a aparência da interface do usuário com essa barra lateral. Veja, e agora o erro que eu cometi foi aqui aquele cubo. Este será o usuário e o último será Kg. Agora, veja, temos ícones diferentes aqui. Configurações do perfil. Agora essa barra lateral está pronta. No próximo vídeo, trabalharemos nessa barra direita. Obrigada. 14. Criando o componente da barra direita: Então, no último vídeo, formamos na barra lateral esquerda. Está na hora. Trabalhamos na barra direita aqui, essa é esta seção. Então, vamos aos componentes. Aqui. Crie dois arquivos. Primeiro nome, barra direita ponto js. E o segundo arquivo será a barra direita ponto CSS, direito Pod ponto js. Simplesmente importar é o React da biblioteca. E segundo, em segundo lugar, vamos importar o CSS. Isso mesmo, barra de ponto CSS assim. Em seguida, uma função. Agora, vamos apenas retornar colchetes vazios. E, finalmente, escreverei export default. Barra direita. Sair. O arquivo CSS está vazio por enquanto? Vá para app dot JS. Sim, importação, componente da barra direita. E nesta seção da barra lateral, basta chamar a atenção. E eu comprei este assim mais cedo, aqui temos o que é chamado de componente da barra lateral. Nesta seção, vamos chamá-lo certo, mas salve-o. A próxima coisa que queremos é na pasta de origem, temos a pasta de imagens. Coloque qualquer imagem fictícia aqui. Você pode baixar a imagem que quiser da Internet e colá-la aqui. Será um anúncio fictício ou uma notícia ou o que você vir à direita. Eu usei essas imagens. Você pode pausar o vídeo se quiser. Depois disso, depois de termos imagens simplesmente no topo, importe essas imagens. Isso é importante. Vou citar o primeiro, capacete. A partir de imagens, r hat dot JPEG. Copie três vezes. Segundo, vou escrever solidez. O nome da imagem é somente o D, e o próximo é Meta mask. E aqui vou escrever meu Dallas. No momento, vamos importar apenas três cursos principais. Ok, eu tenho esse CD atuando também. Vamos importar a imagem reativa à qual eles reagem é um arquivo PNG e um arquivo GIF como este. Agora, como terei dados fictícios aqui, criarei uma variável que será uma matriz. Ele consistirá em objetos. A imagem que eu tinha. Saiba como usar o desenvolvimento de hardware. E se você quiser, você também pode usar o link. Se você quiser que o usuário realmente seja redirecionado para algum lugar. Mas agora, isso é apenas um link vazio e cole-o três vezes mais. Em segundo lugar, seremos solidez. Eu simplesmente escreverei um contrato mestre inteligente. Desenvolvimento 30s reage maestria ato apenas em 2022 ou 20, máscara. No entanto, eu realmente gosto de me tornar um desenvolvedor web. Agora, esses são apenas dados fictícios. Lembre-se, depois disso, terei uma caixa de busca fictícia. Tão importante. Entrada do código da interface do usuário, código interface do usuário da web três e eu importarei pesquisa e essa entrada eu serei N maiúsculo aqui. Ícone de pesquisa da Web três ícones de interface do usuário como este. Agora, vamos ter um conteúdo div . Vou dar um nome a ele. Então eu terei uma contribuição. Assim. O nível será pesquisar. Nome, pesquisa. Nós acabamos com prefixo. Eu terei esse ícone, que é o ícone de pesquisa. Assim. E a cor de fundo será hashtag. Um por um, pequeno d a seis. Assim. Então eu terei outra div. Esse sobrenome será tendência que eu vou apenas me dar uma rubrica de empréstimo. E agora vou simplesmente percorrer o redemoinho assim. E eu voltarei aqui. Dave. Nome da classe, tendência. Ao clicar. Vou simplesmente escrever ponto de janela aberta, link de ponto E assim. E dentro dessa div haverá um E de imagem ponto E de imagem simplesmente. Será uma imagem de ponto. Nome da classe, imagem de tendência. Vamos estilizá-lo logo depois de algum tempo. E depois outra div com esse texto que é tendência. Próximo. Aqui, ele produzirá um texto de ponto e como este. É isso aí. Agora, ficará horrível se não fizermos essa parte do estilo. Então, vamos escrever um estilo de barra que é lido por dot css. Em primeiro lugar, ficarei com oito barras conteúdo adicionando a célula Unify Fix com 80 por cento. Depois, tendências sombrias. Cor de fundo, asteca para ter 34 anos. Em seguida, raio da borda de cinco pixels. Então a altura mínima, eu acho, temos h menos 200 pixels? Máximo, classificado de 90 pixels. Margem, ponta superior, axila. Adicionando os pixels. Peso da fonte, negrito, tamanho da fonte, 18 pixels, estouro. E então eu vou estilizar tendência. Essa tendência. Basta exibir flex. Justifique o conteúdo. Comece. Alinhe itens. Centro. Espaço entre a margem do pixel, 15 pixels superiores. Preenchimento, dez pixels. Depois disso, terei algum efeito hover. Ponteiro e cor de fundo. Quando pairar, devemos ser astecas? Veja 353 e. Em seguida, imagem da marca. Você deixou vermelho. E pixel vermelho, borda, raio, célula grande. E, finalmente, em seguida, um tamanho de 15 pixels. Peso da fonte, normal. Agora, salve todo o código. Que seja compilado. E veja que você acabou de ver que está parecendo bom. Acho que o bonsai não parece bom. Vamos ver. Temos um erro de ortografia aqui. Tendência. Veja. Agora, o tamanho da fonte também é descendente. Temos aqui, isso e tudo mais. Então, vou verificar e preencher. Então, aqui temos o conteúdo certo. Vamos ver. Está tudo bem. E se eu fizer 90 por cento? Está bem? Ao adicionar d, temos esse envio mais profundo. Está bem? Em seguida, tendências, cor de fundo, raio da borda, altura mínima, taxa máxima. Se eu aumentar a largura máxima, nada muda. Margem, tamanho superior. Isso, então temos tendência, justificar conteúdo, margem central, top 15% adicionando 10%, vamos ver como fica. Apenas alguns problemas com esse lado. Eu só sinto que se não tivéssemos feito isso deveria estar em uma linha como esta e todos. A imagem no app dot css. Por que fazer aqui? Ok, agora está parecendo bom. Se eu quiser mudar alguma coisa, farei isso no próximo vídeo. Obrigada. 15. Vamos trabalhar na página inicial: Oi, bem vindo de volta. Neste vídeo, trabalharemos na página inicial. Mas antes de seguir em frente, eu só quero fazer uma pequena mudança aqui no ponto do aplicativo CSS lá, seção de barramento direito, eu vou apenas mudar a largura de 45 aqui, o 55, é isso. Portanto, agora nosso aplicativo parece decente em termos competitivos antes de ter a distância adequada e tudo mais. E também, precisamos de algumas imagens fictícias. Eu tenho essas imagens aqui. Se você quiser, você pode simplesmente usar o avatar do Google ou qualquer imagem de fundo. Se você quiser. Use-o apenas com o propósito de criar a interface do usuário. De qualquer forma, ele será alterado mais tarde. Então, crie um novo arquivo dentro do diretório de origem e nomeie-o. Imagens padrão dot js. Em seguida, basta escrever export. Const. Padrão. As imagens são iguais a n aqui. Basta colar essas duas imagens. Esta é qualquer imagem aleatória de avatar. E este é usado para ser usado como um banner para a seção de perfil. Assim. E salve-o. OK. Agora vá para as páginas e no arquivo home dot js. Agora vamos começar a escrever algum código. Entrada da web. Três ícones de kit de interface do usuário são o núcleo, não, não o código de etapa diagonal. Se quiser, você pode conferir o kit de três interfaces do usuário da Web e quais são os elementos de interface do usuário que eles fornecem? E em segundo lugar, vou importar imagem com três ícones de interface do usuário. E, finalmente, vou importar imagens padrão. Imagens padrão aqui. Agora, como eu não vou exigir nenhum desses, esses são apenas dados fictícios. Também removerei esse ovo de ligação. E comece, acho que do zero, terei um desenvolvimento. E daremos a ele um nome de classe, conteúdo principal. Então eu vou ter outro Dave. Eu nunca vou crescer de cinco a oito. Então eu terei outra seção como essa. E aqui vou usar o elemento avatar do kit de três interfaces do usuário da Web. E eu vou simplesmente estar morto, então a imagem será, agora será padrão. Esta que é padrão, imagens na posição 0 no tamanho 60 da imagem, como esta. Então eu terei uma área de texto. Rótulo. Que agora eu não estou planejando nada. Sim. Placa de identificação. Em seguida, área, arrendatário, igual ao que está acontecendo. E o nome do vidro será texto, área como esta. Então eu vou ter esse Dave. E depois dessa div terá um endereço. Dave. E darei a ele o mesmo nome de classe que é a seção de tweets. Dentro dela. Eu terei Dave, Este tem className image div. Em seguida, usarei o elemento Image image obtendo dos ícones no tamanho será 25. Assim. Depois que você fez Steve, terei simplesmente outra div. Vou escrever o peso e o nome da turma será para comer. Após o estilo, você saberá, entenderá todas as seções menos na hora certa de fazer o aborto SDM. Depois dessa div. Aqui. Eu terei, terei, terei simplesmente a seção de rede, a seção de feed. E teremos a seção de frutas aqui. Eu vou ter a seção de frutas que diz, ok, agora vamos para o ponto inicial CSS. Vamos fazer um pouco de estilo. Comece com a área de texto. O capital colorido de cinco por cento, depois o fundo, transparente. Borda, dois pixels. Em seguida, raio da borda. Mantenha o Excel. Em seguida, altura mínima. E pixel vermelho adicionando 15 células grandes. Transborde isso. E então eu vou ter peso. Um pixel inferior, RGB sólido, 63363. E estofamento. Estamos no pixel. Então eu tenho aquela seção de tweets. Exibição. Flexionar. Justifique o espaço do conteúdo entre a espera, 95 por cento. Alinhe itens, centro, margem, dez pixels superiores. Então eu vou ficar conduzido a isso. Turma. Cor de fundo. Para sete, E5. Em seguida, escolha célula e 20 pixels, raio da borda, mil pixels de branco. Então nós martelamos. Então, imagem, eles têm raio limite de 50 por cento. Adicionando pixel em seguida. Margem esquerda, retrata o vendedor. E então vou adicionar imagem div hover, Curtis, fichário, fundo, cor. Faça isso, faça assim. Eu só vou salvar tudo. E vamos ver. No app.js, temos a seção Início. OK. Não está nas configurações. É por isso que. Vamos para casa ver. Está parecendo bom. Agora, a única coisa é a área de texto. Vamos ver. Vamos ver o que está acontecendo na área de texto. Eles apenas verificarão o CSS. Temos borda lateral, morreu ADS, leitura de altura mínima é o transbordamento oculto. Então eu realmente vou verificar isso. Agora está funcionando. Eu não fiz nada. Eu apenas removo esse código e simplesmente escrevo a mesma coisa. Novamente. É como o nome da classe textarea, sobrenome, este e espaço reservado, o que está acontecendo? É isso aí. Agora somos capazes de escrever aqui, está funcionando. A próxima coisa em que eu gostaria de trabalhar é nesta seção de imagens. É assim que se seleciona uma imagem do diretório do usuário. Vou apenas importar do React. Você declara, usa, ref. Esses dois. Depois de algumas variáveis aqui, ou seja, arquivo de entrada é igual a usar RAF night. Em seguida, const imagem selecionada, conjunto, imagem selecionada. Eles usam dados. Então eu exigiria outro texto const. Esse texto vai usar data e string vazia. Então vou criar uma função, nomeá-la na imagem, clicar, arquivo de entrada, ponto, atual, ponto, clique. E então eu terei troco. Manipulador. Evento. Const. O arquivo de imagem é igual aos arquivos de ponto ponto de evento 0. Em seguida, definirei imagem selecionado objeto URL da imagem selecionado, arquivo de imagem URL assim. Depois disso, simplesmente. Iremos para a área de texto. Sim. E escreverei seu próprio método onChange, que simplesmente definirá texto para o que quer que esteja sendo escrito aqui. E ponto, ponto, valor de ponto, assim. Está bem? E então eu tenho essa imagem, que darei o onclick e simplesmente escreverei na imagem, clique. Desmarque. Depois disso. Aqui dentro, terei uma tag de entrada, que era o arquivo. tipo será cinco. Amigos, será o arquivo de entrada. E a mudança, será a mudança. E aprenda e estilize. Isso é algo que você precisa ver. Eu só vou mostrar nenhum. Não quero que essa tag de entrada seja exibida, elemento de entrada para mostrar. Eu só quero que os usuários possam clicar nessa imagem. E eu terei apenas uma declaração “se-else”. Se a imagem selecionada for verdadeira, então eu simplesmente mostrarei o ovo da imagem, qual fonte. A largura da imagem selecionada será 150. E se não for, mostrarei essa etiqueta. Esse é o ícone da imagem. É isso aí. Salve toda a carne. Selecione o arquivo e veja. Agora eu consigo selecionar uma imagem. E se o usuário quiser, ele pode alterá-lo novamente clicando aqui. É isso aí. Essa seção de imagem está concluída. No próximo vídeo, trabalharemos na seção de pés aqui. Obrigada. 16. Criando o componente Feed: Oi, bem-vindo de volta. Neste vídeo, trabalharemos nesta seção de feed. Para isso, temos que criar um novo componente, ir para a pasta Componentes e criar um novo arquivo no feed dot js. E também tem um arquivo CSS para isso. O peso em ID dot CSS. Ao intuir cadeiras de alimentação File. Importe o ato e importe também o peso no CSS de pontos. Vamos hoje à noite. Podemos explorar os novos dias do pescoço. Vá para casa dot js. E aqui mais o arquivo importar trigo no componente de alimentação. E simplesmente chame o componente aqui assim. E aqui estou enviando um objeto rho phi é igual a falso. Isso significa que não quero todos os feeds aqui, não para um perfil específico. Então. Bom arquivo IGS. Vamos fazer algumas importações. Quadro, padrão, imagens, então. Importar núcleo. E em negrito, mensagem, círculo, estrela e ícones mágicos como este. Na declaração de retorno, vamos escrever o nome da classe Dave para alimentá-la. Vamos ter nossos dados aqui. É arredondado. A imagem é igual às imagens padrão. Essas são apenas algumas imagens agora. Imagem da equipe, digamos 60. Então vamos ter outro Dave. Sobrenome, guache completo. Primeiro, Dave afirma que eles costumavam comer e apenas escrevendo uma máscara de terra agora. E depois. Simplesmente uma contagem como essa. E aqui eu tenho uma conta falsa como essa. Depois Dave, ClassName, content. Legal. Eles estão aprendendo do zero. E eu vou mostrar essa imagem. Havia alguma fonte de luz. Você cai imagens padrão. E uma imagem de sobrenome. Então. Depois de dias, Dave, terei o nome da turma. nome da classe é o. Geralmente em suas interações. As interações terão uma div. Com LastName. Interação entorpecida. Os entorpecidos terão aqui círculo de mensagens, ícone, tamanho da fonte 20. terão aqui círculo de mensagens, Perna esta cópia pesa duas vezes. Então aqui estará, eu simplesmente escreverei morreu. E eu vou fazer mágica. Agora. Eu tenho esses dois componentes prontos, agora é hora de fazermos essa parte do estilo. Vamos ler o tweet. Taxa máxima e porcentagem vermelha. Parte inferior da borda. RGB de um pixel. Sessenta e três. Sessenta e três. Sessenta árvores. Assim. Adicionando branco verde, pixel e colorido. Justifique o conteúdo, o espaço entre a exibição, flex, o cursor, o ponteiro. Em seguida, tuitamos nossa cor de fundo. Vou apenas mudá-lo para este código hexadecimal um. C, faça isso. Antes. Então eu vou aguentar isso completo. Tweet. Essas bandeiras. Justifique o conteúdo, comece. Relaxe a ação da rede. Coluna, lacuna. Em seguida, escolha a célula D9 por cento. OK. Então eu realmente tenho nas eleições, as eleições mitógenas. Em seguida, pixel. Essa peça. Lax. Sim, conteúdo D5, centro, lacuna, 150 pixels. Então eu vou mudar essa interação nums ash, T F T, F, T F. Display, flex. Justifique o conteúdo, escuro, lacuna e pixel. Adicionando pixel, borda, raio. Mil pixels. Depois disso. Eu sei que há muito estilo. Se eu quiser, posso te dar o arquivo, mas estou apenas escrevendo sobre todas as coisas no código CSS também. Porque já que vocês também estão construindo essas coisas, é melhor. Fazemos isso do zero no 28600. E alinhe os itens. central Pixel central. Então, o conteúdo é flexível. Justificar conteúdo. Comece. Direção flexível, coluna, espaço, cilindro fino. Altura máxima em pixels. Então espere. Imagem, espera, 98 por cento, raio e altura de pixel 90%. Então terei outra aula aqui, carregando a qual usaremos mais tarde. Eu gosto estática, coluna, lacuna, fazendo o lead de pixel, certo? Eu sei que havia muito código agora, economize. Vamos verificar nossa página inicial. Há algum erro aqui. Vamos ver o que é um erro idiota. Esse nome de classe. Eu escrevi errado. Vou dar um pequeno f aqui. Salve e veja. Nem tudo é perfeito. Temos a conta aqui, imagem aqui, esse texto. Se o usuário fizer upload de alguma imagem, ela será exibida aqui corretamente. Está parecendo muito bom. Esses são apenas ícones fictícios. Isso mostra que está na rede poligonal. Tão legal. Nossa página inicial está pronta. Ou seja, a interface do usuário está concluída. No próximo vídeo, trabalharemos nesta página de perfil. Obrigada. 17. Vamos trabalhar na página de perfil: Oi. Neste vídeo, trabalharemos nessa página de perfil. Vá para o perfil dot js. E aqui, o topo. Vamos importar algo. Primeiro, vamos importar imagens padrão padrão de imagens padrão como essa. Então eu vou importar o peso em um componente assim. Ok, vamos remover esses links e começar com ativo, não Dave, vou começar com uma imagem, arquivo de sobrenome de outra fonte. Imagens um. Em seguida, teremos outro nome do contêiner div, F, B. Gostaríamos desse perfil. E é assim que uma imagem novamente. E agora esta imagem é exibida na imagem. Basta escrever imagens de arquivo e z, você sabe, aqui. Depois disso em HD, não apenas deixei essa imagem rígida com fechamento automático. Tenha outra div, que será o nome do perfil, olá. E carteira Raphael. Basta ter uma entrada aleatória aqui. Em seguida, terei um link que enviará o usuário para a página de configurações. O nome da classe. Rafael. Tudo bem. Depois desse link, vamos ter mais um dia de bio mais três, que sou eu. Então vamos ter e eu terei um perfil, aplicativos da web. E dentro dele só eu terei uma aba dos meus pesos. Então, no final, terei que esperar em fade. Componente. Largura. O perfil é igual a verdadeiro. Assim. Agora, obviamente, vai parecer, não vai ficar bem. Eu tenho que fazer o estilo para ir para o CSS de pontos de perfil aqui, e vamos fazer esse estilo. Tudo. Aqui está sobre o estilo. Então, porcentagem de peso, porcentagem máxima de peso. Altura para fazer célula típica, cheque, capa. E b, f, b, recipiente. Taxa máxima e porcentagem de chumbo. Exibição. Flexionar. Conteúdo D5, comece. Direção flexível. Coluna. Inferior. Um pixel. Sólido, RGB, 63. Assim. Arquivo, VFB. Com o Excel. Raio. Mais profundo, enviou uma tática pixel por pixel, sólida. Um por um dia a seis. Relativo menos 65 pixels. Esquerda. Retrata. Em seguida, faça o estilo do arquivo. Nome. Branco. Lesão relativa menos 55 pixels. Esquerda. O pixel, tamanho. Dica Excel. Encontre o peso. Depois disso. Eu sei que há muito estilo a ser feito. Carteira de arquivo áspera. Eu não sei se temos o lucrativo, certo? Sim. Esse aqui. Cor RGB. Quando, quando? Quando, quando é para quando, quando? Quando, quando para você parente Shen. Em seguida, menos 50 pixels. Pixel esquerdo. Tamanho da fonte 14 pixels. Depois coisas da Jane, tipo biografia. Aprenda a luz. Bem, você não deve ser relativo menos para o pixel. Esquerda, qual o tamanho do pixel, 16 pixels. Peso da fonte, 500 dólares, ou só se aplica quando as luzes estão certas. Então eu falhei. E sua seção, como para exclusão, relativa menos 1 16º pixel, esquerda, 50 pixels. Tamanho, 16 pixels. Peso da fonte 0,5 pixel. Branco sólido. Espere. E pixel vermelho, centro de conteúdo justificado. Isso deixa bandeiras. Em seguida, arquivo bruto nele . Vá para cern. Ponteiro. Refinar. Aplicativos. Exibir flex, justificar conteúdo centralizado, branco, negrito. E, finalmente, Perfil. Guia. Inferior. Em seguida, pixel, borda. Na parte inferior, dois pixels. Sólido. Um, maiúsculo a, maiúsculo F. Do. Eu sei que havia muito CSS nesse arquivo. Agora, salve-o. E vamos ver a aparência da nossa tela de perfil. Agora. Acho que cometi algum erro aqui porque aprendi, então não estava lá. Vamos ver. Refinar. Esse foi o erro. Salve isso. Veja que a página de perfil está tão bonita. Eu sei aqui que a imagem binária e essa imagem são as mesmas porque estamos apenas usando os mediadores. Mais tarde. As imagens serão diferentes, mas acho que está muito bonito. Nossa página inicial e página de perfil estão prontas. A única coisa que resta é a página de configurações, que faremos no próximo vídeo. Obrigada. 18. Vamos trabalhar na página Configurações: Oi. Neste vídeo, trabalharemos em nossa página de configurações. Vá para settings.js. Vamos começar nosso trabalho aqui. Em primeiro lugar, vou remover todos esses comprimentos. Em seguida, importarei entrada e também o upload. O que eu sou lá eram três códigos de interface do usuário. E vou usar o estado de uso do React. Uma vez que isso envolverá arquivos e tudo mais. Então vou criar algumas variáveis são estados. Primeiro, seremos arquivo, conjunto de arquivos, arquivo de arquivo chamado para usar data como esta. Em seguida, devolveu arquivo, conjunto, arquivo de banner. Eles usam o estado. Em seguida, const name. Setname é uma coisa boa. Data de uso. Em seguida, const bio. Definir biografia. Para usar um estado assim. Então eu terei duas funções. Balanceado. Banner é o evento. Se o evento não for igual a null. Mesmo local definido pelo arquivo agora. Esse evento. E o segundo será o manipulador de arquivos const. Vai fazer um evento? mesma coisa. Se o evento não for igual a null? Em seguida, aquele arquivo bruto. Devemos fazer um evento assim? Então vamos trabalhar aqui. Isso é o returns, uma declaração de retorno onde Dave, LastName, página de configurações. Primeiro será entrada, rótulo, nome, nome, mudança de nome, taxa e porcentagem de leitura rotulados pela cor de fundo. Hashtag um. Para um. O 26. Um onchange será simplesmente definido como nome, valor alvo. Assim. O segundo campo de entrada será chamado bio. Nome, mudança biológica. E a liderança será definida como bio. Então eu terei o sobrenome, PFP, que eu mudo minha imagem. Vou usar esse componente brilhante ou você pode dizer, isso nos é dado por eles em três kits de interface do usuário. E vou usar o manipulador de perfis aqui. E da mesma forma, terei trocado. Imagem binária. E aqui será banido esse manipulador. E, finalmente, terei o botão Salvar, que editarei no CSS. Vá para Configurações do arquivo CSS ponto. Digamos que a página Configurações. Adicionando 1880 pixels. Exibir flex. direção flexível será a lacuna da coluna. O pixel. Então eu vou ter esse. Velar e stack 6878. O acolchoamento à esquerda. E vou usar o CSS para salvar a cor de fundo. Um D, A1, F do que a leitura será então pixel e ponta da asa, axila, raio da borda. Depois branco. No peso seis e vermelho. Vermelho e vermelho por cento. Exibir flex. Justifique o centro de conteúdo. Então, no entanto, vou apenas dizer que Calcutá é carceral deve ser apontado. Vamos economizar e vamos ver. Veja nossa página. Está parecendo decente. página de configurações do perfil também está concluída. Temos todas as nossas páginas prontas. Então, antes de terminar este vídeo, eu gostaria de criar uma tela de login básica para o usuário, porque obviamente o usuário precisa se autenticar antes de ir para esta tela inicial. Até agora, vá para o arquivo app.js. Aqui. Bem no topo. Vou importar o botão. Três códigos de interface do usuário também são uma semana importante e encontraram o ícone de máscara de três ícones de interface do usuário. Agora, aqui eu gostaria de ter algum estado e espero que o tenhamos usado. Não, não deixamos você ficar aqui. Então, basta usar um const. Nosso conjunto morto de dez decaimentos é dez fechado. Eles usam os arquivos no primeiro valor que eu gostaria que fosse falso. Devolver. Eu só vou ter uma declaração if else. Iv, a autenticação é verdadeira. Então eu vou mostrar essa nossa div. Se a autenticação for verdadeira, todo show é o fluxo de horas aqui. E se não, mostrarei esta tela, que será Dave LastName. Agora página de login. Assim. Então eu vou ter que dizer logo em dizer D. E eu vou ter um botão. Eu terei um botão aqui agora, que será desclicado. Simplesmente não fará nada. Tamanho X L, X dois. Quando fizermos login com o MetaMask, equipe, o ícone principal será essa máscara. Eu posso gostar disso. N no app dot CSS, temos esta página de login. Css, como você pode ver. Como vou dizer, bem, se eu for ao meu site e se eu atualizar, ele está compilando, vamos ver se ele está lá no editor. Ok, veja, nossa tela de login também está muito bonita. É muito básico, mas faz nosso trabalho. Isso é tudo para este vídeo. Espero que você tenha aprendido muito. No próximo vídeo, trabalharemos nessas funcionalidades, como login com minha máscara. Então, eventualmente, buscaremos dados do nosso blockchain usando um test.js. Portanto, fique atento e continue aprendendo. Obrigada. 19. Autentique o usuário usando o Metamask: Oi, bem-vindo de volta. Neste vídeo, autenticaremos o MetaMask da semana do usuário. Anteriormente, tínhamos essa tela de login. Agora é hora de escrever a funcionalidade. Então, vamos para o arquivo JS do ponto do aplicativo. Aqui, vou me certificar importância de todas as dependências. A primeira coisa que eu precisaria é o efeito usado. Então eu fiz a partir de um núcleo exigirá notificação usada, bem como carregamento rígido. Então eu tenho isso, eu posso simplesmente girar. E depois disso, vou importar éteres e utilidades dos comedores. Isso nós exigimos. Então vou exigir o modelo da árvore da teia. Do modelo da árvore da web. Depois disso, exigiremos fonte, Arrastar, endereço. Rom. Pode enlouquecer phi prime aqui. Depois disso, exigiremos ABA, pasta ABA e, em seguida, clique nesse ponto Jason. E, finalmente, exija nossa dependência. Vou apenas sentar como você precisa e depois afinar nosso Todd. Essas são as dependências. E acredito que temos o desenho animado. Seu dy já está instalado. Vamos ver, está tudo bem agora há algum erro , está compilando. Acho que está tudo bem, ok. Agora, precisamos de algumas variáveis de estado. Como faremos, exigiremos esse conjunto de dados. O provedor é um estado legal de usar e teremos o tédio da janela como o primeiro encontro. Depois disso, exigiremos biblioteca de notificações do kit de três interfaces do usuário da Web. E então temos um estado apenas para mostrar se o que está recebendo está carregando não está definido. O estado de carregamento está disposto a usá-lo. E a primeira coisa que lemos arquivos. Agora, para ler sobre as notificações, você pode acessar o site dos três UI Kit, site oficial e ver como usar essas notificações e tudo mais. Eu terei apenas uma função de notificação de aviso. Férias são iguais a assim. Só vai dizer que não há defecação. Esse é esse. Ele simplesmente terá isso. E dentro dele, temos que enviar alguns parâmetros como tipo, aviso, mensagem, mudança, rede. Quem polígono para visitar este site? Depois disso, farei com que ele simplesmente mude para a rede de polígonos. E depois disso, terei simplesmente a posição da notificação no canto superior direito. Assim. É isso aí. É assim que mostramos uma notificação. OK. Mesmo assim, exigiremos outra, teremos outra notificação que será conhecida como notificação de informações. O tipo estará completo. Ele aceitará o número da conta. Nessa mensagem, simplesmente mostrará o número da conta. E aqui vamos escrever que eu digo conectado à conta do polígono. Ou seja, se o usuário alternar sua conta poligonal, também mostraremos uma notificação porque esse usuário não pode usar outra rede , como trimestral ou Rob Stone e tudo. Mas ele definitivamente pode trocar de conta no polígono Wallach. É isso aí. Agora, vamos começar a escrever essa função. Vou nomeá-lo, conectar, carteira, afundar, assim. Agora, exigiremos o modelo de três da Web para isso. Vou simplesmente escrever Web três em 70, escapar disso. modelo de árvore pequena é igual ao novo modelo. Então precisamos de conexão igual para aguardar model.fit connect. Depois disso, teremos o provedor de nuvem é igual a novos comedores, que provedores, provedor Dodd Web três. E enviaremos essa conexão aqui assim. Depois disso, obterei a rede que é a rede conectada. Porque somente na rede poligonal o site será aberto. Aguarde o provedor para obter uma rede como esta. E sabemos que para uma cadeia poligonal IgA1, id é igual a 80001. Essa é uma ideia em cadeia de uma rede poligonal. Agora terei uma cláusula if else. Se obter ID do ponto jane da rede, não é igual à ideia da cadeia de polígono se não for equacionada. Em primeiro lugar, mostrarei uma notificação de aviso. Tarde. Eu vou adicionar nosso switch. Em seguida, rede. O que quero dizer com isso, estou indo ao extremo. Vamos selecioná-lo para baixo. Então, simplesmente esse outro. Ele será executado se cadeia de polígonos estiver conectada. Ok? E agora vamos trabalhar nessa tentativa. Vou simplesmente escrever await provider, provedor que a solicitação. Então, o que eu vou pedir, vou pedir que meu Ted deixe É preciso cadeia média. Ou seja, se estiver conectado a outra coisa que é piedosa ou a qualquer rede entre o switch da rede. E paradigmas. Paradigmas, escreveremos o ID da cadeia. Utils, valor hexadecimal de ponto. Simplesmente enviaremos o ID do polígono. E aqui, se for bem-sucedido, então nós simplesmente recarregaremos, ou seja, a localização da janela, não recarregaremos assim. E esse código adicional indica que essa corrente não foi adicionada aos meus danos. Isso é que o usuário não tem essa cadeia. Ok? Mas definitivamente temos que adicionar essa cadeia. Essa é a rede de teste de polígono para a máscara Matter dos usuários. Estamos apenas tentando tornar o site deles cheio de funcionalidades. Ok? Agora, isso significa que vamos e uma rede de polígonos. Você. Pai, máscara do meu pai. OK. Agora vamos verificar se código do ponto do switch é igual a 4902. Nesse caso, basta secar. Sim, eu apenas acrescentaria que a edição é enquanto estamos adicionando lá, ela foi lançada. OK. E aqui vou tentar adicionar a conta. Desculpe, no provedor de blockchain, esse método de solicitação é chamado de carteira. Adicionar. É tédio. Padrões detalhados. Teremos tudo. Isso é. Jane ID será utils, esse valor x. Temos que escrever uma ideia de cadeia de polígono do que a rede de polígono de nome de cadeia leve de companhia Em seguida, URLs RPC. Basta ter um RPC. Ou, se você puder mudar o PC, basta pesquisar no Google. Se, se esse URL não funcionar, Mumbai dot chain, stack, labs.com, block x low URLs, HTTP e HTTPS. Varredura poligonal de Mumbai. É realmente Mumbai, Mumbai dot polygon scan.com. E então eu terei um jardim nativo. Veja. Eu terei a moeda nativa. Aqui. Temos que enviar. Símbolo, magia e decimais 180 k. E aqui simplesmente eu terei. Então isso é um peso. E depois que isso for feito, basta a localização do ponto da janela de carregamento, recarga de pontos, assim. Então, aqui estamos adicionando a cadeia de estádios, que é a cadeia de polígonos, se o usuário ainda não a tiver. E no anterior, estamos simplesmente adicionando, trocando essa corrente. Ou seja, se o usuário tiver, se o usuário estiver usando outra cadeia, então aqui ele simplesmente a mudará. Espero que não haja erro. Tudo funcionará. OK. E agora temos que trabalhar nesta seção L. Ele será executado se cadeia de polígonos estiver conectada ao MetaMask. Então, o que faremos aqui é verificar se o usuário não existe. Em nosso blockchain. Atualizaremos os detalhes do usuário em nosso contrato, bem como o armazenamento local. O que quero dizer com isso é que também usaremos o armazenamento local aqui. Então, primeiro de tudo, o que vou fazer é obter o logout da mesa desde que isso receba signatário assim. Então eu vou pegar esse sinal de que eu me visto, signatário ponto e me visto assim. Então eu vou conseguir esse contrato. Instância do contrato, este novo contrato, este contrato C terá capital assim. N aqui, o que eu vou enviar seu endereço de contrato do Twitter. Então Twitter ABI dot aba. E, finalmente, o signatário, assim. E aqui vou chamar o fundo de detalhes do usuário Chen, que é GetUser await. No caminho certo. Obter usuário. Se você for para o contrato inteligente que esta solidez, você verá esse método que é getUser, onde ele está aceitando endereço. Então, agora o que estamos fazendo é verificar se esse usuário é um novo usuário ou se já foi autenticado anteriormente. É isso aí. Isso é o que adicionamos? Dívida. Então, o que estamos validando aqui, simplesmente obteremos detalhes do usuário. Se o valor da imagem do perfil existir. Ou seja, se o usuário existir estiver aqui, nós simplesmente receberemos e atualizaremos o contrato pela primeira vez . Ok? Isso nós temos que fazer. E depois de fazer isso como está aqui, simplesmente temos que ler o provedor de conjunto com seu valor de provedor. E o conjunto é o nosso 10º bilhete para a verdade. E essa função ou essa declaração if-else que escreveremos no próximo vídeo. Eu sei que havia muito o que fazer neste vídeo, esse vídeo tão longo. Mas, como você vê, esse vídeo foi nosso vídeo mais importante em nossa seção. Obrigada. Vamos continuar no próximo vídeo. 20. Verifique se o usuário já existe: Bem-vindo de volta. Vamos continuar com nossa função connect vallate aqui. Em primeiro lugar, basta fazer essa pequena alteração IMG que é a imagem do perfil. E se o usuário já existir, simplesmente definirei que despejei naquele armazenamento local pelo nome, a primeira coisa que escreverei na conta ativa assim. E eu retransmiti Jason dot stringify. E aqui ele vai renunciar ao endereço deles, mas vou simplesmente copiar isso novamente. E aqui estará, isso será seno em se vestir assim. Então, estou apenas armazenando no navegador do usuário. É o nome da conta dele. Então, então eu escreverei, nome de usuário, estará aqui, getUser detail, e ele virá em um formato JSON e eu simplesmente escreverei o nome. E, da mesma forma, vou copiar e colar. O segundo será a biografia do usuário. Será bio, depois será imagem do usuário. E o próximo será o banner do usuário. E aqui mude para a imagem do perfil. E o segundo será o perfil, assim. Está bem? Portanto, isso acontecerá se o usuário existir e, depois disso, ele definirá isso, fornecerá isso e definirá esses autenticados como verdadeiros. Caso contrário, se o usuário for um usuário iniciante. Agora, aqui, primeiro escreveremos o estado de carregamento definido é igual a true. Então vou simplesmente escrever LED está de acordo com o ajuste do nosso ponto de alcatrão, gerar nosso pneu assim. Portanto, terei um banner padrão aqui. Vou usar o padrão agora a partir de imagens padrão. Então eu tenho esse. Vou usá-lo como um banner padrão. Está bem? Então, da mesma forma, farei a mesma coisa aqui. Definido do que o armazenamento local. Portanto, o nome de usuário ficará vazio , pois se trata de um novo usuário. Portanto, o nome de usuário estará vazio. biografia do usuário estará vazia. Já que o usuário atualizará a biografia mais tarde. A imagem do usuário será nosso Todd. Esse aqui. Apenas um avatar aleatório. E o binário do usuário será esse, banner padrão como este. Então aqui eu espero que você tenha entendido até aqui. Depois disso, vou simplesmente tentar ter aquele bloco de captura como este. Nesse seco, vou simplesmente escrever que transação const é igual a um usuário de atualização de ponto de contrato de taxa. Agora, temos que enviar algumas coisas, nome de usuário, biografia do usuário, perfil, foto e banner assim. Então eu irei imediatamente transação, peso de dados de transação como este. OK. E se houver algum erro, primeiro escreverei o adicionador console.log. Apenas para fins de depuração. E o usuário não tem mágica em sua conta. Apenas para esse propósito, mostrarei uma mensagem de aviso do tipo notificação. Obtenha o melhor polígono magnético de RAM ou um conjunto. Então, obviamente, para esta transação que é atualizar a transação do usuário, precisaremos de algum tipo de tokens somáticos porque há gás e todos eles estão envolvidos aqui. Exigir mínimo 0.1 med tech. Isso é necessário para ver em nosso site. E partição. No canto superior direito. Assim. Após essa regra de multiplicação, defina o estado de carregamento como false. E a partir daqui eu simplesmente voltarei. Então esse era o outro bloco. Ou seja, se o usuário for um usuário iniciante, teremos o avatar padrão, que será gerado aleatoriamente. Então, obviamente, cada usuário terá seu próprio avatar. E mais um banner padrão. Eu não escolhi nenhuma outra biblioteca. Eu simplesmente tenho uma imagem fictícia. Agora, é hora de realmente fazer a parte HTML. Então aqui temos divisão lateral autenticada é a janela principal deles, ok Agora, na página de login, temos isso. Em seguida, imagem do Twitter. Agora, aqui vou ter esse carregamento. Se e então estiver carregando. Então vou mostrar um carregamento rígido. Mesmo tamanho de lugar, 50, cor verde giratória. E como vou mostrar isso, mas pronto. OK. Neste, mas então ele simplesmente conectará a carteira. E fora isso, temos XL. Está tudo bem aqui. Salve isso. Vamos ver nosso site. Espero que esteja tudo bem aqui. Agora, o que vou fazer é acionar essa função de carteira usando o gancho de efeito dos EUA. Aqui. Vou usar um efeito como esse. Ele deve ser acionado quando a página for carregada. Agora arquivo FASTA, o que farei é simplesmente escrever se esse provedor não estiver lá, ou seja. Não há My Thomas instalado. Vou simplesmente escrever um alerta de ponto de janela. Não. Minha máscara foi instalada assim. E vou assimilar window.location dot replace HTTPS. Mask.io acessará o site oficial. E se não, simplesmente chamarei a função connect wallet. E também terei que esses métodos sejam fornecidos para que esse provedor ponha. A primeira coisa será a alteração das contas. Haverá um identificador de chamada de função nos vestidos alterados. Então eu terei mudado. Então, teremos uma função chamada manipular gene alterada. Então eu simplesmente escreverei esta conexão. E ele simplesmente lidará com uma função mais pesada chamada handle this connect. Vamos criar essas funções e excluir contas alteradas. Isso nos dará contas. Aqui. Eu vou fazer uma verificação. Se o id da cadeia de pontos do provedor for igual ao ID da cadeia demótica , ou seja, este é o ID da cadeia mitótica , então eu vou aparecer para notificação e simplesmente enviar as contas 0, que é a conta número. Portanto, ele exibirá no site qual conta foi escolhida. Segundo. Depois disso, eu quero que ele recarregue obviamente. Mas havia alguns problemas. Então, apenas para evitar recarregar duas vezes pela primeira vez, estou usando esta declaração if. Caso contrário, não era necessário. Mas você pode tentar sem essa declaração if. E você verá que o site foi carregado duas vezes e estava perguntando o que você diz. Essa transação várias vezes para a mesma transação. Então, eu quero apenas hoje obter a conta ativa do item aqui. Se não for igual a null. Vamos definir o tempo limite. Simplesmente. Vou escrever a localização da janela dot reload. E deve recarregar dentro das árvores. Isso pode. Só estou dizendo isso de novo. Você pode experimentá-lo sem essa declaração, mas ele será recarregado duas vezes. Então. Agora terei outra função chamada chain alterada. Portanto, temos o ID da cadeia aqui. Então, se Shane ID não for igual ao nosso mágico, então teremos uma notificação de aviso. E vamos simplesmente janela ponto, localização, recarga de pontos. E finalmente, como agora eu não estou fazendo nada. Nesta declaração. Aqui. Se você quiser, você pode fazer, fazer o que quiser. Então, aqui temos tudo pronto. Agora é hora de testar e fazer, lembre-se, eu já testei isso. Então, eu posso ter algum tipo de sessão ou locais em nosso armazenamento local anterior. Então, primeiro de tudo, estou tentando me certificar de que não há nenhuma conta anexada a ela. Acho que não há conta. OK. Porque isso acionará essa função. Ok, para testar. Vamos para outra cadeia de identificação e mostraremos a você. Vou fazer testes antecipados na rede, ok? Agora, se eu salvar tudo, veja a primeira coisa. Está perguntando, Ok, conecte-se com meu Thomas. Eu direi a seguir. Conectar. Em seguida, ele está nos pedindo para adequá-los à sua rede de teste de polígonos. Eu vou e simplesmente troco. Agora ele está carregando e agora está nos pedindo fazer essa transação para atualizar o usuário. Estou confirmando. Agora vamos ver o que acontece. Faça aqui. Tenha algum editor ou está tudo bem. Pode levar algum tempo. Veja, agora somos enviados para a tela. E se eu atualizar, vamos ver o que acontece. Veja nove enviados diretamente para a tela inicial porque essa conta já está sendo conectada. Veja aqui, essa conta está conectada aqui. E se eu for para o endereço do contrato e recarregá-lo, veja que tenho essa transação 31 segundos atrás para atualizar o usuário. Agora ele foi atualizado com sucesso. Nossa parte de autenticação foi bem-sucedida. No próximo vídeo, escreveremos a funcionalidade para adicionar um brinquedo por esse usuário. Obrigada. 21. Configuração do armazenamento Web3 IPFS: Oi. Neste vídeo, trabalharemos na parte de armazenamento do Tao Te. Ou seja, precisamos habilitar algum tipo de IPFS para garantir que o usuário possa fazer upload imagens além do texto. Portanto, existem vários provedores de armazenamento IPFS. Uma é a pinata, a segunda que vou usar são três armazenamentos. Se você simplesmente acessar o site também. Veja, este é o site oficial, armazenamento de três pontos na web. Estamos aqui procurando armazenar arquivos. Se você quiser armazenar LFTs, também há armazenamento de pontos NFT. Então, se você quiser, você pode ler a documentação. Só vou fazer login. Então, agora estou fazendo login na minha conta. Veja, esse é o painel. Aqui. Eu tenho que pegar uma nova chave de token. Obviamente, já existem muitos arquivos no meu armazenamento, mas você deve acessar os tokens da API e criar um novo token. Vou chamá-lo de API do Twitter. E simplesmente criado. Depois disso, apenas copiado, certifique-se de não compartilhar essa chave de token com mais ninguém. Definitivamente, vou excluí-lo mais tarde. Simplesmente nesse arquivo config dot js aqui, certo? Exportação. Armazenamento const três. Api é igual a e cole a chave aqui. Em seguida, vá para o arquivo home dot js aqui. E agora importa poucas coisas. Na Web, três códigos de interface do usuário. Eu gostaria de impor a notificação de carregamento e uso. Depois disso. Depois disso, temos que esperar no feed. Então eu vou importar éteres. Éteres, mas da biblioteca Ethernet, não hardhead. Em seguida, importe o modelo de árvore da web para o modelo Então vou importar esses dois arquivos, que é um endereço de contrato. E esta, nossa API de armazenamento da camada da web. Da configuração. Então vou importar ABA, ABA slash return json. E finalmente vou importar as guloseimas de laboratório contadas a partir dos 18 anos. Hum, instalamos o armazenamento da árvore da web ou não. Vamos ver. Eu não me lembro. Idade da porta dos pontos, eu acho. Não instalamos o armazenamento web two dots. Vamos ver três pontos. Para enfurecer o npm. Temos que instalar isso. Simplesmente. Vá. E PM em grande estilo. O armazenamento T dot. Após a instalação bem-sucedida, novamente, npm start. E aqui temos esse armazenamento web t dot instalado. Está bem? Agora temos esse arquivo de entrada, a imagem de lactato. Depois disso, terei algumas coisas. Vamos começar com const. Use essa imagem. É bom analisar pontos JSON, armazenamento local, ponto obter item. Então, simplesmente estou obtendo a imagem do usuário do armazenamento local como quando, quando estávamos autenticando, tivemos um aleatório ao longo do tempo. Certo? Então, estamos usando isso. Estamos conseguindo do depósito local. Em seguida, fomos o arquivo selecionado, arquivo selecionado para usar o estado. Em seguida, temos o estado de carregamento. Carregando, definido. Carregando, desculpe não carregar, está carregando. Para usar a pausa. Em seguida, temos um URL carregado do BFS vazio. E, finalmente, fizemos notificação para usar a notificação. Essas são todas as coisas que são necessárias. Em seguida, teremos uma função sinc para armazenar o arquivo em nosso IPFS. Vamos anotar isso. Você pode obter esses métodos na documentação, bem como no armazenamento da árvore da web, se tiver tiver alguma confusão aqui. Simplesmente esse cliente const é igual ao novo armazenamento de gostos na web. Então. mesmo acontece com a API de armazenamento em árvore. Então const root CAD é igual a await. Cego. Voto. Tudo bem, assim. E, finalmente, terei IPFS URL igual a isso. Isso está acima da guia. Botão Tab. Como https barra cifrão, raízes CAD ponto b, fs de web dot link do que barra dólar. Arquivo selecionado. Nome. Assim. Essa era uma função para armazenar o arquivo apenas dessa quantidade. Então temos clique na imagem, Ok, e depois temos o manipulador de alterações. Custo. O arquivo de imagem vai para o arquivo de destino e, em seguida, define a imagem selecionada. Nós temos isso. E, em seguida, defina o arquivo selecionado. Alvo de ponto de evento, encontra. É isso aí. Economize em. Espero que não haja problema. Então, neste vídeo, acabamos de trabalhar nas funções do IPFS e tudo mais. No próximo vídeo, escreveremos a funcionalidade completa para adicioná-la a ela. Obrigada. 22. Função para adicionar um Tweet: Oi. Neste vídeo, escreveremos Panchen para adicioná-lo a ele. Então, simplesmente, vamos criar uma nova função quando Chen e eu a nomearmos e adicionarmos a ela. Então, primeiro de tudo, terei uma declaração if else. Se o texto do tweet dot dream for menor que cinco, teremos uma notificação mostrando uma delegação de aviso. Essa mensagem será no mínimo, cinco. A dose será necessária. Judeu e reto. E aqui eu simplesmente voltarei. Ou seja, não quero que as outras funções sejam executadas. Se não for esse o caso, simplesmente escreverei o upload do conjunto. Verdade. Se a imagem estiver selecionada , essa imagem selecionada estará lá. Em seguida, chamarei a função de arquivo da loja. Daqui. É essa função que nos dará o URL carregado pelo IPFS. Depois disso, eu simplesmente terei nossa conexão, ou seja, o modelo Web três é igual ao novo modelo. Então a mesma coisa, const, conexão é igual a aguardar os três pontos se conectam. Contras de altura é igual a novo. Teste se os provedores Dodd Web três provedores. E eu enviarei a conexão aqui. Então const sine é igual ao provedor que obtém Signer. Então eu vou conseguir o contrato. É o contrato. Ele terá o endereço do contrato EVA e cianeto. Então eu terei que o valor do tweet é igual a 0,01. O preço dos contras é igual ao ponto E ponto mais o valor e. Porque se você se lembra de adicioná-lo a ele, temos que enviar essa mágica. Experimentar. Pegar, bloquear, destruir mais longe. Vamos fazer com que nossa transação seja igual a esperar, contratar e twittar. Nós os enviamos para um texto, um URL BFS e nossa transação de valor de preço dessa forma. E depois que eu receber uma notificação, eles são bem-sucedidos. Para isso. E então com sucesso Shen Dao na posição vertical. Em seguida, definirei a imagem selecionada. Faça outro conjunto. Dois, são necessários dois conjuntos vazios selecionados. E, finalmente, configurar o poluente falso. E se tivermos um somador, então, novamente, mostrarei uma notificação. Eles acrescentaram. Aqui, escreverei transação erro de transação de transação, mensagem de erro. E depois disso, configure o upload para false assim, para que o usuário saiba o que está acontecendo. Ok? Em seguida, temos que retornar o arquivo HTML aqui. Vamos verificar se cada linha será a imagem do usuário. Vamos ver onde temos a imagem do usuário aqui. E eu vou fazer uma pequena carta. Use essa imagem. Então temos a área de texto. Então temos o deck Sadia aqui. O valor será texto e em tons. OK. Então temos seção de tweets de Liz, seus amigos onchange exibem nenhuma imagem selecionada. Espere um dia, está tudo bem. Então temos esta seção aqui. Ao clicar. Adicione a oito divertidos Chen. E dentro dele terá uma declaração if como se o upload for true, então mostrarei o indicador de carregamento como um direito real, assim. E aqui vou enviar o upload de prop também, para que mais tarde, quando o usuário adicionar novo a ele, esse tweet no componente fluido também atualize isso. Desculpa. Nada mais. Vamos ver. Vamos ver se há algum erro. Acho que não. Veja, temos nosso tempo aleatório aqui. Então isso significa que está funcionando. Então, nós apenas escrevemos, este é o meu primeiro 28. Vou usar essa imagem. Vou simplesmente escrever para ele, dizer que este é o indicador de carregamento. Agora ele começará a carregar. Depois de fazer o upload, ele os chamará de Meta mask. Para acrescentar isso a isso. Temos que dar 0,01 métrica. Estou confirmando. Obviamente, isso levará algum tempo. Você tem que esperar. Veja o tweet adicionado com sucesso. Temos uma notificação aqui. E se formos ao contrato e atualizarmos, vamos ver. Veja, nós temos esse acréscimo a isso. Três segundos, então eu acho, e o valor é 0 e então tudo está funcionando corretamente. No próximo vídeo, escreveremos a funcionalidade para mostrar os tweets do blockchain. Obrigada. 23. Função para mostrar os Tweets: Oi, bem-vindo de volta. Neste vídeo, trabalharemos na função de mostrar tweets em nossa página inicial, bem como na tela de perfil. Então vá esperar. No arquivo feed dot js. Temos que pegar algumas coisas. Temos que importar a frutificação. Então, vou ver o uso. Vou apenas copiar e colar isso aqui. Isso exigirá uso, efeito, data de uso, essas coisas. Depois disso, exigiremos que exigiremos eles tenham ajustado SCSS a partir do núcleo, exigiremos o carregamento do avatar. Use a notificação. Então, nos ícones, além da mágica, também exigiremos o ícone do compartimento. Em seguida, exigimos um modelo de árvore concisa e um endereço de contrato do Twitter. Não exigimos a API de armazenamento da árvore da web. E, finalmente, exigimos que contemos o contrato. Você pode dar o nome que quiser. Não é como se você tivesse que nomear o mesmo em todos os arquivos. Ponto Jason. OK. Vamos exigir alguns estados. Então, primeiro de tudo, devemos, estamos enviando alguns adereços aqui. É antes de tudo, todos os dias eu disse que const no usuário vai fazer adereços perfil de pontos. E deixe o componente de carga ser igual a props dot reload. Assim. Então eu terei que, está definido como é igual a usar o estado EMTALA. Então eu terei dados de carregamento constante. Conjunto. O estado de carregamento é igual a usar coisas de estado e eu não carregarei. E, finalmente, eu terei feito a notificação se você vai usar a notificação. Ok? Agora, vou escrever essa função para buscar apenas usuários para relacionar uma função sinc, carregar meus tweets. Então aqui vou copiar e colar algumas coisas. Esse é o modelo Web três, conexão e esse contrato aqui. Então aqui temos o modelo da árvore da web, depois a conexão, depois o provedor, depois o signatário e o contrato aqui. Será simplesmente não ter signatário de pontos EBI aqui. E então vou adicionar contras, os dados vão aguardar o contrato. Receba meus tweets do blockchain. Em seguida, adicionarei const. usuário é igual a JSON.parse, local storage dot get item username. E da mesma forma, terei que usar essa imagem é igual à análise de pontos JSON. Aqui será usada essa imagem. E então eu relaciono que o resultado const é igual a esperar. O que vou perder, dados de pontos, mapa de pontos. Aqui, uma pia. Primeiro, vamos ver isso. Tempo. Uniques é uma boa maneira de fazer isso. hora do ponto. Em seguida, armas, eles farão Novo. E apenas convertendo o carimbo de data/hora para a data local. Tempo Unix multiplicado por mil. Isso eu recebi pelo Google. Você também pode pesquisar no Google. Como converter unidades, unidade de um carimbo de data/hora Unix para a data JavaScript. Os fundos até o momento são a data de vencimento para a string de data local f, RC. Ok? Em seguida, adicionarei o item principal. Estou convertendo em um objeto igual ao peso. Twitter. E isso não será igual. Este é o ID da coluna, id do ponto do tweet, ponto do texto txt. Imagem em guache. Essa imagem foi excluída. taxa é nome de usuário. Nome de usuário. Use essa imagem. Use essa imagem. Data, encontro. Este é o objeto item, e aqui vou simplesmente retornar esse item e criar um anúncio neste rádio de resultados. Mas então eu vou simplesmente dizer resultado ponto reverso porque estou apenas revertendo a edição e definindo o estado de carregamento para carregado assim. Depois disso, vou criar uma função semelhante para buscar. Todos os tweets. Isso é para a tela inicial. Vou dar um nome, carregar nossos tweets. Então, essa teia para modelar, essas coisas são comuns. Aqui. Agora, algumas coisas vão mudar, mas nem tudo no caminho certo. Então aqui temos todos os tweets, todos os tweets. Então, aqui não exigimos esse nome de usuário e imagem porque isso será aleatório para todos os usuários. Obviamente, estamos recebendo tweets mais antigos. É por isso que. Em seguida, o resultado promete ponto unix time para uma data de carimbo de data/hora ponto. Está tudo bem. Então, exigimos que os detalhes do usuário sejam iguais a aguardar. Contrato. Dot get usuário. Aqui enviaremos wait dot, Twitter. Obteremos os detalhes do usuário. Temos essa função em nosso contrato inteligente de solidez. Então precisamos devolver sua identidade para uma mensagem de texto. Imagem, é o nome de usuário obterá detalhes do usuário, e aqui ele será nomeado e usará essa imagem será rho phi i m g. Como esse retorno, então tudo é o mesmo. Agora temos que retornar o HTML acordo. Eu vou aqui, certo? Se o estado de carregamento for igual a não carregado, aqui. E devolva o nome da classe. Carregando. Aqui, como carregar o widget 60 e a hashtag colorida da impressora a 2475. Da mesma forma, teremos se o estado de carregamento for igual a carregar e fazer um comprimento de ponto não estiver lá. Em seguida, retornaremos ao nome de uma classe de tag. Eu vou apenas dar cargas. E aqui não adicionará peso disponível. Se o usuário não postou nada, esse será o caso. E se não, então aqui temos tudo. Aqui. Ei, les dot map. Em seguida, teremos o peso e o índice. Vou cortar tudo e colar aqui. Então temos que fazer algumas mudanças. Obviamente. A imagem terá peso. Use essa imagem. Então aqui, em vez de uma massa de terra, vou escrever nome de usuário. Nessa conta. Eu escreverei para ele. Então, nesse conteúdo do tweet aqui, vou twittar o texto. E nessa imagem eu tenho que verificar se a imagem da íris está disponível ou não. Então, vou simplesmente escrever tweet, imagem do tweet não igual a vazia. Então só mostre isso. Então só temos que mostrar aqui uma imagem escura como esta. Ok? Então, no círculo de massas de interações, está tudo bem. Dormente eu disse círculo, eu simplesmente escreveria 0. Aqui em não começa. Em vez desse estilo, vou escrever calendário e simplesmente colar a data do tweet. E então, finalmente, vou fazer uma verificação. Se, a menos que o usuário seja verdadeiro. Em seguida, mostrarei uma pasta bin que é Dave, nome da classe, interações num. E eu vou mostrar que foi dobrado. Peso, cor F, F 0000. E agora isso terá em onClick de null. Nulo. Ok? E na outra parte, vou escrever isso, pode levar um. Está aqui no outro, e vamos apenas colá-los no Ártico. Essa é a lógica que existe. Se for uma seção de perfil que o usuário deve ser capaz de excluir usando esse compartimento. Eu posso fazer seus próprios tweets. Agora, tudo está feito. A única coisa que tenho que fazer é chamada de efeito enorme. Porque, obviamente, temos que chamar essa função que é carregar meus tweets e tudo mais. Eu realmente gosto, se este for um perfil de usuário, então vou ligar para o senhor, meus tweets. Como chamarei, carregue todos os tweets. E esta página será atualizada. Se enviarmos um lago para comer aqui, o componente de carga e tudo. Se isso for alterado, essa página será atualizada. Agora salve e vamos ver se há algum erro ou não. Refrescante. Veja, nós temos nossos dois. Mas eu não. E eu estava prestes a dizer que a imagem não está lá, mas a imagem também é mostrada. Isso significa que tudo está funcionando perfeitamente. Em nossa seção de perfil também, temos isso, ou seja, nossos tweets e todos esses dados também estão corretos. Veja aqui que temos essa pasta bin. Mas aqui temos esse sinal de métrica, o que significa simplesmente que podemos excluir esses tweets da nossa seção de perfil. Espero que você tenha gostado e aprendido muito. No próximo vídeo, trabalharemos para mostrar as informações corretas nesta seção de perfil. Obrigada. 24. Mostrar os dados do usuário na página de perfil: Oi, bem-vindo de volta. Neste vídeo, trabalharemos nesta seção de perfil. Vá para o arquivo dot js do perfil. Em primeiro lugar, temos que importar algumas coisas. Essa cópia, essa coisa CDX que é usada efeito de uso de estatina. Então precisamos em letras em negrito dos comedores. Importe árvore da web, modelo, três modelos e, em seguida, importe de ícones. Agora, aqui vamos precisar de muitos estados. Vamos começar obtendo as informações ativas da conta desse armazenamento local. Jason. Bares. Armazenamento local, item dot get, conta ativa. Da mesma forma, vou apenas copiar e colar algumas vezes. O segundo será o nome do usuário. Aqui estará o nome de usuário, então será a biografia do usuário. Será a biografia do usuário. Em seguida, é a imagem do usuário. Temos a imagem do usuário, depois é Use o banner. Em seguida, o nome da chave é banner do usuário. Então eu terei um estado chamado saldo da conta. O saldo da conta é igual ao seu estado. O primeiro estado será 0. receberei o saldo da conta Também receberei o saldo da conta da carteira e mostrarei em nosso site. Então, basta escrever uma função sinc, obter contagem, equilíbrio. Assim. Terei o verbo tree model, model, new web tree model. Então essa conexão, como sempre, conexão de armas é que aguardaremos Web três módulo 18. Ele terá que modelar essa conexão. Então eu vou deixar, vamos. Vida é devido a novos comedores, provedores, web para provedor. Temos que enviar essa conexão. Então, lidere. Valence é igual a esperar. Ou obtenha equilíbrio. Temos que enviar esse número de conta, que está na conta ativa. Armazenamento local. Então eu vou apenas converter por lentes um bom comedor. Faça o Tails. Formato de ponto de uma tabela. Ótimo, éramos um número muito longo. Vou ajustar os genes que se equilibram à substring. Mostra apenas quatro dígitos de 0 a quatro. É isso aí. E eu vou deixar definir o saldo da conta, vou equilibrar. Então, no efeito dos EUA, chamarei essa função obter saldo da conta. E vou mostrar essas informações aqui que são arquivadas por nó, serão banner do usuário. Em seguida, perfil, imagem será usado nome da imagem. Se houver algum nome, nome de usuário. Aqui, será uma conta ativa. Então eu vou mostrar a magia. Eu posso escrever o saldo da conta assim. Então você tem a biografia do blefe do usuário. Vou apenas escrever a biografia do usuário aqui. usuário é a imagem da biografia deles, pois nem tudo está lá. Digamos, Bem, veja, eu tenho 4,7. Dramático, esta é a minha foto de perfil. Número da conta, nome de usuário, qualquer biografia de usuário não está lá agora porque é uma nova conta. Nós o atualizaremos mais tarde. Mas essa seção de perfil está funcionando perfeitamente. Obrigada. 25. Função para excluir um Tweet: Oi, bem-vindo de volta. Neste vídeo, trabalharemos na função para excluir um tweet. Então, obviamente, nessa seção de perfil, temos que o botão da dívida é excluir oito semanas. Vamos para esse perfil que js e C não estão nas cadeiras de ponto de perfil. Temos que codificar para fazer isso de forma fluida. Aqui. E aqui você verá isso. Nós temos isso sido. Basta ir aqui. Em seguida, o nome da função, peso atrasado. Precisaremos desse ID do tweet para esse propósito. Em seguida, o arquivo FASTA definirei o estado de download como não carregado. Então vou precisar de alguns dias para modelar. Conexão de qualquer um. Os dados Ebi são iguais a aqui , serão excluídos para oito. Então id, e temos que enviar para que isso seja excluído. Então aguarde o peso do ponto de dados do ponto. Então eu vou mostrar na notificação, sucesso. Com sucesso. Audição. Escuro, brilhante. Agora também podemos dar algum padrão. Podemos mudar o ícone. Vou mudar o ícone para este compartimento. E depois disso, vou ligar para carregar meus tweets apenas para atualizá-lo. Ok? Então, aqui neste onclick, temos que escrever, excluir para esperar e fazer isso. ID do ponto. É isso aí. Essa é a mudança apagada necessária. Agora salve tudo n. Só para simplificar, eu já adicionei outro tweet, que agora vou deletar. Veja, isso é um tweet. Sem uma imagem. Vou clicar neste ícone e ver onde há atraso para confirmar que a noite levará algum tempo, como sempre. Veja, esse tweet foi excluído com sucesso, que o Twitter agora saiu da nossa tela de perfil e também da tela inicial. Isso significa que a funcionalidade de exclusão também está funcionando perfeitamente. Isso é tudo para este vídeo na próxima sessão. Obrigada. 26. Função para atualizar detalhes do perfil: Bem-vindo ao vídeo final em que trabalharemos na página Configurações para atualizar os detalhes de um usuário. Vá para o arquivo settings.js. E vamos começar a trabalhar. Do núcleo. Exigirei o carregamento e também a notificação de uso. Então, a partir do React, exigirei data de uso e efeito de uso. Então eu vou importar coisas. Acho que se eu for para o perfil, as cadeiras estão em casa ponto js. Eu vou encontrar todas essas coisas aqui. E vamos apenas colar a teia dos comedores para modelar com um endereço de contrato e armazenamento. Então, para contar a ABI e o armazenamento na web. Agora, na página de configurações, vou precisar, vou deixar a primeira notificação. É bom usar a notificação? Então const username? Vai para Jason, bares, armazenamento local, ponto obter item, nome de usuário. Da mesma forma, exigirei a biografia do usuário. Use a imagem e a faixa do usuário assim. Então eu tenho o arquivo de perfil do Prof, depois o nome do arquivo binário. A primeira coisa que ele terá é a biografia do nome de usuário, o primeiro estado em que terá a biografia do usuário. Então eu terei saltado. Estado de carregamento e carregamento. Use as barras. Então deixe phi. Senhor, você vai usar a imagem logo no início em que o URL de upload do Ben é igual ao painel do usuário. Eu vou explicar tudo. Mas aqui, o que estou fazendo é aqui nome, o primeiro, logo no início, ele terá nome de usuário predefinido, que está no armazenamento local, mostrou isso. Então aqui vou escrever, vou escrever dois ou vai ajudar como um espaço reservado, qualquer que seja o nome anterior. Só por esse motivo. Agora, terei funções. Para isso. Eu simplesmente irei novamente para home dot js, obter a função de arquivo de porta de poeira aqui, cole-o. Aqui. Ele terá selecionado o arquivo. Ele terá selecionado o arquivo e tudo está agora k. E eu retornarei este URL de upload do IPFS. Este URL de upload, eu o devolverei. Todas as outras coisas. Isso será uma pista. Porque isso não foi predefinido. Estamos declarando isso aqui. Está bem? Então, no manipulador de banners, temos isso, que é que não precisamos alterar nada no manipulador de perfil. Evento. Disse o perfil. OK. E teremos esse enorme efeito feito com material de MDF. E isso mudará de acordo, sempre que esse estado de carregamento mudar, ele atualizará a página. Então temos que escrever a função. Temos que escrever a função para atualizar o perfil. Agora, o que vou fazer define o carregamento como verdadeiro. Então, se o perfil Phi não for igual a null, então o que temos que fazer é novo lead, novo arquivo. Url é igual a await store file. E temos que enviar um Adicionar um arquivo de perfil como este. E então escreveremos o carregamento do perfil. Está aqui. É isso. Phy payload que você é executado. Por. Agora faça o upload desse URL. OK. Eu vou apenas inserir aqui. Este é um novo perfil carregado aqui. Será um novo URL carregado do arquivo Raw se o usuário tiver alterado alguma coisa. Da mesma forma, o que farei é se o arquivo do banner mudar, o que farei é realmente ouvir como um novo URL enviado por banner. E ainda assim eu vou gostar do arquivo de banner. E, novamente, aqui vou mudar por não ter carregado. E aqui isso mudará porque são condições porque o usuário pode ou não alterar a foto do perfil. Ele só quer mudar o nome de usuário. Depende dele. É por isso que estou fazendo tantas verificações de IF. OK. Então eu vou exigir depois disso, eu vou exigir, mais uma vez menos coisas. Peso. Tinha muito código. Então agora estou pensando onde aqui, esse código repetidamente exigimos ir para as configurações aqui Eu tenho essa data base. Temos que modelar, temos a conexão, chegar ao centro. Então temos aquele Twitter Aba aqui. Nós aba dot aba. Então temos que a transação é capaz de contrair. Usuário de atualização Dot. O nome do usuário, URL carregado do arquivo bio, banner, URL carregado como este. Em seguida, adicionarei await transaction desse peso e atualizarei isso alterado. Agora, o que precisamos fazer é garantir que também atualizamos o armazenamento local. usuário, JSON.parse, stringify, nome. Em seguida, use a biografia. Jingle fi, bio. Você é imagem, URL carregado do perfil, Banner. Por URL não carregado. Então vou apenas enviar uma notificação. Sucesso. Tudo bem. Teste com sucesso na vertical. E, finalmente, adicionaremos set loading false. Portanto, este tem a função de fazer upload do URL. Finalmente, temos que retornar o HTML também. Aqui. O nome está morto. Sobre mudanças. O S simplesmente temos que adicionar valor é igual ao nome de usuário. Da mesma forma, aqui temos que escrever valor é igual a usar bio. Então temos a imagem do perfil, o que é bom. Também temos essas imagens de banner. Kay? Em seguida, mostrarei apenas um carregamento que, se estiver carregando, em seguida, mostrarei um div LastName Save. E eu vou mostrar o botão de carregamento aqui. E se não estiver carregando nenhum onclick, onclick, vou apenas chamar a atualização. Essa é essa função. Vou cortar e colar aqui. Agora, vamos salvar tudo. Vamos ver, espero que esteja tudo bem. É só dizer o nome. Eram três. Foto do perfil do desenvolvedor. Eu vou mudar para Ben. E aqui vou escrever. Eu vou mudar isso. Eu tentei mudar o binário para este. Obviamente, levará algum tempo porque são duas imagens carregadas no IPFS e todas simplesmente salvas. Espere um pouco. Então, ele está pedindo para atualizar. É por isso que mais alto a confirmação da transação. Vamos esperar. Então, o perfil dos mortos mostra com sucesso. Agora, vamos ao nosso perfil. Veja, está parecendo tão bom. Todas as nossas informações agora estão atualizadas. Temos essa foto de perfil, temos esse novo banner. Se eu for para a tela inicial, veja aqui, e também minha foto de perfil será alterada. Então, todas as funcionalidades e agora funcionando perfeitamente, nosso aplicativo está completo. Espero que você tenha gostado e aprendido muito. No próximo vídeo final, testaremos novamente esse aplicativo completo e veremos se há algum bug ou não. Obrigada. 27. Teste o aplicativo completo: Olá, bem-vindo de volta ao vídeo final deste curso. Neste vídeo, testaremos esse aplicativo completo. Então, vamos começar. Em primeiro lugar, vou apenas copiar o host local e criar uma nova janela anônima. Aqui, eu não instalei massa de matéria. Vamos ver o que acontece. Veja uma instalação normal e mais idiota. Se eu clicar em OK, ele vai diretamente para o site MetaMask. Portanto, o usuário precisa instalá-lo para visitar nosso aplicativo para isso. Então, isso o torna livre de erros. E agora vamos mudar uma conta. Originalmente, eu já tinha essa conta conectada e também adicionei um novo tweet. Agora usaremos essa árvore de contas e clicaremos em Conectar máscara de metal. Muitas vezes, indefinidamente, ele solicitará atualização do perfil de profundidade. Vamos ver quais são os nossos dados que eu recebo. Então veja, esta é a hora que eu recebo e esta é a página inicial. E esse tweet foi feito da minha outra conta. Se eu for para a seção de perfil aqui, ele não mostrará nenhum tweet disponível. E também, se você quiser, você pode simplesmente mudar a cor desse preto para branco. Não parece bom. E agora vou dizer isso também. É da segunda contagem. E eu só digo “tweak”. Confirme esse tweet para nós, edite com sucesso. Obviamente, demorou algum tempo, mas agora é adicionado com esse ponto r aleatório. E você pode ver que também temos isso evidenciado ir e ir para as configurações e simplesmente mudar para. Vou apenas escrever aqui. Mark Zuckerberg, fundador das mídias sociais. E apenas salve-o. Salvar perfil atualizado com sucesso. Se eu for para o perfil, o nome é Mark Zuckerberg. E aqui está apenas mostrando Mark Zuckerberg. Todas essas seções estão funcionando perfeitamente. No lado direito. Você pode simplesmente fazer o anúncio que quiser. Suponha que cursos de treinamento, notícias tendências, blogs de tendências, o que você quiser, você pode simplesmente codificar para o seu site. Agora, gostaria de mostrar a funcionalidade que adicionamos. Suponha que, se mudarmos a conta de um golpe, queremos contabilizar também. Veja se eu conecto. Novamente. Ele realmente conectou o ícone do polígono, este aqui. E agora estou de novo, volte para minha primeira conta. Então, tudo isso é feito aqui dentro. É isso. No app.js. Temos uma conta para mudar e mudar genes e tudo mais. Então, o que acontecerá se eu mudar a rede de polígonos para ficar mole. Veja, então é uma rede de dois polígonos. E agora, se eu clicar aqui, ele está nos pedindo para mudar de rede. E se eu mudar de rede, então, novamente, eu sou enviado de volta para o site ou então eu não poderei visitá-lo. Portanto, este site tem todas as funcionalidades. Tudo está funcionando. Você pode simplesmente torná-lo ao vivo e, eventualmente , em seu portfólio, depende de você. Espero que você tenha gostado. Certifique-se de assistir meus outros cursos também. Obrigada. Tenha um bom dia e continue praticando.