dmakwt / swiftui-firebase-template

Firebase Template

قالب Firebase

Firebase startup template

من خلال هذا القالب يمكنك إنشاء تطبيقات ترتبط بسحابة Firebase بكل سهولة. يمكنك اعادة استعمال بعض الـ Views مثل

• Sign in
• Sign up
• Add items
• List items

ترتيب الملفات

1. Authentication التوثيق

يمكنك التعديل على قالب صفحة تسجيل الدخول وإنشاء حساب جديد من خلال Views > Authentication

هناك 2 models مهمان في عملية تسجيل الدخول وعمل حساب جديد

، هناك model باسم User و model اسم SignInCredentials.

1. User هو المستعمل عند إنشاء حساب جديد. عادة تضع في الاسم، رقم الهاتف الإيميل، وغيرها من التفاصيل المهمة. يعتبر وجود الإيميل مهم، ويجب أن لا يحتوي على كلمة المرور. يتم تمرير كلمة المرور في مكان لاحق. يستعمل عند عمل Sign up وعندما تستقبل تفاصيل المستخدم من قاعدة البيانات. يتم حفظ المستخدم عن عمل تسجيل دخول جديد تحت collection في Firebase باسم users
2. SignInCredentials ويحتوي فقط على الإيميل وكلمة المرور. وهو يستعمل عند عمل sign in فقط.

كيف يعمل البرنامج؟

البرنامج يبدأ من خلال صفحة MainApp. حيث يقوم MainApp بإعادة بتفعيل Firebase ثم تشغيل واجهة MainView وإرسال EnvironmentObject الخاص ب Firebase. بحيث يمكن لكل الواجهات أسفل هذه الواجهات أن تصل إلى دوال ال EnvironmentObject المعرف باسم FirebaseEnv

import SwiftUI
import Firebase
@main
struct MainApp: App {
    init() {
        // configuring Firebase
        FirebaseApp.configure()
    }
    var body: some Scene {
        WindowGroup {
            MainView()
                .environmentObject(FirebaseEnv())
        }
    }
}

ثم MainView تقرر ما إذا كانت ستعرض صفحة طلب تسجيل الدخول أو الصفحة الرئيسية

struct MainView: View {
    @EnvironmentObject var env: FirebaseEnv
    var body: some View {
        if env.signedIn{
            Home()
        }
        else{
            AuthenticationView()
        }
    }
}

يتم استعمال FirebaseEnv من أجل العمليات المتعلقة ب Firebase بشكل عام، مثل Sign in و Sign up و Sign out، وغيرها من الأمور المشتركة في جميع الواجهات.

2. Database قواعد البيانات

يمكنك إضافة وحذف أي عنصر تريد إلى قاعدة البيانات في Firebase من خلال استعمال Firestore الخطوات كالتالي:

1. قم بعمل model جديد من خلال الذهاب إلى مجلد models وإنشاء ملف سويفت فارغ، وكتابة struct بهذا الشكل

struct Item: Codable, Hashable{
    var name: String
    var price: Double
}

يمكنك تسمية ال struct يأي اسم تشاء، وإضافة أي عدد تريد من أنواع البيانات الرئيسية مثل a. Int b. String c. Bool d. Date تأكد من إضافة :Codable, Hashable عند تعريف الكلاس، فهذا مايسمح لل struct أن يتم إرساله إلى قواعد البيانات بالانتنرت

2. قم بإنشاء envrionmentObject جديد من خلال عملل نسخة من ItemsEnv من داخل مجلد Environments

يمكنك الاكتفاء بالكود التالي بدلاً من الكود المكتوب بداخل ItemsEnv

class ItemsEnv: ObservableObject{
    let collectionName = "MyItems" // ضع اسم للمكان الذي سيتم فيه الحفظ في قاعدة البيانات
    @Published var items: [Item] = [] // هنا تضع العناصر من النوع الذي قمت بإنشائه

    
    func loadItems(){
        Networking.getListOf(COLLECTION_NAME: collectionName) { (items: [Item]) in // تقوم هنا بتعديل النوع أيضاً 
            self.items = items
        }
    }
    
    func addItem(item: Item){ // لا تنسى تعديل النوع هنا أيضاً
        Networking.createItem(item, inCollection: collectionName) {
          // قم بوضع الكود الذي تريد أن يتم عندما يتم إضافة العنصر
        } fail: { (error) in
          // قم بوضع الكود الذي تريد أن يتم عندما تفشل عملية إضافة العنصر
        }
    }
}

3. قم بإنشاء واجهة لإضافة العنصر الجديد داخل صفحة Views. استعمل الـ EnvironmentObject الذي قمت بإنشائه في ال View الجديد بهذه الطريقة

struct AddItem: View {
    @EnvironmentObject var itemsEnv: ItemsEnv // لا تنسى تغيير اسم ال Environment هنا
///    ... 
  var body: some View{
    /// ... 
  }
}

ولا تنسى عند استعمال View ل EnvironmentObject يجب تمرير نسخة من الـ EnvironmentObject من خلال .environmentObject() قبل اسم الواجهة بنفس هذه الطريقة

MainView().environmentObject(FirebaseEnv())

والآن من خلال الواجهة الجديدة، لإضافة العنصر الجديد، قم بوضع الأمر بالمكان المناسب لذلك، واستعمل EnvironmentObject لإضافة عنصر من خلال الدالة التي كتبناها قبل قليل

itemsEnv.addItem(item: item)

4. يمكنك عرض قائمة من العناصر التي تمت إضافتها في قاعدة البيانات عادة من خلال أمر onAppear. قم بوضع الـ، modifier onAppear على آخر عنصر داخل ال body كالتالي:

.onAppear(perform: itemsEnv.loadItems)

ولاتنسى أن تقوم بعرض العناصر من خلال List مثلاً كالتالي:

List(itemsEnv.items, id: \.self){ item in 
 // ...
}