В этом коротком руководстве мы узнаем, как отображать данные Firebase Firestore в списке SwiftUI с использованием шаблона MVVM.
Сложность: Начинающий | Легко | Нормальный | Испытывающий
Среда: Xcode 12, iOS 14, Firebase 7.1.0 и SwiftUI
Предпосылки: Некоторое знание Firebase console и cocoapods.
Создать новый проект
Откройте Xcode ›Шаблон приложения› Выберите интерфейс SwiftUI и вызовите свой проект SwiftUIList.
Настроить Firebase
Чтобы не делать эту статью слишком длинной, я быстро расскажу об интеграции Firebase. Если вы не знаете, как установить Firebase с помощью cocoapods, сначала ознакомьтесь с моим руководством и вернитесь на эту страницу.
Чтобы установить Firebase в приложении SwiftUI, перейдите в файл SwiftUIListApp.Swift, импортируйте Firebase и добавьте следующий код:
init () {
FirebaseApp.configure ()
}
Оттуда вы сможете запустить свое приложение, не столкнувшись с проблемами:
Создать модель
Идите вперед и создайте новую группу: назовите ее Models, из этой папки создайте новый файл swift и назовите его user. Внутри этого файла скопируйте / вставьте следующий синглтон:
Создайте ViewModel
Кроме того, создайте новую группу с именем ViewModels, из этой папки создайте новый файл Swift с именем userViewModel. Напишите в нем следующий код:
Этот файл будет вызывать Firebase и запрашивать данные из Firestore, это будет связь между нашей моделью, которую мы создали , и вид (список), который мы собираемся создать.
Теперь ваш проект должен выглядеть так:
Добавьте случайные данные в Firestore
Перейдите в Консоль Firebase и запустите новую базу данных в Firestore, выберите пока тестовый режим и запустите коллекцию с именем users и добавьте несколько документов, обратите внимание, ваша коллекция должна называться пользователей и ваш документ с полями имя и фамилия, иначе это не сработает.
Теперь мы готовы представить данные внутри нашего представления.
Создать представление
Перейдите в свой файл ContentView (он был создан при запуске проекта) и замените текущий код следующим:
Небольшое объяснение кода:
- ObservedObject - это ссылка на нашу ViewModel, которая отвечает за прослушивание базы данных Firestore.
- Список содержит 2 текста в каждой строке: имя и фамилия, полученные напрямую из Firestore и создают строки в соответствии с количеством документов, присутствующих в коллекции: здесь у нас есть 3 документа.
- onAppear () позволяет нам получать данные при запуске представления.
- NavigationView позволяет нам установить заголовок и управлять позже, чтобы отправить или представить это представление, в зависимости от конфигурации вашего проекта.
Запустите ваше приложение 🏃♂️
Вы можете запускать свое приложение, обновлять данные в Firestore, добавлять новые документы и видеть изменения в режиме реального времени!
Спасибо за внимание! Я всегда рад поболтать и поработать на [email protected]. Рассмотрите возможность подписки, чтобы получить неограниченный доступ к моим статьям и всему Medium через мою реферальную ссылку.
Репозиторий GitHub:
