IONIC Chat With Firebase

Firebaseとのイオンチャット

Ionic Firebaseチャットは、Firebaseを搭載したサンプルチャットウィジェットです。

使用されるテクノロジー：

• イオンフレームワーク（V3）
• Firebase 3（Angularfireを使用するつもりはありません）

はじめる

これらの指示により、プロジェクトのコピーを作成して、開発とテストの目的でローカルマシンで実行します。ライブシステムにプロジェクトを展開する方法に関するメモの展開を参照してください。ソフトウェアをインストールするために必要なものとそれらのインストール方法

前提条件

まず、FireBaseで新しいプロジェクトを作成する必要があります

ステップ1：

FireBase（https://firebase.google.com）でログインし、新しいプロジェクトを作成します

ステップ2：

[WebアプリにFirebaseを追加]をクリックし、キーを取得します

イオンプロジェクトの作成

Firebaseからプロジェクトを作成したら、チャットアプリケーション用に新しいイオンプロジェクトを設定できます

新しいイオンプロジェクトを作成します

 ionic start  -- v2 ionicfirechat blank

作業ディレクトリを変更します

 cd ionicfirechat

プラットフォームを追加します（必要に応じて）

 ionic platform add android
ionic platform add ios

Firebaseのインストールとセットアップ（app.component.ts）

Firebase node_modulesをプロジェクトに追加します

npm install firebase --save

app.component.tsにfirebaseをインポートします

import * as firebase from ' firebase ' ;

app.component.tsに構成を追加します。 FireBase構成に置き換えます

 let config = {
 apiKey : 'YOUR_APIKEY' ,
 authDomain : 'YOUR_AUTH_DOMAIN' ,
 databaseURL : 'YOUR_DATABASE_URL' ,
 projectId : 'YOUR_PROJECT_ID' ,
 storageBucket : 'YOUR_STORAGE_BUCKET' ,
 } ;
firebase . initializeApp ( config ) ;

チャット用のUIの作成（home.html）

 <ion-header>
  <ion-navbar>
    <ion-title>chat</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <div id="chatMessage">
    <div class="message" *ngFor="let message of messages">
      <div [class]="message.userName == user ? 'innerMessage messageRight' : 'innerMessage messageLeft'">
        <div class="userName">{{ message.userName}}</div>
        <div class="msg">{{ message.message}}</div>
      </div>
    </div>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-input type="text" name="message" placeholder="Message" [(ngModel)]="message"></ion-input>
    <ion-buttons end>
      <button ion-button icon-right color="royal" (click)="sendMessage()">
        <ion-icon name="md-send"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

src/app/app.module.tsファイルを開き、構成設定に以下のコードを置き換える必要があります。

ユーザーが[送信]ボタンをクリックすると、Firebaseにメッセージを送信する必要があります[send（）を呼び出して[ファイヤーベース]にメッセージを挿入し、既存のメッセージをクリアする必要があります

 sendMessage ( ) {
    this . db . list ( '/chat' ) . push ( {
      userName : this . user ,
      message : this . message
    } ) . then ( ( ) => {
      this . message = ''
    } )
  }

FireBaseからメッセージを読むユーザーが新しいメッセージを作成したときに、内部に表示する必要があります

 this . db . list ( '/chat/' ) . valueChanges ( ) . subscribe ( data => {
      this . messages = data
    } ) ; 

テストの実行

このシステムの自動テストのためにコマンドラインの下を実行します

  $ionic serve

ライセンス！

CoverFlowはMITライセンスです

教えてください！

コンポーネントを使用しているプロジェクトへのリンクをお送りください。 [email protected]にメールを送信して、私たちの仕事に関する質問や提案があるかどうかをお知らせください。