- 发表于
Cardus App - 开源个人仓库管理应用程序
- 作者
- 姓名
- Imamuzzaki Abu Salam
- https://x.com/ImBIOS_Dev
我构建了什么
Cardus 是一个 Web 应用，允许用户创建和管理自己的物品仓库。用户可以将物品添加到他们的仓库，并快速识别哪些箱子存储着哪些物品。用户还可以与其他用户共享他们的仓库或容器，以便他们协作。
应用链接
网页： https://cardus-app.vercel.app/
Play 商店： 待定
描述
Cardus App 是一款 Web 应用项目，旨在挑战移动用户 Web 开发的边界。该应用程序使用 Next.js（一个 React 框架）构建，并在 Vercel 上部署。该应用程序也是一个 PWA，可以安装在移动设备上。该应用程序还使用 Trusted Web Activity，这使得它可以安装在 Android 设备上。该应用程序还使用 Google Cloud Platform 来存储图像并运行 TensorFlow.js 模型来自动检测物品图像中的物体。
我希望这个应用程序能够像原生应用程序一样无缝衔接。它有引导屏幕、漂亮的过渡和流畅的动画。该应用程序还具有暗黑模式，这是任何现代应用程序的必备功能。
源代码链接
宽松许可证
背景
⚡ 问题
难以标记存储箱
难以知道存储箱在哪里
难以知道哪些物品存储在哪些存储箱中
管理个人仓库/存储是一项挑战。
💡 解决方案
创建一个 Web 应用，允许用户创建和管理他们自己的物品仓库
用户可以将物品添加到他们的仓库，并快速识别哪些箱子存储着哪些物品
用户还可以与其他用户共享他们的仓库或箱子，以便他们协作
我是如何构建它的
📚 技术栈
Next.js
React
MongoDB
Google Cloud Platform
TensorFlow.js
PWA
Trusted Web Activity
📖 过程
我们首先创建了一个 Next.js 应用，然后创建了一个 MongoDB Atlas 集群。我们希望轻松地与 MongoDB 通信，因此我们使用 Prisma 的 ORM。我们的重点是移动 Web 应用，所以我们只在一段时间后才会关注桌面。我们把它做成了一个 PWA，包括底部导航栏、顶部栏和暗黑模式。我们还计划把它做成一个 Trusted Web Activity，以便我们能够在 Android 设备上安装它。
在开发过程中我们遇到了很多问题。使用 Google Cloud Storage API 与无服务器函数进行通信需要付出努力。仅仅使用它，我们就已经面临着一系列障碍。有些可以通过阅读论坛来解决；有些需要变通方法。用户喜欢一些聪明的东西，所以我们也希望让应用程序变得智能。我们希望让应用程序能够检测图像中的物体，因此我们使用 TensorFlow.js 来做到这一点。我们还希望让应用程序能够扫描 QR 码，因此我们使用 ZXing 来做到这一点。
📝 我学到了什么
如何使用 Next.js 构建 Web 应用
如何使用 MongoDB Atlas 存储数据
如何使用 Google Cloud Platform 存储图像
如何使用 TensorFlow.js 在浏览器中运行模型
如何使用 PWA 使应用程序可安装
如何使用 Trusted Web Activity 使应用程序可安装在 Android 设备上