IONIC Chat With Firebase

Conversão iônica com Firebase

O Chat Ionic Firebase é um widget de amostra de bate -papo alimentado pela Firebase.

Tecnologias usadas:

• Estrutura iônica (v3)
• Firebase 3 (não vamos usar o AngularFire)

Começando

Essas instruções fornecerão uma cópia do projeto em funcionamento em sua máquina local para fins de desenvolvimento e teste. Consulte a implantação para obter notas sobre como implantar o projeto em um sistema ao vivo. Que coisas você precisa para instalar o software e como instalá -las

Pré -requisitos

Primeiro, precisamos criar um novo projeto na Firebase

Etapa 1:

Faça login com o seu Firebase (https://firebase.google.com) e crie um novo projeto

Etapa 2:

Clique em "Adicionar Firebase ao seu aplicativo da web" e obtenha chaves

Criando projeto iônico

Depois de criarmos o Project da Firebase, podemos configurar um novo projeto iônico para o nosso aplicativo de bate -papo

Crie um novo projeto iônico

 ionic start  -- v2 ionicfirechat blank

Mude seu diretório de trabalho

 cd ionicfirechat

Adicione sua plataforma (se necessário)

 ionic platform add android
ionic platform add ios

Instalação e configuração Firebase (app.component.ts)

Adicione o Firebase Node_modules ao seu projeto

npm install firebase --save

Importar Firebase em app.component.ts

import * as firebase from ' firebase ' ;

Adicione a configuração ao app.component.ts; Substitua pela sua configuração 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 ) ;

Criando interface do usuário 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>

Você precisa abrir o arquivo SRC/App/App.module.ts e substituir o código abaixo pelas configurações de configuração:

Enviando mensagens para o FireBase quando o usuário clicar no botão Enviar, precisamos ligar para enviar () para inserir mensagens na Firebase e limpar as mensagens existentes

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

Lendo mensagens da Firebase Quando o usuário criou uma nova mensagem, precisamos exibir dentro

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

Executando os testes

Execute a linha de comando abaixo para testes automatizados deste sistema

  $ionic serve

LICENÇA!

Coverflow é licenciado por MIT

Deixe -nos saber!

Ficaríamos muito felizes se você nos enviou links para seus projetos onde você usa nosso componente. Basta enviar um e -mail para [email protected] e informe -nos se tiver alguma dúvida ou sugestão sobre nosso trabalho.