استخدام المؤشر لإنشاء تطبيق دون كتابة سطر واحد من التعليمات البرمجية.

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

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

ومع ذلك ، فإن تكامل Cursor IDE ليس مميزا بالكامل كما كنت أتمنى ولم تكن العملية سلسة تماما. بشكل عام، استغرق الأمر حوالي 15 ساعة لإنشاء تطبيق شعرت بالراحة في مشاركته، أسرع من 20 ساعة استغرقتها في محاولتي الأولى، ولكن لا يزال بعيدا جدا عن الادعاء "في 25 دقيقة" الذي أراه غالبا على وسائل التواصل الاجتماعي. (استغرق الأمر مني أيضا 5 ساعات أخرى لمعرفة كيفية نشرها.) يمكنك تجربة التطبيق بنفسك هنا.

الوجبات السريعة

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

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

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

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

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

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

عملية المنتج

كما كان من قبل ، بدأت مع ChatPRD لإنشاء PRD ، والذي قمت بعد ذلك بإدخاله في المؤشر لإنشاء رمز.

بدلا من إطعام المؤشر PRD بأكمله ، قررت إعطائه معلومات خطوة واحدة في كل مرة. ولكن بمجرد أن قدمت الفقرة الأولى من PRD ، بدأت كتابة رمز للنموذج الأولي الكامل. انتظر!

ولكن بعد ذلك فكرت ، كما تعلمون ، YOLO ، دعنا نذهب معها.

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

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

بيئة الترميز

بينما اخترت Dart / Flutter عندما قمت ببناء التطبيق باستخدام Claude ، اقترح المؤشر هذه المرة React Native / JavaScript ، لإرشادي (لا يخلو من بعض الفواق) من خلال عملية إعداد بيئة التطوير الخاصة بي ، بما في ذلك تثبيت Node.js والمحاكي.

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

المؤشر: آه ، يبدو أنك أنشأت مشروعا باستخدام إصدار أحدث من Expo يستخدم بنية الملفات الجديدة مع دليل التطبيق (هذا هو هيكل "Expo Router" الجديد).

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

المؤشر: دعنا نحاول إنشاء مشروع جديد بقالب معين مصمم للعمل مع Expo Router. يمكننا بعد ذلك نقل رمز اللعبة الخاص بنا إلى المشروع الجديد.

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

بشكل محبط ، يفقد المؤشر سجل الدردشة في كل مرة أعيد فيها تشغيله أو أخطئ في اختيار فتح -> مجلد. وجدت أفتقد ميزات "المكتبة" لأدوات الذكاء الاصطناعي الأخرى ، حتى أتمكن من العودة إلى الأسئلة والردود السابقة. كانت تجربتي في البرمجة مباشرة في كلود أنه يمكنني مغادرة المشروع والعودة ، أحيانا بعد أيام ، والمتابعة من حيث توقفت. لكن مع Cursor ، وجدت أبدأ من جديد من وقت لآخر ، وأحيانا أحتاج إلى أن أشرح ل الذكاء الاصطناعي أنه "لقد جربنا ذلك بالفعل ولم ينجح ، هل تتذكر؟"

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

تصحيح

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

أنا: ما لا أفهمه هو: إذا تم تقديم 4 بشكل صحيح (ويفترض أن تستخدم التباعد النسبي؟) - إذن لماذا لا يمكن تقديم الرقم 5 تماما مثل 4 ، ولكن مع وجود نقطة مضافة في المنتصف؟

المؤشر: هذه نقطة جيدة حقا! أنت محق تماما - إذا أنشأ النمط 4 مربعا مثاليا باستخدام التخطيط المرن ، فيجب أن نكون قادرين على استخدام نفس النهج ل 5 ، فقط إضافة نقطة مركزية.

من بين 15 ساعة استغرقتها لإنشاء التطبيق ، ربما أمضيت 10 ساعات على الأقل في تصحيح الأخطاء: 3 في محاولة للتخلص من جميع أخطاء التسجيل والمنطق ، و 5 أخرى لحل مكامن الخلل في عرض النرد والرسوم المتحركة لفة ، و 2 في محاولة للتخلص من صوت "البوب" عند الضغط على الأزرار على Android (قبل أن تتخلى في النهاية عن ذلك).

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

المؤشر: نعم أعتذر! كان يجب أن أذكر إعادة التحميل منذ البداية. هذا جزء مهم من تطوير React Native / Expo الذي اعتبرته أمرا مفروغا منه.

اعتبارات التصميم

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

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

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

أنا: لقد لاحظت أن كلمة "نقاط:" تتحرك إلى اليسار عندما يصبح إجمالي النقاط رقمين ...

المؤشر: دعنا نقوم بتحديث عرض النقاط لاستخدام تخطيط ثابت: ...

أنا: هناك مساحة كبيرة بين "النقاط:" وقيمة الرقم. أفضل أن يكون هناك الحد الأدنى من المساحة المطلوبة....

المؤشر: دعنا نضبط عرض النقاط ليكون أكثر إحكاما: ... يجب الآن توسيط النص أسفل النرد بأقل تباعد.

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

المؤشر: دعنا نضع النقاط في المنتصف عرضا بشكل أفضل تحت القالب: ... الآن يجب أن تتمركز "النقاط: XX" بشكل مثالي تحت القالب. اسمحوا لي أن أعرف إذا كان يحتاج إلى مزيد من التعديل!

أنا: لا يزال غير متمركز ، ولا يزال بعيدا جدا إلى اليسار.

المؤشر: دعنا نجرب نهجا مختلفا للتمركز: ... يجب أن يؤدي ذلك إلى توسيط عرض النقاط بشكل أفضل تحت القالب. اسمحوا لي أن أعرف إذا كان يحتاج إلى مزيد من التعديل!

أنا: لا يزال غير متمركز ، كلمة "نقاط" محاذاة لليسار (بالكاد) مع "حان دورك!" النص والخطوط العريضة للمرد. لكن الجانب الأيمن من الرقم المعروض موجود أسفل الحرف "t" في "الدور" ، فهو ليس قريبا جدا من الجانب الأيمن من النرد. لاحظ أن النص المدمج + القيمة الرقمية ، على سبيل المثال: "النقاط: 12" هي التي يجب توسيطها.

المؤشر: أنا أفهم بشكل أفضل الآن - يجب التعامل مع نص "النقاط: XX" بأكمله كوحدة واحدة وأن يتمركز تحت القالب. دعنا نعدل الأنماط: ... اسمحوا لي أن أعرف إذا كان هذا يبدو أفضل!

أنا: حسنا ، هذا يبدو جيدا ، ولكن الآن تتحول كلمة "نقاط" عندما ينتقل عدد النقاط من رقم واحد (على سبيل المثال "7") إلى رقمين (على سبيل المثال "12"). أود ألا تتحرك كلمة "نقاط" على الشاشة. لذلك أريد أن يكون الكيان المدمج متمركزا ، ولكن يجب ألا يتغير موضع الكيان المدمج وفقا لعدد الأرقام التي يتم عرضها.

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

أنا: كلا ، لا تزال كلمة "نقاط" تتحول إلى اليسار عندما ينتقل إجمالي النقاط من رقم واحد إلى رقمين.

المؤشر: دعنا نجرب نهجا مختلفا مع حاوية ذات عرض ثابت للرقم: ... الآن يجب أن يظل نص "النقاط:" ثابتا حقا في مكانه. اسمحوا لي أن أعرف إذا كان هذا يعمل!

أنا: نعم ، هذا يبدو جيدا ، لكن ربما تكون الحاوية واسعة جدا بعض الشيء؟ إما أن يكون ذلك أو هناك حشوة إضافية في مكان ما ، لأن الكيان المدمج يبدو وكأنه يسار المركز.

المؤشر: دعنا نضبط العرض ونتحقق من وجود أي حشوة إضافية: .... يجب أن يركز هذا على "النقاط: XX" المجمعة بشكل أفضل تحت القالب. اسمحوا لي أن أعرف إذا كان يحتاج إلى مزيد من التعديل!

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

المؤشر: نعم ، دعنا نضع الرقم داخل الحاوية الخاصة به: ... الآن يجب أن تظهر الأرقام المكونة من رقم واحد في المنتصف في مساحتها ، مما يجعل الشاشة تبدو أكثر توازنا. اسمحوا لي أن أعرف إذا كان هذا يبدو أفضل!

أنا: نعم ، يبدو أفضل ، شكرا. الآن ، أود تحسين الانتقال الذي يحدث بعد أن أقوم بتدوير واحدة ...

أنا متأكد من أن إصلاح هذا كان من الممكن أن يكون أسرع بكثير بمجرد إصلاح الكود ، لكن ذلك سيتطلب فهم JavaScript و React.

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

استنتاج

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

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

لكن متدرب البرمجة الحقيقي ، المكلف بإصلاح نمط النقاط في 5 نرد ، لن يعود أبدا بنمط أسوأ بشكل واضح ويسأل "هل هذا جيد الآن؟"

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

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