WordPress와 CloudFunctions를 함께 사용하여 앱에 블로그 기능 구현

WordPress와 CloudFunctions를 함께 사용하여 앱에 블로그 기능 구현

PORT Firebase × PostCoffee #2 로 등단했을 때의 내용입니다.

커피의 서브스크 앱 「PostCofee」의 개발을 하고 있는 나카가와입니다.
이 PostCofee 앱은 백엔드가 Firebase에서만 제작되었습니다.
커피를 좋아하는 분은 꼭 다운로드 해보세요!

그런데 요 전날 업데이트에서 스토리라는 탭이 추가되었습니다.

스토리는 앱 내에서 블로그를 볼 수 있는 기능입니다.
앱 내에서 웹 사이트를 탐색할 수 있다는 것은 매우 일반적인 기능이지만, 이것을 Firebase로 실현하는 경우 어떻게 하는지를 소개하고 싶습니다.

WordPress와의 협력 흐름

스토리에 표시되는 블로그는 WordPress로 작성되었으며 구성은 다음과 같습니다.

WordPress에서 기사 게시 및 업데이트

위의 타이밍에서 WordPress 측에서 CloudFunctions에서 준비한 function을 필요한 param을 넣어 두드려 준다

CloudFunctions가 두드려지면 param을 받아 FireStore에 저장하고 앱 측에 Push 알림을 보냅니다

앱 측은 CloudFireStore로 데이터를 가져 가기

CloudFunctions에서 할 일

먼저 CloudFunctions를 구현합니다.
트리거는 functions.https를 사용합니다.
자세한 내용은 여기 HTTP 요청을 통해 함수 호출

또한 푸시 알림도 이 CloudFunctions에서 보내도록 합니다.
이번에는 모든 사용자를 대상으로 보내기 위해 주제 전달을 사용했습니다.
주제에 메시지 보내기

exports.wordPressCreated = functions.region('asia-northeast1').https.onRequest(async (req, res) => {
    // ここでWordPressからのデータを受け取ってFireStoreへ保存します。

    // WordPressからのデータはreq.bodyの中に入っくるので
    // 例) const title = req.body.title
    // このように取得します。

    // FireStoreへの保存が完了したらPush通知を送る
})

푸시 알림 정보

기사에 따라 Push 알림을 보내거나 보내지 않는 것을 나누고 싶다면 WordPress 측에서 보내는 데이터에 Bool 값을 넣는 것이 좋습니다.
Bool 값이라고 해도 받을 때에 String 의 '0', '1' 로 변환되어 버리는 것 같기 때문에 판정에 주의가 필요합니다.

例) WordPressからのparam
{
   "title" : "ほげほげ",
   "thumbnail" : "https://○○○.png",
   "url" : "https://qiita.com/",
   "isSnedPush" : "1" // Push通知を送るかどうか
}

// isSendPushが '1' のときにPushを送る
if (req.body.isSendPush === '1') {
    // Push通知を送る
}

CloudFunctions에서의 구현은 이상입니다.
구현이 완료되면 배포합시다.

WordPress에서 할 일

WordPress 측에서는 기사 공개, 업데이트를 훅하여 위에서 구현한 CloudFunctions를 두드리게 합니다.
FireStore에 저장하고 싶은 데이터도 여기에서 보내도록 합니다.

두드리는 URL (CloudFunctions)은 Firebase 콘솔

Functions → 대시보드 → 트리거

에 기재되어 있습니다.

디버깅 정보

최종적으로는 실제로 WordPress에서 기사를 공개하고 확인하는 것이 좋습니다만, 구현 도중에 확인하고 싶은 경우나, WordPress를 스스로 괴롭히지 않는 경우, 직접 CloudFunctions를 두드려 확인할 수 있습니다.

배포된 CloudFunctions를 두드리는 방법은 여러 가지가 있다고 생각하지만, 이번에는 Postman을 사용했습니다.


사용법은 URL을 입력하고 POST에서 요청하면됩니다.
이번에는 WordPress 측에서 param을 받기 때문에 실제로 보내는 데이터를 json 형식으로 지정합니다.

CloudFunctions가 두드렸는지 여부는

Firebase 콘솔 Functions → 로그

에서 확인할 수 있습니다.

요약

이번에는 WordPress와 Cloud Functions의 연계에 대해 소개했습니다.
WordPress에 한정하지 않고, 다른 서비스와의 제휴도 거의 같은 구성으로 갈 수 있다고 생각하므로, 참고가 되면 다행입니다.

여기 더 자세히 알고 싶은 등 있으면 쓸 수있는 범위에서 추가하므로 부담없이 코멘트하십시오!