Как я создал приложение для управления складом под названием Cardus
11 января 2023 г.Cardus – это веб-приложение, которое позволяет пользователям создавать свои склады товаров и управлять ими. Пользователи могут добавлять товары на свой склад и быстро определять, в какой коробке хранится какая вещь. Пользователи также могут делиться своим складом или контейнером с другими пользователями, что позволяет им сотрудничать.
Ссылка на приложение
Интернет: https://cardus-app.vercel.app/
Play Маркет: подлежит уточнению
Описание
Я хочу, чтобы приложение было бесшовным, как нативное приложение. Есть бортовые экраны, красивые переходы и плавная анимация. Приложение также имеет темный режим, необходимый для любого современного приложения.
Ссылка на исходный код
Приложение Cardus: репозиторий GitHub
Разрешающая лицензия
Фон
⚡ Проблема
- Трудно пометить ящик для хранения.
- Трудно понять, где ящик для хранения.
- Трудно понять, какие предметы в каком хранилище
Управлять личным складом/хранилищем сложно.
💡 Решение
- Создайте веб-приложение, позволяющее пользователям создавать собственные склады товаров и управлять ими.
- Пользователи могут добавлять товары на свой склад и быстро определять, в какой коробке какой товар хранится.
- Пользователи также могут делиться своим складом или ящиком с другими пользователями, что позволяет им сотрудничать
Как я это сделал
📚 Стек технологий
- Next.js
- Реагировать
- МонгоБД
- Облачная платформа Google
- TensorFlow.js
- Интерактивное веб-приложение
- Надежная веб-активность
📖 Процесс
Мы начали с создания приложения Next.js, а затем создали кластер MongoDB Atlas. Мы хотели легко общаться с MongoDB, поэтому использовали ORM с Prisma. Мы фокусируемся на мобильном веб-приложении, поэтому настольные компьютеры нас интересуют только через некоторое время. Мы делаем PWA, нижнюю панель навигации, верхнюю панель и темный режим. Мы также планируем сделать его доверенной веб-активностью, чтобы можно было установить его на устройства Android.
На нашем пути много проблем. Использование Google Cloud Storage API с бессерверной функцией требует работы. Просто используя это, мы уже сталкиваемся с кучей препятствий. Некоторые можно решить, прочитав форум; некоторым нужен обходной путь. Пользователи любят что-то умное, поэтому мы также хотим сделать приложение умным. Мы хотим, чтобы приложение могло обнаруживать объект на изображении, поэтому мы используем для этого TensorFlow.js. Мы также хотим, чтобы приложение могло сканировать QR-код, поэтому для этого мы используем ZXing.
📝 Чему я научился
- Как использовать Next.js для создания веб-приложения
- Как использовать MongoDB Atlas для хранения данных
- Как использовать Google Cloud Platform для хранения изображений
- Как использовать TensorFlow.js для запуска моделей в браузере
- Как использовать PWA, чтобы сделать приложение доступным для установки
- Как использовать Trusted Web Activity, чтобы сделать приложение доступным для установки на устройствах Android
Дополнительные ресурсы/информация
Оригинал