IONIC Chat With Firebase

การแชทอิออนกับ firebase

Ionic Firebase Chat เป็นวิดเจ็ตแชทตัวอย่างที่ขับเคลื่อนโดย Firebase

เทคโนโลยีที่ใช้:

• Framework Ionic (V3)
• Firebase 3 (เราจะไม่ใช้ AngularFire)

เริ่มต้น

คำแนะนำเหล่านี้จะช่วยให้คุณได้รับสำเนาของโครงการและทำงานบนเครื่องในพื้นที่ของคุณเพื่อการพัฒนาและการทดสอบ ดูการปรับใช้สำหรับหมายเหตุเกี่ยวกับวิธีการปรับใช้โครงการในระบบสด สิ่งที่คุณต้องการในการติดตั้งซอฟต์แวร์และวิธีการติดตั้ง

ข้อกำหนดเบื้องต้น

ก่อนอื่นเราต้องสร้างโครงการใหม่ใน Firebase

ขั้นตอนที่ 1:

เข้าสู่ระบบด้วย Firebase ของคุณ (https://firebase.google.com) และสร้างโครงการใหม่

ขั้นตอนที่ 2:

คลิก“ เพิ่ม 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

นำเข้า firebase ใน app.component.ts

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 และล้างข้อความที่มีอยู่

 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] และแจ้งให้เราทราบหากคุณมีคำถามหรือข้อเสนอแนะเกี่ยวกับงานของเรา