でCRUD Firebaseドキュメントを作成するFirebaseは、Googleによる開発プラットフォームで、迅速かつ簡単に設定できます。 このチュートリアルでは、Firebase/FirestoreとAngularを統合する基本的なアプリケーションをセットアップします。 Firebaseの公式AngularライブラリであるAngularFireと呼ばれるパッケージとFirebase SDK自体を使用します。

クラウドサービスの使用は、独自のセキュリティ、メンテナンスなどを作成する必要がない時間を節約するため、ますます普及しています。 GoogleのFirebaseでは、データベースとして機能する無料のFirestoreを設定します。Firebaseはリアルタイムデータベースも提供していますが、すべてを1つの大きなJSONツリーに格納します。

これは、単純なデータベースのためになりますが、私たちが使用するものであるcloud Firestoreでは、より大きなデータのために、それがよりスケーラブルになり、柔軟 あなたのデータベースに精通していない場合Firestoreはまた、より速く、全体的に、より直感的です。Firebaseコンソールの設定

Firebaseコンソールでプロジェクトを設定することから始める必要があります。 まず、コンソールを見つけるためにここに行きます。

プロジェクトを作成し、名前を付けて、手順を実行します。 完了したら、プロジェクトの概要が表示されます。

アプリを追加する必要はありません。 あなたはプロジェクトの概要ページにいるはずです。 ここでは、”Firebaseをアプリに追加して開始する”が表示されます。これを行うには、”<>”ボタンをクリックします(これはwebアプリケーションを追加することです)。 あなたはここでホスティングを設定することができますが、我々はこのチュートリアルではそれをカバーしません。

先に行くと、アプリを登録します。 次のページでは、Firebase SDKをセットアップするためのスクリプトが表示されます。 これらは便利ですが、このページでそれらを見逃した場合に必要なすべてを取得する方法については、後で説明します。 先に行くとコンソールに進みます。Firebaseコンソールの左側のペインの[開発]の下に、[データベース]タブがあります。 それをクリックすると、「データベースの作成」をクリックできるページが表示されます。 本番モードまたはテストモードを選択できるモーダルが表示されます。 それは安全ではありませんが、テストには問題ありません。続行すると、場所を選択するように求められます。

続行すると、場所を選択するように求められます。

先に行くと、適切なものを選びます。 完了を押すと、Firestoreの設定に数分かかります。完了すると、あなたはあなたのFirestoreになります。

完了したら、あなたはあなたのFirestoreになります。 先に行くと、”コレクションを開始”を選択します。Firebaseプロジェクトをセットアップするためのコンソールのスクリーングラブ。

FirebaseプロジェクトをセットアップするためのコンソーFirebaseプロジェクトをセットアップするためのコンソールのスクリーングラブ。この例では、単に

ドキュメントIDは空白のままにします—Firestoreはこれを自動的に生成します。 フィールドの下に、単に”フィールド”と入力します。 次に、デフォルトのタイプとして「文字列」が表示されます。 今のところこれを変更する理由はありませんので、そのままにしておいてください。 値の下に、”value1″と入力します。 [保存]をクリックすると、最初の文書が作成されたことがわかります。

後の例では、2番目のドキュメントを作成しましょう。 中央の列には「+Add Document」が表示されます。”先に行くと、それをクリックすると、あなたは文書作成フォームに戻されます。ここでは、Fieldの下に”field”と入力し、Valueの下に”value2″と入力します。 [保存]をクリックします。 今、私たちは二つの文書を持っています。

新しいAngularプロジェクトを開始

Angular CLI(コマンドラインインターフェイス)でフロントエンドプロジェクトを作成しましょう。 ターミナルウィンドウを開き、Angular CLIをグローバルにインストールします。

npm install -g @angular/cli

これがインストールされていると、ngコマンドを実行できます。

ターミナルで、次のように入力します。

ng new your-app-name

プロジェクトには任意の名前を付けることができます。開始すると、Angular CLIがいくつかの設定オプションを案内します。

ルーティングを追加してから、アプリケーション用にAngularで生成するスタイルシート形式を選択できます。その後、残りの部分を通過してAngularアプリを作成します。Angularアプリのディレクトリでは、ng serveビルドを実行してアプリをローカルに提供できます。ng serveng serveng serveng serveng serveng serveiv id=”AngularアプリでFirebaseをセットアップする

Angularプロジェクトディレクトリ内のターミナルで次のように実行してFirebase SDKを取得しましょう。

npm i --save firebase

これでFirebaseがプロジェクトに追加されました。Firebaseコンソールに移動します。 左側のメニューには、その横に歯車のアイコンを持つ”プロジェクトの概要”が表示されます。 アイコンをクリックし、ポップアップウィンドウで「プロジェクト設定」をクリックします。 ここでは、一般タブに移動し、一番下までスクロールします。「Firebase SDK snippet」の下で、CDNの横にあるラジオの下部をクリックします(デフォルトは自動です)。 ここでは、アプリをFirebaseに接続するために必要なものすべてを見つけることができます。 F

ind thefirebaseConfig変数—この情報をAngularアプリにコピーする必要があります。 Angularアプリ内で、生成されたファイルに移動しますapp.module.ts(CLIを使用してAngularプロジェクトを作成した場合:src > app > app.module.tsfirebaseConfig変数全体を貼り付けることができます(インポートのすぐ下には問題ありません)。ビジネスの次の順序は、npmパッケージをダウンロードすることですangular/fire。 このパッケージを使用すると、簡単にFirebaseと対話することができます。次のコード行でプロジェクトにパッケージをインストールできます。

npm i angular/fire

これをインストールすると、ここでapp.module.tsファイルに追加できます。

import { AngularFireModule } from @angular/fire';

imports配列で、アプリでFirebaseを初期化します次のコード行を追加することで、次のコードを追加できます:このインポートは一般的にFirebase用ですが、特定のサービスを追加する場合は、それらを個別に追加する必要があります。

Firestoreの場合、これをファイルの先頭に追加します。

import { AngularFirestoreModule } from '@angular/fire/firestore';

次に、下の近くのimports配列に次のように追加します。

AngularFirestoreModule

アプリで実装

この時点で、Angularアプリでコンポーネントまたは二つを作成することは理にかなっているかもしれません。 プロジェクトのCLIを使用して、アプリケーションに新しいコンポーネントを作成できます。

ターミナルでコマンドを入力してホームコンポーネントを作成しましょう。

ng g c home

“g c”は”generate component”の略です。 これにより、HTMLファイル、SCSSファイル(または使用しているスタイル)、TypeScriptファイル、およびaの4つのファイルを含むホームフォルダが生成されます。specファイル。

追加をスキップしたい場合。このフラグをgenerateコマンドに提案します。

ng g c home --skipTests=true

ホームコンポーネントでロジックを実行しますが、app.component.htmlファイルに追加することを忘れな あなたはいつでもルータにホームコンポーネントを追加することができますが、簡単にするために、ちょうどHTMLに追加してみましょう。私が行ったようにホームコンポーネントを設定すると、セレクタは”app-home”になるので、このようにapp.component.htmlファイルのどこかに追加できます

<app-home></app-home>

その後、ホームコンポーネントで操作を行いましょう。

以前は、FirestoreにtestCollectionという名前のコレクションを作成しました。 まず、私たちのFirestoreからこれら二つの文書を”読む”ことを見てみましょう。

Read

home.component.tsファイルで、Angular/fireパッケージを介してFirestoreをインポートできます。

import { AngularFirestore } from "@angular/fire/firestore";

インポートした後、次のようにコンストラクタで初期化できます。

constructor(private firestore: AngularFirestore) {}

インポートされたAngularFirestore“firestore”のエイリアス—好きな名前を付けます。p>

ngOnInit関数は、GitgoのすぐそばのFirestoreから読むのに最適な場所です。

このコードを見てみましょう。

this.firestoreAngularFirestore用に作成したエイリアスを指します。

.collection('testCollection').get()は、単にコレクション全体を取得しています(後でコレクション内の単一firestoreに.subscribeすると、本質的に非同期でAPIがデータを返すのを待っています。 技術的には、subscribeはRxJSから来ており、変更があるときに更新されるObservableです。これで、Firestoreは常にデータのスナップショットを返すため、ssのエイリアスを指定しました。 データベースのスナップショットの下には、必要なデータであるdocsがあり、.forEach配列メソッドを使用してdocsの配列をループすることができます。上記の例では、Firebase Firestoreからdoc.data()を取得しました。 これはドキュメント全体であり、この場合は1つのプロパティを持つオブジェクトです。 したがって、配列にプッシュするときは、次のコードとして配列を初期化する必要があります。

myArray: any = 

これにより、HTMLで表示し、そこにあるものを消去し、次のように置き換えることができます。

<ul> <li *ngFor='let doc of myArray'> {{doc.field}} </li> </ul

二つの値を持つHTMLの完全なリスト。

2つの値を持つHTMLの完全なリスト。

素晴らしい! Firestoreからのデータの読み取りに成功しました。まず、次のようにReactFormsModuleapp.module.tsReactiveFormsModuleを追加します。p>

home.component.htmlファイルで、新しいデータをキャプチャして送信するフォームを追加しましょう。 次のように記述します。

<form ="this.form"> <input placeholder="New Value" formControlName="newValue" type="text" class="input-field col s12" /> <button (click)="onSubmit()"> Submit </button></form>

上記のHTMLを使用した場合は、次のインポートをhome.component.tsファイルに追加します。

import { FormControl, FormGroup } from "@Angular/forms";

次に、クラスで次のように追加します。

form = new FormGroup({ newValue: new FormControl('') })`
form = new FormGroup({ newValue: new FormControl('') })`
form = new FormGroup({ newValue: new FormControl('') })`
form = new FormGroup({ newValue: new FormControl('') })`
form = new FormGroup({ newValue: new FormControl('') })`
form = new FormGroup({ newValue: new FormControl('') })`

これは、newValueformControlNameを使用して、html、フォーム、および入力から受け入れます。したがって、HTMLでユーザーから入力された文字列を取得し、Firestoreの新しいドキュメントの値に送信します。 これを行うには、次の関数を使用します。

onSubmit() { this.firestore.collection('testCollection').add({ field: this.form.value.newValue }) .then(res => { console.log(res); this.form.reset(); }) .catch(e => { console.log(e); }) }

Firestoreから読み取るのと同じ方法で、今回は同じ参照を使用してコレクションを取得します。

this.firestore.collection('testCollection')

今回は、.add。 私たちが受け取ったテキストでオブジェクトを追加したいと思います:p>

.add({field: this.form.valule.newValue})

これは奇妙に見えるかもしれませんが、フォームの値を取得しているためです。 そこでは、newValuevalue.newValueです。残りの関数は、Firestoreからの応答を処理するための単純な.then.catchです。Firestoreに書き込むと、応答(成功した場合)は大きくて奇妙なオブジェクトになります。

私たちは何も読んでいないので、これらのハンドラの唯一の使用は、Firestoreに書き込んだ直後に何かをしたい場合です(フォームをクリアするために.reset()ng serve)、新しい値を入力してFirebaseに送信した後、リストに表示されないことがわかります。 あなたはページを更新することができ、書き込みが成功した場合、それは、表示されるはずです。 それはなぜですか?私たちがFirestoreに書いた後、私たちは新しい変更を読んでいないからです。

それは私たちがFirestoreに書いた後、新しい変更を読んでいないからです。 現在のngOnInit関数の設定方法では、変更を観察していません。新しいデータを表示するには、データの読み取り方法を変更する必要があります。

ngOnInit() { this.docs = ; const collectionRef = this.db.collection('testCollection'); const collectionInstance = collectionRef.valueChanges(); collectionInstance.subscribe(ss => this.myArray = ss); }

今、私たちは購読しています。 新しいドキュメントをデータベースに追加すると、アプリのリストにも追加されることがわかります。 主な違いは、.valueChanges()を購読していることです。

Query

ドキュメントの値に基づいてFirestoreを照会するために使用できる別のフォームを追加しましょう:簡単にするために、最初の形式とまったく同じですが、名前と機能が異なります。 先に行くと、あなたが好きなようにそれに名前を付けますが、ちょうど私たちが前のフォームで使用したものではなく、新しい名前を使用してくださ

typescriptファイルで、クラスの先頭にあるフォームを必ず初期化してください。

secondForm = new FormGroup({ valueToGet: new FormControl('') })

また、ここですべてを初期化する場所には、クエリされた文書を置くための変数としてsingle: any;message: string;onQuery関数の構築を始めましょう。

onQuery() { if (!this.secondForm.value.valueToGet) { this.message = 'Cannot be empty'; this.single = null; } else { this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet)).get() .subscribe(ss => { if (ss.docs.length === 0) { this.message = 'Document not found! Try again!'; this.single = null; } else { ss.docs.forEach(doc => { this.message = ''; this.single = doc.data(); }) } }) } }

まず、ユーザーが何かを入力したかどうかを確認します。 入力はthis.secondForm.value.valueToGetにあります。したがって、それが空の場合は、メッセージを返し、空の文字列をFirebaseに送信しないようにします。 この”if”チェックでは、以前に正常に照会した可能性があるため、”単一の”変数が空であることも確認しますが、フォームを空にできないというメッセージのみ

空でない場合は、先に進み、Firestoreを照会します。 あなたは”collection”パラメータに何か新しいことに気付くでしょう—Angularでは、実際にはそのパラメータの中でクエリを実行します。 ref.whereはFirestoreコレクション内のドキュメントを照会する最も一般的な方法です。.whereメソッドで、まずFirebaseに各ドキュメント内でどのフィールドを照会するかを指示します。 私たちのフィールドはすべて単に”フィールド”なので、それは簡単です。次に、コンパレータ==isEqual<>=などの他のコンパレータを使用することもできます。最後に、3番目のパラメータは、フィールドを何と比較するかをFirebaseに伝えることです—私たちの場合、ユーザーからの入力値をここに入れて、それがFirestoreのどこかに値Firestoreの制限に関する簡単なメモ:.whereメソッドを使用したクエリは制限されています。1つの文字でオフになっているもの、またはFirestoreが大文字として保存している小文字のものを確認することができ、それは返されません。

Firestoreに一致するようにすべてのユーザー入力を小文字にするなど、フロントエンドで支援することができますが、これまでのところしかできません。もちろん、Firestore全体をフロントエンドに引っ張ることができます(私たちがやっているように)。 クエリの方が良いでしょうが、Firestoreが巨大であれば理想的ではないかもしれません。 フルテキスト検索を行うための推奨される方法は、Algoliaを使用することです。値を読み込んでいるので、コレクション全体を読み込んだときと同じように.get()します。しかし、Firestoreからスナップショットを取得した後、何かが返されたかどうかを確認するために、”if”チェックを入れたいと考えています。 スナップショットをconsole.logでき、Firestoreに一致するものがなくても空にならないかどうかを確認できます。ただし、クエリに一致するものがない場合、スナップショットのdocssingle変数をnullに設定します。 一致するものが見つかった場合は、その逆を行い、メッセージを空に設定し、返されたデータにsinglehome.component.htmlに戻りましょう。 「メッセージ」と「単一」変数を処理するためのHTMLを追加しましょう:

<p style="color: red;">{{message || null}}</p><div *ngIf="single"> <h1>{{single.field}}</h1> <button style="background-color: lightblue">Edit</button> <button style="background-color: red">Delete</button></div>

ここでは非常に簡単です。 *ngIfディレクティブを使用して、一致したドキュメントが見つかった場合にのみ表示します。 あなたが思い出すように、それが見つからなかった場合、我々はnullに”single”を設定し、したがって、全体*ngIfdiv隠されます。 空の文字列に設定されている場合は、”メッセージ”と同じです。

また、次のセクションのボタンが追加されたことに気付くでしょう。ここから私たちを大きく助けるものは、照会したドキュメントのidididを与えません。さらに、最初にFirestoreでドキュメントを作成したときに、Firestoreに自動的にids;アプリから作成したものも同じことが起こります。 では、どのようにしてidを取得しますか?

onQuery関数で、データベースクエリへの参照を次のように設定しましょう。

const docRef = this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet));

.get()それ以降のすべてを中断し、別の行で次のように参照を使用します。

docRef.get().subscribe(ss => ...)

…など。 それは本質的に同じことです。ここで、subscribeメソッドの下に、ドキュメントを取得する別の行を追加しましょうid:

docRef.snapshotChanges().forEach((changes) => { changes.map((a) => { this.id = a.payload.doc.id; });});

明らかに、初期化する必要がありますthis.idid: string = ''。 しかし、今、私たちは私たちが作成する私たちの編集と削除の両方の機能で使用するidを持っています。

home.component.htmlファイルに戻って、以前に作成した編集ボタンを次のように変更します。

<button style='background-color: lightblue' (click)='openEdit()'>Edit</button>

このopenEdit()関数を使用して、TypeScriptファイルで編集変数を初期化することができます。

edit: boolean = false

それを切り替えるには、openEdit関数を作成します:関数が呼び出されるたびに、編集変数がfalseからtrue、またはtrueからfalseになります。ここで、HTMLファイルに次のフォームを追加します。 Editがtrueのときに表示されます:

<form *ngIf="edit" ="this.editForm"> <input placeholder="{{single.field}}" formControlName="replaceValue" type="text" class="input-field col s12" /> <button (click)="onRename()"> Rename </button></form><p style="color: red;">{{message2 || null}}</p>

再び、別の形式。 ここで重要なことは、ドキュメント全体を上書きしないことです—idを保持しますが、フィールドはここで入力したものに変

home.component.tsmessage2onRename関数を作成します。p>

onRename() { if (!this.editForm.value.replaceValue) { this.message2 = "Cannot Be Empty!"; } else { this.firestore.collection('testCollection').doc(this.id).update({ field: this.editForm.value.replaceValue }); this.edit = false; this.message2 = ''; this.single = null; } }

ここで気づくべき新しいことがいくつかあります。まず、.docidid.update.setではなく、指定したプロパティのみを上書きします。 つまり、ドキュメントに3つのフィールドがある場合は、次のようにupdateメソッドを使用して1つだけを上書きできます。

ここでも、Firestoreからドキュメントのリストを再読み込みします。 次に、単一のクエリ、編集ボックス、および以前にそこにあったメッセージを圧縮することができます。

Delete

deleteメソッドを使用することを除いて、基本的に更新と同じです。

まず、htmlで、削除ボタンを変更しましょう:ここでは、delete関数を作成するだけです。

ユーザーがオブジェクトを削除できるようにする前に、警告を出すのが賢明かもしれません。 TypeScriptファイルに次のコードを追加します。

delete() { if (confirm('Delete?')) { this.db.collection('testCollection').doc(this.id).delete(); this.edit = false; this.single = null; } }

confirm('Delete')idでドキュメントを取得し、その上でdeleteメソッドを呼び出します。 そのような単純な。これで、Firestoreドキュメントを作成、読み取り、更新、および削除できるAngularアプリが正常に作成されました。 ご覧のとおり、Firebase Firestoreは使いやすく、すぐに使用できます。 これは何千もの複雑な文書に簡単に拡大することができます。Firestoreの基本についての良いアイデアが得られたので、より高度なトピックについては公式ドキュメントをチェックしてください。

ユーザーが正確にどのようにAngularアプリを体験するか

Angularアプリケーションのデバッグは、特にユーザーが再現するのが難しい問題 実稼働環境のすべてのユーザーの角度の状態とアクションを監視および追跡することに興味がある場合は、LogRocketを試してみてください。 LogRocketダッシュボード無料トライアルバナーhttps://logrocket.com/signup/

LogRocketは、ネットワーク要求、JavaScriptエラー、および大いに多くを含むあなたのサイト 問題が発生した理由を推測するのではなく、問題が発生したときにアプリケーションがどのような状態であったかを集計して報告することがで

LogRocket NgRxプラグインは、角度の状態とアクションをLogRocketコンソールに記録し、エラーの原因と問題が発生したときのアプリケーションの状態を説明します。

Angularアプリのデバッグ方法を近代化-無料で監視を開始します。p>

コメントを残す

メールアドレスが公開されることはありません。