Cardus App - Open-source na Personal na Application sa Pamamahala ng Imbentaryo

Ang Aking Ginawa

Ang Cardus ay isang web app na nagbibigay-daan sa mga user na lumikha at pamahalaan ang kanilang imbakan ng mga item. Maaaring magdagdag ng mga item ang mga user sa kanilang imbakan at madaling matukoy kung anong kahon ang nag-iimbak ng anong bagay. Maaari ring ibahagi ng mga user ang kanilang imbakan o lalagyan sa ibang mga user, na nagbibigay-daan sa kanila na makipagtulungan.

Link ng App

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

Play Store: TBD

Paglalarawan

Ang Cardus App ay isang proyekto ng web app upang hamunin ang hangganan ng web development para sa isang mobile user. Ang app ay binuo gamit ang Next.js, isang React framework, at nai-deploy sa Vercel. Ang app ay isang PWA rin, na maaari nating i-install sa mga mobile device. Gumagamit din ang app ng Trusted Web Activity, na nagbibigay-daan sa app na mai-install sa mga Android device. Gumagamit din ang app ng Google Cloud Platform upang mag-imbak ng mga larawan at upang patakbuhin ang mga TensorFlow.js model upang awtomatikong makita ang mga bagay sa mga larawan ng item.

Gusto kong maging walang tahi ang app, tulad ng isang katutubong app. May mga screen ng onboarding, magagandang transition, at makinis na mga animation. Ang app ay mayroon ding dark mode, isang dapat sa anumang modernong app.

Link sa Source Code

Cardus App: GitHub Repository

Permissive License

Apache-2.0 license

Background

⚡ Problema

Mahirap na lagyan ng label ang kahon ng imbakan
Mahirap malaman kung nasaan ang kahon ng imbakan
Mahirap malaman kung anong mga item ang nasa aling imbakan

Mahirap pamahalaan ang personal na imbakan.

💡 Solusyon

Lumikha ng isang web app na nagbibigay-daan sa mga user na lumikha at pamahalaan ang kanilang sariling imbakan ng mga item
Maaaring magdagdag ng mga item ang mga user sa kanilang imbakan at madaling matukoy kung anong kahon ang nag-iimbak ng anong item
Maaari ring ibahagi ng mga user ang kanilang imbakan o kahon sa ibang mga user, na nagbibigay-daan sa kanila na makipagtulungan

Paano ko ito ginawa

📚 Tech Stack

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

📖 Ang Proseso

Nagsimula kami sa pamamagitan ng paglikha ng isang Next.js app, at pagkatapos ay gumawa kami ng isang MongoDB Atlas cluster. Gusto naming makipag-usap nang madali sa MongoDB, kaya gumamit kami ng ORM kasama ang Prisma. Ang aming pokus ay isang mobile web app, kaya nagmamalasakit lamang kami sa desktop pagkatapos ng ilang sandali. Ginawa namin itong isang PWA, isang bottom navigation bar, isang top bar, at isang dark mode. Plano rin naming gawin itong isang Trusted Web Activity upang mai-install ito sa mga Android device.

Maraming problema ang kinakaharap namin sa daan. Ang paggamit ng Google Cloud Storage API na may isang serverless function ay nangangailangan ng trabaho. Sa pamamagitan lamang ng paggamit nito, nakaharap na tayo sa maraming hadlang. Ang ilan ay maaaring malutas sa pamamagitan ng pagbabasa ng isang forum; ang ilan ay nangangailangan ng isang workaround. Gustung-gusto ng mga user ang matalinong bagay, kaya gusto rin naming gawing matalino ang app. Gusto naming gawing kaya ng app na makita ang bagay sa larawan, kaya ginagamit namin ang TensorFlow.js upang gawin iyon. Gusto rin naming gawing kaya ng app na i-scan ang QR code, kaya ginagamit namin ang ZXing upang gawin iyon.

📝 Ang aking natutunan

Paano gamitin ang Next.js upang bumuo ng isang web app
Paano gamitin ang MongoDB Atlas upang mag-imbak ng data
Paano gamitin ang Google Cloud Platform upang mag-imbak ng mga larawan
Paano gamitin ang TensorFlow.js upang patakbuhin ang mga modelo sa browser
Paano gamitin ang PWA upang gawing mai-install ang app
Paano gamitin ang Trusted Web Activity upang gawing mai-install ang app sa mga Android device