IONIC Chat With Firebase

Chat iónico con Firebase

El chat Ionic Firebase es un widget de chat de muestra impulsado por Firebase.

Tecnologías utilizadas:

• Marco iónico (V3)
• Firebase 3 (no vamos a usar Angularfire)

Empezando

Estas instrucciones le darán una copia del proyecto en funcionamiento en su máquina local para fines de desarrollo y prueba. Consulte la implementación de notas sobre cómo implementar el proyecto en un sistema en vivo. Qué cosas necesita para instalar el software y cómo instalarlos

Requisitos previos

Primero, necesitamos crear un nuevo proyecto en Firebase

Paso 1:

Inicie sesión con su Firebase (https://firebase.google.com) y cree un nuevo proyecto

Paso 2:

Haga clic en "Agregar Firebase a su aplicación web" y obtener teclas

Creación del proyecto iónico

Una vez que creamos el proyecto desde Firebase, podemos configurar un nuevo proyecto Ionic para nuestra aplicación de chat

Crear un nuevo proyecto iónico

 ionic start  -- v2 ionicfirechat blank

Cambia tu directorio de trabajo

 cd ionicfirechat

Agregue su plataforma (si es necesario)

 ionic platform add android
ionic platform add ios

Instalación y configuración de Firebase (app.component.ts)

Agregue Firebase Node_Modules a su proyecto

npm install firebase --save

Importar Firebase en app.component.ts

import * as firebase from ' firebase ' ;

Agregue la configuración a App.component.ts; Reemplace con su configuración de 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 ) ;

Creación de interfaz de usuario para 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>

Debe abrir el archivo src/app/app.module.ts y reemplazar el código a continuación con su configuración de configuración:

Enviar mensajes a Firebase Cuando el usuario hace clic en el botón Enviar, debemos llamar a enviar () para insertar mensajes en Firebase y borrar los mensajes existentes

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

Leyendo mensajes de Firebase Cuando el usuario creó un nuevo mensaje, necesitamos mostrar dentro

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

Ejecutando las pruebas

Ejecute la línea de comandos a continuación para pruebas automatizadas de este sistema

  $ionic serve

¡LICENCIA!

Coverflow tiene licencia de MIT

¡Háganos saber!

Estaríamos muy felices si nos enviara enlaces a sus proyectos donde usa nuestro componente. Simplemente envíe un correo electrónico a [email protected] y háganos saber si tiene alguna pregunta o sugerencia sobre nuestro trabajo.