🔥Webサービス開発ログ Part 2 (Firebase Function used for Fetching RSS)

はじめに

本エントリはWebアプリの開発記録です。GraphQLを利用したサンプルアプリを作る過程を記録していきます。
ソースコードはGitHubにpushしています。

Firebase Function作成

ニュースのデータを作るFunctionを作成します。

最初にFirebaseのプロジェクトを作成します。

img

firebase-toolsをインストールし、googleアカウントでログインします。

$ npm i -g firebase-tools
$ firebase login

firebaseプロジェクトをセットアップします。

$ firebase init

Database, Function, Hostingを選択します。

img

Hostingのセットアップでは、webpackのビルドファイルの作成場所を指定します(今回はdist)。

img

ひとまずFunctionが正常に動作するかをHello Worldで確認します。

const functions = require('firebase-functions');

// Create and Deploy Your First Cloud Functions
// https://firebase.google.com/docs/functions/write-firebase-functions

exports.helloWorld = functions.https.onRequest((request, response) => {
 response.send("Hello from Firebase!");
});

ローカルで実行するためCloud Functionシェルをインストールします。

$ cd ./functions && yarn add —dev firebase-functions@latest

Cloud FunctionシェルでhelloWorld Functionを実行し、正常に動作することを確認します。

$ firebase functions:shell
i  functions: Preparing to emulate functions.
✔  functions: helloWorld
firebase > helloWorld()

正常にhello worldが動作しました。
img

では、Cloud Functionの中身を修正し、手始めにクックパッド開発者ブログの1週間分のRSSを取得し、Realtime Databaseに格納するようにします。

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.fetchRSS = functions.https.onRequest((request, response) => {
  function storeFeeds(dtFrom, name, items) {
    try {
      const newsList = [];
      items.forEach(item => {
        newsList.push({
          name,
          title: item.title,
          link: item.link,
          pubDate: new Date(item.pubDate),
        });
      });
      const newsListRef = admin.database().ref('newsList');
      newsList
        .filter(n => n.pubDate.getTime() >= dtFrom.getTime())
        .forEach(n => {
          newsListRef.push().set(n);
        });
    } catch (err) {
      console.log(`err: ${err}`);
      throw err;
    }
  }
  const parseRSS = (() => {
    const Parser = require('rss-parser');
    // set from date
    const dtFrom = new Date();
    dtFrom.setHours(0, 0, 0, 0);
    dtFrom.setDate(dtFrom.getDate() - 7);
    return ({ name, url }) => {
      return new Promise((resolve, reject) => {
        const parser = new Parser();
        console.log({ action: 'parseRSS', url });
        parser
          .parseURL(url)
          .then(feed => {
            storeFeeds(dtFrom, name, feed.items);
            resolve();
            return;
          })
          .catch(err => {
            reject(err);
          });
      });
    };
  })();
  // target sites
  const sites = [
    {
      name: 'クックパッド開発者ブログ',
      url: 'https://techlife.cookpad.com/feed',
    },
  ];
  // start fetching
  const promises = [];
  sites.forEach(site => {
    promises.push(parseRSS(site));
  });
  Promise.all(promises)
    .then(() => {
      response.send('Fetch RSS Completed');
      return;
    })
    .catch(err => {
      response.send({ err });
    });
});

そして、Cloud FunctionシェルからfetchRSS()Functionを実行します。

正常終了したので、Databaseの内容を確認します。

img

正しくデータが保存されていることを確認できました。

今回はここまでになります。

次は、Apollo Clientから今回保存したデータを取得する機能に取り掛かります。

Please follow and like us:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です