#### Repositório
https://github.com/igormuba/SBDConversion
#### O que vou aprender?
Ensinarei um pouco de JavaScript e como usá-lo para criar URLs pra API SteemConnect para fazer calls para a blockchain Steem e também usar o JavaScript para manipulação de DOM para criar um link que aparece somente após o usuário digitar seu nome
- Concatenação de strings JavaScript
- Chamada da API da blockchain Steem pela URL do SteemConnect
- manipulação de DOM para mostrar partes ocultas do código
#### Requisitos
Não é necessário ter nenhum conhecimento prévio, mas saber o seguinte pode ajudá-lo a desenvolver seus próprios aplicativos
- Editor de texto (estou usando o VS Code)
- Navegador que suporte JavaScript (estou usando o Firefox)
- JavaScript
- JSON
- OAuth ou SteemConnect
#### Dificuldade
- Básico
#### Conteúdo do tutorial
Aqui vou ensinar como criar um aplicativo muito útil. Quando os preços do SBD são inferiores a um dólar, você pode usar uma função da blockchain ad Steem que converte SBD em Steem como se valesse 1 dólar. Você ganha mais Steem pelos seus SBD! (isso não é sugestão nem dica de investimento e há RISCOS fazendo essa operação, por exemplo, se o preço do Steem sobe ou os preços do SBD sobem, ou ambos, vocês perdem! Este tutorial é para propósitos educacionais de programação apenas!)
Vamos começar criando o arquivo html, na maioria dos editores de código se você abrir um arquivo HTML vazio e digitar doctype ou html e pressionar tab irá preencher o corpo para você, isso é útil pois nosso foco principal não é HTML
Crie um arquivo index.html em uma pasta dedicada
```
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
```
# Adicionando estilos
Para este tutorial usaremos uma biblioteca CSS chamada Bootstrap para que possamos tornar nosso formulário um pouquinho mais bonito, mas você não precisa, de forma alguma, usá-lo, eu só quero que você comece a se sentir acostumado a importar arquivos CSS para tornar as coisas mais bonitas
Você pode ler mais sobre o bootstrap em http://getbootstrap.com/
Para adicionar a biblioteca de bootstrap em nossa página, basta colocar entre as tags head
```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
```
# Criando arquivo pra lógica do JS
Na mesma pasta que o index.html, crie uma pasta chamada js (ou qualquer outro padrão que você preferir) e dentro dela crie o app.js (ou qualquer nome que você desejar) para hospedar a lógica JavaScript do aplicativo
A estrutura:
# Importanto o js pro index
Dentro do index.html importe a lógica do JavaScript dentro das tags body, bem no finalzinho, para garantir que quando ele é carregado ele tenha acesso a todos os elementos HTML, usando
```
<script src="js/app.js"></script>
```
# Criando o formulário (com ou sem) bootstrap
Eu gostaria de lhe dar uma breve introdução ao bootstrap.
Eu não uso essa biblioteca para trabalhar pois é muito "manjada", digamos, mas acredito que para criar protótipos e criar aplicativos simples, para mim, é ótimo porque é simples, leve e fácil de usar, também há muita documentação e componentes prontos para usar online!
Vamos aproveitar um desses elementos pré-construídos?
Neste tutorial vamos editar o formulário fornecido pela w3schools em
https://www.w3schools.com/bootstrap/bootstrap_forms.asp
```
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
```
Pegue esse código e cole dentro das tags do body do HTML
# Personalização do formulário
Nós não queremos um formulário de login, então devemos mudar algumas coisas!
Começando removendo o atributo de ação e adicionando a classe formsteem nela para que possamos usar posteriormente na lógica JavaScript
assim
```
<form action="/action_page.php">
```
se torna
```
<form class ="formsteem">
```
e também não queremos um e-mail, mas sim um nome de usuário, então
```
<label for="email">
```
vira
```
<label for="SteemAccount">
```
e, consequentemente, devemos alterar o ID e o tipo do que anteriormente deveria ser o campo de e-mail!
mude o atributo `type =` e dê a ele o valor de `text` ao invés de` email`, e o id mude para `SteemAccount`
No final, o primeiro campo se torna
E ele se parece assim
Mas nós não precisamos de uma senha (ainda), precisamos do valor do SBD, então, novamente, faça as mudanças necessárias
```
<div class="form-group">
<label for="SbdAmount">SBD Amount to convert:</label>
<input type="text" class="form-control" id="SbdAmount">
</div>
<button type="submit" class="btn btn-default">Convert</button>
```
Agora nós definimos as classes, aparência e IDs e só precisamos da lógica!
# Pegando o evento click do botão enviar
Para pegar o evento click, no app.js, usaremos a função querySelector
```
document.querySelector(".formsteem").addEventListener('submit', function(event){
event.preventDefault();
//code logic goes here
});
```
O acima irá listar o evento `submit` do formulário. Por padrão, isso recarregaria a página, é por isso que estamos usando a função de evento `event.preventDefault ();`, não queremos que a página seja recarregada!
# Como é a estrutura do URL da chamada de conversão do SBD
A estrutura da URL é a seguinte
```
https://steemconnect.com/sign/convert?owner=USERNAME&requestid=OPERATION ID&amount=QUANTITY%20SBD
```
Como você pode ver, precisamos do nome de usuário, da ID da operação e da quantidade. O ID de operação deve ser único, ou seja, não deve haver outra operação em sua conta com o mesmo ID AO MESMO TEMPO.
Nós vamos obter todos os dados necessários com este código
```
let username = document.querySelector('#SteemAccount').value;
let quantity = parseFloat(document.querySelector('#SbdAmount').value);
let opId = username+quantity;
```
A primeira linha seleciona o HTML com o ID SteemAccount, o mesmo com o elemento SbdAmount, mas este últo faz o parse dele para float
Então, para o ID exclusivo, você pode usar algum gerador de hash chique e mais complxo! Mas eu não acho que você vai fazer milhares de transações, então eu pensei que criar uma string com o nome de usuário concatenado com o valor sbd deveria ser suficiente.
```
let url = `https://steemconnect.com/sign/convert?owner=${username}&requestid=${opId}&amount=${quantity}%20SBD`;
```
# Criando um elemento shadow no HTML
De volta ao código html muito brevemente, na parte inferior do código logo acima da tag body de fechamento, adicione uma tag âncora vazia com um ID e um atributo href, para que possamos usar a manipulação DOM para preenchê-lo com o link.
# Fazendo o link aparecer depois que o usuário clicar no botão.
A última parte é manipular o documento HTML para fazer o link aparecer.
```
// makes the shadow anchor tag link to the generated url
document.querySelector('#linkToConversor').href = url;
// inserts text so it can appear
document.querySelector('#linkToConversor').innerHTML = "Click here to go to steemconnect";
```
# Usando o app
Agora, se você quiser converter seu SBD em Steem, você só precisa preencher seu nome de usuário e quantos SBD você deseja converter.
Tenha cuidado, pois da mesma forma que você pode ganhar dinheiro se o Steem cair e o SBD cair, o cenário oposto também pode fazer você perder dinheiro! E MUITO!
@timcliff tem uma excelente explicação (em inglês) sobre como isso funciona e você pode ler mais sobre aqui
https://steemit.com/sbd/@timcliff/how-to-convert-sbd-into-steem-using-steemconnect
Agora vamos usar um truque de JavaScript para colocar as variáveis na string de URL
#### Currículo
- [Tutorial De Como Programar SteemConnect Dsteem e API Steem Para JavaScript Parte 1](https://steemit.com/pt/@igormuba/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
](https://steemit.com/utopian-io/@igormuba/parte-2-tutorial-sobre-steemconnect-js-dsteem-e-steem-api-para-javascript-pt2)
- [(Parte 3)Tutorial Sobre SteemConnect JS Dsteem E Steem API Para JavaScript pt3](https://steemit.com/pt/@igormuba/parte-3tutorial-sobre-steemconnect-js-dsteem-e-steem-api-para-javascript-pt3)
- [(Parte 4)Tutorial Sobre SteemConnect JS Criando Um Novo Post Usando @steemconnect pt4](https://steemit.com/pt/@igormuba/parte-4-tutorial-sobre-steemconnect-js-criando-um-novo-post-usando-steemconnect-pt4)
- [(Parte 5)Tutorial Sobre Steem/SteemConnect JS Recuperar Informações Do Último Post E Postar Comentário pt5](https://steemit.com/pt/@igormuba/parte-5-tutorial-sobre-steem-steemconnect-js-recuperar-informacoes-do-ultimo-post-e-postar-comentario-pt5)
#### Trabalho feito
index.html
https://github.com/igormuba/SBDConversion/blob/master/index.html
app.js
https://github.com/igormuba/SBDConversion/blob/master/js/app.js
<h1><b>Você sabia que eu rodo um servidor Witness (testemunha) da blockchain da Steem?</b></h1>
Para votar em mim apenas clique nesse link para votar utilizando a plataforma segura e nativa do SteemConnect
https://steemconnect.com/sign/account-witness-vote?witness=igormuba&approve=1
Ou:
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.
hiveblocks