يعرض الدرس بناء تطبيق Flutter بالذكاء الاصطناعي انطلاقًا من تصميم الواجهة، ثم جلب محتوى WordPress وإنتاج APK للاختبار. يوضح الطريق من نموذج بصري إلى تطبيق يحتاج اختبارًا فعليًا على الهاتف.
شاهد التطبيق الكامل في درس جمال AI
حدد وظيفة التطبيق قبل توليد التصميم
التطبيق في الفيديو يعرض أخبارًا ومقالات من موقع WordPress. ابدأ بالشاشات الضرورية: قائمة المحتوى، صفحة المقال والتنقل بينها، ثم أضف الوظائف الأخرى بعد نجاح هذا المسار.
اكتب ما يحتاجه المستخدم في كل شاشة، وما يحدث إذا لم توجد بيانات أو انقطع الاتصال. هذه الحالات جزء من التصميم، وليست تفاصيل يمكن تأجيلها إلى ما بعد إنهاء الواجهة.
من أوامر التصميم إلى واجهة متسقة
يعرض الدرس استخدام أوامر نصية أو صوتية لتوليد الواجهات. يمكنك الاستفادة من مراجع بصرية لفهم توزيع العناصر، لكن أنشئ تصميمًا مناسبًا لهويتك ولا تنسخ علامات أو أصولًا لا تملك حق استخدامها.
راجع الخطوط والتباين والمسافات وسهولة الضغط على الأزرار. إذا كان التطبيق عربيًا، افحص اتجاه القراءة وترتيب الأيقونات والحقول، لا الترجمة وحدها.
تحويل التصميم إلى Flutter وDart
ينتقل التطبيق من الشكل إلى كود Flutter. لا تعتبر تطابق لقطة الواجهة دليلًا على اكتمال البرنامج؛ يجب أن تعمل التنقلات والتحميل وعرض المحتوى على الجهاز المستهدف.
اطلب تنفيذ شاشة أو وظيفة صغيرة ثم اختبرها. راجع التغييرات قبل إضافة وظائف جديدة حتى لا تتراكم أخطاء يصعب تحديد مصدرها. احتفظ بنسخة مستقرة من المشروع قبل أي تعديل كبير.
جلب مقالات WordPress
يتناول الفيديو سحب محتوى الموقع وعرضه داخل التطبيق. حدد الحقول المطلوبة مثل العنوان والصورة والرابط والمحتوى، وتعامل مع العناصر الناقصة بدل افتراض أن كل مقال يحتوي على الصورة والتنسيق نفسيهما.
اختبر مقالات قصيرة وطويلة، ونصوصًا عربية وروابط وصورًا متعددة. اعرض حالة تحميل ورسالة خطأ مفهومة، ولا تترك شاشة فارغة تجعل المستخدم يظن أن التطبيق توقف دون سبب.
استخدام الوكيل في تصحيح الأخطاء
يعرض الدرس الاستعانة بالذكاء الاصطناعي وأدوات الربط أثناء التطوير. عند ظهور خطأ، قدم الرسالة والخطوات التي تؤدي إليه، واطلب تفسير السبب وتغييرًا محددًا يمكن اختباره.
لا تعتمد على قول الوكيل إن المشكلة حُلّت. أعد الحالة نفسها على التطبيق، وتأكد أن الإصلاح لم يفسد شاشة أخرى. التحقق الفعلي أهم من طول الشرح البرمجي.
اختبار APK قبل التفكير في النشر
يتضمن التطبيق تصدير APK وتثبيته على أندرويد للاختبار. راجع فتح التطبيق والتنقل والعودة والتحميل مع اتصال ضعيف، وكذلك عرض الصور والمقالات على مقاسات شاشة مختلفة.
بناء نسخة اختبار ليس نشرًا جاهزًا للمتجر. قبل أي إصدار عام تحتاج إلى مراجعة الخصوصية والصلاحيات والأمان وسياسات التوزيع المناسبة. يساعد الذكاء الاصطناعي في التنفيذ، لكنه لا يلغي مسؤوليتك عن جودة التطبيق وبيانات مستخدميه.
مثال تخطيط عملي لشاشة المقالات
للتطبيق على مشروعك، وهذا مثال تحريري مقترح: اجعل كل بطاقة تعرض عنوان المقال وصورته إن وجدت ومقتطفًا قصيرًا. عند الضغط عليها، افتح شاشة التفاصيل التي تعرض العنوان والمحتوى والرابط الأصلي. لا تنسخ أسماء حقول تقنية مفترضة؛ طابق البيانات مع الاستجابة الفعلية لمصدر موقعك.
حدد أربع حالات للواجهة: أثناء التحميل يظهر مؤشر واضح، وعند نجاح الطلب تظهر البطاقات، وعندما لا توجد مقالات تظهر رسالة مناسبة، وعند فشل الاتصال يظهر زر إعادة المحاولة. إذا غابت الصورة، يجب أن تبقى البطاقة مقروءة دون مساحة مكسورة.
اختبر مقالًا بعنوان طويل وآخر بلا صورة وثالثًا يحتوي على روابط وصور داخل النص. ثم أغلق الاتصال وأعد فتح الشاشة. هذه اختبارات صغيرة تكشف مشاكل لا تظهر في التصميم الثابت، ويمكنك تحويل كل نتيجة متوقعة إلى طلب محدد لوكيل البرمجة.
