Snapshot 개요

Wijmo의 Snapshot 클래스는 CollectionView 클래스를 확장하여 Firebase 컬렉션과 쿼리에 대한 실시간 지원을 제공합니다. Firestore 웹 클라이언트 라이브러리와 함께 사용하면 Snapshot 클래스를 통해 Firestore 데이터베이스에서 실시간 업데이트를 제공하고 고급 기능을 구현할 수 있습니다.

Snapshot 생성

먼저, Snapshot 클래스를 로드해야 합니다:

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

이제 Snapshot 클래스가 로드되었으니, 다음과 같이 Snapshot 객체를 생성하고 사용할 수 있습니다:

// initialize Firestore web client library
const firebaseConfig = {
    apiKey: …
    authDomain: …,
};
firebase.initializeApp(firebaseConfig);

// get a snapshot of the "restaurants" collection
const db = firebase.firestore();
let restaurants = db.collection('restaurants');
let snapshot = new Snapshot(restaurants, {
    query: restaurants.where('type', 'in', ['Japanese', 'Italian' ])
});

// bind the snapshot to a FlexGrid
new FlexGrid('#theGrid', {
    itemsSource: snapshot
});

우리는 먼저 웹 클라이언트 라이브러리를 초기화한 후 요청된 데이터를 기반으로 Snapshot을 빌드합니다. 여기서는 'restaurants' 컬렉션을 사용하고, 레스토랑 유형이 'Japanese' 또는 'Italian'인 경우의 Snapshot을 빌드하고 있습니다.

query 속성은 언제든지 변경할 수 있지만, Snapshot이 초기화된 컬렉션(이 경우 'restaurants' 컬렉션)을 기반으로 해야 합니다.

마지막으로, 코드에서 Snapshot을 FlexGrid의 데이터 소스로 사용합니다. 이제 사용자가 FlexGrid에서 값을 업데이트하면, 다른 브라우저에서 해당 데이터를 보고 있는 다른 사용자도 FlexGrid가 새 값으로 업데이트됩니다.