Programação Ethereum para Noobs – Web 3.0

(Tradução Automática Ivan on Tech) #39;o que vamos fazer hoje é programar um site simples que interaja com o blockchain porque essa é sempre uma pergunta que as pessoas têm que sempre é uma pergunta que as pessoas têm que sempre que você tem os blocos e se você não for #39; não blockchain, por exemplo, como você. como você realmente cria aplicativos que podem interagir com o blockchain porque não é apenas sua biblioteca regular, não é apenas sua tecnologia regular da web regular e, portanto, o que nós 39;o que vamos fazer hoje é construir um site simples como este e basicamente mostra que você está balanceado quantos eles pensam de você.993
Ter e assim é como satoshis, mas para um teorema e como você pode ver aqui na minha meta-máscara eu tenho nove vírgula nove três um oitavo teorema, mas isso é tão ma De qualquer forma, basicamente o site exibe meu saldo, mas da forma como você pode ver aqui e vamos começar do zero, você não precisa ser um desenvolvedor para acompanhar isso.993
Tutorial para seguir este guia, mas é claro que é bom se você souber um pouco de HTML, se souber um pouco de JavaScript, se estiver familiarizado com essas tecnologias, acho que antes de começarmos, não se esqueça de esmagar o botão de inscrição e também, é claro, o botão de curtir e vamos começar então o que você tem que instalar primeiro temos que fazer alguma configuração e.

Primeiro de tudo você precisa instalar o código do Visual Studio bem, basicamente, você pode instalar qualquer editor que desejar se estiver familiarizado com outros editores, mas se você for apenas novo, use o código do Visual Studio, você pode baixá-lo para o Windows pode baixá-lo para Mac OS você pode baixá-lo para qualquer coisa e então este é o editor que vamos usar e acho que eu.
993Esqueci de colocar na descrição vou fazer depois e vídeo, mas você pode apenas baixar o código do Visual Studio no Google, em seguida, o que você precisa fazer é obter o nodejs e instalá-lo, então apenas google No jazz download e você chegará ao site e precisará baixar o nodejs para seu sistema operacional específico e .

Além disso, você precisa instalar meta-máscara em seu navegador para que seu navegador possa interagir com o blockchain para que os sites em seu navegador para poder interagir com o blockchain você terá que ter meta mask e por isso é importante que você baixe este plug-in para o seu navegador por exemplo Pro for Chrome for.

Firefox ou para o opera e instale-o no seu navegador antes de começarmos e, em primeiro lugar, o que podemos fazer é abrir o código do visual studio, então, depois de instalar, depois de instalar tudo, você pode abrir o código do visual studio e vai ficar assim então este é o site que eu construí antes deste vamos começar do zero então eu vou.

Apenas feche isso e abra desde o início, então vamos ver como agora ele abriu o mesmo, mas basicamente você verá uma janela vazia, você verá algo assim estar vazio e então o que precisamos fazer é basicamente criar uma nova pasta em algum lugar, então vamos aqui e crie uma nova pasta onde estaremos construindo nosso site então aqui está eath newb.

Então se noob é a nossa pasta onde nós’vamos construir nosso site e onde todo o código do site estará localizado e sim, isso funciona no Firefox eu vejo na descrição e, em primeiro lugar, o que precisamos fazer é basicamente abrir esta pasta no visual código visual studio code então você vai aqui para o arquivo que você vai abrir.

Pasta e então você encontra sua pasta que você criou então aqui Earth não criamos aqui selecione pasta e agora ele abrirá esta pasta e você verá que está vazio nada está na Terra noob então antes de tudo o que temos que fazer é t o crie um novo arquivo e chame-o de index dot HTML para que este seja o nosso site e se você estiver familiarizado com HTML, quero dizer isso.
993 Isso é muito familiar para você e agora você precisa criar o site como um site básico normal e sim, para todos vocês que não sabem HTML, você basicamente inicia todos os sites como este e esse é como você termina sites e então seu site está entre aqui e então você tem uma seção principal como esta e aqui você pode ter um título como por exemplo noobs.993
Noobs noobs neste vídeo então este será o título que será exibido aqui em cima na barra e então você pode ter um amigo assim e aqui você terá texto então por exemplo vamos’s têm um texto grande, então h1 significa texto grande e podemos escrever algo como o equilíbrio do meu teorema é cem eles gostam disso certo e deixe-me ver se consigo aumentar o.
Deformado para você aqui como o tamanho da fonte do editor trinta posso editar este lets copiar duas configurações eu quero editar para que você não precise fazer isso eu só quero ok um bom bom ok então isso é melhor você pode ver isso o texto maior então quero dizer nós(criamos um site HTML simples, então o que precisamos fazer agora é muito importante.
993É que nós não pode simplesmente abri-lo porque não funcionará com meta-máscaras, em vez disso, precisamos servi-lo localmente, então o que deve fazer é que você abra este site que vou vincular na descrição, deixe-me fazer isso rapidamente agora, vou vinculá-lo na descrição aqui vamos ver este pacote de serviço node.js então você realmente precisa disso não J’ s serve package.
993Ou você pode simplesmente ir para este URL se você se lembrar dele e que você precisa copiar este comando porque precisamos instalar este serve comando e, portanto, se você estiver no Windows, o que você precisa fazer é abrir o PowerShell, portanto, se você estiver no Windows, vá em frente e abra o PowerShe Clique com o botão direito do mouse e execute como administrador se estiver ligado.

Mac ou se estiver em algum outro sistema, o que você precisa fazer é abrir o terminal para por exemplo, se você estiver no Mac, você abre o terminal, mas no Windows você abre o PowerShell e, em primeiro lugar, você precisa navegar até a pasta onde você tem seus arquivos para Eu preciso navegar para f mu então eu vou para.

Ethno e eu copio o caminho e então eu preciso escrever CD no PowerShell para que eu basicamente precise apontar PowerShell para esse diretório Eu preciso que o PowerShell funcione nesse diretório, então eu escrevo o CD, o que significa alterar o diretório e, em seguida, basta copiar o caminho assim e você vê que o PowerShell agora mudou para o.

Pasta e aqui o que você pode fazer é escrever execute este comando NPM install e vamos ver que podemos fazer assim Eu já dissin parado, então eu não tenho certeza do que vai acontecer, talvez aconteça é só instalar mais uma vez, mas agora que tenho isso instalado, o que posso fazer é servir isso como um servidor local, basicamente, se eu apenas. tem esse servidor local aqui que eu posso copiar vamos’ vamos ver que eu copio assim vamos’ ;s copiar e agora eu posso abri-lo no meu navegador, então se eu for aqui eu colo a URL que acabei de receber e então eu vou index dot HTML vamos ver vamos ver o que está acontecendo f saber index.html vamos copiar assim sim caras, é assim que é quando.

Você faz codificação ao vivo às vezes funciona, às vezes você tem problemas, deixe&s ver index dot HTML sim e então eu copiei o URL e então eu escrevo slash index.html e agora eu tenho este site que nós chamamos juntos que diz que o equilíbrio do micélio é de cem maneiras, mas você sabe que é tudo difícil- codificado por isso é tudo difícil, quero dizer, eu só posso alterá-lo. areia então o que precisamos fazer é que precisamos de alguma forma fazer com que este site perceba o quanto tenho uma forma real então esse site de alguma forma precisa ler os dados da meta mask porque você sabe aqui na matemática eu tenho uma conta nessa conta está no.

Teste a rede e tem nove vírgula nove éter, então de alguma forma queremos exibir essa quantidade aqui e este é o nosso próximo passo para fazer incrível ver isso tantas pessoas estão assistindo, quero dizer, isso é bem técnico, eu não sabia nem quantas pessoas assistiriam a isso, mas para fazer isso, o que precisamos fazer é ir para a biblioteca JavaScript da web 3.0 e precisamos.

Para obtê-lo, vou vinculá-lo na descrição também deixe& está vendo ou, na verdade, não acho que o tenha aberto, então web 3.0 javascript apenas google web 3.0 javascript e aqui você vai vai chegar ao github e ele diz web 3.0 três dias web três dias você acabou de abri-lo ok e então aqui você chegará a este repositório wi th nossa biblioteca que precisamos.

E então você vai para o branch porque nós não queremos usar o branch de desenvolvimento queremos usar essa tabela liberada do branch basicamente então vá para branch você vai para 1.0 você vai para 1.0 e ele mudará o branch para 1.0 e aqui agora nós apenas baixamos o zip e é claro que eu quero dizer alguns se alguns de seus geeks estão assistindo você pode estar se perguntando eu tenho(t.
993Fire com o download disso, você sabe por que não são& não estamos apenas usando git clone ou você apenas está usando você sabe Bower install ou NPM install sim, isso é apenas para iniciantes, então não se preocupem’ não se preocupe com isso, faremos isso da maneira mais simples e amigável, então basta clicar aqui, clicar em baixar o zip de download e você obterá este arquivo zip com a biblioteca para você.993Abra isso e você abre isso e aqui você vê muito conteúdo, mas o que você precisa fazer é ir para dist e ir para dist e aqui você vai ver web 3 punk ed significa que sim web 3 isso significa que Jess então você só copia este arquivo o que você precisa fazer é copiar este arquivo e então você vai para s noob e cola aqui agora.993 993 Você precisa da web 3, o que significa que J, então este é o código real com o qual poderemos fazer com que nosso site interaja o blockchain então precisamos dele aqui ok então agora de volta ao nosso site de volta ao nosso site você abre o código mais uma vez e agora precisamos inserir a biblioteca que acabamos de baixar precisamos apenas inseri-lo no site então como você faz isso.

Bem, você escreverá um script como este e então escreveremos s RSC SRC significa fonte e, portanto, precisamos incluir esta biblioteca que acabamos de baixar em nosso site para que ela é a web 3 que significa que J é assim, então agora nosso site realmente carregará isso, esse arquivo realmente carregará e nós poderemos usar a funcionalidade neste arquivo e assim se eu apenas recarregar o site.

Como você pode ver, nada aconteceu porque use nós acabamos de criar um acabamos de adicionar uma biblioteca sem fazer muito e então algo que você pode fazer é apenas clicar com o botão direito do mouse e inspecionar o elemento e você obterá este painel que usaremos em breve, mas’ é só você saber se você for aqui, clique em inspecionar elemento e então você vai para o console aqui e agora podemos.993Na verdade comece a brincar podemos começar a brincar com isso agora temos a biblioteca incluída aqui e agora podemos fazer o script do site ainda mais, então aqui vamos nós nós vamos ficar loucos e realmente interagir com o blockchain aqui, então antes de tudo precisamos verificar se a web 3 está realmente reconhecendo nosso meta.

Mask porque deve fazer isso, se você tiver a meta-máscara instalada, a web 3 deve reconhecer isso, então o que você faz é – certo, se digitar e, em seguida, escrever web 3, não, se não for indefinido, basicamente, se isso estiver definido e veja se web 3 não é indefinido, então podemos realmente fazer algo mas, caso contrário, escrevemos que fazemos um alerta basicamente.

Alerta não pôde’ não encontrou um provedor como este mas se não for indefinido, então podemos fazer o trabalho e então podemos escrever console dot log web 3 encontrado assim e agora se eu recarregar a página você verá algo no console assim, então você vê que eu recarrego a página e agora você vê que eu encontrei a web 3, então ela realmente reconhece a web 3, isso significa. #39; não funciona, não obteríamos isso, em vez disso, receberíamos o alerta, mas agora meu site pode realmente se comunicar com o blockchain ethereum, então isso é muito importante e se você executar isso site em um navegador que não tem meta-máscara bem, você receberia o alerta para você.993993 Receberá este alerta em vez de receber esta mensagem do console, então esse é o primeiro passo que realmente temos comunicação, o próximo passo para nós é usar o c urrent provedor basicamente e isso significa que usamos o plugin meta mask como nosso provedor que basicamente fornecerá as informações sobre o blockchain para este site.

E assim em primeiro lugar, o que precisamos fazer é que a web 3 seja igual a nova, digamos, igual à nova web 3 e, em seguida, o que precisamos fazer é escrever na web 3 esse provedor atual assim, então agora estamos basicamente dizendo ao site para usar meta-máscara como fonte de conhecimento para tudo quando se trata de blockchain e informações de.

O blockchain e recarregamos a página não vemos erros, isso significa que funcionou, então agora nosso site está obtendo todo o conhecimento sobre o teorema blockchain de meta mask e então o que podemos fazer, por exemplo, é consultar as contas, então a que tipo de contas temos acesso enquanto escrevemos web 3, essa conta ainda conta e depois você.

Você basicamente precisa fornecer a função l como isso, pegue as contas e como argumento você dá uma função e aqui você pode realmente imprimir que tipo de contas você tem assim, se salvarmos isso e recarregarmos, deixe&s veja ainda contas não é uma PI ah sim eu fiz o erro pessoal então não é web 3 é web 3 que se isso pega contas.993
E agora quando eu recarrego você vê que eu recebo uma conta de volta que eu tenho essa conta na minha meta mask então como você pode ver nosso site é realmente capaz de obter este endereço que eu tenho aqui como você pode ver’s 0 X 0 9 0 5 7 e aqui temos 0 X 0 9 0 5 7 então temos uma comunicação acontecendo entre a meta mask do site está tudo funcionando bem pessoal.

Tudo está funcionando bem e o fluxo está funcionando bem também, vejo seguindo em frente, então o que precisamos fazer agora é obter o equilíbrio desse endereço porque você se lembra do objetivo do nosso projeto o objetivo de tudo é mostrar quanto dinheiro eu tenho para que este site possa funcionar receber meu dinheiro e é claro.

Alguns de seus geeks que estão assistindo podem dizer eu quando você deve verificar se há erros e é verdade que nós’não está verificando erros aqui e se você’ está realmente fazendo algo sério, você deve verificar se há erros, mas nós’estamos apenas brincando, os caras estavam apenas brincando, então agora podemos adicionar o comum, então aqui está o que você tem.993
As contas disponíveis estão disponíveis e agora você precisa buscar o saldo da primeira conta, então primeiro precisamos obter a primeira conta porque na meta máscara você pode realmente ter várias contas, então agora ele nos retornou uma lista de uma mas pode muito bem ser o caso de sabermos que recebemos cinquenta contas ou algo assim, mas precisamos obter.

A primeira conta desta lista, neste caso, só temos uma, mas em outros casos talvez existam várias contas, então o que precisamos fazer é escrever a primeira conta e depois ganhar Ivan was y nosso nível de QI eu não sei 39; não conheço caras eu não 39; nunca fiz esse teste de QI então eu não tenho absolutamente nenhuma ideia, então a primeira conta é igual a zero. escreva colchete colchete zero e se você quiser obter a segunda conta, colchete direito colchete e depois um para que você tenha a primeira conta e agora podemos imprimi-la e deixars vermos o que obtemos só conseguimos o endereço perfeito e tal.
993O que podemos fazer agora é que podemos realmente obter o saldo dessa conta para que então aqui nós temos a primeira conta que é basicamente essa string que ela buscou daqui agora precisamos obter o saldo para fazer isso o que podemos fazer é ir para a web 3 que se isso obtiver saldo assim e então nós também que tipo de saldo queremos obter isso.

A função realmente precisa de um saldo e você vai na primeira conta, é aqui que w e queremos obter o saldo e, em seguida, precisamos desse retorno de chamada, então, de onde recebemos o saldo de recebimento, para qual função recebemos o saldo, bem, é essa função, então fazemos assim e agora ele buscará de forma síncrona o que é isso como esses caras.

É tarde caras meu cérebro está começando a funcionar não, então isso é realmente certo assim e então fazemos assim sim, então o que somos acontecendo aqui, eu tenho muitos desses sim assim, então precisamos equilibrar, é claro, o javascript precisa saber que tipo de equilíbrio precisamos obter e, em seguida, você fornece o que precisa. 993Para obter o saldo desta primeira conta e aqui está a função que receberá o saldo, então agora podemos realmente imprimir o saldo e ver a violência no console e então vamos’s ver se isso realmente funciona, então o saldo do console.log imprimirá o saldo no console e como você pode ver o saldo está aqui 993 um, então eu realmente tem.Rec eived my balance este site foi capaz de ler meu saldo de meta máscaras e nós temos aqui ok e então o próximo passo é apenas pegar este número e mostrá-lo aqui e isso& é isso pessoal e é isso, então nosso próximo passo é inserir aqui, então primeiro precisamos criar um ID aqui para este é o rótulo de equilíbrio porque a única maneira de nós.

Podemos alterar o conteúdo desta string aqui é referenciando-a por ID e precisamos, portanto, fornecer é um ID, portanto, escrevemos assim e então podemos escrever documentar o documento que obtém o elemento por ID assim e então você diz que tipo de ID esse ID e então você pode dizer HTML interno e realmente alterar o conteúdo, então agora eu.

Quero mudar o texto deste rótulo para o seguinte Eu queria dizer que meu equilíbrio de hélio é e então eu quero fazer mais, então balance basicamente eu não sei quantos ether quantos caminho cada usuário tem porque é essa variável então eu ca nnão realmente escrever um número aqui eu preciso escrever esta variável então eu basicamente coloco esta variável aqui e e.

Então eu escrevo assim para que você possa ver construímos esta string de várias partes que estamos escrevendo meu teorema balance é balanceado e ele basicamente irá paginar o balance daqui então agora quando vamos recarregar nós realmente veja isso ok então este é o meu equilíbrio de aetherium tudo bem e então aqui. certo certo isso’é o que’é realmente o que eu queria mostrar a você e é assim você pode realmente construir sites, você pode construir aplicativos em cima do blockchain, isso não é extremamente difícil, quero dizer, se você conhece um pouco de JavaScript, se conhece um pouco de HTML, isso é.

Não é difícil para você, deixe-me mudar de volta o tamanho assim, mas é claro que se você não viu JavaScript antes, pode parecer k um pouco complicado, mas alguns ok alguns de vocês geeks podem se perguntar por que não usamos você sabe por que não ;t nós usamos callbacks ou mais corretamente porque nós usamos callbacks então isso é realmente chamado callback hell.

Quando você tem um callback como este uma função e então dentro dele você escreve algo e então você tem outro callback e então é claro que é chamado de callback inferno nós poderíamos usar promessas mas não seria noob amigável da mesma forma então pessoal que’é realmente isso’é realmente isso’é realmente eu espero que você aprenda algo Espero que agora você possa construir o seu.993993Site próprio é claro que somos só nós’ acabamos de raspar a superfície se você realmente for para a biblioteca da web 3, verá que ela pode fazer tantas coisas diferentes que você pode realmente ter sites que podem assinar transações para que possamos usar um site como uma carteira e, quando assinamos uma transação, quero enviar isso me traz à tona ta mask então isso é alguma coisa nós poderíamos fazer no futuro também deixe seus comentários o que você achou disso se você não seguiu este vídeo quero dizer tente você mesmo vou link deixar links na descrição abaixo e sim pessoal espero que tenham gostado apertem os likes apertem este botão do sino e eu’vejo vocês dentro.993 993O que é isso em nove horas e meia para bom dia cripto mais uma vez bom dia cripto em uma hora e meia ok vamos’s faça uma pergunta que vejo, você pode dizer ao Oreo como hospedar isso inteligente, então isso não é um contrato inteligente meu amigo, este é um site que pode interagir com o blockchain. )
Não é um contrato inteligente, então este site pode, por exemplo, consultar um contrato inteligente e obter alguns dados dele, se você quiser aprender sobre contratos inteligentes, temos vídeos sobre isso também, por exemplo procure criar todas as moedas criptografadas em minutos e lá você verá a criação de contratos inteligentes, tudo bem, pessoal, obrigado.993
Muito para assistir e eu’vejo vocês muito em breve tenham uma ótima noite ou dia ou noite onde quer que estejam adeus pessoal

Rate this post

Posts Relacionados

Deixe um comentário

error: