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

Adnane Kadri

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

  • المساهمات

    5256

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

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

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

    52

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو Adnane Kadri

  1. Adnane Kadri
    انتبه الى ما تشير اليه رسالة الخطأ: caught (in promise) DOMException: play() failed because the user didn't interact with the document first. h يحدث هذا الخطأ عندما تحاول إحدى وظائف JavaScript تشغيل محتوى الصوت أو الفيديو دون أن يتفاعل المستخدم أولاً مع الصفحة. تحتوي معظم المتصفحات الحديثة على ميزة تمنع التشغيل التلقائي للوسائط دون تدخل المستخدم ، والتي تهدف إلى حماية المستخدمين من تشغيل الصوت والفيديو غير المرغوب فيه وذلك كنوع من الحماية من متصفحات الويب. تشير رسالة الخطأ إلى أن تابع التشغيل () فشل لأنه لم يبدأ من خلال تفاعل المستخدم، مثل النقر فوق زر أو ارتباط. يتم تشغيل هذا عادةً عند محاولة تشغيل الصوت أو الفيديو من خلال كود JavaScript الذي لم يتم تشغيله بواسطة حدث مستخدم ، مثل أحداث onclick أو onkeydown. ولعمل حيلة بسيطة قصد حل هاته المشكلة، سنحاول الاستماع لأحدث الأحداث التي تحدث على الوثيقة لنتصرف بناءا عليها ونقوم بتشغيل هذا الصوت، وليكن مثلا حدث تمرير المؤشر على الوثيقة، فيكون التشغيل كالتالي: document.addEventListener('mouseover' , () => { // تشغيل الصوت document.getElementById('welcome-sound').play(); }) سيعطي هذا نفس المقاربة تقريبا، اختبره.
  2. Adnane Kadri
    بالطبع سيحسن فهي المسؤولة عن تخزين البيانات بشكل مؤقت، وعن نفسي أتذكر اني قد لحظت فرقا كبيرا جدا في الآداء والانتاجية عندما قمت بترقية حجم الرامات من 4 الى 32 .. ولكن معظم المطورون يوصون بحجم 8 جيجابايت كحد أدنى، بينما يفضل الكثيرون استخدام 16 جيجابايت لأداء أفضل وأكثر استجابة. ومن المهم الإشارة إلى أن حجم الرام ليس العامل الوحيد الذي يؤثر على أداء الجهاز، بل يتأثر أيضاً بمعالج الكمبيوتر وسرعة القرص الصلب وكرت الشاشة وغيرها من المكونات الأخرى. لذلك، ينبغي النظر إلى المتطلبات الفعلية للتطبيقات والبرامج التي تعمل عليها وضمان توافق جميع المكونات. قم بعمل استطلاع بسيط والبحث بشأن افضل واقل المتطلبات لتشغيل برنامج معين، سيمكنك بهذا أخذ فكرة عن متطلبات البرنامج الذي تشتغل عليه. الجلوس على جهازك هو ما سيشغل حيزا كبيرا من وقتك مستقبلا، ولذلك فإنه من المهم جدا الاستثمار فيه وفي راحتك وفي انتاجيتك بدرجة أولى. فهو سرعان ما سيلحظ نتاجه.
  3. Adnane Kadri
    يمكن للأطفال بدء تعلم البرمجة من سن مبكرة جداً، بل وحتى في سن الروضة، عن طريق اللعب بألعاب تعليمية بسيطة تعلمهم مفاهيم أساسية في البرمجة مثل التسلسل والشروط والحلقات. مثل المقدم في مسار تعلم سكراتش في دورة علوم الحاسب في الاكاديمية. ولكن قد يقتضي تعلم البرمجة كسبا مطلقا لمبادئ الرياضيات مثل الأعداد والعمليات عليها وبعض المفاهيم المنطقية وقليلا جدا من الانجليزية (وهو ليس شرطا بل أمرا مساعدا فقط). يمكن استخدام لغات برمجة مثل Scratch وغيرها لتعليم الأطفال البرمجة بطريقة ممتعة وتفاعلية. ولكن بشكل عام، يتحكم في الموضوع عدة عوامل يمكن ان تؤثر في ذلك، على سبيل المثال اهتمام الطفل بالمجال وموهبته وقدرته على التركيز والمنطقية. من جانب آخر قد يجب على ولي أمره تشجيع الفضول فيه وحثه على الإبداع وتعزيز مهاراته في حل المشكلات، فهو ما سيحسن من انتاجيته وقدرته على الابداع اكثر.
  4. Adnane Kadri
    لا يمكن على وجه الحصر تحديد سبب المشكل، ولكن بشكل عام يمكن أن يتسبب في ظهور أخطاء اثناء قراءة واستدعاءات البيانات من قاعدة البيانات كل من الاحتمالات التالية: تأكد من عدم وجود خطأ في استعلام الاستدعاء الخاص بك. تأكد من أن اسم الجدول الذي تقوم بالاستدعاء منه صحيح. تأكد من أن الأعمدة التي تم تحديدها في استعلام البيانات موجودة بالفعل في الجدول وتم تسميتها بشكل صحيح. قم بقراءة نص رسالة المشكلة، وحاول فهم مدلولها فهو ما سيساعدك على حلها والعمل على ذلك.
  5. Adnane Kadri
    لتنفيذ التصميم الذي لديك في صفحات HTML معينة، يمكنك إنشاء ملف HTML جديد واستدعاء ملفات CSS و JS المرتبطة بالتصميم الذي لديك وحقن الهيكلة المرادة في شجرة الوثيقة. على سبيل المثال، إذا كان لديك ملف HTML يسمى index.html ولديك ملفات CSS و JS مرتبطة بالتصميم الذي تريد استدعائه، يمكنك استخدام العنصر <link> في <head> لاستدعاء ملفات CSS، والعنصر <script> في الجزء السفلي من <body> لاستدعاء ملفات JS. فيكون: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>صفحة الاستدعاء</title> <link rel="stylesheet" href="path/to/your/style.css"> </head> <body> <!-- هنا يمكنك استدعاء تصميمك --> <div id="my-design"></div> <script src="path/to/your/script.js"></script> <script> // هنا يمكنك تنفيذ الكود الذي يحدث العرض الذي تريده // وإضافة التصميم إلى الصفحة var myDesign = document.querySelector('#my-design'); myDesign.innerHTML = 'تصميمك هنا'; </script> </body> </html> يمكنك استدعاء التصميم الخاص بك في العنصر <div> الذي يحمل id my-design وتنفيذ الكود الخاص بك في العنصر <script> الذي يليه.
  6. Adnane Kadri
    بجانب ما اقترحه المدربون، يمكنك فرض قيمة افتراضية للخاصية المعنية مع السماح بعدم ارسالها في طلب التحديث، لنعرف المسترجع getImageAttribute في ملف النموذج المعني كالتالي: public function getImageAttribute($value){ return is_null($value) ? 'path/to/default_img.png' : $value; } يتم هنا التحقق من ما ان كان النموذج يمتلك بالفعل قيمة مسندة في خاصية مسار الصورة، وإلا فإنه يعيد مسار الصورة الافتراضية.
  7. Adnane Kadri
    يفترض أن يتم مباشرة حقن القيمة الموافقة للغة المفعلة عند قراءة الخاصية، فان كانت الخاصية name تحمل قيما متعددة اللغات فإن قراءتها في ملفات العروض سيكون وفق: $item->name وهذا بشكل مباشر، أما ان كنت تقوم باستعمال التابع getTranslations في ملف العرض، فسيقوم بطبيعة الحال بإعادة مصفوفة ترابطية تعرف كل مفتاح لغة والقيمة الموافقة له. وهذا ما يحدث معك في الأرجح، لا تقم باستعمال السياق التالي: $item->getTranslations('name') بل استعمل السياق: $item->name وسيصلح هذا المشكلة معك.
  8. Adnane Kadri
    لما لا تستخدم حزمة laravel-translateble من spatie فهي تستخدم نفس المنطق ونفس طريقة التخزين، وبدل التفصيل في عملية ترجمة القيم بحسب مفتاح اللغة المفعلة، سيمكن مباشرة قراءة القيم بطريقة عادية جدا. وعلى كل، سيمكنك قراءة المفتاح بحسب اللغة المفعلة كالتالي: قم باخفاء القيم المتعددة اللغات من كائن الانموذج عند استعلام قراءته، نصرح المفتاح field ضمن المصفوفة hidden للنموذج Model المعني: class MyModel extends Model { protected $hidden = ['field']; } ثم لنقم بتصريح مسترجع جديد وليكن باسم translated_field، وليعيد القيمة الموافقة للغة الحالية: class MyModel extends Model { public function getTranslatedFieldAttribute(){ return json_decode($this->field)[app()->getLocale()]; } } وأخيرا، لنقم بتضمين هذا الحقل مع اي كائن انموذج، نصرح المفتاح translated_field ضمن المصفوفة appends للنموذج Model المعني: class MyModel extends Model { protected $appends = ['translated_field']; } واخيرا، قم بتجربة قراءة مجموعة : MyModel::get() والحظ ان قيم translated_field المعروضة هي ما يوافق اللغة المفعلة. يمكنك ايضا استعمال المعدلات Mutators لتطبيق العملية بشكل أكثر بساطة.
  9. Adnane Kadri
    ان كانت الحقول لديك يتم تصريح أسماءها بـ title و details و img_path فيجب بطبيعة الحال التحقق منها باعتبار هاته الاسماء، فبدل ان يكون: $request->validate([ 'Ads_Title' => 'required', 'Ads_Details' => 'required', 'Ads_Img_Path' => 'required' ]) يجب ان يكون: $request->validate([ 'title' => 'required', 'details' => 'required', 'img_path' => 'required' ]) وإلا فإنه يجب عليك تصريح الاسماء المتحقق منها في توليد الحقول: {! Form::text('Ads_Title' ,null, ['placeholder' => 'english title']) !}
  10. Adnane Kadri
    تعتبر الصور من الأصول الثابتة، مثلها مثل ملفات الخطوط او ما الى ذلك. وبالتالي سيقترح وضعها في مجلد public بطبيعة الحال في اغلب الاستعمالات. ولكن هنالك بعض الحالات الاستثنائية التي تمنع من ذلك وتجعل وضعها في مجلد src افضل واكثر عملية ومرونة، منها: إذا كانت الصور متعلقة بمكونات معينة في التطبيق، فيمكن وضع الصور داخل مجلد src لهذه المكونات واستخدامها محليًا في المكون. وذلك خدمة لمبدأ فصل المهام، اذ لا يكون من المنطقي وضعها بشكل عام واستعمالها في نطاق خاص. إذا كانت الصور تتغير بشكل متكرر أو تحتاج إلى معالجة مسبقة (مثل تغيير الحجم أو القص)، فيمكن حفظ الصور داخل مجلد src ومعالجتها باستخدام مكتبات خارجية قبل عرضها وتصييرها في التطبيق. اذا كانت الصور يتم تغييرها ولا يتم تضمينها بشكل اكيد، في مثل هاته الحالة سيكون من العملي اكثر وضعها في مجلد src وذلك من اجل عدم تحزيمها ضمن ملفات المشروع النهائية في حالة عدم تضمينها في احد مكونات التطبيق.
  11. Adnane Kadri
    يحدث هذا لأنك أصلا تعيد كائن JSON من موجه Node في Show_Link تابع المتحكم linksController: exports.Show_Link = (req,res,next)=>{ const data = { short:req.params.id } Links.findOne(data).then(link =>{ if(!link){ res.status(404).send("ERROR") } else{ res.send({link:link.link}); ^^^^^^^^^^^^^^^^^^^^^^^^^ } }).catch(err =>{ res.status(400).send(err) console.log(err) }) } وهو الخرج الطبيعي ومن العادي ان يظهر رد كـ: فالخادم هو الأولى بعملية التوجيه، وان كان كل من الخادم والعميل يعيدان خرجا ما عن المسار id:/ فإنه سيتم اعتبار ذلك الخاص بالخادم بطبيعة الحال، لأن العميل لا يزال يحتاج حقن ملف التوجيه في المتصفح لتولي عملية التوجيه، ولحد قيامه ذلك سيحتاج من الخادم تصيير المكون الذي يتولى ذلك، فإن كان الخادم يعيد JSON فلا العميل ولا الخادم يتوصلان للصفحة الفرعية التي يصيرها العميل. وهو ما يحدث معك ببساطة. وذات المشكلة تحدث في كثير من المرات في تطبيقات SPA من مختلف التقنيات. لحل مثل هاته المشكلة،ينصح بفصل عمليتي التوجيه، ومن الأحسن تسبيق مسارات الخادم بسابقة ولتكن api/ فيكون في ملف app.js تطبيق express كـ: app.use('/api', linksRouter); ثم لنصلح المسارات المعنية في جزء العميل ولنعتبر اضافة هاته السابقة، اي في تطبيق React. في ملف Home.jsx: if(Link !=='' && Link.length > 3){ axios.post("/api/create" , data).then(links =>{ في ملف shortCut.jsx: axios.get(`/api/` + data.short) .then(links =>{ أعد البناء عن طريق تنفيذ npm run build وانقل مجلد build الى مجلد public في تطبيق express مرة أخرى. وكخطوة أخيرة تماما، سنحتاج اخبار موجه express ان يقوم بتوجيه اي طلب يختلف عن طلبيات ال api الى ملف index.html داخل مجلد public/build وذلك حتى يمكن لتطبيق react ان يحمل موجهه على المتصفح ويتولى عملية التوجيه بدلا عن express. ولفعل ذلك اضف السطر التالي في ملف app.js في تطبيق الخادم: app.use('/api', linksRouter); app.use(express.static(path.join(__dirname, '/public/build'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname + '/public/build/index.html')); }); انتبه الى ترتيب تصريح الموجهات في هذا الملف، أعد تشغيل الامر npm run start على تطبيق الخادم وسيشتغل معك بشكل طبيعي.
  12. Adnane Kadri
    بالطبع يمكنك البدء بتعلم PHP بعد تعلمك الأساسيات في كل من HTML، CSS وJavaScript. فهي لغة برمجة قوية وشائع استخدامها في تطوير تطبيقات الويب وتتكامل بشكل جيد مع HTML و CSS و JavaScript، ويمكن عن طريقها واضافة الى هاته الاخيرة بناء تطبيقات ويب متكاملة وشاملة.ولذلك فإذا كان هدفك الحصول على عمل في المجال، فإن تعلم PHP سيكون خطوة جيدة نحو ذلك. أما ان كنت تتسائل عن الأولى ما بين التعمق في مفاهيم الواجهة الأمامية والبدء في تعلم الواجهة الخلفية، فأرى أن الأمر لا يختلف كثيرا ويمكنك البدء بأي منهما بشكل مباشر وقد لا يكون لذلك علاقة بشكل وطيد الا في مراحل متقدمة. أما بخصوص الدورات التي تناسبك فذلك يعتمد على مستواك الحالي وأهدافك وما تريد تحقيقه من التعلم. ولكن كاقتراح، أرى أن دورتي تطوير التطبيقات باستخدام PHP ودورة تطوير التطبيقات باستخدام Javascript يتكاملان بشكل رائع في تنشئتك كمطور شامل ان كنت تركز على تحقيق ذلك كهدف. نصيحتي لك هي التركيز على تعلم المفاهيم الأساسية جيداً قبل الانتقال إلى مواضيع أكثر تعقيداً، هذا بجانب المحافظة على الممارسة العملية والتدريب المنتظم لتحسين مستواك في المجال. وأخيرا، تحلى بالصبر وبعد النظر اذ لا يوجد اصلا -لو تركز في ذاتك- ما يستوجب تسريع العملية.
  13. Adnane Kadri
    مثلما أشار الزملاء فإن عملية التحقق من الادخالات على واجهة المستخدم وجهة العميل يحسن من تجربة الاستخدام بشكل عام، ويقلل من الطلبيات الفاشلة على الخادم وبدل احباطها كل مرة لسبب ما يتم ذلك دون اعادة تحديث الصفحة. ولذلك، فإنه لا يمكن فرض مقارنة بينهما وتفضيل أحدهما عن الآخر، فالمستحسن أن يكون كلاهما موجودا لتلافي حدوث اي مشكلة بمعالجة الادخالات سواءا على مستوى الواجهة الخلفية او على مستوى قاعدة البيانات، وتحسينا لتجربة استخدام المستخدم. وفي لارافيل على وجه الخصوص، وفي جزئية التحقق من البيانات على مستوى الخادم يفضل استعمال نماذج التحقق من الطلب Form Request validation لفصل منطق التحقق وتطبيق مبدأ فصل المهام، فبدل كتابة شيفرتك على نحو: /** * تخزين منشور جديد */ public function store(Request $request) { // جلب البيانات المتحقق منها $validated = $request->validate([ 'title' => 'required|min:8', 'content' => 'required|min:10' ]); // تخزين المنشور .. return redirect('/posts'); } يمكن كتابته وفق: /** * تخزين منشور جديد */ public function store(StorePostRequest $request) { // جلب البيانات المتحقق منها $validated = $request->validated(); // تخزين المنشور .. return redirect('/posts'); } اذ يكون الصنف StorePostRequest صنفا منفصلا تماما يحوي منطق التحقق على نحو: <?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class StorePostRequest extends FormRequest { public function authorize() { return true; } public function rules() { return [ 'title' => 'required|min:8', 'content' => 'required|min:10' ]; } }
  14. Adnane Kadri
    لا يمكن استخدام خاصية flex-direction: column على عنصر flex عندما يصل عرض الشاشة إلى 991 بكسل أو أقل، لأن العرض يكون غير كافي لإظهار العناصر بشكل رأسي في حالتك. بدلاً من ذلك، يمكنك استخدام خاصية flex-wrap: wrap على عنصر flex الأب للسماح بانزلاق العناصر إلى أسفل الصفحة عندما يتم تصغير العرض. وبالنسبة لتصميم العرض في العرض الذي يساوي 991 بكسل، يمكنك تحديد قيم max-width للعناصر داخل الـflex لتجنب مشاكل العرض. فيما يلي مثال على كيفية تطبيق هذا الأمر: .flex-container { display: flex; flex-wrap: wrap; } .flex-item { max-width: 33%; } @media (max-width: 991px) { .flex-item { max-width: 50%; } } في هذا المثال، تم تقسيم الأصناف داخل عنصر flex إلى 3 عناصر، وتم تحديد max-width للعنصر flex-item إلى 33٪. عندما يصل عرض الشاشة إلى 991 بكسل، يتم تغيير قيمة max-width لتصبح 50٪ بدلاً من 33٪، وذلك لتجنب مشاكل العرض. جرب ذلك وأخبرنا ما ان حل ذلك مشكلتك.
  15. Adnane Kadri
    أظنك تحاول تحريك المسار (path) بالاسم (wheel) باستخدام تحريك CSS، ولكن الطريقة الصحيحة لتحريك عناصر SVG هي باستخدام تحريكات (animations) SVG. اذ يمكنك استخدام العنصر <animateTransform> لتحريك المسار بشكل دائم. قم بإضافة العنصر <animateTransform> داخل العنصر <path> الخاص بـ wheel وحدد الخاصية التي تريد تحريكها (في هذه الحالة transform) والقيمة التي تريد تحريكها (في هذه الحالة translateY). على سبيل المثال: <path class="wheel" d="M123.359,79.775l0,72.843" style="fill:none;stroke:#000;stroke-width:20px;" id="wheel" > <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 72.843" dur="2s" repeatCount="indefinite" /> </path> يحب أن تحدد الخاصية attributeType كـتوصيف XML وليس CSS، والحد الأدنى الذي يجب تعيينه هو type (translate, scale, rotate أو skew). يمكنك تغيير القيمة to و dur حسب احتياجاتك. يمكنك تكرار العملية نفسها لتحريك المسار الآخر وتطبيق أي تحريكات أخرى على أي عناصر داخل الـ SVG.
  16. Adnane Kadri
    ولما لا؟ فالدروس متسلسلة ومتعلقة ببعضها البعض وكل درس سيقتضي ويتطلب فهما واستيعابا للدرس الذي هو قبله، فعلى سبيل المثال: أنت لن تعرف ما هي المعاملات الافتراضية للدوال ان لم تكن تعرف معاملات الدوال أولا، وبالضرورة معرفة الدوال أولا. بجانب تسلسل الدروس المنهجي والمنطقي، فهي تتيح للطلاب طريقة سهلة للعودة لدروسهم غرض مراجعتها او فهرستها او استذكار جزئية أو نقطة ما، بل وأنه سيكون من السهل جدا هيكلة مرجع شخصي انطلاقا من تسلسل الدروس بحسب المسارات والأجزاء ثم الفيديوهات.
  17. Adnane Kadri
    من المستبعد استعمال كلا التقنيتين NodeJS و PHP معا في مشروع واحد، فكلاهما يتضمن تطوير نظم خلفية أو تطبيقات ويب شاملة ولا يمكن أن يشتغل احدهما مع الآخر إلا بتنسيق كبير. وعموما،يمكنك تطوير موقعك باستخدام العديد من التقنيات والأدوات المختلفة لتلبية احتياجات المستخدمين وتحسين تجربتهم على الموقع. هنا بعض الاقتراحات للاضافات التي تريد اضافتها: للبث المباشر والاتصال الصوتي: يمكنك استخدام واحدة من مكتبات الـ Web RTC أو Web Socket للقيام بالعملية، نذكر من بينها: Socket.io , PeerJS , Agora.io Wowza Streaming Engine أو Twilio أو Sinch الاستايلات: يمكنك تطبيق انماط CSS عادية لتنسيق جزئيات معينة من واجهة الموقع. الاستوري والقصة، التفاعلات على المنشورات ونشر الصور: وهي أفكار ستحتاج نمذجة وتطبيقها برمجيا. ان كنت من غير خلفية تقنية، فستحتاج الاستعانة بمتخصص للقيام بذلك. يمكنك استعمال موقع مستقل لذلك.
  18. Adnane Kadri
    يمكن أن يحدث ذلك لأن بعض الفئات والأنماط في Bootstrap قد لا تكون متوفرة في الإصدار الذي تستخدمه. يجب التحقق من الإصدار الذي تستخدمه من Bootstrap والتأكد من توافق الأنماط والفئات التي تستخدمها مع هذا الإصدار. ان كنت تستعمل اي اصناف مخصصة يمكنك على كل حال استخدام أدوات المطور في المتصفح لتحديد أي توصيف CSS الذي يتم تحميله وما إذا كان يتم تطبيقه بشكل صحيح على العنصر المعني. ولكن أظنك تقصد الأصناف الأولية على نحو: bg-danger-subtle أو: bg-primary-subtle وهي أصناف بوتستراب تم اضافتها في بوتستراب 5.3 مؤخرا فقط، بحيث تعطي العناصر خلفية ذات دلالة معينة مخففة اللون او ثانوية. أمثلة: تأكد من تضمين ملف تنسيقات بوتستراب 5.3 للاستفادة منها.
  19. Adnane Kadri
    نعم، لا يزال الاعتماد على روبي موجودا في كثير من أسواق العمل النشطة ولا تزال تقوم عليها الكثير من الأنظمة وأطر العمل التي تحتل حجما كبيرا من المجتمع البرمجي. خصوصا مع اطار عمل مثل Ruby on rails الذي زادها شعبية عن شعبية. وحسوب المالكة لأكاديمية حسوب نفسها تستخدمها في كثير من أنظمتها وتطبيقاتها على سبيل حسوب I/O. ولكن ان شئت المقارنة فإن لغات مثل PHP و جافاسكربت وجافا و Net. أكثر شيوعا وأكثر استقطابا للمطورين وأكثر طلبا في أسواق العمل. ان كنت لا تجد طريقك خلال المجال ككل، فسيكون من المفيد جدا الاطلاع على مقالات بهذا الخصوص من مثل:
  20. Adnane Kadri
    يمكنك ايضا استخدام جافاسكربت لتحقيق ذات الغرض، يعرف العنصر بالمحدد input[type="button"] كل عنصر input من النوع button. لنضف التفاعلية: // تحديد كامل الازرار var buttons = document.querySelectorAll('input[type="button"]'); buttons.forEach(button => { // ضبط الهامش الجانبي ب 10 بكسل عند عمل هوفر button.addEventListener('mouseover', function() { button.style.marginLeft = '10px'; }); // ضبط الهامش الجانبي ب 0 بكسل عند ترك الهوفر button.addEventListener('mouseout', function() { button.style.marginLeft = '0px'; }); })
  21. Adnane Kadri
    ترويسة رمز token من نوع Bearer تكون وفق السياق التالي: Bearer TOKEN_STRING_HERE انتبه الى وجود فراغ، يحتمل ان يكون ذلك ما يسبب المشكلة. يجب ايضا اضافة الرمز $ لحقن قيمة token في السلسلة النصية الموصوفة. "Authorization": `Bearer ${token }` أما ان كانت المشكلة تتعلق بـ csrf token فيجب عليك استثناء الطبقة الوسيطة التي يتم فيها فحصه من طلبية الـ API لأن هذا الأخير يعتمد بالفعل على JWT authentication وان كان يتم توزيع تطبيق لارافيل لديك كواجهة برمجية تحترم معايير REST فلا حاجة أصلا لحماية من هجمات CSRF بمعنى أنه لا حاجة أصلا من الطبقة الوسيطة المعنية. ولاستثناءها بشكل تلقائي قم بنقل تصريح المسار من ملف web.php الى ملف api.php
  22. Adnane Kadri
    بجانب ما اقترح الزملاء، يمكنك استخدام واحدة من اطر عمل اختبار الواجهات الأمامية وأتمتة المتصفحات لأتمتة العملية والتحكم فيها وصيانتها بشكل أكثر نجاعة. فعملية ملئ استمارة أو ضغطة زر أو التوجيه والتأكد من كل سلوك على حدة يتم بشكل مؤتمت وعن طريق الكود. من بين أشهر الأطر على الساحة اطار JEST. فهو إطار اختبار يستخدم في تطوير البرمجيات بلغة جافاسكريبت. يُستخدم على نطاق واسع في اختبار الواجهات الأمامية لتطبيقات الويب والمكتبية مثل React و Vue.js و Angular. فهو يتيح العديد من الوظائف التي تساعد المطورين في اختبار تطبيقاتهم بشكل فعال. في ما يلي مثال بسيط: ان كانت الوظيفة sum موصوفة وفق: function sum(a, b) { return a + b; } فإننا نفترض أن حالة الاستخدام (جمع 1 + 2) سيكون خرجها هو 3. سيكون الاختبار الذي سيحمل توصيف هاته الحالة هو: describe('sum function', () => { test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3) }) }) وهذا كمثال بسيط فقط، يسع الاطار استعمال توابع أخرى أكثر تخصصية. يوجد أيضا في اطار عمل لارافيل آداة مدمجة باسم Laravel dusk تستخدم لذات الغرض، اذ تتيح للمطورين إنشاء اختبارات بسيطة ومنظمة للتحقق من سلوك تطبيقاتهم. يمكن استخدامها لاختبار العناصر الأساسية مثل النماذج والروابط والأزرار والقوائم المنسدلة وأكثر من ذلك. بالإضافة إلى أنه يمكن للمطورين اختبار العمليات العادية مثل تسجيل الدخول وإنشاء حساب جديد وغيرها. وهي آداة تتكامل بشكل رائع مع PHPunit، فإن كنت معتادا على استعماله فسيكون استعمال Laravel dusk ممتعا ومجزيا كثيرا. انظر المثال وكيف أنه يصف حالة استخدام لعنصر من الواجهة الأمامية فعليا: $browser->visit('/projects/create') ->type('title', 'هذا عنوان لمشروع يتم انشاءه الآن') ->type('description', 'هذا وصف لمشروع يتم انشاءه الآن') ->press('Submit') ->assertPathIs('/projects') ->assertSee('تم بنجاح'); أما ان كنت تقصد بمدى نجاح التصميم مدى جودته، فذلك يعتمد بدرجة أولى على معايير مرئية يفترض احترامها في طريقتك في التصميم، مثل توزيع المسافات البيضاء أو الفراغات أو التناظر وما الى ذلك.
  23. Adnane Kadri
    بجانب ما اقترح الزملاء، يمكنك تصريح الخاصية hidden في وسم audio لعمل ذات الفكرة: <audio src="audio.mp3" controls hidden></audio> العنصر <audio> في HTML
  24. Adnane Kadri
    لا يتم قبول تسجيله في قاعدة البيانات لأن القيود المفروضة على عنوان البريد الالكتروني واسم المستخدم تفترض أن يكونا فريدين unique وذلك بحسب توصيفك لها في ملف النموذج User.js، أما بالنسبة للمشكلة التي تحدث فجرب تخصيص أسماء الحقول في الكائن المسند لأنموذج User const newUser = new User({ username: newUsername, email: email, password: passwordHash, name: name }) يحتمل أن هنالك مشكلة من الأساس في تسجيل المستخدم أول مرة.
  25. Adnane Kadri
    تحدث مثل هاته المشكلة في الغالب عند محاولة تشغيل التطبيق على جهاز أو محاك يحتوي بالفعل مشكلة في عملية توقيع الشهادة الرقمية للتطبيق. ولذلك حاول أولا إضافة مفتاح للتطبيق من خلال الأمر تنفيذ الأمر التالي في طرفية أندرويد استديو لديك: keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 انتبه الى تنفيذ هذا الامر يكون في مجلد bin في مسار تثبيت JDK الخاص بك وليس في أي مسار، فسيجب التنقل اليه أولا: cd ./android/app/ في حالة استمرار المشكلة، قم بالتحقق من: تفاصيل keystore المستخدم في مشروع الأندرويد، مثل اسم الملف وكلمة المرور واسم المفتاح، فإذا كان keystore غير موجود على سبيل المثال، فيجب انشاءه بطريقة الصحيحة. قم بإعادة بناء مشروع الأندرويد باستخدام أحدث إصدار من أدوات التطوير، أي حاول تحديث جميع المكتبات من خلال android studio وعمل flutter upgrade قم بتشغيل Android Studio كمسؤول (Run as Administrator)،ثم قم بإعادة بناء المشروع. قد يمكنك الاستفادة أيضا من هذا النقاش:
×
×
  • أضف...