Transcrições
1. INTRODUÇÃO DO CURSO: Blockchain é a
força motriz da próxima geração, que também é conhecida
como nunca tratar. Blockchain reinventa a forma como
os dados são armazenados e gerenciados. Web três abraça uma religião
decente e está sendo construída e de
propriedade de seus usuários. Então, como resultado, muitas novas oportunidades para desenvolvedores
como nós neste domínio. Neste curso,
aprenderemos como criar uma descentralizada
completa para
fazer a replicação do zero. Usaremos solidez para o
cabeçote de desenvolvimento de contratos inteligentes para testes
e implantação. sede é se comunicar
com o contrato. Mcnemar deve assinar
a transação, React JS para o Fontan
e, finalmente, como a
blockchain os forneceria. No final do curso, você entenderá que todos
os conceitos necessários para
se candidatar a um emprego de desenvolvedor
nem sequer são construir seu
próprio aplicativo
no blockchain akkadiano
sem perder mais tempo. Inscreva-se agora e
vamos começar.
2. Discussão do currículo do curso: Olá, bem-vindo ao
primeiro vídeo deste curso, onde aprenderemos como construir um
aplicativo descentralizado do mundo real. Então, no momento, todos estão
falando sobre a árvore da web. E mesmo que você conheça
os conceitos básicos da árvore web, até e a menos que você desenvolva um aplicativo completo
usando todas as tecnologias, você não é
considerado um desenvolvedor. Obviamente, você deve
saber solidez, reagir, cabeça dura, um E test.js. Pelo menos você deve ter
algum conhecimento sobre o que essas tecnologias servem
para continuar
com este curso. Porque aqui nosso foco principal será construir o aplicativo
completo. Então, antes de avançar, vamos discutir sobre o curso. Currículo são, quais são todos os passos que vamos
dar neste curso. O primeiro passo será configurar o
ambiente de desenvolvimento usando hardhead e outro nó KTM. Usaremos o serviço de alquimia. Em seguida, escreveremos a lógica do contrato inteligente usando solidez para esse aplicativo de
tarefas. Ou seja, como adicionar nossa
tela ou remover essas tarefas do blockchain
para o nosso aplicativo. Em seguida, escreveremos o teste
unitário para testar o funcionamento da lógica do contrato
inteligente. Em seguida, implantaremos um contrato
inteligente na rede que
é a rede de teste. Então, depois de criarmos o front-end do aplicativo usando a estrutura React, desenvolveremos
um aplicativo muito básico. Em seguida, usando um
ponto de sede js e MetaMask, interagiremos com
o contrato inteligente, que já está sendo
implantado na rede de teste. E, no final, verificaremos todas
as funcionalidades e o funcionamento do aplicativo
descentralizado. Então é isso. E também verifique se
você instalou MetaMask e tenha alguns detalhes de teste frios em sua conta. Não vou me configurar
novamente como já fiz, decilitros e
tudo na minha carteira. Então, assista a qualquer tutorial sobre ele e continue
com esse curso. É muito simples. Então isso é tudo para este vídeo. Vejo você na próxima
sessão. Obrigado.
3. Configure o projeto hardhat: Neste vídeo,
aprenderemos como definir o ambiente de desenvolvimento para nossa aplicação com hardhead. Portanto, surge a pergunta o que está quente no hardhat é um ambiente que
os desenvolvedores costumavam testar, compilar, implantar e depurar aplicativos
descentralizados com base no blockchain Itanium. Seu concorrente é
conhecido como trufa. Neste curso, usaremos
hardhead, mas mais tarde, se você quiser explorar trufas, vá em frente
porque você nunca sabe qual deles será usado no projeto da
sua empresa. Agora, vamos começar a
fazer isso criando uma pasta chamada aplicativo de tarefas. Primeiro crie uma pasta. Então dentro dessa pasta
do terminal Penn oito. E inicialize um pacote NPM
vazio usando este comando
e o BM nele hyphen. Por quê? Agora temos esse arquivo
package.json. Em seguida, para instalar o hardhead. Basta lembrar
deste comando, npm, install, dash, dash,
save, dev, hard hat. Levará uma
pequena fração de tempo. Depende da sua conexão
com a Internet. Mas o capacete ganhou muita tração dentro desses
espectadores antes
era apenas trufa. Também. Está feito. Você pode ver que existem
alguns e o IMC nunca, não
é tão importante. Depois disso, basta
escrever np x hardhat. Isso nos ajudará a criar
um projeto de capacete. Nas opções, selecione
o primeiro que é criar um projeto de
amostra básico. Em seguida, pressione Enter,
pressione Enter. Veja. Essas pastas foram criadas
automaticamente. E também hardhead está nos
dizendo para instalar
essas dependências. Isso nos ajudará com o teste, bem com a biblioteca cuidadosa
e éteres para interagir com
o contrato inteligente. Então, basta copiar isso e
colar e pressionar Enter. Lembre-se,
essas dependências são importantes sempre que
você estiver usando o chapéu. Além disso, se você quiser saber
mais sobre hardhead, você pode acessar o site
oficial deles, hard hat dot ORG e apenas
ler sobre essas coisas. Agora estou supondo que você saiba o básico de Hardhead. Seja qual for o código que eu escrevi, você pode encontrá-lo
na seção
de documentação do site deles. Veja npm install save-dev heard tinha um NP x que nos
dá essa opção. Em seguida, ele nos dirá para
instalar essas dependências. É isso. Agora, vamos ver. Ainda está instalando isso. Isso também levará algum tempo. Até lá. Você pode apenas conferir a documentação
oficial. Certo, está feito. Agora. Também instalaremos algumas
outras dependências, o que não está relacionado
ao hardhead. Basta escrever npm install, então. Ben Zeplin corte
contratos e ponto ENV. Ou seja, estas são duas dependências diferentes
de canetas acima plano é, tem métodos predefinidos
que já são testados e testados para serem
usados em qualquer projeto. Se mais tarde precisarmos disso
, somente o usaremos. E o ponto ENV fornece
funcionalidade para gravar dados
confidenciais em um arquivo
separado importado. Agora, temos nosso projeto, projeto
hardhead pronto. Basta anexar nosso projeto
no arquivo de código VS, abrir o projeto do que três. E para fazer isso, K. E também nos certificamos de que você tenha essas extensões instaladas. Isso é principalmente sólido. A d esta extensão de solidez está sendo instalada em seu código VS. Sim, essa é a única
dependência necessária. Não há uma extensão de
dependência. É isso. O projeto hardhead agora
está configurado com sucesso. No próximo vídeo, incluiremos nossa configuração, como Alchemy e MetaMask. Obrigado.
4. Teclas de alquimia e Metamask: No último vídeo, configuramos esse projeto com sucesso. Agora chegou a hora. Incluímos a alquimia. Alchemy é uma
plataforma de desenvolvedor que nos
capacita a criar aplicativos
escaláveis, confiáveis e descentralizados
sem o incômodo de gerenciar a
infraestrutura de blockchain por conta própria. Então, basta acessar alchemy.com
e criar uma nova conta. Eu já tenho uma conta, então vou fazer login nela. Vamos redirecionar para nosso painel. Aqui. A primeira coisa que
precisamos fazer é criar um novo aplicativo
clicando neste ícone. Basta clicar aqui
e dar um nome a ele. Eu vou dar. Para fazer isso. Será uma cadeia média e a
rede será coerente. E agora basta clicar
em Criar aplicativo. Então aqui, abaixo dessa chave de API, clique em Exibir chave e
copie este link HTTP. Usaremos essa chave
HTTP posteriormente. Agora, a próxima coisa que precisamos
fazer é obter a
chave privada da nossa MetaMask. Você pode instalar
matemática acessando o site matter mass dot au
e, em seguida, instalar a
extensão para o navegador. Se você estiver aqui,
estou usando o Chrome. Você pode estar
usando outro navegador. Não vou configurar a carteira
do zero porque já tenho
sede e tudo nela. Não deixe de pausar
este vídeo e assistir à configuração da
nova carteira MetaMask. E também como
fazer um teste
nessa conta do
YouTube ou do Google. Então, basta clicar neste ícone e
digitar sua senha. E certifique-se de mudar
a rede para friamente. Aqui eu tenho hardhead polígono, essas são redes personalizadas, mas garante que você tenha uma rede
coli e tenha
alguns éteres de teste nela. Simplesmente para obter essa chave privada, clique nos detalhes da conta aqui, depois clique em Exportar
chave privada e digite sua senha. Certifique-se de nunca divulgar
essas chaves com mais ninguém. endereço da sua conta, ou seja, esse endereço é sua chave pública. Se necessário mais tarde. Agora, usaremos o URL de alquimia e chave privada de
Matt Thomas em
nossa configuração de hardhat. Para isso, vá para o seu projeto. E já instalamos
a dependência necessária, que é o ponto ENV. Como eu já disse, não
é recomendável colar essas informações confidenciais
diretamente no código. Agora, nessa pasta do projeto, crie um novo arquivo
chamado ponto ENV. Digamos que isso esteja no diretório
raiz. E então cole a pasta
aqui, todas as chaves, ou seja, criando variáveis, alquimia, URL e carteira. Chave privada, privada. Em seguida, copie e cole. Mais uma vez, basta
ir ao meu Tamas. Então eu conto que é
exportar chave privada e copiar e colar aqui. É isso aí. Agora temos as chaves. Temos que configurar nosso arquivo
hard hat dot config dot json para essas chaves
simplesmente no topo. Esse código requer nosso pacote dot ENV dot config. E então neste módulo
que exporta arquivo, basta escrever redes,
depois ir para a rede linear. E aqui no URL, escreveremos process dot
ENV, dot alchemy URL. E nas contas, que é uma lista, escreveremos process dot ENV, vallate, private key. É isso aí. É assim que configuramos o
alchemy e o MetaMask com nossos projetos hardhead para que mais tarde, possamos
implantar na rede de débito. Obrigado, isso é
tudo por este vídeo. No próximo módulo, criaremos o contrato
inteligente para nosso aplicativo Todo.
5. Como criar um contrato de tarefa: Bem-vindo de volta. Agora é hora de criarmos nosso contrato inteligente de
solidez. Basta ir para a
pasta de contratos aqui você verá um contrato fictício que é maior essa alma, não
precisamos dele. Não faremos nada com isso. Basta criar um
novo arquivo e
nomeá-lo como tarefa, contrato, alma. E agora vamos criar um
novo contrato antes disso. No topo, apenas certifique-se incluir essa licença e,
portanto, a versão de solidez. Em seguida, criaremos um contrato e eles
fizeram o contrato de tarefa. Agora vamos começar com a
nova estrutura, que é tarefa. Nossa tarefa terá ID. String, faz esse texto, que é o título da tarefa, e um booleano é excluído. Então, este caminhão, vamos ter uma matriz que manterá
todas essas estruturas de tarefas, que será uma matriz privada, e vamos nomeá-la tarefa. Então, definitivamente, alguém
adicionará uma tarefa. Então, mapearemos o ID da
tarefa para o endereço
do proprietário da morte. Então, vamos apenas escrever
a tarefa para o proprietário. E também
teremos alguns eventos. Ou seja, nosso primeiro
evento será ao entardecer. Ele terá o ID do crepúsculo do
destinatário. E nosso segundo evento
será atrasado ao anoitecer. Ele terá um
ID ao anoitecer e um booleano. Então, vamos entender esse código. Mais uma vez. Os eventos são usados para registrar informações
nesse blockchain. Criamos uma estrutura de tarefas. solidez permite que
o usuário crie seu próprio tipo de dados
na forma de estrutura. A estrutura contém
um grupo de elementos com um
tipo de dados diferente é inteiro,
string, booleano,
o que quisermos. Então temos essa
tarefa que
manterá toda essa tarefa que está presente em nosso contrato
inteligente. E então estamos simplesmente
mapeando esse ID de tarefa para o endereço da
tarefa ou não para
que possamos obter ou pesquisar com muita facilidade. A próxima coisa que faremos
é criar funções. A primeira função será a
função para adicionar uma nova tarefa. Basta escrever a função ao entardecer. Ele aceitará o texto da tarefa. Este é simplesmente o
booleano morto e torná-lo externo. Definitivamente, ele será chamado
de front-end externo. Então,
a primeira coisa que temos que obter é o id da tarefa. E simplesmente o que
faremos é fazer esse tamanho desse
array esse ID de tarefa. Então, o primeiro será 0, então será um. E definitivamente
após o incremento, será diferente. Então vamos simplesmente
empurrar para essa tarefa, Eddie, nossa nova tarefa. Criaremos essa tarefa. E como ele está nos perguntando id, daremos o id da tarefa aqui, depois faz texto e atrasamos. Vi
tudo isso que temos que enviar. Em seguida, mapearemos
essas informações em nossa tarefa para honrar o mapeamento, simplesmente escrevendo os EUA para o proprietário
e, em seguida, o ID do crepúsculo. E isso pertence a isso, um remetente de mensagem que está solicitando ou
chamando essa função, essa pessoa em
repouso será armazenado. E simplesmente, no final. Vamos escrever isso. Vamos chamar o evento. E o nome do evento é adicionado. Tarefa. O destinatário
será remetente da mensagem. E o ID da tarefa é esse ID da tarefa. Portanto, essas informações serão
armazenadas nesse blockchain. Então é isso. Espero que você tenha
entendido essa função. Simplesmente uma função
chamada Adicionar tarefa. Ele está aceitando, faz mesa
e é excluído o valor. A visibilidade é externa, pois não
estamos chamando essa
função dentro deste contrato. Então, simplesmente
escrevemos externo. Então, para o id da tarefa, que
é simplesmente fazer
o comprimento que está no
início, será 0. Então, uma vez que o anoitecer for adicionado, o comprimento será um. E será aleatório, sempre S, pois estamos empurrando
essa tarefa dentro dela. Portanto, ele será incrementado
automaticamente. Em seguida, estamos mapeando
para a tarefa dois, proprietário. E, finalmente, estamos
emitindo esse evento. Mas isso é tudo para este vídeo. No próximo vídeo, escreveremos as outras
duas funcionalidades. Isso é que Exclua
Tarefa e busque minha tarefa. Obrigado.
6. Excluir e corrigir a funcionalidade de tarefa: Agora, neste vídeo, escreveremos a funcionalidade
para excluir uma tarefa. Basta escrever o
nome da função, excluímos a tarefa. Então, será um externo. Também. Para excluir a tarefa, solicitaremos esse ID da tarefa. E booleano é excluído, o que será verdade. Agora, primeiro, verificaremos
o mapeamento, ou seja, se esse remetente é
dono dessa tarefa ou não, sugerimos que escreveremos dois proprietários este ID de crepúsculo
igual, remetente de mensagem igual. Se for verdade, simplesmente
iremos
para a estrutura de tarefas. É para essa ID de tarefa. Em seguida, o ponto é excluído, igual a é excluído. Então eu encontro esse evento delete dusk e dar Eddie
e é excluído parâmetros. Então, simplesmente, escrevemos
essa função de exclusão. Ele está solicitando o
ID da tarefa e é excluído. É uma função externa. Então, antes de excluir, estamos apenas tendo uma pequena
verificação se essa tarefa pertence
ao endereço desta
Cinderela ou não. Se vamos para
essa tarefa, Eddie. E simplesmente nesse ID de tarefa, essa é a posição
da tarefa nesta matriz
como veja esse id de tarefa. O id também é a posição. Então, vamos simplesmente escrever, o id dot é excluído
igual a isso excluído? O que quer que estejamos enviando, o
que definitivamente
será verdade. E então, simplesmente, estamos emitindo esses atrasos,
excluindo a tarefa, até mesmo. Em seguida, a funcionalidade final será buscar ou
obter nossa própria tarefa. Então, basta escrever
a função, obter minha tarefa. Será uma função externa. Ele simplesmente verá
que não mudará nada e retornará a tarefa. Isso é um pedido realmente feito
um monte de tarefa. Dentro disso. Primeiro, vamos criar
uma tarefa temporária para nomeá-los de forma bonita. E nós renovamos. O comprimento será o comprimento do ponto do
crepúsculo. Então o que temos que fazer é definitivamente nesta tarefa,
as tarefas estão sendo boas
é esse usuário ou o que quer que seja, 1015 usuários, sejam quais forem os
usuários, toda a tarefa
estará neste array. Então, agora o que temos que fazer, temos que
percorrer esse array e descobrir quais são as tarefas que
pertencem
a esse remetente e, em seguida, armazenar essas tarefas
neste array temporário. Então, já que faremos um loop, vamos primeiro ter isso. Ou seja, essa
será a contagem
do número de tarefas
pertencentes a esse usuário. Então teremos um loop for. Você e eu somos iguais a 0. Eu menos do que o crepúsculo, comprimento escuro. E simplesmente eu mais mais. Então mapeamos,
faremos o quê? Usaremos o mapeamento. Então o id começa a partir de 0? Se for igual ao remetente da mensagem. E se a propriedade task que é
excluída for falsa, ela ainda não está sendo excluída. Então, nesta matriz temporária
com essa posição de contador, simplesmente para essa estrutura de tarefas, definitivamente nesta tarefa
editar estruturas de dados. Portanto, ele será armazenado
nesta matriz temporária
nesta posição que é 0. E então aumentaremos
o contador que é agora, ele terá uma tarefa nele. E, novamente, ele vai fazer um loop. Se achar que o
proprietário é o mesmo. Então, novamente, em uma posição neste array,
ele armazenará esta próxima tarefa do NesC e mudará
o contador para dois. Então é assim que ele está funcionando. Agora. Temos a variável
temporária, aquela tarefa que está
sendo de propriedade do usuário, mas esse comprimento
dessa tarefa é maior e
os elementos serão menores. Então, ele só
ocupará espaço desnecessário. Então, o que faremos é criar uma nova variável chamada resultado. E será uma série de contador de comprimento
que é apenas dívida. E simplesmente, vamos percorrer
essa variável temporária, U int I é igual a 0 I
menos que o contador I plus plus. E isso é simplesmente copiar e colar tudo o que está lá
naquele temporário. E, no final, retorne essa variável de resultado. Então, essa é a
lógica por trás disso. Obtenha todas as funcionalidades da minha tarefa. O que fizemos é primeiro, criaremos, primeiro
criamos essa função. A visibilidade é externamente. Não muda
nada, então é a visão. Então, definitivamente, não está
tomando nenhuma fase gasosa. Então temos que especificar o
que ele está retornando. Essa é uma variedade
de estrutura de tarefas. Simplesmente, no início, temos essa variável temporária, que está apenas
armazenando a memória. E é uma matriz de comprimento, comprimento do ponto da
tarefa, que
pode ser suposto 100. Então temos esse contador é 0. Ou seja, qual é a ordem? Você pode dizer,
quantas tarefas esse usuário tem? Então, nesse loop for, estamos simplesmente percorrendo
toda essa tarefa presente aqui e verificando se
o proprietário desse ID,
já que a ideia também
começa a partir de 0, esse ID de tarefa, veja aqui. Portanto, o ID da tarefa pertence
ao remetente do ponto da mensagem e posição da tarefa I
que é 0 posição. Suponha que ele inicie e
seja excluído. É excluído. Você pode dizer que a propriedade é
falsa porque queremos, não
queremos mostrar a tarefa que excluída ou qual essa
função fará com que ela seja excluída. E vamos descobrir, vamos armazenar aqui todos aqueles
nesta variável temporária. E agora, como o
comprimento é maior, ou a tarefa pode ser dez, mas o comprimento é 100. Então, estamos apenas criando outra
variável chamada resultado. E copie e colando todos
os elementos presentes nesta variável temporária para essa variável de resultado e ela
será menor que o contador. E, finalmente, estamos
retornando o valor. Você entenderá o
conceito depois de usá-lo. Ou, se você quiser, você pode
simplesmente pausar o vídeo e tentar
entendê-lo de novo e de novo. Porque esses conceitos
são muito importantes. É isso. Criamos com sucesso nosso contrato inteligente. No próximo vídeo, faremos o teste deste contrato
inteligente. Obrigado.
7. Teste de escrita para nosso contrato: Olá. Então, como temos nosso contrato
pronto neste vídeo, testaremos todas as
funcionalidades. Já sabemos que o
blockchain é imutável. Portanto, antes de implantar
nosso contrato, escrevemos testes unitários para garantir que todas as nossas funções e variáveis em nossos
contratos inteligentes estejam funcionando. E retornando esses valores
corretos. Estamos usando o Mocha
Chai para esse propósito. Lembre-se,
instalamos essas
dependências enquanto
usamos Instalando e
configuramos a instalação de
hardhead em nosso projeto. Então, basta ir para a
pasta dest e dentro dela, criar um novo arquivo
com o nome crepúsculo, contratar, testar dot js. E o primeiro, importe nossas bibliotecas
que precisaremos esperar da biblioteca infantil. E então precisamos e tos da inter-biblioteca, saudita da biblioteca hardhat. Agora, vamos escrever nosso código de teste. Descreva, vamos
nomeá-lo contrato de crepúsculo. Então teremos essa função. Basta remover a função de
seta. Se você quiser, você pode
ter a função de seta. E antes de escrever o teste, teremos algumas variáveis
para este contrato. Então teremos isso
dentro desta pequena carta, teremos contrato. Será o objeto ou a
instância do nosso contrato. Você entenderá
isso mais tarde. Então teremos o dono. E agora, como é um teste, devemos ter alguns dados fictícios. Então, o número
do hotel ou da
tarefa fictícia será cinco. E também teremos uma
variável chamada ask. Mais carro usa ganchos para
organizar sua estrutura. Esta palavra G gritou mesa é
usada para agrupar nosso teste, que você pode aninhar,
desde que você queira. Isto é, novamente você
pode escrever descrito. Então, novamente, você pode
escrever isso assim. Então também tem outros ganchos. É eu d, este também é um gancho. É um caso de teste que
usaremos nos próximos vídeos. Então temos antes do gancho aqui na biblioteca mais calma. Isso antes que o gancho seja executado
antes do primeiro comer. Nosso escriba de mesa. Ou seja, se escrevermos pouco antes, ele será executado antes que o primeiro
seja o bloco de descrição, então temos antes de cada um, que o usaremos
para executar antes de cada um. Ou seja, ele será executado antes de cada cláusula
ou da declaração, ou comerá ou descreverá as impressões. Então temos depois disso. É um gancho para correr depois disso. Está realmente fugido? Oito são descritos. No início. Eu te falei sobre isso. Id. Gancho. Esses casos de teste. Casos como este, nós temos. Ganchos e o mais importante
é antes de cada guia de mesa. E digamos agora, vamos usar isso antes de cada um. Antes de cada um. Desculpe, será assim. E dentro disso
teremos uma função sinc. Aqui vamos implantar
nosso Contrato de tarefa. Com essa variável. Estamos usando esta
variável primeiro e simplesmente escrevemos aguardar, comedores, ponto get,
contrato fábrica. O nome do nosso contrato
é contrato. Então temos o dono, que virá de um peso, comedores ponto obter signatários. Então, dentro desse contrato de
pequenas tarefas, teremos essa instância
desse contrato implantado. Isso é apenas uma simulação. Então essa tarefa
será uma matriz vazia. E vamos inserir uma
tarefa fictícia dentro dessa tarefa total. É que eu é igual a 0. Serei menor que o
número de tarefas totais, que serão cinco. Eu mais, mais. Vamos obtê-lo. Ele faz. Verificar se texto
será simplesmente que o que você quiser adicionar, o número
parece torná-lo aleatório. Além disso, eu, então, é
excluído, é falso. Então teremos um
peso que contrata o DOD. Na função pass, estamos usando. Crepúsculo, escuro, texto é excluído. Essa funcionalidade é
essa que está em que está pedindo tarefas
que texto e valor booleano. Então vamos simplesmente empurrar, depois o crepúsculo Bush. Então, nesta variável, estamos empurrando esse valor. Então isso antes de h será executado, antes de cada teste definido. Mais tarde,
definiremos 23 testes unitários. E antes de cada teste esse
pedaço de código será executado. Sim, estamos, estamos implantando nosso contrato e, em seguida, recebendo uma instância e adicionando
cinco tarefas fictícios nele. Agora, depois disso,
vamos simplesmente criar uma nova mesa que seja
teste de unidade para adicionar uma tarefa. Vamos descrever, como eu
disse, podemos aninhá-lo. É para a funcionalidade Adicionar
tarefa. Funtion. Então agora usaremos
a cláusula IT, it. E isso é apenas a sugestão
automática. Então id, a condição
da mesa deve atender no evento da tarefa. Será uma função sinc. No topo, simplesmente
escreveremos, criaremos uma nova tarefa fictícia. Tarefa. O texto é igual a, novo. Tarefa, está atrasada
, então será falsa. Em seguida, vamos aguardar e usar a palavra-chave esperada
dessa biblioteca infantil. Esperamos que
primeiro o contrato de tarefa. Na tarefa,
adicionaremos essa nova tarefa, crepúsculo, crepúsculo, texto e crepúsculo são excluídos. Ele emitirá. Ele vai ser. Primeiro, temos que
enviar a instância. E o que ele emitirá
faz isso é este. Isso ao anoitecer, ele
emitirá argumentos,
argumentos, proprietário, endereço e número
de tarefas totais. Então você pode estar
ficando confuso. Portanto, isso ocorre porque, no
final da função de tarefa, estamos emitindo o evento
Adicionar tarefa. Com argumentos, você pode ver remetente do ponto da
mensagem e o ID da tarefa. E como isso
antes de cada cláusula, já
temos cinco tarefas. Ou seja, aqui estamos
adicionando cinco tarefas. Portanto, esta sexta tarefa que
estamos adicionando aqui, teremos o ID cinco
como índice começar a partir de 0. Então é por isso que isso está certo. O ID será cinco, porque há
cinco tarefas nele. E o índice é que
sempre começaremos a partir de 0
nesta tarefa, esse ID de tarefa. Se você quiser, você
pode esperar e tentar
entendê-lo de novo e de novo. Porque isso é muito importante. E você faz verificações de
qualidade ou para comparar os resultados
esperados com um resultado. Podemos usar a biblioteca Chai, o que nos dá três afirmações. Isso é primeiro um que
estamos usando esperar, então há afirmação
e há deveria. Neste tutorial,
usaremos isso esperando
que este prato emita o
valor esperado ou então ele
mostrará erro e a tarefa
não será bem-sucedida. Você pode dizer executado. Então isso é tudo para este vídeo. No próximo vídeo,
concluiremos as outras duas tarefas
e executaremos nosso teste. Obrigado.
8. Execute o teste de unidade: Oi. Agora é hora de escrever
esse teste de unidade final. Já escrevemos o
teste para adicionar uma tarefa. Agora vamos escrever um teste para
obter tudo o que faz,
ou seja, entrar na função de tarefa. Em seguida, na cláusula, deixe que ele retorne o número correto
da tarefa total. Pia. Almoço. Então vamos continuar. Minha tarefa é igual a aguardar. O ponto do contrato recebe minha tarefa? Ou seja, isso pegue minha
tarefa, é esta. Obter minha tarefa. Em seguida, verificaremos
o que verificaremos. Meu ponto crepúsculo. comprimento deve ser igual. Este que é o número
total de crepúsculo. Então, o que estamos verificando é
adicionar isso antes de cada cláusula. Estamos adicionando cinco tarefas
nisso, usando isso, certo? Usando isso, estamos
adicionando cinco tarefas. Então, quando essa condição
já for acionada, haverá cinco tarefas
em nosso contrato inteligente. Então, vamos apenas verificar
se está sendo corretamente que está inserido ou se você pode dizer
que está lá ou não, vamos apenas verificar isso. Agora. O próximo teste simplesmente será excluir a poeira
que está atrasada ao anoitecer. Funtion. Então essa condição deve ser ele deve emitir crepúsculo atrasado. Ele deve emitir.
Exclua a tarefa mesmo. Então é uma função sinc. Em seguida, const dusk
id é igual a 0. Então const é igual a verdadeiro. Agora simplesmente aguarde. Espere. O contrato Dot Delete Task quando a chamamos
enviando esta
ID de tarefa e perguntamos excluída,
ela deve emitir. Ele deve este evento de
tarefa de exclusão com argumentos id e crepúsculo excluídos. Então, simplesmente, o que
estamos fazendo é que estamos chamando essa funcionalidade Excluir
tarefa. E como aqui ele emitirá
esse evento de tarefa de exclusão, estamos verificando se
é uma reunião ou não com esse
ID de tarefa e este booleano. E nós apenas nos
lembramos aqui
que estamos simplesmente atualizando esse valor excluído, pois
não podemos excluir dados
de um blockchain. É isso. Agora, salve tudo. E como temos todas essas condições de
teste prontas, é hora de executar nosso teste. Basta anexar um terminal em seu diretório raiz e escrever o comando e o teste de capacete de
px. Vamos ver se está tudo bem. Ou pode haver alguns
erros. Não sabemos. Vamos ver, vamos ver se o trabalho ou não é compilado com sucesso. Esse maior é o padrão. Não temos nada
a ver com isso. Veja toda a tarefa, todos os testes unitários
passaram com sucesso, isto é, ao anoitecer, obter tudo o que exclui, faz tudo, está funcionando. Basta lembrar se você receber
algum erro, depois de corrigir esse erro, use o comando e
px hard hat clean, e então execute esse teste novamente
porque pode haver algum dinheiro e você não
quer obter preso lá. Mas no nosso caso, não
há nada de errado. Tudo está funcionando. Parabéns. Então é isso para a parte de teste
unitário. No próximo módulo, implantaremos nosso
contrato para o VLR, para a rede de teste. Obrigado.
9. Como escrever o roteiro de implantação: Portanto, como nossa lógica de contrato
está funcionando, neste vídeo, escreveremos as implantações, criaremos e implantaremos nosso contrato
nessa rede de teste. Dentro da pasta de scripts, basta crescer e ir e criar um novo arquivo e
nomeá-lo implantado dot js. Agora vamos escrever
o código necessário. Neste primeiro,
precisaremos da biblioteca de Ito. Então vamos criar uma
função chamada main. Será uma função sinc. E então, da mesma forma, teremos uma faixa sem fatos de contrato. Três, comedores Obter contrato. Fábrica, o nome é crepúsculo. Contrato disso é o
nome do nosso contrato. Em seguida, teremos uma
instância com esse código, contrato para implantação de pontos de negociação. Em seguida, esperaremos e nos
certificaremos de que o contrato está sendo implantado com sucesso. E depois disso,
escreveremos console.log e produziremos o endereço
implantado. É muito importante. Lembre-se deste contrato, vamos usá-lo apenas o endereço do ponto do
contrato. Agora, temos que chamar
essa função principal. E simplesmente para isso, temos que criar outra
função chamada pia. Como este é o procedimento e lembre-se de
fazê-lo como se tivéssemos que chamar
a função principal. E se estiver, está
tudo bem, então sairemos do processo. E se não,
pegaremos o erro. Console registraremos o erro e simplesmente escreveremos o processo que
sai e um editor. E no final, basta chamar a função principal. É isso. Essa é a maneira de
implantar um script. Só temos que
lembrar, é isso. Agora, esse script está escrito. Implante-o. Temos que usar um comando. Mais uma vez. Abra seu terminal
e escreva np x capacete. Em seguida, execute scripts nessa pasta, vá para implantar dot js. Em seguida, a rede que usaremos é
chamada cedo como esse nome, este G, E, LI, nós mencionamos isso no arquivo de configuração de ponto
hardhead. Depois disso, basta pressionar enter. Vai demorar algum tempo. Então você só tem que esperar. Porque agora isso será
carregado ou isso
implantará esse contrato inteligente na rede de teste real. Certo? Agora está feito. Este é aquele
contrato na vestida. Certifique-se de copiá-lo e
colá-lo
em algum lugar, como aqui. Porque precisaremos disso
mais tarde e não
queremos simplesmente esquecê-lo. Agora, para verificar
se este contrato
está lá com sucesso, devemos ir ao site de varredura de
éter cortês. Basta clicar nisso,
o primeiro. Em seguida, cole esse endereço do contrato
e clique em pesquisar. Isso fornecerá todas essas informações
de bloqueio. Veja, 50 segundos atrás, esse bloco foi criado. E com isso, nos certificamos, temos certeza de que
tudo correu bem. Se você quiser, você pode
clicar nele e ver de qual endereço
foi empurrado, preço da
gasolina e tudo mais. Então é isso para este vídeo. Tudo agora é feito
a partir da parte de back-end. No próximo módulo, configuraremos o front-end usando a
estrutura React. Obrigado.
10. Como trabalhar na front-end do React: Olá, bem-vindo de volta. Neste vídeo, trabalharemos na seção front-end
usando o framework React. React JS é uma
biblioteca JavaScript muito popular. E eu só espero
que você saiba o básico disso porque definitivamente este não é
o tutorial do React. Nosso foco principal
será apenas criar uma IU básica e testar
nosso contrato inteligente. Agora, para configurar
um projeto React, basta ir até o
terminal aberto e ir para isso. Você deve fazer o diretório DHAP
e executar esse comando e px, Create, React, app,
nomeie-o cliente. Agora, poucas pastas, estruturas e arquivos
serão baixados. Para o aplicativo React. Vai demorar algum tempo. Então você pode apenas verificar seu código e ver
o que você fez. Esse é o ambiente de trabalho crepúsculo do
contrato de tarefa. E como esses conceitos
são muito importantes, como uma vez que você constrói um projeto, você
poderá
construir vários projetos
usando os mesmos conceitos. Certo? Demorou um pouco, mas agora tudo
está sendo instalado. Vá para este cliente e
você pode ver que temos código oblíquo e
todas as pastas criadas. Agora, para interagir com nosso contrato inteligente
implantado, precisaremos de duas coisas. Primeiro, é o contrato abordado e o
segundo é a ABI. Para obter o ABA, basta copiar esse arquivo json ponto de
contrato de tarefa, que está dentro de artefatos, ou seja, esses artefatos. Então temos contratos. Em seguida, temos pontos de contrato de tarefa vendidos. E nós temos esse arquivo. Basta copiar esse arquivo e
ir para a pasta do cliente. E crie aqui,
dentro da pasta de origem, crie uma nova pasta chamada
EBI e cole-a. É isso. Isso está dentro da pasta de
origem do cliente. Criamos uma nova pasta chamada ABI e colamos esse arquivo JSON, que contém o contrato ABI. A primeira coisa que eu disse foi
o endereço do contrato. Já temos esse endereço de
contrato quando o implantamos em
nosso vídeo anterior. Basta criar um novo
arquivo e nomeá-lo, config dot js dentro da pasta de
origem do cliente diretamente
que está aqui. E nomeie, config dot js. E simplesmente escreva o comando
export, const, task, contract, address, e cole nosso endereço, que é este. Aqui. Esses dois eram necessários. Agora, temos que instalar
algumas dependências também. Basta ir para cegos dobrados, não gostar deste cliente de CD. Certifique-se de que você está na
pasta do cliente e instale éteres. Isso é npm install éteres. Isso é necessário para interagir com o contrato inteligente a
partir do front-end. E, em seguida, a próxima dependência, que é necessária é npm
install emotion slash edX. Em seguida, estilo. Na MU I. Eu posso fazer ADL. Então MU uma divindade. Isto é npm, instale
emotion slash reage emoções menos do que MU I, ícones do que material de barra
MUS. Estes são simplesmente alguns arquivos relacionados à
interface do usuário de
estilo e material que
usaremos mais tarde. Certo. Todas as dependências agora
estão instaladas. Só queria
ver o Jason da Becky. Sim. Tudo está lá. Agora
vamos trabalhar nessa frente. A primeira coisa que faremos
é dentro da pasta de origem, temos, temos app.js. Removeremos tudo aqui e começaremos a
escrever do zero. A primeira coisa que
faremos é importar, Reagir, usar data, gancho, usar, efeito do React. Em seguida, importaremos o próximo campo Martin do material MU. Em seguida, importaremos tarefa, o arquivo de tarefas. E lembre-se, esse arquivo que não
criamos. Temos que criar e ficar doentes. E então vamos importar. Simplesmente vamos importar pontos CSS, notas
doces, sss como este. Então, a próxima coisa a importar
é o endereço do contrato. Acabaremos de dizer o
endereço do contrato do crepúsculo desse arquivo de configuração. Arquivo de configuração. Em seguida, vamos
importá-lo da biblioteca. Então, finalmente,
importaremos essa tarefa ABI da pasta EBI e, em
seguida, o contrato é adjacente. Então, essas foram todas
as entradas necessárias. Então, temos que
escrever e criar um componente de aplicativo e
exportar um componente. E novamente, espero, você sabe todos esses conceitos de
reagem. Vamos criar alguns estados. Tarefa. E vamos definir o anoitecer. Usar estado. Será uma matriz vazia. Isso manterá nossa tarefa. Em seguida, a seguir será a entrada. Entrada. Você declara que essa
é a entrada
de texto desse campo de texto. Em seguida, temos conta corrente. Conta corrente. Use o ele irá verificar se meu damasco está conectado e
, em seguida, o endereço da conta. E o último que teremos
aqui é a rede correta. E ele será definido. Correto. A rede é
igual ao estado de uso. O padrão será falso. Ele garantirá que a
rede de teste de alho esteja selecionada. Caso contrário, ele solicitará, alertará o usuário para
alterar sua rede. Agora. Primeiro, vamos criar dois novos arquivos dentro
do diretório de origem. Primeiro será a tarefa dot js. Como já mencionei
que temos que criar aqui, simplesmente aqui, certo? A importação faz ponto CSS, que criaremos agora. E esse componente, que é a tarefa e padrão de
exportação. Crepúsculo. Mais tarde, enviaremos
alguns adereços também. E nessa fonte, novamente, crie um arquivo chamado CSS de ponto. Então é isso para este vídeo. Escrevemos muito código. No próximo vídeo, trabalharemos na configuração da nossa máscara Meta e como se
conectar com ela. Obrigado.
11. Conecte a carteira Metamask: Olá, bem-vindo de volta. Então, agora a primeira coisa que
faremos é conectar nossa carteira
MetaMask. Claro, temos que escrever
uma função para isso. Vamos escrevê-lo do zero. Vou nomear, conectar a carteira. Será uma função sinc. Agora, dentro do bloco try catch escreverá toda a lógica
necessária. E nas ferramentas CAD
no console registra o AD Connect coisa para criar uma máscara, o cabeçalho. E nesse bloco de tentativa, primeiro, vamos ficar tedium. Tedium, musical para
objeto Window, objeto de janela. Em seguida, verificaremos se temos o objeto da
bactéria ou não. Se não tivermos objeto italiano
, simplesmente
consolar log met damasco. Damasco não detectado. Ou seja, o usuário não
instalou o que importa a extinção
em massa em seu navegador. E se tudo estiver bem, então vamos verificar qual
rede é então um Dharma,
meu damasco, rosa conectado, que é rinky seja
piedoso, seja o que for. Então, obteremos o ID da cadeia. Jane id é igual a
aguardar tédio, esse pedido. Então, neles às dez, daremos a ID da cadeia. E então vamos simplesmente registrar o
console da cadeia
AD também apenas para nós, porque
para o teste e eu vou conectá-lo à
cadeia, cadeia de AD. Certo? Agora vamos escrever a ideia
de cadeia da rede principal, que é 0, pequena x cinco. Apenas lembre-se que esta é a ideia de
cadeia da rede cortês. Se você estiver usando rugas B, então será 0 X4. Essas informações você pode obter na internet também.
Você pode apenas pesquisar no Google. Então, a primeira coisa que
faremos é verificar se j não é igual a j em ID, então vamos simplesmente
alertar, certo? Você não deve
ir mais cedo na rede e
simplesmente retornar daqui. E se tudo estiver bem, essa é a rede está bem, então mudaremos
o estado que está definido a rede correta para true. Pelo menos sabemos que a
rede está conectada. Ou seja, a
rede certa está conectada. Em seguida, obteremos as contas com este pedaço de código pedido de ponto
Tanium. Então aqui o método que usaremos
é solicitar contas e registrar essas
informações do
console também. Então, a conta do log ferida
e, em seguida, a primeira conta. Conta o índice 0
e os genes são definidos. Esse é esse valor
da conta corrente para minha conta damasco. Certo. Então, espero que você tenha
entendido esse código. É assim que
conectamos meu Damasco. Só temos que
entender o que é isso. Primeiro, estamos verificando se ele está conectado
para ir com você ou não. E segundo diretamente, estamos
solicitando que isso conta. É isso. Nada extravagante. Só isso com a prática, você se lembrará desses códigos. É isso. Agora, a função ou a parte do
método está concluída. É hora de escrevermos a parte
HTML também. Portanto, dentro da função, este terceiro, está fora
dessa função válida de conexão. Simplesmente retornaremos
esse componente. Isso é retorno. E Dave, primeiro lugar, verificaremos
se a conta corrente está vazia no usuário se conectou, é a máscara Matter ou não. Então, conta corrente. Se estiver vazio, então faremos alguma coisa. Ou então faremos outra
coisa. Se estiver vazio,
simplesmente escreveremos ao
ganhar a tag central, daremos um botão. Botão. O nome da classe
será simplesmente botão. E no clique, o evento atribuirá a função válida de
conexão. Certo? E vamos nomear
esse tipo de guerra de conexão. Certo. Agora, na parte else, novamente, verificaremos se a rede
correta está lá. Então faremos alguma coisa. Ou como faremos outra coisa. E se a
rede correta estiver lá, podemos simplesmente enviá-la Dave. Basta enviar um Dave,
eu vou nomeá-lo. Aplicativo. Então. Basta escrever tags H2
e gerenciamento de tarefas, nosso aplicativo de tarefas, qualquer aplicativo de gerenciamento de
tarefas. Então eu vou gostar da tag do formulário. Usarei uma tag de formulário. E então eu darei a
ele um campo de texto. Moldura de texto. Qualquer botão. botão será maiúsculo. Agora, basta escrever
esse HTML comigo. Nosso foco está mais
na parte blockchain. Esses são muito básicos. Estes estão no Blake no
primeiro evento onclick. Vou dar
outro agora. Não quero fazer nada. Este botão terá
ao entardecer escrito nele. E nesse campo de texto, vou simplesmente escrever ID,
ID, esboçado, básico, depois rótulo, fazer a fazer. Em seguida, variante. Desenhado. Em seguida, estilo. Eu simplesmente terei margem 0 pixels e cada pixel é pequeno. Valor. O valor será inserido. Ou seja, essa entrada. E inalterado. Onchange simplesmente
escreverá que isso, o que quer que obtenhamos esses
textos no e, definirá entrada e
ponto, ponto get value. Certo? Estes são todos os textos preenchidos com óleo provenientes do pacote de
material MUN. Então, se você quiser, você pode
pesquisar sobre isso no Google. Cabe a você. Então,
na porção S, simplesmente
escreveremos uma div. Basta escrever, Dave. E dentro dele vamos escrever. Por favor, vá para a ESNet principal e recarregue a tela. Quero dizer, eles só vão dar
alguns nomes de classe, se você quiser. Essas bandeiras. Chame apenas o rosto centrado, centrado, meu jogo. Diretoria. Os próximos dois Excel. Por quê? Mais tarde, se você quiser, você pode
usar CSS como CSS tailwind, e depende de você. Então é isso. Para a função Connect
vallate. E a parte HTML. Ou seja, se essa
violeta atual estiver vazia, mostraremos o botão. Caso contrário, ou seja, se a rede estiver lá e também a
conta atual estiver bem, então teremos
o botão Adicionar. Simplesmente terá o botão Adicionar
ou então acabaremos de ler. Conecte-se à
rede assim. Então, isso é tudo por hoje. No próximo vídeo, também
escreveremos outras
funcionalidades. Obrigado.
12. Adicione a funcionalidade da tarefa: Olá, bem-vindo de volta. Neste vídeo, trabalharemos na funcionalidade Adicionar tarefa. Mas antes disso, vamos
executar nosso aplicativo. Basta ir para a pasta, abrir o terminal
e npm. Comece. Vamos ver como ele está funcionando. Desculpe, temos que primeiro ir para
a pasta do cliente e
depois escrever npm start. Porque o cliente é
a parte do React js. Pode levar algum tempo. Temos que testar essa funcionalidade de
carteira de conexão, esteja funcionando
corretamente ou não. Vamos ver. Espero que não tenhamos cometido
nenhum erro desde que está fazendo pela primeira vez. É por isso que
isso leva tanto tempo. Mas veja o servidor de desenvolvimento. Começou. É um pouco levar
demais eles. Eu sei. Sim. Está feito. Mas cara. Certo. Eu sei que não
há nada como
o CSS e agora vamos, vamos estilizá-lo mais tarde. Mas agora eu só
clique na carteira Connect. Certo. Aconteceu. Você pode estar pensando em
como isso aconteceu, mas como eu já tinha essa conta
conectada agora, se eu atualizar e
clicar em Conectar ou vamos ver, a notificação chegou. E se eu ler em seguida
e conectá-los, então o aplicativo de gerenciamento de tarefas. Isso está funcionando corretamente. Agora vamos trabalhar na funcionalidade
Adicionar tarefa. Simplesmente. E o anoitecer é
igual a uma pia. E dot evita o padrão. Isso é usado para não
enviar o formulário. É isso. Para evitar o comportamento
padrão desse formulário. Em seguida, criarei
um objeto de tarefa. Crepúsculo. O texto será inserido atrasado, eles serão falsos. Então vamos trabalhar
nesse bloco try catch. Aqui. Vou simplesmente enviar essa tarefa. Então, nessa tentativa, novamente, teremos
um TDM ou verificado. Então, basta verificar se ele está lá ou se não, se não estiver lá, então estou apenas
verificando tudo. Eu sei que a conta
já foi conectada, mas ainda assim só para estar segura. A verificação não existe. Então, se estiver presente. Agora, vamos trabalhar. O provedor Const é igual a novos éteres que provedores, Dodd, Web três, Heider. É Hadean. Então vamos pegar o signatário. É const dizer que é igual ao provedor,
não obter o Signer. Então, entraremos no caminho certo. Instância, o contrato é igual a comedores mu que o contrato. Então temos que
enviar três coisas. Primeiro, o contrato
aborda essa tarefa, ABI e faz cianeto. E, finalmente, com
esse contrato de tarefa, chamaremos a
função chamada add, que está no contrato inteligente. Nós enviaremos ao anoitecer. Texto crepúsculo. A tarefa é excluída. E como essa é uma tarefa de sincronização
, obteremos a resposta. E essa resposta. Aqui, vamos simplesmente
escrevê-lo nesse conjunto de dados. Isso é essa tarefa do
array. E vamos anexar todas as tarefas que já
estão lá com essa nova tarefa que estou usando o operador spread aqui
com essa nova tarefa, ok? E então, se houver algum
erro e nós o pegaremos. Se recebermos algum erro também
, simplesmente o pegaremos. E o log do console que foi adicionado. Isso é adicionado ocorreu. Por que adicionar uma nova tarefa? É isso. E no
final da função novamente
deixará o
InputField vazio. Defina a entrada vazia. É isso. Portanto, é assim que escrevemos a funcionalidade
Adicionar tarefa. Acabamos de levar a web para provedor
da biblioteca Keras. E enviamos meu Damask, Os contos e pegamos aquele Signer. Em seguida, criamos o objeto de
contrato e simplesmente chamamos a tarefa Adicionar. Então o que eu fiz foi
na resposta, eu simplesmente atualizo que faz essas coisas para que
na interface do usuário as coisas
sejam alteradas também. Nesta tarefa. Eu adiciono este crepúsculo também. Então é isso. Para este vídeo. Nos próximos vídeos, completaremos as
principais funcionalidades. Obrigado.
13. Excluir e aprimorar a funcionalidade de tarefas: Olá, bem-vindo de volta. Agora vamos trabalhar nessa funcionalidade de tarefa de
atraso no dia. Simplesmente vamos criar a
função IF, excluir a tarefa. Temos que enviar uma chave também. Essa é a chave é a ID do item. Primeiras coisas. Vamos embrulhar tudo no bloco try
catch como de costume. Em seguida, V, vamos registrá-lo no console. Então, nessa tentativa, as mulheres simplesmente fazem a mesma coisa, que nós antes. É um objeto de janela. Então, se o ADM estiver lá, essa coisa como verificação de log de pontos do
console não existe. Se tomarmos expressões idiomáticas está lá, então o que temos que
fazer é o mesmo. Isso, essas linhas, basta
copiar as três primeiras linhas. Observe o novo provedor KTM, depois o
signatário do contrato e tudo mais. E, finalmente, basta
escrever delete. A transação
é igual a aguardar, contrato
crepúsculo Dot Delete Task. E essa chave e é
excluída será verdade. Então. Então o que faremos é obter toda essa tarefa a
partir da funcionalidade que já
temos
no contrato inteligente. É pegar minha tarefa. Realmente chame isso de ponto de
contrato de tarefa, pegue meu crepúsculo. E então disse que o valor da
tarefa aqui, usando o anoitecer definido e o polarização
que são objeto crepúsculo, esse é o resultado. Então, isso simplesmente era que a tarefa somente essa
linha de código era nova. E da mesma forma, teremos uma funcionalidade de somador
chamada de gato todas as tarefas. Também será o mesmo. Então, o que vou fazer
é antes de tudo, esta escrita const, obter
tarefa vai afundar. E, em seguida, a mesma coisa. Tente pegar bloco. Aqui. Vamos cancelar esse adder da lei. E nessa tentativa, pendure, simplesmente copie isso, cole-o aqui e remova essa tarefa de exclusão. Ok, então temos o provedor, temos o signatário, temos o contrato de tarefa. Então temos a liderança. Todas as tarefas são iguais a
aguardar ponto de contrato de tarefa obter minha tarefa. E simplesmente diremos
essa tarefa aqui, é isso. Portanto, essa é a funcionalidade
para obter todas as tarefas. Esses códigos são
realmente muito semelhantes. Se você tiver outra
maneira de
escrevê-lo para que a
repetição não esteja lá, será muito bom. Mas para um iniciante,
isso é suficiente. Então isso é tudo para este vídeo. Vejo você na próxima sessão. Obrigado.
14. Como criar o componente de tarefa: Olá, bem-vindo de volta. Neste vídeo,
criaremos esse componente de tarefa. Então, se você se lembra, criamos esse ponto
que é o arquivo test.js. Aqui. Vamos trabalhar nisso. Importaremos alguns elementos
da interface do usuário do material. Esta lista, lista,
item, lista, item, lista, item, texto do material
MU I. E a segunda coisa que
importaremos a exclusão que
posso da minha TV são os ícones da interface do usuário que o
material exclui. O componente de tarefa. Aceitaremos duas propriedades, isto é, crepúsculo, crepúsculo
e na função Lake. Em seguida, ele retornará a lista. Ele retornará uma lista Nome da classe a fazer lista. Em seguida, liste, item. E pelo menos um texto DEM. Mas eu posso comer é
igual a é igual ao anoitecer. Texto crepúsculo. Em seguida, teremos um ícone Excluir. tamanho da fonte será grande. B, C, D, 0,7. E a funcionalidade de clique
estará no clique, que estamos passando
como uma propriedade. Agora, temos que trabalhar
no arquivo app.js. Ou seja, em primeiro lugar, usaremos o efeito dos EUA Hooke. E, no início, essas funções devem
ser chamadas uma vez que seja, entrar na tarefa e
se conectar a tudo isso. Assim que o aplicativo for renderizado, essas duas funções
devem ser chamadas. Então o que faremos é
neste botão que está ao entardecer, temos que remover
o nulo e a direita e atribuir a
funcionalidade Adicionar tarefa a ele. E depois de finalizar a fazenda suficiente, teremos alguns, você vai tributar. É uma lista não ordenada. E nisso
teremos o mapa de pontos do crepúsculo. Então eu DM. Cada item será teremos esse componente de tarefa. E dentro do componente de tarefa
enviaremos para você, talvez seja item.name ID. Em seguida, o próximo item, não o texto crepúsculo. Em seguida, no Blake, enviaremos funcionalidades
simplesmente atrasadas
com o ID do item. O ID é a chave ou você
pode dizer que meu dia, o que quiser. Então, a dívida. Agora, tudo está lá. Que nosso aplicativo esteja concluído. No próximo vídeo, vou dar um CSS
básico a ele. E, finalmente,
testaremos nosso aplicativo. Obrigado.
15. Estilo de CSS: Olá, bem-vindo de volta. Neste pequeno vídeo, vamos implementar
um estilo CSS básico
para o nosso componente de tarefa. Então, basta ir para este arquivo
CSS de ponto de tarefa que
criamos anteriormente
e, em seguida, simplesmente escreva a lista de tarefas do nome da
classe. Vamos dar algum estilo. Exibição. Falta. Justificar, centrado no
conteúdo. Alinhar, itens. Centro. Em seguida,
serão 800 pixels. Borda de um pixel. Então, em cinza claro. E depois margem, inferior. Em seguida, escolha a célula. E vamos torná-lo
importante. Então. A próxima coisa que eu
gostaria de afirmar
é que, por dez, é 18 carteira de conexão. Mas então temos essa aula. cor de fundo será para C, E, F, 50, este é o verde. Então a borda não será nenhuma. Depois colorido. Branco. Ensacamento. Pixel para pixel. Em seguida, envie texto, alinhe, centralize. Decks, decoração, nenhum. Exibição. Em linha. Bloco. O tamanho será de 16 pixels. Margem. Eles
darão fazer d por cento. E, finalmente, alinhe o
centro de itens e apenas salve-o. Este é um estilo muito básico. E também importamos o arquivo
style.css. Só vou me certificar de que
é importante esse fim. Eu só gosto dessa forma. Então isso é tudo para este vídeo. O aplicativo inteiro agora
está concluído. No módulo final, simplesmente
começaremos a
trabalhar com essa obrigação. E também adicionarei esse
código em algum lugar no final. Você pode
encontrá-lo para que você possa, se tiver algum problema, você pode compará-lo
com seu código. Obrigado.
16. Testando o aplicativo completo: Olá, bem-vindo de volta. Então,
concluímos o aplicativo com sucesso. Neste vídeo,
simplesmente passaremos pelo funcionamento
do aplicativo e verificaremos se tudo
está funcionando bem ou não. Agora, irei para a
pasta, pasta raiz, depois cd para cliente e escrevo npm. Comece. Espero que tudo
funcione bem. E de qualquer forma, se K
estiver em algum editor, tentaremos resolvê-lo. Vamos ver, vamos ver se ele
já foi conectado. Digamos que, em primeiro lugar, removerei a conexão. Basta remover C. Se eu atualizar, então automaticamente essa função válida de
conexão executada por meio
desse efeito de uso. Se eu fizer isso cancelar e se eu mudar a rede
para trazer QB. E, em seguida, clique em
Conectar carteiras, veja se você não está conectado
à rede. Esse alerta está funcionando corretamente. Então, novamente, vou simplesmente
mudar a rede feminina demais. E, em seguida, clique em
Conectar violeta. Agora, a carteira está mostrando
a notificação. Vou simplesmente
clicar em Avançar conexão. Certo? Então vou tentar
verificar isso ao anoitecer, aprender apenas a linguagem e ao entardecer não está funcionando. Por que não está funcionando? Vamos ver. Aprenda apenas a pouco D. E ao entardecer, eles têm que verificar. Eu tenho isso no evento do entardecer. Agora vamos verificar o console
Inspecionar. Enviando isso faz o Contrato. Jason enviou essa tarefa. Algo não está certo. Às vezes relacionado ao vago. Contrato ou queijo em uma multa
democrática da EPA também. 07 tarefa Pergunte a um VI cianeto. Certo. Terceiro, verificando alguns blocos. O que eu fiz foi
simplesmente mudar isso. Isso é const, um BA
vai exigir. E então, este ABA, escreverei em todos os lugares
que estejam aqui, além de excluir, bem
como obter todas as tarefas. Vamos ver se ele está
funcionando corretamente ou não. Agora, vamos ver. Se eu for e aprender solidez. Adicione dass, sie. Agora mesmo. Finalmente, pelo menos
minha máscara agora é mostrada. Eu simplesmente vou
escrever, confirmar. E agora está funcionando corretamente. No meu Thomas também você pode ver que a
interação com contrato está lá. Isso só deixará que seja bem-sucedido porque este estava vindo
do site local, ou seja, da variável local. Mas agora a
instrução do contrato está concluída. E se eu atualizar, isso agora vem
do contrato inteligente. Agora, esse erro,
espero que você tenha entendido, basta remover esta linha de código e escrever const ABI
vai exigir isso. Eu aprenderei novamente
capacete e simplesmente nos adicionarei. E agora vou clicar em confirmar. Mais uma vez, certifique-se de que quer
dizer se eu atualizar agora e apenas um virá porque
o outro não foi armazenado
corretamente
nessa cadeia de blocos. Veja, é gasto. Então você tem que esperar. Essa transação foi concluída. Para mostrá-lo na interface do usuário. Vamos esperar. Agora, ok, instantâneo. Agora, se eu atualizar agora
, eles estão em dois. E vamos tentar trabalhar
na funcionalidade de exclusão.
Eu clico no botão Excluir. Metamask está nos mostrando. Agora. Se eu simplesmente clicar
no botão Excluir e confirmar, vamos ver o que acontece. Certifique-se de deixar a
transação ser concluída. Certo? transição agora não está concluída. Agora, se eu atualizar, posso vê-lo excluído
com sucesso. Só existe uma tarefa. E se eu for com meu ID de contrato, se eu for para ele tem um
tipo de rede. Clique em Pesquisar e
veja o que acontece. Ok, obviamente, tudo
está funcionando corretamente. Todo o aplicativo está concluído. Espero que você tenha
gostado do curso. Você entendeu como um aplicativo básico e
muito básico
é desenvolvido. E com esse conhecimento, você pode desenvolver qualquer aplicativo
que desejar. Isso é tudo. Obrigado. Tenha um bom dia.
Rahul Agarwal, Flutter Developer & Trainer
