IONIC Chat With Firebase

Ионовое чат с Firebase

Ionic Firebase Chat - это образец виджета чата, работающий на Firebase.

Используются технологии:

• Ионная структура (v3)
• Firebase 3 (мы не собираемся использовать Angularfire)

Начиная

Эти инструкции дадут вам копию проекта и работают на местной машине для разработки и тестирования. См. Развертывание для заметок о том, как развернуть проект в живой системе. Что вам нужно для установки программного обеспечения и как их установить

Предварительные условия

Во -первых, нам нужно создать новый проект в Firebase

Шаг 1:

Войдите в систему с вашей Firebase (https://firebase.google.com) и создайте новый проект

Шаг 2:

Нажмите «Добавить Firebase в ваше веб -приложение» и получить ключи

Создание ионного проекта

После того, как мы создали проект из Firebase, мы можем настроить новый ионный проект для нашего приложения в чате

Создать новый ионный проект

 ionic start  -- v2 ionicfirechat blank

Измените свой рабочий каталог

 cd ionicfirechat

Добавьте свою платформу (если требуется)

 ionic platform add android
ionic platform add ios

Установка и настройка Firebase (app.component.ts)

Добавьте к вашему проекту node_modules node_modules

npm install firebase --save

Импорт Firebase в app.component.ts

import * as firebase from ' firebase ' ;

Добавить конфигурацию в app.component.ts; Заменить на конфигурацию 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 ) ;

Создание пользовательского интерфейса для чата (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>

Вам необходимо открыть файл src/app/app.module.ts и заменить код ниже на настройки конфигурации:

Отправка сообщений в Firebase, когда пользователь нажимает кнопку «Отправить», нам нужно вызовать send (), чтобы вставить сообщения в Firebase и очистить существующие сообщения

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

Чтение сообщений из Firebase Когда пользователь создал новое сообщение, нам нужно отобразить внутри

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

Запуск тестов

Запустить ниже командную строку для автоматических тестов этой системы

  $ionic serve

ЛИЦЕНЗИЯ!

Coverflow лицензирован MIT

Дайте нам знать!

Мы были бы очень рады, если бы вы отправили нам ссылки на свои проекты, где вы используете наш компонент. Просто отправьте электронное письмо по адресу [email protected] и дайте нам знать, если у вас есть какие -либо вопросы или предложения относительно нашей работы.