(Parte 3)Tutorial Sobre SteemConnect JS Dsteem E Steem API Para JavaScript pt3
Repositório
https://github.com/igormuba/steemhere
O que aprenderei?
- Criar um botão de login pro SteemConnect
- Pegar o access_token da URL
- Usar o access_token para recuperar informações do usuário
- Write o nome e foto de perfil do usuário no navegador
Requisitos
Embora meu objetivo seja tornar o tutorial o mais amigável para não programadores possível, o seguinte conteúdo/conhecimento pode ser útil
- HTML básico e conhecimento intermediário de JavaScript
- Uma compreensão básica da blockchain da Steem
- Conhecimento de pelo menos o que é JSON e o console do navegador
- WAMP ou similar, que pode ser baixado clicando aqui
- Conhecimento em como configurar o servidor WAMP (ou similar)
Vou tentar cobrir brevemente tudo isso, então mesmo que você não saiba, tentarei fazer com que a série de tutoriais seja amigável para se fazer apenas CTRL + C CTRL + V para não programadores! Mas ter o conhecimento mencionado acima pode levá-lo muito mais longe e te dar mais flexibilidade.
Dificuldade
- Intermediário
Conteúdo do tutorial:
Anteriormente, geramos o URL de login e copiamos ela do console, agora usaremos ela para criar um botão de login no arquivo HTML.
@maargarita contribuiu no Github, tournou o arquivo index mais limpo, corrigiu alguns bugs e me ajudou a terminar o conteúdo desta classe, logo, o arquivo final agora se tornou assim, siga o exemplo e remova as outras tags de script deixando apenas o SteemConnect, ficará assim
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/steemconnect@latest"></script>
<script src="js/myscript.js"></script>
</body>
</html>
Outra mudança que foi feita é que agora o arquivo JavaScript é chamado myscript.js enquanto anteriormente era myapp.js
Apenas renomeie o arquivo dentro da pasta js e mude o nome do arquivo para myscript.js e mude a importação dele no arquivo HTML de
<script src="js/myapp.js"></script>
para
<script src="js/myscript.js"></script>
Essa mudança será útil pois teremos mais arquivos javascript no futuro e queremos deixar o nome myapp.js livre para uso.
Criando botão de login
Para criar o botão de login, basta usar uma tag de âncora com o href apontando para o URL que seu console gerou para acessar o SteemConnect.
<a href="https://steemconnect.com/oauth2/authorize?client_id=steemhere&redirect_uri=http%3A%2F%2Flocalhost&scope=vote,comment">login</a>
É a tag de abertura <a> com a tag de fechamento com um href dentro da tag de abertura que se parece com , apenas insira o formulário de URL copiado anteriormente do console no href e o texto para clicar antes doe depois do>`
Agora, precisaremos hospedar esses arquivos no servidor WAMP, senão seremos redirecionados para o host local (como configurado no tutorial anterior), mas ele nos dará algum tipo de erro 404, porque não temos um servidor localhost para que o navegador encontre os arquivos
Então, baixe e instale o servidor XAMP, ou qualquer software de servidor que você esteja acostumado, no meu caso eu estou usando o XAMP no Windows 10.
Agora abra a pasta do servidor, você provavelmente configurou na instalação, se não, dependendo do seu sistema operacional, pode estar em uma pasta diferente. Encontre sua pasta www e entre nela.
No meu caso, XAMP no Windows, está no diretório
C:\wamp64\www
Encontre sua pasta www e entre nela
Copie o arquivo index e a pasta js para dentro dela
Agora, você deve criar um arquivo JSON, basta criar um arquivo chamado package.json e dentro dele colocar o seguinte código para que possamos decodificar as informações que receberemos da API.
{
"dependencies": {
"steemconnect": "^2.0.1"
},
"devDependencies": {
"http-server": "^0.11.1"
}
}
Abra o navegador e coloque na barra de URL apenas "localhost" ou "127.0.0.1" para abrir o site a partir do servidor local
Se você criou o link (botão)de login, verá a página assim
Agora clique no botão para entrar e obter o access_token, eu vou te ensinar logo após como para pegar o token de acesso automaticamente.
Se tudo deu certo você foi redirecionado para a página principal do servidor local (como botão de login)
Confira a URL no navegador, ela tem vários caracteres aparentemente aleatórios
Você verá o código exato do access_token ali mesmo, não estou mostrando por completo por razões de segurança, este é um token de acesso real para o steemconnect.
Mas nosso código ainda não consegue acessar o token que está na URL. então vamos ficar um pouquinho mais avançados em JavaScript e pegar esse URL, separar as variáveis que ele possui e salvar o access_token para uso posterior.
Então agora, entre no myscript.js que está dentro da pasta js. Nós vamos por a mão na massa com JavaScript.
Este é o código exato para "quebrar" a URL que o SteemConnect nos enviou de volta em várias variáveis menores, para que possamos trabalhar com elas. Pensei em apenas remover todo o resto e deixar apenas o token de acesso, mas pensando no futuro e planejando as classes futuras, será útil ter uma função para dividir a URL em variáveis menores.
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
O código acima pode ser encontrado com muito mais detalhes no site html-online , já que nosso foco não é JavaScript, mas sim APIs Steem, eu recomendo que você vá até lá e leia o que está acontecendo nesse trecho. O JavaScript é muito importante para essas classes, embora eu continuarei postando tutoriais complementares, você mesmo pode ir em frente e ir até lá para aprender os fundamentos antes de nossas próximas classes principais da API.
Este código definiu as funções, e como eu mostrei no nosso tutorial de conteúdo suplementar
Então agora chamaremos essa mesma função e atribuiremos o valor retornado a uma variável
var access_token=getUrlVars()["access_token"];
Se você quiser verificar se as coisas estão funcionando corretamente, diga ao JavaScript para mostrar qual valor é salvo na variável access_token usando o comando console.log ();
console.log(access_token);
Se tudo deu certo você vera o resultado no console
Mas ainda há um problema. As variáveis serão perdidas quando você fecha o navegador ou fechar e abrir a página. Se você não salvá-lo em algum lugar que não o perca, o usuário terá que fazer o login novamente todas as vezes.
O que nós queremos agora são cookies
Não, não cookies igual o da a imagem acima (infelizmente), mas os cookies do navegador. Os cookies são armazenados em seu navegador para o site e não são perdidos quando você fecha ou altera páginas. Isso é perfeito para o que queremos.
Como dito antes, esta não é uma aula de JavaScript, é uma classe de API da Steem e SteemConnect, mas estou comprometido em tentar o meu melhor para que até mesmo um iniciante possa fazer isso. Essas aulas são resultado da minha frustração com a documentação não tão amigável aos iniciantes e a falta de material didático para criar aplicativos Steem. Sério, eu não consegui encontrar aulas nem no youtube, e o Youtube é o maior professor que já tive. Por isso, usarei uma versão ligeiramente modificada do código do site w3schools para definir e obter os cookies.
function setCookie(access_token, exdays){
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
var access_token_cookies="access_token_cookies="+access_token+";" + expires + ";path=/";
document.cookie=access_token_cookies;
}
A função acima receberá o valor do token e o salvará em um cookie chamado "access_token_cookies"
A função das w3schools é muito completa, e melhor do que a que eu já escrevi, porque nos permite, no futuro, salvar e recuperar vários cookies, na versão que eu fiz sem ppensar em escalabilidade futura só armazenávamos 1
Para praticar, depois de definir esta função e ler o seu tutorial no w3schools, tente identificar que mudanças eu fiz para personalizar a nossa função para trabalhar com o nosso access_token
Então, por favor, leia o tutorial sobre
https://www.w3schools.com/js/js_cookies.asp
Para entender o que estamos fazendo. Eles explicam em detalhes e muito bem e se concentram no que o JavaScript está fazendo.
Agora, precisamos chamar a função para, de fato, definir o nosso delicioso cookie.
Basta adicionar abaixo de todo o código anterior
setCookie(access_token, 7);
A função recebeu o código e salvou nos cookies como access_token_cookies
Agora, precisamos depurar (ou debugar como alguns dizem) para ver se o cookie está definido, mas para isso precisamos recuperar o cookie.
Baseado no tutorial de JavaScript da w3schools, simplesmente use o seguinte código levemente modificado, para definir a função de recuperar cookie
function getCookie(cookie) {
var name = cookie + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Novamente, pra praticar, recomendo que você leia o tutorial deles e esse e tente identificar quais alterações eu fiz para personalizar e fazer essa função funcionar com o nosso access_token.
Agora precisaremos depurar para verificar se o cookie foi salvo com sucesso e se podemos recuperá-lo com sucesso.
Para fazer isso, primeiro remova o console.log () anterior e depois
console.log(getCookie("access_token_cookies"));
Eu suponho que você deve ter entendido que nós chamamos a função solicitada por um cookie chamado access_token_cookies
A saída deve ser exatamente a mesma no console.log anterior () que fizemos
Agora vamos usar a API SteemConnect para obter dados reais do blockchain!
Essa é a parte divertida.
Temos o botão de login, temos o token de acesso, agora precisamos trabalhar com ele.
Exclua o console.log () para deixar a saída do console limpa.
Certifique-se de que o trecho que define a API esteja no final do código.
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
function setCookie(access_token, 7){
var access_token_cookies="access_token_cookies="+access_token+";path=/";
document.cookie=access_token_cookies;
console.log("cookie criado "+access_token_cookies);
}
function getCookie(cookie) {
var name = cookie + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
var access_token=getUrlVars()["access_token"];
setCookie(access_token, 7);
var api = sc2.Initialize({
app: 'steemhere',
callbackURL: 'http://localhost',
accessToken: access_token,
scope: ['vote', 'comment']
});
A definição de getUrlVars(), setCookie(access_token) e getCookie(cookie) deve vir primeiro, pois o JavaScript lê uma linha de cada vez, se as chamarmos e elas não estiverem definidas, teremos alguns erros e bugs.
Em seguida, certifique-se de que rpegamos o token e o guardamos nos cookies antes de iniciarmos a API.
Agora, depois de definir o cookie, recomendo que você altere a variável de token para obter o valor do URL para obter o valor salvo nos cookies, portanto, no caso de não haver token no URL, o navegador pesquisará os cookies .
Além disso, precisamos nos certificar de NÃO DEFINIR OS COOKIES PARA NULL SEM QUERER, sério, eu gastei 30 minutos e quase fiquei louco porque o cookie estava voltando para null, mas eu vou te ensinar como não cometer esse erro, cpois pequenas coisas assim podem fazer você perder a motivação. Aqui vamos nós
Observe, no momento nós estamos definindo o cookie de forma cega, sem verificar se o token é nulo ou não, então se apenas formos ao localhost sem o token na URL, o cookie será definido como indefinido pois não está na url (isso quase me deixou louco até eu perceber).
Assim, você precisa envolvê-lo com um 'if ' para salvá-lo apenas se o token de url não for nulo, ficará assim
if (access_token!="" && access_token!=null){
setCookie(access_token, 7);
}
Acabei de te salvar de 30 minutos de frustração por esquecer uma boa prática de programação hahaha
Então, se houver um token no URL, ele irá para os cookies, se não for, por enquanto vamos supor que está nos cookies, e salvar numa variável assim
var access_token_in_cookies = getCookie("access_token_cookies");
console.log("fromcookies is" + access_token_in_cookies);
Faça o login novamente para ter certeza de que salvou o cookie e agora apague tudo na barra de URL no navegador e digite apenas localhost e acesse-o, se tudo foi feito corretamente, você deve ver isso
Não há access_token na url, mas nós a salvamos nos cookies! Eu não sei se isso deixa você tão empolgados quanto eu, mas fiquei muito feliz por isso funcionar.
No Google Chrome na aba "Aplicativo" você também pode ver o cookie em si, E NÃO É NULO !!! VIVA!!!
Agora, o último passo, conseguir o nome de usuário e a foto do perfil da blockchain da Steem e colocar no navegador, precisaremos voltar ao HTML por um breve momento, e aqui a aula suplementar que eu postei ontem será muito útil para iniciantes que queiram entender o que está acontecendo.
No HTML, crie uma tag h1 e uma tag de imagem
<h1 id="username"></h1>
<img src="" id="picture">
Nós terminamos com o HTML haha
Simples, todo o trabalho agora estará de volta no arquivo JavaScript
No myscript.js adicione no final para pegar os dados da conta do token salvo nos cookies
api.me(function(err, res) {
console.log(err, res);
});
E certifique-se de que o código acima esteja abaixo do código abaixo (confusão mental)
var api = sc2.Initialize({
app: 'steemhere',
callbackURL: 'http://localhost',
accessToken: access_token,
scope: ['vote', 'comment']
});
E também, neste último trecho de código, altere o accessToken: access_token, para accessToken: access_token_in_cookies,, então estaremos consultando a API Steem com o access token salvo nos cookies do navegador
Para testar se você fez certo, apenas salve tudo e vá para localhost, sem nenhum token ou qualquer coisa no URL, supostamente ele deve buscar o token dos cookies e você verá as informações da sua própria conta no console
Agora as coisas vão ficar super legais!
Veja, em algumas linhas de código podemos finalizar todo este trabalho e ver os resultados. Preste atenção aqui
No api.me (função (err, res) depois do console.log (err, res); você precisa adicionar um if, se isso não gerar um erro vamos colocar o nome de usuário e a imagem do perfil na página, finalmente!
O código será o seguinte
api.me(function(err, res) {
console.log(err, res);
if (!err) {
document.getElementById("username").innerHTML = res.user;
document.getElementById("picture").src = "https://steemitimages.com/u/"+res.user+"/avatar";
}
});
O que estamos fazendo acima é:
Usamos a manipulação DOM para obter o elemento h1 e definir o conteúdo HTML dentro das tags para o res.user (a variável user dentro do objeto res).
Se você quer entender porque res.user você deve pesquisar sobre JSON, mas brevemente, os dados do usuário são armazenados temporariamente no objetores, e dentro do res está ouser, verifique a imagem para um melhor entendimento
basicamente o objeto é o res e ouser é seu filho direto.
Salve tudo e recarregue a página EEEEEEEE
PARABÉNS!
Você logou um usuário com sucesso, armazenou seu token de acesso SteemConnect, usou este token para obter suas informações diretamente do blockchain e preencheu a página com suas informações.
Eu mal posso esperar para mostrar-lhe coisas mais legais que você pode fazer no próximo tutorial!
Currículo
Aulas anteriores, sinta-se à vontade para ler todas elas ou pule aquelas que você já conhece sobre o conteúdo.
Tudo em Português
- Tutorial De Como Programar SteemConnect Dsteem e API Steem Para JavaScript Parte 1
- (Parte 2)Tutorial Sobre SteemConnect JS Dsteem E Steem API Para JavaScript pt2
- (Conteúdo Suplementar) Tutorial Sobre SteemConnect JS Dsteem E Steem API Para JavaScript HTML CSS E JavaScript
Trabalho feito
Arquivo index.html final
Arquivo myscript.js final
Arquivo package.json final
Beneficiários deste post
De agora em diante usarei oSteemPluspara doar 50% das recompensas dos posts para beneficiários escolhidos
Cada beneficiário em cada post receberá um percentual das recompensas do post automaticamente pela SteemPlus, 50% das recompensas de cada post serão automaticamente distribuídos aos beneficiários, de acordo com o percentual de cada um. 5% automaticamente irá para o SteemPlus por nos prover esse serviço.
Agradecimento Especial
Devo deixar aqui um agradecimento especial à minha amiga @maargarita, ela ajudou a resolver um pequeno problema que eu estava enfrentando e sem ela este tutorial teria sido adiado até que eu pudesse encontrar uma solução. Muito obrigado mesmo.
Ela não é muito ativa na comunidade Steem, mas eu estou tentando trazê-la de volta, ela é muito inteligente e seu conhecimento pode ser ótimo e muito útil para todos na Steem, então eu recomendo segui-la como um incentivo e ficar ligado caso ela volte a postar conteúdo.
Esta aula levou 7 horas para fazer e quase 1 para ser traduzida
A partir do momento em que cliquei para criar uma nova postagem, até agora, quando cliquei em "postar" na versão inglês, levei 7 horas para escrever o tutorial e mais quase 1 para traduzir ao português agora mesmo.
Por favor, considere dar "upvote", "resteem", compartilhar e votar em mim para witness
https://steemconnect.com/sign/account-witness-vote?witness=igormuba&approve=1
Você sabia que eu rodo um servidor Witness (testemunha) da blockchain da Steem?
Como votar em mim:
Vá para o endereço
https://steemit.com/~witnesses
Desça a página até o finalzinho e encontre o campo abaixo
Insira meu nome "igormuba", sem aspas, e clique em "vote" para votar em mim.
Parabéns pela iniciativa, também não gosto de tutorias que são difíceis de seguir, simplesmente pq o autor não soube guiar o usuário. Acessar uma informação na blockchain parece coisa de outro mundo né, agora estou vendo que não é tão complicado assim, obrigado.