prolog app

يعد هذا المستودع جزءًا من جهاز محاكاة Job React حيث تعمل في بيئة ديف احترافية مع أدوات وسير عمل متقدمة. تقوم بتنفيذ المهام بناءً على التصميمات التي تبدأ من إصلاحات الأخطاء الصغيرة إلى الميزات الكاملة. في الأساس ، تتعلم الكثير من الأشياء العملية التي عادة ما تختبرها فقط بمجرد انضمامك إلى فريق React Professional.

التطبيق

التطبيق هو أداة تسجيل الأخطاء والمراقبة على غرار Sentry أو Rollbar. يمكنك العثور على نسخة منشورة من الفرع الرئيسي في Prolog.Profy.dev. ملاحظة: يجب عليك النقر فوق رابط "لوحة القيادة" في الزاوية اليمنى العليا لرؤية التطبيق كما هو موضح في لقطة الشاشة أدناه.

Codebase Tour

شاهد هذا الفيديو للقيام بجولة من خلال قاعدة كود.

ابدء

1. استنساخ وتثبيت

تم تصميم هذا المشروع باستخدام وحدات Next.js و TypeScript و Cypress & SCSS وغيرها. لبدء العمل في المشروع ، قم أولاً باستنساخ المستودع على جهازك المحلي وتثبيت التبعيات.

npm install

2. إنشاء ملف .env

انسخ ملف .env.template إلى ملف جديد يسمى .env . يحتوي هذا الملف على متغيرات البيئة المطلوبة التي يتم حقنها بواسطة next.js عبر حزمة dotenv .

3. تشغيل خادم التطوير

أخيرًا ، قم بتشغيل خادم التطوير:

npm run dev

يمكنك الآن فتح http: // localhost: 3000 مع متصفحك لرؤية التطبيق.

موصى بها مقابل امتدادات الكود

يستخدم هذا المشروع أدوات مثل ESLINT و Stylelint و أجمل. لتحقيق أقصى استفادة من هذه الأدوات ، يوصى بتثبيت الامتدادات المقابلة. بالنسبة إلى VS Code هذه هي:

• eslint
• Stylelint
• أجمل
• SCSS Intellisense (مثل الإكمال التلقائي لمتغيرات SCSS)
• تفاعل وحدات CSS (على سبيل المثال لفتح تعريف فئة CSS مع CMD/CTRL + انقر وتحذير من أسماء الفئات غير الموجودة)

قد يحتاج ملحق StyleLint الرسمي إلى بعض التعديل في ملف settings.json . إذا لم ينجح الأمر خارج المربع ، فحاول إضافة هذه الخطوط:

 "css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"],

امتدادات إضافية أجدها ذات قيمة كبيرة

Code Spell Checker Gitlens SVG Github Copilot (مدفوع)

الاختبارات

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

Cypress يجعل من الأسهل بكثير البدء في الاختبار. لا يزال يتعين عليك التعود على طريقة الترميز الجديدة ، ولكن بفضل تصحيح أخطاء واجهة المستخدم الرائعة أمر سهل ومشابه جدًا لما تستخدمه من متصفحك.

لتشغيل اختبارات السرو على الجهاز المحلي ، استخدم هذا الأمر:

npm run cypress

قصص

تعد Storybook أداة رائعة لتوثيق مكوناتك واختبارها بصريًا بمعزل عن غيرها. لفتح القصة القصيرة

npm run storybook