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

Mustafa Suleiman

الأعضاء
  • المساهمات

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

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

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

    300

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

  1. ألف مبروك يا منتصر، وسنك صغير ما شاء الله عليك صراحة، واصل إجتهاد وهتحقق أكتر بكتير إن شاء الله، وركز إنك تتعلم الأساسيات كويس ومتستعجلش إنت لسة صغير وحاول تشتغل على مشاريع بعد الأساسيات ومتركزش أوي على تعلم إطارات العمل والمكتبات وتتجاهل الأساسيات. لأنها هي اللي هتخليك تتعلم وتستخدم أي لغة وإطار عمل أو مكتبة بسهولة بعد كدة، وتتعلم أسرع. حاول بناء مشروع كبير باللغات الأساسية التي تعلمتها، مثل تنفيذ تطبيق SPA باستخدام HTML, CSS, JS فقط وستتعلم الكثير من ذلك.
  2. حاول استخدام المسار التالي في متغيرات البيئة: C:\src\flutter\bin والذي بداخله ملف flutter.bat وذلك هو ما نريده، وعليك بالتوجه لذلك المسار والتأكد من وجود ذلك الملف، فإن كان في مسار آخر فعليك بتعديل المسار في متغير البيئة للمسار الصحيح للمجلد الذي يوجد به ذلك الملف. الآن قم بالحفظ، ثم تأكد من إغلاق منفذ الأوامر تمامًا وإعادة فتحه مرة أخرى وتشغيل الأمر التالي: flutter doctor ومن المفترض أن تجد لديك شكل كالتالي: وإذا لم يفلح الأمر فعليك بتحميل Flutter SDK للويندوز من الرابط التالي: https://docs.flutter.dev/get-started/install/windows ثم قم بفك الضغط عن الملف الذي قمت بتحميله، ونقل مجلد flutter الذي نتج من عملية فك الضغط إلى المسار التالي على قرص الـ C : C:\src\flutter أي أن مجلد flutter يجب أن يكون داخل مجلد باسم src داخل قرص الـ C.
  3. أهلاً بك @أبو سلمان Farouk نعتذر عن أي مشكلة تواجهك، في البداية أرجو منك تفقد الدورة في حسابك عن طريق تسجيل الدخول لحسابك الذي قمت منه بشراء الدورة، ثم البحث عن خانة دوراتي كما بالصورة: وعند الضغط على دوراتي من المفترض أن تجد الدورات الخاصة بك، وإن لم تجدها أرجو منك التحدث إلى مركز المساعدة الخاص بأكاديمية حسوب، وستجد نافذة تطلب منك إدخال بريك إلكتروني. فأدخل البريد الذي قمت بشراء الدورة من خلاله أي الحساب الذي به الدورة، وسيصلك كود على بريدك الإلكتروني قم بإدخاله وستجد نافذة المحادثة أمامك وأخبرهم بتفاصيل المشكلة وأرجو الإنتظار لـ 24 ساعة.
  4. تم شرح ذلك بشكل وافي في النقاش التالي وإذا واجهت أية مشكلة أرجو منك البحث أولاً وتستطيع السؤال هنا: ولا تنسى وضع ملف gitignore قبل إنشاء المستودع على حاسوبك أو رفع الكود.
  5. مثلما أشار إليك عمر أنت بحاجة إلى التلاعب بالـ DOM من أجل عرض قيمة الزر الذي تضغط عليه على شاشة الآلة الحاسبة في المكان المخصص لها، وإليك مثال بسيط تستطيع تجربته بنفسك: <!DOCTYPE html> <html> <head> <title>آلة حاسبة</title> <style> .calculator { width: 200px; padding: 10px; border: 1px solid #ccc; } </style> </head> <body> <div class="calculator"> <input type="text" id="screen" disabled> <br> <button id="btn1">1</button> <button id="btn2">2</button> <button id="btn3">3</button> <br> <button id="btn4">4</button> <button id="btn5">5</button> <button id="btn6">6</button> <br> <button id="btn7">7</button> <button id="btn8">8</button> <button id="btn9">9</button> <br> <button id="btn0">0</button> </div> <script> const screen = document.getElementById("screen"); function appendToScreen(number) { screen.value += number; } const buttons = document.querySelectorAll("button"); buttons.forEach((button) => { button.addEventListener("click", (event) => { const number = event.target.innerHTML; appendToScreen(number); }); }); </script> </body> </html> استخدمتquerySelectorAll بدلاً من getElementsByTagName أو getElementById للحصول على جميع الأزرار، ثم استخدمت forEach للتكرار عبر كل عنصر زر وإضافة الحدث click بداخله. وعرفت المتغير number داخل الحدث للحصول على قيمة الزر، وبالمثل، عرفت الدالة المخصصة appendToScreen التي تقوم بإضافة القيمة الخاصة بالزر وعرضها على الشاشة بجانب الأرقام الأخرى التي تم إدخالها.
  6. كلاً من load و with هما وظيفتان تستخدمان في التعامل مع العلاقات بين النماذج (Models) في قاعدة البيانات. 1- load تُستخدم لتحميل العلاقات المرتبطة (Eager Loading) مع نموذج محدد، وعندما تقوم بتحميل العلاقات، يتم استعادة البيانات المرتبطة مسبقًا من قاعدة البيانات وتعيينها مع النموذج الأصلي. مثلاً، لنفترض أن لدينا نموذجين User و Post، وبينهما علاقة "المستخدم لديه العديد من المنشورات" (User has many posts)، واستخدام load لتحميل المنشورات المرتبطة بمستخدم معين عند الحاجة. إليك مثالًا: $user = User::find(1); $user->load('posts'); وفيه يتم تحميل المنشورات المرتبطة بالمستخدم ذو الهوية 1 من قاعدة البيانات وتخزينها في النموذج. 2- with تُستخدم لتحميل العلاقات المرتبطة (Eager Loading) مع الاستعلام الأساسي، وتساعد في تقليل عدد استعلامات قاعدة البيانات المنفصلة التي يتم إجراؤها عند الوصول إلى العلاقات. بمعنى إذا كنت تريد استرداد قائمة المستخدمين مع منشوراتهم، تستطيع استخدام with لتحميل العلاقة في نفس الاستعلام. مثال: $users = User::with('posts')->get(); يتم استرداد قائمة المستخدمين من قاعدة البيانات مع تحميل المنشورات المرتبطة بهم. أي تستخدم load عندما تحتاج إلى تحميل العلاقات بشكل فردي لنموذج محدد، بينما يُفضل استخدام with عندما تحتاج إلى تحميل العلاقات مع الاستعلام الأساسي للاستفادة من التحميل المسبق وتقليل استعلامات قاعدة البيانات.
  7. 1- لربط حساب جوجل في عملية تسجيل الدخول إلى الموقع، تستطيع استخدام خدمة تسجيل الدخول باستخدام جوجل (Google Sign-In)، وتلك الخدمة توفر واجهة برمجة التطبيقات (API) التي تسمح للمستخدمين باستخدام حسابات جوجل الخاصة بهم لتسجيل الدخول إلى موقعك. وذلك من خلال الخطوات التالية: قم بإنشاء مشروع جديد في واجهة مطوري Google (Google Developers Console) وقم بتكوينه بحيث يكون لديك مفتاح API الخاص بك. استخدم واجهة برمجة التطبيقات (API) ومكتبة تطوير جوجل (Google API Client Library) المناسبة للغة البرمجة التي تستخدمها للتواصل مع خدمة تسجيل الدخول باستخدام جوجل. عليك بتضمين زر تسجيل الدخول باستخدام جوجل في واجهة المستخدم الخاصة بك وأضف الوظائف المطلوبة لمعالجة عملية تسجيل الدخول باستخدام جوجل. عندما يقوم المستخدم بالنقر على زر تسجيل الدخول باستخدام جوجل، سيتم إعادته إلى صفحة جوجل لتسجيل الدخول ومنح إذن لمشاركة معلومات حسابه. بعد ذلك، ستتلقى تطبيقك رمزًا مؤقتًا (authorization code) يمكنك استخدامه لاسترداد معلومات المستخدم الخاصة به من خلال خدمة تسجيل الدخول باستخدام جوجل. وهناك مكتبات شائعة تستخدم لإضافة ميزة إنشاء الحساب وتسجيل الدخول عن طريق جوجل وغيرها، مثل Firebase Authentication وPassport.js وauth0. 2- لإضافة المعلومات مثل الصور والعنوان والسعر إلى موقعك، بإمكانك استخدام نموذج (Form) في واجهة المستخدم الخاصة بك لجمع هذه المعلومات من المستخدمين، وتستطيع استخدام تقنيات متعددة للسماح للمستخدم بتحميل الصور وإدخال المعلومات الأخرى: رفع الصور: عن طريق عنصر إدخال نوع الملف (File Input) في نموذجك للسماح للمستخدمين بتحميل الصور، وعند تلقي النموذج، باستطاعتك استخدام لغة البرمجة التي تستخدمها للتعامل مع الملفات المرسلة وحفظها على الخادم الخاص بك. العنوان والسعر: من خلال حقول الإدخال (Input Fields) في نموذجك لجمع العنوان والسعر من المستخدم، مثل حقول نص (Text Fields) أو حقول رقمية (Numeric Fields) حسب الحاجة. بعد جمع هذه المعلومات من المستخدم، يمكنك معالجتها وتخزينها في قاعدة البيانات الخاصة بك أو تنفيذ أي إجراءات أخرى بناءًا على متطلبات موقعك. 3- عندما يتم تسجيل دخول المشرف (أو المستخدم ذو الصلاحيات الإضافية) إلى الموقع، عليك بتوفير واجهة إدارة (Admin Interface) مخصصة له، وعليك أن تقرر فإما أن تكون هذه الواجهة مستقلة عن واجهة المستخدم العادية أو جزءًا منها، حسب متطلباتك وتصميم الموقع، وهناك عدة خيارات: واجهة إدارة منفصلة: بتطوير واجهة إدارة مستقلة عن واجهة المستخدم العادية، تحتوي هذه الواجهة على العناصر والوظائف الإضافية التي يحتاجها المشرف، مثل إضافة وحذف العناصر وإضافة الأعضاء وغيرها، والوصول إلى هذه الواجهة من خلال تسجيل دخول المشرف. تعديل الواجهة الحالية: بدلاً من إنشاء واجهة إدارة منفصلة، تستطيع توسيع واجهة المستخدم الحالية لتضم الوظائف والعناصر الإضافية التي يحتاجها المشرف، وإظهار هذه العناصر والوظائف إما بشكل دائم للمشرف أو بناءً على صلاحياته للتحكم في رؤية ووصول المستخدمين. تبديل الصلاحيات: بتوفير خيار للمشرف لتبديل صلاحياته بين وضع المشرف ووضع المستخدم العادي، في حالة التبديل إلى وضع المشرف، يتم عرض الوظائف والعناصر الإضافية ويتمكن المشرف من إجراء التعديلات اللازمة، وذلك يسمح للمشرف بالتنقل بسهولة بين الأدوار المختلفة دون الحاجة إلى واجهة مستخدم منفصلة. 4- هناك إمكانية للمتاجر السماح بعمليات الشراء بدون تسجيل الدخول، ولكن العديد منها يعتبر تسجيل الدخول أمرًا مطلوبًا لأسباب الأمان والتجربة الشخصية للمستخدم. فمن خلال تسجيل الدخول، يتم التحقق من هوية المستخدم وضمان أن العمليات المتعلقة بالطلب والدفع تتم بشكل آمن وصحيح، واستخدام بيانات المستخدم لتتبع الطلبات وإرسال التحديثات والتنبيهات المتعلقة بالطلبات. أيضًا يتاح للمستخدمين الاحتفاظ بتفاصيلهم الشخصية وعناوين التوصيل بشكل مريح، مما يتيح لهم إتمام عملية الشراء بسرعة في المرات اللاحقة دون إدخال المعلومات مرة أخرى. بعد تسجيل الدخول، بإمكان المتجر تخصيص تجربة التسوق بناءً على تفضيلات المستخدم وتاريخ الطلبات السابقة، ويتاح للمستخدمين حفظ العناصر في سلة التسوق والرجوع إليها لاحقًا وتجهيز الطلب بسهولة.
  8. في دالة onSave التي قمت بتعريفها في المثال السابق في RichTextField، قم بتنفيذ الخطوات التالية لحفظ النص والصور والروابط في Firebase: استخدم Firebase Auth للتحقق من هوية المستخدم والتأكد من أنه مسجل دخوله. استخدم Firebase Firestore لإنشاء وثيقة جديدة وحفظ النص والصور والروابط في حقول مناسبة، وباستطاعتك تخزين الصور في تخزين Firebase Storage وتخزين روابطها في Firestore، وتخصيص الطريقة التي تحفظ بها البيانات في Firebase حسب طبيعة تطبيقك. مثلاً، لحفظ محتوى المحرر (النص والصور والروابط) في Firebase Firestore، من الممكن تعريف حقول كالتالي: حقل "نص" (Text field) لتخزين النص الذي يتم إدخاله أو تحريره. حقل "صورة" (Image field) لتخزين الصورة المحملة من المحرر. حقل "روابط" (Links field) لتخزين الروابط المدخلة.
  9. ما تبحث عنه هو Rich Text Editor وتستطيع إضافة تلك الميزة إلى تطبيقك باستخدام مكتبات مختلفة، مثل حزمة rich_text_editor المتاحة في مستودعات حزم الـ Flutter، وتلك الحزمة توفر واجهة مستخدم جاهزة لتحرير النصوص وإضافة الصور والروابط، وإليك الطريقة: 1- قم بتحديث ملف pubspec.yaml الخاص بمشروعك لتضمين حزمة rich_text_editor، وأضف السطر التالي تحت تبويب dependencies: dependencies: rich_text_editor: ^0.5.0 2- تشغيل الأمر التالي لتثبيت الحزمة flutter pub get 3- افتح ملف الشاشة التي ترغب في إضافة محرر النصوص إليها واستيراد الحزمة. import 'package:rich_text_editor/rich_text_editor.dart'; 4- قم بإنشاء عنصر RichTextField في واجهة المستخدم الخاصة بالشاشة. RichTextField( decoration: InputDecoration( labelText: 'Text Editor', border: OutlineInputBorder(), ), onSave: (text) { // يتم استدعاء هذا الدالة عند حفظ النص المحرر // يمكنك استخدام النص الذي تم حفظه بالطريقة التي تحتاجها هنا print('Saved text: $text'); }, ), وهناك مكتبات أخرى مثل flutter_quill وsuper_editor وzefyrka وhtml_editor_enhanced، وأنصحك برؤية القائمة من هنا: https://fluttergems.dev/editor-syntax-highlighter/
  10. هناك طريقتين شائعتين للقيام بذلك: 1- استخدام بروتوكول الواتساب لإنشاء رابط يفتح نافذة محادثة جديدة مع رابط محدد. يكون الرابط بهذا التنسيق: https://wa.me/<رقم الهاتف المستلم>/?text=<رسالتك المخصصة> يجب أن يتم استبدال <رقم الهاتف المستلم> برقم هاتف المستخدم الذي تريد مشاركة الرابط معه (مع رمز البلد)، واستبدال <رسالتك المخصصة> بالنص الذي ترغب في إرساله مبدئيًا. مثال: https://wa.me/1234567890/?text=مرحبًا، شاركت معك صفحة الويب هذه المثيرة للاهتمام. وبالطبع عليك استخدام جافاسكريبت لإنشاء الروابط بشكل ديناميكي ومشاركة رابط الصفحة الحالية. 2- استخدام بروتوكول الماسنجر لإنشاء رابط مشاركة لصفحة ويب على تطبيق الماسنجر، بهذا التنسيق: <a href="fb-messenger://share/?link= https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fsharing%2Freference%2Fsend-dialog&app_id=123456789">رسالتك هنا</a> وستحتاج إلى كود جافاسكريبت بالطبع وإليك مثال: window.open('fb-messenger://share?link=' + encodeURIComponent(link) + '&app_id=' + encodeURIComponent(app_id)); وتلك الروابط المشاركة تعتمد على تطبيق الواتساب أو الماسنجر على الهاتف الذكي، وقد يختلف تنفيذها على أنظمة التشغيل المختلفة. وتستطيع قراءة المزيد من هنا: https://developers.facebook.com/docs/sharing/messenger وعندما يتم النقر على الرابط على جهاز كمبيوتر سطح المكتب، سيتمكن المستخدم من مشاركة الرابط عبر تطبيق Facebook Messenger، ويتعين عليك استبدال app_id بمعرف تطبيقك الخاص لكي يعمل الرابط بشكل صحيح.
  11. الفرق بين الطريقتين هو في عنوان الاستضافة (host) الذي يتم استخدامه للاتصال بقاعدة بيانات MongoDB. في الطريقة الأولى، يستخدم عنوان IP "127.0.0.1" للاتصال بقاعدة البيانات، وذلك العنوان يشير إلى جهاز الكمبيوتر الحالي (local host)، ويشير إلى نفس الجهاز الذي يتم تشغيل السكربت عليه، ودائمًا يعمل بشكل صحيح إذا كنت تقوم بتشغيل قاعدة البيانات على نفس الجهاز الذي تقوم فيه بتشغيل التطبيق. أما في الطريقة الثانية، يستخدم "localhost" كاسم الاستضافة، ويشير "localhost" إلى نفس جهاز الكمبيوتر الذي يتم تشغيل السكربت عليه. وغالبًا ما تكون هذه الطريقة متوافقة وتعمل بشكل صحيح على معظم الأنظمةk ولكن الأفضل هو استخدام عنوان الـ ip. فعند استخدام الـ IP، فإنك تحدد عنوان IP بشكل صريح للاتصال بقاعدة البيانات، بينما عند استخدام "localhost"، يتم تحويلها بشكل ضمني إلى عنوان IP الخاص بجهاز الكمبيوتر الحالي، وبالتالي، في بعض الأحيان يتم تفسيره بشكل خاطيء ولتجنب تلك المشاكل من الأفضل استخدام عنوان الـ IP.
  12. تلك الرسالة تعني أن تم إنشاء مستودع فارغ بنجاح في المسار في مجلد Movie، وعليك إتباع باقي الخطوات لرفع المشروع، وقد تم شرحها باستفاضة هنا:
  13. الدالة WINDOW في SQL تستخدم لتنفيذ عمليات تحويل البيانات في نطاق معين مع الاحتفاظ بالصلة بين الصفوف في الجدول الأصلي، وتتكون الدالة WINDOW من ثلاثة أجزاء رئيسية: OVER ، PARTITION BY ، و ORDER BY. دعنا نشرح كل منها بالتفصيل ونقدم أمثلة لتوضيح الفكرة. 1- OVER تحدد عملية التجميع أو الوظيفة التحليلية التي ستُطبق على مجموعة الصفوف المحددة بواسطة النافذة، ويمكن أن تكون هذه الوظيفة مثلاً SUM ، AVG ، ROW_NUMBER ، وما إلى ذلك. مثال: لنفترض أن لدينا جدولًا يحتوي على أسماء الموظفين ورواتبهم، ونريد حساب المجموعة الكلية للرواتب ومعرفة رتبة كل موظف في الجدول. SELECT Name, Salary, SUM(Salary) OVER () AS TotalSalary, ROW_NUMBER() OVER (ORDER BY Salary DESC) AS Rank FROM Employees; 2- PARTITION BY يُستخدم لتقسيم البيانات في النافذة إلى مجموعات فرعية (بارتشن) استنادًا إلى قيمة محددة في العمود، ويتم تطبيق الوظيفة التحليلية المحددة بواسطة OVER على كل بارتشن بشكل منفصل. مثال: لنستخدم نفس الجدول من المثال السابق ولكن نريد حساب المجموع الكلي للرواتب داخل كل قسم بدلاً من الجدول ككل. SELECT Name, Salary, SUM(Salary) OVER (PARTITION BY Department) AS DepartmentTotalSalary FROM Employees; هنا ، استخدمت PARTITION BY مع عمود القسم (Department) لتقسيم الصفوف في النافذة إلى بارتشنات. 3- ORDER BY تُستخدم لترتيب الصفوف داخل كل بارتشن في النافذة وفقًا للترتيب المحدد، وبالإمكان تحديد الترتيب بناءً على عمود واحد أو أكثر. مثال: لنستخدم نفس الجدول من المثال السابق ونريد حساب مجموع رواتب القسم وترتيب الموظفين في القسم وفقًا للرواتب. SELECT Name, Salary, SUM(Salary) OVER (PARTITION BY Department ORDER BY Salary DESC) AS DepartmentTotalSalary, RANK() OVER (PARTITION BY Department ORDER BY Salary DESC) AS Rank FROM Employees; استخدمت PARTITION BY مع عمود القسم (Department) لتقسيم الصفوف في النافذة إلى بارتشنات.، و ORDER BY مع عمود الرواتب (Salary) لترتيب الصفوف داخل كل بارتشن بناءً على الرواتب، ثم حساب مجموع رواتب القسم وترتيب الموظفين في القسم وفقًا للرواتب. باستخدام الدالة WINDOW بشكل صحيح مع OVER و PARTITION BY و ORDER BY، تستطيع تنفيذ عمليات تحليلية معقدة وحسابية على البيانات في نطاقات محددة وبشكل مرتب ومجمع.
  14. لا يتم طباعة الرقم 8 مرات في كل دورة بالشكل التالي: 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2 2 3 3 3 3 3 3 3 3 4 4 4 4 4 4 4 4 5 5 5 5 5 5 5 5 6 6 6 6 6 6 6 6 7 7 7 7 7 7 7 7
  15. المشكلة لديك كما في وصفتها في الفيديو هي أنه تطبيق 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() ], ), ), ),
  16. سأشرح لك بشكل بسيط، أنت تستخدم حلقتين متداخلتين للتكرار عبر صفوف وأعمدة في شبكة مربعة، والمتغير "size" يحدد حجم الشبكة. وعند تنفيذ الكود، سيتم طباعة قيمة المتغير "row" داخل الحلقة الداخلية، ولكن لاحظ أن الطباعة تتم في كل دورة من الحلقة الداخلية، حيث يتم تنفيذ الحلقة الداخلية "size" مرات لكل دورة في الحلقة الخارجية أي 8 مرات بدءًا من 0. بمعنى آخر، ستقوم الحلقة الداخلية بطباعة قيمة "row" مرات متتالية بحسب قيمة المتغير "size"، فإذا كانت قيمة "size" تساوي 8، فستتم طباعة القيمة 0 ثم 1 ثم 2 وهكذا حتى 7، وسيتم تكرار هذا النمط "size" مرة في الحلقة الخارجية. لذلك، ستحصل على مجموعة من الأعداد المتتالية من 0 إلى 7 تطبع "size" مرة في الإجمال أي 8 مرات، أي 0 مطبوع 8 مرات و1 يكرر 8 مرات وستجد بجانبه في الكونسول رقم 8 أي تكرر طباعته 8 مرات. والنتيجة هي:
  17. ربما ما يحدث هو تحميل الملف 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(); }); وعليك تضمين السكريبت في النقطة المناسبة في كودك، حيث يتم تحميل العناصر المطلوبة بشكل صحيح.
  18. لا ليست تلك طريقة الدراسة الصحيحة للدورة، فالمبرمج لا يحفظ كل شيء بل يفهم ما يقوم بدراسته، ويحفظ الأمور التي سيحتاجها بشكل متكرر ويبحث عما يريد استخدامه أو تذكره. وفي الدورة المطلوب منك فهم ما يتم شرحه، وليس الحفظ فإذا تمكنت من الفهم ستتمكن من الشرح بطريقتك أنت بكل سهولة، وأيضًا سيتم سؤالك بشكل أكبر عن المشاريع العملية التي ستقوم بتنفيذها في الدورة. وأرجو منك قراءة النقاش هنا وستجد إجابة على الكثير من الأسئلة لديك وبه طريقة الدراسة الصحيحة للدورة: وبخصوص الحصول على الشهادة فقد تم شرح ذلك هنا بشكل وافي: وبخصوص الإختبار ستجد شرح وافي هنا أيضًا: وأيضًا هناك نقاش متعلق بسؤالك:
  19. الموقع يستخدم Bootstrap وJQuery UI وJQuery و مكتبة OWL Carousel الخاصة بالسلايدات، وتستطيع تقليد تصميم الصفحة كما تريد عن طريق Bootstrap أو Tailwind، ولكن يجب تغيير الألوان والتصميم بعض الشيء لخلق هوية لموقعك إن أمكن. وبخصوص تنسيق الكود وعرض بشكل ملون، فذلك يسمى syntax highlighting ويتم عن طرق مكتبة مثل Prism وهي ما يتم استخدامها في الموقع، وستجد الشرح الخاص بها في الموقع الرسمي. وقد شرحت تلك المكتبة من قبل في النقاش التالي: إنشاء نموذج مصغر من موقع CodePen وهناك مكتبات أخرى مثل CodeMirror أو Ace Editor. وبالنسبة للخط فهو almarai وستجده متاح على خطوط جول.
  20. عليك بالتركيز على المشاريع التي بها API وبناء واجهة خلفية لمشروع تطبيق الملاحظات أمر جيد أنصحك به في البداية للتدريب وأيضًا مشروع أنت ملم به ونفذته من قبل. وبخصوص المشاريع الأخرى، فبأي حال من الأحوال عليك ببناء متجر إلكتروني متكامل وتفعيل عمليات الشراء وإضافة المكتبات اللازمة وخلافه، حيث أن ذلك المشروع معقد وعند تنفيذه بجودة جيدة وبتصميم جيد ووضعه في معرض أعمالك فسيعتبر إضافة قوية له، وأيضًا مشاريع المتاجر الإلكترونية مطلوبة بكثرة ووجود مثال لديك هو ميزة في صالحك. بعد ذلك عليك بإنشاء لوحة تحكم للمتجر الإلكتروني ومن خلالها تستطيع إضافة وحذف المنتجات وتعديلها والتحكم في المستخدمين وخلافه، أي حدد الميزات الأساسية لمشروع واعمل عليها. والمشروع التالي هو بناء تطبيق يسمح للمستخدمين بطلب الطعام أو السلع الأخرى وتوصيلها بسرعة إلى موقعهم، وتتبع حالة التوصيل. أو تطوير منصة تسمح للمستخدمين بحجز الغرف الفندقية وإدارة الحجوزات والدفع عبر الإنترنت. أو تطوير منصة تعليمية عبر الإنترنت تتيح للمستخدمين حضور الدروس والمحاضرات وإتمام التمارين والاختبارات عن بُعد.
  21. أرجو منك مشاركة الخطأ بشكل نصي هنا ومشاركة الكود الذي به مشكلة هنا في المرفقات.
  22. سأكون صريحًا معك راجيًا إفادتك، لا توجد دورة توفر لك كل ما تحتاجه من الألف للياء، صدقني لا توجد تلك الدورة التي تدخل منها وتخرج منها وقد عرفت كل شيء. بل عليك البحث والاستزادة والبناء فوق ما تعلمته من الدورة التي تم إعدادها بشكل يؤهلك لبناء واجهات إحترافية ومعرفة الأساسيات اللازمة لتنفيذ المشاريع. وعليك بالبحث والقراءة في النقاط التي تجد أنك بحاجة إلى المزيد من التوضيح فيها ومشاهدة فيديوهات على اليوتيوب مثلاً أو قراءة مقال أو التطبيق بمفردك والتغيير في الكود لمعرفة كيف يعمل أو السؤال بعد البحث وسيتم مساعدتك سواء هنا أو أسفل فيديوهات الدورة، أي لا تستعجل ولا تحرم نفسك من المعلومات بغرض إنهاء الدورة بشكل سريع، فما الفائدة؟ الشهادة ليس لها أي معنى بدون الفهم والاستيعاب الجيد. وقد تم توضيح ما عليك فعله بعد تعلم الأساسيات من خلال النقاش التالي:
  23. عليك بحفظ المشاريع العملية فقط وليس كل الأكواد التي تقوم بكتابتها، أي يجب رفع المشاريع العملية على GitHub، وقم توضيح ذلك في النقاش التالي: وما تحتاجه هو فهم المشاريع التي قمت بتنفيذها أي لا يكفي أن تقوم بالكتابة مع المدرب، بل عليك بدراسة الدورة بشكل صحيح حيث سيتم سؤالك وإختبار مدى فهمك للدورة والمشاريع التي نفذتها، وقد تم شرح الطريقة الصحيحة للدراسة من هنا: وإليك نقاشات أخرى ستجيب على الكثير من الأسئلة لديك:
  24. 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 على الحاسوب.
×
×
  • أضف...