One place for hosting & domains

      Criar

      Como criar um efeito de rolagem parallax com CSS puro no Chrome


      Introdução

      O CSS moderno é uma ferramenta poderosa que pode ser usada para criar muitas funcionalidades avançadas de interface de usuário (UI). No passado, essas funcionalidades dependiam de bibliotecas de JavaScript.

      Neste guia, você irá configurar algumas linhas de CSS para criar um efeito de rolagem parallax em uma página Web. Serão usadas imagens de placekitten.com como imagens de fundo de espaço reservado.

      Assim que completar o tutorial, você terá uma página Web com um efeito rolagem parallax de CSS puro.

      Aviso: este artigo usa propriedades de CSS experimentais que não funcionam em todos os navegadores. Este projeto foi testado e funciona no Chrome. Essa técnica não funciona bem no Firefox, Safari e iOS devido a algumas otimizações desses navegadores.

      Passo 1 — Criando um novo projeto

      Neste passo, use a linha de comando para criar uma nova pasta de projeto e arquivos. Para iniciar, abra seu terminal e crie uma nova pasta de projeto.

      Digite o comando a seguir para criar a pasta do projeto:

      Neste caso, foi dado o nome css-parallax à pasta. Agora, entre na pasta css-parallax:

      Em seguida, crie um arquivo index.html em sua pasta css-parallax com o comando nano:

      Todo o HTML para o projeto será colocado neste arquivo.

      No próximo passo, você irá iniciar a criação da estrutura da página.

      Passo 2 — Configurando a estrutura do aplicativo

      Neste passo, será adicionado o HTML necessário para criar a estrutura do projeto.

      Dentro do seu arquivo index.html, adicione o seguinte código:

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Esta é a estrutura básica da maioria das páginas que usam o HTML.

      Adicione o código a seguir dentro da etiqueta <body>:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Esse código cria três seções diferentes. Duas terão uma imagem de fundo, e uma terá um fundo simples estático.

      Nos próximos passos, os estilos para cada seção serão adicionados usando as classes que você adicionou no HTML.

      Passo 3 — Criando um arquivo CSS e adicionando o CSS inicial

      Neste passo, você irá criar um arquivo CSS. Em seguida, irá adicionar o CSS inicial necessário para estilizar o site e criar o efeito parallax.

      Primeiro, crie um arquivo style.css em sua pasta css-parallax com o comando nano:

      É aqui que você irá colocar todo o CSS necessário para criar o efeito de rolagem parallax.

      Em seguida, comece pela classe .wrapper. Dentro do seu arquivo styles.css, adicione o seguinte código:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      A classe .wrapper define a perspectiva e as propriedades de rolagem para toda a página.

      A altura do wrapper precisa ser definida como um valor fixo para que o efeito funcione. Utilize a unidade de visor vh definida em 100 para obter a altura completa do visor da tela.

      Ao escalar as imagens, elas irão adicionar uma barra de rolagem horizontal à tela. Desabilite isso adicionando overflow-x: hidden;. A propriedade perspective simula a distância do visor até os pseudoelementos que você irá criar e transformar mais adiante no CSS.

      No próximo passo, você irá adicionar mais CSS para estilizar sua página.

      Passo 4 — Adicionando estilos para a classe .section

      Neste passo, você irá adicionar estilos à classe .section.

      Dentro do seu arquivo styles.css, adicione o código a seguir abaixo da classe wrapper:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      A classe .section define as propriedades de tamanho, exibição e texto para as seções principais.

      Defina uma posição de relative para que o filho, .parallax::after , possa estar absolutamente posicionado com relação ao elemento pai. section.

      Cada seção possui uma view-height(vh) de 100 para utilizar a altura total do visor. Esse valor pode ser alterado e definido para qualquer altura que você preferir para cada seção.

      Por fim, as propriedades de CSS restantes são usadas para formatar e adicionar estilização ao texto dentro de cada seção. Elas posicionam o texto no centro de cada seção e adicionam a cor white (branco).

      Em seguida, você irá adicionar um pseudoelemento e estilizá-lo para criar o efeito parallax em duas das seções em seu HTML.

      Passo 5 — Adicionando estilos para a classe .parallax

      Neste passo, você irá adicionar estilos à classe .parallax.

      Primeiro, você irá adicionar um pseudoelemento na classe .parallax a ser estilizado.

      Nota: visite os documentos Web do MDN para aprender mais sobre os pseudoelementos do CSS.

      Adicione o código a seguir abaixo da classe .section:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      A classe parallax adiciona um pseudoelemento ::after à imagem de fundo e fornece as transformações necessárias para o efeito parallax.

      O pseudoelemento é o último filho do elemento com a classe .parallax.

      A primeira metade do código exibe e posiciona o pseudoelemento. A propriedade transform move o pseudoelemento para trás, longe da câmera, no z-index e então escala ele de volta para preencher o visor.

      Como o pseudoelemento está mais longe, ele aparenta mover-se mais lentamente.

      No próximo passo, você irá adicionar as imagens de fundo e o estilo de fundo estático.

      Passo 6 — Adicionando imagens e imagem de fundo para cada seção

      Neste passo, você irá adicionar as propriedades de CSS finais para adicionar as imagens de fundo e cor de fundo da seção estática.

      Primeiro, adicione uma cor sólida de fundo à seção .static com o código a seguir, após a classe .parallax::after:

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      A classe .static adiciona uma imagem de fundo à seção estática que não possui uma imagem.

      As duas seções com a classe .parallax também possuem uma classe extra diferente para cada uma. Use as classes .bg1 e .bg2 para adicionar as imagens de fundo de gatinhos.

      Adicione o código a seguir abaixo da classe .static:

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      As classes .bg1, .bg2 adicionam as respectivas imagens de fundo para cada seção.

      As imagens são do site placekitten. É um serviço para obter fotos de gatinhos para usar como espaços reservados.

      Agora que todo o código para o efeito de rolagem parallax foi adicionado, faça o link para seu arquivo styles.css em seu index.html.

      Neste passo, você irá criar o link do seu arquivo styles.css e abrir o projeto em seu navegador para ver o efeito de rolagem parallax.

      Primeiro, adicione o código a seguir à etiqueta <head> no arquivo index.html:

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Agora, abra seu arquivo index.html em seu navegador:

      Gif do efeito de rolagem parallax

      Com isso, você configurou uma página Web funcional com um efeito de rolagem. Confira este repositório do GitHub para ver o código completo.

      Conclusão

      Neste artigo, você configurou um projeto com um arquivo index.html e um styles.css e agora possui uma página Web funcional. Você adicionou a estrutura de sua página Web e criou estilos para as várias seções do site.

      É possível colocar as imagens que você usa ou o efeito parallax mais longe, para que elas se movam mais lentamente. Você terá que alterar a quantidade de pixels nas propriedades perspective e transform. Se não quiser que haja uma imagem de fundo a ser rolada, use background-attachment: fixed; em vez de perspective/translate/scale.



      Source link

      Como criar elementos de arrastar e soltar com JavaScript e HTML genéricos


      Introdução

      Arrastar e soltar é uma interação comum presente em muitas interfaces gráficas de usuário.

      Existem bibliotecas de JavaScript pré-existentes para adicionar um recurso de arrastar e soltar à sua aplicação. No entanto, pode haver situações em que uma biblioteca não está disponível ou introduz uma sobrecarga ou dependência que seu projeto não precisa. Nessas situações, o conhecimento das APIs disponíveis em navegadores Web modernos pode oferecer soluções alternativas para você.

      A API HTML de arrastar e soltar depende do modelo de eventos do DOM para obter informações sobre o que está sendo arrastado ou solto e atualizar esse elemento. Com os manipuladores de eventos JavaScript, você pode transformar qualquer elemento em um item arrastável ou em um item no qual se possa soltar outro elemento.

      Neste tutorial, vamos construir um exemplo de arrastar e soltar usando a API HTML com JavaScript genérico para isso. Desse modo, usaremos também os manipuladores de eventos.

      Pré-requisitos

      Para completar este tutorial, você precisará de:

      • Um navegador Web moderno que suporta a API de arrastar e soltar (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Passo 1 — Criando o projeto e a marcação inicial

      Nosso projeto consistirá de um contêiner com dois tipos de elementos filhos:

      • Elementos filhos que você pode arrastar
      • Elementos filhos que podem ter elementos soltos neles

      Primeiro, abra sua janela de terminal e crie um novo diretório de projeto:

      • mkdir drag-and-drop-example

      Em seguida, navegue até esse diretório:

      Em seguida, crie um arquivo index.html nesse diretório:

      Depois disso, adicione o código boilerplate para uma página em HTML:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      E, entre as tags <body>, adicione seu item draggable e sua dropzone (destino para soltar):

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Salve e feche o arquivo. Em seguida, crie um arquivo style.css:

      A seguir, adicione estilos para os elementos em nosso arquivo index.html:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Isso irá adicionar algumas formatações à aplicação. Agora, visualize o index.html no navegador e observe que isso produz uma <div> draggable e uma <div> dropzone.

      Captura de tela das divs draggable e dropzone

      Em seguida, tornaremos a primeira <div> arrastável adicionando o atributo draggable:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Salve e feche o arquivo.

      Por fim, visualize o index.html no navegador novamente. Se clicarmos na <div> draggable e a arrastarmos pela tela, deve haver uma indicação visual de sua movimentação.

      O valor padrão para o atributo draggable é auto. Isso significa que o fato de o elemento ser arrastável será determinado pelo comportamento padrão do seu navegador. Normalmente, isso significa que seleções de texto, imagens e links são arrastáveis sem especificar draggable="true".

      Agora, você tem um arquivo HTML com um elemento arrastável. Vamos prosseguir adicionando manipuladores onevent.

      Atualmente, se liberarmos o mouse enquanto arrastamos o elemento arrastável, nada acontece. Para disparar uma ação ao arrastar ou soltar nos elementos DOM, vamos precisar utilizar a API de arrastar e soltar:

      • ondragstart: este manipulador de eventos será anexado ao nosso elemento draggable e será disparado quando um evento dragstart ocorrer.
      • ondragover: este manipulador de eventos será anexado ao nosso elemento dropzone e será disparado quando um evento dragover ocorrer.
      • ondrop: este manipulador de eventos será anexado ao nosso elemento dropzone e será disparado quando um evento drop ocorrer.

      Nota: existem oito manipuladores de eventos no total: ondrag, ondragend, ondragenter, ondragexit, ondragleave ondragover, ondragstart e ondrop. Para nosso exemplo, não vamos precisar de todos eles.

      Primeiro, vamos fazer referência a um novo arquivo script.js em nosso index.html:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Em seguida, crie um novo arquivo script.js:

      O objeto DataTransfer irá manter o controle das informações relacionadas ao arrasto atual. Para atualizar nosso elemento em arrastar e soltar, precisamos acessar diretamente o objeto DataTransfer. Para fazer isso, selecione a propriedade dataTransfer do element DragEvent do DOM.

      Nota: o objeto DataTransfer pode monitorar tecnicamente informações para vários elementos sendo arrastados ao mesmo tempo. Para o nosso exemplo, vamos focar em arrastar um elemento.

      O método setData do objeto dataTransfer pode ser usado para definir as informações de estado de arrastar para seu elemento atualmente arrastado. Ele recebe dois parâmetros:

      • uma string que declara o formato do segundo parâmetro
      • os dados reais sendo transferidos

      Nosso objetivo é mover o elemento draggable para um novo elemento pai. Precisamos ser capazes de selecionar o elemento draggable com uma id única. Podemos definir a id do elemento arrastado com o método setData para que ela possa ser usada mais tarde.

      Vamos revisitar nosso arquivo script.js e criar uma nova função para usar setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Nota: o Internet Explorer 9 a 11 tem problemas com o uso de 'text/plain'. O formato precisa ser 'text' para esse navegador.

      Para atualizar o estilo CSS do item arrastado, vamos acessar seus estilos usando o evento DOM novamente e definir quaisquer estilos que quisermos para o currentTarget.

      Vamos adicionar à nossa função e alterar o backgroundColor para amarelo:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Nota: quaisquer estilos que você alterar precisarão ser atualizados manualmente novamente ao soltar, caso você queira estilos somente de arrastar. Se você mudar alguma coisa quando começar a arrastar, o elemento arrastado irá manter esse novo estilo a menos que você o altere novamente.

      Agora, temos nossa função JavaScript para quando começar a arrastar.

      Adicionaremos ondragstart ao elemento draggable em index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Visualize o index.html em seu navegador. Se você tentar arrastar seu item agora, o estilo declarado em nossa função será aplicado:

      Gif animado mostrando um elemento sendo arrastado, mas não sendo solto

      No entanto, nada acontecerá quando você liberar seu clique.

      O próximo manipulador de eventos disparado nesta sequência é ondragover.

      O comportamento padrão de soltar para certos elementos DOM como <div>s em navegadores normalmente não aceita soltar. Esse comportamento irá interceptar o comportamento que estamos tentando implementar. Para garantir que obtemos o comportamento de soltar desejado, iremos aplicar preventDefault.

      Vamos revisitar nosso arquivo script.js e criar uma nova função para usar preventDefault. Adicione esse código ao final do arquivo:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Agora, adicionaremos ondragover ao nosso elemento dropzone em index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      Neste ponto, ainda não escrevemos o código para lidar com a soltura real. O manipulador de eventos final acionado nesta sequência é ondrop.

      Vamos revisitar nosso arquivo script.js e criar uma nova função.

      Podemos fazer referência aos dados que salvamos anteriormente com o método setData do objeto dataTransfer. Usaremos o método getData do objeto dataTransfer. O dado que definimos foi a id. Assim, isso é o que será retornado a nós:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Selecione nosso elemento draggable com a id que recuperamos:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Selecione nosso elemento dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Acrescente nosso elemento draggable ao menu dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Reinicie nosso objeto dataTransfer:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Agora, adicionaremos ondrop ao nosso elemento dropzone em index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Feito isso, temos um recurso de arrastar e soltar completo. Visualize o index.html em seu navegador e arraste o elemento draggable para a dropzone.

      Gif animado mostrando um elemento sendo arrastado e solto em um alvo de soltar

      Nosso exemplo trata do cenário de um único item arrastável e um único alvo de soltar. Você pode ter vários itens arrastáveis, vários alvos de soltar e personalizá-los com todos os outros manipuladores de eventos da API de arrastar e soltar.

      Aqui está mais um exemplo de como usar essa API: uma lista de tarefas com tarefas arrastáveis que você pode mover de uma coluna "To-do" para uma coluna "Done".

      Gif animado mostrando várias tarefas sendo arrastadas e soltas em uma coluna Done

      Para criar sua própria lista de tarefas, adicione mais elementos arrastáveis com ids únicas ao index.html:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Visualize o index.html em seu navegador e arraste os itens da coluna To-do para a coluna Done. Você criou uma aplicação de lista de tarefas e testou a funcionalidade.

      Conclusão

      Neste artigo, você criou uma aplicação de lista de tarefas para explorar a funcionalidade de arrastar e soltar que está disponível nos navegadores Web modernos.

      A API de arrastar e soltar fornece várias opções para personalizar suas ações além de arrastar e soltar. Por exemplo, você pode atualizar o estilo CSS de seus itens arrastados. Além disso, em vez de mover o item, você pode optar por copiar seu item arrastável para que ele seja replicado ao soltar.

      Tenha em mente que, embora muitos navegadores Web suportem essa tecnologia, pode ser que você não possa confiar nela se seu alvo for composto de dispositivos que não suportam essa funcionalidade.

      Para aprender mais sobre tudo o que você pode soltar com a API de arrastar e soltar, confira a documentação da MDN nela.



      Source link

      Como criar um bot no Discord com o Node.js


      O autor selecionou o Free and Open Source Fund para receber uma doação como parte do programa Write for DOnations.

      Introdução

      O Discord é um aplicativo de chat que permite a milhões de usuários em todo o mundo enviar mensagens e bate-papo de voz online em comunidades chamadas guilds ou servidores. O Discord também fornece uma extensa API que os desenvolvedores podem usar para criar poderosos bots no Discord. Os bots podem realizar várias ações, como enviar mensagens para servidores, enviar mensagens diretas a usuários, moderar servidores e reproduzir áudio em conversas de voz. Isso permite que desenvolvedores criem robôs poderosos que incluem recursos avançados e complexos, como ferramentas de moderação ou até mesmo jogos. Por exemplo, o bot utilitário Dyno serve milhões de guilds e contém recursos úteis, como proteção contra spam, um reprodutor de música e outras funções utilitárias. Aprender como criar bots no Discord lhe permite implementar muitas possibilidades, com as quais milhares de pessoas poderiam interagir todos os dias.

      Neste tutorial, você irá criar um bot Discord a partir do zero, usando o Node.js e a biblioteca Discord.js, que permite aos usuários interagir diretamente com a API do Discord. Você irá configurar um perfil para um bot do Discord, obter tokens de autenticação para o bot, e programá-lo com a capacidade de processar comandos, com argumentos, dos usuários.

      Pré-requisitos

      Antes de começar, você precisará do seguinte:

      Passo 1 — Configurando um bot Discord

      Neste passo você usará a GUI de desenvolvedores do Discord para configurar um bot Discord e obter o token do bot, que você passará para o seu programa.

      Para registrar um bot na plataforma Discord, use o painel da aplicação Discord. Aqui os desenvolvedores podem criar aplicações Discord, incluindo bots Discord.

      Image of the Discord application dashboard after first visiting https://discord.com/developers/applications

      Para começar, clique em New Application. O Discord vai lhe pedir que digite um nome para a sua nova aplicação. Em seguida, clique em Create para criar a aplicação.

      Image of the prompt to create an application, with

      Nota: o nome para sua aplicação é independente do nome do bot, e o bot não precisa ter o mesmo nome que a aplicação.

      Agora, abra seu painel de aplicação. Para adicionar um bot à aplicação, navegue até a guia Bot na barra de navegação à esquerda.

      Image of the bot tab of the application dashboard

      Clique no botão Add Bot para adicionar um bot à aplicação. Clique no botão Yes, do it! quando ele lhe pedir confirmação. Você estará então em um painel contendo detalhes do nome do seu bot, token de autenticação e foto do perfil.

      Dashboard containing details of your bot

      Você pode modificar o nome do seu bot ou a imagem do perfil aqui no painel. Você também precisa copiar o token de autenticação do bot, clicando em Click to Reveal Token e copiando o token que aparece.

      Atenção: nunca compartilhe ou faça o upload do seu token do bot, pois ele permite que alguém faça login no seu bot.

      Agora, você precisa criar um convite que lhe permita adicionar as guilds do bot Discord onde você pode testar o bot. Primeiro, navegue até a guia OAuth2 do painel da aplicação. Para criar um convite, desça e selecione bot abaixo de scopes Você também deve definir permissões para controlar quais ações o seu bot pode realizar nas guilds. Para os propósitos deste tutorial, selecione Administrator, que dará ao seu bot permissão para realizar quase todas as ações nas guilds. Copie o link com o botão Copy.

      OAuth2 tab, with scope set to

      Em seguida, adicione o bot a um servidor. Siga o link do convite que você acabou de criar. Você pode adicionar o bot a qualquer servidor que você possua, ou que tenha permissões de administrador, a partir do menu suspenso.

      Page from following the invite link, allowing users to add the bot to servers

      Agora, clique em Continue. Certifique-se de que a caixa de seleção ao lado de Administrator esteja assinalada — isso concederá ao bot permissões de administrador. Em seguida, clique em Authorize. O Discord irá lhe pedir que resolva um CAPTCHA antes que o bot se junte ao servidor. Agora, você terá o bot Discord na lista de membros no servidor que você adicionou o bot, abaixo de offline.

      Members list of a Discord server with the newly created bot under the

      Você criou com sucesso um bot Discord e o adicionou a um servidor. Em seguida, você irá escrever um programa para fazer login no bot.

      Passo 2 — Criando o seu projeto

      Neste passo, você irá configurar o ambiente de codificação básico onde você irá criar seu bot e fazer login nele programaticamente.

      Primeiro, você precisa configurar uma pasta de projeto e os arquivos de projeto necessários para o bot.

      Crie sua pasta de projeto:

      Vá para a pasta do projeto que você acabou de criar:

      Em seguida, use seu editor de texto para criar um arquivo chamado config.json para armazenar o token de autenticação do seu bot:

      Em seguida, adicione o seguinte código ao arquivo de configuração, substituindo o texto destacado pelo token de autenticação do seu bot:

      config.json

      {
          "BOT_TOKEN": "YOUR BOT TOKEN"
      }
      

      Salve e saia do arquivo.

      Em seguida, você irá criar um arquivo package.json, que irá armazenar detalhes do seu projeto e informações sobre as dependências que você usará para o projeto. Você irá criar um arquivo package.json executando o seguinte comando npm:

      O npm irá lhe perguntar vários detalhes sobre seu projeto. Se você quiser orientação sobre como preencher esses prompts, pode ler sobre eles em How To Use Node.js Modules with npm and package.json.

      Agora, você irá instalar o pacote discord.js que você usará para interagir com a API do Discord. Você pode instalar discord.js através do npm com o seguinte comando:

      Agora que você definiu o arquivo de configuração e instalou a dependência necessária, você está pronto para começar a criar seu bot. Em uma aplicação no mundo real, um bot grande seria dividido em muitos arquivos, mas para os fins deste tutorial, o código para o bot estará em um único arquivo.

      Primeiro, crie um arquivo chamado index.js na pasta discord-bot para o código:

      Comece a codificação do bot exigindo a dependência discord.js e o arquivo de configuração com o token do bot:

      index.js

      const Discord = require("discord.js");
      const config = require("./config.json");
      

      Após isso, adicione as duas linhas de código seguintes:

      index.js

      ...
      const client = new Discord.Client();
      
      client.login(config.BOT_TOKEN);
      

      Salve e saia do seu arquivo.

      A primeira linha de código cria um novo Discord.Client e o atribui à constante client. Este cliente, em parte, é como você irá interagir com a API do Discord e como o Discord irá notificá-lo de eventos como novas mensagens. O client e, na verdade, representa o bot Discord.

      A segunda linha de código usa o método login no client para fazer login no bot Discord que você criou, usando o token no arquivo config.json como uma senha. O token permite que a API do Discord saiba a qual bot o programa se destina e que você está autenticado para usar o bot.

      Agora, execute o arquivo index.js usando o Node:

      O status do seu bot irá se alterar para online no servidor Discord ao qual você o adicionou.

      Image of the bot online

      Você criou com sucesso um ambiente de codificação e criou o código básico para fazer login em um bot Discord. No próximo passo, você irá lidar com comandos de usuário e fazer com que seu bot execute ações, como o envio de mensagens.

      Neste passo, você irá criar um bot que possa lidar com comandos de usuário. Você irá implementar seu primeiro comando ping, que irá responder com "pong" e o tempo necessário para responder ao comando.

      Primeiro, você precisa detectar e receber quaisquer mensagens que os usuários enviam para que você possa processar quaisquer comandos. Usando o método on no cliente Discord, o Discord irá lhe enviar uma notificação sobre novos eventos. O método on leva dois argumentos: o nome de um evento para esperar e uma função a executar cada vez que esse evento ocorre. Com este método, você pode esperar pelo evento message — isso ocorrerá cada vez que uma mensagem for enviada a uma guild onde o bot tiver a permissão para visualizar mensagens. Portanto, vamos criar uma função que será executada cada vez que uma mensagem for enviada, para processar comandos.

      Primeiro abra seu arquivo:

      Adicione o código a seguir ao seu arquivo:

      index.js

      ...
      const client = new Discord.Client();
      
      
      client.on("message", function(message) { 
                                               
      });                                      
      
      client.login(config.BOT_TOKEN);
      

      Essa função, que executa no evento message, toma message como um parâmetro. message terá o valor de uma instância Discord.js message, que contém informações sobre a mensagem enviada e os métodos para ajudar o bot a responder.

      Agora, adicione a seguinte linha de código à sua função de tratamento de comandos:

      index.js

      ...
      client.on("message", function(message) {
        if (message.author.bot) return;
      });
      ...
      

      Essa linha verifica se o autor da mensagem é um bot e, se assim for, para de processar o comando. Isso é importante, pois geralmente você não quer processar ou responder a mensagens de bots. Os bots geralmente não precisam ou não querem usar nosso bot, portanto, ignorar suas mensagens economiza energia de processamento e ajuda a evitar respostas acidentais.

      Agora, você irá escrever um handler de comando. Para realizar isso, é bom entender o formato usual de um comando Discord. Normalmente, a estrutura de um comando Discord contém três partes na seguinte ordem: um prefixo, um nome de comando e, às vezes, argumentos de comando.

      An image of a typical Discord command reading

      • Prefix: o prefixo pode ser qualquer coisa, mas normalmente é um pedaço de pontuação ou frase abstrata que normalmente não estaria no início de uma mensagem. Isso significa que quando você incluir o prefixo no início da mensagem, o bot irá saber que a intenção para este comando é para um bot processá-lo.

      • Command name: o nome do comando que o usuário quer usar. Isso significa que o bot pode suportar vários comandos com diferentes funcionalidades e permitir aos usuários escolher entre eles fornecendo um nome de comando diferente.

      • Arguments: às vezes, se o comando exigir ou usar informações extras do usuário, o usuário pode fornecer argumentos após o nome do comando, com cada argumento separado por um espaço.

      Nota: não há nenhuma estrutura de comando obrigatória, e os bots podem processar comandos como eles quiserem, mas a estrutura aqui apresentada é uma estrutura eficiente que a grande maioria dos bots usam.

      Para começar a criar um parser de comando que lida com este formato, adicione as seguintes linhas de código à função de tratamento de mensagens:

      index.js

      ...
      const prefix = "!";
      
      client.on("message", function(message) {
        if (message.author.bot) return;
        if (!message.content.startsWith(prefix)) return;
      });
      ...
      

      Você adiciona a primeira linha de código para atribuir o valor "!" à constante prefix, que você usará como o prefixo do bot.

      A segunda linha de código que você adiciona , verifica se o conteúdo da mensagem que o bot está processando começa com o prefixo que você definiu e, se não começar, interrompe o processamento da mensagem.

      Agora, converta o resto da mensagem em um nome de comando e todos os argumentos da mensagem. Adicione as linhas destacadas a seguir:

      index.js

      ...
      client.on("message", function(message) {
        if (message.author.bot) return;
        if (!message.content.startsWith(prefix)) return;
      
        const commandBody = message.content.slice(prefix.length);
        const args = commandBody.split(' ');
        const command = args.shift().toLowerCase();
      });
      ...
      

      Você usa a primeira linha aqui para remover o prefixo do conteúdo da mensagem e atribuir o resultado à constante commandBody. Isso é necessário, uma vez que você não quer incluir o prefixo no nome de comando no qual você fez a varredura.

      A segunda linha pega a mensagem com o prefixo removido e usa o método split nela, com um espaço como separador. Isso a divide em um array de sub-strings, fazendo uma divisão onde quer que haja um espaço. Isso resulta em um array contendo o nome do comando e, se incluído na mensagem, quaisquer argumentos. Você atribui este array à constante args.

      A terceira linha remove o primeiro elemento do array args (que será o nome de comando fornecido), o converte em minúsculas e, em seguida, o atribui à constante command. Isso lhe permite isolar o nome do comando e deixar apenas argumentos no array. Você também usa o método toLowerCase, pois os comandos normalmente não diferenciam maiúsculas de minúsculas em bots do Discord.

      Você concluiu a construção de um parser de comando, implementando um prefixo necessário e obtendo o nome do comando e quaisquer argumentos das mensagens. Agora, você irá implementar e criar o código para os comandos específicos.

      Adicione o código a seguir para iniciar a implementação do comando ping:

      index.js

      ...
        const args = commandBody.split(' ');
        const command = args.shift().toLowerCase();
      
        if (command === "ping") {
                                 
        }                        
      });
      ...
      

      Esta declaração if verifica se o nome de comando que você analisou (atribuído à constante command) corresponde ao "ping". Se sim, isso indica que o usuário quer usar o comando "ping". Você irá aninhar o código para o comando específico dentro do bloco da declaração if. Você irá repetir este padrão para outros comandos que você deseja implementar.

      Agora, você pode implementar o código para o comando "ping":

      index.js

      ...
        if (command === "ping") {
          const timeTaken = Date.now() - message.createdTimestamp;
          message.reply(`Pong! This message had a latency of ${timeTaken}ms.`);
        }
      ...
      

      Salve e saia do seu arquivo.

      Você adiciona o bloco do comando "ping" que calcula a diferença entre o tempo atual — encontrado usando o método now no objeto Date — e o timestamp de quando a mensagem foi criada em milisegundos. Isso calcula quanto tempo a mensagem levou para processar o "ping" do bot.

      A segunda linha responde ao comando do usuário usando o método reply na constante message. O método reply faz um ping (que notifica o usuário e destaca a mensagem para o usuário especificado) no usuário que invocou o comando, seguido pelo conteúdo fornecido como o primeiro argumento para o método. Você fornece um modelo literal contendo uma mensagem e o ping calculado como a resposta que o método reply usará.

      Isso conclui a implementação do comando "ping".

      Execute seu bot usando o comando a seguir (na mesma pasta que index.js):

      Agora, use o comando "! ping"“ em qualquer canal onde o bot possa visualizar e enviar mensagens, resultando em uma resposta.

      Image of bot replying in Discord to

      Você criou com sucesso um bot que pode lidar com comandos de usuário e implementou seu primeiro comando. No próximo passo, você irá continuar desenvolvendo seu bot implementando um comando sum.

      Passo 4 — Implementando o comando Sum

      Agora, você irá estender seu programa implementando o comando "! sum". O comando irá tomar qualquer número de argumentos e adicioná-los juntos, antes de retornar a soma de todos os argumentos ao usuário.

      Se seu bot Discord ainda estiver em execução, você pode parar seu processo com CTRL + C.

      Abra seu arquivo index.js novamente:

      Para começar a implementar o comando "! sum", você usará um bloco else-if. Depois de verificar o nome do comando ping, ele irá verificar se o nome do comando é igual a "sum". Usamos um bloco else-if já que apenas um comando irá processar de cada vez, então se o programa corresponder ao nome de comando "ping", ele não precisa verificar o comando "sum". Adicione as seguintes linhas destacadas ao seu arquivo:

      index.js

      ...
        if (command === "ping") {
          const timeTaken = Date.now() - message.createdTimestamp;
          message.reply(`Ping! This message had a latency of ${timeTaken}ms.`);
        }
      
        else if (command === "sum") {
                                     
        }                            
      });
      ...
      

      Você pode começar a implementar o código para o comando "sum". O código para o comando "sum" irá entrar dentro do bloco else-if que você acabou de criar. Agora, adicione o código a seguir:

      index.js

      ...
        else if (command === "sum") {
          const numArgs = args.map(x => parseFloat(x));
          const sum = numArgs.reduce((counter, x) => counter += x);
          message.reply(`The sum of all the arguments you provided is ${sum}!`);
        }
      ...
      

      Você usa o método map na lista argumentos para criar uma nova lista usando a função parseFloat em cada item no array args. Isso cria um novo array (atribuído à constante numArgs) no qual todos os itens são números em vez de strings. Isso significa que mais tarde você pode encontrar com sucesso a soma dos números adicionando-os.

      A segunda linha usa o método reduce na constante numArgs, fornecendo uma função que totaliza todos os elementos na lista. Você atribui a soma de todos os elementos em numArgs à constante. sum.

      Em seguida, você usa o método reply no objeto message para responder ao comando do usuário com modelo literal, que contém a soma de todos os argumentos que o usuário envia para o bot.

      Isso conclui a implementação do comando "sum". Agora, execute o bot usando o comando a seguir (na mesma pasta que index.js):

      Agora, você pode usar o comando "! sum"” em qualquer canal em que o bot possa visualizar e enviar mensagem.

      Image of bot replying

      A seguir está uma versão finalizada do script index.js do bot:

      index.js

      const Discord = require("discord.js");
      const config = require("./config.json");
      
      const client = new Discord.Client();
      
      const prefix = "!";
      
      client.on("message", function(message) {
        if (message.author.bot) return;
        if (!message.content.startsWith(prefix)) return;
      
        const commandBody = message.content.slice(prefix.length);
        const args = commandBody.split(' ');
        const command = args.shift().toLowerCase();
      
        if (command === "ping") {
          const timeTaken = Date.now() - message.createdTimestamp;
          message.reply(`Pong! This message had a latency of ${timeTaken}ms.`);
        }
      
        else if (command === "sum") {
          const numArgs = args.map(x => parseFloat(x));
          const sum = numArgs.reduce((counter, x) => counter += x);
          message.reply(`The sum of all the arguments you provided is ${sum}!`);
        }
      });
      
      client.login(config.BOT_TOKEN);
      

      Neste passo, você melhorou ainda mais seu bot Discord implementando o comando sum.

      Conclusão

      Você implementou com sucesso um bot Discord que pode lidar com vários comandos de usuário e argumentos de comando diferentes. Se você quiser expandir seu bot, você pode possivelmente implementar mais comandos ou experimentar mais partes da API do Discord para criar um bot Discord poderoso. Você pode revisar a documentação do Discord.js ou a documentação da API do Discord para expandir seu conhecimento da API Discord.

      Ao criar bots no Discord, você deve sempre ter em mente os termos de serviço da API do Discord, que descreve como os desenvolvedores devem utilizar a API. Você também pode ler este conjunto de diretrizes sobre como implementar melhor um bot Discord, e fornece dicas sobre como projetar bots no Discord. Se você quiser aprender mais sobre o Node.js confira nossa série How To Code in Node.js.



      Source link