Firebaseとionicで掲示板アプリを作成する③


Firebaseを使ってスマホの掲示板を作成する

Firebaseを使ってサクッとリアルタイム掲示板を作っていきます。
現在の環境は以下の通り。

windows 10 64bit
Visual studio code 1.9.1
ionic 2.1.4
node.js 6.10.0
npm 4.2.0

今回は、ionicプロジェクトを編集してFirebaseへデータを追加できるようにします。

ionicプロジェクトを編集

第二回までの内容でデータの追加は取得ができていれば、追加は非常に簡単にできます。

プロジェクトを編集

以下のモジュールに対して変更を行っていきます。
また、追加する内容は以下の通り。

  • src/pages/home/home.ts
  • Firebaseへデータを追加するメソッドと入力に使用する変数を作成します。

  • src/pages/home/home.html
  • 入力領域と投稿ボタンを作成します。

home.tsの編集

home.tsに、入力に使用する変数とFirebaseへデータを追加するメソッドを追加します。

追加する変数(12行目):content
htmlの方で入力されたデータを取得する変数です。

追加するメソッド(18~24行目):addTalk
コンストラクタで取得したFirebaseのデータに対し、pushメソッドを使用することでデータを追加することができます。
渡す内容はkeyとvalueのjson形式で記載します。
また、投稿後入力に使用する変数contentを初期化してます。

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  talks: FirebaseListObservable<any>;
  content: string;

  constructor(public navCtrl: NavController, angularFire: AngularFire) {
    this.talks = angularFire.database.list('/talks');
  }

  addTalk() {
    this.talks.push({
      name: "名無しさん",
      content: this.content
    });
    this.content = "";
  }

}

home.html

home.htmlに入力する領域と投稿ボタンを作成します。
追加内容としては17~26行目です。

<ion-header>
  <ion-navbar>
    <ion-title>
      掲示板
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>掲示板</h1>
  <ion-list>
    <ion-item *ngFor="let talk of talks | async">
      {{talk.name}}
      {{talk.content}}
    </ion-item>
  </ion-list>
  <ion-grid>
    <ion-row>
      <ion-col width-80>
        <ion-input type="text" [(ngModel)]="content" placeholder="投稿内容を入力"></ion-input>
      </ion-col>
      <ion-col width-20>
        <button ion-button (click)="addTalk()">投稿</button>  
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

アプリ実行結果確認

コマンドプロンプトでプロジェクトフォルダに移動して、以下のコマンドを実行してアプリをブラウザで実行します。

コマンド:ionic serve

ブラウザが立ち上がるので何か入力してみます。

投稿を押してみます。

無事書き込みが投稿されました。

Firebaseでデータベースの中身を見ていると先ほど入力した投稿内容が追加されていることがわかります。

次回予定

次回は、掲示板に認証機能を付与していきます。

記事一覧

Firebaseとionicで掲示板アプリを作成する①
Firebaseとionicで掲示板アプリを作成する②
Firebaseとionicで掲示板アプリを作成する③
Firebaseとionicで掲示板アプリを作成する④
Firebaseとionicで掲示板アプリを作成する⑤

  • このエントリーをはてなブックマークに追加

PAGE TOP