사이트의 스크린샷을 찍는 디스코드 봇 만드는 방법

다음 게시물에서는 사이트의 스크린샷을 찍어 디스코드 채널에 전달하는 디스코드 봇을 만드는 방법을 배웁니다.

이 예에서는 discord.js를 사용합니다. 봇을 만들고 구성하는 방법을 이미 알고 있다고 가정합니다. 방법을 모르는 경우 단계별로 설명합니다.

You can contact me by telegram if you need to hire a Full Stack developer or if you need a discord bot for your server

discord Appu#9136으로 저에게 연락할 수도 있습니다.

전제 조건



  • Node.js 설치됨
  • Discord 계정
  • 이 필요합니다.

    프로젝트 생성


  • 터미널을 열고 다음을 입력합니다.
  • mkdir discord-screenshot-bot
  • cd discord-screenshot-bot
  • npm init --y
  • 코드 .

  • 종속성


  • 도텐브이
  • discord.js
  • 인형극

  • 종속성을 설치하려면 프로젝트 폴더로 이동하여 터미널을 열고 다음을 입력하십시오.

    npm i dotenv discord.js puppeteer
    


    이제 package.json으로 이동하여 이것을 추가하십시오.

      "scripts": {
        "start": "node ./src index.js"
      },
    


    프로젝트 파일 구조



    discord-스크린샷-봇/
    ├── node_modules/
    ├── 소스/
    │ └── index.js
    ├── .env
    └── 패키지.json

    목차


  • Coding our Bot
  • Take Screenshot Function
  • Send the screenshot to discord
  • Conclusion

  • 1. 봇 코딩하기

    I will assume that you already setup the bot.

    Before start coding let's we need to create a .env file in our project root, then lets add a BOT_TOKEN var and assign it the token we saved earlier in the previous section.

    BOT_TOKEN = paste-the-token-here
    

    Now in our index.js, require the following modules

    const puppeteer = require('puppeteer')
    const path = require('path')
    const Discord = require("discord.js");
    const fs = require('fs');
    
    require("dotenv").config();
    

    Then create a client object from Discord Class using the Client constructor, we need to pass the intents like this.

    const client = new Discord.Client({
      intents: [
        "GUILDS",
        "GUILD_MEMBERS",
        "GUILD_MESSAGES",
        "GUILD_MESSAGE_REACTIONS",
      ],
    });
    

    Now we are going to make our bot online by using the login method and add a event listener, so that when the bot is ready it will pass a message through the console.

    client.on("ready", () => {
      console.log(`Hello my name is ${client.user.tag}!`);
    });
    
    client.login(process.env.BOT_TOKEN);
    

    You should receive a message similar to this one.

    Hello my name is cryptocurrency-bot#0235!
    


    2. 스크린샷 찍기 기능

    In order to take a screenshot of a website we will use puppeteer.

    puppeteer it's a library which will let us control a Chrome, and with this we will be able to perform actions such as scraping, automating, etc.

    if you want to know more about puppeteer, please go here

    함수를 만들어 보겠습니다. 스크린샷을 찍어 이미지 폴더에 저장합니다. 이미지 폴더 경로를 표시해야 하며 폴더가 존재하지 않는 경우 코드에서 생성하도록 해야 합니다.

    .
    .
    .
    const imagesPath = path.join(__dirname, 'images')
    
    if (!fs.existsSync(imagesPath)) {
        fs.mkdirSync(imagesPath);
    }
    .
    .
    .
    


    아래 코드 설명을 교육하고 먼저 브라우저를 시작한 다음 새 페이지를 열고 setViewport 옵션으로 화면 크기를 설정합니다(자세한 내용은 공식documentation에서 확인할 수 있음). 그런 다음 원하는 페이지로 이동합니다. url, 이 경우 내 dev.to 프로필/대시보드 페이지, 그런 다음 스크린샷을 찍고 이미지 폴더에 저장합니다. 이미지가 저장되면 스크린샷이 저장되었다는 콘솔 메시지를 전달하고 마지막으로 브라우저를 닫습니다.

    .
    .
    .
    const takeScreenshot = async () => {
      const browser = await puppeteer.launch()
      const page = await browser.newPage()
    
      await page.setViewport({
        width: 1920,
        height: 1080,
        deviceScaleFactor: 1
      })
    
      await page.goto('https://dev.to/rtagliavia')
      await page.screenshot({ path: `${imagesPath}/dashboard.png` })
    
      if (fs.existsSync(`${imagesPath}/dashboard.png`)) {
        console.log("Screenshot saved");
      }
    
      await browser.close()
    }
    .
    .
    .
    


    3. 디스코드로 스크린샷 보내기

    Now let's send our screenshot to our discord server, so to do this we first need to copy our channel id from our discord server, right click on the channel e.g.(general) and then click Copy Link.



    이제 채널을 가져올 채널 변수를 만듭니다.

    그런 다음 함수를 호출하고 실행될 때까지 기다리십시오. 이를 위해 async/await를 사용한 다음 포함을 만듭니다(이 확인 또는 documentation에 대해 자세히 알고 싶다면). 마지막으로 임베드를 채널로 보냅니다.

    .
    .
    .
    client.on("ready", async () => {
      console.log(`Logged in as ${client.user.tag}!`);
      let channel = client.channels.cache.get('855537249155547199')
    
      await getScreenhot();
      const embed2 = new Discord.MessageEmbed()
        .setTitle("My Screenshot")
        .setImage(`attachment://dashboard.png`)
    
      channel.send({ embeds: [embed2], files: [`${imagesPath}/dashboard.png`] });
    });
    .
    .
    .
    


    4. 결론

    We learned how to make a discord bot that will take screenshots of a website and pass them to the chat using discord.js and puppeteer.

    I really hope you have been able to follow the post without any trouble, otherwise i apologize, please leave me your doubts or comments.

    You can contact me by telegram if you need to hire a Full Stack developer.

    You can clone the repo if you want.

    시간 내 주셔서 감사합니다.

    좋은 웹페이지 즐겨찾기