ساخت اپلیکیشن با Firebase و SwiftUI — از صفر تا صد

۴۳ بازدید
آخرین به‌روزرسانی: ۲۹ شهریور ۱۴۰۲
زمان مطالعه: ۳ دقیقه
ساخت اپلیکیشن با Firebase و SwiftUI — از صفر تا صد

در این راهنما با روش ساخت نخستین اپلیکیشن SwiftUI بر مبنای یکپارچه‌سازی فایربیس آشنا می‌شویم. همه کدها با نسخه 11 Xcode انتشار GM به‌روزرسانی شده‌اند. ما قصد داریم یک اپلیکیشن ساده ToDo بسازیم که داده‌هایش را در فایربیس ذخیره می‌کند و نیازمند لاگین کاربر برای دیدن فهرست ToDo-ها است. با ما تا انتهای این راهنمای ساخت اپلیکیشن با Firebase و SwiftUI همراه باشید.

فهرست مطالب این نوشته

ابتدا به کنسول فایربیس می‌رویم و یک پروژه جدید اضافه می‌کنیم. مراحل معمول را طی می‌کنیم و فایل plist تولید شده در زمان تنظیم اولیه را دانلود می‌کنیم.

ساخت اپلیکیشن با Firebase و SwiftUI

همزمان که در کنسول فایربیس هستیم، احراز هویت را برای ایمیل و رمز عبور فعال می‌کنیم و Realtime Database را نیز با قواعد زیر راه‌اندازی می‌نماییم. بدین ترتیب کاربر می‌تواند تنها به محتوای خود دسترسی یابد.

1{
2  "rules": {
3    "$uid": {
4      ".write": "$uid === auth.uid",
5      ".read": "$uid === auth.uid"
6   }
7 }
8}

زمانی که کارها به پایان رسید، یک پروژه جدید در Xcode 11 می‌سازیم و نوع آن را Single View App انتخاب می‌کنیم. شما می‌توانید نام آن را هر چیزی که دوست دارید بگذارید. ما نام پروژه را TODO می‌گذاریم. نکته مهم این است که مطمئن شوید SwiftUI را به عنوان رابط کاربری انتخاب می‌کنید و سپس روی Next کلیک کنید تا پروژه اجرا شود.

ساخت اپلیکیشن با Firebase و SwiftUI

فایل دانلود شده plist فایربیس را نیز اضافه کنید:

ساخت اپلیکیشن با Firebase و SwiftUI

به AppDelegate بروید و فایربیس را در تابع didFinishLaunchingWithOptions پیکربندی کنید.

1func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
2   //Firebase
3   FirebaseApp.configure()
4   return true
5}

یک فایل pod جدید بسازید و مطمئن شوید که Firebase/Auth و همچنین Firebase/Database را گنجانده‌اید.

1# Pods for TODO
2pod 'Firebase'
3pod 'Firebase/Auth'
4pod 'Firebase/Analytics'
5pod 'Firebase/Database'

زمانی که مراحل تنظیم به پایان رسید، فایل pod را اجرا کنید. از پروژه TODO خارج شوید و فایل فضای کاری که ایجاد شد را باز نمایید. ابتدا یک مدل اضافه می‌کنیم تا User را به این ترتیب تعریف کنیم.

1class User {
2    
3    var uid: String
4    var email: String?
5    var displayName: String?
6    
7    init(uid: String, displayName: String?, email: String?) {
8        self.uid = uid
9        self.email = email
10        self.displayName = displayName
11    }
12}

سپس یک مدل برای تعریف داده‌های todo اضافه می‌کنیم.

1struct TODOS: Identifiable {
2    
3    let ref: DatabaseReference?
4    let key: String
5    let todo: String
6    let isComplete: String
7    let id: String
8    
9    init(todo: String, isComplete: String, key: String = "") {
10        self.ref = nil
11        self.key = key
12        self.todo = todo
13        self.isComplete = isComplete
14        self.id = key
15    }
16    init?(snapshot: DataSnapshot) {
17        guard
18            let value = snapshot.value as? [String: AnyObject],
19            let todo = value["todo"] as? String,
20            let isComplete = value["isComplete"] as? String
21            else {
22                return nil
23            }
24        self.ref = snapshot.ref
25        self.key = snapshot.key
26        self.todo = todo
27        self.isComplete = isComplete
28        self.id = snapshot.key
29    }
30    
31    func toAnyObject() -> Any {
32        return [
33            "todo": todo,
34            "isComplete": isComplete,  
35        ]
36    }
37}

اکنون یک فایل session ایجاد می‌کنیم. همه تابع‌هایی که برای فایربیس لازم هستند را در آن قرار می‌دهیم.

1func listen() {
2        _ = Auth.auth().addStateDidChangeListener { (auth, user) in
3            if let user = user {
4                self.session = User(uid: user.uid, displayName: user.displayName, email: user.email)
5            }
6        }
7    }
8    
9    func logIn(email: String, password: String, handler: @escaping AuthDataResultCallback) {
10        Auth.auth().signIn(withEmail: email, password: password, completion: handler)
11    }
12    
13    func logOut() {
14            try! Auth.auth().signOut()
15    }
16    
17    func signUp(email: String, password: String, handler: @escaping AuthDataResultCallback) {
18        Auth.auth().createUser(withEmail: email, password: password, completion: handler)
19    }
20    
21    func getTODOS() {
22        ref.observe(DataEventType.value) { (snapshot) in
23            self.items = []
24            for child in snapshot.children {
25                if let snapshot = child as? DataSnapshot,
26                    let toDo = TODOS(snapshot: snapshot) {
27                    self.items.append(toDo)
28                }
29            }
30        }
31    }
32    
33    func uploadTODO(todo: String) {
34        //Generates number going up as time goes on, sets order of TODO's by how old they are.
35        let number = Int(Date.timeIntervalSinceReferenceDate * 1000)
36        
37        let postRef = ref.child(String(number))
38        let post = TODOS(todo: todo, isComplete: "false")
39        postRef.setValue(post.toAnyObject())
40    }
41    
42    func updateTODO(key: String, todo: String, isComplete: String) {
43        let update = ["todo": todo, "isComplete": isComplete]
44        let childUpdate = ["\(key)": update]
45        ref.updateChildValues(childUpdate)
46    }

سپس نمای اصلی را می‌سازیم. صفحه اصلی باید یک لیست ساده از آیتم‌های قابل کلیک داشته باشد. همچنین باید روشی برای لاگین و لاگ آوت کردن به همراه ثبت نام داشته باشد. در نهایت باید روشی برای افزودن آیتم‌های todo بیشتر تعریف کنیم. فایل ContentView.swift را باز کنید و این نما را تنظیم نمایید.

1    var body: some View {
2        
3        NavigationView {
4            Group {
5                if session.session != nil {
6                    VStack {
7                        NavigationLink(destination: NewTODOView()) {
8                            Text("Add TODO")
9                        }
10                        
11                        List {
12                            ForEach(self.session.items) { todo in
13                                NavigationLink(destination: TODODetailView(todo: todo)) {
14                                    Text(todo.todo)
15                                }
16                            }
17                        }
18                        .navigationBarItems(trailing: Button(action: {
19                            self.session.logOut()
20                                
21                        }) {
22                            Text("Logout")
23                        })
24                    }
25                } else {
26                    LoginView()
27                    .navigationBarItems(trailing: Text(""))
28                }
29            }
30            .onAppear(perform: getUser)
31            .navigationBarTitle(Text("TODO"))
32            .padding()
33        }
34    }

فایل‌های نمای جدید SwiftUI را برای لاگین کردن، ثبت نام، دیدن todo روی لیست، جزییات و افزودن todo جدید ایجاد کنید. از تابع‌های فایل session برای ارتباط با فایربیس کمک بگیرید.

ساخت اپلیکیشن با Firebase و SwiftUI

در نهایت اپلیکیشن را تست کنید و مطمئن شوید که همه تابع‌ها به درستی کار می‌کنند، البته ممکن است کمی زشت به نظر بیاید.

سخن پایانی

امیدواریم این راهنما به شما در مسیر ایجاد اپلیکیشن‌های SwiftUI با فایربیس کمک کرده باشید. این یک اپلیکیشن کاملاً ساده با کمترین ملاحظات زیبایی‌شناختی است. شما می‌توانید آن را به هر شکلی که دوست دارید طراحی کنید. برای دیدن نسخه کامل اپلیکیشن TODO و کسب اطلاعات بیشتر به این ریپوی گیت‌هاب (+) مراجعه کنید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
flawless-app-stories
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *