إزاي تربط Vue 3 مع Firebase خطوة بخطوة للمشاريع التفاعلية

أهلاً بيك يا بشمهندس في عالم البرمجة الممتع. أكيد في يوم من الأيام، وأنت شغال على مشروع تطوير الـ ويب (Web Development) باستخدام إبداءات فيو الحديثة، لقيت نفسك محتاج تعمل نظام تسجيل دخول (Authentication) وتخزن بيانات وتحدثها لحظياً من غير ما تعب نفسك في بناء سيرفر كامل وقاعدة بيانات معقدة من الصفر. هنا بيجي دور السحر الحقيقي، وتحديداً استخدام فايربييز (Firebase) مع إف ٣ (Vue 3).

المشكلة دايماً عند المبرمجين المبتدئين وحتى المتوسطين، هي إزاي يربطوا الأدوات دي ببعض من غير ما الكود يحصل فيه خناقة أو يب3قاش منظم. في المقال ده، هناخد رحلة عملية خطوة بخطوة عشان نبني تطبيق تفاعلي (Interactive Application) بيشتغل في الوقت الفعلي (Real-time) باستخدام الـ كومبوزيشن آبي (Composition API) وجريمة التوثيق وقاعدة البيانات الفورية (Firestore).

ليه نختار Vue 3 مع Firebase أساساً؟

لما نتكلم عن بناء تطبيقات ويب سريعة، فاحنا بنحتاج ثنائي مدمر. فيو ٣ (Vue 3) بتقدم لنا أداء عالي جداً بفضل الـ Composition API اللي بتخلي تنظيم الكود سهل ومرن مقارنة بالـ Options API القديمة. من ناحية تاني، جوجل فايربييز (Google Firebase) بتوفر لك باقة جاهزة ومتكاملة تشمل قاعدة بيانات نوساي كيو إل (NoSQL Database) واسمها كلاود فايراستور (Cloud Firestore)، وطريقة سهلة جداً للمصادقة وتأمين التطبيق بتاعك.

المزيج ده بيخليك تركز أكتر على تجربة المستخدم (User Experience) وشكل التطبيق، وتسيب الهموم التانية الخاصة بالـ Backend و إدارة السيرفرات لـ Firebase.

الخطوة الأولى: إعداد مشروع Vue 3 وإضافة مكتبة Firebase

أول خطوة هنعملها هي إننا ننشئ مشروع Vue جديد. افتح التيرمينال (Terminal) بتاعك واكتب الأمر ده عشان تبدأ مشروع بـ فيت (Vite):

npm create vite@latest my-vue-firebase-app -- --template vue
cd my-vue-firebase-app
npm install

بعد ما المشروع يشتغل، هنحتاج نحمل حزمة فايربييز (Firebase SDK) عشان نقدر نتواصل مع خدمات جوجل. اكتب الأمر ده في التيرمينال:

npm install firebase

الخطوة التانية: إعداد مشروعك في لوحة تحكم Firebase

دلوقتي هتروح على موقع Firebase الرسمي وتعمل مشروع جديد. من لوحة التحكم (Console):

• اضغط على Add Project وسمّي المشروع بتاعك بالاسم اللي يعجبك.
• افعل خدمة Authentication واختار طريقة الدخول اللي تحبها، زي البريد الإلكتروني وكلمة المرور (Email/Password).
• أنشئ قاعدة بيانات Cloud Firestore واختار وضع الاختبار (Test Mode) مؤقتاً عشان تقدر تكتب وتستعلم براحتك وأنت بتطور.
• روح على إعدادات المشروع (Project Settings) وهات كود التكوين (Firebase Configuration) اللي هتحطه في مشروعك.

الخطوة التالتة: ربط الكود بملف الإعدادات (Firebase Configuration)

في مشروع الـ Vue بتاعك، اعمل فولدر جديد سميه src/firebase وجواه ملف اسمه index.js أو config.js. حط فيه الكود ده مع استبدال البيانات بالبيانات الحقيقية بتاعت مشروعك:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyYourApiKeyHere",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app-id",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abcdef"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

الخطوة الرابعة: بناء نظام المصادقة (Authentication) بـ Composition API

عشان نخلي المستخدم يقدر يسجل دخول، هنعمل مكون (Component) بسيط وليكن اسمه Login.vue. هنستخدم فيه الـ Composition API مع دوال فايربييز زي signInWithEmailAndPassword:

<script setup>
import { ref } from 'vue'
import { auth } from '../firebase'
import { signInWithEmailAndPassword } from 'firebase/auth'

const email = ref('')
const password = ref('')
const errorMessage = ref('')

const handleLogin = async () => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email.value, password.value)
    console.log('تم تسجيل الدخول بنجاح:', userCredential.user)
  } catch (error) {
    errorMessage.value = error.message
  }
}
</script>

<template>
  <div>
    <h2>تسجيل الدخول</h2>
    <input v-model="email" type="email" placeholder="البريد الإلكتروني" />
    <input v-model="password" type="password" placeholder="كلمة المرور" />
    <button @click="handleLogin">دخول</button>
    <p v-if="errorMessage" style="color: red;">{{ errorMessage }}</p>
  </div>
</template>

الخطوة الخامسة: التعامل مع Firestore وعرض البيانات في الوقت الفعلي (Real-time)

من أهم مميزات فايربييز هي قاعدة بيانات فايراستور (Firestore) اللي بتخليك تسمع التغييرات لحظياً من غير ما تعمل تحديث للصفحة (Refresh). ده بيتم عن طريق دالة اسمها onSnapshot. تعالوا نشوف إزاي نعمل مكون يعرض قائمة مهام (To-Do List) بتتحدث لوحدها:

<script setup>
import { ref, onMounted } from 'vue'
import { db } from '../firebase'
import { collection, addDoc, onSnapshot } from 'firebase/firestore'

const tasks = ref([])
const newTask = ref('')

// جلب البيانات في الوقت الفعلي
onMounted(() => {
  onSnapshot(collection(db, 'tasks'), (snapshot) => {
    tasks.value = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }))
  })
})

// إضافة مهمة جديدة
const addTask = async () => {
  if (newTask.value.trim() === '') return
  await addDoc(collection(db, 'tasks'), {
    text: newTask.value,
    createdAt: new Date()
  })
  newTask.value = ''
}
</script>

<template>
  <div>
    <h3>قائمة المهام التفاعلية</h3>
    <input v-model="newTask" placeholder="اكتب مهمة جديدة..." />
    <button @click="addTask">إضافة</button>
    
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.text }}</li>
    </ul>
  </div>
</template>

خاتمة: نصيحة من أخ لتطوير مهاراتك

ربط Vue 3 مع Firebase بيفتح لك باب كبير جداً لإنشاء تطبيقات ويب احترافية بسرعة وبأقل جهد. نصيحتي ليك يا بشمهندس، متكتفيش بالنقل والكوبي وكمان البست (Copy-Paste). افتح مستندات Firebase الرسمية (Documentation) واقرأ عن قواعد الأمان (Security Rules) لأنها خطوة حاسمة جداً أول ما مشروعك ينزل على الإنترنت ويبدأ استخدامه من ناس حقيقية. مارس بإيدك، واعمل أخطاء وصلحها، لأن دي الطريقة الوحيدة عشان تبقى مبرمج شاطر فاهم هو بيعمل إيه مش حافظ وخلاص. بالتوفيق في رحلتك التقنية!