IONIC Chat With Firebase

Ionischer Chat mit Firebase

Ionic Firebase Chat ist ein Beispiel -Chat -Widget, das von Firebase angetrieben wird.

Verwendete Technologien:

• Ionischer Rahmen (v3)
• Firebase 3 (Wir werden kein Angularfire verwenden)

Erste Schritte

Mit diesen Anweisungen werden Sie für die Entwicklung und Testzwecke eine Kopie des Projekts auf Ihrer lokalen Maschine in Betrieb genommen. Bereitstellungen finden Sie in Notes zum Bereitstellen des Projekts in einem Live -System. Welche Dinge benötigen Sie, um die Software zu installieren und wie Sie sie installieren

Voraussetzungen

Zunächst müssen wir in Firebase ein neues Projekt erstellen

Schritt 1:

Melden Sie sich mit Ihrer FireBase (https://firebase.google.com) an und erstellen Sie ein neues Projekt

Schritt 2:

Klicken Sie auf "FireBase fügen Sie Ihrer Web -App hinzu" und erhalten Sie Schlüssel

Ionenprojekt erstellen

Sobald wir ein Projekt von Firebase erstellt haben, können wir ein neues ionisches Projekt für unsere Chat -Anwendung einrichten

Erstellen Sie ein neues ionisches Projekt

 ionic start  -- v2 ionicfirechat blank

Ändern Sie Ihr Arbeitsverzeichnis

 cd ionicfirechat

Fügen Sie Ihre Plattform hinzu (falls erforderlich)

 ionic platform add android
ionic platform add ios

Installation & Setup Firebase (App.comPonent.ts)

Fügen Sie Ihrem Projekt Firebase Node_Modules hinzu

npm install firebase --save

Importieren Sie Firebase in app.comPonent.ts

import * as firebase from ' firebase ' ;

App.component.ts Konfiguration hinzufügen; Ersetzen Sie durch Ihre Firebase -Konfiguration

 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 für Chat erstellen (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>

Sie müssen die Datei SRC/App/App.module.ts öffnen und den folgenden Code durch Ihre Konfigurationseinstellungen ersetzen:

Senden von Nachrichten an Firebase, wenn Benutzerklicks Send -Schaltfläche Senden Wir müssen SEND () anrufen (), um Nachrichten in Firebase einzufügen und vorhandene Nachrichten zu löschen

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

Lesen von Nachrichten von Firebase Wenn der Benutzer eine neue Nachricht erstellt hat

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

Die Tests ausführen

Führen Sie die Befehlszeile unten aus, um automatisierte Tests dieses Systems zu erhalten

  $ionic serve

LIZENZ!

Der Deckblatt ist MIT-lizenziert

Lass es uns wissen!

Wir würden uns sehr freuen, wenn Sie uns Links zu Ihren Projekten schicken, in denen Sie unsere Komponente verwenden. Senden Sie einfach eine E -Mail an [email protected] und teilen Sie uns mit, ob Sie Fragen oder Vorschläge zu unserer Arbeit haben.