برنامه Cardus - برنامه ای برای مدیریت شخصی انبار با منبع باز

آنچه ساختم

Cardus یک برنامه وب است که به کاربران اجازه می‌دهد تا انبار اقلام خود را ایجاد و مدیریت کنند. کاربران می‌توانند اقلام را به انبار خود اضافه کرده و به سرعت شناسایی کنند که چه جعبه‌ای چه چیزی را ذخیره می‌کند. کاربران همچنین می‌توانند انبار یا کانتینر خود را با سایر کاربران به اشتراک بگذارند و به آنها اجازه همکاری دهند.

لینک برنامه

وب: https://cardus-app.vercel.app/

Play Store: TBD

شرح

Cardus App یک پروژه برنامه وب است که برای چالش کشیدن مرز توسعه وب برای یک کاربر تلفن همراه طراحی شده است. این برنامه با Next.js، یک چارچوب React، ساخته شده و روی Vercel مستقر شده است. این برنامه همچنین یک PWA است که می‌توان آن را روی دستگاه‌های تلفن همراه نصب کرد. این برنامه همچنین از Trusted Web Activity استفاده می‌کند که به برنامه اجازه می‌دهد تا روی دستگاه‌های اندرویدی نصب شود. این برنامه همچنین از Google Cloud Platform برای ذخیره تصاویر و اجرای مدل‌های TensorFlow.js برای تشخیص خودکار اشیاء در تصاویر اقلام استفاده می‌کند.

من می‌خواهم این برنامه مانند یک برنامه بومی بدون نقص باشد. صفحه‌های راهنمایی، انتقال‌های زیبا و انیمیشن‌های روان در آن وجود دارد. این برنامه همچنین دارای حالت تاریک است که برای هر برنامه مدرن الزامی است.

لینک به کد منبع

Cardus App: مخزن GitHub

مجوز آزاد

مجوز Apache-2.0

پیشینه

⚡ مشکل

برچسب زدن جعبه‌های ذخیره سازی دشوار است
یافتن مکان جعبه‌های ذخیره سازی دشوار است
دانستن اینکه کدام اقلام در کدام ذخیره سازی قرار دارند دشوار است

مدیریت انبار/ذخیره سازی شخصی دشوار است.

💡 راه حل

ایجاد یک برنامه وب که به کاربران اجازه می‌دهد تا انبار اقلام خود را ایجاد و مدیریت کنند
کاربران می‌توانند اقلام را به انبار خود اضافه کرده و به سرعت شناسایی کنند که چه جعبه‌ای چه چیزی را ذخیره می‌کند
کاربران همچنین می‌توانند انبار یا جعبه خود را با سایر کاربران به اشتراک بگذارند و به آنها اجازه همکاری دهند

نحوه ساخت آن

📚 فناوری‌های مورد استفاده

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

📖 فرآیند

ما با ایجاد یک برنامه Next.js شروع کردیم و سپس یک خوشه MongoDB Atlas ایجاد کردیم. ما می‌خواستیم به راحتی با MongoDB ارتباط برقرار کنیم، بنابراین از ORM با Prisma استفاده کردیم. تمرکز ما یک برنامه وب تلفن همراه است، بنابراین پس از مدتی فقط به دسکتاپ اهمیت می‌دهیم. آن را به یک PWA، یک نوار ناوبری پایین، یک نوار بالا و یک حالت تاریک تبدیل کردیم. همچنین قصد داریم آن را به یک Trusted Web Activity تبدیل کنیم تا بتوانیم آن را روی دستگاه‌های اندرویدی نصب کنیم.

در طول مسیر با مشکلات زیادی روبرو شدیم. استفاده از API Google Cloud Storage با یک تابع بدون سرور زمان‌بر است. فقط با استفاده از این API، با موانع زیادی روبرو می‌شویم. برخی از آنها را می‌توان با خواندن یک انجمن حل کرد؛ برخی دیگر به یک راه حل نیاز دارند. کاربران چیزهای هوشمندانه را دوست دارند، بنابراین می‌خواهیم این برنامه را هوشمند کنیم. ما می‌خواهیم برنامه را قادر به تشخیص شی در تصویر کنیم، بنابراین از TensorFlow.js برای این کار استفاده می‌کنیم. همچنین می‌خواهیم برنامه را قادر به اسکن کد QR کنیم، بنابراین از ZXing برای این کار استفاده می‌کنیم.

📝 آنچه یاد گرفتم

چگونگی استفاده از Next.js برای ساخت یک برنامه وب
چگونگی استفاده از MongoDB Atlas برای ذخیره داده‌ها
چگونگی استفاده از Google Cloud Platform برای ذخیره تصاویر
چگونگی استفاده از TensorFlow.js برای اجرای مدل‌ها در مرورگر
چگونگی استفاده از PWA برای قابل نصب کردن برنامه
چگونگی استفاده از Trusted Web Activity برای قابل نصب کردن برنامه روی دستگاه‌های اندرویدی