Program Cardus - Program Pengurusan Storan Peribadi dengan Sumber Terbuka

Apa yang Saya Bina

Cardus ialah aplikasi web yang membolehkan pengguna mencipta dan mengurus gudang item mereka. Pengguna boleh menambah item ke gudang mereka dan mengenal pasti dengan cepat kotak mana yang menyimpan sesuatu barang. Pengguna juga boleh berkongsi gudang atau bekas mereka dengan pengguna lain, membolehkan mereka berkolaborasi.

Pautan Aplikasi

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

Play Store: TBD

Penerangan

Aplikasi Cardus ialah projek aplikasi web untuk mencabar sempadan pembangunan web untuk pengguna mudah alih. Aplikasi ini dibina dengan Next.js, rangka kerja React, dan diedarkan di Vercel. Aplikasi ini juga merupakan PWA, yang boleh kita pasang pada peranti mudah alih. Aplikasi ini juga menggunakan Trusted Web Activity, yang membolehkan aplikasi dipasang pada peranti Android. Aplikasi ini juga menggunakan Google Cloud Platform untuk menyimpan imej dan untuk menjalankan model TensorFlow.js untuk mengesan objek secara automatik dalam imej item.

Saya mahu aplikasi ini menjadi lancar, seperti aplikasi asli. Terdapat skrin onboarding, peralihan yang indah, dan animasi yang lancar. Aplikasi ini juga mempunyai mod gelap, yang merupakan keperluan untuk mana-mana aplikasi moden.

Pautan ke Kod Sumber

Aplikasi Cardus: Repositori GitHub

Lesen Permisif

Lesen Apache-2.0

Latar Belakang

⚡ Masalah

Sukar untuk melabel kotak simpanan
Sukar untuk mengetahui di mana kotak simpanan berada
Sukar untuk mengetahui item mana yang berada di simpanan mana

Mencabar untuk mengurus gudang/simpanan peribadi.

💡 Penyelesaian

Cipta aplikasi web yang membolehkan pengguna mencipta dan mengurus gudang item mereka sendiri
Pengguna boleh menambah item ke gudang mereka dan mengenal pasti dengan cepat kotak mana yang menyimpan item tersebut
Pengguna juga boleh berkongsi gudang atau kotak mereka dengan pengguna lain, membolehkan mereka berkolaborasi

Bagaimana Saya Membina Ia

📚 Stack Teknologi

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

📖 Prosesnya

Kami mulakan dengan mencipta aplikasi Next.js, dan kemudian kami membuat kluster MongoDB Atlas. Kami mahu berkomunikasi dengan mudah dengan MongoDB, jadi kami menggunakan ORM dengan Prisma. Fokus kami ialah aplikasi web mudah alih, jadi kami hanya mengambil berat tentang desktop selepas beberapa ketika. Kami menjadikannya PWA, bar navigasi bawah, bar atas, dan mod gelap. Kami juga merancang untuk menjadikannya Trusted Web Activity supaya kami boleh memasangnya pada peranti Android.

Terdapat banyak masalah yang kami hadapi sepanjang perjalanan. Menggunakan Google Cloud Storage API dengan fungsi serverless memerlukan usaha. Hanya dengan menggunakan ini, kami sudah menghadapi banyak halangan. Sesetengah boleh diselesaikan dengan membaca forum; sesetengah memerlukan penyelesaian. Pengguna menyukai sesuatu yang bijak, jadi kami juga mahu menjadikan aplikasi ini pintar. Kami mahu menjadikan aplikasi ini mampu mengesan objek dalam imej, jadi kami menggunakan TensorFlow.js untuk melakukannya. Kami juga mahu menjadikan aplikasi ini mampu mengimbas kod QR, jadi kami menggunakan ZXing untuk melakukannya.

📝 Apa yang Saya Pelajari

Cara menggunakan Next.js untuk membina aplikasi web
Cara menggunakan MongoDB Atlas untuk menyimpan data
Cara menggunakan Google Cloud Platform untuk menyimpan imej
Cara menggunakan TensorFlow.js untuk menjalankan model dalam penyemak imbas
Cara menggunakan PWA untuk menjadikan aplikasi boleh dipasang
Cara menggunakan Trusted Web Activity untuk menjadikan aplikasi boleh dipasang pada peranti Android