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 ファイルを取得するにはどうすればよいですか?

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

現在、<script> src/routes/page.svelte ファイルのセクションには、次のステートメントがあります:<br> </script>

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

ご存知のとおり、これは products フィールドを状態変数として宣言し、空の配列として初期化します。ここで行うことは、「空」を製品 Firestore コレクションのコンテンツに置き換えることです。

残念なことに、これまでに見てきたように、これには非同期操作が含まれます。 Svelte はページの初期読み込みを遅くするものを望まないため、これは状況をやや複雑にします。情報が後から追加されるのは嬉しいことですが、ユーザーの第一印象は瞬時の反応である必要があります。 Svelte には、初期データを page.svelte ファイルにロードするための標準的な取り決めがあります。次のようになります:

まず、新しい src/routes/page.server.js ファイルを作成します。このファイルは、すべての非同期コードをload() 関数 (必須の名前) 内にラップし、その結果をオブジェクトとして返します。

コードは次のとおりです

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

上記のロード関数は、値が Firestore API 呼び出しによって構築された currentProducts 配列である単一の products プロパティを持つオブジェクトを返します。

これは非常に良いことですが、これを page.svelte の製品状態変数にどのように伝えるのでしょうか?

最初のステップは、新しいデータ (必須の名前) 状態変数を page.svelte の prop (「プロパティ」の略) として通知することです。これを行うには、export キーワードを使用して宣言します。次のようになります。

npm install firebase

このシリーズのポスト 3.1 に到達して「コンポーネント」について学ぶまで、このシリーズではプロップについては取り上げません。ここでは、page.svelte ファイルをパラメーターとしてデータを持つ関数として考えてください。

ここで page.svelte ファイルを実行すると、SvelteKit フレームワークは、予約されたデータ キーワードを含むエクスポート let データ宣言を見て、「ああ、このページに関連付けられたload() 関数を実行する必要がある」と考えます。製品データは page.svelte の data prop に正式に返され、これはリアクティブ変数であるため、ページが更新されます。

既存の「テンプレート」コードを新しい配置で機能させるために必要なのは、製品参照を data.products に置き換えることだけです

page.server.js ファイルは、Svelte の「サーバー側」コード、つまりサーバー内で実行されるコードの最初の部分です。これまでに見てきたすべての page.svelte コードは、ブラウザーで「クライアント側」で実行されます。対照的に、page.server.js ファイルは、npm run dev によって起動されたローカル サーバーで実行されるか、デプロイ後に App Engine サーバーの Node.js 環境で実行されます。サーバー側のコードはクライアント側のコードよりも高速に実行され、安全です。それを表示または変更できるのは、その所有者であるあなただけです。

Post 2.2 の page.svelte ファイルの修正バージョンの完全なコードは次のとおりです:

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

このコードはどこに置くべきですか?現在、「別の製品の追加」

の on:click ボタンによって起動されるコードは、page.svelte ファイル内に存在します。しかし、Svelte 氏は、セキュリティと効率性の理由から、データベースの更新は、ここですでに作成したload() 関数と並行して、page.server.js のアクション() 関数で「サーバー側」で実行する必要があるとアドバイスしています。この関数は、

からデータを「投稿」することによってトリガーされます。

新しい

は次のとおりです。 page.svelte の配置は次のようになります:

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

「actions」関数によって返されたオブジェクトは、<script> で宣言されたフォーム prop を通じて page.svelte ファイルで使用できるようになります。セクション。ここでは、エクスポートレットフォームを示します。このステートメントは、load() 関数の結果を返すために以前に使用した data prop と類似しています。</script>

page.svelte と page.server.js の完全なバージョンは次のとおりです:

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

このコードをコピーする場合は、忘れずに firestoreConfig データを再度リセットしてください。動作させるのに問題がある場合は、クライアント側コードのデバッグに関する前回の投稿のアドバイスも思い出し、サーバー側の問題を修正するためのアドバイスについては、以下の「ポストスクリプト セクション」を参照してください。頑張ってください!

page.server.js 内の FireStore API インポートと db 構成ステートメントには、それらが提供する関数の外に移動し、ファイルの <script> の先頭に再配置することで「ファイル スコープ」が与えられていることに注意してください。セクション。より複雑なプロジェクトでは、インポートとしてより広く共有できるように、別の lib フォルダーに db を構成するのが一般的です。</script>

新しいコードでは、古い page.svelte ファイルの on:click 関数に以前に表示されていた PopupVisible フィールドのリセットが削除されていることにも注意してください。フォーム送信時の Svelte のデフォルトのアクションは、ページをリロードすることです。その結果、フォームが処理されると、popupVisible が false に再初期化され、更新された Firestore 製品コレクションから「Currently-registered products:」配列が更新され、ポップアップが消えます。ボーナスとして、products getDocs の orderBy("productNumber", "asc") 修飾子のおかげで、新しい製品番号が正しい並べ替え順序で挿入されます。

警告: このようなコードは、Firestore データベースが公開されている場合にのみ機能します。コレクションへのアクセスを承認されたユーザー（つまり「ログイン」しているユーザー）に制限するルールを追加すると、ここで使用している Firestore テンプレートは失敗します。このシリーズの次のセクションの投稿ではその理由を説明し、特に投稿 3.4 では、純粋にクライアント側の page.svelte ファイルに基づいたコードにフォールバックする方法について説明します。ただし、これにはセキュリティとパフォーマンスが犠牲になるため、これらの「小さなイライラ」を乗り越えて、クライアント サーバー コードの開発を続けていただければ幸いです。現時点では、データベース ルールが次のようになっていることを確認してください:

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

4. まとめ

この投稿であなたの忍耐力が限界まで高まったことと思います。 Web アプリが動作し、正気の状態が保たれてこのポイントに到達した場合は、自分に金星をあげてください。Svelte の核となるトピックのほとんどをカバーし、重要なスキルを習得したことになります。

そうは言っても、学ぶべきことはまだたくさんあります。たとえば、この投稿では、基本的なエラー処理とフォーム検証の仕組みについての説明を省略しました。さらに、Svelte ルート (つまりページ)、レイアウト (ページ ヘッダーとトレーラー)、コンポーネント、およびセキュリティに関する難しい問題 (ログイン設計とデータベース ルール) についても紹介したいと思います。最後に、Web 上でライブ操作を行うために Web アプリをどのようにデプロイするかという興味深い問題があります。ぜひ読み続けてください!

追記：うまくいかないときは

Web アプリに「サーバー側」処理を導入すると、あなたは一気に上級開発者リーグに一気に進みます。これは、page.svelte ファイルで使用して楽しんでいただけた「Chrome Inspector」テクニックが、page.server.js ファイルでは機能しないためです。しかし、すべてが失われたわけではありません。ここでは、上級開発者が使用するテクニックを紹介します:

追記(a): ターミナルセッションでサーバー側のコードをデバッグする

VSCode エディターはサウンド コードの生成を支援するために最善を尽くしますが、いくつかの基本的なエラーは、SvelteKit サーバーが Web アプリを実行しようとしたときにのみ明らかになります。この時点で、画面に「500 - 内部エラー」メッセージが表示される場合があります (何らかの表示がある場合)。ここでは page.server.js ファイルは基本的に見えないため、ブラウザはここではあまり役に立ちません。 [ソース] タブの [ページ/ローカルホスト] ストレージ階層には、引き続き page.svelte ファイルが表示されますが、page.server.js については何も述べられていません。

しかし、検査官はエラーが発生したことを知っており、その原因について有用な手がかりを提供してくれることがあります。メニュー バーの右端には、中央に十字が付いた赤いアイコンが表示されます。これをクリックすると、インスペクターのコンソールが開き、エラーの詳細の概要が表示されます。ただし、完全な詳細が必要な場合は、npm run dev でサーバーを起動したターミナル セッションで見つけることができます。

ここでの問題は、詳細レベルがおそらく多すぎると感じる可能性が高いことです。すべてのエラーは、障害点に先立つサーバー関数呼び出しの完全なシーケンスを詳細に示す「コール スタック」とともに報告されます。これは、間違ったフィールド名の宣言によって生じた短いものです (const db= を const dba =
と意図的に間違えています)

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

ターミナル ウィンドウは、このような情報を表示するのに適した場所ではありません。場合によっては、必要な情報を見つけるために上下にスクロールする必要があり、他のアクティビティからの出力によって情報がさらに見えにくくなる場合があります。それでも、あなたが持っているすべてなので、それを最大限に活用する必要があります。

ただし、上記の例では、エラーの原因が非常に明確に示されていることに注意してください。サーバーは、page.server.js の 18 行 38 列で db 変数への参照を検出しましたが、db はまだ参照されていません。と宣言した。それで必要なものはすべて揃っていると思います。

ターミナル ウィンドウは、ロジックの問題を解決するのにも役立ちます。以前は、「デバッグ」は通常、コード内の重要なポイントに console.log メッセージを配置することによって実行されていましたが、ここでこのアプローチを使用するのは十分に簡単です。一般的なログ メッセージは次のようになります:

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

page.server.js ファイルに配置されたこのようなログ メッセージは、VSCode ターミナル ウィンドウに表示されます (対照的に、クライアント側の page.svelte コード内のログ ステートメントは、引き続き に表示されます)ブラウザの コンソール ウィンドウ)。

追記(b): VSCodeデバッガーでサーバー側のコードをデバッグする

Console.log メッセージは、軽微な問題を修正するのに適していますが、ブラウザの「ブレークポイント」デバッグ ツールの高度な機能を備えたものを使用できるようになることが期待されています。恐れることはありません。これは VSCode で見つけることができます。エディタ。やることは次のとおりです:

1. デバッグする page.server.js ファイルを開き、検査したいポイントにブレークポイントを設定します。これを行うには、ブレークポイントとして使用するソース行にマウスを置き、その左側に表示される淡い赤い点をクリックします。淡い赤色の点が明るい赤色に変わります。
2. VSCode コマンド パレット (ショートカット「ctrl shift p」) で、[デバッグ: ノード プロセスにアタッチ] を選択し、ワークスペース内のプロジェクトのリストを取得します。デバッグしたいものを選択します。
3. 起動したばかりのターミナル セッションには「JavaScript デバッグ ターミナル」というラベルが付いていることに注意してください。このターミナルに「npm run dev」と入力すると、表示される通常の Vite 出力に「Debuggerattached」行が追加されていることに注目してください。 VSCode のアクティビティ バーがオレンジ色に変わったことにも注目してください
4. 次に、Vite によって表示される http://localhost アドレスにマウスを置き、「Ctrl キーを押しながらクリック」して Web アプリを起動します。 Web アプリがポップアップ ウィンドウで開きます。
5. page.server.js ファイルのエディター ページがアクティブなデバッグ セッションになり、最初のブレークポイントで実行が停止したことがわかります。エディター ウィンドウの上部のパネルには、おなじみの「次のブレークポイントに進む」などのボタンが表示され、フィールド名の上にマウスを置くと、値を表示するツールチップが表示されます。前と同様、変数代入ステートメントでデバッグ セッションが停止した場合、その結果は次のステートメントに進んだときにのみ表示されます。
6. デバッグ コントロール パネルの端にあるアイコンにマウスを移動して、デバッグ セッションを終了します。これにより、「alt」キーを押したときに「切断」アクションと「停止」アクションが切り替わります。 「切断」と表示されたらこれをクリックすると、オレンジ色の VSCode アクティビティ バーが再び青色に変わります。デバッグを再開したい場合は、デバッグ端末ウィンドウで Web アプリの URL を再度「Ctrl キーを押しながらクリック」します (明示的に「ビン」にするまでアクティブなままになります)

以下のスクリーンショットは、load() 関数からの戻り時に停止したこの投稿の page.server.js ファイルを示しています。この時点で返品の製品プロパティに「マウスオーバー」すると、Firestore 製品コレクションの読み取り結果が表示されます。

VSCode デバッガーで利用できる機能の詳細については、「VSCode デバッグ」のドキュメントを参照してください

以上がNgSysV.Google の Firestore を使用したシンプルな洗練された情報システムの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。