سامح أشرف

كل دورة من دورات حسوب تتكون من عدد من ساعات الفيديو التدريبية، على سبيل المثال دورة تطوير واجهات المستخدم لديها 58 ساعة فيديو تدريبية، ودورة تطوير التطبيقات باستخدام لغة JavaScript لديها أكثر من 55 ساعة فيديو تدريبية، ويمكنك معرفة عدد ساعات كل دورة من خلال الصفحة الخاصة بالدورة نفسها.

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

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

برنامج Office Word هو برنامج منفصل بحد ذاته، ولا يمكن دمجه في برامج أخرى للكثير من الأسباب، منها أنه مدفوع وليس مجاني، مغلق المصدر ولا يمكن لأحد التعديل عليه سوى شركة مايكروسوفت، واللغة المستعملة في إنشائه ليست JavaScript ... إلخ.

ولكن كبديل يوجد العديد من المكتبات التي تسمح لك بإنشاء محرر نصوص بإستخدام HTML و JavaScript، منها:

• ckeditor
• tiny
• editorjs
• quilljs

كل المحررات السابقة مبنية بإستخدام JavaScript ويمكن إستخدامها في تطبيقات Electron بدون مشكلة. كما أن كلًا منهم يوفر توثيق Documentation كامل لكيفية تثبيته وإستخدامه والتعديل عليه.

يمكنك إستعمال التابع getrandbits للحصول على bit (صفر أو 1) وتحويله إلى قيمة منطقية Boolean من خلال الدالة bool:

import random

# Generate Random Boolean
value = bool(random.getrandbits(1))
print(value)

هذه الطريقة أسرع بكثير من أغلب الطرق الأخرى، ومن الأفضل إستعمالها إن كنت تريد توليد الكثير من القيم العشوائية، بدلًا من إستعمال random.choice([True, False]) في كل مرة.

في البداية عليك إختيار إحدى بوابات الدفع، مثل (بوابات دفع عالمية) Stripe و Skrill و (بوابات دفع عربية) payfort و Paymob و PaySky و kashier ... إلخ، وبعد إختيار بوابة الدفع، يجب التواصل معهم ومعرفة كيف تتم عملية إدارة المدفوعات والأوراق المطلوبة للإشتراك في بوابة الدفع وإستخدامها في موقعك. كما ستجد هنا قائمة بالعشرات من بوابات الدفع (بعضها لا يدعم بعض الدول العربية).

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

في كثير من الأحيان لا يمكن للمتصفح الوصول إلى الملفات المخزننة محليًا، لذلك ستجد أن كل ملف CSS و JavaScript والصور والفيديوهات لا تعمل عن فتح ملف html في المتصفح مباشرة، ويمكن حل هذه المشكلة بأكثر من طريقة، منها:

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

  ngrok http "file:///C:/Users/Pc/Desktop/window"

  عليك فقط تغير المسار الموجود في الأمر السابق ليصبح مسار مجلد المشروع الخاص بك، ثم ستحصل على عنوان مثل https://80b9-197-26-21-120.eu.ngrok.io

يمكنك تحميل PostgreSQL 14.5 من خلال هذا الرابط مباشرة (من هنا، إن أردت تحميل إصدار مختلف أو لنظام تشغيل مختلف، فيمكنك زيارة صفحة التحميل من هنا.

ملاحظة: إن كان سؤال متعلق بأحد الدروس في إحدى الدورات، فأرجو منك أن تقوم بترك تعليق أسفل الدرس بدلًا من نشر سؤال في الأسئلة العامة.

عند تشغيل السكريبت سيتم إستدعاء الدالة f وسيتم إضافة كل عنصر داخل المصفوفة a1 إلى المصفوفة a2، ثم سيعيد هذه المصفوفة، وعند إستدعاء الدالة f للمرة الثانية سوف يتم إستخدام المصفوفة a2 مرة أخرى والتي تحتوي بالفعل على كل عناصر المصفوفة a، ولحل المشكلة يجب أن نجعل قيمة المدخل a2 عبارة عن None على سبيل المثال ونتحقق من داخل الدالة أنه لم يتم تمرير أي مدخلات (أي قيمتها None وحينها نسند مصفوفة جديدة لها بالشكل التالي:

def f(a1, a2=None):
    if a2 is None:
        a2 = []
    for i in a1:
        a2.append(i)
    return a2


a = [1, 2, 3]
b = f(a)
print(b)

c = [1, 2, 3, 4]
d = f(c)
print(d)

"""
OUTPUT:
[1, 2, 3]
[1, 2, 3, 4]

"""

سبب هذه المشكلة هي أن لغة بايثون لا تقوم بتغير قيمة المدخلات في كل إستدعاء للدالة. 

كل المحركين قوي للغاية، وكلاهما معروفة وتم إستعماله في صناعة ألعاب ضخمة، ولكن يكمن الفرق الأساسي بينهما في اللغة المستعملة في تطوير الألعاب في كلاهما، فمحرك Unity يستعمل لغة #C بشكل أساسي للتطوير، بينما محرك Unreal يسعمل لغة ++C، لذلك إن كنت تتقن أحد هذه اللغات بالفعل فيُفضل أن تبدأ بالمحرك الذي يستعمل اللغة التي تتقنها.

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

كما يتوفر عدد كبير من الشروحات باللغة العربية لمحرك Unity وستجد أن مجتمعه أكبر نوعًا ما عن محرك Unreal، نظرًا لأن Unity أسهل فإن توجه الكثير من الأشخاص لتعلمه يجعل عدد مستخدمين Unity أكبر، كما أن موقع Unity نفسه يوفر بعض الشروحات التي تساعدك في البدء في إستخدامه.

أيضًا إن كنت ستقوم بتطوير ألعاب من نوع VR أو أي ألعاب تعتمد على تقنيات مثل augmented reality أو virtual reality أو mixed reality، فسيكون Unreal أفضل في ذلك بما أنه يوفر ما يسمى بـ full XR Support والتي تساعد المطور على إنشاء ألعاب VR بسهولة مقارنة بـ Unity، على الجانب الآخر يوفر Unity دعم لإنشاء ألعاب الجوال بسهولة على عكس Unreal التي تكون ألعابه لأنظمة تشغيل الحاسوب، والسبب في ذلك هو حجم اللعبة الناتج في النهاية، حيث أن Unity يكون حجم ألعابه (مساحة اللعبة بالميجابايت) أصغر بكثير مقارنة بحجم ألعاب Unreal.

إن أردت أن تبدأ بصناعة الألعاب فأنصحك بهذه السلسلة (سلسلة تعلم Unity 3D) لتبدأ بها.

يمكنك أن تبدأ الامتحان في أي وقت بشرط أن تكون قد أتمت أربع مسارات من الدورة على الاقل وقمت برفع المشاريع على GitHub، وكل ما عليك فعله هو إرسال رسالة إلى الدعم الفني وسوف يحددون موعد الامتحان لك.

كل دورة لها امتحان خاص بها منفصل عن باقي الدورات. ويمكنك الحصول على مزيد من المعلومات عن الامتحانات والشهادة من خلال مركز المساعدة من هنا.

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

من ضمن مجالات البرمجة المعروفة يوجد:

• تطوير تطبيقات الجوال Android / iOS

• تطوير واجهات المستخدم Frontend

• تطوير الواجهات الخلفية Backend

• تطوير الألعاب Games Development

• تطوير الأنظمة المدمجة Embedded Systems

• تطوير تطبيقات سطح المكتب Desktop Apps

في هذه المقالة يوجد شرح لأشهر التخصصات البرمجة وأشهر التقنيات ولغات البرمجة المستعملة في كل مجال، وكيفية اختيار لغة البرمجة التي تناسبك، مع بعض المصادر لتبدأ في التعلم:

يمكن إختيار رقم عشوائي من خلال التابع random الموجود في الكائن Math:

Math.random();	// 0.3777513264733918

في كل مرة يتم إستدعاء هذا التابع سوف يتم توليد رقم عشوائي بين 0 و 1، ويمكننا أن نحصل على أي رقم عشوائي بين 0 و 5 على سبيل المثال من خلال ضرب الرقم الناتج في 5، مثال:

Math.random() * 5;	// 2.9096869293887995

أما للحصول على عنصر من مصفوفة معينة علينا ضرب ناتج التابع random في طول المصفوفة ثم تحويل الرقم الناتج إلى رقم صحيح integer من خلال التابع floor

const arr = ['one', 'two', 'three']
const index = Math.floor(Math.random() * arr.length);	// 2
const result = arr[index];	// three

يمكن قراءة المزيد عن الكائن Math من خلال موسوعة حسوب من هنا

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

في البداية عليك أن تقوم بعمل مسار route لإعادة البيانات الموجودة في صفحة معينة، على سبيل المثال، لنفترض أنك أنشأت المسار التالي:

http://localhost:5000/api/v1/users?page=1

عند زيارة الرابط السابق من المفترض أن يتم إعادة بيانات خاصة بعشر مستخدمين:

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "website": "anastasia.net"
  },
// ...
]

لذلك سنستخدم Ajax لإرسال طلب إلى الخادم (الرابط السابق) وجلب بيانات المستخدمين، ثم عرض هذه البيانات من خلال JavaScript في الجدول، وبالتالي عند الضغط على أحد الصفحات سوف يتم إرسال طلب إلى الخادم وجلب مجموعة بيانات من المستخدمين.

يمكنك أن تقرأ المزيد عن تقنية Ajax وكيفية إستعمالها من خلال هذه المقالة:

بتاريخ 1 ساعة قال Ayman Saeed2:

هل تعلم أساسيات للغة البرمجه تعني أنك اتعلمت البرمجه

 

تعلم لغة البرمجة أمر مهم للغاية بالتأكيد، ولكنه ليس الأمر الوحيد لكي تضبح مبرمجًا، حيث يجب عليك أن تقوم بتعلم أمور أخرى مثل أنماط التصميم Design Patterns والكود النظيف Clean Code وتعلم كيفية بناء أنظمة تعلم بكفاءة من خلال تعلم الخوارزميات وهياكل البيانات Data Structures وغيرها من الأمور، وحينها ستكون لغة البرمجة بالنسبة إليك مجرد أداة للقيام بالمهمة المطلوبة ويمكنك تنفيذ المهمة الواحدة بأكثر من طريقة وبأكثر من لغة برمجة (على حسب المهمة المطلوبة).

أنصحك بمتابعة قسم مقالات البرمجة الموجود في الأكاديمية حيث يتم نشر العديد من المقالات التي تتحدث عن هذه الأمور السابقة وغيرها الكثير بالتفصيل.

يمكننا بسهولة معرفة إذا كان العدد فردي Odd أو زوجي even من خلال قسمته على 2، فإن كان باقي القسمة 0 فهذا يعني أن الرقم زوجي وإن كان باقي القسمة 1 فهذا يعني أن الرقم فردي، مثال:

const x = 15;
if (x % 2 === 0) {	// معامل باقي القسمة
  console.log("X is even")
} else {
  console.log("X is odd")
}

الآن يمكننا عمل حلقة loop للمرور على الأرقام من 0 إلى 100 على سبيل المثال، وطباعة كل رقم فردي:
 

for (let i = 0; i <= 100; i++) {
  // طباعة الرقم إن كان فردي
  if (i % 2 !== 0) {
    console.log(i)
  }
}

معلومات عن معامل باقي القسمة.

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

يمكنك معرفة هذه الأمور وأكثر من خلال مركز المساعدة الخاص بالأكاديمية من هنا.

من الجيد أن لديك خلفية برمجية سابقة فسوف يفيدك هذا الأمر كثيرًا في تعلم أحد مجالات البرمجة والتخصص فيها، كما أن دورة تطوير التطبيقات بإستخدام لغة جافاسكريبت دورة عامة تتعمل فيها كيفية تطوير الواجهات الخلفية backend بإستخدام Express.js و Node.js كما تتعلم كيفية إنشاء واجهات أمامية Frontend بإستعمال Next.js و React.js والذي يُعد أكثر إطار عمل للواجهات الأمامية مستعمل على مستوى العالم بالإضافة إلى إنشاء تطبيقات للجوال بإستعمال React Native و ionic framework، أيضًا تحصل على شرح لكيفية إنشاء تطبيقات سطح المكتب من خلال Electron.js الذي تم إستعماله في بناء الكثير من التطبيقات الضخمة مثل VS Code نفسه.

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

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

أيضًا يمكنك الإطلاع على هذه المقالة هنا والتي تحتوي على شرح لأشهر مجالات البرمجة والتقنيات المستعملة فيها وأشهر التقنيات المستعملة في سوق العمل:

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

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

اسم الحزمة الاصلي في مستودع الحزم pypi هو pillow ويمكن تثبيتها من خلال الأمر التالي:

pip install Pillow

كما يوجد صفحة كاملة في التوثيق الرسمي عن كيفية تثبيت المكتبة أو بنائها من المصدر.

حاول إستخدام التابع loadURL بالشكل التالي:

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 600 })

// Load a remote URL
win.loadURL('https://google.com')

// local file
win.loadFile('another-file.html')

ملاحظة: من الأفضل إستعمال إطار عمل أو مكتبة تدعم عمل مشروع ذي صفحة واحدة single page app مثل React.js أو Vue.js فهم مُعدين لهذا الأمر في الأساس.

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

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

في Node.js يوجد العديد من الطرق التي تمكنك من إنشاء نظام لتسجيل المستخدمين، أسهلها هو إستخدام حزم مثل JWT أو passport.js، هنا مقالة تشرح عملية الإستيثاف (عملية تسجيل الدخول):

أيضًا توجد الكثير من المواقع التي لا تريد أن يتم نشر المحتوى الخاص بها على محركات البحث مثل جوجل، من أمثلة هذه المواقع هي المواقع الخاصة بالتقارير الخاصة بالشركات Private Reports أو أنظمة تخطيط موارد المشاريع ERP، وتقوم هذه المواقع بعمل نظام تسجيل الدخول في الموقع لكي لا تتمكن Google Bots (تسمى أيضًا عناكب البحث) من الوصول إلى المحتوى.

وعليكم السلام ورحمة الله وبركاته

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

وبنفس الطريقة يتم ترجمة كتب ومواقع معروفة أخرى مثل موقع The Modern JavaScript Tutorial والذي تم ترجمته بالكامل في شكل سلسلة كقالات (سلسلة جافاسكربت متقدمة) أو موقع Full Stack open 2022 الذي تُرجم في شكل سلسلة full_stack_101، كل هذه الكتب والمواقع تمت ترجمتها بتصرف وستجد في نهاية كل مقالة رابط يشير إلى الفصل المترجم أو المصدر الخاص بالمقالة (إن كانت مترجمة) وذلك لتوفير أكبر قدر ممكن من المعلومات المفيدة للطلاب ومستخدمين الأكاديمية ولكل العرب بشكل عام ومجاني.

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

أيضًا يمكنك البحث في أحد محركات البحث عن عبارة "Free Programming Books" أو من خلال هذا المستودع على GitHub (مستودع EbookFoundation/free-programming-books) حيث يحتوي على الآلاف من كتب البرمجة بالعشرات من اللغات ومنها العربية.

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

إن كنت تستعمل GitHub بالفعل، فيمكنك أن تستورد المشروع من المستودع الخاص بك وسيتكفل الموقع (سواء Vercel أو netlify) بالباقي، وستحصل في النهاية على رابط دائم للتطبيق الخاص بك، أيضًا أي تغيرات تقوم بعملها على المشروع ورفعها إلى GitHub سوف يتم تطبيقها في موقع (الرابط الدائم) خلال دقائق قليلة.

عليك فقط أن تسجل في أحد الموقعين ثم أتبع الخطوات البسيطة التي سيعرضها لك الموقع لرفع التطبيق الخاص بك.

بتاريخ 17 دقائق مضت قال مبتدئ بالبرمجة:

اشكرك اخي سامح على الرد. لقت حاولت اتباع خطوات الحل كما تفضلت حضرتك بشرحها ، لكن لم تنجح معي الطريقة. سوف اعاود المحاولة مرة اخرى لعلها تنجح.

حاول التأكد من كتابة الكود بشكل صحيح، وكذلك تحقق من أنك أضفت كل المكتبات المطلوبة أولًا.

هنا شكل الكود النهائي:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1> my React code (function App)</h1>
  <div id="app_code"></div>
  
  <script src="https://unpkg.com/@babel/standalone/babel.js"></script>

  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  <script type="text/babel">
    const e = React.createElement;

    function App() {

      function CircleA() {
        return (
          <div style={{
            display: "inline-flex",
            height: "12px",
            width: "12px",
            paddingBottom: "1px",
            backgroundColor: "#32cd32",
            borderRadius: "50%"
          }}>
            <svg>
              {/* العنصر circle لا يعمل في المتصفح بدون وجوده داخل svg */}

              <circle
                cx="50"
                cy="55"
                r="45"
                fil="none"
                stroke="#F0CE01"
                strokeWidth="4"
              /></svg>
          </div>
        )
      }

      function CircleB() {
        return (
          <div style={{
            display: 'inline-flex',
            height: "12px",
            width: "12px",
            backgroundColor: "#ffd700",
            paddingBottom: "1px",
            borderRadius: "50%"
          }}>
            <svg>
              {/* العنصر circle لا يعمل في المتصفح بدون وجوده داخل svg */}
              <circle
                cx="50"
                cy="55"
                r="45"
                fil="none"
                stroke="#F0CE01"
                strokeWidth="4"
              /></svg>
          </div>
        )
      }

      // نقوم بإرجاع العناصر مباشرة
      return <div> {CircleA(CircleB())}</div>

      // يمكن كذلك إرجاع العناصر بشكل JSX
      return <div> <CircleA><CircleB></CircleB></CircleA></div>


    }

    const domContainer = document.querySelector('#app_code');
    const root = ReactDOM.createRoot(domContainer);
    root.render(e(App));

  </script>
</body>

</html>

قد تكون هذه مشكلة في VS Code، حاول إعادة تشغيله وإنتظر بعض الوقت ريثما يتم تحميل الإضافات بالكامل، وحاول الضغط على CTRL + . (نقطة) أو CTRL + Space لعرض الإختصارات.

أيضًا لاحظ أن التابع getElementsByClassName يُعيد مجموعة من العناصر وليس عنصر واحد فقط، حيث يُعيد كائن يشبه المصفوفة array-like object ، لذلك لن تجد أن التوابع التي تعميل على العناصر موجودة، ويمكنك العمل على كل عنصر على حدى من خلال تحديد index:

console.log(take_element[0]);

في البداية عليك ربط الملف App.js في ملف index.html بالشكل التالي:

<!-- بابل عبارة عن مترجم يقوم بتحويل كو JSX إلى كود جافاسكريبت ليسهل التعامل مع الأكواد -->
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<!-- يجب أن نحدد نوع ملف جافاسكريبت من خلال الخاصية type -->
<script src="App.js" type="text/babel"></script>

الآن حاول تعديل الملف App.js ليصبح بالشكل التالي:

const e = React.createElement;

function App() {

  function CircleA() {
    return (
      <div style={{
        display: "inline-flex",
        height: "12px",
        width: "12px",
        paddingBottom: "1px",
        backgroundColor: "#32cd32",
        borderRadius: "50%"
      }}>
        <svg>
            {/* العنصر circle لا يعمل في المتصفح بدون وجوده داخل svg */}

          <circle
            cx="50"
            cy="55"
            r="45"
            fil="none"
            stroke="#F0CE01"
            strokeWidth="4"
          /></svg>
      </div>
    )
  }

  function CircleB() {
    return (
      <div style={{
        display: 'inline-flex',
        height: "12px",
        width: "12px",
        backgroundColor: "#ffd700",
        paddingBottom: "1px",
        borderRadius: "50%"
      }}>
        <svg>
      {/* العنصر circle لا يعمل في المتصفح بدون وجوده داخل svg */}
          <circle
            cx="50"
            cy="55"
            r="45"
            fil="none"
            stroke="#F0CE01"
            strokeWidth="4"
          /></svg>
      </div>
    )
  }

  // نقوم بإرجاع العناصر مباشرة
  return <div> {CircleA(CircleB())}</div>
  
  // يمكن كذلك إرجاع العناصر بشكل JSX
  return <div> <CircleA><CircleB></CircleB></CircleA></div>


}

const domContainer = document.querySelector('#app_code');
const root = ReactDOM.createRoot(domContainer);
root.render(e(App));

لاحظ أننا لا نقوم بإستدعاء React في بداية الملف لأننا قمن بذلك من خلال عنصر script بالفعل في ملف index.html.

أيضًا حاول إستدعاء ملفات CSS من خلال عنصر link مباشرة ضمن ملف index.html:

<link rel="stylesheet" href="App.css">

هذه الأنظمة تسمى بالأنظمة المدمجة Embedded systems ويتم برمجتها من خلال لغة برمجة مثل C أو ++C أو Python، وتتكون هذه الأنظمة من جزئين Hardware و Software وفي كثير من الأحيان يتم إستعمال لوحات جاهزة مثل راسبيري باي أو أردينو في عمل هذه الأنظمة ويتم التحكم في هذه اللوحات من خلال لغات البرمجة التي أشرت إليها سابقًا.

أنواع الأنظمة المدمجة:

• الأنظمة المدمجة المحمولة: أنظمة صغيرة الحجم كالكميرات الرقمية
• الأنظمة المدمجة المتصلة بالشبكة (Networked Embedded Systems): وهي انظمة تتصل بشبكة الانترنت لارسال او استقبال معلومات معينة كالهواتف المحمولة واجهزة الأمن المنزلي.
• الأنظمة المدمجة المستقلة (Standalone Embedded Systems): هذا النوع من الأنظمة المدمجة لا يعتمد على الشبكة, حيث يقوم بأداء مهامه بشكل مستقل كالالة الحاسبة.
• أنظمة الوقت الحقيقي: وهي الأنظمة المسؤولة عن انجاز مهام معينة خلال مدة زمنية محددة, غالبا ما تستخدم في المجالات الطبية والعسكرية وقطاع السيارات وخصوصا السيارات ذاتية القيادة, وفي الغالب يتم إستخدام لغات برمجة مثل C أو ++C في برمجة مثل هذه الأنظمة

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