برمجة وتطوير تطبيق تشات اندرويد على منصة فايربيس Firebase

بسم الله الرحمن الرحيم

مرحباً بكم أصدقائي جميعاً, اليوم في هذه التدوينة إن شاء الله سوف نتعلم كيفية بناء تطبيق محادثة ” تشات ” بإستخدام منصة الفايربيس ” firebase “

في البداية شاهد هذه المعاينة فيديو لتطبيق درس اليوم :

# فتح حساب في موقع Firebase + إنشاء تطبيق :

والآن نذهب إلى إنشاء السيرفر الخاص بنا على منصة الفايربيس, للتسجيل في المنصة  إضغط هنا.

سوف يقوم بتسجيلك عن طريق حسابك في جوجل Gmail, حديثاً أصبح يوجد تعامل مشترك بينهم.

هذه المنصة جداً رآئعة وتقدم خدمات منوعة لتطوير التطبيقات, وإن شاء الله في دروس قادمة سوف نشرح أهم الخدمات منها.

بعد التسجيل في الموقع, سجل دخولك في الرئيسية سوف تجد ” مربع صغير في الأسفل ” يوجد فيه خيارات ضع إي اسم تريد, سوف يتم انشاء الرابط تلقائي إن كان موجود مسبقاً ضع اسماً مختلفاً.

من ثم اضغط على CREATE NEW APP . بعد الإنشاء سوف يصبح المربع واضح لديك , ويوجد فيه اسم التطبيق وفيه الـ url وهذا ما سوف نحتاجه, قم بنسخ الرابط لتستخدمه في التطبيق.

# عمل مشروع جديد على الاندرويد ستوديو :

لكيفية بناء مشروع اندرويد فارغ, تابع هذا الفيديو : https://www.youtube.com/watch?v=J36–V2vSJc

# ربط منصة فايربيس بمشروعك :

يجب استخدام اصدار الاندرويد ستوديو 1.4 فما فوق, بعد إنشاء المشروع الجديد من خلال نافذة الأندرويد ستوديو إضغط على File ثم Project Structure. سوف تخرج لك نافذة صغيرة من الجانب الأيسر اختر Cloud.

ثم قم بتفعيل Firebase واضغط ok . تلقائي سوف يقوم بتهيئة المنصة لمشروعك.

من يستخدم إصدار اندرويد ستوديو أقل من 1.4 لا مشكلة, يذهب إلى ملف build.gradle و بداخل أوسمة dependencies يضع السطر التالي :

و الآن بنفس الملف ضع البلوك التالي :
هكذا نكون أنتهينا من تهيئة المنصة لمشروعك.

# ملفات اللياوت المستخدمة في المشروع :

  • login.xml

  • activity_main.xml

  • chat_message.xml

 

 

 

activity_main.xml // الواجهة الرئيسية للتطبيق وهي عبارة عن قائمة لست فيو تجلب الرسائل + ادت تكست حقل نصي لإضافة رسالة + زر سيند لارسال الرسالة. وتستخدم خلفية بعنوان bgg

لتحميل الصورة المستخدمة  اضغط هنا . الخلفية توضع في مجلد drawable.

login.xml // صفحة تسجيل الدخول وهي الواجهة التي تظهر فقط قبل تسجيل المستخدم دخوله وتحتوي على حقل نصي لوضع اسم المستخدم فيه + زر تسجيل الدخول + نص تكست فيو يخبرك إذا كان هناك خطأ بالإدخال.

chat_message.xml // وهي الصفحة الخاصة بتنسيق العنصر الواحد من القائمة اللست فيو, إي لتنسيق اسم المرسل ونص الرسالة في الواجهة.

# الاكتفتي المستخدمة في المشروع :

  • Application

  • Chat

  • ChatListAdapter

  • FirebaseListAdapter

  • Login

  • MainActivity

 

 

 

 

 Application // كلاس بسيط مشتق من Application ليتم تنفيذه قبل أن يبدأ التطبيق وهو مهم في أغلب المنصات ليتم تعريف التطبيق كامل إنه يستخدم هذه المنصة.

Chat // كلاس واضح تقريباً فهو لعملية الربط .. كمثال توضيح نعرف سترنج .. ونخبره انه هذا السترنج هو نفسه الخاص بنص الرسالة في المنصة و الذي يستخدم بداخل المشروع.

ChatListAdapter // المحول الخاص بكل رسالة تأتي من  السيرفر لكل عنصر داخل القائمة, ومنها نتحكم بتنسيق العنصر الواحد بالقائمة في الرئيسية.

FirebaseListAdapter // المحول الأساسي و أما ChatListAdapter. وهو يمكنك أن تعتبره الكلاس الذي يتم التعامل ما بين التطبيق والموقع firebase أنصح عدم التعديل فيه, فهو فيه دوال اساسية مثلاً إذا تم إضافة نص من الموقع او من جهاز اخر يذهب إلى الموقع ثم يتصل به وياتي به وما يفعله وإذا تم حذف رسالة إلخ .. سهل القراءة لكن تعديله لمن هو متقدم بهذا الأمر.

Login // صفحة تسجيل الدخول, ويوجد فيها أمر إذا تم كتابة اسم المستخدم بنجاح يتم الانتقال تلقائياً للواجهة الرئيسية.

MainActivity // الواجهة الرئيسية بعد تسجيل الدخول, وفيها يتم التحقق من الاتصال وربط السيرفر وعملية ادخال النص وارساله وظهور الرسائل الموجودة بالسيرفر.

# ملف الـ AndroidManifest.xml :

لا يوجد فيه تعديلات ملحوظة فقط إضافة اكتفتي Application لـ وسم ابليكيشن > نيم. وكذلك تأكد من وجود صلاحية الدخول للأنترنت وهي تضاف تلقائياً مع تفعيل المكتبة من الاعدادات.

# ما يجب عليك تعديله :

سابقاً قمت بإنشاء سيرفر خاص بك, الآن لكي تقوم بإستخدامه في داخل MainActivity.java يوجد لديك url = https://andrody.firebaseio.com قم بإستبدال الرابط بالسيرفر الخاص بك.

أما ما تحتاج تعديله لرفع التطبيق على المتجر هو : تغيير اسم التطبيق + معرف التطبيق الباكيج نيم + ايقونة التطبيق +  يفضل تغيير التصميم.

# تعديلات على المشروع :

++ لتحديد عدد أحرف اسم المستخدم : في داخل Login.java في السطر 43 يوجد : Name.trim().length() < 3 هذا الشرط بحيث إذا كان عدد احرف اسم المستخدم أقل من 3 أحرف يتم رفض الدخول.

++ إذا كنت تريد عدم طباعة التاريخ مع كل رسالة : في داخل MainActivity.java في السطر 117 يوجد الدالة sendMessage() الكود التالي :

قم باستبدالها لتصبح بالشكل التالي :

++ تغيير الإلوان :
تغير لون العناصر بالقائمة من ملف ChatListAdapter.java في السطور الأولى يوجد مصفوفة ألوان قم بتغير القيم بداخلها وهي : 0x30FF0000, 0x300000FF
تغير لون الرسالة بنفس الملف ChatListAdapter.java لون النص المرسل منك Color.GREEN غيره إذا أردت, ولون النص المرسل من الآخرين Color.BLACK

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

# تحميل المشروع كامل :

لتحميل المشروع كامل مفتوح المصدر للأندرويد ستوديو, اضغط على لا حول ولا قوة إلا بالله . كلمة سر فك الضغط هي :

 

وفي الختام إسئل الله لي ولكم التوفيق, كما ذكرت إنني سوف أخبركم فكرة بسيطة تستفيد من هذا المشروع في تنفيذها. ذكرتها في فيديو المعاينة.

وانتظرونا بكل جديد ومفيد إن شاء الله .. والسلام عليكم 🙂

عن عبدالقادر عليوي

مواليد 1996 , سوري الجنسية, طالب علم, لدي شغوف كبير في تعلم كل ما يتعلق بالانترنت من تطوير وحماية, أحب القراءة كثيراً .. هدفي نشر العلم بشتى أنواعه ومجالاته, متابع من الدرجة الأولى لـ الدكتور ابراهيم الفقي و الشيخ أحمد ديدات - رحمهم الله -.

شاهد أيضاً

ارسال الإشعارات لمستخدمين تطبيقك الأندرويد بإستخدام جوجل فايربيس

بسم الله الرحمن الرحيم سوف نتعلم أصدقائي في هذا الدرس كيفية ارسال الإشعارات من لوحة …

20 تعليق

  1. ما شاء الله ابدعت اخوي عبدالقادر شكرا لك 🙂

  2. اخي بارك الله فيك… لكن المشكلة بعدم القدرة على تسجيل الدخول الى الموقع من الجوال بحساب google او github
    ما الحل؟؟؟

  3. البديوي

    اريد في حال وصلت رسالة من شخص يعمل صوت
    من خلال تفعيل media player

    فعلت صوت الارسال لكن الاستقبال لا اعرف ما الطريقة ؟

    • الأمر بسيط .. ولكن سوف اعطيك الفكرة .. وهي ابحث عن الدالة التي يتم استدعائها حال وجود رسالة ..

      اعتقد الامر تم توضيحه لك ..

      ان شاء الله يوجد جزء اخر لهذا الدرس سوف اقوم به في الفترة القادمة .. تطويرات لهذا التطبيق 🙂

  4. جزاك الله خيرا اخي الكريم ، مدونه متميزه لشخص متميز
    بالتوفيق وإلي الأمام

  5. السلام عليكم انا استخدم 1.4 خلاص اضغط اوكي وابداء والا لازم اضيف
    packagingOptions {
    exclude ‘META-INF/LICENSE’
    exclude ‘META-INF/NOTICE’
    exclude ‘META-INF/LICENSE-FIREBASE.txt’
    }

    • وعليكم السلام .. اي نعم اخي اجباري تضيفا

      • مسا الخير اخي انا شفت الفيديو بتاع الشات عملت appبس كيف اربطه مع التطبيق ؟؟؟

        • قصي باجس

          java.lang.RuntimeException: Unable to start activity ComponentInfo{com.andrody.test/com.andrody.test.MainActivity}: java.lang.NullPointerException
          at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2059)
          at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2084)
          at android.app.ActivityThread.access$600(ActivityThread.java:130)
          at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1195)
          at android.os.Handler.dispatchMessage(Handler.java:99)
          at android.os.Looper.loop(Looper.java:137)
          at android.app.ActivityThread.main(ActivityThread.java:4745)
          at java.lang.reflect.Method.invokeNative(Native Method)
          at java.lang.reflect.Method.invoke(Method.java:511)
          at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:786)
          at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
          at dalvik.system.NativeStart.main(Native Method)
          Caused by: java.lang.NullPointerException
          at com.firebase.client.utilities.Utilities.parseUrl(Utilities.java:48)
          at com.firebase.client.Firebase.(Firebase.java:155)
          at com.andrody.test.MainActivity.onCreate(MainActivity.java:51)
          at android.app.Activity.performCreate(Activity.java:5008)
          at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1079)
          at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2023)
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2084)
                      at android.app.ActivityThread.access$600(ActivityThread.java:130)
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1195)
                      at android.os.Handler.dispatchMessage(Handler.java:99)
                      at android.os.Looper.loop(Looper.java:137)
                      at android.app.ActivityThread.main(ActivityThread.java:4745)
                      at java.lang.reflect.Method.invokeNative(Native Method)
                      at java.lang.reflect.Method.invoke(Method.java:511)
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:786)
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
                      at dalvik.system.NativeStart.main(Native Method)

          لو سمحت انا نزلت المشروع تبعك لما اعمل رن لتطبيق بيعطيني الايرور
          شو الحل؟

      • رجاءا لو سمحت الرابط لا يعمل

  6. السلام عليكم اولا
    وثانيا الله يعطيك الف عافيه بس انا مواجه مشكله فيه
    والتي هي :

    Information:Gradle tasks [:app:assembleDebug]
    :app:preBuild UP-TO-DATE
    :app:preDebugBuild UP-TO-DATE
    :app:checkDebugManifest
    :app:preReleaseBuild UP-TO-DATE
    :app:prepareComAndroidSupportAppcompatV72311Library UP-TO-DATE
    :app:prepareComAndroidSupportSupportV42311Library UP-TO-DATE
    :app:prepareDebugDependencies
    :app:compileDebugAidl UP-TO-DATE
    :app:compileDebugRenderscript UP-TO-DATE
    :app:generateDebugBuildConfig UP-TO-DATE
    :app:generateDebugAssets UP-TO-DATE
    :app:mergeDebugAssets UP-TO-DATE
    :app:generateDebugResValues UP-TO-DATE
    :app:generateDebugResources UP-TO-DATE
    :app:mergeDebugResources UP-TO-DATE
    :app:processDebugManifest UP-TO-DATE
    :app:processDebugResources UP-TO-DATE
    :app:generateDebugSources UP-TO-DATE
    :app:compileDebugJavaWithJavac
    Note: C:\Users\nedal\AndroidStudioProjects\Shat\app\src\main\java\org\nedal\shat\MainActivity.java uses or overrides a deprecated API.
    Note: Recompile with -Xlint:deprecation for details.
    :app:compileDebugNdk UP-TO-DATE
    :app:compileDebugSources
    :app:transformClassesWithDexForDebug
    :app:mergeDebugJniLibFolders UP-TO-DATE
    :app:transformNative_libsWithMergeJniLibsForDebug UP-TO-DATE
    :app:processDebugJavaRes UP-TO-DATE
    :app:transformResourcesWithMergeJavaResForDebug FAILED
    Error:Execution failed for task ‘:app:transformResourcesWithMergeJavaResForDebug’.
    > com.android.build.api.transform.TransformException: com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK META-INF/NOTICE
    File1: C:\Users\nedal\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.core\jackson-databind\2.2.2\3c8f6018eaa72d43b261181e801e6f8676c16ef6\jackson-databind-2.2.2.jar
    File2: C:\Users\nedal\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.core\jackson-core\2.2.2\d20be6a5ddd6f8cfd36ebf6dea329873a1c41f1b\jackson-core-2.2.2.jar
    Information:BUILD FAILED
    Information:Total time: 18.606 secs
    Information:1 error
    Information:0 warnings
    Information:See complete output in console

    ممكن الحل ؟

  7. بارك الله فيك ,الله يوفقك

  8. اخي ليست متوفرة عندي النت دائما اعرف انه يمكنني التعامل مع الفيربيز افلاين لكن لا اعرف كيف ممكن اخي عبد القادر تشرحلي هذه النقطة

  9. حميد علي

    ألف شكر لك ؛ تطبيق ممتاز
    لكن هل بالإمكان أن أعمل مراسلة خاص وليس على شكل مجموعة أو غرفة

  10. عبدالعاطي

    بارك الله فيك

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *