التطوير باستخدام Google Antigravity

1. مقدمة

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على Google Antigravity، وهي منصة تطوير قائمة على وكلاء الذكاء الاصطناعي ومصمَّمة لمساعدتك في التطوير في عصر الوكلاء. تعمل Antigravity كمركز تحكّم مركزي لوكلاء الذكاء الاصطناعي، وتوفّر منصة موحّدة لإطلاق أنشطتهم وتتبُّعها وتنظيمها.

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

المتطلبات الأساسية:

• تم تثبيت Antigravity وAntigravity IDE وإعدادهما.
• فهم أساسي لـ Google Antigravity يُنصح بإكمال الدرس التطبيقي حول الترميز: بدء استخدام Google Antigravity.

2. لمحة عن حالات الاستخدام

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

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

3- أبرز الأخبار

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

في هذه الحالة، سننتقل إلى موقع "أخبار Google" الإلكتروني ونستخرج بعض المعلومات منه، ولكن يمكنك بسهولة تجربة موقع إلكتروني من اختيارك ومعرفة النتيجة.

سنفترض أنّ لدينا مجلدًا جذريًا سننشئ ضمنه المشاريع المختلفة التي سنراها في هذا الدرس العملي. اسم هذا المجلد الجذر على جهازنا هو agy2-pprojects.

أولاً، أنشئ مجلدًا باسم news-highlights في المجلد أعلاه لبدء عملية جديدة.

شغِّل Antigravity وأنشئ مشروعًا جديدًا، ثم أضِف إليه المجلد news-highlights.

ابدأ محادثة جديدة في مساحة العمل news-highlights التي تم استيرادها حديثًا:

بعد ذلك، وجِّه الأمر التالي: "انتقِل إلى news.google.com واعرض لي أهم الأخبار في الوقت الحالي."

سيؤدي ذلك إلى بدء عملية الوكيل، وسيحدّد الوكيل أنّه بحاجة إلى زيارة الموقع الإلكتروني news.google.com وطلب إذنك، وقد يطلب منك الإذن عدة مرات لقراءة عناوين URL، ويمكنك منحه الإذن لهذا المشروع وما إلى ذلك.

يجب الانتباه جيدًا إلى "عملية التفكير" ومعرفة كيف ينفّذ "الوكيل" عمله. يظهر أدناه مثال على التنفيذ من قِبل "الوكيل":

اقتراحات يمكنك تجربتها

• بعد فهم ذلك، اختَر موقعًا إلكترونيًا متاحًا وتريد أن ينتقل إليه "الوكيل" للحصول على بعض البيانات أو تلخيصها. فكِّر في بعض المواقع الإلكترونية التي تعرف أنّها تتضمّن لوحات بيانات ومخططات واطلب منه اختيار بعض القيم.
• جرِّب الطلب التالي: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. إنشاء موقع إلكتروني ديناميكي باستخدام Python وFlask

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

أنشئ مجددًا مجلدًا جديدًا باسم conference-website، وتأكَّد من إنشاء مشروع جديد في واجهة Antigravity Agent وإضافة المجلد conference-website إليه.

يمكنك بدء المحادثة من خلال تقديم الطلب الموضّح أدناه:

I would like to generate a website that is a 1-day technical conference informational site.

The website should have the following functionality:
        1. A home page that shows the current date, location, schedule and time table.
        2. The 1-day event is a list of 8 talks in total.
        3. Each talk has 1 or 2 max. speakers. 
        4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
        5. Each speaker has a First Name, Last Name and LinkedIn url.
        6. Allow for users to search by category, speaker, title.
        7. Give a lunch break of 60 minutes.
        8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
        9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript. 
        10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes. 
11. Launch the web application for me to review. 

ستحلّل Antigravity الطلب وستقدّم أولاً "خطة التنفيذ". سيتم إنشاء عنصر أساسي يُسمى implementation_plan.md لتتمكّن من مراجعته من حيث كيفية التخطيط لإنشاء المتطلبات التي حدّدتها في الطلب وتنفيذها. يظهر أدناه نموذج للناتج:

قبل النقر على "متابعة"، ألقِ نظرة على خطة التنفيذ. يمكنك النقر على الرابط المؤدي إلى ملف implementation_plan.md أعلاه أو تبديل "اللوحة الإضافية" (Auxiliary Pane) في أعلى يسار الصفحة. سيؤدي ذلك إلى عرض "طريقة عرض العناصر"، ويمكنك الاطّلاع حاليًا على خطة التنفيذ لمراجعتها.

في ما يلي نموذج لخطة التنفيذ التي تم إنشاؤها لتشغيلنا:

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

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

يمكنك النقر على "المهمة" في أي وقت أو حتى الانتقال إلى قائمة العناصر لعرض "المهام". في ما يلي نموذج لبطاقة بيانات:

في مرحلة ما من المهمة النهائية، عندما يحاول التطبيق تشغيل التطبيق والتحقّق منه، سيُعدّ تطبيق Antigravity بيئة Python وسيطلب إذنك لإعداد البيئة وتثبيت التبعيات وغير ذلك. يُرجى منح الأذونات حسب الحاجة.

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

في ما يلي نموذج لجولة إرشادية:

يظهر الموقع الإلكتروني النهائي عند زيارة عنوان URL أدناه:

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

اقتراحات يمكنك تجربتها

• أضِف وظائف إضافية تريدها في التطبيق، وقدِّم التفاصيل إلى "الوكيل" ولاحظ كيف ينفّذ مهمته من خلال تعديل قائمة المهام أولاً، ثم خطة التنفيذ وما إلى ذلك.
• أضِف بيانات إضافية إلى "الجدول الزمني للأحداث"، مثل Add two more talks to the schedule.
• اطلب من "الوكيل" إنشاء ملف README أو المزيد من المستندات للتطبيق.

5- إنشاء تطبيق بسيط لتعزيز الإنتاجية

سننشئ الآن تطبيق ويب بسيطًا لمؤقت Pomodoro.

أنشئ pomodoro-timer مجلدًا. تأكَّد من أنّك في Agent Manager، وأنّك استوردت مساحة العمل pomodoro-timer وحدّدتها. ابدأ بالطلب التالي:

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

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

في ما يلي نموذج لعملية تنفيذ تتضمّن رسالة "الجولة الإرشادية" و"المهام":

ظهر التطبيق النهائي كما هو موضّح أدناه، ويبدو جيدًا جدًا.

اقتراحات يمكنك تجربتها

• أضِف بعض الصور إلى التطبيق، مثل صورة مؤقّت.
• جرِّب بعض صيغ أي تطبيق تريد إنشاؤه. جرِّب الأنماط والصور واطلب إجراء تغييرات وما إلى ذلك.

6. إنشاء اختبارات الوحدات ورموز الاختبارات الوهمية والتحقّق من صحة الاختبارات

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

لهذا الغرض، سنستخدم مساحة عمل تحتوي على ملف Python واحد كما هو موضّح أدناه:

from typing import Dict

# --- Custom Exceptions ---
class InventoryShortageError(Exception):
    """Raised when there is not enough item stock."""
    pass

class PaymentFailedError(Exception):
    """Raised when the payment gateway rejects the transaction."""
    pass

class InvalidOrderError(Exception):
    """Raised when the order violates business rules."""
    pass

# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
    def get_stock(self, product_id: str) -> int:
        """Connects to DB to check stock."""
        raise NotImplementedError("Real connection required")

    def decrement_stock(self, product_id: str, quantity: int):
        """Connects to DB to reduce stock."""
        raise NotImplementedError("Real connection required")

class PaymentGateway:
    def charge(self, amount: float, currency: str) -> bool:
        """Connects to Stripe/PayPal."""
        raise NotImplementedError("Real connection required")

# --- Main Business Logic ---
class Order:
    def __init__(self, 
                 inventory_service: InventoryService, 
                 payment_gateway: PaymentGateway,
                 customer_email: str,
                 is_vip: bool = False):
        
        self.inventory = inventory_service
        self.payment = payment_gateway
        self.customer_email = customer_email
        self.is_vip = is_vip
        self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
        self.is_paid = False
        self.status = "DRAFT"

    def add_item(self, product_id: str, price: float, quantity: int = 1):
        """Adds items to the cart. Rejects invalid prices or quantities."""
        if price < 0:
            raise ValueError("Price cannot be negative")
        if quantity <= 0:
            raise ValueError("Quantity must be greater than zero")

        if product_id in self.items:
            self.items[product_id]['qty'] += quantity
        else:
            self.items[product_id] = {'price': price, 'qty': quantity}

    def remove_item(self, product_id: str):
        """Removes an item entirely from the cart."""
        if product_id in self.items:
            del self.items[product_id]

    @property
    def total_price(self) -> float:
        """Calculates raw total before discounts."""
        return sum(item['price'] * item['qty'] for item in self.items.values())

    def apply_discount(self) -> float:
        """
        Applies business logic:
        1. VIPs get flat 20% off.
        2. Regulars get 10% off if total > 100.
        3. No discount otherwise.
        """
        total = self.total_price
        
        if self.is_vip:
            return round(total * 0.8, 2)
        elif total > 100:
            return round(total * 0.9, 2)
        
        return round(total, 2)

    def checkout(self):
        """
        Orchestrates the checkout process:
        1. Validates cart is not empty.
        2. Checks stock for all items.
        3. Calculates final price.
        4. Charges payment.
        5. Updates inventory.
        """
        if not self.items:
            raise InvalidOrderError("Cannot checkout an empty cart")

        # 1. Check Inventory Logic
        for product_id, data in self.items.items():
            available_stock = self.inventory.get_stock(product_id)
            if available_stock < data['qty']:
                raise InventoryShortageError(f"Not enough stock for {product_id}")

        # 2. Calculate Final Price
        final_amount = self.apply_discount()

        # 3. Process Payment
        try:
            success = self.payment.charge(final_amount, "USD")
            if not success:
                raise PaymentFailedError("Transaction declined by gateway")
        except Exception as e:
            # Catching generic network errors from the gateway
            raise PaymentFailedError(f"Payment gateway error: {str(e)}")

        # 4. Decrement Stock (Only occurs if payment succeeded)
        for product_id, data in self.items.items():
            self.inventory.decrement_stock(product_id, data['qty'])

        self.is_paid = True
        self.status = "COMPLETED"
        
        return {"status": "success", "charged_amount": final_amount}

تأكَّد من توفُّر ملف Python أعلاه (order_service.py) على جهازك في مجلد جديد ومن فتح هذا المشروع للمحادثة في Antigravity.

هذه خدمة بسيطة للطلبات تتضمّن الوظائف الأساسية التالية في الدالة checkout:

1. تتحقّق هذه السمة من أنّ سلة التسوّق ليست فارغة.
2. التحقّق من توفّر جميع السلع
3. تحسب هذه السمة السعر النهائي.
4. دفع الرسوم
5. تعديل بيانات المستودع

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

سنفتح مجلد مساحة العمل المحدّد، وستلاحظ أنّه يمكننا الآن استخدام الرمز @ أيضًا للإشارة إلى الملف. على سبيل المثال، يمكننا البدء بكتابة @order وسيظهر الملف order_service.py.

يمكننا تقديم مهمة تساعدنا في فهم هذا الملف. أدخِل الطلب التالي:

Explain the @order_service.py file

يظهر هذا الملف مع بعض التوضيحات حول ماهيته:

يمكننا أن نطلب منه إنشاء تمثيل مرئي أفضل من خلال الطلب التالي:

Can you visually show this class for better understanding

تشير Antigravity إلى أنّ المهمة مكتملة وأنّها أنشأت قطعة أثرية تحتوي على التصوّر:

يمكننا الاطّلاع على العرض المرئي كما هو موضّح أدناه:

ويجب استيفاء الشروط التالية:

خطوتنا التالية هي إنشاء اختبارات الوحدة وطلب من "الوكيل" تجربتها. أقدّم الطلب التالي:

generate unit tests for this module and test it out with mock implementations.

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

وكان أحد الملفات التي أنشأها هو ملف الاختبار أيضًا. في ما يلي لقطة شاشة توضّح ذلك:

اقتراحات يمكنك تجربتها

يمكنك استخدام الرمز البرمجي الخاص بك ومعرفة ما يمكنك أن تطلبه من "الوكيل"، بدءًا من إضافة المزيد من الوظائف إلى إعادة تصميم أجزاء من الرمز البرمجي.

7. تهانينا

تهانينا! لقد استخدمت Google Antigravity بنجاح من أجل:

• البحث على الويب بشكل مستقل
• إنشاء تطبيقات ويب متكاملة وتكرارها
• كتابة اختبارات وحدة معقّدة والتحقّق من صحتها باستخدام عمليات محاكاة

أنت الآن جاهز للسماح لـ Antigravity بإدارة المهام الصعبة في مشاريعك.

المستندات المرجعية

• درس تطبيقي حول الترميز : بدء استخدام Google Antigravity
• الموقع الإلكتروني الرسمي : https://antigravity.google/
• المستندات: https://antigravity.google/docs
• تنزيل : https://antigravity.google/download
• قناة YouTube الخاصة بـ Google Antigravity : https://www.youtube.com/@googleantigravity