دورة react js للمبتدئين الدرس السابع عشر


فهاد الجزء السابع عشر من دورة react js للمبتدئين غادي نكملو الدورة وغادي نقادو واحد ل projet لي عبارة على notes app لكن قبل غادي نشوفوا كيفاش نخدمو ب firebase و react js عاد غادي ندوزوا ل projet ديالنا.


1- إضافة projet جديد ف firebase

فباش تخدم ب firebase لي هي قاعدة بيانات سبق هضرنا عليها فدروس سابقة كيكفي باش يكون عندك gmail كتدخل ل :
منبعد سير ل accéder à la console
منبعد غادي تضغط على ajouter projet منبعد دخل اسم ل projet و كليكي على créer un projet.
فاش يتزاد غادي تدخل ل projet منبعد سير ل paramétres كيف كتشوف فالصورة :

منبعد كليكي على ajouter firebase à votre application web وcopier لكود لي تما.
فغادي تدخل ل application reactjs لي خدمنا بها فالجزء السابق أو زيد application جديدة لي بغيتي و ف src زيد fichier سميه firebase.js فيه غادي تزيد الكود لي درتيلو copier ولكن غادي نزيدو عليه تعديلات باش غادي تحيد les balises script وتخليه هكا :

                                //
var config = {
    apiKey: "votre clé api ici",
    authDomain: "votre url ici",
    databaseURL: "votre url ici",
    projectId: "votre id de projet ici",
    storageBucket: "votre code ici",
    messagingSenderId: "votre code ici"
};
firebase.initializeApp(config);
                            

2- تغيير إعدادات قاعدة البيانات firebase

فمازال خص نزيد firebase ل application react js ديالي فغادي تفتح ل application ف cmd وتدير هاد ل commande :

npm install --save firebase 

منبعد ماتزاد غادي تمشي ل application لي زدتي ف firebase غادي تختار database من بعد ajouter une base de données فاختار test منبعد فاش تزاد غادي تعطيك هاد الصورة :




فسير ل règles ودير هاد التغييرات فباش تزيد أو تمسح من قاعدة
البيانات خص ضروري تكون مكونيكطي فحنا غادي نحيدو هاد الشرط  فغير لكود ردو هكا :

                                //
{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
    ".read": true,
    ".write": true
  }
}
                            

3- إضافة المعلومات فقاعدة البيانات firebase

فباش نزيد les données فقاعدة البيانات غادي أول حاجة نرجع ل fichier firebase.js فكندير import ل firebase لي زدنا منبعد كنخدم بها باش كنزيد المعلومات.
فدبا كبداية غادي نزيدو فقط جملة لي حددناها ف it works.
فالكود لي زدنا ف fichier firebase.js هو :

                                //
import * as firebase from 'firebase';

//
var config = {
    apiKey: "votre clé api ici",
    authDomain: "votre url ici",
    databaseURL: "votre url ici",
    projectId: "votre id de projet ici",
    storageBucket: "votre code ici",
    messagingSenderId: "votre code ici"
};
firebase.initializeApp(config);

//add data
firebase.database().ref().set('it works');
                            

4- إضافة المعلومات فقاعدة البيانات firebase تتمة

فباش ن executer ل fichier firebase.js غادي نمشي ل index.js وغادي نديرلو import منبعد كيكفي باش تدير npm start وت démarrer serveur باش تزاد les données فيلا مشيتي لقاعدة البيانات غادي تلقى هاد النتيجة :


فالكود لي غادي تزيد ف index هو :

                                    //
import './firebase';