بناء تطبيق رسم وتلوين للأطفال باستخدام Nano Banana Pro وGemini وFlutter

تجربة عملية من الفكرة حتى إنشاء ملف APK جاهز للتثبيت

السلام عليكم ورحمة الله وبركاته، أتمنى أن تكونوا بخير يا شباب.

في تدوينة اليوم بإذن الله سأشارك معكم تجربة ممتعة جدًا: كيفية بناء تطبيق رسم وتلوين للأطفال باستخدام الذكاء الاصطناعي، بداية من تصميم الواجهة بواسطة Nano Banana Pro، مرورًا بتحويل التصميم إلى كود باستخدام Anti-Gravity + Gemini، ثم دمجه داخل مشروع Flutter، وأخيرًا تصديره كتطبيق APK جاهز للعمل على الهاتف.

الفكرة ممتعة وبسيطة، ويمكن لأي شخص—even بدون خبرة كبيرة بالبرمجة—أن ينفذها خطوة بخطوة. والجميل في الموضوع أننا سنعتمد على أدوات ذكاء اصطناعي قوية ستسهّل علينا 70% من العمل.

لنبدأ على بركة الله. 

أولاً: تصميم واجهة التطبيق باستخدام Nano Banana Pro

بداية المشروع تبدأ من شكل التطبيق نفسه. بدلًا من تصميم وجهات بشكل يدوي أو عبر برامج معقدة، سنعتمد على أداة مذهلة داخل Google Create (أو Google Stitch) وهي:

🔹 Nano Banana Pro

وهو نظام ذكاء اصطناعي لتوليد التصميمات (UI) بشكل احترافي ومباشر.
كل ما عليك فعله هو كتابة البرومبت المناسب، وسيقوم هو بتوليد تصميم متكامل للتطبيق.

مثال البرومبت المستخدم:

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

 

بعد الضغط على Redesign for Nano Banana Pro، سيتم توليد مجموعة تصميمات جاهزة.
وبالفعل ظهرت صفحات التطبيق كالآتي:

• صفحة ترحيبية: "مرحبًا يا بطل!"

• صفحة الرسم

• صفحة التلوين

• صفحة مقارنة بين الرسم الأصلي والنسخة الملونة

التصميمات كانت جميلة، مناسبة جدًا للأطفال، وخالية تقريبًا من الأخطاء، وهو ما جعل الخطوة التالية سهلة جدًا.

بعد ذلك قمنا بتحميل جميع صور التصميم (6 صور تقريبًا) ووضعناها في ملف خاص على الجهاز ليتم استخدامها في الخطوات التالية.

ثانيًا: تجهيز مشروع Flutter داخل Anti-Gravity

المرحلة التالية هي تحويل هذه التصميمات إلى تطبيق حقيقي.

سنستخدم:
🔹 Anti-Gravity
خطوات التجهيز:
CTRL + SHIFT + P → Flutter: New Project
نقوم بتشغيله على متصفح كروم فقط للمعاينة، ثم نبدأ المرحلة الحقيقية.

وهو محرر ذكي يجمع بين البرمجة وأدوات Gemini بطريقة رائعة.

1. إنشاء فولدر جديد على سطح المكتب وليكن اسمه AI_Draw_App.

2. فتح Anti-Gravity واختيار Open Folder ثم تحديد هذا المجلد.

3. اختيار نموذج Gemini 3 Pro High ليكون هو المسؤول عن كتابة الأكواد.

4. تثبيت إضافة Flutter داخل Anti-Gravity (إن لم تكن مثبتة).

5. إنشاء مشروع Flutter جديد عبر:
   

بعد إتمام هذه الخطوة سيظهر المشروع الافتراضي المعروف (عداد الضغط).

 ثالثًا: رفع التصميمات وتحويلها إلى تطبيق فعلي

داخل Anti-Gravity نستخدم ميزة Planning حتى يفهم Gemini هيكلة المشروع ويعمل عليها بترتيب.

ثم نرفع صور تصميم Nano Banana عبر أيقونة +، لكن لاحظنا أنه لا يسمح إلا بـ 5 صور دفعة واحدة، لذلك رفعناها على دفعات.

بعد ذلك نرسل له البرومبت الرئيسي:

"قم بتحويل هذه التصميمات إلى تطبيق حقيقي باستخدام Flutter،

واستخدم مفتاح API الخاص بـ Gemini لتنفيذ مهام تحليل الصور وتوليد الاستجابات."

ننسخ مفتاح Gemini من Google AI Studio ونضعه في البرومبت.

Gemini يبدأ بعدها ببناء:

• صفحة البداية

• صفحة الرسم مع أداة الفرشاة وخيارات الألوان

• صفحة تحويل الرسم إلى شكل واقعي

• صفحة تلوين

• صفحة مقارنة الصور

وبالفعل نجح في إنشاء التطبيق مع نفس التصميم تقريبًا.

 رابعًا: معالجة مشكلة "تحويل الرسم إلى صورة حقيقية"

عند تجربة ميزة “حوّل رسمة إلى حقيقة”، ظهرت مشكلة:

• نموذج Gemini حاول استخدام Imagen 3 أو 4 لتوليد الصور.

• هذه النماذج تحتاج API مدفوع، وبالتالي لم تعمل.

✔️ الحل:

استخدام Pexels API وهي خدمة مجانية لصور عالية الجودة.

كيف تعمل الفكرة؟

1. المستخدم يرسم شكلًا ما—مثل سيارة.

2. Gemini يقوم بتحليل الرسم ويستنتج أنه "سيارة حمراء".

3. Gemini يرسل هذا الوصف إلى Pexels API.

4. Pexels يعيد صورة سيارة مشابهة.

وهكذا نحقق نفس الفكرة بدون توليد صور حقيقية، بل بالاعتماد على صور جاهزة مشابهة.

النتيجة كانت ممتازة خصوصًا للأطفال.

 خامسًا: تصدير التطبيق كملف APK

بعد اكتمال التطبيق وتحسين الصفحات، قمنا بتصديره ليعمل على هواتف أندرويد.

هناك طريقتان:

✔️ 1. عبر Anti-Gravity:
"صدر التطبيق بصيغة APK"
وسيتم توليد الملف تلقائيًا.
✔️ 2. عبر التيرمنال:
flutter build apk --release
build → app → outputs → flutter-apk

اكتب فقط:

افتح Terminal داخل المشروع واكتب:

ستجد ملف APK داخل:

الآن يمكنك:

• تثبيته على هاتفك

• إرساله لأصدقائك

• رفعه على Google Play بعد إضافة بعض التعديلات

 نصائح مهمة قبل التصدير

✔️ يجب تثبيت Android Studio و SDK على جهازك

وإلا فقد تواجه مشاكل أثناء البناء.

✔️ احتفظ بمفتاح Gemini وPexels داخل ملف .env لحماية بياناتك.

✔️ يمكنك إضافة:

• أيقونة للتطبيق من Nano Banana

• صور إضافية

• صفحات جديدة مثل معرض أعمال الطفل

 ختامًا

اليوم أصبح بإمكان أي شخص:
وانتظروني في تدوينات أقوى قادمًا إن شاء الله.

كانت هذه تجربة رائعة لبناء تطبيق متكامل باستخدام الذكاء الاصطناعي دون الحاجة لكتابة الكثير من الأكواد يدويًا.

• تصميم واجهة

• تحويلها لتطبيق

• تشغيل الذكاء الاصطناعي داخله

• وتصديره بصيغة APK

وكل هذا خلال ساعات قليلة فقط!

إذا أعجبك هذا النوع من المحتوى، لا تنسَ دعمي بالاشتراك واللايك،

والسلام عليكم ورحمة الله وبركاته.