تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

Firebase Android Codelab - بناء محادثة ودية

1. نظرة عامة

لقطة شاشة

الصورة: العمل ودية الدردشة التطبيق.

مرحبًا بك في مختبر كود الدردشة الودية. في مختبر الرموز هذا ، ستتعلم كيفية استخدام نظام Firebase الأساسي لإنشاء تطبيق دردشة على Android.

ماذا ستتعلم

كيفية استخدام مصادقة Firebase للسماح للمستخدمين بتسجيل الدخول.
كيفية مزامنة البيانات باستخدام قاعدة بيانات Firebase Realtime.
كيفية تخزين الملفات الثنائية في Cloud Storage for Firebase.
كيفية استخدام Firebase Local Emulator Suite لتطوير تطبيق Android باستخدام Firebase.

ماذا ستحتاج

أحدث إصدار من Android Studio .
محاكي Android يعمل بنظام Android 5.0+.
Node.js الإصدار 10 أو أعلى (لاستخدام Emulator Suite).
Java 8 أو أعلى. لتثبيت Java ، استخدم هذه التعليمات ؛ للتحقق من الإصدار الخاص بك ، قم بتشغيل java -version .
الإلمام بلغة برمجة Kotlin.

2. احصل على نموذج التعليمات البرمجية

استنساخ المستودع

استنساخ مستودع GitHub من سطر الأوامر:

$ git clone https://github.com/firebase/codelab-friendlychat-android

قم بالاستيراد إلى Android Studio

في Android Studio ، حدد ملف > فتح ، ثم حدد دليل build-android-start ( android_studio_folder ) من الدليل حيث قمت بتنزيل نموذج التعليمات البرمجية.

يجب أن يكون لديك الآن مشروع build-android-start مفتوحًا في Android Studio. إذا رأيت تحذيرًا بشأن فقد ملف google-services.json ، فلا داعي للقلق. ستتم إضافته في خطوة لاحقة.

تحقق من التبعيات

في مختبر الرموز هذا ، تمت إضافة جميع التبعيات التي ستحتاج إليها بالفعل من أجلك ، ولكن من المهم فهم كيفية إضافة Firebase SDK إلى تطبيقك:

build.gradle.kts

plugins {
    id("com.android.application") version "8.0.0" apply false
    id("com.android.library") version "8.0.0" apply false
    id("org.jetbrains.kotlin.android") version "1.8.20" apply false

    // The google-services plugin is required to parse the google-services.json file
    id("com.google.gms.google-services") version "4.3.15" apply false
}

app / build.gradle.kts

plugins {
    id("com.android.application")
    id("kotlin-android")
    id("com.google.gms.google-services")
}

android {
    // ...
}

dependencies {
    // ...

    // Google Sign In SDK
    implementation("com.google.android.gms:play-services-auth:20.5.0")

    // Firebase SDK
    implementation(platform("com.google.firebase:firebase-bom:32.0.0"))
    implementation("com.google.firebase:firebase-database-ktx")
    implementation("com.google.firebase:firebase-storage-ktx")
    implementation("com.google.firebase:firebase-auth-ktx")

    // Firebase UI Library
    implementation("com.firebaseui:firebase-ui-auth:8.0.2")
    implementation("com.firebaseui:firebase-ui-database:8.0.2")
}

3. قم بتثبيت Firebase CLI

في مختبر الرموز هذا ، ستستخدم Firebase Emulator Suite لمحاكاة Firebase Auth و Realtime Database و Cloud Storage محليًا. يوفر هذا بيئة تطوير محلية آمنة وسريعة وبدون تكلفة لإنشاء تطبيقك.

قم بتثبيت Firebase CLI

ستحتاج أولاً إلى تثبيت Firebase CLI . إذا كنت تستخدم macOS أو Linux ، فيمكنك تشغيل أمر cURL التالي:

curl -sL https://firebase.tools | bash

إذا كنت تستخدم Windows ، فاقرأ إرشادات التثبيت للحصول على ثنائي مستقل أو للتثبيت عبر npm .

بمجرد تثبيت CLI ، يجب أن يقوم تشغيل firebase --version بالإبلاغ عن إصدار 9.0.0 أو أعلى:

$ firebase --version
9.0.0

قم بتشغيل firebase login لتوصيل CLI بحساب Google الخاص بك. سيؤدي هذا إلى فتح نافذة متصفح جديدة لإكمال عملية تسجيل الدخول. تأكد من اختيار الحساب نفسه الذي استخدمته عند إنشاء مشروع Firebase مسبقًا.

4. الاتصال بـ Firebase Emulator Suite

ابدأ المحاكيات

في Terminal ، قم بتشغيل الأمر التالي من جذر دليل codelab-friendlychat-android المحلي الخاص بك:

firebase emulators:start --project=demo-friendlychat-android

يجب أن ترى بعض السجلات مثل هذا. تم تحديد قيم المنفذ في ملف firebase.json ، الذي تم تضمينه في نموذج التعليمات البرمجية المستنسخ.

$ firebase emulators:start --project=demo-friendlychat-android
i  emulators: Starting emulators: auth, database, storage
i  emulators: Detected demo project ID "demo-friendlychat-android", emulated services will use a demo configuration and attempts to access non-emulated services for this project will fail.
i  database: Database Emulator logging to database-debug.log
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI            │
├────────────────┼────────────────┼────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth     │
├────────────────┼────────────────┼────────────────────────────────┤
│ Database       │ localhost:9000 │ http://localhost:4000/database │
├────────────────┼────────────────┼────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage  │
└────────────────┴────────────────┴────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

انتقل إلى http: // localhost: 4000 في متصفح الويب الخاص بك لعرض واجهة مستخدم Firebase Emulator Suite:

الصفحة الرئيسية لـ Emulator Suite UI

اترك emulators:start الأمر قيد التشغيل لبقية مختبر الرموز.

ربط التطبيق الخاص بك

في Android Studio ، افتح MainActivity.kt ، ثم أضف الكود التالي داخل طريقة onCreate :

// When running in debug mode, connect to the Firebase Emulator Suite.
// "10.0.2.2" is a special IP address which allows the Android Emulator
// to connect to "localhost" on the host computer. The port values (9xxx)
// must match the values defined in the firebase.json file.
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

5. قم بتشغيل تطبيق المبتدئين

أضف google-services.json

لكي يتصل تطبيق Android الخاص بك بـ Firebase ، يجب عليك إضافة ملف google-services.json داخل مجلد app الخاص بمشروع Android الخاص بك. لأغراض معمل الرموز هذا ، قدمنا ملف JSON وهمي سيسمح لك بالاتصال بمجموعة Firebase Emulator Suite.

انسخ ملف mock-google-services.json في مجلد build-android-start/app مثل google-services.json :

cp mock-google-services.json build-android-start/app/google-services.json

في الخطوة الأخيرة من مختبر الشفرات هذا ، ستتعلم كيفية إنشاء مشروع Firebase حقيقي وتطبيق Firebase Android بحيث يمكنك استبدال ملف JSON الوهمي هذا بالتكوين الخاص بك.

قم بتشغيل التطبيق

الآن بعد أن قمت باستيراد المشروع إلى Android Studio وإضافة ملف JSON لتهيئة Firebase ، فأنت جاهز لتشغيل التطبيق لأول مرة.

ابدأ تشغيل Android Emulator.
في Android Studio ، انقر فوق تشغيل ( ) في شريط الأدوات.

يجب تشغيل التطبيق على Android Emulator. في هذه المرحلة ، يجب أن ترى قائمة رسائل فارغة ، ولن يعمل إرسال الرسائل واستلامها. في الخطوة التالية من مختبر الرموز هذا ، ستقوم بمصادقة المستخدمين حتى يتمكنوا من استخدام محادثة ودية.

6. تمكين المصادقة

سيستخدم هذا التطبيق قاعدة بيانات Firebase Realtime لتخزين جميع رسائل الدردشة. قبل أن نضيف البيانات ، يجب أن نتأكد من أن التطبيق آمن وأن المستخدمين المصادق عليهم فقط هم من يمكنهم نشر الرسائل. في هذه الخطوة ، سنقوم بتمكين مصادقة Firebase وتهيئة قواعد أمان قاعدة البيانات في الوقت الحقيقي.

بعد ذلك سنضيف بعض رموز مصادقة Firebase الأساسية إلى التطبيق لاكتشاف المستخدمين وتنفيذ شاشة تسجيل الدخول.

تحقق من وجود المستخدم الحالي

قم أولاً بإضافة متغير المثيل التالي إلى فئة MainActivity.kt :

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

الآن دعنا نعدل MainActivity لإرسال المستخدم إلى شاشة تسجيل الدخول كلما فتح التطبيق ولم تتم مصادقته. أضف ما يلي إلى طريقة onCreate() بعد binding بالعرض:

MainActivity.kt

// Initialize Firebase Auth and check if the user is signed in
auth = Firebase.auth
if (auth.currentUser == null) {
    // Not signed in, launch the Sign In activity
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
    return
}

نريد أيضًا التحقق مما إذا كان المستخدم قد قام بتسجيل الدخول أثناء onStart() :

MainActivity.kt

public override fun onStart() {
    super.onStart()
    // Check if user is signed in.
    if (auth.currentUser == null) {
        // Not signed in, launch the Sign In activity
        startActivity(Intent(this, SignInActivity::class.java))
        finish()
        return
    }
}

ثم نفِّذ الطريقتين getUserPhotoUrl() و getUserName() لإرجاع المعلومات المناسبة حول مستخدم Firebase المعتمد حاليًا:

MainActivity.kt

private fun getPhotoUrl(): String? {
    val user = auth.currentUser
    return user?.photoUrl?.toString()
}

private fun getUserName(): String? {
    val user = auth.currentUser
    return if (user != null) {
        user.displayName
    } else ANONYMOUS
}

ثم قم بتنفيذ طريقة signOut() للتعامل مع زر تسجيل الخروج:

MainActivity.kt

private fun signOut() {
    AuthUI.getInstance().signOut()
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
}

الآن لدينا كل المنطق في مكانه لإرسال المستخدم إلى شاشة تسجيل الدخول عند الضرورة. بعد ذلك ، نحتاج إلى تنفيذ شاشة تسجيل الدخول لمصادقة المستخدمين بشكل صحيح.

افتح الملف SignInActivity.kt . هنا يتم استخدام زر تسجيل دخول بسيط لبدء المصادقة. في هذا القسم ، ستستخدم FirebaseUI لتنفيذ منطق تسجيل الدخول.

أضف متغير مثيل Auth في فئة SignInActivity ضمن تعليق // Firebase instance variables :

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

بعد ذلك ، قم بتحرير طريقة onCreate() لتهيئة Firebase بنفس الطريقة التي قمت بها في MainActivity :

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

أضف حقل ActivityResultLauncher إلى SignInActivity :

SignInActivity.kt

// ADD THIS
private val signIn: ActivityResultLauncher<Intent> =
        registerForActivityResult(FirebaseAuthUIActivityResultContract(), this::onSignInResult)

override fun onCreate(savedInstanceState: Bundle?) {
    // ...
}

بعد ذلك ، قم بتحرير طريقة onStart() لبدء تدفق تسجيل الدخول إلى FirebaseUI:

SignInActivity.kt

public override fun onStart() {
    super.onStart()

    // If there is no signed in user, launch FirebaseUI
    // Otherwise head to MainActivity
    if (Firebase.auth.currentUser == null) {
        // Sign in with FirebaseUI, see docs for more details:
        // https://firebase.google.com/docs/auth/android/firebaseui
        val signInIntent = AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setLogo(R.mipmap.ic_launcher)
                .setAvailableProviders(listOf(
                        AuthUI.IdpConfig.EmailBuilder().build(),
                        AuthUI.IdpConfig.GoogleBuilder().build(),
                ))
                .build()

        signIn.launch(signInIntent)
    } else {
        goToMainActivity()
    }
}

بعد ذلك ، قم بتنفيذ طريقة onSignInResult للتعامل مع نتيجة تسجيل الدخول. إذا كانت نتيجة تسجيل الدخول ناجحة ، فتابع إلى MainActivity :

SignInActivity.kt

private fun onSignInResult(result: FirebaseAuthUIAuthenticationResult) {
    if (result.resultCode == RESULT_OK) {
        Log.d(TAG, "Sign in successful!")
        goToMainActivity()
    } else {
        Toast.makeText(
                this,
                "There was an error signing in",
                Toast.LENGTH_LONG).show()

        val response = result.idpResponse
        if (response == null) {
            Log.w(TAG, "Sign in canceled")
        } else {
            Log.w(TAG, "Sign in error", response.error)
        }
    }
}

هذا كل شيء! لقد نفذت المصادقة مع FirebaseUI في عدد قليل من استدعاءات الأسلوب ودون الحاجة إلى إدارة أي تكوين من جانب الخادم.

اختبر عملك

قم بتشغيل التطبيق على Android Emulator الخاص بك. يجب أن يتم إرسالك على الفور إلى شاشة تسجيل الدخول. اضغط على زر تسجيل الدخول بالبريد الإلكتروني ، ثم أنشئ حسابًا. إذا تم تنفيذ كل شيء بشكل صحيح ، فيجب إرسالك إلى شاشة المراسلة.

بعد تسجيل الدخول ، افتح Firebase Emulator Suite UI في متصفحك ، ثم انقر فوق علامة تبويب المصادقة لرؤية حساب المستخدم الأول الذي تم تسجيل دخوله.

7. قراءة الرسائل

في هذه الخطوة ، سنضيف وظائف لقراءة وعرض الرسائل المخزنة في قاعدة بيانات Realtime.

استيراد رسائل عينة

في واجهة مستخدم Firebase Emulator Suite ، حدد علامة التبويب Realtime Database .
قم بسحب وإسقاط ملف initial_messages.json من نسختك المحلية من مستودع codelab في عارض البيانات.

يجب أن يكون لديك الآن بعض الرسائل ضمن عقدة messages في قاعدة البيانات.

إقرأ البيانات

مزامنة الرسائل

في هذا القسم ، نضيف رمزًا يزامن الرسائل المضافة حديثًا إلى واجهة مستخدم التطبيق من خلال:

تهيئة قاعدة بيانات Firebase Realtime وإضافة مستمع للتعامل مع التغييرات التي تم إجراؤها على البيانات.
تحديث محول RecyclerView حتى تظهر الرسائل الجديدة.
إضافة متغيرات مثيل قاعدة البيانات مع متغيرات مثيل Firebase الأخرى في فئة MainActivity :

MainActivity.kt

// Firebase instance variables
// ...
private lateinit var db: FirebaseDatabase
private lateinit var adapter: FriendlyMessageAdapter

قم بتعديل طريقة onCreate() الخاصة بـ MainActivity تحت التعليق // Initialize Realtime Database and FirebaseRecyclerAdapter بالشفرة المحددة أدناه. يضيف هذا الرمز جميع الرسائل الموجودة من قاعدة بيانات Realtime ثم يستمع إلى إدخالات فرعية جديدة ضمن مسار messages في قاعدة بيانات Firebase Realtime. يضيف عنصرًا جديدًا إلى واجهة المستخدم لكل رسالة:

MainActivity.kt

// Initialize Realtime Database
db = Firebase.database
val messagesRef = db.reference.child(MESSAGES_CHILD)

// The FirebaseRecyclerAdapter class and options come from the FirebaseUI library
// See: https://github.com/firebase/FirebaseUI-Android
val options = FirebaseRecyclerOptions.Builder<FriendlyMessage>()
    .setQuery(messagesRef, FriendlyMessage::class.java)
    .build()
adapter = FriendlyMessageAdapter(options, getUserName())
binding.progressBar.visibility = ProgressBar.INVISIBLE
manager = LinearLayoutManager(this)
manager.stackFromEnd = true
binding.messageRecyclerView.layoutManager = manager
binding.messageRecyclerView.adapter = adapter

// Scroll down when a new message arrives
// See MyScrollToBottomObserver for details
adapter.registerAdapterDataObserver(
    MyScrollToBottomObserver(binding.messageRecyclerView, adapter, manager)
)

بعد ذلك ، في فئة FriendlyMessageAdapter.kt ، قم بتنفيذ طريقة bind() ضمن الفئة الداخلية MessageViewHolder() :

FriendlyMessageAdapter.kt

inner class MessageViewHolder(private val binding: MessageBinding) : ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        binding.messageTextView.text = item.text
        setTextColor(item.name, binding.messageTextView)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
    ...
}

نحتاج أيضًا إلى عرض الرسائل التي هي عبارة عن صور ، لذلك ننفذ أيضًا طريقة bind() ضمن الفئة الداخلية ImageMessageViewHolder() :

FriendlyMessageAdapter.kt

inner class ImageMessageViewHolder(private val binding: ImageMessageBinding) :
    ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        loadImageIntoView(binding.messageImageView, item.imageUrl!!)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
}

أخيرًا ، بالعودة إلى MainActivity ، ابدأ وتوقف عن الاستماع إلى التحديثات من قاعدة بيانات Firebase Realtime. قم بتحديث أساليب onPause() و onResume() في MainActivity كما هو موضح أدناه:

MainActivity.kt

public override fun onPause() {
    adapter.stopListening()
    super.onPause()
}

public override fun onResume() {
    super.onResume()
    adapter.startListening()
}

اختبر مزامنة الرسائل

انقر فوق تشغيل ( ).
في واجهة مستخدم Emulator Suite ، ارجع إلى علامة التبويب Realtime Database ، ثم أضف رسالة جديدة يدويًا. تأكد من ظهور الرسالة في تطبيق Android الخاص بك:

تهانينا ، لقد أضفت للتو قاعدة بيانات في الوقت الفعلي إلى تطبيقك!

8. إرسال الرسائل

تنفيذ إرسال الرسائل النصية

في هذا القسم ، ستضيف القدرة لمستخدمي التطبيق على إرسال رسائل نصية. يستمع مقتطف الشفرة أدناه إلى أحداث النقر على زر الإرسال ، ويقوم بإنشاء كائن FriendlyMessage جديد بمحتويات حقل الرسالة ، ويدفع الرسالة إلى قاعدة البيانات. تضيف طريقة push() معرفًا تم إنشاؤه تلقائيًا إلى مسار الكائن المدفوع. هذه المعرفات متسلسلة مما يضمن إضافة الرسائل الجديدة إلى نهاية القائمة.

قم بتحديث مستمع النقر لزر الإرسال في طريقة onCreate() في فئة MainActivity . يوجد هذا الرمز في الجزء السفلي من طريقة onCreate() بالفعل. قم بتحديث نص onClick() لمطابقة الكود أدناه:

MainActivity.kt

// Disable the send button when there's no text in the input field
// See MyButtonObserver for details
binding.messageEditText.addTextChangedListener(MyButtonObserver(binding.sendButton))

// When the send button is clicked, send a text message
binding.sendButton.setOnClickListener {
    val friendlyMessage = FriendlyMessage(
        binding.messageEditText.text.toString(),
        getUserName(),
        getPhotoUrl(),
        null /* no image */
    )
    db.reference.child(MESSAGES_CHILD).push().setValue(friendlyMessage)
    binding.messageEditText.setText("")
}

تنفيذ إرسال الرسائل المصورة

في هذا القسم ، ستضيف القدرة لمستخدمي التطبيق على إرسال رسائل صور. يتم إنشاء رسالة صورة من خلال الخطوات التالية:

اختر صورة
التعامل مع تحديد الصورة
اكتب رسالة صورة مؤقتة إلى قاعدة بيانات Realtime
تبدأ في تحميل الصورة المحددة
قم بتحديث عنوان URL لرسالة الصورة إلى ذلك الخاص بالصورة التي تم تحميلها ، بمجرد اكتمال التحميل

اختر صورة

لإضافة الصور ، يستخدم مختبر الرموز هذا التخزين السحابي لـ Firebase. التخزين السحابي هو مكان جيد لتخزين البيانات الثنائية لتطبيقك.

التعامل مع تحديد الصورة وكتابة رسالة مؤقتة

بمجرد أن يقوم المستخدم بتحديد صورة ، يتم تشغيل Intent اختيار الصورة. تم تنفيذ هذا بالفعل في الكود الموجود في نهاية طريقة onCreate() . عند الانتهاء ، تستدعي طريقة MainActivity 's onImageSelected() . باستخدام مقتطف الشفرة أدناه ، ستكتب رسالة مع عنوان url مؤقت للصورة إلى قاعدة البيانات تشير إلى أنه يتم تحميل الصورة.

MainActivity.kt

private fun onImageSelected(uri: Uri) {
    Log.d(TAG, "Uri: $uri")
    val user = auth.currentUser
    val tempMessage = FriendlyMessage(null, getUserName(), getPhotoUrl(), LOADING_IMAGE_URL)
    db.reference
            .child(MESSAGES_CHILD)
            .push()
            .setValue(
                    tempMessage,
                    DatabaseReference.CompletionListener { databaseError, databaseReference ->
                        if (databaseError != null) {
                            Log.w(
                                    TAG, "Unable to write message to database.",
                                    databaseError.toException()
                            )
                            return@CompletionListener
                        }

                        // Build a StorageReference and then upload the file
                        val key = databaseReference.key
                        val storageReference = Firebase.storage
                                .getReference(user!!.uid)
                                .child(key!!)
                                .child(uri.lastPathSegment!!)
                        putImageInStorage(storageReference, uri, key)
                    })
}

تحميل الصورة ورسالة التحديث

أضف الأسلوب putImageInStorage() إلى MainActivity . يتم استدعاؤه في onImageSelected() لبدء تحميل الصورة المحددة. بمجرد اكتمال التحميل ، ستقوم بتحديث الرسالة لاستخدام الصورة المناسبة.

MainActivity.kt

private fun putImageInStorage(storageReference: StorageReference, uri: Uri, key: String?) {
    // First upload the image to Cloud Storage
    storageReference.putFile(uri)
        .addOnSuccessListener(
            this
        ) { taskSnapshot -> // After the image loads, get a public downloadUrl for the image
            // and add it to the message.
            taskSnapshot.metadata!!.reference!!.downloadUrl
                .addOnSuccessListener { uri ->
                    val friendlyMessage =
                        FriendlyMessage(null, getUserName(), getPhotoUrl(), uri.toString())
                    db.reference
                        .child(MESSAGES_CHILD)
                        .child(key!!)
                        .setValue(friendlyMessage)
                }
        }
        .addOnFailureListener(this) { e ->
            Log.w(
                TAG,
                "Image upload task was unsuccessful.",
                e
            )
        }
}

اختبار إرسال الرسائل

في Android Studio ، انقر فوق زر التشغيل .
في Android Emulator ، أدخل رسالة ، ثم اضغط على زر الإرسال. يجب أن تكون الرسالة الجديدة مرئية في واجهة مستخدم التطبيق وفي واجهة مستخدم Firebase Emulator Suite.
في Android Emulator ، انقر على صورة "+" لتحديد صورة من جهازك. يجب أن تكون الرسالة الجديدة مرئية أولاً مع صورة عنصر نائب ، ثم مع الصورة المحددة بمجرد اكتمال تحميل الصورة. يجب أن تكون الرسالة الجديدة مرئية أيضًا في واجهة مستخدم Emulator Suite ، على وجه التحديد ككائن في علامة تبويب قاعدة بيانات الوقت الفعلي وكمادة ثنائية في علامة تبويب التخزين.

9. مبروك!

لقد أنشأت للتو تطبيق دردشة في الوقت الفعلي باستخدام Firebase!

ما تعلمته

مصادقة Firebase
قاعدة بيانات Firebase Realtime
التخزين السحابي لـ Firebase

بعد ذلك ، حاول استخدام ما تعلمته في مختبر الرموز هذا لإضافة Firebase إلى تطبيق Android الخاص بك! لمعرفة المزيد حول Firebase ، تفضل بزيارة firebase.google.com .

إذا كنت تريد معرفة كيفية إعداد مشروع Firebase حقيقي واستخدام موارد Firebase الحقيقية (بدلاً من مشروع تجريبي والموارد التي تمت محاكاتها فقط ) ، فتابع إلى الخطوة التالية.

ملاحظة: حتى بعد إعداد مشروع Firebase حقيقي وخاصة عندما تبدأ في إنشاء تطبيق حقيقي ، نوصي باستخدام Firebase Local Emulator Suite للتطوير والاختبار.

10. اختياري: إنشاء مشروع Firebase وإعداده

في هذه الخطوة ، ستنشئ مشروع Firebase حقيقيًا وتطبيق Firebase Android لاستخدامه مع مختبر الرموز هذا. ستضيف أيضًا تكوين Firebase الخاص بالتطبيق إلى تطبيقك. وأخيرًا ، ستقوم بإعداد موارد Firebase حقيقية لاستخدامها مع تطبيقك.

أنشئ مشروع Firebase

في متصفحك ، انتقل إلى وحدة تحكم Firebase .
حدد إضافة مشروع .
حدد أو أدخل اسم المشروع. يمكنك استخدام أي اسم تريده.
لا تحتاج إلى Google Analytics لمخطط الرموز هذا ، لذا يمكنك تخطي تمكينه لمشروعك.
انقر فوق إنشاء مشروع . عندما يكون مشروعك جاهزًا ، انقر فوق "متابعة" .

أضف Firebase إلى مشروع Android الخاص بك

قبل أن تبدأ هذه الخطوة ، احصل على تجزئة SHA1 لتطبيقك. قم بتشغيل الأمر التالي من دليل build-android-start المحلي لتحديد SHA1 لمفتاح التصحيح الخاص بك:

./gradlew signingReport

Store: /Users/<username>/.android/debug.keystore
Alias: AndroidDebugKey
MD5: A5:88:41:04:8F:06:59:6A:AE:33:76:87:AA:AD:19:23
SHA1: A7:89:F5:06:A8:07:A1:22:EC:90:6A:A6:EA:C3:D4:8B:3A:30:AB:18
SHA-256: 05:A2:2A:35:EE:F2:51:23:72:4D:72:67:A5:6A:8A:58:22:2C:00:A6:AB:F6:45:D5:A1:82:D8:90:A4:69:C8:FE
Valid until: Wednesday, August 10, 2044

يجب أن ترى بعض المخرجات مثل ما سبق. الخط المهم هو تجزئة SHA1 . إذا لم تتمكن من العثور على تجزئة SHA1 ، فراجع هذه الصفحة للحصول على مزيد من المعلومات.

ارجع إلى وحدة تحكم Firebase ، واتبع هذه الخطوات لتسجيل مشروع Android الخاص بك في مشروع Firebase:

من شاشة النظرة العامة لمشروعك الجديد ، انقر فوق رمز Android لبدء سير عمل الإعداد:
في الشاشة التالية ، أدخل com.google.firebase.codelab.friendlychat كاسم حزمة لتطبيقك.
انقر على تسجيل التطبيق ، ثم انقر على تنزيل google-services.json لتنزيل ملف تكوين Firebase.
انسخ ملف google-services.json في دليل app الخاص بمشروع Android.
تخطي الخطوات التالية الموضحة في سير عمل إعداد وحدة التحكم (لقد تم تنفيذها بالفعل من أجلك في مشروع build-android-start ).
تأكد من أن جميع التبعيات متاحة للتطبيق الخاص بك عن طريق مزامنة مشروعك مع ملفات Gradle. من شريط أدوات Android Studio ، حدد File > Sync Project with Gradle Files . قد تحتاج أيضًا إلى تشغيل Build / Clean Project و Build / Rebuild Project حتى تحدث تغييرات التكوين.

هيئ مصادقة Firebase

قبل أن يتمكن تطبيقك من الوصول إلى واجهات برمجة تطبيقات مصادقة Firebase نيابة عن المستخدمين ، تحتاج إلى تمكين مصادقة Firebase وموفري تسجيل الدخول الذين تريد استخدامهم في تطبيقك.

في وحدة تحكم Firebase ، حدد المصادقة من لوحة التنقل على الجانب الأيسر.
حدد علامة التبويب طريقة تسجيل الدخول .
انقر فوق البريد الإلكتروني / كلمة المرور ، ثم قم بتبديل المفتاح إلى تمكين (أزرق).
انقر فوق Google ، ثم قم بتبديل المفتاح إلى تمكين (أزرق) وقم بتعيين بريد إلكتروني لدعم المشروع.

إذا ظهرت لك أخطاء لاحقًا في مختبر الشفرات هذا بالرسالة "CONFIGURATION_NOT_FOUND" ، فارجع إلى هذه الخطوة وتحقق مرة أخرى من عملك.

تكوين قاعدة بيانات Realtime

يخزن التطبيق الموجود في مختبر الرموز هذا رسائل الدردشة في قاعدة بيانات Firebase Realtime. في هذا القسم ، سننشئ قاعدة بيانات ونضبط أمانها عبر لغة تكوين JSON تسمى قواعد أمان Firebase.

في وحدة تحكم Firebase ، حدد Realtime Database من لوحة التنقل الموجودة على الجانب الأيسر.
انقر فوق إنشاء قاعدة بيانات لإنشاء مثيل جديد لقاعدة بيانات Realtime. عند المطالبة ، حدد منطقة us-central1 ، ثم انقر فوق "التالي" .
عند مطالبتك بقواعد الأمان ، اختر الوضع المقفل ، ثم انقر فوق تمكين .
بمجرد إنشاء طبعة قاعدة البيانات ، حدد علامة التبويب القواعد ، ثم قم بتحديث تكوين القواعد بما يلي:
```
 {
   "rules": {
     "messages": {
       ".read": "auth.uid != null",
       ".write": "auth.uid != null"
     }
   }
 }
```

لمزيد من المعلومات حول كيفية عمل قواعد الأمان (بما في ذلك الوثائق الخاصة بمتغير "auth") ، راجع وثائق أمان Realtime Database .

هيئ التخزين السحابي لـ Firebase

في وحدة تحكم Firebase ، حدد التخزين من لوحة التنقل على الجانب الأيسر.
انقر فوق البدء لتمكين Cloud Storage لمشروعك.
اتبع الخطوات في مربع الحوار لإعداد الحاوية الخاصة بك ، باستخدام الإعدادات الافتراضية المقترحة.

اتصل بموارد Firebase

في خطوة سابقة من مختبر الرموز هذا ، أضفت ما يلي إلى MainActivity.kt . ربطت هذه الكتلة الشرطية مشروع Android الخاص بك بمجموعة Firebase Emulator Suite.

// REMOVE OR DISABLE THIS
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

إذا كنت تريد توصيل تطبيقك بمشروع Firebase الحقيقي الجديد وموارد Firebase الحقيقية ، فيمكنك إما إزالة هذه الكتلة أو تشغيل تطبيقك في وضع الإصدار بحيث يكون BuildConfig.DEBUG false .

Firebase Android Codelab - بناء محادثة ودية

1. نظرة عامة

ماذا ستتعلم

ماذا ستحتاج

2. احصل على نموذج التعليمات البرمجية

استنساخ المستودع

قم بالاستيراد إلى Android Studio

تحقق من التبعيات

3. قم بتثبيت Firebase CLI

قم بتثبيت Firebase CLI

تسجيل الدخول

4. الاتصال بـ Firebase Emulator Suite

ابدأ المحاكيات

ربط التطبيق الخاص بك

5. قم بتشغيل تطبيق المبتدئين

أضف google-services.json

قم بتشغيل التطبيق

6. تمكين المصادقة

أضف وظيفة تسجيل الدخول الأساسية

تحقق من وجود المستخدم الحالي

قم بتنفيذ شاشة تسجيل الدخول

اختبر عملك

7. قراءة الرسائل

استيراد رسائل عينة

إقرأ البيانات

مزامنة الرسائل

MainActivity.kt

اختبر مزامنة الرسائل

8. إرسال الرسائل

تنفيذ إرسال الرسائل النصية

تنفيذ إرسال الرسائل المصورة

اختر صورة

التعامل مع تحديد الصورة وكتابة رسالة مؤقتة

تحميل الصورة ورسالة التحديث

MainActivity.kt

اختبار إرسال الرسائل

9. مبروك!

ما تعلمته

10. اختياري: إنشاء مشروع Firebase وإعداده

أنشئ مشروع Firebase

أضف Firebase إلى مشروع Android الخاص بك

هيئ مصادقة Firebase

تكوين قاعدة بيانات Realtime

هيئ التخزين السحابي لـ Firebase

اتصل بموارد Firebase