README_ar.md

MeasureApp الواجهة الأمامية

🌐

🤖 Backend Node.js

الوصف

MeasureApp الواجهة الأمامية هو تطبيق يوفر واجهة سهلة الاستخدام لإدارة قياسات استهلاك المياه والغاز. يتكامل مع الذكاء الاصطناعي، مما يسمح للمستخدمين بتسجيل العدادات، ومتابعة الاستهلاك، والتحكم في المصاريف بشكل مفصل. يُعد التطبيق جزءًا من نظام متكامل يهدف إلى تحسين إدارة موارد المياه والغاز.

الميزات

• تسجيل المستخدمين: يسمح للمستهلكين الجدد بالتسجيل على المنصة.
• قياس الاستهلاك: تسجيل قياسات المياه والغاز مباشرة من خلال الواجهة.
• تاريخ الاستهلاك: عرض السجل الشهري للاستهلاك مع الرسوم البيانية والتفاصيل.

التقنيات المستخدمة

• React: مكتبة جافا سكريبت لإنشاء واجهات المستخدم.
• Vite: أداة بناء سريعة لتطوير الويب.
• React Router: للتنقل بين الصفحات داخل التطبيق.
• SweetAlert2: مكتبة لعرض التنبيهات التفاعلية والودية.

المتطلبات

"dependencies": {
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-router-dom": "^6.26.1",
  "sweetalert2": "^11.12.4"
},
"devDependencies": {
  "@eslint/js": "^9.9.0",
  "@types/react": "^18.3.3",
  "@types/react-dom": "^18.3.0",
  "@vitejs/plugin-react-swc": "^3.5.0",
  "eslint": "^9.9.0",
  "eslint-plugin-react-hooks": "^5.1.0-rc.0",
  "eslint-plugin-react-refresh": "^0.4.9",
  "globals": "^15.9.0",
  "typescript": "^5.5.3",
  "typescript-eslint": "^8.0.1",
  "vite": "^5.4.1"
}

كيفية تشغيل المشروع محلياً

باستخدام Docker

1. استنساخ المستودعات:

   git clone git@github.com:SamuelRocha91/precisionReactApplication.git
   git clone git@github.com:SamuelRocha91/apiMeasureWaterAndGas.git

2. قم بتنزيل ملف docker-compose.yml:

   الوصول إلى Google Drive

3. ضع ملف docker-compose.yml في هيكل مجلدات مشابه لما يلي:

   

4. قم ببناء الصور وتشغيل الحاويات:

   docker-compose up --build

بدون Docker

1. استنساخ المستودع:

   git clone git@github.com:SamuelRocha91/precisionReactApplication.git

2. انتقل إلى دليل المشروع:

   cd precisionReactApplication

3. قم بتثبيت المتطلبات:

   npm install

4. ابدأ الخادم المحلي:

   npm run dev

5. افتح التطبيق في المتصفح على العنوان http://localhost:5173.

هيكل المجلدات

precisionReactApplication/
├── assets/          # صور وموارد بصرية للتطبيق
├── components/      # مكونات React القابلة لإعادة الاستخدام
├── styles/          # ملفات CSS للتصميم
├── public/          # الملفات العامة
├── src/             # الكود المصدري للتطبيق
└── README.md        # توثيق المشروع

الميزات التي سيتم إضافتها

• التصميم المتجاوب: دعم العرض عبر الأجهزة المختلفة.
• التقسيم إلى صفحات: عرض البيانات في صفحات متعددة.
• تعديلات CSS: تحسين تصميم الواجهة.
• اختبارات الوحدة والتكامل: لضمان جودة الكود.

مشاريع أخرى

• 💎 Delivery BackEnd
• 🛒 Consumy Application
• 👨‍💼 Seller Application
• 💲 Paymenty API