Ứng dụng Cardus - Ứng dụng Quản lý Kho hàng Mở nguồn và Cá nhân

Những gì tôi đã xây dựng

Cardus là một ứng dụng web cho phép người dùng tạo và quản lý kho hàng của họ. Người dùng có thể thêm các mục vào kho hàng và nhanh chóng xác định hộp nào đang lưu trữ vật phẩm nào. Người dùng cũng có thể chia sẻ kho hàng hoặc container của họ với người dùng khác, cho phép họ hợp tác.

Liên kết ứng dụng

Web: https://cardus-app.vercel.app/

Play Store: Sẽ được công bố sau

Mô tả

Ứng dụng Cardus là một dự án ứng dụng web nhằm thử thách giới hạn phát triển web cho người dùng di động. Ứng dụng được xây dựng bằng Next.js, một framework React, và được triển khai trên Vercel. Ứng dụng cũng là một PWA, cho phép chúng ta cài đặt trên thiết bị di động. Ứng dụng cũng sử dụng Trusted Web Activity, cho phép ứng dụng được cài đặt trên thiết bị Android. Ứng dụng cũng sử dụng Google Cloud Platform để lưu trữ hình ảnh và chạy các mô hình TensorFlow.js để tự động phát hiện đối tượng trong hình ảnh mục.

Tôi muốn ứng dụng trở nên liền mạch, giống như một ứng dụng gốc. Có các màn hình hướng dẫn, chuyển tiếp đẹp mắt và hoạt ảnh mượt mà. Ứng dụng cũng có chế độ tối, một điều cần thiết cho bất kỳ ứng dụng hiện đại nào.

Liên kết đến mã nguồn

Cardus App: Kho lưu trữ GitHub

Giấy phép cho phép

Giấy phép Apache-2.0

Bối cảnh

⚡ Vấn đề

Khó để dán nhãn hộp lưu trữ
Khó để biết hộp lưu trữ ở đâu
Khó để biết những vật phẩm nào ở trong kho lưu trữ nào

Thật khó để quản lý kho hàng/lưu trữ cá nhân.

💡 Giải pháp

Tạo một ứng dụng web cho phép người dùng tạo và quản lý kho hàng của riêng họ
Người dùng có thể thêm các mục vào kho hàng của họ và nhanh chóng xác định hộp nào đang lưu trữ mục nào
Người dùng cũng có thể chia sẻ kho hàng hoặc hộp của họ với người dùng khác, cho phép họ hợp tác

Cách tôi xây dựng nó

📚 Công nghệ

Next.js
React
MongoDB
Google Cloud Platform
TensorFlow.js
PWA
Trusted Web Activity

📖 Quy trình

Chúng tôi bắt đầu bằng cách tạo một ứng dụng Next.js, sau đó chúng tôi tạo một cụm MongoDB Atlas. Chúng tôi muốn giao tiếp dễ dàng với MongoDB, vì vậy chúng tôi đã sử dụng ORM với Prisma. Trọng tâm của chúng tôi là một ứng dụng web di động, vì vậy chúng tôi chỉ quan tâm đến máy tính để bàn sau một thời gian. Chúng tôi biến nó thành một PWA, một thanh điều hướng dưới cùng, một thanh trên cùng và chế độ tối. Chúng tôi cũng đang lên kế hoạch biến nó thành một Trusted Web Activity để chúng tôi có thể cài đặt nó trên các thiết bị Android.

Có rất nhiều vấn đề chúng tôi phải đối mặt trong suốt quá trình. Sử dụng API Google Cloud Storage với một hàm không máy chủ cần phải làm việc. Chỉ bằng cách sử dụng điều này, chúng tôi đã phải đối mặt với một loạt các trở ngại. Một số có thể được giải quyết bằng cách đọc diễn đàn; một số cần giải pháp thay thế. Người dùng thích điều gì đó thông minh, vì vậy chúng tôi cũng muốn làm cho ứng dụng thông minh hơn. Chúng tôi muốn làm cho ứng dụng có khả năng phát hiện đối tượng trong hình ảnh, vì vậy chúng tôi sử dụng TensorFlow.js để làm điều đó. Chúng tôi cũng muốn làm cho ứng dụng có khả năng quét mã QR, vì vậy chúng tôi sử dụng ZXing để làm điều đó.

📝 Những gì tôi học được

Cách sử dụng Next.js để xây dựng một ứng dụng web
Cách sử dụng MongoDB Atlas để lưu trữ dữ liệu
Cách sử dụng Google Cloud Platform để lưu trữ hình ảnh
Cách sử dụng TensorFlow.js để chạy các mô hình trong trình duyệt
Cách sử dụng PWA để làm cho ứng dụng có thể cài đặt
Cách sử dụng Trusted Web Activity để làm cho ứng dụng có thể cài đặt trên các thiết bị Android