IONIC Chat With Firebase

Chat ionique avec Firebase

Le chat ionique Firebase est un exemple de widget de chat propulsé par Firebase.

Technologies utilisées:

• Cadre ionique (V3)
• Firebase 3 (nous n'allons pas utiliser AngularFire)

Commencer

Ces instructions vous procureront une copie du projet opérationnel sur votre machine locale à des fins de développement et de test. Voir le déploiement pour des notes sur la façon de déployer le projet sur un système en direct. De ce dont vous avez besoin pour installer le logiciel et comment les installer

Condition préalable

Tout d'abord, nous devons créer un nouveau projet dans Firebase

Étape 1:

Connectez-vous avec votre Firebase (https://firebase.google.com) et créez un nouveau projet

Étape 2:

Cliquez sur «Ajouter Firebase à votre application Web» et obtenez des touches

Création d'un projet ionique

Une fois que nous avons créé un projet à partir de Firebase, nous pouvons configurer un nouveau projet ionique pour notre application de chat

Créer un nouveau projet ionique

 ionic start  -- v2 ionicfirechat blank

Changez votre répertoire de travail

 cd ionicfirechat

Ajoutez votre plate-forme (si nécessaire)

 ionic platform add android
ionic platform add ios

Installation et configuration de Firebase (app ...Component.ts)

Ajoutez Firebase Node_Modules à votre projet

npm install firebase --save

Importer une base de feu dans app.

import * as firebase from ' firebase ' ;

Ajouter une configuration à app ....ts; Remplacez par votre configuration de base de feu

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

Création d'interface utilisateur pour le chat (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>

Vous devez ouvrir le fichier src / app / app.module.ts et remplacer le code ci-dessous par vos paramètres de configuration:

Envoi des messages à Firebase lorsque l'utilisateur clique sur le bouton Envoyer, nous devons appeler Send () pour insérer des messages dans Firebase et effacer les messages existants

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

Lire les messages de Firebase Lorsque l'utilisateur a créé un nouveau message, nous devons afficher à l'intérieur

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

Exécuter les tests

Exécutez la ligne de commande ci-dessous pour les tests automatisés de ce système

  $ionic serve

LICENCE!

CoverFlow est licencié du MIT

Faites-le nous savoir!

Nous serions vraiment heureux si vous nous envoyiez des liens vers vos projets où vous utilisez notre composant. Envoyez simplement un e-mail à [email protected] et faites-nous savoir si vous avez des questions ou des suggestions concernant notre travail.