استخدم Firebase لتخزين بيانات الواجهة الخلفية وقم بتطوير تطبيقات بسيطة بسهولة.
القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة.
وفقًا لاستطلاع Stack Overflow 2022 ، يستخدم 21.14 بالمائة من المطورين Firebase ، مما يجعله رابع أشهر منصة سحابية. إنها تقنية متطورة لدمج الواجهة الخلفية بسلاسة.
باستخدام Firebase ، يمكنك تطوير تطبيق متكامل بدون كتابة سطر واحد من التعليمات البرمجية الخلفية. تعرف على كيفية توصيل تطبيق React.js الخاص بك بـ Firebase اليوم والبناء أثناء التنقل.
ثبّت حزمة Firebase
بعد إنشاء تطبيق React الخاص بك، قم بتغيير الدليل إلى المجلد الجذر لمشروعك وقم بتثبيت حزمة Firebase عن طريق تشغيل:
npm ثَبَّتَ فايربيس
أضف تطبيق React الخاص بك إلى مشروع Firebase
الخطوة التالية هي إنشاء مشروع Firebase وربطه بتطبيق React. اذهب إلى وحدة تحكم Firebase:
- انقر أضف المشروع لبدء مشروع Firebase جديد.
- أدخل اسم المشروع ، ثم انقر فوق يكمل.
- انقر يكمل في الصفحة التالية.
- حدد حساب Firebase الخاص بك من القائمة المنسدلة أو انقر فوق انشاء حساب جديد إذا لم يكن لديك بالفعل واحدة.
- أخيرًا ، انقر فوق أنشئ مشروعًا.
- انقر يكمل بمجرد اكتمال العملية.
- بعد ذلك ، انقر فوق رمز الويب () باتجاه أعلى يسار الصفحة التالية لإعداد Firebase للويب.
- أدخل اسمًا مستعارًا لتطبيقك في الحقل المقدم. ثم اضغط تسجيل التطبيق.
- انسخ الكود الذي تم إنشاؤه واحتفظ به للخطوة التالية (تمت مناقشتها في القسم التالي).
- انقر تابع إلى وحدة التحكم.
- هناك العديد من الخيارات في الصفحة التالية. قم بالتمرير لأسفل وحدد سحابة Firestore نظرًا لأنك تحتاج فقط إلى إنشاء قاعدة بيانات في هذه الحالة.
- بعد ذلك ، انقر فوق إنشاء قاعدة بيانات.
- انقر التالي. حدد موقع Firestore المفضل لديك من القائمة المنسدلة.
- ثم اضغط يُمكَِن لإنشاء قاعدة بيانات Firestore.
ابدأ تشغيل Firebase في تطبيق React
قم بإنشاء مجلد جديد داخل مشروعك src الدليل. يمكنك استدعاء هذا firebase_setup. بعد ذلك ، قم بإنشاء ملف firebase.js ملف داخل هذا المجلد. ثم الصق الكود الذي تم إنشاؤه مسبقًا في هذا الملف.
في الوقت الحالي ، يمكنك تخزين كائن التكوين (firebaseConfig) داخل ملف .env ملف. لكن ضع في اعتبارك استخدام ملف طريقة لإخفاء أسرار React في الانتاج. البيانات التي تقوم بتخزينها في ملف .env يمكن أن يتسرب الملف بسهولة في بناء تطبيقك.
إذا كنت تستخدم الخيار .env ، فقم بإلحاق "REACT_APP" بكل اسم متغير بالداخل .env. خلاف ذلك ، لن يقرأ تطبيقك السلاسل. بالإضافة إلى ذلك ، أعد تشغيل خادم React في كل مرة تقوم فيها بتعديل التفاصيل في ملف .env ملف.
على سبيل المثال ، لإدخال مفتاح Firebase السري لتطبيقك في ملف .env ملف:
REACT_APP_apiKey = yourFirebaseAccessKey
وبالتالي ، يمكنك ضبط الشفرة التي تم إنشاؤها على النحو التالي:
يستورد {initializeApp} من "Firebase / التطبيق" ؛
يستورد {getFirestore} من "@ firebase / firestore"
مقدار ثابت firebaseConfig = {
مفتاح API: عملية.envمفتاح REACT_APP_api,
نطاق التأليف: عملية.env.REACT_APP_authDomain,
معرف المشروع: عملية.env.REACT_APP_projectId,
التخزين: عملية.env.REACT_APP_storageBucket,
المراسلة: عملية.env.REACT_APP_messagingSenderId,
معرف التطبيق: عملية.env.REACT_APP_appId,
معرف القياس: عملية.env.REACT_APP_measurementId
};
مقدار ثابت app = initializeApp (firebaseConfig) ؛
يصدّرمقدار ثابت firestore = getFirestore (تطبيق)اختبر اتصالك في Firebase
يمكنك اختبار الاتصال عن طريق إرسال بيانات وهمية إلى Firestore. ابدأ بإنشاء ملف مقابض مجلد داخل مشروعك src الدليل. قم بإنشاء معالج إرسال داخل هذا الملف. يمكنك استدعاء هذا handlesubmit.js ، على سبيل المثال:
يستورد {addDoc، collection} من "@ firebase / firestore"
يستورد {firestore} من "../firebase_setup/firebase"مقدار ثابت handleSubmit = (testdata) => {
مقدار ثابت المرجع = collection (firestore، "test_data") // ينشئ Firebase هذا تلقائيًايترك البيانات = {
testData: testdata
}يحاول {
addDoc (المرجع ، البيانات)
} يمسك(يخطئ) {
وحدة التحكم.log (يخطئ)
}
}
يصدّرتقصير مقبض
ثم في الداخل App.js:
يستورد './App.css';
يستورد مقبض من "./handles/handlesubmit" ؛
يستورد {useRef} من 'تتفاعل'؛وظيفةبرنامج() {
مقدار ثابت dataRef = useRef ()مقدار ثابت معالج الإرسال = (هـ) => {
ه.منع افتراضي()
مقبض(البيانات.حاضِر.قيمة)
dataRef.current.value = ""
}يعود (
<div className ="برنامج">
<نموذج onSubmit = {submithandler}>
<نوع الإدخال = "نص" المرجع = {dataRef} />
<نوع الزر = "يُقدِّم">يحفظ</button>
</form>
</div>
);
}
يصدّرتقصير برنامج؛
قم بتشغيل تطبيق React وحاول إرسال البيانات عبر النموذج. قم بتحديث وحدة تحكم قاعدة بيانات Firebase لرؤية المعلومات المرسلة في مجموعتك. مع وجود الأساسيات في مكانها الصحيح ، يمكنك استكشاف العديد من الأشياء الأخرى الأشياء التي يمكن أن يفعلها Firebase لمعرفة أفضل السبل لاستخدامه.
قم بالبناء أثناء التنقل باستخدام Firebase و React
Firebase هو حل متعدد الاستخدامات للواجهة الخلفية كخدمة يسمح لك بتوسيع نطاق تطبيقك بشكل فعال. بمجرد توصيل تطبيق React الخاص بك ، يمكنك الاستفادة من ميزاته العديدة لبناء موقع الويب الخاص بك حسب رغبتك.
على سبيل المثال ، تعد مجموعة أدوات مصادقة Firebase إحدى الميزات التي قد ترغب في استكشافها.
