$ learn
كيف تبني تطبيقًا بالكلام وتختبره؟
ابنِ تطبيقًا بسيطًا للمصاريف بمساعدة AI، ثم نزّله واختبر حساباته وحفظ بياناته وأصلح الأخطاء بالكلام.
الخلاصة
يمكنك وصف تطبيق تحتاجه بالكلام والحصول على ملف تفتحه على جهازك، حتى إن لم تكتب كودًا من قبل. لكن فتح التطبيق لا يكفي لإثبات أنه يحسب ويحفظ كما تريد.
في الحلقة نبني مع Claude تطبيق «مصاريفي»، ونعدّل العملة والميزانية، ثم ننزّله ونختبره. يكشف أحد الاختبارات خطأً حقيقيًا: تحوّل مبلغ سالب إلى مصروف موجب. نبلّغ عن الخطأ ونختبر الإصلاح بأنفسنا.
المصطلحات
- Prompt (الطلب): وصف المهمة والنتيجة التي تريدها من AI.
- HTML: صيغة ملف يمكن للمتصفح فتحها لعرض صفحة أو تطبيق ويب.
- Local Storage (التخزين المحلي): مساحة يستطيع تطبيق الويب حفظ بيانات فيها داخل المتصفح على الجهاز.
- Test (الاختبار): تجربة فعل محدد ومقارنة النتيجة بما ينبغي أن يحدث.
- Bug (الخلل): سلوك في التطبيق يخالف ما تريده منه.
- Boundary (الحد): قيمة تقع عند نقطة تغيّر السلوك، مثل 80% من الميزانية.
الشرح
ثلاث إجابات قبل الطلب
تخيّل موظف الشباك في الحلقات السابقة: لا يكفي أن تقول له «أريد تطبيقًا جيدًا». يحتاج إلى تفاصيل المعاملة قبل تنفيذها. قبل كتابة الطلب، أجب عن ثلاثة أسئلة:
- ماذا سأُدخل؟ مبلغ المصروف ونوعه وملاحظة اختيارية.
- ماذا أريد أن أرى؟ مجموع الشهر والمبلغ المصروف في كل نوع.
- ما الذي يجب أن يبقى؟ المصاريف بعد إغلاق الصفحة وفتحها مجددًا.
في التجربة أضفنا حذف المصروف، وواجهة عربية من اليمين إلى اليسار، وتصميمًا يناسب عرض الهاتف، وطلبنا ملفًا واحدًا يُفتح دون تثبيت. هذه تفاصيل قابلة للفحص، لا مجرد وصف لشكل جميل.
جرّب ثم اطلب التعديل
في التسجيل أنشأ Claude ملف HTML. أدخلنا 120 للطعام و45 للمواصلات و300 للفواتير؛ ظهر المجموع 465 وبقيت البيانات بعد تحديث المعاينة. هذه نتيجة التجربة المسجّلة، وقد تختلف النتيجة في محاولتك.
كانت العملة في النسخة الأولى الجنيه، واقترح الرد تغييرها في الكود. طلبنا بدلًا من ذلك اختيار العملة من داخل التطبيق، مع ميزانية شهرية وشريط يتحول من الأخضر إلى الأحمر عند تجاوز 80%. اختيار العملة يغيّر عرضها في هذه النسخة؛ لا يحوّل المبالغ بأسعار صرف.
أين تعيش البيانات؟
تخيّل Local Storage دفترًا داخل المتصفح. كتب التطبيق مصاريف المعاينة في دفترها، لكن حين نزّلنا الملف وفتحناه في متصفح على الجهاز ظهر فارغًا: لم تنتقل بيانات المعاينة معه. وعند فتح الملف في متصفح آخر ظهر فارغًا أيضًا.
الملف يحمل التطبيق؛ البيانات المحفوظة بهذه الطريقة مرتبطة بسياق المتصفح الذي استُخدم فيه وعلى ذلك الجهاز. قد تُحذف عند مسح بيانات الموقع أو التصفح. لا تفترض أنها نسخة احتياطية أو أنها تتزامن بين الأجهزة. وقد يختلف السلوك عند استبدال الملف بحسب المتصفح وطريقة فتحه، لذا افحص بياناتك بعد أي تحديث.
الاختبار هو فعل ونتيجة متوقعة
يمكنك أن تطلب من Claude قائمة اختبارات، لكن عليك تنفيذها ومقارنة ما حدث بما توقعت. في التسجيل اختبرنا المجموع، وإعادة الفتح، والحذف، والمدخلات غير الصحيحة، وحد الميزانية، وعرض الصفحة بمقاس هاتف.
بعد حذف 45 أصبح المتوقع 420. ثم أدخلنا -50: كان المطلوب رفضه، لكن التطبيق حفظ 50 وزاد المجموع إلى 470. رفض الخانة الفارغة والصفر والحروف لم يكن كافيًا لإثبات أن كل المدخلات الخاطئة مرفوضة.
أبلغنا عن الفعل والنتيجة الفعلية والمتوقعة. أوضح رد Claude أن التطبيق كان يزيل علامة السالب، وقال إنه أصلح الخلل. بعد تنزيل النسخة الجديدة حذفنا الـ50 الخاطئة وأعدنا اختبار -50: رُفض وبقي المجموع 420. قول الأداة إنها اختبرت الإصلاح لا يغني عن تجربتك أنت.
عند ميزانية 1000، اختبرنا الحد نفسه وما بعده: 800 بقي أخضر، و801 أصبح أحمر. كما فحصنا الصفحة بعرض هاتف في المتصفح؛ هذا اختبار للحجم والتخطيط، وليس اختبارًا لكل وظائف اللمس على هاتف فعلي.
جرّب بنفسك
افتح محادثة مع أداة تتيح إنشاء ملف HTML، وأرسل الطلب التالي. هذا هو طلب البناء المستخدم في التسجيل؛ قد تختلف واجهة الأداة وإتاحتها لديك.
عايز أعمل تطبيق صغير أسجّل فيه مصاريفي في الشهر. أكتب المبلغ، وأختار نوع المصروف: أكل، مواصلات، فواتير، خروج، حاجات تانية. وأكتب ملاحظة لو حبّيت. يوريني مجموع الشهر، وكام صرفت على كل نوع. أقدر أمسح أي مصروف كتبته غلط. اللي بكتبه يفضل محفوظ لما أقفل الصفحة وأفتحها تاني. الواجهة بالعربي ومن اليمين للشمال، وشكلها حلو على الموبايل. اعمله في ملف واحد بس، أنزّله وأفتحه بدبل كليك على جهازي، من غير ما أسطّب أي حاجة.جرّب النسخة الناتجة. أدخل 120 و45 و300 وتحقق من أن المجموع 465. اطلب التعديل التالي، ثم تحقق من النتيجة؛ الأرقام المدخلة للتجربة فقط.
أنا مش بعرف أعدّل في الكود. عايز أختار العملة من جوه التطبيق نفسه: جنيه، ريال، درهم، دينار، دولار. وعايز أضيف ميزانية للشهر: أكتبها مرة واحدة، ويوريني فاضل لي كام. وشريط يتملي كل ما أصرف، يبقى أخضر، ولما أعدّي ٨٠٪ من الميزانية يقلب أحمر.نزّل ملف HTML الناتج وافتحه في المتصفح. قد تكون القائمة أو طريقة التنزيل مختلفة عن الحلقة. إذا كانت القائمة فارغة، ابدأ بيانات تجريبية جديدة، ثم أغلق الصفحة وأعد فتح الملف في المتصفح نفسه للتحقق من الحفظ.
اطلب قائمة اختبارات، واكتب النتيجة المتوقعة قبل تنفيذ كل اختبار.
اكتب لي قائمة اختبارات بسيطة أعملها بإيدي عشان أتأكد إن التطبيق شغّال صح.اختبر الجمع والحذف وإعادة الفتح. جرّب حقلًا فارغًا وصفرًا وعددًا سالبًا وحروفًا؛ المطلوب رفضها. ومع ميزانية 1000، افحص لون الشريط عند 800 وعند 801. افحص عرض الهاتف أيضًا. قد تظهر نتائج مختلفة في نسختك؛ سجّل ما تراه فعلًا.
إذا وجدت خللًا، صف ما فعلته وما حدث وما كنت تتوقعه. المثال التالي هو تقرير الحلقة؛ عدّل الأرقام والنتائج لتطابق تجربتك، ثم نزّل النسخة المعدّلة وأعد الاختبار وفحص البيانات.
لما كتبت في المبلغ سالب خمسين (-50) وضغطت «سجّل المصروف»، اتسجّل مصروف ٥٠ جنيه، والمجموع زاد من ٤٢٠ لـ ٤٧٠. كنت مستني يرفضه ويطلع الرسالة زي ما عمل مع الصفر والحروف. صلّحه.لماذا يهمّك هذا
يمكنك استخدام الدورة نفسها لتطبيق عادات أو مذاكرة أو طلبات منزلية: صف المدخلات والمخرجات وما يجب حفظه، ثم جرّب واختبر وعدّل. كل اختبار يعطيك دليلًا على سلوك محدد، لا ضمانًا بأن التطبيق خالٍ من الأخطاء.
حلقات مرتبطة
- ما هو الـ Agent؟: كيف يستخدم النموذج الأدوات لتنفيذ مهمة.
- كيف تطلب ما تريده بدقة؟: تحديد المهمة والنتيجة المطلوبة.
- لماذا يكذب الذكاء الاصطناعي وهو واثق؟: لماذا تحتاج إلى التحقق من النتيجة.