Mustafa Suleiman

المشكلة لديك كما في وصفتها في الفيديو هي أنه تطبيق Flutter ويعمل بشكل سليم، لكن عندما يتم النزول لأسفل الشاشة في التطبيق والصعود لأعلى تختفيFeaturedBooksListvViewBlocConsumer ويظل مكانها فارغ. وعلى الأرجح المشكلة تكمن في استخدامك لعنصر SliverList في SliverPadding، وعندما تقوم بالتمرير لأسفل الشاشة والصعود لأعلى، يتم إعادة بناء عناصر SliverList و SliverPadding بشكل متكرر، ومن المعروف أن SliverPadding لا يتفاعل جيدًا مع إعادة البناء المتكررة، مما يؤدي إلى اختفاء العناصر. لذلك حاول استخدام عنصر SliverToBoxAdapter بدلاً من SliverPadding، ويقوم عنصر SliverToBoxAdapter بتغليف واحدة من نفس عناصر الطفل (child) التي يمكن استخدامها في SliverPadding. أي بتحديث الجزء المتعلق بـ SliverPadding في الـ build() الخاص بك إلى الشكل التالي: SliverToBoxAdapter( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5), child: Column( children: [ const FeaturedBooksListvViewBlocConsumer(), const SizedBox(height: 50), const Text( 'Newest Books', style: Styles.textStyle18, ), const SizedBox(height: 20), const NewestBooksListViewBlocConsumer() ], ), ), ),

أرجو مشاركة مجلد المشروع لتجربة الكود الخاص بك وتفقد المشكلة.

سأشرح لك بشكل بسيط، أنت تستخدم حلقتين متداخلتين للتكرار عبر صفوف وأعمدة في شبكة مربعة، والمتغير "size" يحدد حجم الشبكة. وعند تنفيذ الكود، سيتم طباعة قيمة المتغير "row" داخل الحلقة الداخلية، ولكن لاحظ أن الطباعة تتم في كل دورة من الحلقة الداخلية، حيث يتم تنفيذ الحلقة الداخلية "size" مرات لكل دورة في الحلقة الخارجية أي 8 مرات بدءًا من 0. بمعنى آخر، ستقوم الحلقة الداخلية بطباعة قيمة "row" مرات متتالية بحسب قيمة المتغير "size"، فإذا كانت قيمة "size" تساوي 8، فستتم طباعة القيمة 0 ثم 1 ثم 2 وهكذا حتى 7، وسيتم تكرار هذا النمط "size" مرة في الحلقة الخارجية. لذلك، ستحصل على مجموعة من الأعداد المتتالية من 0 إلى 7 تطبع "size" مرة في الإجمال أي 8 مرات، أي 0 مطبوع 8 مرات و1 يكرر 8 مرات وستجد بجانبه في الكونسول رقم 8 أي تكرر طباعته 8 مرات. والنتيجة هي:

ربما ما يحدث هو تحميل الملف CSS بشكل غير صحيح في الصفحة الأصلية عند استخدام Puppeteer، وإذا كان كذلك فتستطيع استخدام خيار "waitUntil" للانتظار حتى يتم تحميل وتنفيذ الملف CSS قبل توليد ملف PDF، بالشكل التالي: await page.goto('http://example.com', { waitUntil: 'networkidle0' }); بوضع networkidle0، Puppeteer سينتظر حتى يتوقف النشاط على الشبكة قبل الاستمرار في عملية التحويل. وبإمكانك أيضًا استخدام خيار "waitFor" في Puppeteer للانتظار حتى يتم تحقيق حالة معينة قبل توليد ملف PDF، مثلاً استخدامه للانتظار حتى يتم تحميل عناصر محددة أو حتى يكتمل تنفيذ أكواد JavaScript معينة. await page.waitForSelector('#my-button'); await page.pdf({ path: 'output.pdf' }); أو استخدام دالة page.evaluate() لتنفيذ سكريبت مخصص في صفحة المستعرض والتحكم في توقيت تحميل العناصر، وتستطيع استخدام هذا السكريبت لتنفيذ أمر window.print() الذي يحاكي طباعة الصفحة، وذلك بعد التأكد من تحميل جميع العناصر بشكل صحيح: await page.evaluate(() => { // تأكد من تحميل العناصر المطلوبة هنا window.print(); }); وعليك تضمين السكريبت في النقطة المناسبة في كودك، حيث يتم تحميل العناصر المطلوبة بشكل صحيح.

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

الموقع يستخدم Bootstrap وJQuery UI وJQuery و مكتبة OWL Carousel الخاصة بالسلايدات، وتستطيع تقليد تصميم الصفحة كما تريد عن طريق Bootstrap أو Tailwind، ولكن يجب تغيير الألوان والتصميم بعض الشيء لخلق هوية لموقعك إن أمكن. وبخصوص تنسيق الكود وعرض بشكل ملون، فذلك يسمى syntax highlighting ويتم عن طرق مكتبة مثل Prism وهي ما يتم استخدامها في الموقع، وستجد الشرح الخاص بها في الموقع الرسمي. وقد شرحت تلك المكتبة من قبل في النقاش التالي: إنشاء نموذج مصغر من موقع CodePen وهناك مكتبات أخرى مثل CodeMirror أو Ace Editor. وبالنسبة للخط فهو almarai وستجده متاح على خطوط جول.

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

أرجو منك مشاركة الخطأ بشكل نصي هنا ومشاركة الكود الذي به مشكلة هنا في المرفقات.

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

عليك بحفظ المشاريع العملية فقط وليس كل الأكواد التي تقوم بكتابتها، أي يجب رفع المشاريع العملية على GitHub، وقم توضيح ذلك في النقاش التالي: وما تحتاجه هو فهم المشاريع التي قمت بتنفيذها أي لا يكفي أن تقوم بالكتابة مع المدرب، بل عليك بدراسة الدورة بشكل صحيح حيث سيتم سؤالك وإختبار مدى فهمك للدورة والمشاريع التي نفذتها، وقد تم شرح الطريقة الصحيحة للدراسة من هنا: وإليك نقاشات أخرى ستجيب على الكثير من الأسئلة لديك:

1- عليك بتثبيت Python على جهاز الكمبيوتر، ويُفضل استخدام Python 3.6 أو إصدار أحدث، وتستطيعي تنزيل Python من الموقع الرسمي للغة. 2- من الأفضل إنشاء بيئة إفتراضية باستخدام لعزل مكتبة TensorFlow Federated وتجنب التعارض مع البيئات الأخرى، عن طريق أدوات مثل virtualenv أو Anaconda لإنشاء بيئة افتراضية جديدة. 3- بعد إعداد البيئة الافتراضية (إذا كنت تستخدم واحدة)، تستطيعي تثبيت TensorFlow Federated باستخدام أداة إدارة الحزم الخاصة بـ Python مثل pip بالأمر التالي: pip install tensorflow-federated وسيقوم هذا الأمر بتثبيت الإصدار المستقر الأحدث من TensorFlow Federated. 4- بعد التثبيت، يمكنك التحقق من نجاحه عن طريق إستيراد الوحدة بالشكل التالي: import tensorflow_federated as tff وإذا تم استيراد المكتبة بنجاح دون أي أخطاء، فهذا يعني أن TensorFlow Federated قد تم تثبيته بنجاح ويمكنك البدء في استخدامه. وانتبهي إلى أنه قد تحتاج إلى تثبيت نسخة محددة من TensorFlow تتوافق مع TensorFlow Federated، ويُفضل استخدام TensorFlow 2.x. وقبل تثبيت TensorFlow Federated، الأفضل بتثبيت TensorFlow على الحاسوب.

نعم، افصل كابل الطاقة عنه وكذلك الهارد ديسك، وجرب تغيير كابل الباور الخاص بالكيسة مع كابل الباور الخاص بالشاشة، فقد يكون هناك مشكلة في السلك نفسه.

أولاً أنصحك بقراءة النقاش التالي لفهم المميزات التي أتي بها Vite. وتم دعم Vite في Laravel 9.19 والإصدارات اللاحقة، وVite هي محزم تجميع سريع وخفيف الوزن يستخدم في تطوير تطبيقات الويب، ويعتبر Vite أداة تجميع قائمة على تجميع الوحدات (build on-demand)، مما يعني أنه يجمع فقط الوحدات التي يتم تحميلها فعليًا في صفحة الويب. وقد شرحت كيف يمكنك استخدام Vite في مشروع لارافيل في النقاش التالي، حيث أن في الإصدرات الحديثة لست بحاجة إلى تثبيت Vite، وقدر شرحت أيضًا طريقة التثبيت.

سأوضح لك بمثال كيف يمكن تنسيق الصورة مع النص. HTML: <div class="user-profile"> <img src="path/to/image.jpg" alt="صورة المستخدم"> <span class="username">اسم المستخدم</span> </div> CSS: .user-profile { display: flex; align-items: center; gap: 10px; /* المسافة بين الصورة واسم المستخدم */ } .username { font-size: 18px; /* حجم الخط لاسم المستخدم */ } قمت بإنشاء عنصر div بالصفات user-profile والذي يحتوي على الصورة واسم المستخدم. واستخدمت تنسيقات CSS لتطبيق display: flex على العنصر الأب user-profile لتحقيق توزيع المحتوى في مستوى واحد. وحددت align-items: center لمحاذاة العناصر عموديًا، و gap لتحديد المسافة بين الصورة واسم المستخدم. وتستطيع ضبط قيم التنسيق وفقًا لاحتياجاتك، مثل تغيير حجم الخط أو المسافة بين العناصر، وعليك بتعديل المسار path/to/image.jpg ليتناسب مع موقع الصورة.

حاول فصل القطع واحدة تلو الأخرى وجرب التشغيل، مثلاً قم بإزالة RAM واحدة وأبقي الأخرى مثلاً وجرب التشغيل، أو قم بفصل كرت الشاشة وجرب التشغيل، وأيضًا جرب فصل الهارد تمامًا.

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

هناك العديد من المفاهيم الرياضية المهمة التي تستخدم في AI، ومن بينها الحساب التفاضلي (Calculus) وجبر الخطي (Linear Algebra) والاحتمالات والإحصاء (Probability and Statistics) والرياضيات التفاضلية والمنطق الرياضي (Discrete Mathematics وMathematical Logic). وما يلي هو توضيح للفروق بين Calculus1 وCalculus2 وCalculus3: Calculus1 (التفاضل والتكامل الأساسي): يتم تعلمه عادة في السنة الأولى من دراسة الرياضيات في الجامعة، ويغطي مفاهيم التفاضل والتكامل الأساسية مثل المشتقة والتكامل غير المحدود والتطبيقات الأولية للتفاضل والتكامل. Calculus2 (تفاضل وتكامل متعدد الأبعاد): يركز على التفاضل والتكامل في الفضاء ثلاثي الأبعاد ويتعامل مع المعادلات التفاضلية الجزئية، ويشمل أيضًا تطبيقات متعددة الأبعاد للتفاضل والتكامل مثل الانحدار الخطي والمساحات المعترضة والقيم القصوى والدنيا. Calculus3 (التفاضل والتكامل في الفضاء الأعلى الأبعاد): يركز على المفاهيم المتقدمة للتفاضل والتكامل في الأبعاد العالية والمعادلات التفاضلية الجزئية غير الخطية والمساحات المتعددة الأبعاد. بالنسبة لسؤالك الثاني، فإن تعلم Calculus وLinear Algebra وProbability and Statistics يعد أساسيًا وضروريًا لفهم وتطبيق تقنيات الذكاء الاصطناعي. وتلك المفاهيم الرياضية تستخدم على نطاق واسع في مجالات مثل تعلم الآلة (Machine Learning) والشبكات العصبية (Neural Networks) ومعالجة اللغة الطبيعية (Natural Language Processing) والرؤية الحاسوبية (Computer Vision) والذكاء الاصطناعي العام (General AI). فإذا كنت ترغب في التخصص في مجال محدد داخل الذكاء الاصطناعي، فربما هناك متطلبات إضافية من المواد الرياضية والإحصائية التي تختلف حسب التخصص. أما بالنسبة لسؤالك الثالث، فإن تعلم Discrete Mathematics وMathematical Logic أمر مفيد لفهم بعض المفاهيم والأدوات المستخدمة في AI. وDiscrete Mathematics تركز على المفاهيم المتعلقة بالأعداد والمجموعات المحدودة والجبر المجرد ونظرية الرسم البياني والتركيب التفاضلي والأعداد المركبة، أما Mathematical Logic يغطي المبادئ الأساسية للمنطق الرياضي والمعرفة المنطقية والاستنتاج. وفي البداية كل ما تحتاجه أنت هو Linear Algebra فعليك بالتركيز على ذلك لتعلم الأساسيات.

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

قم تم الإجابة بشكل مفصل بخصوص تهيئة الموقع وتحسينه للظهور في محركات البحث وتسويق المقالات في النقاشات والمقالات التالية، أرجو منك قرائتها: القسم الخاص بتهيئة محركات البحث SEO في أكاديمية حسوب

من الأفضل تعيين قيمة "z-index" للـ side bar بحيث تكون أكبر من قيمة ال "z-index" للـ header، وذلك يضمن أن ال side bar سيظهر فوق ال header. .sidebar { position: fixed; z-index: 9999; } .header { position: fixed; z-index: 999; } وتستطيع زيادة padding أو margin للعناصر الأخرى لتحريكها بعيدًا عن ال side bar، أو استخدام الخاصية top كما ذكر لك عمر، وإليك مثال يوضح ما أعنيه. HTML: <!DOCTYPE html> <html> <head> </head> <body> <header class="header"> <h1>عنوان الصفحة</h1> </header> <div class="sidebar"> <ul> <li><a href="#">رابط 1</a></li> <li><a href="#">رابط 2</a></li> <li><a href="#">رابط 3</a></li> </ul> </div> <div class="content"> <p>محتوى الصفحة هنا...</p> </div> </body> </html> CSS: body { margin: 0; padding: 0; } .header { background-color: #f2f2f2; padding: 20px; position: fixed; width: 100%; z-index: 999; } .sidebar { background-color: #eaeaea; position: fixed; width: 200px; top: 80px; bottom: 0; overflow-y: auto; z-index: 9999; } .sidebar ul { list-style-type: none; padding: 0; margin: 0; } .sidebar li { padding: 10px; } .content { margin-left: 220px; padding: 20px; } والنتيجة هي:

هل عرض الصفحة هو 768 بكسل؟ ليتم تطبيق التنسيق؟ قم بتصغير عرض المتصفح ليتم تطبيق التنسيق، وأيضًا تفقد إذا كان هناك تنسيق آخر متعارض، وأيضًا استخدم تعليمة !important وإذا استمرت المشكلة أرجو مشاركة مجلد المشروع لتفقد المشكلة.

إنتبهي إلى النقاط التالي: الفاصلة المنقوطة قبل الكلمة المحجوزة "int" في السطر الأول والسطر الثاني. إضافة علامة الفاصلة المنقوطة بعد كل تعليمة. إضافة علامة الفاصلة بين النصوص المطبوعة والمتغيرات في السطر الثالث. إضافة علامة الفاصلة بين المعاملات في السطر الأخير. إضافة الهوامش الزمنية المطلوبة في سطر الـ #include. الكود بعد إصلاحه: #include <iostream> #include <cmath> int main() { int x = 1; int y = 2; std::cout << "x = " << x << " y = " << y << std::endl; std::cout << "x - y = " << (y - x) << " |y - x| = " << std::abs(y - x) << std::endl; return 0; } وبعد تصحيح الأخطاء، يجب أن يقوم الكود بطباعة قيمة x وقيمة y والفرق بينهما والقيمة المطلقة للفرق بينهما.

الكود يحتوي على خطأ واحد في عبارة SQL المستخدمة في الجملة prepare() في السطر التالي: $stmt2 = $con->prepare("UPDATE student SET name = ?, Email = ?password=? WHERE id =?"); حيث أن الخطأ هو عدم وجود فاصلة بين الحقول name و Email وبين الحقول Email و password، ويجب وضع فواصل بين الحقول بطريقة صحيحة والصحيح هو التالي: $stmt2 = $con->prepare("UPDATE student SET name = ?, Email = ?, password = ? WHERE id =?");

في الوقت الحالي عليك بتنفيذ التالي لحل المشكلة: 1- فتح ملف android/build.gradle في مشروع Flutter باستخدام محرر الأكواد. 2- في الملف build.gradle، قومي بتغيير السطر التالي: dependencies { // ... classpath 'com.android.tools.build:gradle:1.5.0' // ... } إلى: dependencies { // ... classpath 'com.android.tools.build:gradle:4.1.0' // ... } وذلك التغيير يحدث تحديثًا في إصدار أداة Gradle المستخدمة في مشروعك. 3- قومي بفتح ملف android/app/build.gradle في نفس المشروع وتغيير التالي: apply plugin: 'com.android.application' إلى: apply plugin: 'com.android.application' apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" والتغيير يضمن استخدام إصدار V2 من Android embedding. 5- حفظ الملفات وإغلاقها. 6- افتحي نافذة الأوامر أو تطبيق الطرفية الخاص بك وانتقلي إلى مجلد مشروع Flutter وتشغيل الأوامر التالية لتنظيف المشروع وإعادة بنائه مع التغييرات الجديدة. flutter clean flutter build apk وأيضًا عليك بقراءة المستند الذي تم الإشارة إليه وتعديل ما يلزم في مشروعك إن تطلب الأمر.

في مجال تعلم الآلة وتحليل البيانات، لغة Python تعتبر شائعة ومستخدمة بشكل واسع. حيث تتمتع Python بسهولة التعلم وتوفر العديد من المكتبات والأدوات المتخصصة في مجال التعلم الآلي وتحليل البيانات، مثل NumPy وPandas وSciPy وScikit-learn وTensorFlow وPyTorch وغيرها. لذلك، إذا كنت مبتدئًا في هذا المجال، فأنصحك بالبدء بتعلم Python. وعلى الرغم من أن C++ ليست لغة رقم واحد في مجال تعلم الآلة وتحليل البيانات، إلا أنها تستخدم في بعض الحالات التي تتطلب أداءً ممتازًا وقدرة على التعامل مع كميات كبيرة من البيانات بسرعة عالية. لذلك يكون استخدام C++ مناسبًا إذا كنت تحتاج إلى تطوير خوارزميات محددة بسرعة عالية، ولديك خبرة في البرمجة بلغة C++. وبالنسبة لمكتبات C++ في مجال تعلم الآلة وتحليل البيانات، هناك بعض المكتبات المتاحة مثل TensorFlow بلغة C++ وMLpack وDlib، ولكن فإن التوجه الرئيسي لمجال تعلم الآلة يعتمد بشكل أساسي على Python، لذا فإن توفر المكتبات والأدوات في C++ أقل بعض الشيء. بالنسبة لبرمجة الروبوتات، فإن C++ لغة شائعة ومستخدمة بشكل واسع في هذا المجال، حيث توفر C++ أداءً عاليًا وتحكمًا دقيقًا في الأجهزة والموارد، وذلك مهم عند برمجة الروبوتات. وبخصوص مصادر لتعلم C++ هناك شروحات ودروس في القسم الخاص بها على أكاديمية حسوب، في قسم C++. وتستطيع البحث على يوتيوب وستجد كورسات خاصة بتعلم أساسيات البرمجة من خلال C++.