概要

Algolia（検索機能などのAPIを提供するサービス、SaaSになるらしいです...）と、Firestoreを連携させてみました。フロントエンドには、Vuejs(QusarFramework)を使っています。この記事では、Firestoreに書き込んだデータが、自動でAlgoliaにも書き込まれるというところまでやります。 Algolia、の検索API、ローカルで動いてるんじゃない買って思うくらい速くてビビりますｗ

環境

macOS Hight Sierra 10.13.6
Quasar CLI v0.17.17

参照リンク

Firestore + Algolia を連携について参考になる記事: https://angularfirebase.com/lessons/algolia-firestore-quickstart-with-firebase-cloud-functions/

Quasar Framwork公式サイト: https://quasar-framework.org/

Vue InstantSearch: https://community.algolia.com/vue-instantsearch/getting-started/getting-started.html

前提条件

以前のこの記事までやっているという前提です。 https://mules-team.hatenablog.com/entry/2018/11/07/135920

Cloud Functions For Firebaseの準備をする

firebase CLIで、functionsの設定ファイルを作成します。

$ firebase init functions

# functionsでどの言語を使うか利かれるので、Typescriptを選択します。
? What language would you like to use to write Cloud Functions?
  JavaScript
❯ TypeScript

# TSLintを使うか利かれるので、yesで設定します。
? Do you want to use TSLint to catch probable bugs and enforce style? Yes

# npmで、依存パッケージをinstallするか利かれるので、yesと回答する
? Do you want to install dependencies with npm now? Yes

# 以下のような表示がでれば成功です。
✔  Firebase initialization complete!

# 最後にfunctionsのディレクトリに移動しておく。
$ cd functions

Algoliaの準備をする

Algoliaのアカウントを作成します

公式サイトからサインアップしてください。 https://www.algolia.com/

Indexを作成します

左のカラムのIndices をクリックして、CreateIndexをクリックします
IndexNameを設定して、作成を完了させます。

f:id:mules_team:20181114212059p:plain f:id:mules_team:20181114212103p:plain

algoliasearchをinstallします。

$ npm i --save algoliasearch

Firestoreの準備をする

料金プランをBlaze（もしくは、Flame）に変更します。

外部サイトへのアクセスについては、有料プランへの変更が必要になります。今回は、AlgoliaのAPIにアクセスするので、有料プランへの変更が必要です。

f:id:mules_team:20181114212239p:plain

Firestoreで、データベースを作成します。

Firebaseコンソールにアクセスします。
以前の記事でデプロイしたプロジェクトを選択します。
左のカラムのDatabase をクリックして、データベースを作成するを選択します。
ロックモードかテストモードか聞かれるので、ここでは、「テストモード」で作成します。

f:id:mules_team:20181114212414p:plain f:id:mules_team:20181114212420p:plain

CloudFunctionsで、Firestore と、Algoliaを連携させる

AlgoliaのAPIKEYをCloudFunctionsの環境変数にセットします。

Algoliaのコンソール画面から、Application IDと、Admin API Keyをコピーして、firebase functionsに登録します。

f:id:mules_team:20181114212655p:plain

$ firebase functions:config:set algolia.appid="Application ID" algolia.apikey="Admin API Key"

index.tsを編集して、Cloud Functionsに登録する関数を設定します。

ここでは、FirestoreのCityというコレクションに、ドキュメントが追加されたときに自動的にAlgoliaにもレコードが追加されるような関数にしてあります。

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
admin.initializeApp();
const env = functions.config();

import * as algoliasearch from 'algoliasearch';

// Algolia Clientの初期化
const client = algoliasearch(env.algolia.appid, env.algolia.apikey);
// 作成したAlgoliaのIndex名を入れる
const index = client.initIndex('quasar_firestore');

// Cityというコレクションにドキュメントが追加されたときに、
// algoliaにも、追加される設定です。
exports.indexCity = functions.firestore
  .document('city/{cityId}')
  .onCreate((snap, context) => {
    const data = snap.data();
    const objectID = snap.id;

    // Add the data to the algolia index
    return index.addObject({
      objectID,
      ...data
    });
});

cloud functionsにデプロイします。

firebase CLIで、デプロイします。

$ firebase deploy
✔  Deploy complete!

連携の確認

Firestoreにデータを登録してみます。

今回はCityというコレクションを作成してみます。

f:id:mules_team:20181114212749p:plain

写真を挿入

Functionsのログを確認してみます。

log のstatusが'ok'になっていれば、成功です。（errorだと、失敗ですね）

f:id:mules_team:20181114212934p:plain

Algoliaのコンソールから、データの書き込みを確認します。

Firestoreに書き込んだデータと同じものが書き込みされていたら成功です！

f:id:mules_team:20181114213005p:plain

Mulesブログ

不動産業界に特化した業務効率化アプリ開発チームMulesのアカウントです。

Algolia + Firestore + VueJS(QuasarFramework)を連携させてみる

概要

環境