Описание проекта
В этом руководстве я расскажу вам, как я создал приложение для управления продажами, которое позволяет владельцам магазинов или кассирам записывать и отслеживать продажи с помощью Next.js v13, Typescript и Firebase.
По завершении, вы сможете создавать продвинутые веб-приложения реального мира, используя потрясающие возможности Firebase, такие как база данных в реальном времени и аутентификация.
PS. В этом руководстве предполагается, что у вас есть базовые знания React или Next.js.
Рабочий процесс приложения
Прежде чем мы начнем программировать, позвольте мне подытожить, как работает приложение. Приложение делает следующее:
- аутентифицирует пользователей по электронной почте и паролю с помощью Firebase
- позволяет пользователю (кассиру или владельцу магазина) создавать различные категории для продуктов
- добавлять и удалять продукты из приложения, а также
- записывать и отслеживать продажи, сделанные ежедневно.
Вот краткая демонстрация приложения:
Процесс проектирования пользовательского интерфейса
Здесь я покажу вам, как создать необходимые страницы для веб-приложения.
Прежде всего, вам нужно создать страницу входа. Вам не нужно создавать страницу регистрации, поскольку она доступна только пользователю (кассиру/владельцу магазина).
Далее следует страница панели мониторинга, на которой отображаются показатели приложения, а также предусмотрена навигация по другим страницам.
Вам также нужна страница "Продукты", на которой пользователь может добавлять новые продукты, когда они доступны, и удалять продукты в любой момент времени.
Затем создайте страницу "Категории", чтобы пользователи могли добавлять или удалять категории.
Наконец, необходимо создать основную часть приложения — страницу "Продажи", где пользователь может просматривать предыдущие продажи и добавлять новые.
Вы можете добавить поле ввода даты на эту страницу, чтобы пользователь мог получать данные о продажах за каждый день, как показано ниже.
Компонент Добавить новые продажи может быть модальным, отображаемым, когда пользователь нажимает кнопку Добавить новые продажи.
В следующих разделах вы узнаете, как создавать серверную базу данных и подключать её к пользовательскому интерфейсу, а также взаимодействовать с Firebase в приложении Next.js.
Продолжение следует...
Перевод с некоторыми авторскими заголовками. Автор оригинала: David Asaolu.
