Firebase | تخزين البيانات بإستخدام Realtime Database لتطبيقات الويب JavaScript - الوفــي | دروس تعليمية مكتوبة و مصورة بالفيديو في المجال التقني و تكنلوجيا المعلومات

ماهو Firebase ؟

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

أحد الخدمات التى توفرها لك Firebase والتي ستفيدك بشكل كبير فى برمجة تطبيقاتك هى خدمة Realtime Database وهى عباره عن نظام قواعد بيانات سريع جدا يمكن أن تستخدمه لتطبيقك بدلا من استخدام php/mysql او أى وسيلة اخرى لتخزين البيانات أون لاين وتعمل بنظام الـ NoSQL وليس بنظام الـ SQL مثل Mysql وغيرها من قواعد البيانات.

مميزاتها:

1- Authentication : وهي عملية تسجيل الدخول سواء عن طريق حساب Facebook,Google,Twitter,Email وفي نفس الوقت حماية البيانات الموجودة في Database.

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

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

4- Hosting : لإستضافة موقعك على firebase .

5- Notifications : إرسال إشعارات.

طريقة الاستعمال :

اولا سنقوم بإنشاء تطبيق ويب بسيط يتكون من خانتين "Full Name" , "E-mail" و زر ارسال send بحيث يقوم المستخدم بإدخال اسمه و الايميل الخاص به.

HTML Code :

<html> <head> <title>Wadie Mendja</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="Geany 1.32" /> </head> <body> <div> <center> <p id="txt"> Full Name :</p> <input type="text" value="" id="name"/> <p id="txt2"> E-mail :</p> <input type="text" value="" id="email"/><br/><br/> <button id="send" onclick="send();">Envoye</button><br/> <img id="myimg" src="https://imgur.com/QbNtN5u.jpg"/> <p id="error"> </p> </center> </div> </body> <script src="https://www.gstatic.com/firebasejs/7.2.2/firebase-app.js"></script> <script src='https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js'></script> <script src='https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js'> </script> </html>

CSS :

body { font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} input { background-color: #ddd ; width: 50%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; display: all ; } #name { border: none ; display: all ; } #email { border: none ; display: all ; } #txt { display: all ; } #txt2 { display: all ; } #send { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 25%; opacity: 0.9; display: all; } #send:hover { opacity:1; } #error{ color: red; } div{ margin-top: 50px ; } #myimg { visibility: hidden ; height: 150px ; width: 75px ; }

و الان بعد ان انتهينا من التصميم ننتقل مباشرة الى انشاء الدالة التي ستمكننا من ارسال المعلومات التي يدخلها المستخدم الى قاعدة البيانات الخاصة بنا .

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

بعدها نقوم بإعطاء اسم للمشروع الخاص بنا و ننقر على continue :

في add an app سوف نختار web app :

نعطي اسم للتطبيق ثم ننقر على Register app :

سيقومون بمنحك كود مثل هذا قم بنسخه و لصقه بعد وسم ال body في الكود الخاص بك :

الان و بعد لصق الكود نبدأ بالعمل : كل ما علينا القيام به هو انشاء child جديد لشجرة البيانات الخاصة بنا و اعطائه اسم في هذا المثال اعطيناه اسم "E-mails".

var firebaseRef = firebase.database().ref().child('E-mails');

بعدها سنقوم بغنشاء الدالة send التي سوف تقوم بإرسال المعلومات مباشرة الى قاعدة البيانات خاصتنا بعد النقر على الزر send:

function send () {

// الكود الخاص بنا

}

سنحتاج ايضا الى الدالة push لإضافة البيانات لل child الذي سميناه E-mails اعلاه :

firebaseRef.push(document.getElementById("name").value); firebaseRef.push(document.getElementById("email").value);

النتيجة النهائية بعد اضافة بعض الاسماء و الايميلات :

JavaScript

//database config var firebaseConfig = { apiKey: "AIzaSyAcadGJfIrieuf18GPMA5D0UCC-pUYzpAc", authDomain: "tpgl-e744b.firebaseapp.com", databaseURL: "https://tpgl-e744b.firebaseio.com", projectId: "tpgl-e744b", storageBucket: "tpgl-e744b.appspot.com", messagingSenderId: "991270230255", appId: "1:991270230255:web:a1f7d7f0b329d6c3e9a31a" }; firebase.initializeApp(firebaseConfig); //end config var firebaseRef = firebase.database().ref().child('E-mails'); function send() { let checker = 0 ; if (document.getElementById("name").value=="") { document.getElementById("name").style.border = "1px solid red" ; checker++ ; } if (document.getElementById("email").value=="") { document.getElementById("email").style.border = "1px solid red" ; checker++ ; } if (checker==0) { firebaseRef.push(document.getElementById("name").value); firebaseRef.push(document.getElementById("email").value); document.getElementById("error").style.color="green"; document.getElementById("error").innerHTML = "Your Info Sent Succussfully :) !"; document.getElementById("send").style.display = "none"; document.getElementById("email").style.display = "none"; document.getElementById("name").style.display = "none"; document.getElementById("txt").style.display = "none"; document.getElementById("txt2").style.display = "none"; document.getElementById("myimg").style.visibility="visible"; } }

Download Source Code Here

بقلم وديع منجاالوفي للمعلوميات

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