2020年1月4日土曜日

firebase-tools v7.8.0 release note 和訳

※翻訳勉強中のため、間違っている可能性があります。


https://github.com/firebase/firebase-tools/releases/tag/v7.8.0

  • Fixes a bug where the Functions emulator ignored the “host” configuration (#1722)
  • Fixes a bug where the Functions emulator accepted requests to too many paths (#1773)
  • Modifies firebase ext:update to not perform update if the extension is already up to date.
  • Print Firebase Console links for Extensions after operations.
  • Updated Firebase Extensions registry address.
  • Adds the firebase init emulators command.
  • Adds a Cloud Pub/Sub Emulator (#1748).
  • Fixes a bug where the Firestore emulator was unable to serve rule coverage HTML reports.
  • Fixes a bug in the Firestore emulator where rapidly overwriting the same document could trigger exceptions.

  • Functions エミュレーターが "host" の構成を無視するバグを修正しました。(#1722)
  • Functions エミュレーターがあまりにも多くのパスへのリクエストを受け入れていたバグを修正しました。(#1773)
  • 拡張機能が既に最新の場合、更新を実行しないようにfirebase ext:updateを変更しました。
  • 操作後に Extensions の Firebase Console リンクを印刷します。
  • Firebase Extensions レジストリアドレスを更新しました。
  • firebase init emulatorsコマンドを追加しました。
  • Cloud Pub / Subエミュレーターを追加しました。(#1748)
  • Firestore エミュレーターがルールカバレッジHTMLレポートを提供できなかったバグを修正します。
  • 同じドキュメントをすばやく上書きすると例外が発生する可能性があった Firestore エミュレータのバグを修正しました。

Written with StackEdit.

2020年1月1日水曜日

firebase-tools v7.7.0 release note 和訳

※翻訳勉強中のため、間違っている可能性があります。


https://github.com/firebase/firebase-tools/releases/tag/v7.7.0

  • Fixed an issue in Firestore Emulator where batchGet and transactions does not work over REST.
  • Make additional setIamPolicy call when creating HTTP functions to ensure they continue to be publicly available.
  • Prevent duplicate rulesets from being created.

  • batchGet とトランザクションがRESTで機能しないFirestore Emulatorの問題を修正しました。
  • HTTP Functionsを作成するときに追加の setIamPolicy 呼び出しを行って、それらが引き続き公開されていることを確認します。
  • 重複するルールセットが作成されないようにします。

Written with StackEdit.

2019年12月24日火曜日

firebase-tools v7.6.2 release note 和訳

※翻訳勉強中のため、間違っている可能性があります。


https://github.com/firebase/firebase-tools/releases/tag/v7.6.2

  • Fixes a bug where rounds=0 was accepted for SHA1 hashes (#1617).
  • Allows support for using \n in the --releaseNotes option of the appdistribution:distribute command (#1739).
  • Specifies schema version when dealing with IAM Policies related to Extensions.
  • Functions emulator now re-uses workers to avoid running global code on each execution (#1353).
  • Improves error handling of unreachable regions for Cloud Functions deploys.

  • SHA1ハッシュで rounds=0 が受け入れられていたバグを修正しました。(#1617)
  • appdistribution:distribute コマンドの --releaseNotes オプションで \n の使用をサポートします。(#1739)
  • 拡張機能に関連するIAMポリシーを扱うときにスキーマバージョンを指定します。
  • Functionsエミュレーターは、実行ごとにグローバルコードを実行しないようにワーカーを再利用します。(#1353)
  • Cloud Functionsデプロイの到達不能領域のエラー処理を改善します。

Written with StackEdit.

2019年12月20日金曜日

firebase-tools v7.6.1 release note 和訳

※翻訳勉強中のため、間違っている可能性があります。


https://github.com/firebase/firebase-tools/releases/tag/v7.6.1

  • Fixes a bug where the wrong updateMask was sent during ext:update.
  • Fixes a bug where users were prompted for unchanged params during ext:update.

  • ext:update 中に間違った updateMask が送信されていたバグを修正しました。
  • ユーザーが ext:update を実行中に変更されていないパラメーターの入力を求められていたバグを修正しました。

Written with StackEdit.

2019年11月23日土曜日

NuxtでFirestoreを利用してデータを保存する

Firestoreからデータを取得して表示するサンプルを作成します。
Jest でテストもします。

完成したプロジェクトは以下のリポジトリになります。
https://github.com/TAC/nuxt-firestore-example

Firestoreに接続する

まずはFirestoreへ接続します。
Firebaseのアカウント作成などは他のサイトなどで確認して下さい。
接続情報は.env/development.jsに記載して、nuxt.config.tsで読み込むようにします。

.env/development.js

module.exports = {
  apiKey: "<your apiKey>",
  authDomain: "<your authDomain>",
  databaseURL: "<your databaseURL>",
  projectId: "<your projectId>",
  storageBucket: "<your storageBucket>",
  messagingSenderId: "<your api messagingSenderId>"
}

app/nuxt.config.ts

import NuxtConfiguration from '@nuxt/config'
import pkg from './package.json'
import envSet from '../.env/environment.js'

const nuxtConfig: NuxtConfiguration = {
  mode: 'universal',
  srcDir: 'src',

  env: envSet,
  ...
}

設定値はprocess.env.apiKeyという形式で利用できます。
次にFirebaseFirestore の初期設定を行うプラグインを作成します。

app/src/plugins/firebase.ts

import firebase from 'firebase/app'

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: process.env.apiKey,
    authDomain: process.env.authDomain,
    databaseURL: process.env.databaseURL,
    projectId: process.env.projectId,
    storageBucket: process.env.storageBucket,
    messagingSenderId: process.env.messagingSenderId
  })
}

export default firebase

ここまでは 前回のAuthenticationの実装 でやりました。
Firestore へ接続するプラグインは以下のように記述します。

app/src/plugins/firestore.ts

import firebase from '@/plugins/firebase'
import 'firebase/firestore'

const db = firebase.firestore()

export default db

修正箇所

ユーザのニックネームを Firestore へ保存します。
users コレクションを作成して、ドキュメントIDには AuthenticationユーザーUID を利用します。
認証データをそのまま保存していた store/models/users.ts を変更していきます。

store/models/users.ts

import {
  VuexModule,
  Module,
  getter,
  mutation,
  action,
  getRawActionContext
} from 'vuex-class-component'
import firebase from '@/plugins/firebase'
import db from '@/plugins/firestore'
import Users from '@/types/store/models/users'

const timestamp = firebase.firestore.FieldValue.serverTimestamp()

@Module({ namespacedPath: 'models/users/', target: 'nuxt' })
class Store extends VuexModule {
  @getter user: Users = {}

  get isAuthenticated() {
    return !!this.user.id
  }

  @mutation
  public SET_USER(payload: Users) {
    this.user = payload
  }

  @mutation
  public UNSET_USER() {
    this.user = {}
  }

  @action({ mode: 'raw' })
  public async set(uid: string) {
    if (uid) {
      const ref = db.collection('users').doc(uid)
      const doc = await ref.get()
      if (doc.exists) {
        const data: Users = {
          id: doc.id,
          nickName: doc.data()!.nickName,
          createdAt: doc.data()!.createdAt,
          updatedAt: doc.data()!.updatedAt
        }
        const context = getRawActionContext(this)
        context.commit('SET_USER', data)
      }
    }
  }

  @action({ mode: 'raw' })
  public async unset() {
    const context = getRawActionContext(this)
    context.commit('UNSET_USER')
  }

  @action({ mode: 'raw' })
  public async create(uid: string) {
    if (uid) {
      const ref = db.collection('users').doc(uid)
      const doc = await ref.get()
      if (!doc.exists) {
        const nickName = ''
        await ref.set({
          nickName,
          createdAt: timestamp,
          updatedAt: timestamp
        })

        const data: Users = {
          id: uid,
          nickName
        }
        const context = getRawActionContext(this)
        context.commit('SET_USER', data)
      }
    }
  }

  @action({ mode: 'raw' })
  public async update(user: Users) {
    const ref = db.collection('users').doc(user.id)
    const doc = await ref.get()
    if (doc.exists) {
      await ref.update({
        nickName: user.nickName,
        updatedAt: timestamp
      })
      const context = getRawActionContext(this)
      context.commit('SET_USER', user)
    }
  }
}

export default Store.ExtractVuexModule(Store)

以前は mutation しかありませんでしたが、 action を追加して、そこでユーザデータの登録・作成を行うようにしています。

認証のサインイン時の処理も修正します。

store/modules/auth.ts

  @action({ mode: 'raw' })
  public async signIn(provider) {
    const context = getRawActionContext(this)
    context.commit('models/users/UNSET_USER', null, { root: true })
    await firebase
      .auth()
      .signInWithPopup(provider)
      .then(result => {
        if (result && result.user && result.additionalUserInfo) {
          if (result.additionalUserInfo.isNewUser) {
            // new user
            context.dispatch('models/users/create', result.user.uid, {
              root: true
            })
          } else {
            // exists user
            context.dispatch('models/users/set', result.user.uid, {
              root: true
            })
          }
        }
      })
      .catch(error => {
        console.error(error)
        throw error
      })
  }

result.additionalUserInfo.isNewUser をみて新規ユーザかどうかを判定して、users コレクションへの登録処理を実行しています。
一度認証してしまっていると上記の値が false になってしまうので、動作確認する場合は新しいアカウントか Firebase Console で認証情報を削除すると users コレクションが登録されると思います。

テストの作成

認証処理の時にも使った firebase-mock を使ってテストケースを作っていきます。

app/tests/store/models/users.test.js

import db from '@/plugins/firestore'
...
describe('store/models/users.ts', () => {
  beforeAll(() => {
    db.autoFlush()
  })

  beforeEach(async () => {
    // mock data
    user = {
      nickName: 'alice',
      createdAt: '2019-10-26 00:00:00',
      updatedAt: '2019-10-26 00:00:00'
    }

    await db
      .collection('users')
      .doc('alice')
      .set(user)
  })

plugins/firestoreimport を追加してます。
前回の設定firestore の呼び出しはモックになっています。
beforeAll でFirestoreへの処理がすぐ反映されるように autoFlush() を実行しておきます。
beforeEach でモックデータを登録しています。
モックなので実際にFirestoreには登録されません。

app/tests/store/models/users.test.js

  describe('actions', () => {
    test('set', async () => {
      await store.dispatch('models/users/set', 'alice')
      expect(store.getters['models/users/user']).toMatchObject(user)
    })

    test('unset', async () => {
      await store.dispatch('models/users/unset')
      expect(store.getters['models/users/user']).toMatchObject({})
    })

    test('create', async () => {
      await store.dispatch('models/users/create', 'bob')
      const checkData = {
        id: 'bob',
        nickName: ''
      }
      expect(store.getters['models/users/user']).toMatchObject(checkData)
    })

    test('update', async () => {
      const updateData = {
        id: 'alice',
        nickName: 'test'
      }
      await store.dispatch('models/users/update', updateData)
      const data = store.getters['models/users/user']
      expect(data).toMatchObject(updateData)
      expect(data.updatedAt).not.toBe(user.updatedAt)
    })
  })

追加した action メソッドのテストを作成します。
なお、gettersmutation は動作を変えていないので、修正しなくても正常にテストを通過するはずです。

以上、簡単にですが Firestore への接続とテスト方法の紹介でした!


Written with StackEdit.