Mustafa Suleiman

دورة تطوير واجهات المستخدم تعتبر مكملة لدورة تطوير التطبيقات باستخدام لغة JavaScript حيث ستتعلمي كيف يتم تصميم وبناء واجهة المستخدم وذلك باستخدام اللغات الأساسية وهم HTML, CSS, JavaScript بالإضافة إلى استخدام أحدث أدوات التطوير: Bootstrap, jQuery, Sass, Gulp. وهي لا غنى عنا إذا كنتي تريدي أن تتخصي في مجال الواجهة الأمامية front-end وبعد الإنتهاء منها سيتعين عليك استكمال مسار الـ front-end وذلك بتعلم مكتبة React.js فبدونها لا يمكن العمل بشكل إحترافي في سوق العمل كمطور واجهات أمامية. وفي دورة تطوير التطبيقات باستخدام لغة JavaScript ستتعلمي مكتبة React.js بالإضافة إلى بيئة العمل Node.js الخاصة بالواجهة الخلفية والتي تعتمد على جافاسكريبت كلغة لها، ناهيك عن إطار العمل Next.js الذي لاغنى عنه لتتمكني من تنفيذ Server-side Rendering أي تصيير من جهة الخادم. وكل ما سبق سيؤهلك لتصبحي مطورة Full stack أي قادرة على القيام بمهام الواجهة الأمامية والخلفية معًا، وإذا أردتي التخصص في الواجهة الأمامية فقط، فيكفيك تعلم React.js فقط، رغم أني لا أنصحك بذلك وعليك بتعلم Node.js لتتمكني من الحصول على وظيفة في السنة الأولى لك بعد الإنتهاء من الدورة. وإذا قمت بتعلم React.js فقط، فستحتاجي إلى بعض الوقت لاكتساب الخبرة وبعدها سيتم قبولك في الوظائف، ولذلك أخبرتك بتعلم Node.js لتفادي تلك المشكلة، وإذا كان لديك الوقت فتعلمي React.js فقط واجتهدي في بناء المشاريع لاكتساب الخبرة. ولزيادة مهاراتك عليك بتعلم Next.js بعد تعلم Node.js، وذلك ما سيتم شرحه خلال الدورة وأيضًا التطبيق من خلال بناء مشاريع لوضعها في معرض أعمالك. والقرار لك في تعلم ما تريدين. ويتوفر في الدورة أيضًا شرح مكتبتي React Native و Expo لتطوير تطبيقات الهاتف المحمول، بالإضافة إلى إنشاء تطبيقات سطح مكتب باستخدام JavaScript باستخدام إطار العمل Electron.js. وبذلك ستصبحي قادرة على القيام بأي شيء تريدينه وذلك باستخدام لغة جافاسكريبت فقط، وهو أمر رائع عند العمل على مواقع العمل الحر أو عند التقدم للوظائف حيث ستتملكي الأفضلية بالتأكيد في حال كنتي متمكنة من الأساسيات الخاصة بالتنقيات التي ذكرتها وطبقتي على المشاريع المتاحة في الدورة. وكل ما سبق يندرج تحت مسمى MERN Stack وقد تم شرح الأمر هنا: ما هو MERN Stack ؟ لذلك عليك بالإختيار ما بين أن تصبحي مطورة Fron-End فقط أو مطورة Full stack، ولمساعدتك في إتخاذ القرار تصفحي الوظائف على LinkedIn وتفقدي ماهي المهارات المطلوبة بالنسبة لمستوى Entry Level أو Junior وتعلمي تلك المهارات من خلال الدورتين. وأيضًا أنصحك بقراءة النقاشات التالية:

بخصوص تعارض الحزم فهى تحدث عندما يتعارض تثبيت حزمتين أو أكثر في نفس المشروع، وهذا النوع من المشاكل قد يؤدي إلى توقف تشغيل التطبيق بالكامل أو إلى أخطاء في وظائف محددة من التطبيق. ولحل مشكلة تعارض الحزم، يجب القيام بعدة خطوات: الخطوة الأولى هي تحديد الحزم التي تسبب التعارض والتأكد من أنها تستخدم إصدارًا متوافقًا مع الحزم الأخرى التي يعتمد عليها التطبيق. يمكن تحديد الحزم المتعارضة باستخدام أدوات إدارة الحزم مثل npm-check و npm ls. npm-check و npm ls هما أوامر في واجهة سطر الأوامر لإدارة حزم npm والتحقق من حالة الحزم المثبتة في المشروع وتحديد التعارضات. فالأمر npm-check يقوم بإظهار حالة الحزم المثبتة ويسمح بتحديد الحزم التي تحتاج إلى التحديث أو حذفها. أما الأمر npm ls فيقوم بإظهار قائمة بكافة الحزم المثبتة بما فيها الإصدارات والتعليقات والتبعيات بين الحزم لتحديد التعارضات. الخطوة التالية هي تحديد الخطأ الذي يتم إصداره من التطبيق عند تشغيله، وهذا يتطلب فحص ملفات السجلات أو استخدام أدوات تصحيح الأخطاء مثل debugger أو console.log. بعد تحديد الحزم المتعارضة والخطأ الناتج عنه، يمكن اتخاذ إحدى الخطوات التالية: تحديث إصدارات الحزم المتعارضة إلى إصدارات متوافقة مع بعضها البعض. حذف الحزم المتعارضة واستخدام حزم بديلة. إجراء التغييرات اللازمة في التطبيق لتجنب تعارض الحزم، وهذا يمكن أن يتطلب تغيير كود التطبيق. والحل الأسهل هو استخدام الأمر npm install --legacy-peer-deps لحل مشكلة تعارض الحزم، فهو يستخدم خيار --legacy-peer-deps لتمكين npm من تثبيت الحزم المتعارضة كما كان يفعل في إصدارات سابقة، حيث تم تغيير سلوكية تثبيت الحزم المتعارضة في إصدارات npm الأحدث. ومع ذلك، ينبغي استخدام هذا الأمر بحذر، حيث أنه يمكن أن يؤدي إلى تثبيت إصدارات قديمة من الحزم وهذا قد يؤدي إلى مشاكل أخرى، أي الأفضل هو استخدام حزم متوافقة، لكن في حال كنت تعمل على مشروع للتدريب أو تعلم تقنية جديدة فلا مشكلة في استخدامه.

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

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

إذا كنت تستخدم خادم ويب Apache على نظام ويندوز، فتستطيع فتح ملف httpd.conf الرئيسي وإضافة الأسطر التالية: <Directory "C:/Apache24/htdocs"> AllowOverride All Require all granted Allow from 127.0.0.1 Allow from ::1 </Directory>

في البداية الخطأ الذي تواجهه يحدث عند استخدام String بدلاً من Map<String, dynamic>، والسبب في الخطأ هو أنَّ قيمة "ImageTopic" في الكود الخاص بك ليست في صيغة JSON صحيحة. حاول التأكد من أن جميع القيم الموجودة في حقل "ImageTopic" تم تخزينها بصيغة JSON صحيحة، أيضًا التأكد من أن موديل "ImageTopicModel" يتوافق مع القيم الموجودة في "ImageTopic". ولتحديد الخطأ بشكل أدق، تستطيع تحويل الـ Map<String, dynamic> إلى String باستخدام JSON.encode() ومن ثم استخدام print() لطباعة الناتج، وهذا يمكن أن يساعد في تحديد ما إذا كانت البيانات الموجودة في حقل "ImageTopic" تتوافق مع JSON صحيح أم لا. استخدم الكود التالي لتحويل الـ Map<String, dynamic> إلى String: final jsonString = json.encode(myMap); ولتحويل الـ String إلى Map<String, dynamic> استخدام هذا الكود: final myMap = json.decode(jsonString); وأيضًا حاول تغيير هذا السطر في الكود: List<dynamic> myArray = querySnapshot.docs.first.get('ImageTopic') ?? []; إلى هذا الشكل: List<dynamic> myArray = List<Map<String, dynamic>>.from(querySnapshot.docs.first.get('ImageTopic') ?? []); هذا التغيير سيحول النوع المسترجع من البيانات إلى List<Map<String, dynamic>> والذي يمكن استخدامه في الخطوة التالية من تحويل العناصر إلى قائمة من Model objects. وبعد ذلك، يجب تحديث تابع fromJson() في ImageTopicModel ليتعامل مع Map<String, dynamic> بدلاً من String. استخدام الكود التالي كنموذج للتحديث: factory ImageTopicModel.fromJson(Map<String, dynamic> json) { return ImageTopicModel( imageTopic: json['imageTopic'], ); }

لطباعة متغير PHP داخل صفحة HTML، يجب استخدام علامة الإغلاق للـ PHP "<?php ?>" وذلك لوضع كود PHP داخل الصفحة HTML، وبعد ذلك بإمكانك استخدام الإخراج echo لعرض قيمة المتغير. <?php $userName = 'Belal'; ?> <h1> Welcome <?php echo $userName; ?> </h1> سيظهر لك رسالة "Welcome Belal" وستكون قيمة المتغير $userName قد تم عرضها داخل عنصر العنوان. وهناك طريقة أخرى لطباعة المتغيرات في صفحة HTML باستخدام دالة sprintf() في PHP. ستحتاج إلى تعريف نص العنوان كنص قالب مع علامات %s تمثل مكان وضع قيمة المتغير، ومن ثم يمكن استخدام دالة sprintf() لوضع قيمة المتغير في النص القالب. <?php $userName = 'Belal'; $title = sprintf('Welcome %s', $userName); ?> <h1> <?php echo $title; ?> </h1> سيتم طباعة "Welcome Belal" وعرض قيمة المتغير $userName داخل العنوان باستخدام دالة sprintf(). وإليك طريقة أخرى، لطباعة المتغيرات في صفحة HTML باستخدام قوسين مربعين "[ ]" للإشارة إلى المتغير داخل النص. <?php $userName = 'Belal'; ?> <h1> Welcome [<?= $userName ?>] </h1> ستظهر الصفحة بعد ذلك برسالة ترحيب "Welcome [Belal]" وسيتم عرض قيمة المتغير $userName داخل العنوان بين قوسين مربعين.

أسهل طريقة هي بتحميل أخر إصدر من VScode ثم عليك بتفعيل الخيارات التالية كما في الصورة:

حاول استخدام الدالة withCount() بدلاً من الدالة with() للعلاقة ratings. $users = User::withCount('ratings') ->orderByDesc(function ($user) { return $user->ratings->avg('stars'); }) ->get();

في حال أنك تريد ترتيب النتائج حسب المتوسط الأعلى، فتستطيع تحديث الاستعلام لاستخدام الدالة orderByDesc() على نتائج الدالة average() بدلاً من عدد التقييمات. $users = User::with('ratings') ->withCount('ratings') ->orderByDesc(function ($user) { return $user->ratings->avg('stars'); }) ->get(); تستخدم الدالة avg() هنا لحساب المتوسط عن طريق الاستعانة بالعلاقة ratings في نموذج المستخدم. ثم الإعتماد على orderByDesc() لترتيب النتائج بترتيب تنازلي وفقًا لنتائج الدالة avg() للتقييمات. بهذه الطريقة ، ستظهر النتائج بترتيب تنازلي وفقًا للمتوسط الأعلى لتقييمات المستخدمين. لاحظ أني قمت بإضافة with('ratings') لجلب بيانات التقييمات مع كل مستخدم ، ولذلك يجب التأكد من استخدام الاسم الصحيح للعلاقة بين الجدولين في نموذج المستخدم الخاص بك.

من خلال الدالة orderBy() في Laravel لترتيب البيانات تصاعديًا أو تنازليًا وفقًا لنتائج الدالة average() التي تم إنشاؤها، وتستطيع تحقيق ذلك بسهولة عن طريق إضافة السطر التالي إلى استعلام قاعدة البيانات الخاص بك: $users = User::withCount('ratings')->orderByDesc('ratings_count')->get(); وتستخدم withCount() لحساب عدد التقييمات لكل مستخدم ، و orderByDesc() لترتيب النتائج بترتيب تنازلي وفقًا لعدد التقييمات. بالتالي، سيكون أولئك الذين لديهم المزيد من التقييمات في الأعلى وسيتم ترتيبهم بشكل تنازلي. وإذا كنت تريد ترتيبهم تصاعديًا ، فتستطيع استخدام orderBy() بدلاً من orderByDesc(). $users = User::withCount('ratings')->orderBy('ratings_count')->get(); وتأكد من استبدال ratings بالاسم الصحيح للعلاقة بين الجدولين في نموذج المستخدم الخاص بك.

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

تستطيع إضافة progress bar للكود عن طريق إنشاء واجهة المستخدم وجعلها تستخدم هذا الكود، ثم يمكن عرض progress bar لمستخدمي التطبيق لإظهار تقدم عملية الرفع. ثم استخدام الكود المعطى في حدث زر الرفع (upload)، ومن ثم تحديث progress bar بشكل منتظم لإظهار تقدم عملية الرفع. ويمكن ذلك بإضافة شرطات التقدم في مخرجات الكود، مثلاً، حاول إضافة حدث يقوم بتحديث progress bar بناءً على عدد البايتات التي تم رفعها. وتستطيع الاطلاع على مقالات أو دليل مطورين مثل هذا الدليل لمعرفة المزيد حول إضافة progress bar في تطبيقات Android: https://developer.android.com/reference/android/widget/ProgressBar وإليك مثال بسيط يستخدم مكتبة Volley لإجراء طلب HTTP POST مع تمكين ProgressBar عند الرفع: public class MainActivity extends AppCompatActivity { private Button uploadButton; private ProgressBar progressBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); uploadButton = findViewById(R.id.upload_button); progressBar = findViewById(R.id.progress_bar); uploadButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // Create a multipart request using Volley VolleyMultipartRequest request = new VolleyMultipartRequest(Request.Method.POST, UPLOAD_URL, new Response.Listener<NetworkResponse>() { @Override public void onResponse(NetworkResponse response) { // Handle successful response } }, new Response.ErrorListener() { @Override public void onErrorResponse(VolleyError error) { // Handle error } }) { @Override protected Map<String, DataPart> getByteData() { // Add file to request Map<String, DataPart> params = new HashMap<>(); params.put("file", new DataPart("file.jpg", getFileDataFromDrawable(getBaseContext(), R.drawable.image), "image/jpeg")); return params; } @Override protected Response<NetworkResponse> parseNetworkResponse(NetworkResponse response) { // Update progress bar based on response int percentage = (int) (((float) response.uploadedBytes / (float) response.totalBytes) * 100); progressBar.setProgress(percentage); return super.parseNetworkResponse(response); } }; // Add request to the queue VolleySingleton.getInstance(getBaseContext()).addToRequestQueue(request); } }); } private byte[] getFileDataFromDrawable(Context context, int id) { Drawable drawable = ContextCompat.getDrawable(context, id); Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap(); ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); bitmap.compress(Bitmap.CompressFormat.JPEG, 80, byteArrayOutputStream); return byteArrayOutputStream.toByteArray(); } } وعليك باستبدال UPLOAD_URL بعنوان URL الخاص بخادم الرفع الخاص بك و R.drawable.image بمورد الصورة الخاصة بك.

في البداية أرجو توضيح السؤال وكتابته بالعربية، وإذا كان سؤالك بخصوص ما هو التشغيل غير المنسق، فإليك شرح للأمر. التشغيل غير المنسق (أو Uncoordinated Execution) هو نمط من أنماط التشغيل في الحوسبة الموزعة يشير إلى عدم وجود تنسيق أو توافق بين العمليات المنفذة في النظام. يعني هذا أن العمليات المختلفة قد تقوم بتنفيذ الأعمال المختلفة في نفس الوقت ودون التنسيق مع بعضها البعض. وفي التشغيل غير المنسق، يقوم كل عملية باتخاذ القرارات بشكل مستقل بدلاً من التنسيق مع العمليات الأخرى في النظام. ونتيجة لذلك، يمكن أن يحدث تعارض (Conflict) في النظام عندما تقوم عدة عمليات بمحاولة الوصول إلى نفس المورد في نفس الوقت، وهذا قد يؤدي إلى حدوث مشاكل في النظام مثل فشل العمليات، أو حدوث تعطل في النظام بشكل عام. وعلى الرغم من أن التشغيل غير المنسق يعتبر أحد النماذج الأساسية في الحوسبة الموزعة، إلا أنه قد يكون غير مثالي في بعض الحالات، وعادةً ما يتم استخدام أنماط التشغيل المنسق أو المتزامن (Coordinated/Synchronized Execution) عند الحاجة إلى التحكم في التنفيذ وضمان التنسيق بين العمليات المختلفة في النظام.

بالطبع يناسب لابتوب MacBook Air البرمجة، ويتميز هذا الجهاز بأنه خفيف الوزن ونحيف، مما يجعله سهل الحمل والتنقل به. كما أنه يأتي بمعالج قوي وذاكرة عشوائية كافية، مما يسمح له بتشغيل بيئات التطوير الكبرى بكفاءة عالية. كما أنه يحتوي على نظام تشغيل macOS الذي يدعم العديد من لغات البرمجة والأدوات اللازمة لتطوير البرمجيات، وتعتبر البيئة الأمثل لمحترفي البرمجة. ونظام macOS قد يكون مناسبًا للعديد من المطورين. يتضمن نظام macOS بيئة تطوير متكاملة (IDE) مثل Xcode والتي تدعم العديد من لغات البرمجة مثل Swift و Objective-C و C++ وغيرها، كما يتضمن العديد من الأدوات المساعدة لتطوير البرمجيات مثل محررات النصوص والمترجمات ومكتبات البرمجة. بالإضافة إلى ذلك، فإن نظام macOS يوفر بيئة عمل مستقرة وأمنية، مع وجود مجتمع تطوير قوي ونشط في المجتمع البرمجي. ومن الجوانب الأخرى، يمكن أن يكون نظام تشغيل Linux أيضًا مناسبًا للبرمجة، خاصةً في بيئات التطوير والبرمجة المفتوحة المصدر. وقد تم التطرق بالتفصيل لمواصفات الحاسوب المناسبة للبرمجة بالتفصيل في النقاشات التالية:

السؤال كان غير واضح بعض الشيء، بخصوص تشغيل المشروع على شبكة محلية حاول تجربة التالي: تأكد من أن جهاز الكمبيوتر الذي تريد تشغيل السيرفر عليه متصل بالشبكة المحلية. قم بفتح موجه الأوامر (command prompt) واستخدم الأمر "ipconfig" للحصول على عنوان IP الخاص بجهاز الكمبيوتر الخاص بك في الشبكة المحلية. استخدم الأمر "python manage.py runserver 0.0.0.0:8000" لتشغيل السيرفر المحلي وجعله يستجيب لأي طلبات HTTP على جميع عناوين IP الموجودة في الشبكة المحلية. اطلب من الآخرين في الشبكة المحلية استخدام عنوان IP الخاص بجهاز الكمبيوتر الخاص بك ورقم المنفذ 8000 للوصول إلى الموقع الخاص بك عن طريق متصفح الويب. مثلاً، إذا كان عنوان IP الخاص بجهاز الكمبيوتر الخاص بك هو "192.168.1.100"، يمكن للآخرين في الشبكة المحلية الوصول إلى الموقع الخاص بك عن طريق زيارة العنوان "http://192.168.1.100:8000/".

إذا كنت لم تحدد المجال الذي تريد تعلمه في البرمجة سواء ويب أو تطوير تطبيقات الهاتف باستخدام Flutter أو React Native ولديك الوقت فأنصحك بتعلم أساسيات البرمجة أولاً. حيث أنها ستمكنك من إختيار المجال الذي تريده عن إقتناع ودراية وليس تخبط وتشتت كما يفعل الغالبية، حيث أنه يتبع مسار تعليمي ولا يعلم هل يريده أم لا وهل سيفيده أم لا. وإن كنت تريد الوظيفة بشكل سريع وبحاجة إلى المال وليس لديك وقت لتعلم الأساسيات، فأنصحك برؤية ما هي المهارات المطلوبة في سوق العمل لديك بالنسبة لمستوى Entry Level أو Junior على مواقع التوظيف مثل LinkedIn وإذا كان المطلوب بكثرة مطور وورد بريس أو مطور PHP ولارافيل مع Vue.js أو مطور React.js أو مطور Angular.js أو مطور .net أو مطور React Native وهكذا. فعليك بتعلم ماهو متاح في سوق العمل ثم تعلم ما تريده بعد الحصول على الوظيفة، ولكن إذا كان لديك الوقت ومازلت صغير السن فقم بتعلم مجال الويب لأنه سيفتح أفاقك على كافة مجالات البرمجة وهو سهل في البداية وبه مجالات مختلفة مثل مطور الواجهة الأمامية والواجهة الخلفية وبإمكانك استخدام React.js الخاصة بالواجهة الأمامية في تعلم React Native. أي أنك ستستطيع التوجه إلى أكثر من مجال عند تعلم الويب على عكس لو قمت بتعلم تطوير التطبيقات فقط. وبخصوص الأساسيات، عليك البدء أولاً بلغة C++ إذا أردت التأسيس بشكل سليم، وإذا أردت تخطي ذلك الأمر فعليك بتعلم لغة جافاسكريبت في البداية لتسريع عملية التعلم. وقد تم التطرق بالنقاش حول سؤالك بالتفصيل في النقاشات التالية:

الطريقة التي تستخدمها لربط عدة collections في Firebase صحيحة وليست بها خطأ، ولكن، قد يصعب إدارة العديد من عمليات الربط لأكثر من 25 مجموعة. ولتحسين الأداء، تستطيع استخدام دالة الاستعلامات المتعددة (Batched Writes) في Firebase التي تتيح لك إنشاء وتحديث وحذف العديد من المستندات في مجموعة واحدة في نفس الوقت. وبإمكانك الاطلاع على التفاصيل الكاملة عن Batched Writes في Firebase من هنا: https://firebase.google.com/docs/firestore/manage-data/transactions#batched-writes أيضًا عليك بالنظر في إمكانية استخدام الرسائل الفورية (Firebase Cloud Messaging) في Firebase لتحسين الأداء وتقليل العمليات اللازمة للحصول على بيانات جديدة وإرسالها إلى التطبيق الخاص بك. بالإضافة إلى النظر في تحسين هيكل البيانات الخاص بك في Firebase لتقليل عدد المستندات التي تحتاج إلى الوصول إليها في كل مرة. مثلاً، دمج بعض المعلومات في مستند واحد بدلاً من إنشاء مستندات منفصلة لكل بيانات. وإليك بعض الأفكار التي يمكن استخدامها لتحسين الكود الخاص بك: استخدام الدوال المتعددة للحصول على بيانات متعددة بدلاً من استخدام await Future.wait، وذلك قد يحسن من الأداء ويجعل الكود أكثر وضوحًا وقابلية للصيانة، مثال: استخدام الدالة getBooksSnapshot بدلاً من await booksSnapshotFuture. تستطيع استخدام Stream للحصول على بيانات متعددة من Firebase بطريقة فعالة من حيث الأداء، من خلال إنشاء Stream واحد للحصول على جميع البيانات المطلوبة من Firebase. يمكن هيكلة قاعدة البيانات الخاصة بك بشكل أفضل لتجنب الحاجة إلى الوصول إلى عدة مجموعات للحصول على بيانات متعددة، عن طريق إنشاء مجموعات فرعية أو إضافة بيانات إضافية إلى المستندات الحالية لتجنب الحاجة إلى الوصول إلى مجموعات متعددة للحصول على بيانات متعددة.

بالطبع أنت قمت بتثبيت إطار Django وبايثون على حاسوبك، إذن عليك القيام بالتالي: قم بفتح موجه الأوامر (command prompt) واستخدم "cd" للانتقال إلى مجلد العمل الخاص بك. بعد ذلك، استخدم الأمر "django-admin startproject" لإنشاء مشروع Django جديد. بمجرد إنشاء المشروع ، انتقل إلى دليل المشروع باستخدام الأمر "cd". استخدم الأمر "python manage.py runserver" لتشغيل السيرفر المحلي، ويمكنك الآن فتح متصفح والوصول إلى الموقع الخاص بك عن طريق الذهاب إلى العنوان "http://localhost:8000/". إذا كنت تريد تغيير رقم المنفذ الافتراضي للسيرفر المحلي ، فتستطيع استخدام الأمر "python manage.py runserver 0.0.0.0:8080" لتشغيل السيرفر على المنفذ 8080. وبعد ذلك يمكنك تنفيذ تطبيق الإدارة الخاص بك في السيرفر المحلي وتحميله في المتصفح الخاص بك عن طريق زيارة العنوان "http://localhost:8000/admin". وأيضًا بإمكانك إنشاء بيئة افتراضية (Virtual Environment) لمشروع Django الخاص بك لتفادي تعارض الإصدارات مع الحزم الأخرى المثبتة في جهاز الكمبيوتر الخاص بك، وذلك من خلال التالي: 1-إنشاء مجلد جديد: mkdir {directory_name} نضيف مكان {directory_name} اسم المجلد الجديد، مثلاً mkdir app وسينشيء مجلد باسم app في نظام ويندوز. 2- تثبيت جانغو Django: pipenv install django 3- تفعيل البيئة الإفتراضية: pipenv shell 4- إنشاء مشروع جانغو جديد: django-admin startproject {project_name} . عليك بتغيير مكان {project_name} باسم مشروع جانغو. 5- تشغيل مشروع جانغو: python .\manage.py runserver 6- إنشاء تطبيق جانغو: python .\manage.py startapp {app_name} واستبدل {app_name} باسم تطبيق جانغو الذي تريده.

الخطأ يظهر أن هناك تعارض في متطلبات الحزم المستخدمة في مشروعك. وتحتاج إلى التحقق من ملف composer.json الخاص بمشروع Laravel الخاص بك والتأكد من أن متطلبات الحزم محدثة وتتوافق مع متطلبات حزمة Chatify. في هذه الحالة، تحتاج إلى تحديث متطلبات الحزم في ملف composer.json لتتوافق مع متطلبات حزمة Chatify، و يمكنك القيام بذلك عن طريق تنفيذ الأمر التالي في مجلد مشروع Laravel الخاص بك: composer require pusher/pusher-php-server:^7.0 ومن ثم، يمكنك تنفيذ أمر تثبيت Chatify مرة أخرى باستخدام الأمر التالي: composer require munafio/chatify وإذا واجهت أي مشاكل أخرى، فيمكنك استخدام الخيار --with-all-dependencies للسماح بالتحديثات والإزالات للحزم التي تم تأمينها على إصدارات محددة. composer require munafio/chatify --with-all-dependencies أيضً تستطيع ا تحديد الإصدار المحدد لحزمة Chatify بإضافة القيود الخاصة بالإصدار في الأمر composer require: composer require munafio/chatify:^1.6.1 بعد تحديث متطلبات الحزم وتثبيت Chatify بنجاح، تأكد من تنفيذ الأمر التالي لتحديث ملف الارتباطات composer.lock: composer update وفي النهاية، تأكد من إضافة مزود Pusher إلى ملف تكوين Laravel الخاص بك config/app.php كما هو موضح في توثيق Chatify.

هناك إضافة godot-python التي تمكنك من استخدام لغة البرمجة بايثون في محرك الألعاب Godot. حيث أن إضافة godot-python هي إضافة مفتوحة المصدر توفر واجهة برمجية تسمح بكتابة البرامج النصية بلغة بايثون داخل Godot، وتوفر دعمًا للإصدارات الأقدم من Godot بالإضافة إلى Godot 4. وستحتاج إلى محرر Visual Studio وتثبيت اللإضافات اللازمة الخاصة بلغة C++ أثناء تثبيت البرنامج، حيث ستجد إضافة باسم Desktop development with C++. وبعد ذلك عليك بإنشاء بيئة إفتراضية للغة بايثون ثم تثبيت إضافة godot-python من المستودع، وإتباع الخطوات التي تم شرحها في مستودع الإضافة حيث هناك خطوات تفصيلية. وأيضًا تستطيع البحث عن Integrating Python into Godot وستجد شروحات عن هذا الأمر. وهناك أمر آخر ألا وهو إمكانية استخدام لغة البرمجة بايثون Python لتعزيز قدرات محرك الألعاب Godot، عن طريق تشغيل السكريبت بالخلفية أثناء تشغيل اللعبة في الجهة الأمامية. وذلك من خلال إنشاء بيئة افتراضية virtual environment للبرامج بلغة بايثون، وتنفيذ الأوامر في وقت التشغيل، والتعامل مع الأرقام والمصفوفات. ولرؤية شرح عن ذلك عليك بالبحث عن Use Python to Enhance The Godot Game Engine وستجد أمثلة وشرح حول الأمر. حل آخر باستخدام لغة GDScript GDScript هي لغة برمجة عالية المستوى ومكتوبة بشكل ديناميكي تستخدم لإنشاء محتوى في محرك ألعاب Godot. تستخدم اللغة نحوية الفراغات للتنسيق indentation-based syntax، وهي تشبه لغات البرمجة مثل Python. وهدف GDScript هو أن يكون محسّنًا ومتكاملاً بشكل وثيق مع محرك Godot، مما يسمح بمرونة كبيرة لإنشاء المحتوى والتكامل. وتمامًا كما يوحي اسمها، فإن GDScript مستقلة بالكامل عن لغة Python وليست مبنية عليها. لذلك يمكن القول أن GDScript تعتمد بشكل أساسي على تنسيقها الخاص والمحسّن لمحرك Godot وليست تعتمد على أي لغة برمجة أخرى.

بالنسبة لسؤالك الأول، فإذا أردت إزالة الرسومات التي تم إنشاؤها باستخدام Plotly.js ، تستطيع استخدام الأمر التالي: Plotly.purge() وهذا الأمر يمكنه إزالة جميع الرسومات من المنطقة النشطة. أما بالنسبة لسؤالك الثاني، فهناك العديد من الأسباب التي قد تؤدي إلى عدم ظهور الرسمة وهذا يتطلب التحقق من عدة عوامل، مثلاً، إذا كانت قيم x و y تم تمريرها بشكل صحيح وإذا كان لديك أيضًا عناصر HTML و CSS اللازمة لعرض الرسمة في صفحتك. حاول استخدام Console log للتحقق من الأخطاء في الكود الذي تم إنشاؤه ويمكنك أيضًا استخدام محرر النصوص المدمج في المستعرض للتحقق من أي أخطاء في HTML أو CSS. وتأكد من أن كل من phi و h هي مصفوفات من الأعداد التي تحتوي على 16 عنصرًا، حيث يبدو أن عدد العناصر في كلا المصفوفتين يجب أن يكون متساويًا لأنهما تم تمريرهما كقيم x و y في مصفوفة البيانات. كما يجب التأكد من أن لديك أيضًا الرمز اللازم لعرض الرسمة في صفحتك HTML/CSS، وعلى سبيل المثال، يمكنك إضافة عنصر div إلى صفحتك HTML وتحديد الارتفاع والعرض الخاص بالرسمة، ثم تحديد معرف العنصر الخاص بـ div كـ id للمصفوفة layout ، مثل هذا الشكل: <!DOCTYPE html> <html> <head> </head> <body> <div id="plotly-div" style="width: 600px; height: 400px;"></div> <script> var data = [{x:[phi], y:[h], type: 'curve'}]; var layout = { fileopt : "overwrite", filename : "simple-node-example", // إعدادات أخرى مثل عنوان المخطط وأي إعدادات أخرى يمكن إضافتها هنا }; Plotly.newPlot('plotly-div', data, layout); </script> </body> </html> و سيتم إنشاء عنصر div بمعرف plotly-div حيث يتم تعيين العرض والارتفاع. بعد ذلك، يتم إنشاء مصفوفة data ومصفوفة layout ويتم استخدام Plotly.newPlot() لرسم الرسمة داخل العنصر div المحدد بمعرف plotly-div. وإذا كنت تستخدم الكود في محرر الأكواد VScode فلا تنسى استيرد أو تثبيت المكتبة، ويمكنك استخدام CDN كالتالي: <head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head>

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

بالإضافة إلى الطريقة التي ذكرها لك عدنان، هناك عدة طرق لتجميع الأرقام الزوجية الأقل من 20 تلقائيًا وتشمل: 1- استخدام حلقة (loop) لتكرار الفحص والإضافة. يمكن استخدام حلقة لتكرار عملية الفحص والإضافة حتى الوصول إلى جميع الأرقام المدخلة. من خلال الحلقة مع جملة if للتحقق مما إذا كان العدد زوجيًا وأقل من 20، وإذا كانت الشروط متوفرة يمكن إضافة العدد إلى المتغير result. 2- استخدام مصفوفة (array) لتخزين الأرقام وإجراء الفحص. يمكن تخزين الأرقام المدخلة في مصفوفة واستخدام حلقة لتحقيق الفحص والإضافة إلى المتغير result. عن طريق الجملة if داخل الحلقة للتحقق مما إذا كان العدد زوجيًا وأقل من 20، وإذا كانت الشروط متوفرة يمكن إضافة العدد إلى المتغير result. 3- الإعتماد على الدالة (function) لتنفيذ الفحص والإضافة. يمكن إنشاء دالة تتلقى مجموعة من الأرقام كمدخلات وتقوم بتنفيذ الفحص والإضافة تلقائيًا. يمكن استخدام الجملة if داخل الدالة للتحقق مما إذا كان العدد زوجيًا وأقل من 20، وإذا كانت الشروط متوفرة يمكن إضافة العدد إلى المتغير result. يمكن استخدام الدالة في أي مكان في الشيفرة التي تريدها لتجميع الأرقام الزوجية. مثال للطريقة الثانية: #include <iostream> using namespace std; int main() { int result = 0; int num; cout << "Please enter a number: "; while (cin >> num && num < 20) { if (num % 2 == 0) { result += num; } cout << "Please enter another number: "; } cout << "The sum of even numbers smaller than 20 is: " << result << endl; return 0; } والكود يطلب من المستخدم إدخال عدد واحد فقط في البداية، ثم استخدام حلقة while لطلب المزيد من الأرقام الزوجية الأقل من 20 مع الاستمرار في إضافة الأرقام إلى المتغير result. ويتوقف البرنامج عندما يتم إدخال رقم غير زوجي أو رقم أكبر من 20. في النهاية، يتم طباعة مجموع الأرقام الزوجية الأقل من 20.

Firebase هي منصة شاملة تحتوي على خدمات عديدة، بما في ذلك قاعدة بيانات Realtime و Cloud Firestore، وتستطيع استخدام أي منهما بناءً على احتياجاتك. إذا كنت تستخدم Cloud Firestore، فإنه يستخدم نموذج قاعدة بيانات NoSQL مختلف عن نموذج MySQL الذي اعتدت عليه. حيث يتم تخزين البيانات في مستندات (documents) في مجموعات (collections) بدلاً من الجداول (tables). لكن يمكن الوصول إلى البيانات باستخدام العلاقات والاستعلامات التي تتطلبها تطبيقك. مثلاً، يمكنك إنشاء مجموعتين، واحدة لـ"الكتب" وأخرى لـ"السنوات"، ثم ربطهما معًا باستخدام مفتاح خارجي، وهذا يمكن القيام به باستخدام المراجع (references) في Firestore. بخصوص السؤال الثاني من المناسب تخزين البيانات التي تريد عرضها في القوائم المنسدلة (dropdown lists) في قاعدة البيانات، حتى يمكنك تحديث هذه البيانات وإضافة عناصر جديدة دون الحاجة إلى تحديث تطبيقك. وتستطيع تخزين هذه البيانات في مجموعة خاصة بها في قاعدة البيانات، أو يمكن استخدام Firebase Realtime Database لتخزينها كما أنه يسمح بتخزين بيانات في شكل JSON. أي يمكنك تخزين البيانات المختلفة سواء في قاعدة البيانات أو كملفات JSON داخل تطبيقك. ولكن إذا كانت هذه البيانات تحتوي على معلومات متغيرة بشكل مستمر أو تحتاج إلى تحديثات من الخادم، فقاعدة البيانات هي الخيار الأفضل.