# مقدمة إلى لغات البرمجة وأدوات المطورين الحديثة
مرحبًا بك في عالم البرمجة المثير! ستقدم لك هذه الدرس المفاهيم الأساسية التي تشغل كل موقع إلكتروني، تطبيق، وتجربة رقمية تستخدمها يوميًا. ستكتشف ما هي لغات البرمجة، كيف تعمل، ولماذا تعتبر الأساس لعالمنا الرقمي.
قد تبدو البرمجة غامضة في البداية، لكن فكر فيها كتعلم لغة جديدة – لغة تمكنك من التواصل مع أجهزة الكمبيوتر وتحويل أفكارك الإبداعية إلى واقع. سواء كنت ترغب في بناء مواقع إلكترونية، إنشاء تطبيقات للهواتف المحمولة، أو أتمتة المهام اليومية، فإن فهم لغات البرمجة هو خطوتك الأولى نحو الإبداع الرقمي وحل المشكلات.
في هذا الدرس، ستتعرف على الأدوات الأساسية التي يستخدمها مطورو الويب الحديثون يوميًا. من محررات الأكواد التي تساعدك على كتابة أكواد نظيفة وفعالة إلى المتصفحات التي تمكنك من اختبار وتصحيح إبداعاتك، ستحصل على تجربة عملية مع نفس الأدوات الاحترافية التي يستخدمها المطورون في أفضل شركات التكنولوجيا حول العالم.
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
## اختبار ما قبل المحاضرة
[اختبار ما قبل المحاضرة](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
## ما الذي ستتعلمه
في هذه المقدمة الشاملة، ستكتشف:
- **ما هي البرمجة ولماذا هي مهمة** – فهم دور البرمجة في إنشاء الحلول الرقمية
- **أنواع لغات البرمجة واستخداماتها** – استكشاف عالم اللغات من JavaScript إلى Python
- **العناصر الأساسية للبرنامج** – تعلم اللبنات الأساسية التي تجعل الأكواد تعمل
- **البرمجيات الحديثة وأدوات المطورين المحترفين** – تجربة عملية مع نفس الأدوات المستخدمة في الصناعة
> 💡 **نصيحة للتعلم**: لا تقلق بشأن حفظ كل شيء! ركز على فهم المفاهيم – ستقوم بممارسة وتعزيز هذه الأفكار طوال المنهج الدراسي.
> يمكنك أخذ هذا الدرس على [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
## ما هي البرمجة؟
البرمجة (المعروفة أيضًا بالتشفير أو تطوير البرمجيات) هي عملية إنشاء تعليمات تخبر الكمبيوتر، الهاتف الذكي، أو أي جهاز رقمي بالضبط ماذا يفعل. فكر فيها ككتابة وصفة مفصلة للغاية – ولكن بدلاً من صنع الكوكيز، أنت تصنع مواقع إلكترونية، ألعاب، تطبيقات للهواتف المحمولة، أو حتى أنظمة التحكم في المنازل الذكية.
تُكتب هذه التعليمات بلغات خاصة تُسمى **لغات البرمجة**، والتي تعمل كجسر بين التفكير البشري ومعالجة الكمبيوتر. بينما يفهم الكمبيوتر فقط الأكواد الثنائية (1 و 0)، تسمح لنا لغات البرمجة بكتابة تعليمات بطريقة أكثر قابلية للقراءة والمنطق للبشر.
كل تجربة رقمية تتفاعل معها بدأت ككود شخص ما: تطبيق وسائل التواصل الاجتماعي الذي تتصفحه، نظام GPS الذي يوجه قيادتك، وحتى الآلة الحاسبة البسيطة على هاتفك. عندما تتعلم البرمجة، فإنك تتعلم إنشاء هذه الحلول الرقمية التي يمكن أن تحل مشاكل حقيقية وتجعل الحياة أسهل لملايين الأشخاص.
✅ **تحدي بحث سريع**: من يُعتبر أول مبرمج كمبيوتر في العالم؟ خذ لحظة للبحث عن هذا – قد تفاجئك الإجابة!
## لغات البرمجة
كما يتحدث البشر لغات مختلفة مثل الإنجليزية، الإسبانية، أو الماندرين، يمكن للكمبيوتر فهم لغات برمجة مختلفة. لكل لغة برمجة قواعدها الخاصة (قواعد النحو) وهي مصممة لأنواع معينة من المهام، مما يجعل بعض اللغات أكثر ملاءمة لبعض الوظائف من غيرها.
تعمل لغات البرمجة كمترجمين بين الأفكار البشرية وأفعال الكمبيوتر. إنها تسمح للمطورين بكتابة تعليمات قابلة للقراءة للبشر وقابلة للتنفيذ بواسطة الكمبيوتر. عندما تكتب كودًا بلغة برمجة، يقوم برنامج خاص بتحويل تعليماتك إلى الكود الثنائي الذي يفهمه الكمبيوتر بالفعل.
### لغات البرمجة الشهيرة واستخداماتها
| اللغة | الأفضل لـ | لماذا هي شائعة |
|-------|-----------|----------------|
| **JavaScript** | تطوير الويب، واجهات المستخدم | تعمل في المتصفحات وتشغل المواقع التفاعلية |
| **Python** | علوم البيانات، الأتمتة، الذكاء الاصطناعي | سهلة القراءة والتعلم، مكتبات قوية |
| **Java** | التطبيقات المؤسسية، تطبيقات أندرويد | مستقلة عن المنصة، قوية للأنظمة الكبيرة |
| **C#** | تطبيقات ويندوز، تطوير الألعاب | دعم قوي من نظام مايكروسوفت |
| **Go** | الخدمات السحابية، الأنظمة الخلفية | سريعة، بسيطة، مصممة للحوسبة الحديثة |
### لغات عالية المستوى مقابل لغات منخفضة المستوى
توجد لغات البرمجة على طيف من **اللغات منخفضة المستوى** (أقرب إلى كود الآلة) إلى **اللغات عالية المستوى** (أقرب إلى اللغة البشرية):
- **اللغات منخفضة المستوى** (مثل Assembly أو C) تتطلب خطوات ترجمة أقل ولكنها أصعب على البشر للقراءة والكتابة
- **اللغات عالية المستوى** (مثل JavaScript، Python، أو C#) أكثر قابلية للقراءة ولديها مجتمعات أكبر، مما يجعلها مثالية لمعظم التطوير الحديث
> 💡 **فكر في الأمر بهذه الطريقة**: اللغات منخفضة المستوى مثل التحدث مباشرة إلى الكمبيوتر بلغته الأصلية، بينما اللغات عالية المستوى مثل وجود مترجم ماهر يترجم لغتك اليومية إلى لغة الكمبيوتر.
### مقارنة لغات البرمجة في العمل
لتوضيح الفرق بين اللغات عالية المستوى ومنخفضة المستوى، دعونا ننظر إلى نفس المهمة مكتوبة بطريقتين مختلفتين. كلا المثالين أدناه يولدان سلسلة فيبوناتشي الشهيرة (حيث كل رقم هو مجموع الرقمين السابقين: 0، 1، 1، 2، 3، 5، 8، 13، 21، 34...).
**لغة عالية المستوى (JavaScript) – سهلة الفهم للبشر:**
```javascript
// Step 1: Basic Fibonacci setup
const fibonacciCount = 10;
let current = 0;
let next = 1;
console.log('Fibonacci sequence:');
```
**ما الذي يفعله هذا الكود:**
- **إعلان** ثابت لتحديد عدد أرقام فيبوناتشي التي نريد توليدها
- **تهيئة** متغيرين لتتبع الرقم الحالي والرقم التالي في السلسلة
- **تعيين** القيم الابتدائية (0 و 1) التي تحدد نمط فيبوناتشي
- **عرض** رسالة رأسية لتحديد الناتج الخاص بنا
```javascript
// Step 2: Generate the sequence with a loop
for (let i = 0; i < fibonacciCount; i++) {
console.log(`Position ${i + 1}: ${current}`);
// Calculate next number in sequence
const sum = current + next;
current = next;
next = sum;
}
```
**تفصيل ما يحدث هنا:**
- **التكرار** عبر كل موقع في السلسلة باستخدام حلقة `for`
- **عرض** كل رقم مع موقعه باستخدام تنسيق القالب النصي
- **حساب** الرقم التالي في سلسلة فيبوناتشي عن طريق جمع القيم الحالية والتالية
- **تحديث** متغيرات التتبع للانتقال إلى التكرار التالي
```javascript
// Step 3: Modern functional approach
const generateFibonacci = (count) => {
const sequence = [0, 1];
for (let i = 2; i < count; i++) {
sequence[i] = sequence[i - 1] + sequence[i - 2];
}
return sequence;
};
// Usage example
const fibSequence = generateFibonacci(10);
console.log(fibSequence);
```
**فيما سبق، قمنا بـ:**
- **إنشاء** وظيفة قابلة لإعادة الاستخدام باستخدام صيغة وظيفة السهم الحديثة
- **بناء** مصفوفة لتخزين السلسلة الكاملة بدلاً من عرضها واحدة تلو الأخرى
- **استخدام** فهرسة المصفوفة لحساب كل رقم جديد من القيم السابقة
- **إرجاع** السلسلة الكاملة لاستخدامها بشكل مرن في أجزاء أخرى من البرنامج
**لغة منخفضة المستوى (ARM Assembly) – سهلة الفهم للكمبيوتر:**
```assembly
area ascen,code,readonly
entry
code32
adr r0,thumb+1
bx r0
code16
thumb
mov r0,#00
sub r0,r0,#01
mov r1,#01
mov r4,#10
ldr r2,=0x40000000
back add r0,r1
str r0,[r2]
add r2,#04
mov r3,r0
mov r0,r1
mov r1,r3
sub r4,#01
cmp r4,#00
bne back
end
```
لاحظ كيف أن نسخة JavaScript تقرأ تقريبًا كتعليمات باللغة الإنجليزية، بينما تستخدم نسخة Assembly أوامر مشفرة تتحكم مباشرة في معالج الكمبيوتر. كلاهما يحقق نفس المهمة بالضبط، لكن اللغة عالية المستوى أسهل بكثير للبشر لفهمها وكتابتها وصيانتها.
**الاختلافات الرئيسية التي ستلاحظها:**
- **سهولة القراءة**: JavaScript تستخدم أسماء وصفية مثل `fibonacciCount` بينما تستخدم Assembly تسميات مشفرة مثل `r0`، `r1`
- **التعليقات**: اللغات عالية المستوى تشجع على التعليقات التوضيحية التي تجعل الكود واضحًا بذاته
- **الهيكل**: التدفق المنطقي لـ JavaScript يتطابق مع كيفية تفكير البشر في المشكلات خطوة بخطوة
- **الصيانة**: تحديث نسخة JavaScript لمتطلبات مختلفة أمر بسيط وواضح
✅ **سلسلة فيبوناتشي** [تعرف](https://en.wikipedia.org/wiki/Fibonacci_number) على أنها مجموعة من الأرقام حيث كل رقم هو مجموع الرقمين السابقين، بدءًا من 0 و 1. يظهر هذا النمط الرياضي بشكل متكرر في الطبيعة، من بتلات الزهور إلى الأصداف الحلزونية!
## عناصر البرنامج
الآن بعد أن فهمت ما هي لغات البرمجة، دعونا نستكشف اللبنات الأساسية التي تشكل أي برنامج. فكر في هذه العناصر كقواعد ونحو البرمجة – بمجرد أن تفهم هذه المفاهيم، ستتمكن من قراءة وكتابة الأكواد بأي لغة.
### العبارات: التعليمات الأساسية
**العبارة** هي تعليمات واحدة في البرنامج، مثل الجملة في اللغة البشرية. كل عبارة تخبر الكمبيوتر بتنفيذ إجراء معين. تمامًا كما تنتهي الجمل بالنقاط، تحتوي العبارات على طرق محددة للإشارة إلى مكان انتهاء التعليمات وبدء التعليمات التالية (يختلف هذا حسب لغة البرمجة).
```javascript
// Basic statements that perform single actions
const userName = "Alex";
console.log("Hello, world!");
const sum = 5 + 3;
```
**ما الذي يفعله هذا الكود:**
- **إعلان** متغير ثابت لتخزين اسم المستخدم
- **عرض** رسالة ترحيب في مخرجات وحدة التحكم
- **حساب** وتخزين نتيجة عملية رياضية
```javascript
// Statements that interact with web pages
document.title = "My Awesome Website";
document.body.style.backgroundColor = "lightblue";
```
**خطوة بخطوة، ما الذي يحدث:**
- **تعديل** عنوان صفحة الويب الذي يظهر في علامة تبويب المتصفح
- **تغيير** لون الخلفية لكامل الصفحة
### المتغيرات: تخزين المعلومات
**المتغيرات** مثل الحاويات المسمّاة التي تحتفظ بالمعلومات التي يحتاجها البرنامج لتذكرها. تمامًا كما قد تكتب قائمة تسوق على ورقة وتعود إليها، تسمح المتغيرات للبرامج بتخزين البيانات واستخدامها لاحقًا. تحتوي المتغيرات على أسماء فريدة ويمكن أن تتغير محتوياتها أثناء تشغيل البرنامج.
```javascript
// Step 1: Creating basic variables
const siteName = "Weather Dashboard";
let currentWeather = "sunny";
let temperature = 75;
let isRaining = false;
```
**فهم هذه المفاهيم:**
- **تخزين** القيم الثابتة في متغيرات `const` (مثل اسم الموقع)
- **استخدام** `let` للقيم التي يمكن أن تتغير خلال البرنامج
- **تعيين** أنواع بيانات مختلفة: نصوص، أرقام، وقيم منطقية (صحيح/خطأ)
- **اختيار** أسماء وصفية تشرح ما يحتويه كل متغير
```javascript
// Step 2: Working with objects to group related data
const weatherData = {
location: "San Francisco",
humidity: 65,
windSpeed: 12
};
```
**فيما سبق، قمنا بـ:**
- **إنشاء** كائن لتجميع معلومات الطقس ذات الصلة معًا
- **تنظيم** عدة أجزاء من البيانات تحت اسم متغير واحد
- **استخدام** أزواج المفتاح والقيمة لتسمية كل جزء من المعلومات بوضوح
```javascript
// Step 3: Using and updating variables
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`Wind speed: ${weatherData.windSpeed} mph`);
// Updating changeable variables
currentWeather = "cloudy";
temperature = 68;
```
**لنستوعب كل جزء:**
- **عرض** المعلومات باستخدام القوالب النصية مع صيغة `${}`
- **الوصول** إلى خصائص الكائن باستخدام تدوين النقطة (`weatherData.windSpeed`)
- **تحديث** المتغيرات المعلنة باستخدام `let` لتعكس الظروف المتغيرة
- **دمج** عدة متغيرات لإنشاء رسائل ذات معنى
```javascript
// Step 4: Modern destructuring for cleaner code
const { location, humidity } = weatherData;
console.log(`${location} humidity: ${humidity}%`);
```
**ما تحتاج إلى معرفته:**
- **استخراج** خصائص محددة من الكائنات باستخدام تعيين التفكيك
- **إنشاء** متغيرات جديدة تلقائيًا بنفس أسماء مفاتيح الكائن
- **تبسيط** الكود بتجنب التكرار في تدوين النقطة
### تدفق التحكم: اتخاذ القرارات
غالبًا ما تحتاج البرامج إلى اتخاذ قرارات بناءً على مواقف مختلفة. **عبارات تدفق التحكم** (مثل `if...else`) تسمح للبرامج باختيار مسارات مختلفة، مما يجعلها ذكية ومستجيبة للظروف المتغيرة.
```javascript
// Step 1: Basic conditional logic
const userAge = 17;
if (userAge >= 18) {
console.log("You can vote!");
} else {
const yearsToWait = 18 - userAge;
console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
}
```
**ما الذي يفعله هذا الكود:**
- **التحقق** مما إذا كان عمر المستخدم يلبي متطلبات التصويت
- **تنفيذ** كتل كود مختلفة بناءً على نتيجة الشرط
- **حساب** وعرض المدة المتبقية حتى أهلية التصويت إذا كان العمر أقل من 18
- **تقديم** ملاحظات محددة ومفيدة لكل سيناريو
```javascript
// Step 2: Multiple conditions with logical operators
const userAge = 17;
const hasPermission = true;
if (userAge >= 18 && hasPermission) {
console.log("Access granted: You can enter the venue.");
} else if (userAge >= 16) {
console.log("You need parent permission to enter.");
} else {
console.log("Sorry, you must be at least 16 years old.");
}
```
**تفصيل ما يحدث هنا:**
- **دمج** شروط متعددة باستخدام المشغل `&&` (و)
- **إنشاء** تسلسل هرمي للشروط باستخدام `else if` لعدة سيناريوهات
- **التعامل** مع جميع الحالات الممكنة باستخدام عبارة `else` النهائية
- **تقديم** ملاحظات واضحة وقابلة للتنفيذ لكل حالة مختلفة
```javascript
// Step 3: Concise conditional with ternary operator
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
console.log(`Status: ${votingStatus}`);
```
**ما تحتاج إلى تذكره:**
- **استخدام** المشغل الثلاثي (`? :`) للظروف ذات الخيارين البسيطين
- **كتابة** الشرط أولاً، متبوعًا بـ `?`، ثم النتيجة الصحيحة، ثم `:`، ثم النتيجة الخاطئة
- **تطبيق** هذا النمط عندما تحتاج إلى تعيين قيم بناءً على الظروف
```javascript
// Step 4: Handling multiple specific cases
const dayOfWeek = "Tuesday";
switch (dayOfWeek) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
console.log("It's a weekday - time to work!");
break;
case "Saturday":
case "Sunday":
console.log("It's the weekend - time to relax!");
break;
default:
console.log("Invalid day of the week");
}
```
**هذا الكود يحقق ما يلي:**
- **مطابقة** قيمة المتغير مع حالات محددة متعددة
- **تجميع** الحالات المتشابهة معًا (أيام الأسبوع مقابل عطلات نهاية الأسبوع)
- **تنفيذ** كتلة الكود المناسبة عند العثور على تطابق
- **تضمين** حالة `default` للتعامل مع القيم غير المتوقعة
- **استخدام** عبارات `break` لمنع الكود من الاستمرار إلى الحالة التالية
> 💡 **تشبيه واقعي**: فكر في تدفق التحكم مثل GPS يقدم لك الاتجاهات. قد يقول "إذا كان هناك ازدحام في شارع Main، خذ الطريق السريع بدلاً من ذلك." تستخدم البرامج نفس نوع المنطق الشرطي للاستجابة للمواقف المختلفة.
✅ **القادم**: ستتعمق أكثر في هذه المفاهيم وتتعلم كيفية استخدامها بفعالية في الدروس القادمة. لا تقلق بشأن حفظ كل شيء الآن – ركز على فهم الصورة الكبيرة!
## أدوات العمل
تمامًا كما يحتاج النجار إلى أدوات عالية الجودة لبناء أثاث جميل، يعتمد مطورو الويب على برامج متخصصة وطرق عمل لإنشاء تجارب رقمية مذهلة. في هذا القسم، ستكتشف الأدوات الأساسية التي يستخدمها المطورون المحترفون يوميًا – وأفضل جزء هو أن العديد من هذه الأدوات القوية مجانية تمامًا!
لقد تحول مشهد تطوير الويب الحديث بفضل أدوات مبتكرة مثل مساعدي الأكواد المدعومين بالذكاء الاصطناعي (مثل GitHub Copilot)، بيئات التطوير السحابية، وأدوات التصحيح المتقدمة. جعلت هذه التقنيات تعلم البرمجة وبناء التطبيقات الاحترافية أسهل من أي وقت مضى.
مع تقدمك في رحلتك لتطوير الويب، ستكتشف أن امتلاك الأدوات المناسبة يمكن أن يحسن إنتاجيتك بشكل كبير، يساعدك على اكتشاف الأخطاء قبل أن تصبح مشاكل، ويجعل البرمجة أكثر متعة وكفاءة.
### محررات الأكواد وبيئات التطوير المتكاملة: ورشة عملك الرقمية
فكر في محرر الأكواد كأنه ورشة عملك الرقمية – إنه المكان الذي ستقضي فيه معظم وقتك في صياغة، اختبار، وتحسين أكوادك. المحررات الحديثة وبيئات التطوير المتكاملة (IDEs) أكثر بكثير من مجرد محررات نصوص بسيطة؛ إنها مساعدين أذكياء يساعدونك على كتابة أكواد أفضل بشكل أسرع.
**ما الذي يجعل المحررات الحديثة قوية جدًا؟**
توفر محررات الأكواد الحديثة مجموعة مذهلة من الميزات المصممة لتعزيز إنتاجيتك:
| الميزة | ما تقوم به | لماذا تساعد |
|--------|------------|-------------|
| **تمييز بناء الجملة** | تلوين أجزاء مختلفة من الكود | يجعل الكود أسهل للقراءة ويساعد في اكتشاف الأخطاء |
| **الإكمال التلقائي** | يقترح الكود أثناء الكتابة | يسرّع عملية البرمجة ويقلل الأخطاء الإملائية |
| **أدوات التصحيح** | تساعدك في العثور على الأخطاء وإصلاحها | توفر ساعات من وقت استكشاف الأخطاء وإصلاحها |
| **الإضافات** | تضيف ميزات متخصصة | تخصيص المحرر لأي تقنية |
| **المساعدين الذكيين (AI Assistants)** | تقترح الكود وتقدم شروحات | تسرّع التعلم والإنتاجية |
> 🎥 **مصدر فيديو**: هل تريد رؤية هذه الأدوات أثناء العمل؟ تحقق من هذا [فيديو أدوات العمل](https://youtube.com/watch?v=69WJeXGBdxg) للحصول على نظرة شاملة.
#### المحررات الموصى بها لتطوير الويب
**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (مجاني)
- الأكثر شعبية بين مطوري الويب
- نظام إضافات ممتاز
- محطة مدمجة وتكامل مع Git
- **الإضافات الضرورية**:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - اقتراحات كود مدعومة بالذكاء الاصطناعي
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - التعاون في الوقت الفعلي
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - تنسيق الكود تلقائيًا
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - اكتشاف الأخطاء الإملائية في الكود
**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (مدفوع، مجاني للطلاب)
- أدوات متقدمة للتصحيح والاختبار
- إكمال الكود الذكي
- التحكم في الإصدارات مدمج
**بيئات التطوير السحابية** (تسعير متنوع)
- [GitHub Codespaces](https://github.com/features/codespaces) - كامل VS Code في المتصفح
- [Replit](https://replit.com/) - رائع للتعلم ومشاركة الكود
- [StackBlitz](https://stackblitz.com/) - تطوير ويب كامل وفوري
> 💡 **نصيحة للبدء**: ابدأ بـ Visual Studio Code – فهو مجاني، ويستخدم على نطاق واسع في الصناعة، وله مجتمع ضخم يقدم دروسًا وإضافات مفيدة.
### متصفحات الويب: مختبر الاختبار الخاص بك
المتصفحات ليست مجرد أدوات لتصفح الإنترنت – إنها بيئات تطوير متقدمة تساعدك على بناء واختبار وتحسين تطبيقات الويب. كل متصفح حديث يتضمن أدوات مطور قوية (DevTools) توفر رؤى عميقة حول أداء الكود الخاص بك.
**لماذا المتصفحات ضرورية لتطوير الويب:**
عندما تنشئ موقعًا أو تطبيق ويب، تحتاج إلى رؤية كيف يبدو ويتصرف في العالم الحقيقي. المتصفحات لا تعرض عملك فقط، بل تقدم أيضًا ملاحظات تفصيلية حول الأداء، إمكانية الوصول، والمشكلات المحتملة.
#### أدوات مطور المتصفح (DevTools)
تتضمن المتصفحات الحديثة مجموعات تطوير شاملة:
| فئة الأداة | ما تقوم به | مثال على الاستخدام |
|------------|------------|--------------------|
| **مفتش العناصر** | عرض وتعديل HTML/CSS في الوقت الفعلي | تعديل التصميم لرؤية النتائج فورًا |
| **الكونسول** | عرض رسائل الخطأ واختبار JavaScript | تصحيح المشكلات وتجربة الكود |
| **مراقب الشبكة** | تتبع كيفية تحميل الموارد | تحسين الأداء وأوقات التحميل |
| **مدقق إمكانية الوصول** | اختبار التصميم الشامل | ضمان عمل الموقع لجميع المستخدمين |
| **محاكي الأجهزة** | معاينة على أحجام شاشات مختلفة | اختبار التصميم المتجاوب دون الحاجة إلى أجهزة متعددة |
#### المتصفحات الموصى بها للتطوير
- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - أدوات تطوير قياسية في الصناعة مع وثائق شاملة
- **[Firefox](https://developer.mozilla.org/docs/Tools)** - أدوات ممتازة لشبكة CSS وإمكانية الوصول
- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - مبني على Chromium مع موارد تطوير من Microsoft
> ⚠️ **نصيحة اختبار مهمة**: اختبر دائمًا مواقعك في متصفحات متعددة! ما يعمل بشكل مثالي في Chrome قد يبدو مختلفًا في Safari أو Firefox. يختبر المطورون المحترفون عبر جميع المتصفحات الرئيسية لضمان تجربة مستخدم متسقة.
### أدوات سطر الأوامر: بوابة المستخدم المتقدم
قد يبدو سطر الأوامر (المعروف أيضًا بالمحطة أو الصدفة) مخيفًا في البداية – إنه مجرد شاشة سوداء مع نص! لكن لا تدع مظهره البسيط يخدعك. سطر الأوامر هو أحد أقوى الأدوات في مجموعة أدوات المطور، مما يتيح لك تنفيذ مهام معقدة باستخدام أوامر نصية بسيطة.
**لماذا يحب المطورون سطر الأوامر:**
بينما الواجهات الرسومية رائعة للعديد من المهام، يتفوق سطر الأوامر في الأتمتة، الدقة، والسرعة. تعمل العديد من أدوات التطوير بشكل أساسي من خلال واجهات سطر الأوامر، وتعلم استخدامها بكفاءة يمكن أن يحسن إنتاجيتك بشكل كبير.
```bash
# Step 1: Create and navigate to project directory
mkdir my-awesome-website
cd my-awesome-website
```
**ما يقوم به هذا الكود:**
- **إنشاء** دليل جديد يسمى "my-awesome-website" لمشروعك
- **التنقل** إلى الدليل الذي تم إنشاؤه حديثًا لبدء العمل
```bash
# Step 2: Initialize project with package.json
npm init -y
# Install modern development tools
npm install --save-dev vite prettier eslint
npm install --save-dev @eslint/js
```
**خطوة بخطوة، ما يحدث:**
- **تهيئة** مشروع Node.js جديد بإعدادات افتراضية باستخدام `npm init -y`
- **تثبيت** Vite كأداة بناء حديثة لتطوير سريع وبناء الإنتاج
- **إضافة** Prettier لتنسيق الكود تلقائيًا و ESLint لفحص جودة الكود
- **استخدام** علامة `--save-dev` لتحديد هذه كاعتماديات خاصة بالتطوير فقط
```bash
# Step 3: Create project structure and files
mkdir src assets
echo 'My SiteHello World
' > index.html
# Start development server
npx vite
```
**في الأعلى، قمنا بـ:**
- **تنظيم** مشروعنا عن طريق إنشاء مجلدات منفصلة للكود المصدر والموارد
- **إنشاء** ملف HTML أساسي مع هيكل وثيقة مناسب
- **بدء** خادم تطوير Vite لإعادة التحميل المباشر واستبدال الوحدات الساخنة
#### أدوات سطر الأوامر الأساسية لتطوير الويب
| الأداة | الغرض | لماذا تحتاجها |
|--------|-------|---------------|
| **[Git](https://git-scm.com/)** | التحكم في الإصدارات | تتبع التغييرات، التعاون مع الآخرين، نسخ احتياطي لعملك |
| **[Node.js & npm](https://nodejs.org/)** | تشغيل JavaScript وإدارة الحزم | تشغيل JavaScript خارج المتصفحات، تثبيت أدوات التطوير الحديثة |
| **[Vite](https://vitejs.dev/)** | أداة بناء وخادم تطوير | تطوير سريع للغاية مع استبدال الوحدات الساخنة |
| **[ESLint](https://eslint.org/)** | جودة الكود | العثور على المشكلات في JavaScript وإصلاحها تلقائيًا |
| **[Prettier](https://prettier.io/)** | تنسيق الكود | الحفاظ على تنسيق الكود بشكل متسق وقابل للقراءة |
#### خيارات خاصة بالنظام الأساسي
**Windows:**
- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - محطة حديثة وغنية بالميزات
- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - بيئة برمجة قوية
- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - سطر أوامر Windows التقليدي
**macOS:**
- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - تطبيق المحطة المدمج
- **[iTerm2](https://iterm2.com/)** - محطة محسنة بميزات متقدمة
**Linux:**
- **[Bash](https://www.gnu.org/software/bash/)** 💻 - الصدفة القياسية لنظام Linux
- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - محاكي محطة متقدم
> 💻 = مثبت مسبقًا على نظام التشغيل
> 🎯 **مسار التعلم**: ابدأ بالأوامر الأساسية مثل `cd` (تغيير الدليل)، `ls` أو `dir` (عرض الملفات)، و `mkdir` (إنشاء مجلد). تدرب على أوامر سير العمل الحديثة مثل `npm install`، `git status`، و `code .` (يفتح الدليل الحالي في VS Code). مع تقدمك، ستتعلم بشكل طبيعي المزيد من الأوامر المتقدمة وتقنيات الأتمتة.
### التوثيق: بوصلتك للتعلم
التوثيق يشبه وجود مرشد معرفي متاح على مدار الساعة. عندما تواجه مفاهيم جديدة، تحتاج لفهم كيفية عمل أداة، أو ترغب في استكشاف ميزات متقدمة، يصبح التوثيق عالي الجودة خارطة طريقك للنجاح.
**لماذا التوثيق مهم:**
يقضي المطورون المحترفون جزءًا كبيرًا من وقتهم في قراءة التوثيق – ليس لأنهم لا يعرفون ما يفعلونه، ولكن لأن مشهد تطوير الويب يتطور بسرعة كبيرة بحيث يتطلب البقاء على اطلاع دائم التعلم المستمر. يساعدك التوثيق الجيد على فهم ليس فقط *كيفية* استخدام شيء ما، ولكن أيضًا *لماذا* و *متى* تستخدمه.
#### موارد التوثيق الأساسية
**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
- المعيار الذهبي لتوثيق تقنيات الويب
- أدلة شاملة لـ HTML، CSS، و JavaScript
- يتضمن معلومات توافق المتصفح
- يحتوي على أمثلة عملية وعروض تفاعلية
**[Web.dev](https://web.dev)** (من Google)
- أفضل ممارسات تطوير الويب الحديث
- أدلة تحسين الأداء
- مبادئ التصميم الشامل وإمكانية الوصول
- دراسات حالة من مشاريع العالم الحقيقي
**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
- موارد تطوير متصفح Edge
- أدلة تطبيقات الويب التقدمية
- رؤى تطوير عبر الأنظمة الأساسية
**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
- مناهج تعليمية منظمة
- دورات فيديو من خبراء الصناعة
- تمارين برمجة عملية
> 📚 **استراتيجية الدراسة**: لا تحاول حفظ التوثيق – بدلاً من ذلك، تعلم كيفية التنقل فيه بكفاءة. ضع إشارات مرجعية للمراجع التي تستخدمها بشكل متكرر وتمرن على استخدام وظائف البحث للعثور على معلومات محددة بسرعة.
✅ **تمرين التفكير**: فكر في كيفية اختلاف أدوات تطوير الويب عن أدوات تصميم الويب. ضع في اعتبارك كيف تختلف ميزات إمكانية الوصول، قدرات التصميم المتجاوب، وعمليات العمل التعاونية بين الدورين. سيساعدك هذا التحليل على فهم النظام البيئي الأوسع لإنشاء الويب!
## تحدي GitHub Copilot Agent 🚀
استخدم وضع الوكيل لإكمال التحدي التالي:
**الوصف:** استكشف ميزات محرر الكود أو بيئة التطوير الحديثة وأظهر كيف يمكن أن تحسن سير عملك كمطور ويب.
**المهمة:** اختر محرر كود أو بيئة تطوير (مثل Visual Studio Code، WebStorm، أو بيئة تطوير سحابية). قم بتحديد ثلاث ميزات أو إضافات تساعدك في كتابة، تصحيح، أو صيانة الكود بكفاءة. لكل ميزة، قدم شرحًا موجزًا لكيفية تحسينها لسير عملك.
---
## 🚀 التحدي
**استكشاف تنوع لغات البرمجة**
الآن بعد أن فهمت أساسيات لغات البرمجة، تعمق أكثر في خصائصها واستخداماتها الفريدة. اختر ثلاث لغات برمجة من فئات مختلفة (مثل تطوير الويب، تطوير التطبيقات المحمولة، علم البيانات، برمجة الأنظمة) وابحث عن ميزاتها المميزة.
**مهمتك:**
1. **قارن أنماط بناء الجملة**: ابحث عن نفس المهمة البسيطة (مثل إنشاء متغير أو طباعة "Hello World") مكتوبة بلغاتك المختارة
2. **حدد نقاط القوة الفريدة**: ما الذي يجعل كل لغة مميزة؟ ما المشكلات التي صُممت لحلها؟
3. **استكشف المجتمعات**: انظر إلى حجم ونشاط مجتمع المطورين لكل لغة
4. **فكر في مسارات التعلم**: أي لغة تبدو أكثر سهولة للمبتدئين، ولماذا؟
**تحدي إضافي**: حاول العثور على أمثلة لمواقع ويب، تطبيقات، أو أنظمة رئيسية تم بناؤها بكل لغة. قد تتفاجأ بما يدعم تجاربك الرقمية المفضلة!
> 💡 **نصيحة للتعلم**: لا تقلق بشأن فهم جميع تفاصيل بناء الجملة – ركز على التعرف على الأنماط والاختلافات في كيفية تعامل كل لغة مع حل المشكلات.
## اختبار ما بعد المحاضرة
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/)
## المراجعة والدراسة الذاتية
**تعميق الفهم**
خذ وقتًا لاستكشاف المفاهيم التي تعلمتها من خلال التعمق في الأدوات واللغات التي تثير اهتمامك أكثر:
**استكشاف لغات البرمجة:**
- قم بزيارة المواقع الرسمية لـ 2-3 لغات برمجة تم ذكرها في هذا الدرس
- جرب منصات البرمجة عبر الإنترنت مثل [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/)، أو [Replit](https://replit.com/) لتجربة كتابة أكواد بسيطة
- اقرأ عن تاريخ ومطوري لغة البرمجة المفضلة لديك – فهم "السبب" وراء تصميم اللغة يساعدك على استخدامها بشكل أكثر فعالية
**التعرف على الأدوات:**
- قم بتنزيل وتثبيت Visual Studio Code (إذا لم تكن قد فعلت ذلك بالفعل)
- استكشف سوق الإضافات وقم بتثبيت بعض الإضافات الموصى بها
- افتح أدوات المطور في متصفحك واقضِ بضع دقائق في استكشاف علامات التبويب والميزات المختلفة
**الاتصال بالمجتمع:**
- تابع مجتمعات المطورين على منصات مثل [Dev.to](https://dev.to/)، [Stack Overflow](https://stackoverflow.com/)، أو [GitHub](https://github.com/)
- شاهد مقاطع فيديو برمجة سهلة الفهم للمبتدئين على YouTube أو منصات تعليم البرمجة
- فكر في الانضمام إلى اللقاءات المحلية أو المجتمعات عبر الإنترنت التي تركز على تطوير الويب
> 🎯 **تذكر**: الهدف ليس إتقان كل شيء على الفور، بل بناء معرفة بالأدوات والمفاهيم التي ستواجهها أثناء مواصلة تعلم تطوير الويب.
## الواجب
[قراءة التوثيقات](assignment.md)
> ملاحظة: عند اختيار الأدوات لمهمتك، لا تختار المحررات أو المتصفحات أو أدوات سطر الأوامر المذكورة أعلاه بالفعل. ركز على الأدوات الحالية، المستخدمة على نطاق واسع، والتي تحظى بدعم قوي من المجتمع أو الدعم الرسمي.
---
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.