NgSysV.Google の Firestore を使用したシンプルな洗練された情報システムの作成

この投稿シリーズは NgateSystems.com にインデックスされています。とても便利なキーワード検索機能もあります。

最終レビュー日: 2024 年 11 月

1. はじめに

ほとんどの Web アプリは、純粋に共有情報を作成してアクセスするために存在します。 Amazon の Web サイト https://www.amazon.co.uk/ を考えてみましょう。このシステムの本質的な目的は、製品詳細の集中コレクションを参照し、注文し、配送の進捗状況を監視できるようにすることです。これを機能させるには、Amazon は次のことを行う必要があります。

• この情報は Web 経由でアクセスできる場所に保管してください
• ほぼ即時のアクセスと完全な整合性を確保するために、それを構築および管理します。

この投稿は、これらの目的を達成するために使用される「データベース」テクノロジーに関するものです。

警告 - これは 長い投稿です。Svelte でデータベースの読み取りと書き込みを行うと、SvelteKit のクライアントサーバー アーキテクチャを容赦なく使用することになるからです。以前は、コードは Web ブラウザーの「クライアント側」でのみ実行されていました。これで、npm run dev によって起動されたローカル サーバー上でもコードを実行できるようになります。これには影響があります...

投稿を分割する方法を検討しましたが、うまくいきません。さらに悪いことに、使用する Javascript には多くの新機能が含まれています。申し訳ありませんが、そのまま飲み込んでください。

しかし、明るい面も見てください。これを乗り越えると、物事は楽になり始めます。ゆっくりと行ってください。何かを明確に説明していないと思われる場合は、chatGPT を使用してください。このボットは、JavaScript 構文に関するアドバイスが必要な場合に特に役立ちます。リラックス。これは楽しそうです!

2. Google の Firestore を使用するようにプロジェクトを構成する

ウェブ上で共有データを保存する方法は無数にあります。この投稿シリーズでは、初心者に適しているため、Google の Firestore システムを使用します。最小限のセットアップが必要で、Svelte Web アプリの構造に快適に適合します。

最初に 4 つの手順を実行する必要があります:

1. Google アカウントを取得します
2. このアカウントで Firebase プロジェクトを作成します
3. 「ウェブアプリ」を登録します
4. Firebase プロジェクトの Firestore データベースを初期化します

Firebase は、Web 上に単純なプロジェクトをマウントするために使用できるさまざまなサービスを表す Google の包括的な用語です。特定のアカウントのサービスは、Google の「Firebase コンソール」(https://console.firebase.google.com/) を介して管理されます。これらには、Google Cloud にファイルをアップロードできる「ストレージ」サービスと「Firestore データベース」サービスの両方が含まれています。データベースは、構成可能な構造を持っているという点でファイルとは異なります。これにより、構成されたデータセットの個別の要素にアクセスして更新できるようになります。

2.1 Googleアカウントの取得

Gmail アドレスをお持ちの場合は、自動的に Google アカウントとしてカウントされるため、すでにカバーされています。まだお持ちでない場合は、「Google アカウントの作成」の手順に従ってアカウントを取得してください。

2.2 コード用の Firebase プロジェクトの作成

Google Firebase コンソールを起動し、Google アカウントでログインします (これで Gmail にログインしている場合は、すでに Firebase コンソールにもログインしていることに注意してください)。次に、[プロジェクトの作成] ボックスをクリックしてプロセスを開始します。

Google はプロジェクトの名前を指定するよう求めます (VSCode で使用しているプロジェクト名を使用することをお勧めします)。これを Firebase の世界で一意の「プロジェクト識別子」にする拡張機能を提案します。たとえば、この投稿シリーズで使用されている「Svelte-dev」プロジェクトの私のバージョンは、Google には「Svelte-dev-afbaf」として知られています。

余談ですが、プロジェクト識別子は最終的に Web アプリのデフォルトのライブ URL の一部を形成し、Google では最初の「独自性拡張」提案を編集できるため、これを変更しようとする誘惑に駆られるかもしれません。意味のあるものに。ただし、この考えは忘れることをお勧めします。まず、双方に適した識別子を選択するのは難しいことがわかります。次に、私の経験では、これらの「デフォルト URL」は Google によってインデックスに登録されることはありません。最小限のコストで購入し、公開時にデフォルトの URL にリンクする「カスタム URL」が、記憶に残る URL を取得する最良の方法です。

[続行] をクリックすると、[Google Analytics] 登録ページが表示されます。これはライブアプリのパフォーマンスの問題にのみ関係するため、ここでは無視しても問題ありません。スライダー バーを使用して拒否し、[プロジェクトの作成] ボタンをクリックして続行します。

Google がプロジェクトを登録すると、ライトが少し暗くなります。最後に、もう 1 つ [続行] ボタンをクリックすると、プロジェクトの Firebase コンソール ウィンドウが表示されます。これは「svelte-dev」プロジェクトの Firestore タブのスクリーンショットです:

このページは少し複雑なので、少し時間をかけてよく理解しておくと良いでしょう。基本的な構造は、右側のメイン パネルに何を表示するかを決定する左側の「ツール メニュー」で構成されます。問題は、メニューが「アダプティブ」で、どこにいたかを記憶する「プロジェクトのショートカット」セクションを維持していることです。その結果、コンソールを開くたびにメニューの外観が異なって見えるようになります。ただし、この機能を一度理解すると、物事はうまくいきます。ツールの完全なセットは、親の「製品カテゴリ」メニュー項目の「構築」、「実行」、および「分析」サブメニュー内に隠されていることに注意してください。 「Build」 セットには、現時点で必要なものがすべて含まれています。

先に進む前に、次の点に注意してください:

画面上部の
• 情報により、svelte-test プロジェクトが現在「Spark」プランに登録されていることが確認できます。これは、現在行っていることはすべて無料であることを意味します。最終的に、この投稿シリーズでは、Google への支払いを開始する必要がある段階に達し、プロジェクトを「Blaze」料金にアップグレードする必要があります。ただし、心配しないでください。これはまだ先の話です。大した金額を支払うことはありません。Google が請求しようとする金額を制限するために、毎月の予算を作成することができます。
• プロジェクトの詳細は、ツールバーの上部にある「プロジェクト概要」ボタンをクリックすると表示されます。ここで利用できる詳細には、プロジェクト ID のリマインダーとプロジェクトを削除するボタンが含まれます。すべてがうまくいかない場合は、いつでもこれを使用して混乱を取り除き、最初からやり直すことができます。これには費用はかかりません

2.3 Webアプリの登録

Firebase は、Web アプリの名前を知る必要があります:

• をクリックします。 「はじめましょう」メッセージの下のアイコンをクリックし、要求されたらニックネームを入力します。ここでもプロジェクト名を再度使用することをお勧めします (例: 「svelte-dev」)。
• 「このアプリに Firebase Hosting を設定してください」という提案は無視してください。最終的にデプロイメントに取りかかると、ホスティングのニーズはすべて App Engine によって処理されるためです。
• 最後に、[登録] をクリックし、[コンソールに進む] をクリックして、最初のコンソール画面に戻ります。

2.4 - Firestore データベースの初期化

ツール メニューの [ビルド] スタックから [Firestore データベース] を選択すると、以下に示す Firebase コンソール ビューが表示されます。

[データベースの作成] ボタンをクリックすると、コンソールで次の操作が求められます:

1. データベースの「名前と場所」を設定します。 「名前」はデータベースの識別子であり、プロジェクト内に複数の異なるデータベースを作成する場合にのみ関係します。 Google が「デフォルト」設定を使用するように、現時点ではこれを空のままにしておきます。 「場所」は、データベースが物理的に配置される場所を指定します。ここで利用可能なオプションのプルダウン リストを見ると、おそらく Google Cloud サービスの規模が初めてわかるでしょう。そのサーバー ファームは世界中で利用できます。おそらく、現在地に近いサーバーを選択することをお勧めします。たとえば、私は英国に拠点を置いているため、通常は「europe-west2 : Heathrow」を使用します。 Google Cloud コンソールの他のページでは、パフォーマンスと可用性の特性を指定できますが、現時点ではこれらを確認する必要はありません。

2. 「ルール」を使用してデータベースを保護します。ここの画面では、初期の「運用」ルールと「テスト」ルールのどちらを設定するかを選択できます。もちろん、これが意味をなすのは、そもそも「ルール」とは何かを知っている場合に限られますが、今は私がそれらを説明するのに適切な時期ではありません。よくわからない場合は、ここで「テストモード」オプションを確認してください。安心してください。これについては、後で「承認」について話すときに戻ってきます (そして、話したいことはたくさんあります!)。

これら 2 つの段階を完了すると、Firebase コンソールで Cloud Firestore ページが開きます。今はどうする?

3. Firestore データベースの操作

このセクションは、次の質問に答えることを目的としています:

1. データベースとは何ですか?
2. Firestore データベースはどのようなものですか?
3. Firestore コンソールでデータベースを初期化するにはどうすればよいですか?
4. JavaScript で Firestore データベースにアクセスするにはどうすればよいですか?
5. Firestore データベースからデータをロードするために Svelte page.svelte ファイルを取得するにはどうすればよいですか?
6. Firestore データベースにデータを追加するために Svelte page.svelte ファイルを取得するにはどうすればよいですか?

3.1 データベースとは何ですか?

当面の目的として、データベースは、名前付きデータ「フィールド」の値の行を含むテーブルのセットです。したがって、たとえば、「顧客注文」データベースには

が含まれる可能性があります。

• 「顧客 ID」と「顧客住所の詳細」フィールドの値が含まれる「顧客」テーブル
• 「製品番号」フィールドと「製品詳細」フィールドがいっぱいの「製品」テーブル
• 「顧客 ID」によって行われた「製品番号」の注文の詳細を含む「顧客注文」テーブル

重要なことは、そのような取り決めが、データコンテンツの命名とフォーマットに関する一貫した基準で構造化されているということです

3.2 Firestore データベースはどのようなものですか?

Firestore では、テーブルは「コレクション」と呼ばれ、テーブル内の行は「ドキュメント」と呼ばれます。コレクション内に保存されるドキュメントがすべて同じフィールドを持つ必要はありませんが、フィールド名とコンテンツはコレクション全体で一貫したパターンに従うことが期待されます。

Firestore ドキュメントの重要な特徴は、一意の識別子または「キー」が必要であることです。場合によっては、各文書内に「自然な」一意のキーを提供するために使用できる「電子メール アドレス」などのフィールドが存在することがあります。そうでない場合は、Firestore に人工キーを自動的に作成するように依頼できます。

データベース設計は、おそらくシステム開発の中で最も難しい部分ですが、これについては省略します。関連する問題は、実際の経験を積んで初めて明らかになるからです。ただし、時間があれば、Cloud Firestore データ モデル ページをチェックすると便利です。

3.3 Firestore コンソールでデータベースを初期化するにはどうすればよいですか?

この投稿では、デフォルトの Firestore データベースに単一の製品コレクションを作成する方法を説明する予定です。これには、Firestore によって自動的に生成されたキーを持つ製品番号フィールドを含む単純なドキュメントが含まれます。

Firebase コンソールの Firestore ページで、[コレクションの開始] ボタンをクリックし、表示されるポップアップの [コレクション ID] フィールドに名前「products」を入力します。

次に、データ入力ページを使用して、数値「1」の「productNumber」フィールドとテキスト値「Product 1」の「productDetails」フィールドを含むテスト製品ドキュメントを作成します。

• 「フィールド」入力ボックスに「productNumber」と入力してフィールド名を設定し、「タイプ」ボックスを「数値」に設定して、「値」ボックスに「1」（引用符なし）を入力します。
• 「フィールドの追加」をクリックし、「フィールド」入力ボックスに「productDetails」と入力してフィールド名を設定します。「タイプ」ボックスはデフォルトの「文字列」設定のままにして、「Product 1」と入力します（引用符は除く） )「値」ボックス
。

まず [自動 ID] ボタンをクリックしてドキュメントをサインオフし、次にドキュメントを [保存] します。コンソールは次のようになります。

さらにドキュメントを追加したい場合は、この時点で「ドキュメントの追加」をクリックしますが、この場合はその必要はありません。Web アプリの読み取り機能を示すために必要なのは 1 つのドキュメントだけです。

今のところこれで作業は完了ですが、コンソールの「パネル ビュー」では、作成したばかりのドキュメントを編集または削除できることに注意してください。完全に混乱してしまった場合は、コレクション全体を削除して最初からやり直すこともできます。

3.4 Javascript で Firestore データベースにアクセスするにはどうすればよいですか?

ここからが本当に面白くなります！

Google は、Firestore ドキュメントの読み書きを可能にする Javascript 関数のライブラリを提供しています。このようなライブラリは「API」（Application Program Interface）と呼ばれます。 firebase/firestore ライブラリを使用して svelte-dev の製品コレクション内のすべてのドキュメントを読み取る方法を示す次のコードを見てください。

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

const productsCollRef = collection(db, "products"); で始まるセクションに注目してください。これは、Firestore API 呼び出しを使用して、製品コレクション内のすべてのドキュメントの並べ替えられたコピーを State currentProducts 変数に読み込みます。

まず、Firestore クライアント API ライブラリから抽出されたコレクション関数とクエリ関数を使用して、Firebase に製品コレクションを指定し、そのコレクションに対して実行するクエリを定義します。次に、getDocs API 呼び出しによってクエリが起動されます。

この一連の Firestore API 呼び出しの仕組みについては説明しません。これらを「定型コード」、つまりコードの一部として扱い、一度書いたら、その後は単にコピーするようなものとして扱います。 Firestore の「読み取り」、「更新」、「削除」操作をすべてカバーするには、テンプレートのライブラリ全体が必要であることがわかるため、Post 10.1 - Firestore CRUD コマンド テンプレートを確認すると役立つかもしれません。 Google 独自の API の説明を確認したい場合は、投稿 10.1 の最後にリンクがあります。

ここでの「CRUD」は、「作成」、「読み取り」、「更新」、「削除」の略です。

getDocs の結果は、従来「スナップショット」と呼ばれるドキュメントの配列として返されます。ただし、getDocs 関数呼び出しの前に await キーワードが付いていることに注意してください。

ここで await キーワードが必要になるのは、Javascript のデフォルトでは、完了までに予期せぬ時間がかかる可能性のある外部データ ソースを参照する命令が非同期で処理されるためです。 "await" キーワードを使用すると、基本的に (これは非常に単純化されていますが) この配置をオーバーライドできます。もう少し時間があるときに、JavaScript fetch() API と "await" キーワードの簡単なガイド

を参照すると役立つかもしれません。

しかしここで、上記のコード スニペットに戻って、const firebaseConfig ステートメントで始まるセクションを見てください。

firebaseConfig 宣言は、ウェブアプリを特定の Firebase プロジェクトに接続するために必要な設定の詳細を含むオブジェクトを初期化します。これには、Firebase がアプリを見つけて認証するために使用するさまざまなキーと識別子が含まれています。 あなたの特定のウェブアプリの設定は、Firebase コンソールの [プロジェクトの概要/プロジェクト設定] にあります。以下のコード サンプルの firebaseConfig 設定は、私の プロジェクトに固有のものであり、安易に渡すべきではないため、「難読化」されています (これについては後ほど詳しく説明します)。以下のサンプル コードを試す場合は、独自のプロジェクトから firebaseConfig 設定をコピーする必要があります。

firebaseConfig が初期化されると、Web アプリはクエリの const productsCollRef = collection(db, "products"); に必要な db 変数を初期化できます。ステートメント:

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

最後に、これらの API 関数がどこから来たのか疑問に思われるかもしれません。答えは、コード ブロックの先頭にある 3 つのステートメントによって、プロジェクト内の場所からインポートされるということです。

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

ここでは、コードに関数を提供するために「モジュラー ライブラリ」にアクセスしています。コレクションなどの名前付き関数は、コードの後半で必要な参照を満たすために親モジュールから抽出されます。

しかし、これは「そもそもモジュラー ライブラリはどのようにして私のプロジェクトに取り込まれるのでしょうか?」という疑問につながります。もちろん、答えは、それらをそこに配置する必要があり、これを行うために使用するツールは忠実な古い npm であるということです。

VSCode svelte-test ターミナル セッションに戻り (必要に応じて Ctrl-C キーストロークを数回押して開発サーバーを終了します)、次の命令を実行します。

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

1 ～ 2 分後 (インストールには大量のダウンロードが必要です)、Firestore データベース コレクションをダウンロードするコードを実行できるようになります。しかし、これを Svelte Web アプリに埋め込む方法はまだわかりません。それでは、次の質問に進みます...

3.5 Firestore データベースからデータをロードするために Svelte page.svelte ファイルを取得するにはどうすればよいですか?

長かったですが、もうすぐ終わりですので、頑張ってください。

現在、

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル