- نُشر في
تطبيق Cardus - تطبيق إدارة المخزون مفتوح المصدر وشخصي
- الكتاب
- الاسم
- Imamuzzaki Abu Salam
- https://x.com/ImBIOS_Dev
ما قمت ببنائه
Cardus هو تطبيق ويب يسمح للمستخدمين بإنشاء وإدارة مستودعهم الخاص بالسلع. يمكن للمستخدمين إضافة العناصر إلى مستودعهم وتحديد الصندوق الذي يخزن فيه العنصر بسرعة. يمكن للمستخدمين أيضًا مشاركة مستودعهم أو حاوياتهم مع مستخدمين آخرين، مما يسمح لهم بالتعاون.
رابط التطبيق
الويب: https://cardus-app.vercel.app/
متجر Play: قيد التحديد
الوصف
تطبيق Cardus هو مشروع تطبيق ويب لتحدي حدود تطوير الويب للمستخدمين المحمول. تم إنشاء التطبيق باستخدام Next.js، وهو إطار عمل React، ونشره على Vercel. التطبيق هو أيضًا PWA، والذي يمكننا تثبيته على الأجهزة المحمولة. يستخدم التطبيق أيضًا Trusted Web Activity، مما يسمح بتثبيته على أجهزة Android. يستخدم التطبيق أيضًا Google Cloud Platform لتخزين الصور وتشغيل نماذج TensorFlow.js للكشف التلقائي عن الأجسام في صور العناصر.
أريد أن يكون التطبيق سلسًا، مثل التطبيق الأصلي. هناك شاشات انضمام، انتقالات جميلة، وتحريك سلس. يحتوي التطبيق أيضًا على وضع مظلم، وهو أمر ضروري لأي تطبيق حديث.
رابط إلى رمز المصدر
رخصة مرنة
الخلفية
⚡ المشكلة
صعوبة وضع علامات على صندوق التخزين
صعوبة معرفة مكان صندوق التخزين
صعوبة معرفة العناصر الموجودة في أي تخزين
من الصعب إدارة مستودع / تخزين شخصي.
💡 الحل
إنشاء تطبيق ويب يسمح للمستخدمين بإنشاء وإدارة مستودعهم الخاص من العناصر
يمكن للمستخدمين إضافة العناصر إلى مستودعهم وتحديد الصندوق الذي يخزن فيه العنصر بسرعة
يمكن للمستخدمين أيضًا مشاركة مستودعهم أو صندوقهم مع مستخدمين آخرين، مما يسمح لهم بالتعاون
كيف قمت ببنائه
📚 Stack التقني
Next.js
React
MongoDB
Google Cloud Platform
TensorFlow.js
PWA
Trusted Web Activity
📖 العملية
بدأنا بإنشاء تطبيق Next.js، ثم أنشأنا مجموعة MongoDB Atlas. أردنا التواصل بسهولة مع MongoDB، لذلك استخدمنا ORM مع Prisma. تركيزنا هو تطبيق ويب محمول، لذلك لا نهتم بسطح المكتب إلا بعد فترة من الوقت. نصنعه PWA، وشريط تنقل سفلي، وشريط علوي، ووضع مظلم. نحن نخطط أيضًا لجعله Trusted Web Activity حتى نتمكن من تثبيته على أجهزة Android.
هناك الكثير من المشاكل التي نواجهها على طول الطريق. استخدام Google Cloud Storage API مع وظيفة serverless يتطلب عملًا. بمجرد استخدام هذا، نحن نواجه بالفعل مجموعة من العقبات. يمكن حل بعضها بقراءة منتدى، والبعض الآخر يحتاج إلى حل بديل. يحب المستخدمون الأشياء الذكية، لذلك نريد أيضًا جعل التطبيق ذكيًا. نريد أن نجعل التطبيق قادرًا على اكتشاف الكائن في الصورة، لذلك نستخدم TensorFlow.js للقيام بذلك. نريد أيضًا أن نجعل التطبيق قادرًا على مسح رمز QR، لذلك نستخدم ZXing للقيام بذلك.
📝 ما تعلمته
كيفية استخدام Next.js لإنشاء تطبيق ويب
كيفية استخدام MongoDB Atlas لتخزين البيانات
كيفية استخدام Google Cloud Platform لتخزين الصور
كيفية استخدام TensorFlow.js لتشغيل النماذج في المتصفح
كيفية استخدام PWA لجعل التطبيق قابل للتثبيت
كيفية استخدام Trusted Web Activity لجعل التطبيق قابل للتثبيت على أجهزة Android