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

1. مقدمة

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

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

تم تثبيت Google Antigravity وضبط إعداداته.
فهم أساسي لـ Google Antigravity ننصحك بإكمال تجربة البرمجة: التعرّف على Google Antigravity.

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

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

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

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

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

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

تأكَّد من أنّك في Agent Manager وأنّك اخترت Playground، كما هو موضّح أدناه:

بعد ذلك، أعطِ الأمر التالي:

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

بعد انتهاء عملية الإنشاء، من المفترض أن تظهر لك أيضًا الأدوات التي تم إنشاؤها، كما هو موضّح أدناه:

في ما يلي مثال على تنفيذ الوكيل:

لاحظ أنّه على اليمين، لدينا "عملية التفكير"، ويمكنك أيضًا الانتقال بين النقاط وعرض التشغيل والبيانات الأخرى.

إجراءات يمكنك تجربتها

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

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

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

تأكَّد مرة أخرى من أنّك في Agent Manager وأنّك اخترت Playground.

أدخِل الطلب التالي:

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.

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

أثناء تنفيذ المهمة، سيشرع "الوكيل" في إنشاء العناصر التالية:

عنصر المهمة
عنصر التنفيذ
Walkthrough Artifact

كانت مهمة Task Artifact الموضّحة أدناه هي التسلسل الأوّلي للمهام التي حدّدها "الوكيل" على أنّه يجب تنفيذها استنادًا إلى المهمة المحدّدة له. في ما يلي لقطة شاشة نموذجية من عملية التنفيذ:

يمكنك بعد ذلك النقر على عنصر خطة التنفيذ. في ما يلي نموذج للقطة شاشة:

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

لاحظ أنّه بدأ تشغيل الخادم وقدّم لي عنوان URL، والذي أنقر عليه وأحصل على التطبيق، ويظهر أدناه لقطة شاشة نموذجية:

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

لنفترض الآن أنّنا نريد إضافة المزيد من المحاضرات إلى الفعالية. يمكننا البقاء في "المحرّر" وفي لوحة "الوكيل"، وإدخال تعليمات مثل Add two more talks to the schedule.

سيؤدي ذلك إلى تحليل الوكيل للمتطلبات وتعديل المهمة وخطة التنفيذ، ثم التحقّق من الوظيفة المعدَّلة أيضًا. في ما يلي نموذج لمحادثة:

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

إجراءات يمكنك تجربتها

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

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

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

تأكَّد من أنّك في Agent Manager وأنّك اخترت Playground. أدخِل الطلب التالي:

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

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

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

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

ما رأيك في إضافة صورة مؤقت لطيفة إلى التطبيق؟ كل ما علينا فعله هو إصدار تعليمات متابعة كما هو موضّح أدناه:

Add an image to the application that displays a timer.

نتيجةً لذلك، أضاف الموظّف مهمة جديدة إلى عنصر Task:

بعد ذلك، أنشأ صورة أثناء تنفيذ المهمة:

أخيرًا، حصل التطبيق على الصورة كما طلبنا:

إجراءات يمكنك تجربتها

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

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 أعلاه متوفّر محليًا في مجلد وأنّك تحمّله كـ مساحة عمل في Antigravity.

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

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

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

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

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

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

Can you visually show this class for better understanding

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

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/use-cases
تنزيل : https://antigravity.google/download
قناة YouTube الخاصة بـ Google Antigravity : https://www.youtube.com/@googleantigravity