애플리케이션 카르두스 - 오픈 소스 개인 재고 관리 애플리케이션

제가 만든 것

Cardus는 사용자가 아이템 창고를 만들고 관리할 수 있는 웹 앱입니다. 사용자는 창고에 아이템을 추가하고 어떤 상자가 어떤 물건을 보관하고 있는지 빠르게 확인할 수 있습니다. 또한 사용자는 다른 사용자와 창고 또는 상자를 공유하여 협업할 수 있습니다.

앱 링크

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

Play 스토어: 추후 공개

설명

Cardus 앱은 모바일 사용자를 위한 웹 개발의 한계에 도전하기 위한 웹 앱 프로젝트입니다. 이 앱은 React 프레임워크인 Next.js로 구축되었으며 Vercel에 배포됩니다. 또한 PWA이므로 모바일 기기에 설치할 수 있습니다. 또한 앱은 Trusted Web Activity를 사용하여 Android 기기에 설치할 수 있습니다. 또한 앱은 Google Cloud Platform을 사용하여 이미지를 저장하고 TensorFlow.js 모델을 실행하여 아이템 이미지의 객체를 자동으로 감지합니다.

앱을 네이티브 앱처럼 원활하게 사용할 수 있도록 했습니다. 온보딩 화면, 아름다운 전환 효과, 부드러운 애니메이션을 포함합니다. 또한 앱은 모든 최신 앱에 필수적인 다크 모드를 갖추고 있습니다.

소스 코드 링크

Cardus 앱: GitHub 저장소

허가된 라이선스

Apache-2.0 라이선스

배경

⚡ 문제점

보관 상자에 라벨을 붙이기 어려움
보관 상자가 어디 있는지 알기 어려움
어떤 보관 상자에 어떤 아이템이 있는지 알기 어려움

개인 창고/보관을 관리하는 것은 어렵습니다.

💡 해결책

사용자가 자신의 아이템 창고를 만들고 관리할 수 있는 웹 앱을 만듭니다.
사용자는 창고에 아이템을 추가하고 어떤 상자가 어떤 아이템을 보관하고 있는지 빠르게 확인할 수 있습니다.
사용자는 다른 사용자와 창고 또는 상자를 공유하여 협업할 수 있습니다.

구축 방법

📚 기술 스택

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

📖 프로세스

먼저 Next.js 앱을 만들고 MongoDB Atlas 클러스터를 생성했습니다. MongoDB와 쉽게 통신하기 위해 Prisma를 사용하여 ORM을 사용했습니다. 저희는 모바일 웹 앱에 집중하고 있으므로 나중에는 데스크톱에만 신경 씁니다. PWA, 하단 탐색 바, 상단 바 및 다크 모드를 만들었습니다. 또한 Trusted Web Activity로 만들어 Android 기기에 설치할 수 있도록 계획하고 있습니다.

여정을 따라 많은 문제에 직면했습니다. 서버리스 함수를 사용하여 Google Cloud Storage API를 사용하는 것은 작업이 필요합니다. 이를 사용하기만 해도 이미 많은 장애물에 직면하고 있습니다. 일부는 포럼을 읽어서 해결할 수 있지만, 일부는 해결 방법이 필요합니다. 사용자는 똑똑한 것을 좋아하므로 앱을 지능적으로 만들고 싶습니다. 이미지의 객체를 감지할 수 있도록 앱을 만들고 싶기 때문에 TensorFlow.js를 사용합니다. 또한 QR 코드를 스캔할 수 있도록 앱을 만들고 싶기 때문에 ZXing을 사용합니다.

📝 배운 점

Next.js를 사용하여 웹 앱을 만드는 방법
MongoDB Atlas를 사용하여 데이터를 저장하는 방법
Google Cloud Platform을 사용하여 이미지를 저장하는 방법
TensorFlow.js를 사용하여 브라우저에서 모델을 실행하는 방법
PWA를 사용하여 앱을 설치 가능하게 만드는 방법
Trusted Web Activity를 사용하여 앱을 Android 기기에 설치 가능하게 만드는 방법