angularfire でのsns構築
Post on 13-Apr-2017
80 Views
Preview:
TRANSCRIPT
Angular2 + rxjs + Firebase + Cloud functionにてリアクティブ SNSを作る。
森山雄太
SNSとは何か?• 各ユーザにカスタマイズされた web 情報がある。• ユーザ間の interaction がある。• 他ユーザのアクションが、別のユーザの web 表示
に影響を与える。• Reactive に相互反応がある。
構成
各ソリューションの役割• Firebase
– 接続するユーザに対して、リアルタイムにデータを届ける。• Angular + rxjs
– Client side でデータに対して、処理および描画を行う。• Cloud Function
– Firebase からイベントを受けて、データ処理などを実行
Rxjsの仕組みと、AngularFireでの利用
Rxjsの処理EventSource
マウスイベントfromEvent( 'mouseup')fromEvent( 'mousedown')
時間interval(1000)
カスタムイベントcreate()
Observer
var observer = {
next: x => イベントが来たときのしょり , error: err => エラー処理 , complete: () => 完了時の処理 ,};
イベントをオブザーバに渡す前の処理Filter, map, scan
operator
Subscribe()購読の開始 UnSubscribe 購読の終了
Firebaseデータの Angularでの利用item = af.database.object('/item');
<h1> {{ (item | async)?.name }}</h1>
Firebase の item というパスにあるデータを取得
View への反映
Firebaseデータの Angularでの利用item = af.database.object('/item‘, { preserveSnapshot: true });item.subscribe( (snapshot) => { console.log(snapshot.key) console.log(snapshot.val()) });
Firebase に格納されているデータを js の中で利用する場合にはSnapshot として取得する。
チャット
Firebase Realtime Database
Key Value 形式でデータを任意の形で格納が可能。
Real time dataの Angularでの表示chat_items = this.af.database.list('/event/chat/' + event_id );
Ts file
<ul> <li *ngFor=“let chat of chat_items | async”> {{ chat.message}} {{chat.user}}</li></ul>
html file
Firebase の特定のパスを指定することで、そのパスのデータの変更を監視
Async pipe を指定することで、 html template において、データ変更があったときにそれを逐次反映させる。
イベント参加
Cloud functionを用いた、データ整形
イベントに参加している人の一覧
各人が参加しているイベントの一覧
イベントに関する情報
各ユーザのイベント情報の格納先
Cloud functionを用いた、データ整形functions.database.ref('/event_related/event/{event_id}/participants/{user_id}').onWrite(event => { const ref = "/users/my_event/" + user_id + "/" + event_id; admin.database().ref(ref).set(true)})
Ts file
イベント情報がかきこまれたときに、 user データへのコピーを実現 - onWrite を用いて、特定のパスにデータが書き込まれたことを サーバサイドで監視ができる。 - user data は、自分自身以外は書き込めない領域なので、 client サイドからの書き込みは制限している。
各個人での my event list表示my_event_observable = this.af.database.list('/users/my_event/' + my_userid, { query: { limitToLast: 20,
orderByChild: 'date_time_start', startAt: current_time - 2*24*60*60*1000 }
});
Ts file
<ul *ngFor="let event_data of my_event_observable | async"> <app-my-event [event_id]="event_data.$key"[event_data]="event_data"> </app-my-event> </ul>
html file
Firebase の自分のイベント情報のリストを監視
イベント情報を、各イベントの情報を表示する app-my-event に受け渡し
ユーザの search
イベントに招待する人を検索する。招待したい人の名前を検索
検索されたユーザを検索
選択された人に招待
検索用語の取得
text_input_source = text_keyup.debounceTime(200);
text_input_source.subscribe( ()=>{ name_query_subject.next( context_input );
} )
Ts file
<input (keyup)="text_keyup.next()“ [(ngModel)]="context_input">
html file
Input 要素に、文字をタイピングするたびに、イベントを取得する。
イベントがおきて、 200msec の間、イベントがおきなかったときに、イベントを発火
200msec の間、イベントがおきなかったときに、Input に設定されていたテキスト情報を取得して、イベント発火
検索用語での検索candidate_users_obserbable = af.database.list('/users/user_basic/',
{ query: { limitToFirst: 20, orderByChild: 'full_name', startAt: name_query_subject }
} );
Ts file
<ul> <li *ngFor="let user of candidate_user_items" > {{user.full_name}} {{user.pict_src}} </li></ul
html file
複数の情報源のsubscribe
CombineLatest
AJAX
Mouse Event
Click Event
Web SocketKeyboard
Application
CombineLatest
this.combined_subscription = Observable.combineLatest([ user_subject, room_subject, game_subscription, room_user_subject], (user_env, skyway_room_data , game_status, firebase_room_user)=>{
}
top related