Mustafa Suleiman

لإتخاذ قرارك بشكل سليم، هل تلك هي الخطوة الأولى في عالم البرمجة؟ أي لم تقم بكتابة أي كود من قبل ولا تعرف ما هي قاعدة البيانات ولا تعرف معنى API؟ هل تعرف معنى حلقة تكرار؟ أو جملة شرطية؟ هل قررت ما هو المجال الذي تنوي التخصص به في البرمجة، سواء ويب كمطور واجهاة أمامية أو Full-stack أو تطوير تطبيقات الهاتف أو مطور واجهة خلفية فقط باستخدام node.js أو PHP أو بايثون؟ إذا كانت الإجابة هي لا، فهنا أنت بحاجة إلى دراسة الأساسية والتعرف على مجال البرمجة بشكل عام أي معرفة عامة من الأعلى لترى الأمر بشكل واضح، ثم إختيار مجال للتخصص به بناءًا على وعي ودراية. وفي دورة علوم الحاسب ستتعلم التالي: أساسيات الحاسوب وعلومه والتفكير المنطقي وما هي الخوارزميات وكيف تفيد في البرمجة تطبيقات عملية على أساسيات التفكير المنطقي باستخدام بيئة سكراتش Scratch التفاعلية أساسيات لغة البرمجة JavaScript وتطبيق المفاهيم التي تم شرحها باستخدامها، والتوسع في شرح التطبيقات العملية للغات البرمجة، أيضًا أساسيا بايثون. أساسيات أنظمة التشغيل المختلفة وكيفية تثبيت البرمجيات اللازمة للبرمجة عليها أساسيات سطر الأوامر في نظام لينكس، وشرح الأسس التي بني عليها النظام مع تطبيقها عمليًا أنظمة قواعد البيانات المختلفة، مع شرح تفصيلي للغة SQL للتعامل معها مبادئ أساسية في أنظمة قواعد البيانات NoSQL المفاهيم الأساسية التي تبنى فيها صفحات الويب مفاهيم أساسية في الشبكات والخوادم، وكيف يتم استقبال الطلبيات إلى الخادم والرد عليها مبادئ الحماية والأمان في الويب وحاليًا يوجد عرض العطلة الصيفية، الذي يوفر لك الحصول على دورتين بسعر دورة واحدة. وبخصوص الدورة الأخرى أنصحك بالإطلاع على التالي:

تسجيل شاشة الهاتف أثناء الاختبار هناك مكتبة تُدعى react-screen-recorder تستطيع الإعتماد عليها لتسجيل الشاشة أثناء الاختبار، وتلك المكتبة تعمل مع React وتُتيح للمستخدمين تسجيل شاشة هاتفهم أثناء استخدام التطبيق، ولتثبيتها استخدم الأمر التالي: npm install react-screen-recorder وستجد طريقة الاستخدام في المستودع الرسمي للمكتبة: https://github.com/DeltaCircuit/react-media-recorder وإليك مثال: import React, { useState } from 'react'; import { ScreenRecorder } from 'react-screen-recorder'; const ScreenRecorderComponent = () => { const [isRecording, setIsRecording] = useState(false); const handleRecording = (blob) => { // يمكنك إرسال الـ blob إلى المنصة الخاصة بك للمراجعة هنا console.log(blob); }; return ( <div> <h1>تسجيل شاشة الهاتف</h1> <ScreenRecorder onRecordingComplete={handleRecording} isRecording={isRecording}> {({ startRecording, stopRecording }) => ( <> {isRecording ? ( <button onClick={stopRecording}>إيقاف التسجيل</button> ) : ( <button onClick={startRecording}>بدء التسجيل</button> )} </> )} </ScreenRecorder> </div> ); }; export default ScreenRecorderComponent; ضع المكون في التطبيق وسيظهر زرًا يمكن للمستخدم النقر عليه لبدء تسجيل شاشة هاتفه، وبمجرد أن ينتهي المستخدم من تسجيل الشاشة، ستُستدعى وظيفة handleRecording وستُمرر لها blob الخاص بتسجيل الفيديو، هنا تستطيع إرسال الـ blob للواجهة الخلفية للمراجعة. تسجيل فيديو من الكاميرا الأمامية أثناء الاختبار وبالنسبة لتسجيل الفيديو من الكاميرا الأمامية، باستطاعتك استخدام تقنية التسجيل بواسطة MediaRecorder، والوصول إلى الكاميرا الأمامية باستخدام API "getUserMedia"، وهي API's متاحة من قبل المتصفح. وإليك مثال: async function startRecording() { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false }); const mediaRecorder = new MediaRecorder(stream); const chunks = []; mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) { chunks.push(e.data); } }; mediaRecorder.onstop = () => { const videoBlob = new Blob(chunks, { type: 'video/mp4' }); // قم بإرسال الـ videoBlob للمراجعة على المنصة الخاصة بك هنا }; mediaRecorder.start(); } function stopRecording() { mediaRecorder.stop(); } وعليك باستدعاء startRecording() عند بدء الاختبار و stopRecording() عند انتهائه. تحميل الفيديوهات للمراجعة وبمجرد انتهاء الاختبار، تستطيع إرسال الفيديوهات (شاشة الهاتف والكاميرا الأمامية) إلى المنصة الخاصة بك للمراجعة، باستخدام Node.js والمكتبات المناسبة لاستقبال الفيديوهات وتخزينها في الخادم أو قاعدة البيانات. وبالطبع نستخدم Express.js كإطار عمل لبناء نظام السيرفر واستقبال طلبات الفيديوهات، والإعتماد على مكتبات أخرى مثل Multer لتحميل الفيديوهات على الخادم. مثال: const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.single('video'), (req, res) => { // يتم تخزين الفيديو هنا في قاعدة البيانات أو أي مكان آخر تفضله console.log(req.file); res.send('تم تحميل الفيديو بنجاح!'); }); app.listen(3000, () => { console.log('السيرفر يعمل على منفذ 3000'); }); وبإمكانك استدعاء API نقطة النهاية /upload عند انتهاء الاختبار لتحميل الفيديوهات.

السؤال عام جدًا، وعليك بذكر ما هي اللغات والتقنيات التي تم تطوير الموقع بها، فمثلاً لو كنت تستخدم نظام إدارة محتوى مثل WordPress و Joomla و Drupal فستتمكن من استخدام اللغة العربية والإنجليزية بسهولة من خلال إضافة للموقع. وبالطبع يجب استخدام قاعدة بيانات تدعم النصوص متعددة اللغات وقدرات الترجمة، بإختيار صيغة التحويل الموحد في قاعدة البيانات وهي UTF-8. وبالطبع هناك مكتبات جافاسكريبت لبناء واجهة مستخدم متعدد اللغات ومنها: i18next: مكتبة لترجمة تطبيقات الويب، تدعم i18next تحميل الملفات الترجمة بصيغ مختلفة مثل JSON و PO وغيرها، وتستطيع استخدامها في تطبيقات React و Angular و Vue.js وغيرها. Polyglot.js: مكتبة صغيرة وخفيفة الوزن لدعم الترجمة في تطبيقات الويب، تسمح Polyglot.js بإضافة النصوص المترجمة عبر المفاتيح. كيف يمكن بناء واجهة مستخدم متعدد اللغات ويمكن تنفيذ الأمر من خلال React مثلاً باستخدام كائن لكل لغة وبها الترجمة وهنا شرح لذلك:

الأسئلة الإختبارية لا يتم الإجابة عليها بشكل مباشر، لكن يمكنك إرشادك لخطوات الحل وإذا وفرت الكود يمكن حل المشكلة التي تواجهك. وإليك خطوات الحل: أولاً تحقق مما إذا كان المقام (denominator) يساوي الصفر، وإذا كان الصفر، يجب أن تعيد الدالة 0 بدلاً من محاولة القسمة لأنه لا يمكن القسمة على الصفر. وفي حالة أن المقام (denominator) ليس يساوي الصفر، عليك بالعثور على الكسر العشري بقسمة البسط (numerator) على المقام (denominator) واستخراج الجزء العشري فقط من النتيجة (وكمساعدة ستحتاج إلى استخرج الجزء العشري أولاً من خلال استخدام modulo ثم قسمته على المقام denominator). والأمر بسيط كما ترى، وأنصحك بقراءة التالي:

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

سبب المشكلة غير واضح، فربما الخادم غير قيد التشغيل فتأكد من تشغيل خادم Apache Tomcat قبل محاولة الوصول إليه من خلال الأمر service tomcat status أو systemctl status tomcat. وهل الخادم متاح على المنفذ الصحيح؟ فالمنفذ الافتراضي لخادم Apache Tomcat هو 8080. وحاول تعطيل جدار الحماية لديك فقد يمنع الوصول إلى خادم Apache Tomcat، تأكد من السماح بالوصول إلى المنفذ الذي يعمل عليه الخادم من خلال جدار الحماية، وايضًا تحقق من عنوان الـ IP الذي تحاول الإتصال به. وقد يفيدك إعادة تشغيل الحاسوب والراوتر للتأكد من عدم وجود مشاكل من تلك الجهة. وتفقد تكوين ملف الإعداد الخاص بخادم Tomcat (server.xml) وأن المنافذ المستخدمة للاستماع صحيحة، وأن المنفذ الذي يستخدمه Tomcat غير محجوز من قبل تطبيقات أخرى.

بالإضافة إلى مكتبة Laravel Nova يوجد العديد من المكتبات الأخرى ومنها: Backpack for Laravel حلاً ممتازًا لإنشاء لوحة تحكم مخصصة بسهولة، وتتضمن العديد من الوظائف المساعدة والتجهيزات الجاهزة للعمل مع قواعد البيانات والصلاحيات والبحث والتصفية والإعدادات والمزيد. Voyager لوحة تحكم قوية وسهلة الاستخدام تعمل على Laravel وتسمح لك بإدارة المحتوى والصور والملفات والبيانات والمستخدمين بسهولة. October CMS يعتمد على لارافيل كإطار عمل ويوفر تجربة إدارة مرنة وقوية. PyroCMS نظام إدارة محتوى قائم على Laravel مع واجهة سهلة الاستخدام ومرونة في التخصيص.

جرب إختبار التطبيق بصيغة apk على هاتفك لتفقد أين المشكلة بالضبط، وأيضًا اختبر نفس النسخة على هاتف آخر.

عليك بإضافة زر "تواصل مع المندوب" إلى صفحتك في HTML، وسنستخدم ذلك الزر للتحكم في عملية نسخ الصورة وإرسالها للواتساب. <div id="image"> <img src="image.png" alt="Image"> </div> <button onclick="sendToWhatsApp()">تواصل مع المندوب</button> وفي الجزء البرمجي الخاص بجافاسكريبت، أضف حدثًا للزر "تواصل مع المندوب" باستخدام JavaScript للتعامل مع النقرة عليه، وفي ذلك الحدث، ستقوم بنسخ الصورة إلى الحافظة وتوجيه المستخدم إلى رابط واتساب مع الصورة المرفقة. function sendToWhatsApp() { const imageURL = document.getElementById("image").src; const text = "This is the text to send to WhatsApp"; // Copy the image to the clipboard navigator.clipboard.writeText(imageURL); // Open WhatsApp with the text and image const whatsappURL = "whatsapp://send?text=" + encodeURIComponent(text) + "&image=" + encodeURIComponent(imageURL); window.open(whatsappURL); }

أرجو منك تعديل روابط مكتبة bootstrap في ملف index.html باستبدال الجزء الأول من الرابط لتحويله من cdn.jsdelivr.net إلى fastly.jsdelivr.net أي تصبح الروابط كالتالي: <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous"> <script src="https://fastly.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> والسبب هو أنه على الأغلب تم حجب الجزء الخاص بالـ Cloudflare network المعتمد عليه موقع jsdelivr ، وقد حدث ذلك في مصر.

أولاً لا تخجل أبدًا من المشاريع التي تقوم بها في البداية، فكل المطلوب منك هو محاولة تنفيذ المطلوب منك والتطبيق على ما تعلمته من أجل تثبيت المعلومات وتحسين مهاراتك البرمجية، وتستطيع الحصول على تصاميم من خلال المواقع التالية: ومع الوقت ستجد أن مستواك قد تحسن وتصميماتك أصبحت أفضل، وللعلم أنت كمطور واجهات أمامية ليس مطلوب منك تصميم الواجهة بل تطويرها، لكن مطلوب منك أيضًا الإلمام بأساسيات التصميم الجيد وستجد هنا توضيح لتلك النقطة بشكل مفصل: لا أنصحك بالإنتقال لتعلم جافاسكريبت، حتى تتمكن من تنفيذ مشروع HTML, CSS بتصميم جيد وبدون أخطاء تقريبًا، اختر تصميم ينال إعجابك من المواقع التي ذكرتها سابقًا، ثم اعمل عليه ولا تقلق إذا واجهتك تحديات فذلك هو المطلوب، فكر في كيفية التنفيذ وفي حال لم تتمكن ابحث عن كيفية تنفيذ ما تريده ثم أخيرًا تستطيع السؤال. وبعد أن تشعر بالأريحية في استخدام HTML وCSS، تستطيع الإنتقال إلى تعلم جافاسكريبت. ما فعلته أنا عندما كنت أتعلم البرمجة، هو أنه كان يوجد مشروع في نهاية الدورة الخاصة بـ HTML, CSS، فقم بمشاهدة المشروع وهو عبارة موقع خاص بشركة توصيل طعام، وقمت بالتطبيق مع المدرب من خلال المشاهدة ثم التوقف ومحاولة التطبيق بمفردي. وبعد الإنتهاء بحثت عن تصميم من المواقع التي ذكرتها لك، ووجدت تصميم أعجبني فقمت بالعمل عليه لمدة أسبوع تقريبًا بمعدل 7 إلى 10 ساعات يوميًا، حتى إنتهيت منه وأيضًا أضفت له بعض الخواص الغير موجودة بالتصميم وتعلمت الكثير جراء ذلك. وأنصحك أيضًا بالتمرن على تطوير النماذج Forms فهى أمر هام جدًا بالنسبة لمطور الواجهة الأمامية، حاول تنفيذ مشروع جانبي مخصص لتطوير نموذج وستجد على اليوتيوب مشاريع ابحث عن "إنشاء فورم html css".

الأمر بسيط، ستتجه إلى صفحة الدورات في أكاديمية حسوب للتعرف عليها وإختيار الدورة المناسبة للمجال الذي تريد التخصص به: https://academy.hsoub.com وأنصحك بقراءة التالي: وبعد إختيار الدورة المناسبة لك، ستجد في صفحة الدورة زر اشترك الآن كالتالي: ولكن ذلك في حالة عدم وجود عروض، وحاليًا يوجد العرض الصيفي وتفاصيله هي الحصول على دورتين بتكلفة دورة واحدة ورابط العرض هو التالي: https://academy.hsoub.com/offers/summer-2023 بعد التوجه للرابط اضغط على زر اشترك الآن، أو قم بالنزول لأسفل وستجد القسم الخاص بإختيار الدورتين وخانات إدخال بيانات البطاقة الإئتمانية ( يجب أن تكون من نوع Debit أو Credit وليس Prepaid) الخاص بك كالتالي: وأخيرًا اضغط على اشترك الآن. وفي حال أردت الدفع بوسيلة أخرى مثل باي بال أو بطاقة الهدية فعليك بالتواصل مع مركز المساعدة في أكاديمية حسوب ليتم مساعدتك. وأنصحك بالإطلاع على قاعدة المعرفة وستجد به الكثير من الإجابات على الأسئلة لديك: https://support.academy.hsoub.com

أولاً، تحتاج إلى إضافة الصورة والنص في الواجهة. باستخدام Row لعرضهما جنبًا إلى جنب: import 'package:flutter/material.dart'; class CustomSwitch extends StatefulWidget { @override _CustomSwitchState createState() => _CustomSwitchState(); } class _CustomSwitchState extends State<CustomSwitch> { bool _isSwitched = false; @override Widget build(BuildContext context) { return Row( children: [ Icon( _isSwitched ? Icons.check_box : Icons.check_box_outline_blank, color: _isSwitched ? Colors.green : Colors.grey, ), SizedBox(width: 8), GestureDetector( onTap: () { setState(() { _isSwitched = !_isSwitched; }); }, child: Text( _isSwitched ? 'تم التفعيل' : 'غير مفعل', style: TextStyle( color: _isSwitched ? Colors.green : Colors.grey, ), ), ), ], ); } } ثم استخدم CustomSwitch في أي مكان ترغب فيه داخل تطبيقك، كالتالي: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Custom Switch'), ), body: Center( child: CustomSwitch(), ), ), ); } }

بإمكانك التحقق من المعلومات عبر طلبات POST و GET باستخدام الـ "Request" المدمجة، والوصول إلى بيانات الطلب من خلال هذا الكائن وتحليلها للتحقق منها. وإليك الخطوات للتوضيح: طلب GET: للوصول إلى بيانات طلب GET، استخدم الـ "query" المدمجة في كائن الطلب. // استقبال البيانات من الطلب GET public function getExample(Request $request) { $data = $request->query(); // تحقق من وجود معلومة معينة بالاستعلام الذي تم إرساله if ($request->has('key')) { // اعمل شيئاً مع المعلومة الموجودة في المفتاح 'key' } // ... تابع باقي المنطق الخاص بك } طلب POST: نستخدم الـ "input" المدمجة في كائن الطلب. // استقبال البيانات من الطلب POST public function postExample(Request $request) { $data = $request->input(); // تحقق من وجود معلومة معينة بالمتغيرات التي تم إرسالها بالطلب POST if ($request->has('key')) { // اعمل شيئاً مع المعلومة الموجودة في المفتاح 'key' } // ... تابع باقي المنطق الخاص بك } في كلا الحالتين، تستطيع الوصول إلى قيمة معينة من خلال استخدام الدالة "input" مع اسم المفتاح كمعامل. وإليك مثال للحصول على قيمة معينة من طلب POST: // استقبال البيانات من الطلب POST public function postExample(Request $request) { $username = $request->input('username'); $password = $request->input('password'); // ... تابع باقي المنطق الخاص بك }

على الأرجح سؤالك خاص بدورة بايثون، وإن كان كذلك أرجو منك طرح السؤال أسفل فيديو الدورة الخاص بالسؤال في التعليقات من أجل مساعدتك بشكل أفضل، وطرح الأسئلة العامة هنا. والقواميس في بايثون هي مجموعات غير مرتبة من المفاتيح والقيم، بإمكانك استخدامها لتخزين بيانات مختلفة، مثل أسماء الطلاب ودرجاتهم أو أسماء المنتجات وأسعارها. وهناك العديد من فوائد استخدام القواميس في بايثون، منها: سرعة في الوصول إلى البيانات. يمكن استخدامها لتخزين أنواع بيانات مختلفة. تخزين بيانات غير مرتبة. إنشاء مجموعات مترابطة من البيانات. بالإضافة إلى تنظيم البيانات بطريقة سهلة ومفهومة، حيث تستخدم المفاتيح لتصنيف وتنظيم القيم. ومن الممكن استخدام القواميس لتمثيل البيانات كجداول صغيرة مع مفتاح لكل سجل، مما يسهل الوصول إلى السجلات وتعديلها، أو تكوين قواميس متعددة الأبعاد (nested dictionaries) لتمثيل بيانات هيكلية معقدة. وتساعد القواميس في التعامل مع البيانات ذات التنظيم الهيكلي بسهولة، مثل الJSON والـXML. وإليك بعض الأمثلة على كيفية استخدام القواميس في بايثون. تخزين معلومات المستخدمين: # قاموس لتخزين معلومات المستخدمين user_info = { 'اسم المستخدم': 'john_doe', 'البريد الإلكتروني': 'john@example.com', 'العمر': 30, 'المدينة': 'نيويورك' } # الوصول إلى قيمة معينة باستخدام المفتاح print("اسم المستخدم:", user_info['اسم المستخدم']) print("العمر:", user_info['العمر']) لتخزين أسماء المنتجات وأسعارها: products = { "Apple": 100, "Orange": 50, "Banana": 25 } لتخزين بيانات غير مرتبة: data = { "name": "John Doe", "age": 20, "address": "123 Main Street, Anytown, CA" } التحكم في تدفق البرنامج: # تحديد عملية بناءٍ سريعٍ للأرقام operations = { '+': lambda x, y: x + y, '-': lambda x, y: x - y, '*': lambda x, y: x * y, '/': lambda x, y: x / y } operator = '+' # اختيار عملية الجمع num1 = 10 num2 = 5 # استخدام العملية المحددة لإجراء الحساب result = operations[operator](num1, num2) print("النتيجة:", result) تمثيل بيانات هيكلية: # مثال لقاموس متعدد الأبعاد employees = { 'موظف1': { 'الاسم': 'أحمد', 'العمر': 25, 'المدينة': 'القاهرة' }, 'موظف2': { 'الاسم': 'سارة', 'العمر': 30, 'المدينة': 'دبي' } } # الوصول إلى تفاصيل موظف معين print("معلومات موظف1:", employees['موظف1']) print("اسم موظف2:", employees['موظف2']['الاسم']) شرح القواميس dict في بايثون من موسوعة حسوب

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

توجه إلى المسار التالي على جهازك من خلال نسخه ولصقه في شريط العنوان ثم اضغط Enter: C:\Program Files\Oracle\VirtualBox\drivers\vboxsup وستجد هناك ملف باسم VBoxSup.inf ثم اضغط بزر الفأرة الأيمن عليه واختر install كالتالي: الآن قم بفتح منفذ الأوامر CMD من خلال البحث عنه في شريط البحث بالأسفل في الويندوز، ثم اختر run as administrator ثم اكتب الأمر التالي: sc start vboxsup والآن حاول تجربة تشغيل النظام على VirtualBox مرة أخرى، لكن بالطبع عليك بإعادة تشغيله بعد تنفيذ الخطوات السابقة.

حاول استخدم أدوات تحليل التطبيق لتحديد الأخطاء، مثل Crashlytics و Sentry لتتبع الأخطاء التي تحدث في تطبيقك وإرسالها إليك، أيضًا اختبر تطبيقك على جهاز أندرويد آخر لتفقد هل المشكلة من جهازك أم لا، ويفضل لو كان به إصدار أندرويد أعلى مثلاً. وبإمكانك إضافة أوامر تسجيل (Log) في أماكن محددة من التطبيق لتتبع تدفق التنفيذ والقيم المتغيرة، واستخدام أدوات تسجيل الأحداث مثل Logcat في Android Studio لعرض السجلات وفهم سير تنفيذ التطبيق والمعلومات المفيدة حول الأخطاء. وإليك الخطوات لكيفية تصحيح أخطاء تطبيق Android: قم بتمكين تصحيح USB على جهازك. يمكنك العثور على هذا الإعداد في قائمة خيارات المطور. توصيل جهازك بالكمبيوتر باستخدام كابل USB. افتح Android Studio. في شريط الأدوات، انقر فوق الزر "تشغيل". حدد خيار "التصحيح". وفي حال كنت تقوم بتصحيح أخطاء تطبيقك لأول مرة، فسيطلب منك Android Studio تثبيت أدوات Android Debug Bridge (ADB). انقر فوق "تثبيت" لتثبيت أدوات ADB. سيقوم Android Studio الآن ببناء تطبيقك وتثبيته على جهازك. بمجرد تثبيت التطبيق، وسيبدأ في التشغيل في وضع التصحيح. والآن تستطيع تعيين نقاط التوقف breakpoints في الكود، ثم الإنتقال سطر بسطر لتفقد أين يقع الخطأ.

أنت تتحدث عن درس المجموعات Sets في أساسيات لغة بايثون Python في بنى المعطيات الخطية Data Structures، لذلك أرجو منك التعليق أسفل فيديو الدرس في المرة القادمة ليتم مساعدتك بشكل افضل. وبخصوص سؤالك، المجموعة قابلة للتعديل، يعني أنه بإمكاننا تغيير قائمة العناصر داخلها، سواءً بإضافة عناصر جديدة أو حذف عناصر موجودة. مثال: # إنشاء مجموعة قابلة للتعديل set1 = {1, 2, 3, 4, 5} print(set1) # Output: {1, 2, 3, 4, 5} # إضافة قيمة جديدة set1.add(6) print(set1) # Output: {1, 2, 3, 4, 5, 6} # حذف قيمة set1.remove(3) print(set1) # Output: {1, 2, 4, 5, 6} ومن ناحية أخرى، القيم غير قابلة للتعديل تعني أنه لا يمكن تغيير العناصر بعد إنشاء المجموعة، ولا يُمكن إضافة عناصر جديدة أو حذف العناصر الموجودة. مثال: # إنشاء مجموعة غير قابلة للتعديل باستخدام frozenset frozen_set = frozenset({10, 20, 30, 40}) print(frozen_set) # النتيجة: frozenset({40, 10, 20, 30}) # لا يمكن إجراء أي تغيير في المجموعة الغير قابلة للتعديل # frozen_set.add(50) # سيؤدي هذا إلى خطأ TypeError: 'frozenset' object has no attribute 'add' وبالنسبة لكائن قابل للتكرار (Iterable)، فهو كائن يمكن الانتقال عبر عناصره بشكل متتالٍ، أي أننا نستطيع استخدام الحلقات مثل حلقة for للوصول إلى كل عنصر في الكائن. مثال: # قائمة قابلة للتكرار my_list = [10, 20, 30, 40, 50] # الوصول إلى عناصر القائمة باستخدام حلقة for for item in my_list: print(item) # النتيجة: # 10 # 20 # 30 # 40 # 50 وبالمقابل، الكائن غير قابل للتكرار يعني أنه لا يمكن استخدام الحلقات للوصول إلى العناصر بشكل متتالٍ. مثال: my_number = 42 # لا يمكن استخدام حلقة for مباشرة للعدد (Number) لأنه غير قابل للتكرار for digit in my_number: print(digit) # سيؤدي هذا إلى خطأ TypeError: 'int' object is not iterable وبالنسبة لكيفية جعل المجموعات تحتوي على قيم غير مكررة وفي الوقت نفسه تكون قابلة للتكرار، في لغة Python، فالمجموعات تحتوي على قيم فريدة فقط، مما يعني أنها لا تقبل وجود عناصر مكررة. وعندما تقوم بإضافة قيمة مكررة إلى المجموعة، سيقوم Python تلقائيًا بإزالة القيمة المكررة بحيث تبقى المجموعة تحتوي فقط على القيم الفريدة، مما يسمح للمجموعات أن تكون قابلة للتكرار عند عملية الترتيب والوصول إلى عناصرها، في حين يضمن عدم وجود قيم مكررة فيها. مثال: # إنشاء مجموعة تحتوي على قيم مكررة my_set = {1, 2, 2, 3, 4, 4, 5, 5} # عرض المجموعة print(my_set) # النتيجة: {1, 2, 3, 4, 5} # عند إضافة قيمة مكررة للمجموعة، ستقوم Python تلقائيًا بإزالتها my_set.add(3) print(my_set) # النتيجة: {1, 2, 3, 4, 5} # يمكنك استخدام التحويل إلى مجموعة لإزالة القيم المكررة من قائمة my_list = [1, 2, 2, 3, 4, 4, 5, 5] unique_set = set(my_list) print(unique_set) # النتيجة: {1, 2, 3, 4, 5} المجموعات (Sets) تتكون فعليًا من قيم فريدة غير قابلة للتكرار، ولا يمكن أن تحتوي على عناصر مكررة، وهي في الواقع مجموعة قيم لا تتكرر، ولا تحتوي على ترتيب معين للعناصر. وبخصوص القابلية للتعديل، فالمجموعة (set) هي هيكل بيانات قابل للتعديل (Mutable) في لغة Python، ويمكنك إضافة وحذف العناصر من المجموعة بحرية، أما frozenset فهو هيكل بيانات غير قابل للتعديل (Immutable) ولا يمكن تعديل أو تغيير العناصر الموجودة فيه. شرح المجموعات set في بايثون من موسوعة حسوب

الأمر يختلف من لغة برمجة إلى أخرى، لكن المفهوم واحد، حيث أن هناك عدة مفاهيم يجب أن تتقنها وتطبقها بشكل صحيح وأولها أن الكائنات Objects هي العنصر الأساسي في البرمجة الكائنية وتمثل وحدات مستقلة تحتوي على البيانات والسلوكيات المتعلقة بها. ثم مفهوم التركيب والتفكيك (Composition and Aggregation)، حيث تعتمد البرمجة الكائنية على تركيب الكائنات من خلال تضمينها في بعضها البعض (التركيب) أو ربطها بشكل منطقي (التفكيك). يأتي بعد ذلك التوريث (Inheritance) والذي يسمح بإنشاء كائن جديد بناءً على كائن موجود واكتساب الخصائص والسلوكيات من الكائن الأصل. ننتقل بعد ذلك إلى الدوال والأساليب (Methods)، وهي سلوكيات الكائنات وتستخدم لتنفيذ العمليات والإجراءات. ثم مفهوم التغليف (Encapsulation) والذي يتيح لك تجميع البيانات والأساليب ذات الصلة معًا في كائن واحد وإخفاء التفاصيل الداخلية عن الخارج. وأخيرًا مفهوم التحول (Polymorphism) والذي يتيح للكائنات القدرة على تنفيذ نفس الواجهة بطرق مختلفة، ويساعد على تبسيط البرمجة وجعلها أكثر مرونة. وقد تم توضيح مجموعة المبادئ البرمجية الخمسة SOLID Principles التي تهدف إلى جعل التصميم البرمجي قابلًا للتوسع والصيانة. والأمر بسيط، كل ما عليك هو تعلم تلك المفاهيم والتطبيق عليها، ومحاولة تنفيذ مشروع يعتمد على البرمجة الكائنية لإختبار مدى فهمك، ولا مشكلة إذا واجهت صعوبة في البداية فذلك طبيعي، أنت بحاجة إلى الوقت والتكرار . ومن خلال تنفيذ مشاريع كبيرة نسبيًا ستفهم أهمية استخدام البرمجة الكائنية مقارنًة بكتابة الدوال والكود بدون استخدام الكلاسات. وبخصوص الـ Design Patterns فعليك بالإطلاع عليها فقط في البداية، لكن مع التركيز بشدة على نمط Model-View-Controller (MVC) فهو الأكثر استخدامًا وستحتاجه في العمل، أما باقي الأنماط فتستطيع تعلمها بعد مرور فترة وإنهائك أكثر من مشروع، وقد لا تحتاج إليها، وإليك شرح مفصل لما أقصده: شرح أنماط التصميم في موسوعة حسوب

المشكلة لديك في اسم كتابة اسم الـ Prop بشكل غير صحيح في مكون Note.js حيث أنك مررت إليه Prop باسم noteClicked ولكنك كتبته باسم noteclicked لاحظ حرف c صغير والصحيح هو حرف C كبير أي يصبح الكود كالتالي: import React from "react"; const Note = (props) => { const {title, noteClicked, active} = props; return ( <li className={`note-item ${active && "active"}`} onClick={noteClicked}> {title} </li> ); }; export default Note; وسيتم حل المشكلة، وأرجو منك طرح الأسئلة الخاصة بالدورات أسفل فيديو الدورة المتعلق بالسؤال في التعليقات، لكي يتم مساعدتك بشكل أفضل، وطرح الأسئلة العامة هنا في قسم أسئلة البرمجة.

هل جربت تصفح الموقع من خلال متصفح آخر؟ في حال تم التصفح بشكل طبيعي فعليك بحذف الملفات المؤقتة للمتصفح الذي يوجد به المشكلة من خلال الضغط على علامة القفل بجان رابط موقع الأكاديمية وذلك في جوجل كروم، ثم إختيار Cookies and site data: بعد ذلك اختر manage Cookies and site data وستظهر لك نافذة بها البيانات الخاصة بالموقع، فقم بحذف الجميع كالتالي: وفي حال لم يتم حل المشكلة، فقد تحتاج إلى حذف جميع الملفات المؤقتة للمتصفح من خلال الضغط على CTRL + SHIFT + DELETE ثم إختيار ALL TIME من القائمة المنسدلة ثم تحديد Cookies and other site data وCached images files ثم الضغط على clear data، لكن يجب التنبيه أن تلك الطريقة تعني تسجيل خروجك من جميع المواقع لأنه سيتم حذف الكوكيز.

ما تريدينه هو رفع مشروع يستخدم Webpack على GitHub pages وقد تم توضيح ذلك من خلال الفيديو التالي: وسأوضح لك الخطوات: أولاً عليك بإنشاء مستودع جديد على GitHub. ثم فتح مجلد الـ build أو dist النهائي فقط في vscode، وهو المجلد الذي يتم به تجميع الكود النهائي للمشروع ليصبح جاهز للنشر. ثم إنشاء مستودع git داخل ذلك المجلد من خلال المر التالي: git init والآن عليك بكتابة الأوامر التالية بالترتيب من أجل رفع المشروع إلى المستودع على GitHub: git add. git commit -m "my first commit" git branch -M main git remote add origin <رابط المستودع على جيت هوب> git push origin main والآن توجهي للمستودع الخاص بالمشروع على GitHub ثم الضغط على تبويب الإعدادات Settings، وستجدي خيار باسم pages اضغطي عليه ثم اختاري الفرع الذي تم رفع المشروع علي ه كما بالصورة: والآن سننتظر قليلاً لحين الحصول على رابط المشروع لتصفحه كما بالصورة: وفي حال أردتي رفع المشروع بالكامل بما في ذلك مجلد build فعليك بتجاهل الخطوة الأولى وإنشاء المستودع في جذر المشروع الرئيسي ثم رفعه إلى المستودع بنفس الأوامر التي ذكرتها لك ثم التوجه إلى الإعدادات وتفعيل pages والآن ستحصلين على رابط أضيفي إليه build في النهاية من أجل تصفح مجلد build، أي كالتالي: https://amine.github.io/test أضيفي إليه أنت build ليصبح كالتالي: https://amine.github.io/test وستجدين المزيد من التوضيح والشرح هنا:

مزايا Express error handler تحسين استقرار وتوفر التطبيق. تقليل كمية الكود التي تحتاج إلى كتابتها. إمكانية تجميع الأخطاء حسب نوعها. إمكانية إرسال ردود مفيدة إلى المستخدمين في حالة حدوث خطأ. متى يجب استخدام Express error handler (throw new Error) عند حدوث خطأ في الكود الخاص بك. عند تلقي طلب غير صحيح من المستخدم. عند حدوث خطأ في الاتصال بالشبكة. عند حدوث خطأ في قاعدة البيانات. متى يجب تجنب استخدام Express error handler (throw new Error) عند حدوث خطأ غير متوقع. عند حدوث خطأ لا يمكنك التعامل معه. عند حدوث خطأ غير مهم. وإليك مثال على كيفية استخدام Express error handler: // Handle a 404 error app.use(function(req, res, next) { if (req.originalUrl === '/404') { res.status(404).send('The page you are looking for is not found.'); } else { next(); } }); // Handle a 500 error app.use(function(err, req, res, next) { res.status(500).send('An unexpected error occurred.'); });

الإختلاف هو في طريقة تحويل البيانات إلى سلسلة، حيث يقوم x-www-form-urlencoded بتحويل البيانات إلى سلسلة باستخدام رمز URL، بينما يحول raw البيانات إلى سلسلة كما هي. ونستخدم x-www-form-urlencoded للبيانات التي سيتم إرسالها عبر نموذج ويب، مثلاً لإرسال اسم المستخدم وكلمة المرور إلى خادم، وتحويل تلك البيانات إلى سلسلة، وستبدوا السلسلة الناتجة كالتالي: username=johndoe&password=secret ولاحظ أنه يتم ترميز البيانات بتنسيق مفتاح/قيمة وإرسالها في جسم الطلب. أي لو في إرسال طلب POST لإضافة مستخدم جديد إلى قاعدة البيانات، يمكنك استخدام x-www-form-urlencoded لإرسال البيانات التالية: مثال URL: http://localhost:3000/api/users Body type: x-www-form-urlencoded البيانات: key: name، value: John Doe key: email، value: johndoe@example.com key: age، value: 30 وفي مشروع Node.js، يجب أن تُعالج طلبات POST هذه الأنواع من البيانات في جسم الطلب، باستخدام إطار عمل مثل Express، ويمكنك قراءة بيانات x-www-form-urlencoded أو raw من جسم الطلب كالتالي: const express = require('express'); const bodyParser = require('body-parser'); const app = express(); // تمكين معالجة x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })); app.post('/api/users', (req, res) => { const { name, email, age } = req.body; // قم بإجراء الإجراءات اللازمة لإضافة المستخدم إلى قاعدة البيانات هنا res.send('تمت إضافة المستخدم بنجاح'); }); app.listen(3000, () => { console.log('الخادم يعمل على المنفذ 3000'); }); بينما يستخدم raw عادةً للبيانات التي لا يمكن تحويلها إلى سلسلة باستخدام رمز URL، أي في حال كنت تريد إرسال ملف إلى خادم، فتستطيع استخدام raw لتحويل الملف إلى سلسلة، وستبدوا السلسلة الناتجة كالتالي: <file content> أي في حال أننا نريد إرسال بيانات في تنسيق غير مشفر، مثل نص عادي (Plain Text) أو JSON أو XML. ولنفترض أنك ترغب في إرسال طلب POST لإضافة مستخدم جديد باستخدام تنسيق JSON، هنا نستخدم Raw لإرسال البيانات التالية: مثال URL: http://localhost:3000/api/users Body type: Raw واختيار JSON من القائمة المنسدلة البيانات (JSON): { "name": "John Doe", "email": "johndoe@example.com", "age": 30 } وبالمثل يتوجب معالجة طلبات POST لذلك النوع من البيانات في جسم الطلب باستخدام إطار عمل مثل Express، ويمكنك قراءة بيانات x-www-form-urlencoded أو raw من جسم الطلب كالتالي: const express = require('express'); const bodyParser = require('body-parser'); const app = express(); // تمكين معالجة JSON app.use(bodyParser.json()); app.post('/api/users', (req, res) => { const { name, email, age } = req.body; // قم بإجراء الإجراءات اللازمة لإضافة المستخدم إلى قاعدة البيانات هنا res.send('تمت إضافة المستخدم بنجاح'); }); app.listen(3000, () => { console.log('الخادم يعمل على المنفذ 3000'); });