Связь в реальном времени с Firebase: структура данных и работа с CRUD (окончание)
Коллекция Продажи
Здесь вам нужно создать функции, которые позволят пользователю добавлять и получать продажи за определённый день, а также общий объем продаж, сделанных на платформе.
export const addSales = async (customerName: string, customerEmail: string, products: Items[], totalAmount: number, setAddNew: any) => {
try {
await addDoc(collection(db, "sales"), {
customerName, customerEmail, products, totalAmount, timestamp: serverTimestamp()
})
successMessage("Sales recorded! 🎉")
setAddNew(false)
} catch (err) {
console.error(err)
errorMessage("Error! Try again ❌")
}
}
Приведённая ниже функция принимает информацию о клиенте и продуктах, а затем добавляет их в коллекцию Продажи.
Чтобы получить все продажи, выполните приведённый ниже фрагмент кода при загрузке страницы. Он запрашивает коллекцию Продажи и возвращает все данные.
export const getSales = async (setSales: any) => {
try {
const docRef = collection(db, "sales")
const q = query(docRef, orderBy("timestamp"))
onSnapshot(q, (snapshot) => {
const docs: any = []
snapshot.forEach((d: any) => {
docs.unshift( { ...d.data(), id: d.id })
});
setSales(docs)
})
} catch (err) {
console.error(err)
setSales([])
}
}
На странице информационной панели в поле отображается общая сумма, полученная от продаж. Фрагмент кода ниже возвращает общую сумму.
export const getTotalSales = async (setTotalSales: any) => {
try {
const unsub = onSnapshot(collection(db, "sales"), doc => {
let totalSales:number = 0
doc.forEach((d: any) => {
totalSales += d.data().totalAmount
});
setTotalSales(totalSales)
})
} catch (err) {
console.error(err)
}
}
Наконец, на странице Продукты вы можете захотеть отобразить продажи, сделанные только в особый день. Фрагмент кода ниже запрашивает коллекцию Продажи и возвращает данные о продажах, совершенных в определённый день.
Вы можете отредактировать функцию для возврата продаж, сделанных еженедельно, ежемесячно, ежеквартально или ежегодно. Вам просто нужно обновить формат даты, указав правильную продолжительность.
export const getSalesForDay = async (date: Date | null, setSales: any) => {
try {
const day = date?.getDate()
const month = date?.getMonth()
const year: number | undefined = date?.getFullYear()
if (day !== undefined && month !== undefined && year !== undefined) {
const startDate = new Date(year, month, day, 0, 0, 0);
const endDate = new Date(year, month, day, 23, 59, 59);
const docRef = collection(db, "sales")
const q = query(docRef, orderBy("timestamp"), where("timestamp", ">=", Timestamp.fromDate(startDate)), where("timestamp", "<=", Timestamp.fromDate(endDate)))
onSnapshot(q, (snapshot) => {
const docs: any = []
snapshot.forEach((d: any) => {
docs.unshift( { ...d.data(), id: d.id })
});
setSales(docs)
})
}
} catch (err) {
console.error(err)
}
}
Заключение
Поздравляю с преодолением столь долгого пути! Вы узнали:
- что такое Firebase
- как добавить Firebase в приложение Next.js
- как работать с Firebase Auth и Firebase Firestore
- как создать приложение для управления продажами
Исходный код также доступен здесь.
Firebase — отличный инструмент, который предоставляет практически всё необходимое для создания полнофункционального веб-приложения. Если вы хотите создать полнофункциональное веб-приложение без какого-либо опыта работы с бэкендом, рассмотрите возможность использования Firebase.
Перевод с некоторыми авторскими заголовками. Автор оригинала: David Asaolu.
