اذهب إلى المحتوى

Mustafa Suleiman

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    13218

  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • عدد الأيام التي تصدر بها

    365

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو Mustafa Suleiman

  1. Mustafa Suleiman
    هل المقصود هو نشر المقالات على المدونة أم نشر المقالات لتظهر في جوجل؟ بخصوص نشر المقالات على المدونة حاول ضبط إعدادات الروابط الدائمة والمقالة التالية ستفيدك: أيضًا تأكد من أن حالة المقالة "منشورة" (Published) حتى تظهر للزوار، ويمكنك تغيير حالة المقالة من خلال لوحة تحكم ووردبريس، في قسم "المقالات" (Posts)، من خلال النقر على "حالة" (Status) واختيار "منشورة" (Published). وبخصوص جوجل والـ SEO عليك استخدام إضافة Yoast أو All in one SEO ثم ضبط الإعدادات الخاصة بها.
  2. Mustafa Suleiman
    نستخدم عنصر background في صفحة HTML لتحديد خلفية للعنصر نفسه، أو للصفحة ككلل، عن طريق تحديد قيمة للخاصية background-color. ومثلاً لإضافة خلفية زرقاء إلى الصفحة ككل، علينا إضافة الكود التالي إلى عنصر body: <body style="background-color: blue;"> ... </body> ولكن استخدام عنصر background في HTML له بعض القيود حيث لا يمكن استخدامه لتحديد صورة كخلفية، أو لتحديد كيفية تكرار الصورة. أما استخدام عنصر background في صفحة CSS، فهو أكثر مرونة، ونستطيع استخدامه لتحديد خلفية للعنصر نفسه، أو للصفحة ككل، أيضًا لاستخدامه لتحديد صورة كخلفية، أو لتحديد كيفية تكرار الصورة. ولإضافة خلفية زرقاء إلى الصفحة ككل، نقوم بإضافة الكود التالي إلى ملف CSS: body { background-color: blue; } ولاستخدام صورة كخلفية، نكتب الكود كالتالي: body { background-image: url("image.png"); } ولتكرار الصورة نكتب الآتي: body { background-repeat: repeat; } أي من الأفضل كتابة تنسيقات CSS بشكل منفصل وخاصًة عنصر background وذلك لأنه أكثر مرونة وقابلية للتخصيص، وبالطبع تستطيع استخدام عنصر background في HTML إذا كنت بحاجة إلى تحديد خلفية بسيطة للعنصر نفسه أو للصفحة ككل.
  3. Mustafa Suleiman
    يمكنك الحصول على روابط المكتبات من خلال CDN من مواقع مثل: https://cdnjs.com https://www.jsdelivr.com إليك الرابط <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> ومن الأفضل طرح الأسئلة المتعلقة بالدورة أسفل الدرس الخاص بها في التعليقات وطرح الأسئلة العامة هنا.
  4. Mustafa Suleiman
    من المفترض أن الطريقة الصحيحة لإزالة جلسة المستخدم عند تسجيل الخروج في Flutter Firebase،هي كالتالي: Future<void> signOut() async { // 1. إلغاء تسجيل الدخول من Firebase Auth await FirebaseAuth.instance.signOut(); // 2. مسح بيانات المستخدم من Firebase await FirebaseFirestore.instance .collection('users') .doc(FirebaseAuth.currentUser!.uid) .delete(); // 3. إعادة تعيين المتغيرات الخاصة بالمستخدم _isLoggedIn = false; _user = null; } حيث يعمل الكود على النحو التالي: أولاً، إلغاء تسجيل الدخول من Firebase Auth باستخدام FirebaseAuth.instance.signOut(). بعد ذلك، مسح بيانات المستخدم من Firebase باستخدام FirebaseFirestore.instance.collection('users').doc(FirebaseAuth.currentUser!.uid).delete(). ثم إعادة تعيين المتغيرات الخاصة بالمستخدم، مثل _isLoggedIn و _user. وتستطيع استخدام الكود في ملف main.dart ووضعه في وظيفة onPressed لزر تسجيل الخروج: // ... class MyApp extends StatelessWidget { // ... @override Widget build(BuildContext context) { return MaterialApp( // ... home: Scaffold( appBar: AppBar( title: Text('My App'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // ... ElevatedButton( onPressed: signOut, child: Text('تسجيل الخروج'), ), ], ), ), ), ); } // ... Future<void> signOut() async { // 1. إلغاء تسجيل الدخول من Firebase Auth await FirebaseAuth.instance.signOut(); // 2. مسح بيانات المستخدم من Firebase await FirebaseFirestore.instance .collection('users') .doc(FirebaseAuth.currentUser!.uid) .delete(); // 3. إعادة تعيين المتغيرات الخاصة بالمستخدم _isLoggedIn = false; _user = null; // 4. إظهار رسالة للمستخدم ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('تم تسجيل الخروج بنجاح'), ), ); } } وعندما يضغط المستخدم على زر تسجيل الخروج، سيتم إلغاء تسجيل الدخول من Firebase Auth ثم مسح بيانات المستخدم من Firebase، بالإضافة إلى إعادة تعيين المتغيرات الخاصة بالمستخدم، مما يشير إلى أن المستخدم غير مسجل الدخول.
  5. Mustafa Suleiman
    سأتحدث معك بصراحة، في حال ظننتي أنك ستتمكني من إنهاء تلك الدورات كما ينبغي في شهرين فقط، فستصابين بالإحباط، لذلك عليك وضع خطة قريبة من أرض الواقع وبشكل عملي. وأنا لا أتحدث عن دورة مثل دورة تطوير المنتجات أو دورة علوم الحاسب، فتلك الدورات يمكن إنهائها خلال شهر أو أقل حسب خبراتك السابقة وعلاقتك بالحاسوب ومجال البرمجة. أما دورة تطوير واجهات المستخدم فيمكن إنهائها خلال شهرين، لكن الدراسة الصحيحة للدورة بحاجة إلى 3 أشهر على الأقل من أجل دراسة الأساسيات بشكل جيد وإنشاء مشاريع جانبية بالإضافة للدورة والقراءة والبحث ومشاهدة فيديوهات على اليوتيوب لتعلم المزيد وهكذا. أما الدورات الأخرى فهى بحاجة إلى 4 أشهر على الأقل كدراسة صحيحة، ولا مشكلة في إنهائها خلال شهرين، لكن هل مستوى من قام بإنهائها في شهرين مثل 4 أشهر أو 6 أشهر؟ بالتأكيد لا، كلما تم بذل مجهود وتوفير وقت أكثر للدراسة والتأني ستصبح المحصلة أفضل بلا شك. وعلي أي حال كل دورة بحاجة إلى 4 أو 5 أضعاف الوقت الإجمالي لها من إجل فهمها واستيعابها والتطبيق والبحث وما إلى ذلك. وستجدي هنا شرح مفصل:
  6. Mustafa Suleiman
    عليك أولاً إنشاء ملف JSON يحتوي على بيانات الصور وليك ملف data.json بمحتوى مشابه لهذا: [ { "id": 1, "src": "https://placehold.co/600x400", "alt": "صورة 1" }, { "id": 2, "src": "https://placehold.co/600x400", "alt": "صورة 2" }, { "id": 3, "src": "https://placehold.co/600x400", "alt": "صورة 3" } ] في تطبيق React قم بإنشاء مكون (component) لعرض الصور وليك مكون اسمه ImageGallery: import Images from './assets/data.json'; const App = () => { console.log(Images); // عرض الصور في المكون return ( <div> {Images.map(image => ( <img key={image.id} src={image.src} alt={image.alt} /> ))} </div> ); }; export default ImageGallery;
  7. Mustafa Suleiman
    هل قمت بحل المشكلة؟
  8. Mustafa Suleiman
    لا يوجد أي جهاز أو نظام محمي من الإختراق تمامًا، لكن توجد أنظمة وأجهزة صعبة الإختراق، بسبب تصميم العتاد وكفاءة النظام والبنية الخاصة به. ومن المعروف أن نظام iOS أكثر أمانًا من أندرويد بسبب إنغلاقه وكونه نظام منغلق المصدر على عكس أندرويد وهو نظام مفتوح المصدر ومتاح للجميع. أي أن من يحمل آيفون لديه أمان أكثر من أجهزة الأندرويد، لكن بالطبع هناك ثغرات يتم اكتشافها في نظام iOS أو عتاد الجهاز وهو المعالج، ولعلك سمعت بالإختراقات التي حدثت بسبب برنامج بيغاسوس الخاص بشركة NSO الإسرائيلية وإختراق هواتف 5 وزراء فرنسيين ودبلوماسي بالإليزيه وأيضًا الرئيس الفرنسي نفسه كان عرضة لعملية التجسس. لكن ذلك أمر بحاجة إلى شركة أمنية ضخمة مثل شركة NSO الإسرائيلية لفعل ذلك، ويتم اكتشاف ثغرات أخرى من قبل خبراء أمنين مستقلين آخرين.
  9. Mustafa Suleiman
    هناك بعض العلامات التي تدل على أن البريد الإلكتروني عبارة عن سبام، منها: غالبًا ما يكون عنوان البريد الإلكتروني للمرسل غامضًا أو غير موجود أو يحتوي على أخطاء إملائية. ستجد أن موضوع البريد الإلكتروني جذابًا أو مضللًا أو يحتوي على أخطاء إملائية. المحتوى النصي للبريد الإلكتروني غير مرتبط أو يحتوي على أخطاء إملائية أو قواعد اللغة. تحتوي رسائل البريد الإلكتروني المزعجة على مرفقات ضارة. أي عليك دائمًا تفقد عنوان المرسل للإيميل وتفقده جيدًا وأنه مطابق تمامًا للموقع الرسمي: في رقم 1 تفقد اسم الدومين الذي تم إرسال البريد منه وهل هو الدومين الرسمي أم لا وفي Gmail تستطيع الوصول لتلك المعلومات بالضغط على السهم الصغير كالتالي: وبعض الأمثلة على رسائل البريد الإلكتروني المزعجة: رسائل البريد الإلكتروني التي تدعي أنها من شركات معروفة، مثل البنوك أو مواقع التسوق عبر الإنترنت، ولكنها في الواقع تطلب معلومات شخصية أو مالية. رسائل البريد الإلكتروني التي تدعي أنها من أشخاص أو منظمات مألوفة، ولكنها في الواقع تطلب مساعدة مالية أو عاطفية. رسائل البريد الإلكتروني التي تحتوي على روابط ضارة أو مرفقات يمكن أن تصيب جهاز الكمبيوتر الخاص بك ببرامج ضارة. ولا تقم بالنقر على روابط أو فتح مرفقات في رسائل البريد الإلكتروني غير المرغوب فيها.
  10. Mustafa Suleiman
    قمت بحذف عنصر div الذي يحتوي على كلاس container وتطبيق خاصية flex على عنصر div بكلاس header ثم تنسيق العناصر من خلال justify-content: space-between كالتالي: .header { padding: 20px; display: flex; justify-content: space-between; } ثم استخدام خاصية position من أجل وضع القائمة أسفل الأيقونة كالتالي: .links { position: relative; } .list { position: absolute; right: 0; top: 29%; } وإليك المشروع بعد التعديل: project.rar
  11. Mustafa Suleiman
    من الأفضل إرفاق مجلد المشروع بشكل مضغوط هنا ورفعه من أجل مساعدتك لحل المشكلة، من خلال الضغط على على اسحب الملفات إلى هنا.
  12. Mustafa Suleiman
    عليك تفهم أمرًا هام وهو أن SQL هي لغة برمجة قواعد البيانات الأكثر شيوعًا في العالم، ووهي لغة قوية وفعالة لإنشاء واستعلام وتعديل قواعد البيانات، وفي تحليل البيانات، تستخدم SQL بشكل شائع لاستخراج البيانات من قواعد البيانات وتنظيفها وتحليلها. أما Python هي لغة برمجة عامة قوية وقابلة للتخصيص، وهي اللغة الأكثر استخدامًا لتحليل البيانات لأنها سهلة التعلم والاستخدام، ولديها مجموعة واسعة من المكتبات والأدوات المصممة خصيصًا لتحليل البيانات. وتستطيع استخدام Python لتحليل البيانات باستخدام مكتبات مثل Pandas وNumPy وMatplotlib للتلاعب بالبيانات ورسم الرسوم البيانية. وPython مفيدة عندما تحتاج إلى معالجة البيانات بشكل معقد أو تنفيذ تحليلات متقدمة أو تطبيق تقنيات التعلم الآلي والذكاء الاصطناعي. أي أن: SQL هي لغة تستخدم لإدارة واستعلام قواعد البيانات العلاقية. تستخدم SQL لاستخراج البيانات من قواعد البيانات وتحليلها باستخدام استعلامات مثل SELECT وGROUP BY وJOIN. SQL مناسبة بشكل خاص إذا كانت البيانات التي تريد تحليلها مخزنة في قاعدة بيانات علاقية. قد تحتاج إلى استخدام لغة برمجة أخرى مثل Python إذا كنت بحاجة إلى معالجة أو تحليل بيانات بشكل أوسع أو تنفيذ مهام أخرى إلى جانب استعلام قاعدة البيانات.
  13. Mustafa Suleiman
    أرجو إرفق صورة من الكونسول لديك ما هي الأخطاء التي تظهر لك في المتصفح؟
  14. Mustafa Suleiman
    من الأمور التي قد تساعدك بخصوص نقطة التلخيص، هو الإعتماد على Cheat sheet وهو أشبه بملخص للغة جافاسكريبت أو أي لغة ولكن بشكل إلكتروني، كالتالي: وكما ترى ستجد ملخص لغالب اللغة وستجد بالموقع لغات أخرى أيضًا مثل HTML, CSS ومكتبات مثل Bootstrap و React: http://cheatsheets.shecodes.io/javascript https://htmlcheatsheet.com/js/ عليك بالبحث في جوجل عن JavaScript Cheat Sheet وتستطيع فعل نفس الأمر مع أي لغة أو مكتبة.
  15. Mustafa Suleiman
    يكفي ذلك في البداية، حيث أن كورس CS50 هو كورس تأسيسي في البرمجه فهو يُعد مقدمة لعلوم الكمبيوتر ويعلم المبتدئين كيفية التفكير منطقيا وحل المشاكل بكفاءة، ويُغطي الكورس أساسيات البرمجة، بما في ذلك الخوارزميات، وبنى البيانات، وهندسة البرمجيات، والأمان. صحيح الكورس يجدد كل سنة، ويتم تحديث المحتويات والمواضيع التي يتم تناولها في الكورس كل عام لضمان مواكبة أحدث التطورات في مجال علوم الكمبيوتر. CS50: كورس CS50 هو الأصل لجميع الكورسات الأخرى. CS50x: هو نفس كورس CS50، ولكن بدون شهادة رسمية. CS50 AP: كورس مُقدم من جامعة هارفارد ويُقدم للطلاب في المدارس الثانوية وهو نسخة من كورس CS50x مُعدلة لتلبية متطلبات برنامج البكالوريا المتقدمة (AP) في علوم الكمبيوتر. ما الذي أنصحك به؟ في حال كنت تريد كورس باللغة العربية فأرشح لك كورس CS50 من قناة Abdelrahman Gamal وهو جيد جدًا. أما الكورسات الإنجليزية فيكفي أن تبحث على اليوتيوب عن CS50.
  16. Mustafa Suleiman
    سأحاول توضيح الأمر لك، حيث أن نظم المعلومات هي أنظمة تتكون من أشخاص وأجهزة وإجراءات وبيانات وبرامج تستخدم لجمع ومعالجة وتخزين وتوزيع المعلومات. الأشخاص: هم المستخدمون الذين يدخلون البيانات ويستخدمون المعلومات من النظام. الأجهزة: هي الأجهزة المادية التي يستخدمها النظام، مثل أجهزة الكمبيوتر والخوادم والأجهزة الطرفية. الإجراءات: هي الخطوات التي يتم تنفيذها لجمع ومعالجة وتخزين وتوزيع المعلومات. البيانات: هي الحقائق والأرقام والحروف التي يتم تخزينها في النظام. البرامج: هي البرامج التي تتحكم في كيفية عمل النظام. وقواعد البيانات هي مجموعة من البيانات المخزنة بطريقة يمكن الوصول إليها ومعالجتها بشكل فعال. البيانات: هي الحقائق والأرقام والحروف التي يتم تخزينها في قاعدة البيانات. الهيكل: هو الطريقة التي يتم بها تخزين البيانات في قاعدة البيانات. العلاقات: هي الروابط بين البيانات في قاعدة البيانات. أما نظام إدارة قواعد البيانات (DBMS) هو مجموعة من البرامج التي تسمح للمستخدمين بإنشاء وإدارة قواعد البيانات. الفرق بين نظم المعلومات وقواعد البيانات نظم المعلومات هي أنظمة شاملة تتضمن قواعد البيانات، لكن قواعد البيانات ليست سوى جزء من نظم المعلومات. مثال على نظم المعلومات نظام إدارة الموارد البشرية هو نظام معلومات يجمع ويعالج ويخزن ويوزع معلومات عن الموظفين، وتتضمن قواعد البيانات المستخدمة في هذا النظام معلومات مثل بيانات الموظفين وبيانات الأجور وبيانات الأداء. مثال على قواعد البيانات قاعدة بيانات المنتجات هي قاعدة بيانات تتضمن معلومات عن المنتجات التي يبيعها متجر، وتتضمن تلك المعلومات اسم المنتج والوصف والسعر والكمية المتوفرة.
  17. Mustafa Suleiman
    رسالة التحذير تشير إلى أن بعض القطع (chunks) في مشروع nuxtjs الخاص بك أكبر من 500 كيلوبايت بعد التقليلK ,يمكن أن يكون هذا له تأثير على أداء التطبيق، حيث يمكن أن يستغرق تحميل القطع الكبيرة وقتًا أطول. بعض الحلول الممكنة للمشكلة هي كالتالي: استخدام dynamic import() لفك الحزم (code-split) التطبيق من أجل تحميل القطع الكبيرة فقط عند الحاجة إليها، مما قد يؤدي إلى تحسين الأداء. استخدام build.rollupOptions.output.manualChunks لتحسين فك الحزم مما سيسمح لك بتحديد القطع التي تريد فك حزمها يدويًا، مما قد يساعد في تقليل حجم القطع الكبيرة. ضبط حد حجم القطع (chunk size limit) لهذا التحذير عبر build.chunkSizeWarningLimit لإخفاء التحذير إذا كان حجم القطع أكبر من الحد المحدد. هل المشكلة تؤثر على التطبيق؟ الأمر يعتمد على حجم التطبيق ونوع المحتوى الذي يتم تحميله، فإن كان التطبيق صغيرًا أو إذا كان المحتوى الذي يتم تحميله صغيرًا، فقد لا يكون للمشكلة أي تأثير ملحوظ، ولكن إن كان التطبيق كبيرًا أو إذا كان المحتوى الذي يتم تحميله كبيرًا، فقد تؤدي المشكلة إلى إبطاء الأداء بشكل ملحوظ.
  18. Mustafa Suleiman
    الأمر يعتمد على نوعية المشروع، فمثلاً لو كان المشروع برمجي مثل موقع ويب، فيتم رفع الموقع على استضافة من أجل توفير نسخة حية للمعاينة وأيضًا رفع المشرو على GitHub ووضع وصف له والتقنيات المستخدمة ووضع الرابط الخاص بالنسخة الحية live من المشروع، وشرح طريقة تشغيل المشروع إن وجدت. وعلى موقع مستقل، يكفي وضع صورة كاملة للموقع بشكل جميع من خلال إلتقاط صورة للشاشة من خلال أدوات مثل: https://screely.com/editor Take Webpage Screenshots Entirely - FireShot ثم وضع رابط النسخة الـ Live من المشروع من أجل معاينته أو رابط المشروع على GitHub، وذكر التقنيات المستخدمة في وصف المشروع على مستقل. كالمثال التالي: أما إذا كان المشروع UI\UX فيتم وضع صور أيضًا بشكل جمالي ووضع وصف للمشروع يوضح ما قمت به والبرامج المستخدمة وتوفير رابط على Behance أو Dribble مثلاً. وأنتِ مطورة ويب وليس مصممة UI/UX على الرغم من أنك قادرة على التصميم لكن لست متخصصة بالطبع في ذلك المجال.
  19. Mustafa Suleiman
    أرجو طرح السؤال أسفل فيديو الدورة في التعليقات وسيتم مساعدتك، وطرح الأسئلة العامة هنا في قسم أسئلة البرمجة.
  20. Mustafa Suleiman
    عليك حذف ملف welcome.conf في المسار التالي: /etc/httpd/conf.d ويمكنك تنفيذ الأمر التالي إذا كان لديك وصول لمنفذ الأوامر: sudo rm -f /etc/httpd/conf.d/welcome.conf أو تستطيع تعليق الأكواد في الملف لتصبح مثل التالي: # This configuration file enables the default "Welcome" # page if there is no default index page present for # the root URL. To disable the Welcome page, comment # out all the lines below. # #<LocationMatch "^/+$"> # Options -Indexes # ErrorDocument 403 /error/noindex.html #</LocationMatch> الآن عليك إعادة تشغيل سيرفر أباتشي من خلال الأمر التالي: service httpd reload
  21. Mustafa Suleiman
    استخدم هوك useCallback() لإنشاء نسخة من دالة getToday() التي يمكن استخدامها خارج نطاق هوك useCallback(). الكود سيكون كالتالي: import { useEffect, useState, useCallback } from 'react'; import { Col, Row } from 'react-bootstrap'; import moment from 'moment'; function Test() { const [today, setToday] = useState({}); const getToday = useCallback(() => { const t = moment(); return { time: t.format('hh:mm:ss a'), date: t.format('D/MMM/YYYY'), }; }, []); useEffect(() => { console.log(getToday); setToday(getToday); }, [getToday]); return ( <Row> <Col className='colTop'>{today?.date}</Col> <Col className='colTop' style={{ fontSize: '1.6rem', textAlign: 'center' }}> <h2>{today?.time}</h2> </Col> </Row> ); } export default Test;
  22. Mustafa Suleiman
    صحيح، يمكنك تجاهل الجزء الخاص بالواجهة الأمامية في حال قررت التخصص في الواجهة الخلفية فقط، أي تنفيذ الجزء الخاص بالواجهة الخلفية من كل مشروع واستخدام الكود الخاص بالواجهة الأمامية من مستودع المشروع في حال أردت إنشاء مشروع Full-Stack. حيث أن مطور الواجهة الخلفية، مهمته هي تطوير الخادم وإنشاء الواجهات البرمجية API والتعامل مع قاعدة البيانات ومعالجة البيانات الواردة من الواجهة الأمامية، وسيتم شرح ذلك في الدورة. أي تخصص الـ "باك إند" في تطوير الويب يعني أنك ستركز على تطوير الجزء الخادم (Server-Side) من التطبيقات والمواقع، مما يعني أنك لن تتعامل بشكل مباشر مع الجزء العميل (Client-Side) الذي يتعامل مع التفاعل مع المستخدم في المتصفح. ومن المفترض أن يتواجد مطور واجهة أمامية في الفريق معه لإنشاء المشروع سويًا. لكن أنت حاليًا بمفردك، لذلك تستطيع الإكتفاء بالواجهة الخلفية فقط وإختبار الخادم من خلال أداة مثل Postman أو من خلال واجهة مستخدم بسيطة واستخدام مكتبات مثل Bootstrap أو Chakra UI.
  23. Mustafa Suleiman
    السبب هو أن الدالة useEffect() يتم تنفيذها كل مرة يتم فيها تحديث حالة المكون today، وحيث أن الدالة useEffect() تحدد حالة المكون today ، فإن ذلك يؤدي إلى حلقة لا نهاية لها من التحديثات. عليك القيام بالتالي: إضافة حالة المكون today إلى مصفوفة الاعتماديات dependencies الخاصة بالدالة useEffect() من أجل منع تنفيذ الدالة useEffect() كلما تم تحديث حالة المكون today. استخدام هوك useCallback() لإنشاء نسخة من دالة getToday() التي يمكن استخدامها خارج نطاق هوك useCallback(). import { useEffect, useState, useCallback } from 'react'; import { Col, Row } from 'react-bootstrap'; import moment from 'moment'; function Test() { const [today, setToday] = useState({}); const getToday = useCallback(() => { const t = moment(); return { time: t.format('hh:mm:ss a'), date: t.format('D/MMM/YYYY'), }; }, []); useEffect(() => { setToday(getToday); }, [getToday]); return ( <Row> <Col className='colTop'>{today?.date}</Col> <Col className='colTop' style={{ fontSize: '1.6rem', textAlign: 'center' }}> <h2>{today?.time}</h2> </Col> </Row> ); } export default Test;
  24. Mustafa Suleiman
    مكتبة Laravel pennant هي مكتبة جيدة لإنشاء أنظمة الموافقة والمراجعة، وهي مناسبة لتطبيقك حيث يوجد مستخدمين يقومون بإضافة محتوى جديد، ثم يقوم مستخدم آخر بالموافقة عليه قبل نشره على الموقع. وأولاً تحتاج إلى تثبيت المكتبة عن طريق الأمر التالي: composer require laravel/pennant ثم نشر الإعدادات وملفات التهجير عن طريق الأمر التالي: php artisan vendor:publish --provider="Laravel\Pennant\PennantServiceProvider" ثم عليك تنفيذ الأمر: php artisan migrate ولإنشاء علامة بنانت جديدة، استخدم دالة create() في نموذج Pennant، وكمثال لإنشاء علامة بنانت للموافقة على محتوى جديد، استخدم الكود التالي: use App\Models\Content; use App\Models\User; use Laravel\Pennant\Models\Pennant; class ContentForm extends Form { public function buildForm() { $this ->add('title', TextType::class) ->add('body', TextareaType::class) ->add('author', UserType::class) ->add('submit', SubmitType::class); } public function handleSubmit() { $content = Content::create($this->getData()); $pennant = Pennant::create([ 'content_id' => $content->id, 'status' => 'pending', ]); return redirect()->route('contents.index'); } } يتم إنشاء علامة بنانت جديدة مع حالة "معلقة" وتحتوي العلامة البنانت على معرف المحتوى الذي سيتم الموافقة عليه. لمراجعة العلامة البنانت، استخدم دالة review() في نموذج Pennant، ومثلاً لمراجعة علامة بنانت للموافقة على محتوى جديد، سيكون الكود كالتالي: use App\Models\Content; use App\Models\User; use Laravel\Pennant\Models\Pennant; class ContentController extends Controller { public function approve(Pennant $pennant) { $pennant->review(); $content = Content::find($pennant->content_id); $content->publish(); return redirect()->route('contents.index'); } } وستجد هنا شرح وافي في المستند الرسمي: https://laravel.com/docs/10.x/pennant
  25. Mustafa Suleiman
    في حال أنك لم تقم بتسليم الملفات المصدرية وتمضينها ضمن داخل محادثة المشروع، أي قمت بتسليم العميل الملفات خارج الموقع على واتساب مثلاً، عليك برفع الملفات داخل محادثة المشروع، وأيضًا تضمين أية محادثات خارجية من خلال عمل Screenshots وتضمينها داخل المحادثة من خلال إضافة مثل FireShot على المتصفح ثم تصوير كامل المحادثة capture entire page من خلال نسخة المتصفح لواتساب مثلاً. ستجد هنا شرح مفصل:
×
×
  • أضف...