IONIC Chat With Firebase

Firebase와의 이온 채팅

Ionic Firebase 채팅은 Firebase로 구동되는 샘플 채팅 위젯입니다.

사용 된 기술 :

• 이온 성 프레임 워크 (v3)
• Firebase 3 (우리는 AngularFire를 사용하지 않을 것입니다)

시작하기

이 지침을 통해 개발 및 테스트 목적으로 로컬 컴퓨터에서 프로젝트 사본을 실행할 수 있습니다. 라이브 시스템에 프로젝트를 배포하는 방법에 대한 메모는 배포를 참조하십시오. 소프트웨어를 설치하는 데 필요한 사항과 설치 방법

전제 조건

먼저 Firebase에서 새로운 프로젝트를 만들어야합니다

Step 1:

Firebase (https://firebase.google.com)에 로그인하고 새 프로젝트를 작성하십시오

Step 2:

"웹 앱에 Firebase 추가"를 클릭하고 키를 얻습니다.

이온 프로젝트 생성

Firebase에서 프로젝트를 만들어 주면 채팅 애플리케이션을위한 새로운 Ionic Project를 설정할 수 있습니다.

새로운 이온 프로젝트를 만듭니다

 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에 메시지 보내기 버튼을 클릭 할 때 보내기 버튼을 클릭해야합니다. 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

특허!

커버 플로우는 미트 라이센스가 있습니다

알려주세요!

귀하가 우리의 구성 요소를 사용하는 프로젝트에 대한 링크를 우리에게 보내면 정말 기뻐할 것입니다. [email protected]으로 이메일을 보내고 우리의 작업에 관한 질문이나 제안이 있으면 알려주십시오.