الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

الدردشة الأيونية مع Firebase

الدردشة Ionic Firebase هي عبارة عن عينة من القطعة التي تعمل بواسطة 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)

أضف firebase 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 هو مرخص له معهد ماساتشوستس للتكنولوجيا

دعنا نعرف!

سنكون سعداء حقًا إذا أرسلت لنا روابط إلى مشاريعك حيث تستخدم مكوننا. ما عليك سوى إرسال بريد إلكتروني إلى [email protected] وأعلمنا إذا كان لديك أي أسئلة أو اقتراح بخصوص عملنا.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل