Abdulrahman Muhammad

لحفظ ملف الكود الخاص بك بعد التعديل: يمكنك الضغط على CTRL + S أو من قائمة file ثم save.

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

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

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

من الممكن أن تجد وظيفة في مجال الشبكات بمجرد حصولك على شهادتي CCNA و CCNP، حتى لو لم تكن تملك شهادة جامعية. ولكن هناك بعض الأمور التي يجب أن تأخذها في الاعتبار: شهادات Cisco مثل CCNA وCCNP قوية ومعترف بها عالميًا، وتدل على أنك تمتلك معرفة تقنية حقيقية. بعض الشركات، قد تشترط وجود شهادة جامعية. لكن في المقابل، الكثير من الشركات تهتم بالمهارات والخبرة العملية أكثر من الشهادات الدراسية. المهارات المطلوبة لسوق العمل: أن تظهر أنك تفهم الشبكات جيدًا، وليس مجرد حفظ. أن تكون قادرًا على تطبيق ما تعلمته عمليًا باستخدام أدوات مثل: Cisco Packet Tracer لتعلم الأساسيات. أن تبني مشاريع صغيرة وتوثّقها، مثل: تصميم شبكة. إعدادات IP وVLAN وRouting. يوجد العديد من المسميات الوظيفة التي تندرج تحت network يمكنك البدأ بوظيفية مبتدأ أو Junior ومع الخبرة، يمكنك التدرّج بسرعة في هذا المجال.

عمل جيد ، ممتاز أنك أنجزت مشروع أوقات الصلاة باستخدام React. هذا هو الطريق الصحيح تطبيق المشاريع وتطور في الصعوبة والتقنيات حتى تنمو مهاراتك بعض الأفكار المناسبة لمستواك الحالي وتُساعدك على التعلم أكثر: 1. تطبيق تحويل العملات المستخدم يختار عملتين ويُدخل المبلغ. يظهر له السعر المحوّل مباشرة باستخدام API من الإنترنت. تتعلم فيه التعامل مع الـ API بشكل أعمق. 2. تطبيق مهام (To-Do List) مطوّر إضافة مهمة – تعديل – حذف – تعليم كمنتهية. استخدم طريقة لحفظ المهام مثل LocalStorage أو Firebase.. 3. مفكرة الأذكار اليومية كل يوم تُعرض لك أذكار جديدة. يُمكن التنقل بين الأذكار وحفظ المفضلة. التدرج في صعوبة المشاريع امر جيد يساعدك على تطوير مهاراتك نحو الأفضل.

عمل جيد ، ممتاز أنك أنجزت مشروع أوقات الصلاة باستخدام React. هذا هو الطريق الصحيح تطبيق المشاريع وتطور في الصعوبة والتقنيات حتى تنمو مهاراتك بعض الأفكار المناسبة لمستواك الحالي وتُساعدك على التعلم أكثر: 1. تطبيق تحويل العملات المستخدم يختار عملتين ويُدخل المبلغ. يظهر له السعر المحوّل مباشرة باستخدام API من الإنترنت. تتعلم فيه التعامل مع الـ API بشكل أعمق. 2. تطبيق مهام (To-Do List) مطوّر إضافة مهمة – تعديل – حذف – تعليم كمنتهية. استخدم طريقة لحفظ المهام مثل LocalStorage أو Firebase.. 3. مفكرة الأذكار اليومية كل يوم تُعرض لك أذكار جديدة. يُمكن التنقل بين الأذكار وحفظ المفضلة. التدرج في صعوبة المشاريع امر جيد يساعدك على تطوير مهاراتك نحو الأفضل.

شرح دالة map بشكل مفصل: map هي دالة تُستخدم مع المصفوفات (arrays)، وظيفتها أن تمرّ على كل عنصر في المصفوفة وتُرجع نسخة جديدة من المصفوفة بعد تعديل أو تحويل كل عنصر. مثال: عندك مجموعة أسماء: const names = ["أحمد", "سارة", "ليلى"]; وتريد أن تضيف أمام كل اسم كلمة "الأستاذ": const titles = names.map(name => "الأستاذ " + name); console.log(titles); النتيجة: ["الأستاذ أحمد", "الأستاذ سارة", "الأستاذ ليلى"] map مرت على كل اسم، وعدّلته، ثم رجعت مصفوفة جديدة فيها التعديل. مثال اخر: لنفترض أنك تريد عرض قائمة مدن: const cities = ["القاهرة", "الأسكندرية", "الجيزة"]; في React: <ul> {cities.map(city => <li>{city}</li>)} </ul> النتيجة في الصفحة: القاهرة الأسكندرية الجيزة لذا استخدامتها تكون في حالات مثل: إذا عندك مصفوفة وتريد تعديل أو إعادة عرض كل عنصر بشكل جديد وإخراج مصفوفة جديدة يمكنك استخدامها

أكيد ، كل من هذه الدوال مهمة لبعض العمليات داخل JavaScript 1. fetch تُستخدم لجلب بيانات من الإنترنت (API). fetch("https://api.example.com/data") يمكن استخدامها مع async/await أو .then لمعالجة البيانات بعد أن تصل. 2. json() تحوّل البيانات التي استلمناها من fetch إلى صيغة يمكن لجاڤا سكريبت فهمها، وهي كائنات JSON. const response = await fetch("https://api.example.com/data") const data = await response.json() response هو رد الموقع. response.json() يحوله إلى بيانات جاهزة للاستخدام مثل كائنات أو مصفوفات. 3. map تستخدم لتكرار عناصر المصفوفة وإعادة تشكيلها أو عرضها. const names = ["أحمد", "سارة", "ليلى"] names.map(name => console.log(name)) الناتج أحمد سارة ليلى

أكيد، لفهم افضل سنقوم بتقسيم كل جزء وشرحه بشكل منفصل: الاستيراد import Prayer from "./components" import React, { useEffect, useState } from "react" Prayer: مكون لعرض وقت الصلاة. useState و useEffect: أدوات من React لتخزين الحالة وتشغيل كود عند تغيير البيانات. المتغيرات والحالة const [prayerTimes, setPrayerTimes] = useState({}) const [dateTime, setDateTime] = useState("") const [citi, setCiti] = useState("Cairo") prayerTimes: يخزن أوقات الصلاة القادمة من API. dateTime: يخزن التاريخ القادم من نفس الـ API. citi: المدينة الحالية المختارة. المدن المتاحة const citys = [ {name: "القاهرة", value: "Cairo"}, {name: "الأسكندرية", value: "Alexandria"}, ... ] مصفوفة تحتوي على المدن التي يمكن اختيارها. جلب بيانات الصلاة useEffect(() => { const fetchPrayerTime = async () => { try { const response = await fetch(`https://api.aladhan.com/v1/timingsByCity/24-05-2025?city=Eg&country=${citi}`); const data_Prayar = await response.json() setPrayerTimes(data_Prayar.data.timings) setDateTime(data_Prayar.data.date.gregorian.date) } catch (error) { console.log(error) } } fetchPrayerTime() }, [citi]) كلما تغيّرت المدينة (citi)، يتم جلب بيانات جديدة من موقع aladhan.com. يتم حفظ أوقات الصلاة والتاريخ في الحالة (useState). تنسيق الوقت const formateTimes = (time) => { if (!time) return "00:00"; let [hours, minutes] = time.split(":").map(Number); const perd = hours >= 12 ? "PM" : "AM"; hours = hours % 12 || 12; return `${hours}:${minutes < 10 ? "0" + minutes : minutes} ${perd}`; } يحول الوقت من 24 ساعة إلى 12 ساعة مع AM/PM. واجهة المستخدم قائمة لاختيار المدينة. عرض التاريخ. عرض أوقات الصلاة باستخدام مكون Prayer. مثال على استخدام المكون Prayer: <Prayer name="الفجر" time={formateTimes(prayerTimes.Fajr)} /> يعرض اسم الصلاة ووقتها بعد تنسيقه.

حتى تجعل التاريخ يظهر بشكل تلقائي في تطبيق React، استخدم كود JavaScript لجلب التاريخ الحالي، ثم اعرضه بدل أن تكتبه يدويًا. استخدم كائن من نوع Date. استخرج اليوم والشهر والسنة. اضبط التاريخ ليظهر على الشكل يوم-شهر-سنة. اعرض التاريخ داخل عنصر <h4>. مثال: const today = new Date(); const day = String(today.getDate()).padStart(2, '0'); const month = String(today.getMonth() + 1).padStart(2, '0'); const year = today.getFullYear(); const formattedDate = `${day}-${month}-${year}`; في ملف JSX: <div className="date"> <h3>التاريخ</h3> <h4>{formattedDate}</h4> </div> وهكذا سيتم تحديث التاريخ تلقائيًا كل يوم بدون تدخل منك.

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

واضح أن المشكلة لديك ناتجة عن طريقة تعريف مكون Prayer. في الملف index.jsx داخل مجلد components، قمت بكتابة: export default function Prayer(name, time) { return ( <div> <p className="name-prayer">{name}</p> <p className="time-prayer">{time}</p> </div> ); } وهذا غير صحيح لأن مكونات React تستقبل الخصائص (props) كمُعطى واحد، وليس بشكل منفصل. الحل: قم بتعديل المكون ليبدو بهذا الشكل: export default function Prayer({ name, time }) { return ( <div> <p className="name-prayer">{name}</p> <p className="time-prayer">{time}</p> </div> ); } وبعدها في App.jsx، استخدمه هكذا: <Prayer name="الظهر" time="12:00 م" /> عند استدعاء <Prayer /> بدون تمرير خصائص، name و time سيكونان undefined. تأكد أن import Prayer from "./components" فعلاً يشير إلى index.jsx داخل مجلد components.

الفرق بين splice و filter في JavaScript بسيط لكنه مهم: splice: تستخدم لتعديل المصفوفة الأصلية مباشرة. هذه الدالة تُستخدم إذا كنت تريد تعديل المصفوفة الأصلية مباشرة، سواء بحذف عناصر أو إضافة عناصر في موقع معين داخلها. مثال: let numbers = [5, 10, 15, 20, 25]; numbers.splice(2, 1); // نحذف عنصراً واحداً من index رقم 2 console.log(numbers); // الناتج: [5, 10, 20, 25] filter: تستخدم لإنشاء مصفوفة جديدة، تحتوي فقط على العناصر التي تحقق شرط معين. لا تغير المصفوفة الأصلية. let arr = [1, 2, 3, 4]; let result = arr.filter(num => num > 2); console.log(result); // [3, 4] console.log(arr); // [1, 2, 3, 4]

لا يمكن القول إنك تعلمت React بالكامل بمجرد إنشاء تطبيق ملاحظات، حتى وإن أنجزته بنفسك وفهمت ما كتبته، لكن هذه خطوة ممتازة في طريقك للتعلّم. تطبيق مثل الملاحظات يُظهر أنك بدأت تفهم الأساسيات مثل المكونات (Components)، الحالة (State)، والتعامل مع الأحداث (Events)، وهذا مهم جدًا. لكن React فيها أمور أعمق تحتاج لتجارب أكثر، مثل: إدارة الحالة المتقدمة (Context أو Redux) التعامل مع واجهات API التنقل بين الصفحات (React Router) تحسين الأداء استمر في تنفيذ مشاريع مختلفة وتدرّج في الصعوبة، ومع الوقت ستصل إلى مستوى متقدم بإذن الله.

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

نعم، يمكن اعتبار OpenAI API نظامًا ثانويًا (Secondary System) في مخطط "Use Case" عندما يستخدم داخل نظام أكبر. النظام الثانوي هو نظام خارجي يدعم النظام الرئيسي، ولا يتفاعل المستخدم معه بشكل مباشر، بل يُستدعى لتنفيذ وظيفة محددة. مثال: إذا كنت تطوّر تطبيقًا لتلخيص المقالات الطويلة، ويعتمد هذا التطبيق على OpenAI API لأداء عملية التلخيص، فإن التطبيق هو النظام الأساسي، بينما OpenAI API هو نظام خارجي مساعد. في هذا السياق، يتم تمثيل OpenAI API كنظام ثانوي، وتكون العلاقة بينه وبين حالة الاستخدام «uses» لأن التطبيق يستخدمه لأداء وظيفة التلخيص.

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

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

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

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

عرض الأعمال (Portfolio) مهم جدًا، فهو يساعد الشركات وأصحاب العمل على رؤية مشاريعك وفهم مهاراتك بشكل واضح.وإذا تعرض أعمالك مثلGitHub أو Kaggle يعرضها بشكل مرتب بيكون أفضل ويعطي انطباع احترافي.

لكي تتمكن من رفع مشروع على GitHub والأستفادة من النسخة السحابية وتتمكن من مشاركة الملفات مع فريق العمل ومتابعة التحديثات الذي يقوم بها الفريق يمكنك اتباع الخطوات التالية: افتح موقع GitHub قم بإنشاء مستودع جديد (New Repository) قم بأختيار الأسم والوصف المناسب واضغط على إنشاء ثم يمكنك التحكم في المستودع وربطه مع النسخة المحلية باستخدام أوامر Git git init git add . git commit -m "رسالة توضح نوع العملية" git branch -M main git remote add origin https:رابط المشروع git push -u origin main وهل أذا رفعت المشرع على github وقمت بتعديله بعد رفعه سيعدل تلقائياً لا يقوم يقوم بالتحديث تلقائيا ، بل يجب عليك إعطائه بعض الأوامر في كل مرة تحتاج إلى تحديث ورفع النسخة المحلية إلى النسخة السحابية لكي يراها فريقك git add . git commit -m "رسالةتوضح نوع العملية" git push بهذه الطريقة يتم رفع التحديثات المحلية إلى النسخة السحابية انصحك بمعرفة الأوامر الخاصة ب Git عن طريق هذا المقال:

تعلم TypeScript لا يعني التخلي عن JavaScript فلكل منهما استخداماته وتفضيلاته TypeScript مبنية على JavaScript، وهي فقط تضيف لها ميزات إضافية. وتتفاعل مع HTML و CSS، بشكل طبيعي.

تستخدم كل من JavaScript وPHP في تطوير الواجهات الخلفية، لكن لكل منهما ميزاته وعيوبه. بعد احتراف JavaScript، قد لا تكون بحاجة لتعلّم PHP، خاصة إذا كنت تعمل بتقنيات JavaScript مثل Node.js لتطوير الخوادم. ومن أبرز مميزاتها أنها تُستخدم في الواجهة الأمامية والخلفية معًا، مما يزيد من فرص العمل بها في كثير من الشركات. أما تعلّم PHP فقد يكون مفيدًا إذا كنت تنوي العمل مع أنظمة إدارة المحتوى مثل WordPress، أو في بيئات تعتمد على PHP بشكل أساسي. يمكن أن تلاحظ التشابه بين JavaScript و TypeScript، لكن TS تتميز بعدة خصائص تجعل تعلمها مفيدًا، خصوصا في المشاريع المتقدمة: تحديد نوع المتغيرات يساعد في تقليل الأخطاء أثناء الكتابة. اكتشاف الأخطاء قبل تشغيل الكود، لأن TS يتحقق من الكود أثناء الكتابة. تنظيم أفضل في المشاريع الكبيرة، حيث تشجع على كتابة كود واضح ومنظم. إذا كنت ترغب ببدء تعلم TypeScript بسهولة، يمكنك الاطلاع على المقال المرفق الذي يشرح الأساسيات بطريقة بسيطة.