IONIC Chat With Firebase

Obrolan ionik dengan firebase

Ionic Firebase Chat adalah sampel widget obrolan yang ditenagai oleh firebase.

Teknologi yang digunakan:

• Kerangka Ionik (V3)
• Firebase 3 (kita tidak akan menggunakan AngularFire)

Memulai

Instruksi ini akan memberi Anda salinan proyek dan berjalan di mesin lokal Anda untuk tujuan pengembangan dan pengujian. Lihat Penempatan untuk Catatan tentang Cara Menyebarkan Proyek pada Sistem Langsung. Hal apa yang Anda butuhkan untuk menginstal perangkat lunak dan cara menginstalnya

Prasyarat

Pertama, kita perlu membuat proyek baru di Firebase

Langkah 1:

Masuk dengan Firebase Anda (https://firebase.google.com) & Buat Proyek Baru

Langkah 2:

Klik “Tambahkan Firebase ke Aplikasi Web Anda” & Dapatkan Kunci

Membuat Proyek Ionik

Setelah kami membuat proyek dari Firebase, kami dapat mengatur proyek ionik baru untuk aplikasi obrolan kami

Buat Proyek Ionik Baru

 ionic start  -- v2 ionicfirechat blank

Ubah Direktori Kerja Anda

 cd ionicfirechat

Tambahkan platform Anda (jika diperlukan)

 ionic platform add android
ionic platform add ios

Menginstal & Setup Firebase (app.component.ts)

Tambahkan firebase node_modules ke proyek Anda

npm install firebase --save

Impor Firebase di app.component.ts

import * as firebase from ' firebase ' ;

Tambahkan konfigurasi ke app.component.ts; Ganti dengan konfigurasi firebase Anda

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

Membuat UI untuk obrolan (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>

Anda perlu membuka file src/app/app.module.ts dan ganti kode di bawah ini dengan pengaturan konfigurasi Anda:

Mengirim pesan ke firebase saat pengguna mengklik tombol kirim yang perlu kita hubungi kirim () untuk memasukkan pesan ke firebase & menghapus pesan yang ada

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

Membaca pesan dari Firebase saat pengguna membuat pesan baru, kita perlu menampilkan di dalamnya

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

Menjalankan tes

Jalankan di bawah baris perintah untuk pengujian otomatis sistem ini

  $ionic serve

LISENSI!

CoverFlow dilisensikan MIT

Beri tahu kami!

Kami akan sangat senang jika Anda mengirimi kami tautan ke proyek Anda tempat Anda menggunakan komponen kami. Cukup kirim email ke [email protected] dan beri tahu kami jika Anda memiliki pertanyaan atau saran tentang pekerjaan kami.