Firebase Realtime Database | استخدام قاعدة بيانات فايربيز

AbdulAlim Rajjoubمنذ سنتين

ماهي Firebase ؟

Firebase هي خدمة قدمتها Google منذ فترة وقد كانت تقتصر فقط على تخزين البيانات وبعض الأشياء البسيطة,ولكن في Google I/O 16 تم الإعلان عن الكثير من المميزات الجديدة والرائعة وأصبحت حديث الكثير من المطورين

مميزاتها:

Authentication:وهي عملية تسجيل الدخول سواء عن طريق حساب Facebook,Google,Twitter,Email وفي نفس الوقت حماية البيانات الموجودة في Database (بمعنى أنه يمكنك منع أي شخص من استخدام التطبيق دون عملية تسجيل الدخول وهو الوضع الإفتراضي)

Realtime Database: وهي تفيد في تخزين البيانات على السيرفر وأكثر شيئ يميزها هي أنها Realtime بمعنى أنه أي تغيير يحصل على الداتابيز سيتغير فوراً في التطبيق كما سنرى في هذا الشرح)

Storage:تخزين الملفات والصور

Hosting:لإستضافة موقعك على Firebase

Notifications: إرسال إشعارات

والعديد من المميزات يمكنك تفقدها عند الدخول الى حسابك في Firebase,من الجدير بالذكر أن هذه الخدمات مجانية(ولكن ببعض الحدود,يمكنك رؤية ماهي الحدود عبر هذا الرابط) وهو مايميز Firebase

سنبدأ في هذا الدرس شرح عن Firebase Database وسنحاول مستقبلاً بإذن الله شرح باقي الأمور

بدايةً يجب أن يكون لديك حساب Google بالطبع بعد ذلك قم بالتوجه الى رابط Firebase Console

ثم نختار Add project


FBDB-1.thumb.png.e53bbec2e3a8b939429b07c201e26583.png

 

ثم نضع اسم المشروع الذي نريد ونضع الدولة

FBDB-2.png.73187b2ee4e1407e05cbbae4b8f13567.png

بعد ذلك سيتم إنشاء المشروع,نضغط على Add Firebase to Your Android App

FBDB-3.thumb.png.36905657ad53cd807c5d0e29fc83f7af.png

 

بعد ذلك سيطلب منا اسم الpackage الخاص بتطبيق الأندرويد

نقوم بإنشاء تطبيق أندرويد جديد ثم نتوجه الى ملف build.gradle وننسخ applicationId

FBDB-4.thumb.png.6bd38e216b92800ea103be6af2d9def1.png

ونلصقه في Firebase ونضغط Register App

بعد ذلك نضغط على Download google-services.json وهو ملف إعدادات الذي يربط مشروعنا على Firebase بمشروعنا في Android Studio

FBDB-5.thumb.png.616a6f38f676a18dfe02f9146192f25d.png

 

سيتم تحميل هذا الملف قم بنسخه 

FBDB-6.png.12350c648cdf4f0c8928d2dddb416cdc.png

ثم نتوجه الى Android Studio ونضغط بالزر الأيمن على مجلد app ونختار Show in Explorer

FBDB-10.png.ee2c29f8df29eb21d8421ca689d740a8.png

 

سيتم فتح مجلد المشروع في حاسوبك نقوم بلصق هذا الملف في مجلد app

FBDB-11.png.8409daa89f194e76b5f33f045d49ce53.png

 

الآن يجب علينا إضافة مكتبات Firebase الى مشروعنا في Android Studio
FBDB-7.png.58e450d655d0915eedf877647eb51656.png

نتوجه الى ملف build.gradle(project) ونلصق هذا السطر


classpath 'com.google.gms:google-services:3.0.0'

FBDB-8.png.4534db3235bf5ad0322746faf9dc6ae2.png

ثم نذهب الى build.gradle(app) ونضع سطر plugin


apply plugin: 'com.google.gms.google-services'

FBDB-9.5.thumb.png.1fb6df33281ea5fdee24398e3ef3a5e2.png

 

 

الآن تم ربط مشروع Firebase ,وهذه الخطوات لربط أي مشروع Firebase بشكل عام سواءً كان Auth,Notifications,Storage الخ..

 

أما الآن سنقوم بإضافة مكتبة Firebase Realtime Database الى ملف build.gradle

 


compile 'com.google.firebase:firebase-database:10.2.1'

 

FBDB-9.6.png.b8c1615409ec527e807da3ad6185dff7.png

 

أخيراً نقوم بالضغط على Sync now  ونشغل التطبيق لنتأكد من أن كل شيئ يعمل.

إذا واجهتك هذه المشكلة

FBDB-9999.thumb.png.c7ca9e0832ee007f312d1b5361405c3d.png

تأكد من وضع سطر plugin في آخر ملف build.gradle.

 

الآن نتوجه الى Firebase Console الى Database ثم Rules ونقوم بتغييره الى


{
  "rules": {
    ".read": true,
      
    ".write": true
  }
}

 

FBDB-12.png.405d04c40b14493586abd3fa2874c296.png

ثم نضغط على Publish لحفظ التغييرات لكي نستطيع الكتابة والقراءة لأي شخص يستخدم التطبيق(في الوضع الإفتراضي فقط المستخدمين الذين قامو بتسجيل الدخول باستخدام Firebase Auth يستطيعون قراءة أو كتابة البيانات ويمكنك تحديد هذه الأمور في Rules)

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

FBDB-13.png.2f2d2a5ae7ff34e4d3ae29e5883d7f37.png

عموماً سنبدأ بالتوجه الى التطبيق ونبدأ بتخزين البيانات

FBDB-14.png.cec3a04c1a0c9b5d92fae38c9e6ead96.png

السطر الأول لتعريف database

اما السطر الثاني هو لأخذ Reference ال root

سنضع قيمة child اسمها “Samsung” وقيمتها “S8”

FBDB-15.png.ef8f5b1031783a0631cbbd40a19fa2bc.png

نشغل التطبيق وسنجد أنه تم إضافة هذه البيانات الى Firebase

FBDB-16.png.5bba3bce7129788254eb401e6f68b657.png

 

تعتمد الFirebase على مبدأ key و value

FBDB-17.png.68d5c31a5fd3ecd5d084692a191b3218.png

 

ملاحظة: عند استدعاء ref.child فإنه يتحقق إذا كان child موجود مسبقاً فسيقوم بإنشاءه وإلا فسيقوم فقط بوضع القيمة

 

ننتقل الآن الى كيفية عرض البيانات من Firebase وسنقوم بعرض كلمة S8 في TextView ونجرب تغييرها من Firebase Console لنرى سرعة التغيير في التطبيق

قمنا بوضع ref.child(“Samsung”) وقمنا باستدعاء الميثود addValueEventListener ومهمة هذه الميثود هي الإستماع على أية تغيرات تحصل على child Samsung وبالطبع ال childs الموجودة داخل child Samsung

وتقوم بعمل Override ل onDataChange وهي تنادى عند حدوث أي تغيير

و onCancelled تنادى عند حدوث أي خطأ

FBDB-18.png.f4078a33f63b638417806f1bbddbde4f.png

 

في onDataChange تقدم لنا الميثود DataSnapshot وهي البيانات الموجودة في Database ممكن ان تحتوي على String,int,long,double,boolean الخ..

 

قمنا بوضع setText ل textView بالقيمة الموجودة داخل Firebase ,وبما أنني أعرف نوع المتغير الذي وضعته في Firebase وهو ("S8”) فقمت بعمل cast له ك String.class

FBDB-19.png.581c46cabf1bb5b84ba82343bf1c0309.png

نشغل التطبيق وسنجد أنه قد قام بوضع كلمة S8 في ال TextView,وعند تغيير القيمة في Firebase Console سيتم تغييرها فوراً في التطبيق

FBDB-20.thumb.png.3646fa20925d37e147301f3417fc5c84.png

 

نلاحظ بأنه اذا  قمت بتغيير القيمة في Firebase Console الى 1 مثلا فسيعتبره  متغير من نوع int ويقوم التطبيق بعمل كراش وذلك لأنه قد قمنا بعمل cast له ك String


FBDB-21.thumb.png.37f7bc40fce13824509449376bf700ca.png

 

 

هذه كانت مقدمة بسيطة عن كيفية حفظ وعرض البيانات

سنقوم الآن بعمل تطبيق بسيط يخزن أسماء بعض الطلاب مع معدلاتهم وعرضهم في RecyclerView

وكالعادة سنبدأ بإنشاء كلاس Model وسنسميه Student ونضع به  الاسم String name و المعدل int average

FBDB-22.png.5b15f3573facf43468c368ef3070cf82.png

 

الآن سنقوم بإدخال بعض الطلاب على Firebase

FBDB-23.png.126cfeeb218c9ab2579e37b1b11fa407.png

 

 

قمنا بإنشاء اوبجكت من Student ووضعنا الاسم Khalid و average85

ثم قمنا باستدعاء الchild الstudents وقمنا بعمل push وهذه الميثود تقوم بإنشاء key بشكل عشوائي (لكل student)

ثم وضعنا setValue لوضع القيمة وهي اوبجكت student الذي أنشأناه

FBDB-24.png.3285d6e4901f0b16eca38839c40f4c41.png

سنقوم بإنشاء المزيد من الطلاب للتجربة

FBDB-25.png.71ff487a0b97c78853f4b95c35603629.png

 

نأتي الآن الى عرض البيانات في RecyclerView نقوم بإنشاء RecyclerView Adapter

نعرف List<Student> و adapter ثم نستدعي ميثود addValueEventListener وداخل onDataChange نقوم بعمل for على DataSnapshot للحصول على جميع المعلومات

وأنشأنا Student وقيمته تساوي snapshot وقمنا بعمل cast ك Student.class لأننا نعلم أن نوع المتغيرات الموجودة في Firebase هي نفسها الموجودة في Student Class وهي int و String

ثم أضفنا هذا student الى studentList وأخيراً قمنا باستدعاء الميثود adapter.notifyDataSetChanged لتحديث البيانات في Adapter

FBDB-26.png.6a0f79f07f769e52be0b5a82cd3b200b.png

أخيراً نقوم بتعريف RecyclerView و adapter (خارج valueEventListener)

FBDB-27.png.279d0212f9c738a986bc802ac955ed11.png

 

نقوم بتشغيل التطبيق وستجد البيانات تم عرضها بهذا الشكل
FBDB-28.png.eece8716aa7af6348a1c248c4819c2f8.png

نجرب تغيير قيمة أي عنصر (من Firebase Console) على سبيل المثال نغير معدل Muhammad الى 98

وستجد أنه قد تم تكرار هذه البيانات ?

FBDB-29.png.de7179486bc68f2563812f01f189f5fd.png

وهذا لأن الميثود onDataChange يتم استدعاؤها عند كل حدث تغيير على قاعدة بيانات وبالتالي إعادة إضافة العناصر الList
ولحل هذه المشكلة نقوم فقط بتفريغ List في onDataChange
FBDB-30.png.3dbddf4ce4516b976f771e99de9ca860.png

أما إذا أردنا عرض العناصر الحديثة من الأعلى (بمعنى أنه أي عنصر جديد يتم إضافته يظهر في الأعلى)

فقط نقوم بعكس ال List عبر الميثود


Collections.reverse(studentList);

FBDB-31.png.7128fec91ad4d3201b08845a4b551805.png

 

 

وستظهر بهذا الشكل
FBDB-32.png.ebd7f46596cbaed512b15c386bf03f26.png



 

Firebase Query عملية البحث داخل Firebase

نبدأ بإنشاء SearchView في MainActivity ومن ثم نقوم باستدعاء الميثود setOnQueryTextListener وداخل onQueryTextSubmit(هذه الميثود تستدعى عندما يتم الضغط على زر البحث في لوحة المفاتيح)

نقوم بتعريف Query


Query fireQuery = ref.child("students").orderByChild("name").equalTo(query);

ثم نبحث داخل الchild الstudents ونقوم بالترتيب على حسب child (orderByChild) في حالتنا هذه نود البحث عن الإسم فوضعنا name (يجب أن يكون نفس الإسم في Firebase)

عندما يكون يساوي الQuery الذي كتبه المستخدم في SearchView query (.equalTo)

بعد ذلك نقوم باستدعاء addListenerForSingleValueEvent هذه الميثود تشبه تماماً الميثود addValueEventListener ولكن الفرق أن هذه الميثود تستدعى مرة واحدة فقط بدلاً من الإستماع كل مرة.

داخل onDataChange قمنا بإنشاء List<Student> جديد

وقمنا بعمل for على snapshot وتنفيذ نفس الخطوات التي شرحناها سابقاً

ثم عرفنا نفس adapter ولكن أعطيناه searchList الجديدة التي أنشأناها

وأخيراً قمنا بعمل setAdapter

FBDB-33.png.54941fcd165fce6134c798ef91d6d21d.png

 

نشغل التطبيق ونضع اسم Ahmad ونضغط على زر البحث لنرى النتيجة

 

FBDB-33.5.png.8a914adff3f5f4f4d4165f11613ff6e0.png

 

 

وللتأكد من وجود الاسم Ahmad ام لا في Firebase نقوم بالتحقق اذا كانت قيمة dataSnapshot.getValue == null عندها قم بإظهار رسالة Toast وإلا قم بوضع العناصر داخل list وأظهرها

FBDB-34.png.63e329e676d725f4d6ee8e43a07e89d9.png

نجرب وضع كلمة ما مثلا test وسنجد أنه تم إظهار رسالة Toast  ERROR

FBDB-35.png.11b1a842b62fe7787998d510bb666442.png

 

وللخروج من وضع البحث نقوم باستدعاء الميثود setOnCloseListener وداخل onClose

نقوم بتعريف نفس Adapter وإعطاءه studentList التي يوجد داخلها كافة البيانات ثم setAdapter

FBDB-36.png.727453e058b31e63dea9aa27447bf7fe.png

 

تعديل البيانات على Firebase

الآن نذهب الى RecyclerView Row ونضيف 2Buttons واحد للتعديل والآخر للحذف

 

FBDB-99.png.8d47e041957be259d39a20983216beb4.png

 

ثم نذهب الى StudentAdapter وعند الضغط على زر editStudent سنقوم بإنشاء Intent الى أكتفتيEditStudentActivity.class الذي سنقوم بإنشاءه بعد قليل

وأرسلنا name (اسم الطالب الذي تم الضغط عليه) عبر الintent وأخيراً شغلنا الأكتفتي

FBDB-36.5.png.fc2fe36b84755d8ae554bae09e388b93.png

 

الآن نقوم بإنشاء EditStudentActivity.class ونضع به 2EditText واحد لتعديل الإسم والآخر للمعدل ونضع 1Button لحفظ القيم الى Firebase

FBDB-37.png.c28c03866d7558ea46853805e152fb33.png

 

بالطبع نقوم بتعريف String name القادم عبر intent ونعيد تعريف FirebaseDatabase و Reference و EditTexts

FBDB-38.png.1c69cff226a9d46bbbe81639a0d4ec68.png

 

بعدها نقوم بتنفيذ Query على name القادم عبر intent ,وداخل onDataChange نقوم بعمل for كما فعلنا سابقاً وأخيراً قمنا بعمل setText ل EditText

(تم استخدام String.ValueOf لأن getAverage تعيد int ويجب تحويلها ل String لوضعها في EditText)

وبهذا نكون قد وضعنا اسم الطالب ومعدله فيEditTexts

 

FBDB-39.png.227ed5e1f71e0987ca88c34770b5e092.png

 

ولحفظ القيم بعد تعديلها ,عند الضغط على زر Save نقوم بإنشاء Student جديد ونضع الإسم name قيمة editText الأول ,ووضعنا المعدل average قيمة EditText الثاني وقمنا بتحويله الى Integer

ثم نفذنا Query جديدة وقمنا بعمل for على dataSnapshot

ثم snapshot.getRef() هذه الميثود تعيد لنا key الموجود في الداتابيز (على سبيل المثال -Kgzq-ktAGSpAjJRqk2i) وجميع childs الموجودة داخله

ثم استدعينا setValue وقمنا بإعطاءه student الذي أنشأناه,وبهذا يكون قد تم التعديل

 

FBDB-40.png.0825e0fc33de7c32a8eee613d58a6cb9.png

 

 

عملية الحذف من Firebase

نطبق نفس الخطوات التي طبقناها في عملية التعديل  ولكن هذه المرة بدل من setValue نقوم بعملremoveValue() للحذف

 

FBDB-41.png.c85e58fa00c4f61c73d2c03fb28aa4a2.png

 

 

المشروع على Github

ملاحظة:المشروع على Github للمعاينة فقط ولايمكنك تجربته على Android Studio لعدم وجود google-services.json الخاص بك

كلمات دليلية:
8
إعجاب
17873
مشاهدات
0
مشاركة
6
متابع
متميز
محتوى رهيب

التعليقات (6)

ساره علي:

معلومات قيمة ومجهود أكثر من رائع شكراً لك 

وياليت لو تتكلم أيضاً عن Analytics  في ال firebase وكيفية الاستفادة منها 

AbdulAlim Rajjoub:
في 20/11/2017 at 03:18, ساره علي said:

معلومات قيمة ومجهود أكثر من رائع شكراً لك 

وياليت لو تتكلم أيضاً عن Analytics  في ال firebase وكيفية الاستفادة منها 

شكراً لدعمك, سأحاول مستقبلاً ان شاء الله

AliAlshamry:

مقال رائع ومتكامل من كافة النواحي 
شكرا لك 
ساعدتني كثيرا

 

فيصل المحمد:

مقال جداً مفيد ورائع وياليت لو تعلمنا كيف نضيف اساسيات برامج التواصل مثل لايك وكومنت وعدد المشاهدة 🌹

ahmad:

السلام عليكم

كيف استطيع ان اعرض صورة واحدة في recyclerview من عدة صور محملة في storage

جزاكم الله خيرا

ابراهيم عبدالكريم:

أخيراً مقال عربي بنفس كفائة المواقع الأجنبية , أحييك جددا على هذا الشرح

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !