Firestore：概要

Wijmoの Firestore クラスは、Firestore REST APIを使用して、Firestoreデータベースをロード、表示、および編集できるようにします。 Firestoreクラスは高速で軽量ですが、オフラインキャッシュやリアルタイム更新など、FirestoreWebクライアントライブラリが提供する高度な機能は提供していません。アプリケーションでこれらの機能が必要であると判断した場合、またはFirestore Webクライアントライブラリの使用に既に取り組んでいる場合は、Firestoreクラスの代わりに Snapshot クラスの使用を検討してください。

Firestoreデータベースの作成

まず、Firestoreデータベースを作成する必要があります。そのための手順は次のとおりです。

Firebase コンソールに移動します
新しいプロジェクトを作成します（または既存のプロジェクトを選択します）
データベースボタンをクリックします
Firestore　データベースを追加します
UIを使用してデータベースを構成します

Firestoreデータベースのセットアップについて詳しく説明しているチュートリアルやビデオは、次のようなものがたくさんあります。

データベースを作成してデータを入力した後、アプリケーションがデータベースに接続できるようにするためのAPIキーを生成する必要があります。これは、 Google API Consoleを介して実行できます。

アプリからFirestoreにアクセスする

データベースが作成され、APIキーが作成されたので、Firestoreクラスをインポートし、それを使用してデータベースに接続できます。

まず、 Firestore クラスをインポートする必要があります。

import { Firestore } from '@mescius/wijmo.cloud';

次に、データベースに接続された　Firestore　オブジェクトを作成します。

const API_Key = 'AIzaSyCvuXEzP57I5CQ9ifZDG2_K8M3nDa1LOPE';
const PROJECT_ID = 'test-9c0be';
let fsNWind = new Firestore(PROJECT_ID, API_KEY, {
    collections: ['Products', 'Categories', 'Suppliers']
});

最後に、ユーザーが製品カテゴリを表示および選択できるようにする ComboBox、ユーザーが選択したカテゴリのデータを表示するための FlexGrid、およびデータベース内の製品の単価を表示するための FlexChart を追加します。

ComboBox

let categoryCombo = new ComboBox('#categoryCombo', {
    placeholder: '(All Categories)',
    isRequired: false,
    displayMemberPath: 'CategoryName',
    itemsSource: fsNWind.getCollection('Categories'),
    selectedIndexChanged: (s, e) => {
        let cat = s.selectedItem;
        fsNWind.getSheet('Products').filter = (item => {
            return cat == null || cat.CategoryID == item.CategoryID;
        });
    }
});

FlexGrid

let supplierMap = new DataMap(fsNWind.getCollection('Suppliers'), 'SupplierID', 'CompanyName');
let productGrid = new FlexGrid('#productGrid', {
    ...gridOptions,
    autoGenerateColumns: false,
    columns: [
        { binding: 'ProductName', header: 'Product Name' },
        { binding: 'UnitPrice', header: 'Unit Price', format: 'n2' },
        { binding: 'QuantityPerUnit', header: 'Quantity Per Unit' },
        { binding: 'SupplierID', header: 'Supplier', dataMap: supplierMap },
        { binding: 'UnitsInStock', header: 'In Stock', format: 'n0' },
        { binding: 'UnitsOnOrder', header: 'On Order', format: 'n0' },
    ],
    itemsSource: fsNWind.getCollection('Products')
});

FlexChart

let productChart = new FlexChart('#productChart', {
    chartType: 'Bar',
    axisX: { majorGrid: true, axisLine: false },
    axisY: { majorGrid: false, axisLine: false, reversed: true },
    legend: { position: 'Bottom' },
    bindingX: 'ProductName',
    series: [
        { binding: 'UnitPrice', name: 'Product Unit Prices (US$)' }
    ],
    itemsSource: fsNWind.getCollection('Products')
});

これで、コントロールがFirestoreデータベースに接続されました。これはすべて標準のWijmoコードであり、データは任意のデータソースからロードされている可能性があります。この場合、Firestore オブジェクトを使用してデータをコントロールにロードしました。

変更のコミット

ユーザーがアイテムを変更、追加、または削除するたびに、Firestore クラスはデータストアに変更を即座にコミットします。このデフォルトの動作により、データが失われる可能性が最小限に抑えられます。

コミット操作を延期してオンデマンドで適用する場合は、Collection の deferCommits プロパティをtrueに設定し、必要に応じて commitChanges （または cancelChanges）メソッドを呼び出します。

たとえば、次のコードは、hasPendingChanges プロパティを使用して、Collection に保留中の変更があるかどうかを判断し、commitChanges メソッドと cancelChanges メソッドを使用してそれらを適用またはキャンセルする方法を示しています。

// get the collection and configure it  
let collection = fs.getCollection('restaurants');  
collection.deferCommits = true;  

// commit/cancel changes buttons  
let btnCommit = document.getElementById('btn-commit') as HTMLButtonElement,  
    btnCancel = document.getElementById('btn-cancel') as HTMLButtonElement;  

// commit or cancel pending changes  
btnCommit.addEventListener('click', () => collection.commitChanges());  
btnCancel.addEventListener('click', () => collection.cancelChanges());  

// enable buttons when there are pending changes  
collection.hasPendingChangesChanged.addHandler((s, e) => {  
    btnCommit.disabled = btnCancel.disabled = !collection.hasPendingChanges;  
});

Firestore：概要
Firestoreデータベースの作成
アプリからFirestoreにアクセスする
変更のコミット