سلسلة: مشاريع الذكاء الاصطناعي التطبيقية • من الفكرة إلى التطبيق

المشروع الثاني: بناء مساعد ذكي لشرح الأكواد واكتشاف الأخطاء

كيف تبني تطبيق ذكاء اصطناعي يشرح الأكواد ويكتشف الأخطاء باستخدام Python؟

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

هذا بالضبط ما سنبنيه في هذا المشروع.

سننشئ تطبيق AI Code Explainer باستخدام Python وStreamlit وOpenAI API. وسيتمكن المستخدم من لصق كود Python داخل التطبيق واختيار مستوى الشرح، ثم يحصل على تحليل منظم يساعده على فهم الكود وتصحيح الأخطاء وتحسينه.

ماذا ستتعلم؟

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

1. ما الذي سنبنيه؟

اسم مشروعنا:

🤖 AI Code Explainer & Debugger

فكرة التطبيق بسيطة: يضع المستخدم كود Python، ثم يختار مستوى الشرح: Beginner أو Intermediate أو Advanced.

بعد الضغط على زر التحليل، يقوم التطبيق بإرسال الكود إلى نموذج الذكاء الاصطناعي، ثم يعرض نتيجة منظمة تتضمن:

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

المستخدم ← تطبيق Streamlit ← OpenAI API ← تحليل الكود ← النتيجة

2. الأدوات المطلوبة

سنحتاج إلى أربع أدوات فقط:

Python — لغة البرمجة التي سنبني بها التطبيق.
Streamlit — لإنشاء واجهة الاستخدام بسرعة.
OpenAI API — لإرسال الكود إلى نموذج الذكاء الاصطناعي.
VS Code — أو أي محرر أكواد تفضله.

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

3. إنشاء المشروع

أنشئ مجلدًا جديدًا باسم:

ai_code_explainer

ثم أنشئ داخله ملفًا:

app.py

افتح Terminal داخل المجلد وثبت المكتبات:

pip install streamlit openai

4. إعداد مفتاح OpenAI API بأمان

يحتاج التطبيق إلى مفتاح API حتى يستطيع إرسال الطلبات إلى OpenAI. لكن يجب التعامل مع هذا المفتاح مثل كلمة مرور.

تنبيه أمني:
لا تنشر مفتاح API داخل المقال، ولا تضعه مباشرة في كود منشور على GitHub أو أي مكان عام.

الأفضل حفظه في متغير بيئي باسم:

OPENAI_API_KEY

بعد ذلك يستطيع عميل OpenAI استخدام المفتاح دون كتابته داخل ملف التطبيق.

5. الكود الكامل لتطبيق AI Code Explainer

افتح ملف app.py وضع فيه الكود التالي:

import streamlit as st
from openai import OpenAI

client = OpenAI()

st.set_page_config(
    page_title="AI Code Explainer",
    page_icon="🤖"
)

st.title("🤖 AI Code Explainer & Debugger")

st.write(
    "Paste your Python code below. "
    "AI will explain it, find possible errors, "
    "and suggest improvements."
)

code = st.text_area(
    "Python code",
    height=300,
    placeholder="""def calculate_total(numbers):
    total = 0
    for number in numbers:
        total += number
    return total"""
)

level = st.selectbox(
    "Explanation level",
    ["Beginner", "Intermediate", "Advanced"]
)

if st.button("Analyze Code"):

    if not code.strip():

        st.warning("Please enter some Python code first.")

    else:

        prompt = f"""
You are an expert Python tutor and code reviewer.

Analyze the Python code provided by the user.

The explanation level is: {level}.

Organize your response into these sections:

1. What the code does
2. Explanation of the important parts
3. Errors or potential problems
4. Corrected code, if necessary
5. Suggestions for improving readability and quality

Explain clearly and do not invent errors that are not present.

Python code:

{code}
"""

        with st.spinner("Analyzing your code..."):

            try:

                response = client.responses.create(
                    model="gpt-5.2",
                    input=prompt
                )

                st.subheader("AI Analysis")
                st.write(response.output_text)

            except Exception as error:

                st.error(
                    "The code could not be analyzed. "
                    "Check your API key and connection."
                )

                st.caption(str(error))

6. فهم الأجزاء المهمة في الكود

بدل شرح كل سطر بشكل منفصل، سنركز على الأجزاء التي تجعل التطبيق يعمل.

الاتصال بـ OpenAI

client = OpenAI()

ننشئ هنا عميل OpenAI الذي سيستخدمه التطبيق لإرسال طلب تحليل الكود.

استقبال الكود

code = st.text_area(...)

يوفر Streamlit مربعًا متعدد الأسطر، وهو مناسب جدًا للصق الأكواد البرمجية.

اختيار مستوى الشرح

level = st.selectbox(
    "Explanation level",
    ["Beginner", "Intermediate", "Advanced"]
)

هذه الإضافة تجعل التطبيق أكثر فائدة؛ فالمبتدئ يحتاج إلى شرح مختلف عن المبرمج الذي يمتلك خبرة أكبر.

إرسال الطلب إلى نموذج الذكاء الاصطناعي

response = client.responses.create(
    model="gpt-5.2",
    input=prompt
)

هنا يتم إرسال التعليمات والكود إلى النموذج. وبعد اكتمال الطلب نعرض النص الناتج:

st.write(response.output_text)

7. تشغيل تطبيق Python AI

احفظ الملف ثم شغله من Terminal:

streamlit run app.py

إذا لم يتعرف النظام على أمر Streamlit، جرب:

python -m streamlit run app.py

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

8. تجربة حقيقية: هل يستطيع AI اكتشاف الخطأ؟

الآن نصل إلى الجزء الأهم: اختبار التطبيق بدل الاكتفاء بقراءة الكود.

ضع المثال التالي:

numbers = [10, 20, 30]

total = 0

for number in numbers
    total += number

print(total)

ثم اضغط على Analyze Code.

المشكلة هنا هي غياب النقطتين : بعد حلقة for.

النسخة الصحيحة هي:

numbers = [10, 20, 30]

total = 0

for number in numbers:
    total += number

print(total)

9. ما النتيجة التي نتوقعها من التطبيق؟

قد تختلف صياغة الإجابة من تشغيل إلى آخر، لكن النتيجة الجيدة يجب أن تكون قريبة من هذا الشكل:

What the code does

The program creates a list of numbers, loops through them, adds each number to the total, and finally prints the sum.

Error found

The for statement is missing a colon at the end. This causes a Python SyntaxError.

Corrected code

numbers = [10, 20, 30]

total = 0

for number in numbers:
    total += number

print(total)

Expected output

الآن أصبح لدينا شيء أهم من مجرد Chatbot: لدينا أداة تنفذ مهمة محددة وتحول استجابة النموذج إلى خدمة مفيدة للمستخدم.

10. لماذا الـPrompt مهم في تطبيقات الذكاء الاصطناعي؟

إذا أرسلنا للنموذج:

Explain this code.

قد نحصل على شرح مفيد، لكنه قد لا يكون منظمًا بالطريقة التي يحتاجها تطبيقنا.

لذلك أعطيناه دورًا واضحًا:

You are an expert Python tutor and code reviewer.

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

11. هل يمكن الاعتماد على AI لتصحيح الكود دائمًا؟

لا. وهذه نقطة أساسية لأي شخص يتعلم البرمجة بالذكاء الاصطناعي.

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

القاعدة:
استخدم الذكاء الاصطناعي كمساعد للمبرمج، وليس بديلًا عن فهم الكود واختباره.

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

12. كيف نحول المشروع إلى تطبيق أقوى؟

النسخة الحالية هي أساس ممتاز، لكن يمكن تطويرها بسهولة.

دعم لغات برمجة أخرى

يمكن إضافة قائمة تسمح للمستخدم باختيار: Python أو JavaScript أو Java أو C++ أو PHP.

اختيار نوع المهمة

بدل تنفيذ تحليل واحد، يمكن توفير:

Explain Code
Find Bugs
Improve Code
Add Comments
Optimize Code

رفع ملف برمجي

يمكن لاحقًا السماح للمستخدم برفع ملف بدل نسخ الكود يدويًا.

الاحتفاظ بسجل التحليلات

يمكن حفظ آخر الأكواد التي تم تحليلها ونتائجها، مما يحول المشروع إلى أداة أكثر فائدة للاستخدام المتكرر.

13. أخطاء شائعة أثناء تشغيل المشروع

API Key غير موجود

تأكد من حفظ المفتاح داخل المتغير البيئي:

OPENAI_API_KEY

Streamlit غير مثبت

pip install streamlit

مشكلة في الاتصال بالـAPI

تحقق من الاتصال بالإنترنت، ومن صحة المفتاح، ثم اقرأ رسالة الخطأ التي تظهر في Terminal.

14. تحدٍ عملي: طور التطبيق بنفسك

مهمتك:

أضف قائمة جديدة إلى التطبيق باسم:

Analysis Type

Explain
Debug
Improve

ثم اجعل الـPrompt يتغير حسب المهمة التي يختارها المستخدم.

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

15. ماذا تعلمنا؟

في هذا المشروع لم نتعلم فقط كيف نستخدم OpenAI API، بل رأينا كيف تتكون تطبيقات الذكاء الاصطناعي الحديثة من عدة أجزاء تعمل معًا:

واجهة المستخدم تستقبل الكود.

Python يدير منطق التطبيق.

OpenAI API يرسل الطلب إلى النموذج.

Prompt يحدد المهمة وشكل النتيجة.

Streamlit يعرض التحليل للمستخدم.

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

الخلاصة

بناء تطبيق يعتمد على الذكاء الاصطناعي لا يعني بالضرورة تدريب نموذج تعلم آلي من الصفر.

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

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

وإذا وصلت إلى هذه المرحلة وشغلت التطبيق بنفسك، فأنت لم تعد تتعلم Python والذكاء الاصطناعي بشكل نظري فقط؛ لقد بدأت فعليًا في بناء تطبيقات AI.

المشروع القادم في السلسلة:

كيف تبني Chatbot ذكيًا باستخدام Python والذكاء الاصطناعي؟

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

بحث هذه المدونة الإلكترونية

Alamai Pro – الذكاء الاصطناعي