실시간 트위터 프로필 배너를 만들고 팔로우를 표시합니다

이 시리즈의 두 번째 부분에서, 우리는 어떻게 당신의 핫한 글을 자동으로 트위터하는지 배웠다.

Automatically Tweet popular articles from DEV

Anshuman Bhardwaj ・ Jan 24 ・ 4 min read

#opensource #showdev #nextjs #javascript

현재 대부분의 개발자로서 저는 여기에 머무르지 않습니다. 하하. 저는 더 나아가 트위터 플래카드를 자동으로 업데이트하는 서비스를 만들었습니다. 제 팬 수는 Medium부터 시작합니다. 그리고.
나를 믿어라, 이것은 우리가 상상한 것보다 훨씬 간단하다, 그렇지?
보여줘-

붕괴

자리 표시자가 있는 최신 트위터 배너 이미지 만들기

DEV, Medium, 유튜브를 읽는 관심사

Twitter API로 배너 업데이트

정기적으로 수행

이미지 템플릿 만들기
우선 가장 중요한 단계는 템플릿을 만드는 것입니다. 잠시 후에 우리는 실시간 데이터로 템플릿을 채울 수 있습니다.
나는 항상 Canva 트위터와 유튜브를 위해 그림을 만든다.그래서 나는 그곳에 가서 그들의 트위터 플래카드 템플릿으로 자신을 위해 하나를 만들었다.
나는 이 세 계정에 사용자 이름을 추가하고 라이브 카운터 값을 기입할 공간을 남겼다.
제가 트위터 계정이랑 타다한테 영감을 받았어요.🎉!


DEV 관심 분야 확보
이것은 가장 간단한 것이다. 너는 단지

개발자 계정

에서 API 얻기

추종자 API로 모든 추종자 획득

그들은 페이지당 최대 1000명의 팔로워만 보내기 때문에 우리는 팔로워가 되돌아오기만 하면 순환을 실행해야 한다

코드 세그먼트

// fetch all followers
export async function getFollowersFromDev(): Promise<any[]> {
  // start with page 1
  let page = 1,
    limit = 1000;
  const followers = [];
  // repeat until page number exists
  while (page) {
    const res = await fetch(
      `${process.env.DEV_API_URL}/followers/users?per_page=${limit}&page=${page}`,
      {
        headers: {
          "api-key": process.env.DEV_API_KEY as string,
        },
      }
    );
    const answer = await res.json();
    if (answer && Array.isArray(answer) && answer.length) {
      followers.push(...answer);
      // increment page number if this page is full, otherwise set to 0
      page = answer.length === limit ? page + 1 : 0;
    } else {
      // no more followers, so set page to 0
      page = 0;
    }
  }
  return followers;
}

유튜브 구독자 유치
여기에 사용할 수 있는 REST API가 하나 있는데,

구글 클라우드 플랫폼 프로젝트에서 API 키를 만들고 유튜브 API에 액세스할 수 있는

아래 그림과 같이 액세스하여 채널 ID를 확인하십시오.

다음에 해야 할 일은 API를 호출하고 데이터를 읽는 것이다

코드 세그먼트

export async function getYoutubeSubscribers() {
  const res = await fetch(
    `https://youtube.googleapis.com/youtube/v3/channels?part=statistics&id=${YT_CHANNEL_ID}&key=${YT_API_KEY}`
  );
  const data = await res.json();
  return data?.items[0]?.statistics?.subscriberCount || 330;
}

중팬을 끌어들이다
가장 어려운 것으로, 언론은 팔로워 수를 집계하기 위한 API를 제공하지 않은 것으로 보인다.하지만 구글 검색을 통해 GitHub 사용자 newhouse로부터 이것Gist을 찾았습니다. 감사합니다.
미디어 프로필 URL의 끝에 ?format=json를 추가하면'소셜 Stats'를 포함한 대량의 데이터를 포함하는 JSON 응답을 받을 수 있다는 사실이 증명되었다.
하지만 "잠깐만...잠깐만...잠깐만, 그렇게 빨리 하지 마."라고 중대가 말했다.
그들은 실제 JSON 앞에 일부 텍스트를 추가하여 API로서의 사용을 제한했다.

Also it didn't resolve when I did a fetch request but worked when using Insomnia, so I used Insomnia as the user-agent when making network requests.

코드 세그먼트

export async function getMediumFollowers() {
  const res = await fetch("https://medium.com/@anshuman-bhardwaj?format=json", {
    headers: {
      "user-agent": "insomnia/2021.7.2", // didn't work without this for me
    },
  });
  // Medium adds this to the JSON text
  const hijackString = "])}while(1);</x>";
  const jsonText = await res.text();
  // remove the hijackString from JSON before parsing
  const data = JSON.parse(jsonText.replace(hijackString, ""));
  return (
    data?.payload?.references?.SocialStats?.[MEDIUM_USER_ID]
      ?.usersFollowedByCount || 20
  );
}

내 트위터 프로필 배너 업데이트
이제 필요한 모든 정보가 생겼습니다. API 프로세서 함수를 만들면

상기 세 가지 방법에서 데이터를 추출

위 방법

에서 얻은 값을 사용하여 우리가 만든 자리 표시자 이미지를 업데이트합니다

업데이트된 이미지를 v1 API의 엔드포인트를 사용하여 내 트위터 계정에 업로드합니다.

이미지 업데이트
그림 상단에 텍스트를 추가하려면 jimpnpm package를 사용합니다.이를 위해, 우리는 반드시 자리 차지 문자의 정확한 좌표를 찾아야 한다.(나에게 타격과 심판은 효과가 있다)
우리는 jimp print 방법을 사용하여 텍스트를 그림의 맨 위에 놓았다.

I've explained how to get Twitter API credentials in the . So, please refer to that article and I'll skip that for now.

제한성

트위터 API는 이미지base64 인코딩을 받았지만 fetch 호출 시 최대 유효 부하 크기에 도달했지만 npm 패키지를 사용하여 이 문제를 해결했습니다.

내 NextJS API 프로세서 함수는 실행할 때 jimp 모듈의 글꼴을 해석할 수 없기 때문에 공용 폴더에 복사해서 문제를 해결합니다.

NextJS 함수를 사용할 때 디스크에 그림을 쓸 수 없습니다.

네, getBase64Async가 jimp에 존재한다는 것을 알고 있습니다. 그러나 이것은 원시 크기의 6배에 달하는 커다란 반환치를 주었습니다.따라서 나는 getBufferAsync 실용 프로그램과 toString 호출을 연결할 것이다. 이것은 나에게 매우 좋다.

코드 세그먼트

import { NextApiRequest, NextApiResponse } from "next";
import {
  formatLog,
  getFollowersFromDev,
  getMediumFollowers,
  getYoutubeSubscribers,
  twitterClient,
} from "../../../utils";
import path from "path";
import jimp from "jimp";

export default async function views(
  request: NextApiRequest,
  response: NextApiResponse
) {
  console.info(formatLog("Running Update Twitter Header Function"));
  try {
    const devFollowers = await getFollowersFromDev();
    const ytSubs = await getYoutubeSubscribers();
    const mediumFollowers = await getMediumFollowers();

    const filePath = path.resolve("./public/yellow_twitter_header.png");
    const jimpFont = path.resolve(
      "./public/open-sans-32-black/open-sans-32-black.fnt"
    );
    path.resolve("./public/open-sans-32-black/open-sans-32-black.png");

    const image = await jimp.read(filePath);
    const font = await jimp.loadFont(jimpFont);
    image.print(font, 150, 98, ytSubs);
    image.print(font, 620, 98, devFollowers.length);
    image.print(font, 1130, 98, mediumFollowers);
    const fromImage = await image.getBufferAsync(image.getMIME());
    const updatedHeader =
      await twitterClient.accountsAndUsers.accountUpdateProfileBanner({
        banner: fromImage.toString("base64"),
        width: 1500,
        height: 500,
      });
    response.status(200).send({
      type: "success",
      updatedHeader,
      devFollowers: devFollowers.length,
      ytSubs,
      mediumFollowers,
    });
  } catch (e: any) {
    console.log(e);
    response.status(500).send({
      type: "error",
      message: e.message,
    });
  }
}

업데이트 예약
모든 번거로운 작업을 마쳤으니 위에서 만든 API 프로세서를 호출하기만 하면 됩니다.
시간을 안배하기 위해서, 나는 GitHub 조작을 사용하여 Cron 작업을 만들었고, 5분마다 한 번씩 실행하여 나의 개인 정보 그림을 업데이트했다.Cron 작업은 위에서 만든 API 프로세서를 호출합니다.
지금까지 그것은 매우 잘 운행되었다.

Note: Twitter's Update Banner API is rate-limited, couldn't find the exact number but it's somewhere around 30 calls in 15 minutes or something. If you know it, please put down in comments.

리소스

DEV API

Gist from newhouse

GtiHub Repo

Automatically Tweet popular articles from DEV

Anshuman Bhardwaj ・ Jan 24 ・ 4 min read

#opensource #showdev #nextjs #javascript

자, 여기까지, 내 친구들.전체 안내서를 볼 수 있으며, 갈라짐 GtiHub Repo 을 통해 사용할 수 있습니다.
나는 이 문장이 너에게 도움이 되기를 바란다.피드백이나 질문이 있으면 언제든지 아래의 댓글에 올려 주십시오. 저는 기꺼이 그것을 듣고 처리하겠습니다.
더 많은 이런 내용이 필요하시면 저를 따라오세요

Until next time