😱 ノードでランダムmeme APIを作成します.JSと操り人形

👋 こんにちは

今日の記事はすべてのノードを使用してランダムなミームAPIを作ることができる方法です.JSとウェブスクレーピング私たちはFastify APIのために、我々は使用されますPuppeteer ウェブをscrapeし、ランダムなミームを取得します.
このランダムなミームAPI APIの同じ種類に触発されたhere . しかし、ノードを使ってビルドしたかったです.JSと操り人形.
我々はこするMemedroid 使用Puppeteer NPM package .

プロジェクトの初期化

まず最初に、必要な名前のフォルダを作成する必要があり、ノードを初期化する必要があります.そのフォルダーのJSアプリ.このコマンドを使用します.

npm init -y

インストールするには2つの依存関係が必要ですpuppeteer and fastify .

npm i puppeteer fastify

APIにFastifyを使用する

我々のプロジェクトが設定された後、我々の依存関係がインストールされた後、我々はコードを書くと一緒に行くのが良いです!クリエイトアindex.js ファイルとインポートfastify このコードを使用してサーバーを作成します.

const fastify = require('fastify')({ logger: true });

const start = async () => {
  try {
    await fastify.listen(5555);
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};

start();

一度この事が行われると、我々はアプリを使用して実行するnode index , 我々のアプリは、ポート上で実行されます5555 . しかし、ベースルートを作成しましょう/ )そのために.

fastify.get('/', async (request, reply) => {
  reply.send({ hello: 'world' });
});

ランダムな記憶を取得する

ここで楽しい部分が来る!我々は、Webブラウザを開き、Memedroidからすべての画像を取得し、我々はすべてのコードを介して行います.
とpuppeteer パッケージ、クロムもウェブをscrapeにインストールされています.そういうわけで、あなたがインストールされる時間がかかったかもしれません

To skip Chromium download, you can use puppeteer-core package and add the path to your Chrome file following the docs.

私たちはすべてのミームを取得する関数を作成し、ルート内のランダムな1つを選択します.

async function getAllMemes() {
  const URL = 'https://www.memedroid.com/memes/tag/programming';

  const browser = await puppeteer.launch({ headless: true }); // launch browser
  const page = await browser.newPage(); // open a page

  await page.goto(URL); // go to the page
}

我々は単にブラウザを起動し、このコードでMemedroidのページを開きます👆.
さあ、すべてを得ましょう<img> にあるタグ<div> クラスのitem-aux-container . それはすべてのミームが住んでいるところです.

上記のイメージのように<article> タグ、そのクラスを持つdivが存在するので、単に$$eval メソッドpage .
このメソッドは2つの引数をとります:

セレクタ

要素を持つコールバック関数

const allImages = await page.$$eval('div.item-aux-container img[src]', (imgs) => {});

コールバック関数のイメージをマップし、画像のURLのみを返しますsrc 属性.そして、これは我々がそれをする方法です.
私たちはsrc 属性はhttp で終わるjpeg そして、我々はそれを返します.

const allImages = await page.$$eval('div.item-aux-container img[src]', imgs =>
  imgs.map(img => {
    if (
      img.getAttribute('src').startsWith('http') &&
      img.getAttribute('src').endsWith('jpeg')
    )
      return img.getAttribute('src');
  })
);

残念なことに、それも私たちに戻るnull もしそうでないならば、.filter() メソッド.

const imgs = allImages.filter(img => img !== null);

すべての作業が完了すると、ブラウザを閉じ、画像の配列を返します.

async function getAllMemes() {
  const URL = 'https://www.memedroid.com/memes/tag/programming';

  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto(URL);

  const allImages = await page.$$eval('div.item-aux-container img[src]', imgs =>
    imgs.map(img => {
      if (
        img.getAttribute('src').startsWith('http') &&
        img.getAttribute('src').endsWith('jpeg')
      )
        return img.getAttribute('src');
    })
  );

  const imgs = allImages.filter(img => img !== null);

  // NEW LINES
  await browser.close();
  return imgs;
}

Fastifyを使用してランダムなミームを送信する

最後に、ランダムなミームを選択し、このコードを使用してユーザーに送信します

fastify.get('/', async (request, reply) => {
  const memes = await getAllMemes();
  const randomNumber = Math.round(Math.random() * memes.length);
  reply.send({ memeUrl: memes[randomNumber] });
});

今、ユーザーが訪問するたびにlocalhost:5555 , これは次のようになります.


我々は我々のアプリが完了している!読書ありがとう!すべてのコードを見つけることができますhere .
閉じるこの動画はお気に入りから削除されています.コメントをあなたの考え!常に改善の余地があるので、このプロジェクトのご提案をお知らせください!
私と私の上で私とつながってください😉
次回まで、ものすごい保つ✌️