인형사로 그물을 긁다🎭

인터넷은 정보가 가득한 광활한 공간이다.여기서 귀여운 고양이 동영상부터 과학 연구까지 모든 것을 찾을 수 있다.이 정보는 우리에게 유용할 뿐만 아니라, 우리 사이트와 응용 프로그램에 매우 중요할 수도 있다.
필요한 데이터, Rest API, 공공 데이터베이스, 웹 캡처에 액세스할 수 있는 몇 가지 방법이 있습니다.인형사는 마지막 임무를 완수하는 절호의 도구다.본고에서, 나는 당신이 이 도구를 발견하고, 당신에게 그 기능을 보여주는 것을 돕고 싶습니다.
우리 첫 번째 문제를 한쪽에 놓읍시다.

인형 배우가 뭐예요?

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.

공식 문서가 그렇게 말했어.복잡하지 않아요?간단하게 말하자면, 우리는 코드를 통해 제어되는 보이지 않는 브라우저를 처리하고 있다.

길 좀 가르쳐 줘!

Puppeter NPM 패키지를 설치한 후에는 코드를 작성하여 Puppeter에게 원하는 정보를 표시해야 합니다.
Puppeter의 대다수 방법은 비동기적이기 때문에 비동기 함수나then 방법을 사용해야 합니다.다음 예에 대해 나는 첫 번째를 견지할 것이다.

데이터 좀 얻자!

나는 새로운 것을 배우는 가장 좋은 방법은 연습이라고 생각한다.인형이 손으로 그물을 잡는 예를 들어 분해하자.나는 한 걸음 한 걸음 최선을 다해 설명할 것이다.그러나 만약에 곤경에 빠지거나 특정 방법에 대한 정보를 더 알고 싶다면 공식 홈페이지documentation를 방문해 보세요.
우선 이 사이트에서 인터넷 캡처가 허용되는지 확인해야 한다.이를 위해 사이트에 로봇이 포함돼 있는지 점검한다.txt 파일.만약 없다면, 우리는 갈 수 있다.그렇지 않으면 사이트 소유자가 어떤 제한을 설정했는지 보실 수 있습니다.
본 예에서 우리는 정부English Premier League 사이트에서 몇 가지 데이터를 수집할 것이다. 더욱 정확하게 말하면 이것은 축구 선수와 매 시즌의 총 골 수의 표이다.
다음 코드를 사용하여 미리 정의된 뷰포트를 사용하여 브라우저를 시작합니다.이 사이트를 탐색하고 코드 끝에 모든 구성 요소를 불러올 시간을 남겨 두십시오.

Note: websites may differ according to the client's viewport that's why it's important to predefine it.

const viewport = {'defaultViewport' : { 'width' : 1430, 'height' : 979 }}
const browser = await puppeteer.launch(viewport)
const page = await browser.newPage()
await page.goto('https://www.premierleague.com/stats/top/players/goals')
await page.waitForTimeout(3000)

이제 사이트에서 본 책상을 닦아봅시다.이를 위해, $eval을 사용하여 HTML 요소를 선택기로 사용하는 모든 테이블 구성 요소를 찾은 다음, 선택한 요소마다 innerText를 가져옵니다.

//'tbody tr td' - selector
let tableEls = await page.$$eval('tbody tr td', tds => tds.map(td => {
    return td.innerText
}))

현재 우리는 테이블에서 찾을 수 있는 모든 문자열을 가득 채운 그룹이 있다.우리는 빈 문자열과 불필요한 간격이 있다.우리는 또한 이 그룹을 더 작은 그룹으로 나누어 모든 유저의 데이터를 포함하고, 모든 그룹에서 대상을 만들어서 앞부분이 쉽게 읽고 접근할 수 있도록 해야 한다.

//Modifications
tableEls = tableEls.map(el => el.trim())
tableEls = tableEls.filter(el => el)
tableEls = chunkArray(tableEls, 5)
tableEls = tableEls.map(el => el.slice(1))
//Final Arr To Save
let seasonData = []
//Create an object
tableEls.map(el => {
    let obj = {
        id: nextID,
        name:  el[0],
        team: el[1],
        country: el[2],
        goals: +el[3]
    }
    nextID++
    seasonData.push(obj)
})

// Close the browser at the end of your session
await browser.close()

우리 사진 좀 찍자!

현재 우리는 이미 표에 있는 모든 선수의 데이터를 수집했고, 우리는 모든 선수의 일부 이미지를 사용할 수 있다.현재 우리가 있는 사이트는 우리에게 어떤 사진도 제공하지 않기 때문에 우리는 새로운 절차를 시작하여 유명한 사이트로 넘어가자. 이 사이트는 인터넷 전체에서 수십억 장의 사진을 발견했다.구글 사진 말이야.
우선, 우리는 새로운 세션을 시작하고 새로운 페이지를 엽니다.그리고 우리는 수조 데이터를 사용하여 모든 선수의 이름을 얻는다.이름은 URL로 전달되므로 공백을 +로 바꿔야 합니다.그런 다음 페이지의 첫 번째 이미지를 선택해야 합니다.이것은 XPath를 사용하여 실현할 수 있으며 XPath는 사이트의 모든 요소에 가장 짧은 유일한 경로를 제공한다.그런 다음 요소를 선택하고 이미지 URL을 가져옵니다.마지막으로, 우리는 그것을 속성으로 우리의 유저 대상에 추가해야 한다.

for(let i = 0; i < seasonData.length; i++) {
    let obj = seasonData[i]
    const search = obj.name.replace(/\//g, '+')
    await page.goto(`https://www.google.com/search?tbm=isch&q=${search}`)

    const imageSelect = '//*[@id="islrg"]/div[1]/div[1]/a[1]/div[1]/img';
    await page.waitForXPath(imageSelect)
    const image = await page.$x(imageSelect)
    let imageSrc = await page.evaluate(img => img.src, image[0])

    obj.imageURL = imageSrc
}

이제 Node 파일 시스템을 사용하여 데이터 배열을 JSON 파일에 저장하고 데이터를 프런트엔드로 전송하거나 Rest API를 만들 수 있습니다.

더 많은 가능성

이 예는 단지 빙산의 일각일 뿐이다.너는 원소와 상호작용, 캡처 등 다른 일을 인형사 라이브러리로 할 수 있다.더 많은 정보를 알고 싶으면 공식 홈페이지documentation를 보세요.
이 멋진 자바스크립트 라이브러리에 대한 흥미를 불러일으키고 더 많은 정보를 얻을 수 있기를 바랍니다.
시간 내주셔서 감사합니다!❤
만약 당신이 이 문장을 좋아한다면, 계속 나를 주목할 것을 고려해 주십시오.나는 인터넷 개발과 프로젝트 진전에 대한 힌트를 발표할 것이다.만약 당신에게 문제가 있다면, 트위터에 있는 DMs는 항상 열려 있습니다.