One place for hosting & domains

      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

      Como criar um certificado SSL auto-assinado para o Apache no Ubuntu 20.04


      Introdução

      O TLS, ou “segurança de camada de transporte” — e seu antecessor, o SSL — são protocolos usados para envolver o tráfego normal em um pacote protegido, criptografado. Ao usar esta tecnologia, os servidores podem enviar informações com segurança aos seus clientes sem que suas mensagens sejam interceptadas ou lidas por terceiros.

      Neste guia, mostraremos como criar e usar um certificado SSL auto-assinado com o servidor Web Apache no Ubuntu 20.04.

      Nota: um certificado auto-assinado irá criptografar a comunicação entre seu servidor e qualquer cliente. No entanto, uma vez que ele não é assinado por nenhuma das autoridades de certificados confiáveis incluídas com navegadores Web e sistemas operacionais, os usuários não podem usar o certificado para validar a identidade do seu servidor automaticamente. Como resultado, seus usuários irão ver um erro de segurança ao visitar seu site.

      Devido a esta limitação, certificados auto-assinados não são adequados para um ambiente de produção que atenda ao público. Eles são normalmente usados para testes, ou para proteger serviços não críticos usados por um único usuário ou um pequeno grupo de usuários que possam estabelecer confiança na validade do certificado através de canais de comunicação alternativos.

      Para uma solução de certificado mais pronta para produção, confira o Let’s Encrypt, uma autoridade certificadora gratuita. Você pode aprender como baixar e configurar um certificado Let’s Encrypt em nosso tutorial How To Secure Apache with Let’s Encrypt on Ubuntu 20.04.

      Pré-requisitos

      Antes de iniciar este tutorial, você precisará do seguinte:

      • Acesso a um servidor Ubuntu 20.04 com um usuário não-root, habilitado no sudo. Nosso guia Initial Server Setup with Ubuntu 20.04 pode lhe mostrar como criar esta conta.
      • Você também precisará ter o Apache instalado. Você pode instalar o Apache usando o apt. Primeiro, atualize o índice de pacotes local para refletir as últimas alterações upstream:

      Então, instale o pacote apache2:

      E, finalmente, se você tiver um firewall ufw configurado, abra as portas http e https:

      • sudo ufw allow "Apache Full"

      Depois de completar estes passos, lembre-se de fazer o login com um usuário não-root para seguir com o tutorial.

      Passo 1 — Habilitando o mod_ssl

      Antes de usarmos qualquer certificado de SSL, é necessário, primeiramente, habilitar o mod_ssl, um módulo do Apache compatível com criptografia SSL.

      Habilite o mod_ssl com o comando a2enmod:

      Reinicie o Apache para ativar o módulo:

      • sudo systemctl restart apache2

      O módulo mod_ssl agora está habilitado e pronto para uso.

      Passo 2 — Criando o certificado SSL

      Agora que o Apache está pronto para usar criptografia, podemos passar para a geração de um novo certificado SSL. O certificado irá armazenar algumas informações básicas sobre seu site, e será acompanhado por um arquivo de chave que permite ao servidor lidar com segurança com dados criptografados.

      Podemos criar a chave SSL e os arquivos de certificado com o comando openssl:

      • sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/ssl/private/apache-selfsigned.key -out /etc/ssl/certs/apache-selfsigned.crt

      Depois de inserir o comando, você será levado a um prompt onde você pode inserir informações sobre seu site. Antes de passarmos por isso, vamos ver o que está acontecendo no comando que estamos emitindo:

      • openssl: esta é a ferramenta de linha de comando para criação e gerenciamento de certificados OpenSSL, chaves e outros arquivos.
      • req -x509: isto especifica que queremos usar o gerenciamento X.509 de solicitação de assinatura de certificado (CSR). O X.509 é um padrão de infraestrutura de chave pública ao qual o SSL e o TLS aderem para gerenciamento de chaves e certificados.
      • -nodes: isso diz ao OpenSSL para pular a opção de proteger nosso certificado com uma frase secreta. Precisamos que o Apache consiga ler o arquivo, sem a intervenção do usuário, quando o servidor for iniciado. Uma frase secreta impediria que isso acontecesse porque teríamos que digitá-la após cada reinício.
      • -days 365: esta opção define o período de tempo em que o certificado será considerado válido. Aqui, nós configuramos ela para um ano. Muitos navegadores modernos irão rejeitar quaisquer certificados que sejam válidos por mais de um ano.
      • -newkey rsa:2048: isso especifica que queremos gerar um novo certificado e uma nova chave ao mesmo tempo. Não criamos a chave necessária para assinar o certificado em um passo anterior, então precisamos criá-la junto com o certificado. A parte rsa:2048 diz a ele para criar uma chave RSA com 2048 bits.
      • -keyout: esta linha diz ao OpenSSL onde colocar o arquivo de chave privada gerado que estamos criando.
      • -out: isso diz ao OpenSSL onde colocar o certificado que estamos criando.

      Preencha os prompts devidamente. A linha mais importante é aquela que requisita o Common Name. Você precisa digitar o nome do host que usará para acessar o servidor ou o IP público do mesmo. É importante que este campo corresponda ao que você colocar na barra de endereços do seu navegador para acessar o site, pois uma incompatibilidade irá causar mais erros de segurança.

      A lista completa de prompts será algo parecido com isto:

      Country Name (2 letter code) [XX]:US
      State or Province Name (full name) []:Example
      Locality Name (eg, city) [Default City]:Example 
      Organization Name (eg, company) [Default Company Ltd]:Example Inc
      Organizational Unit Name (eg, section) []:Example Dept
      Common Name (eg, your name or your server's hostname) []:your_domain_or_ip
      Email Address []:webmaster@example.com
      

      Ambos os arquivos que você criou serão colocados nos subdiretórios apropriados em /etc/ssl.

      Em seguida, atualizaremos nossa configuração do Apache para usar o novo certificado e chave.

      Passo 3 — Configurando o Apache para usar SSL

      Agora que temos nosso certificado auto-assinado e a chave disponíveis, precisamos atualizar nossa configuração do Apache para usá-los. No Ubuntu, você pode colocar novos arquivos de configuração do Apache (eles devem terminar em .conf) dentro de /etc/apache2/sites-available/ e eles serão carregados da próxima vez que o processo do Apache for recarregado ou reiniciado.

      Para este tutorial, criaremos um novo arquivo de configuração mínima. (Se você já tiver um Apache <Virtualhost> configurado e apenas precisar adicionar SSL a ele, você provavelmente precisará copiar as linhas de configuração que começam com SSL, e mudar a porta do VirtualHost de 80 para 443. Cuidaremos da porta 80 no próximo passo.)

      Abra um novo arquivo no diretório /etc/apache2/sites-available:

      • sudo nano /etc/apache2/sites-available/your_domain_or_ip.conf

      Cole nele a seguinte configuração mínima do VirtualHost:

      /etc/apache2/sites-available/your_domain_or_ip.conf

      <VirtualHost *:443>
         ServerName your_domain_or_ip
         DocumentRoot /var/www/your_domain_or_ip
      
         SSLEngine on
         SSLCertificateFile /etc/ssl/certs/apache-selfsigned.crt
         SSLCertificateKeyFile /etc/ssl/private/apache-selfsigned.key
      </VirtualHost>
      
      

      Certifique-se de atualizar a linha ServerName para o que você pretende endereçar ao seu servidor. Isso pode ser um nome de host, nome de domínio completo, ou um endereço IP. Verifique se o que você escolhe corresponde ao Common Name que você escolheu ao criar o certificado.

      As linhas restantes especificam um diretório DocumentRoot a partir do qual serão apresentados os arquivos e as opções SSL necessárias para apontar o Apache para nosso certificado e chave recém-criados.

      Agora, vamos criar nosso DocumentRoot e colocar um arquivo HTML nele apenas para fins de teste:

      • sudo mkdir /var/www/your_domain_or_ip

      Abra um novo arquivo index.html com seu editor de texto:

      • sudo nano /var/www/your_domain_or_ip/index.html

      Cole o seguinte no arquivo em branco:

      /var/www/your_domain_or_ip/index.html

      <h1>it worked!</h1>
      

      Este não é um arquivo HTML completo, claro, mas os navegadores são flexíveis e isso será suficiente para verificar nossa configuração.

      Salve e feche o arquivo. Em seguida, precisamos habilitar o arquivo de configuração com a ferramenta a2ensite:

      • sudo a2ensite your_domain_or_ip.conf

      Em seguida, vamos testar à procura de erros de configuração:

      • sudo apache2ctl configtest

      Se tudo for bem-sucedido, você receberá um resultado que se parecerá com este:

      Output

      AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. Set the 'ServerName' directive globally to suppress this message Syntax OK

      A primeira linha é apenas uma mensagem informando que a diretiva ServerName não está definida globalmente. Se você quiser se livrar dessa mensagem, você pode definir ServerName como o nome de domínio do seu servidor ou o endereço IP em /etc/apache2/apache2.conf. Isso é opcional, uma vez que a mensagem não causará problemas.

      Se seu resultado tiver Syntax OK nele, seu arquivo de configuração não possui erros de sintaxe. Podemos recarregar com segurança o Apache para implementar nossas alterações:

      • sudo systemctl reload apache2

      Agora, carregue seu site em um navegador, garantindo usar https:// no início.

      Você deve ver um erro. Isso é normal para um certificado auto-assinado! O navegador está lhe alertando que ele não pode verificar a identidade do servidor, pois nosso certificado não é assinado por nenhuma das suas autoridades certificadoras conhecidas. Para fins de teste e uso pessoal, isso está ok. Você deve ser capaz de clicar em avançado ou obter mais informações e optar por prosseguir.

      Depois que fizer isso, o navegador irá carregar it worked! como mensagem.

      Nota: se seu navegador não se conectar ao servidor, certifique-se de que sua conexão não esteja sendo bloqueada por um firewall. Se você estiver usando o ufw, os seguintes comandos abrirão as portas 80 e 443:

      • sudo ufw allow "Apache Full"

      Em seguida, adicionaremos outra seção VirtualHost à nossa configuração para atender requisições HTTP simples e redirecioná-las ao HTTPS.

      Passo 4 — Redirecionando HTTP para HTTPS

      Atualmente, nossa configuração irá responder apenas às requisições HTTPS na porta 443. É uma boa prática também responder na porta 80, mesmo que você queira forçar todo o tráfego a ser criptografado. Vamos configurar um VirtualHost para responder a essas requisições não criptografadas e redirecioná-las para HTTPS.

      Abra o mesmo arquivo de configuração do Apache que iniciamos nos passos anteriores:

      • sudo nano /etc/apache2/sites-available/your_domain_or_ip.conf

      Ao final, crie outro bloco VirtualHost para corresponder às requisições na porta 80. Use a diretiva ServerName para corresponder novamente ao seu nome de domínio ou endereço IP. Em seguida, use Redirect para corresponder a quaisquer requisições e enviá-las para o VirtualHost SSL. Certifique-se de incluir a barra final:

      /etc/apache2/sites-available/your_domain_or_ip.conf

      <VirtualHost *:80>
          ServerName your_domain_or_ip
          Redirect / https://your_domain_or_ip/
      </VirtualHost>
      

      Salve e feche este arquivo quando você tiver terminado, então teste sua sintaxe de configuração novamente e recarregue o Apache:

      • sudo apachectl configtest
      • sudo systemctl reload apache2

      Você pode testar a nova funcionalidade de redirecionar visitando seu site com o http:// simples em frente ao endereço. Você deve ser redirecionado para https:// automaticamente.

      Conclusão

      Agora, você configurou o Apache para atender requisições criptografadas usando um certificado SSL auto-assinado, e para redirecionar requisições HTTP não criptografadas para HTTPS.

      Se você estiver planejando usar SSL para um site público, você deve procurar comprar um nome de domínio e usar uma autoridade certificadora amplamente suportada, como o Let’s Encrypt.

      Para obter mais informações sobre o uso do Let’s Encrypt com o Apache, leia nosso tutorial How To Secure Apache with Let’s Encrypt on Ubuntu 20.04.



      Source link