npm install angularfire2 firebase
var config = {
apiKey: 'Your credentials here',
authDomain: 'Your credentials here',
databaseURL: 'Your credentials here',
projectId: 'Your credentials here',
storageBucket: 'Your credentials here',
messagingSenderId: 'Your credentials here'
};
app/models/song.interface.ts
export interface Song {
id: string;
albumName: string;
artistName: string;
songDescription: string;
sonName: string;
}
Cloud Firestore のコレクション songList を操作するサービスを記述します。
ionic generate service services/data/firestore
自動生成された app/services/data/firestore.service.ts に以下を追記
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Song } from '../../models/song.interface';
export class FirestoreService {
constructor(public firestore: AngularFirestore) { }
createSong(
albumName: string,
artistName: string,
songDescription: string,
songName: string
): Promise<void> {
const id = this.firestore.createId();
return this.firestore.doc(`songList/${id}`).set({
id,
albumName,
artistName,
songDescription,
songName,
});
}
getSongList(): AngularFirestoreCollection<Song> {
return this.firestore.collection(`songList`);
}
getSongDetail(songId: string): AngularFirestoreDocument<Song> {
return this.firestore.collection('songList').doc(songId);
}
deleteSong(songId: string): Promise<void> {
return this.firestore.doc(`songList/${songId}`).delete();
}
}
app/home/home.page.ts に下記を追加
import { FirestoreService } from '../services/data/firestore.service';
import { Router } from '@angular/router';
export class HomePage {
public songList; // add this
constructor(
private firestoreService: FirestoreService,
private router: Router
) { }
ngOnInit() {
this.songList = this.firestoreService.getSongList().valueChanges(); // add this
}
}
app/home/home.page.html に下記を追加
<ion-content class="ion-padding">
<ion-card *ngFor="let song of songList | async" routerLink="/detail/{{song.id}}">
<ion-card-header>
{{ song.songName }}
</ion-card-header>
<ion-card-content>
Artist Name: {{ song.artistName }}
</ion-card-content>
</ion-card>
</ion-content>
セキュリティ設定をしていない場合は、全てのアクセスが却下となります。 また一番ゆるく(全てを許可)すると、誰でもアクセスできるようになります。
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
この設定
export var firebaseConfig = {
projectId: "my-project-name",
storageBucket: "my-project-name.appspot.com",
};
だけで、誰でもアクセスできてしまいます。
service cloud.firestore {
match /databases/{database}/documents {
match /songList/{songId} {
allow read, write: if true;
}
}
}
なお {songId} は ワイルドカードです。
* と記述したいところですが、{songId}と書きます。
{songListId}でもいいみたいです。(文字列はなんでも良いらしい)
引用: http://bit.ly/2Om37Cz
http://bit.ly/385JJBi
【図で解説】Firestoreでできること・できないこと
[Firebase][Cloud firestore] データをユーザーごとに所持するルール | deecode blog