يمكنك إنشاء لعبة للأطفال باستخدام Gemini ونشرها باستخدام Firebase.

1. مقدمة

في 25 مارس 2025، أطلقت Google Gemini 2.5. من أبرز الجوانب التي لا تُنسى في هذا الإطلاق أنّه أتاح للجميع تجربة ميزة "الترميز المتقدّم" [ فيديو]:

‫Gemini 2.5: إنشاء لعبة ديناصورات خاصة بك من خلال طلب بسيط

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

أهداف الدورة التعليمية

استخدام Gemini 2.5 لإنشاء رمز تعريفي لتطبيق ألعاب
اختبِر الرمز على p5js.org
كيفية تكرار الطلب أو التطبيق وتحسينه
كيفية استضافة تطبيق ثابت على Firebase

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

2. المتطلبات الأساسية

ينقسم هذا الدرس التطبيقي حول الترميز إلى مرحلتَين:

تطوير المحتوى على الويب فقط: هذا هو المكان الذي ستحظى فيه بأكبر قدر من المرح، ولا تحتاج إلى أي مهارات في الترميز. سنستخدم واجهة مستخدم Gemini ‏ ( gemini.google.com) وp5.js.
بيئة الترميز المحلية هنا تحتاج إلى بعض المهارات في الترميز أو كتابة البرامج النصية، بالإضافة إلى تثبيت npm / npx واستخدامهما ومحرّر محلي، مثل vscode أو IntelliJ أو أي شيء آخر. هذا الجزء الثاني اختياري ولا يلزم إلا إذا أردت أن يظل تطبيقك متاحًا ليتمكّن أصدقاؤك وأفراد عائلتك من تشغيله على الأجهزة الجوّالة أو أجهزة الكمبيوتر.

الشرط الأساسي الوحيد للمرحلة 1 هو متصفّح وجهاز كمبيوتر (ستساعدك شاشة كبيرة). للاطّلاع على تفاصيل المرحلة 2، يُرجى مواصلة القراءة.

واجهة مستخدم Gemini

gemini.google.com هي منصة رائعة يمكنك من خلالها تجربة جميع أحدث نماذج Gemini، كما يمكنك إنشاء الصور والفيديوهات الخاصة بك. يأتي هذا التطبيق مزوّدًا بميزات متكاملة من Google، مثل "خرائط Google" و"فنادق Google" و"رحلات جوية من Google" و"مراجعات Google"، ما يجعله الرفيق المثالي للتخطيط لعطلتك القادمة.

ملاحظة: إذا كنت مهتمًا بالترميز، ننصحك أيضًا بتجربة AI Studio، وهي واجهة مشابهة تتيح لك إنشاء نموذج أولي لتفاعل مع نموذج لغوي كبير (مثل إنشاء صورة)، والحصول على رمز Python مباشرةً من الصفحة.

p5.js

‫p5.js هي مكتبة JavaScript مجانية ومفتوحة المصدر تتيح الترميز الإبداعي للفنانين والمصمّمين والمعلّمين وأي شخص آخر. وهي تستند إلى لغة Processing وتسهّل عملية إنشاء محتوى مرئي وتفاعلي باستخدام الرموز البرمجية في متصفّح الويب.

الترميز المحلي [اختياري]

إذا كنت تريد إبقاء تطبيقك قيد التشغيل، عليك إجراء المزيد من عمليات الإعداد:

أداة تعديل الرموز البرمجية المحلية ( Visual Studio Code أو IntelliJ أو غيرهما)
حساب git ( github / gitlab / bitbucket) حيث يتم الاحتفاظ برمزك.
npm مثبَّتة محليًا، ويفضّل أن تكون في مساحة المستخدم (عبر npx أو تكنولوجيا مماثلة).

بالإضافة إلى ذلك، سنُعدّ حساب Firebase لاحقًا.

نحتاج أيضًا إلى بعض مهارات الترميز، مثل:

إمكانية تثبيت حزمة npm
إمكانية التفاعل مع نظام الملفات (إنشاء مجلدات وملفات)
إمكانية التفاعل مع git (git add وgit commit وgit push)

إذا كان أي من هذه الأمور يبدو صعبًا، تذكَّر أنّ النماذج اللغوية الكبيرة يمكن أن تساعدك في ذلك. يمكنك استخدام النموذج "Gemini 2.0 flash" أو نموذج مشابه، مثلاً للحصول على اقتراحات. إذا كان هذا التمرين لا يزال صعبًا جدًا، يمكنك تخطّي المرحلة 2 بالكامل. يجب أن تكون المرحلة 1 مجزية بما يكفي.

3- لننشئ لعبتنا الأولى.

افتح gemini.google.com واختَر نموذجًا يمكنه التعامل مع الرموز البرمجية، مثل 2.5. قد يختلف هذا الخيار حسب التوفّر والتكلفة والتاريخ. في وقت كتابة هذا المقال، سيكون الخيار الأفضل هو:

‫Gemini 2.5 Flash (تكرار أسرع)
‫Gemini 2.5 Pro (نتائج أفضل)

يمكنك الاطّلاع على مزيد من المعلومات حول نماذج Gemini هنا.

أول طلب للعبة

كما تلاحظون من هذا الفيديو، يمكن أن يكون الطلب الأوّلي بسيطًا على النحو التالي:

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

يمكنك تخصيص هذا النموذج قليلاً:

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

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

في النهاية، يجب أن يكون لديك رمز JavaScript صالح.

يمكنك الآن النقر على زر النسخ في أعلى الصفحة:

اختبار اللعبة على p5.js

حان الوقت الآن لاختبار اللعبة.

افتح محرِّر p5.js على الرابط التالي: https://editor.p5js.org/
اختَر رمز sketch.js الحالي واحذفه.
لصق الرمز

يجب أن تبدو صفحتك على النحو التالي:

أخيرًا، يمكنك الضغط على الزر تشغيل.

يمكن أن يحدث أحد الأمرين: إما أن يعمل الرمز أو لا يعمل. اتّبِع التعليمات التالية حسب كلتا الحالتين:

تعذُّر تنفيذ الرمز
يعمل الرمز في المحاولة الأولى.

لنطّلع في الفقرتَين التاليتَين على كيفية إدارة كلتا الحالتَين.

(الحالة 1) يتعذّر تنفيذ الرمز

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

(الحالة 2) الرمز يعمل

إذا كان الرمز يعمل، ستظهر لك لعبة مرئية في أقصى يسار الصفحة.

👏 تهانينا، أنت بصدد تشغيل أول لعبة تستخدم الذكاء الاصطناعي.

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

يمكنك الآن الانتقال إلى الفصل التالي.

التكرارات اللاحقة

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

The game is great, thanks! Please allow for my character to double jump.

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

ملاحظة: يميل Gemini إلى تقديم التغيير الذي عليك تطبيقه فقط (مثلاً، هذا هو التغيير المطلوب في الدالة XYZ). يمكنك ضبط الطلب ليعرض لك الرمز المعدَّل بالكامل بدلاً من ذلك، وذلك باستخدام عبارة مثل

"Please give me the entire updated code, not just the changed function"

. سيؤدي ذلك إلى تسهيل تجربة القص واللصق.

المحاذير

قد تحتاج إلى وضع إشارة مرجعية على محادثة Gemini. يمكنك إعادة تسميته إلى "p5js my first game"، أو تدوين الرابط الثابت إلى Gemini، مثل " https://gemini.google.com/app/abcdef123456789" لاستخدامه لاحقًا.

4. لننفّذ هذا الرمز برمجيًا على جهازك

في هذه المرحلة، يجب أن يتوفّر لديك ما يلي:

نافذة متصفّح Gemini مفتوحة تعرض بعض الرموز البرمجية التي تعمل
نافذة متصفّح مفتوحة p5.js تحتوي على لعبة تعمل
بيئة ترميز محلية مثبَّت عليها npm

هذا هو الجزء الأكثر صعوبة في الدرس العملي. يجب أن تتوفّر لديك خبرة أساسية في الترميز.

تثبيت التبعيات

إذا لم يكن لديك npm وnode، ننصحك بتثبيت npm من خلال أحد برامج إدارة الإصدارات، مثل nvm . اتّبِع تعليمات التثبيت الخاصة بنظام التشغيل.

نفترض أيضًا أنّك تستخدم بيئة تطوير متكاملة للترميز. سنستخدم رمز Visual Studio في لقطات الشاشة والأمثلة، ولكن يمكن استخدام أي شيء.

إعداد البيئة المحلية

هذه هي اللحظة التي يمكنك فيها إنشاء بنية الملفات الخاصة بك.

يتم تقديم نص إعداد لأغراض توضيحية. يمكنك إجراء ذلك يدويًا من خلال إنشاء مجلدات وملفات:

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

يجب أن يبدو هيكل المجلد النهائي على النحو التالي:

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

من المفترض أن تتمكّن من العثور على هذا الخيار هنا أيضًا.

الآن، افتح أداة تعديل الرموز المفضّلة لديك (مثل code my-first-vibecoding-project/) وابدأ في لصق محتوى editor.p5js.org في الملفات الثلاثة ضمن public/:

README.md ← يمكنك هنا وضع الرابط الثابت لمحادثة Gemini، وهنا ستضع الصفحة المقصودة للتطبيق عندما يتوفّر.
PROMPT.md ← هنا، يمكنك إضافة جميع الطلبات، مع الفصل بينها بفقرة H2. إذا أردت توضيح سبب تقديم طلب معيّن، يمكنك وضع طلبك بين 3 علامات اقتباس معكوسة ( example).
**public/index.html** ← انسخ رمز HTML هنا
**public/sketch.js** ← الصِق رمز JavaScript هنا
**public/style.css** ← انسخ رمز CSS هنا

قد يستضيف المجلد العام مواد عرض إضافية، مثل ملف PNG مخصّص.

5- إعداد التطبيق ونشره على Firebase

إعداد Firebase (للمرة الأولى فقط)

تأكَّد من تثبيت npm على جهازك.

في نافذة الوحدة الطرفية، اكتب أحد الخيارَين التاليَين (كلاهما يعمل):

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

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

إعداد Firebase

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

تأكَّد من أنّك في الدليل الذي يقع مباشرةً فوق الدليل public/ الذي يحتوي على ملفاتك. يجب أن تعرض البطاقة (ls -al أو dir) محتوًى مشابهًا لما يلي:

$ ls 
PROMPT.md
README.md
public/

[الخطوة 1] في وحدة التحكّم، اكتب: firebase init

انتقِل باستخدام المؤشرات إلى "الاستضافة: .." واكتب SPACE ثم ENTER. (لماذا؟ بما أنّ هذا السؤال متعدّد الخيارات، عليك اختيار إجابة والانتقال إلى الصفحة التالية)
[الخطوة 2] يمكنك الآن اختيار مشروع حالي (الخيار 1) أو إنشاء مشروع جديد (الخيار 2):

ملاحظة: إذا كان لديك مشروع حالي على السحابة الإلكترونية، قد لا يكون مشروعًا على Firebase. مشاريع Firebase هي مجموعة فرعية من مشاريع Google Cloud Platform. عليك إجراء خطوات إضافية لتحويلها إلى مشروع Firebase، وهذا هو الغرض من (الخيار 3).
إذا لم تكن متأكدًا، استخدِم الخيار "إنشاء مشروع جديد" وأضِف اسمًا مثل "p5js-YOURNAME-YOURAPP" (مثلاً، "p5js-riccardo-tetris").

[الخطوة 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
اضغط على ENTER.

[الخطوة 4] ? What do you want to use as your public directory? (public)
اضغط على ENTER (لقد أعددنا public/ عن قصد)

[الخطوة 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
اضغط على ENTER (لا)

[الخطوة 6] ? Set up automatic builds and deploys with GitHub? No
اضغط على ENTER - NO

[الخطوة 7] ? File public/index.html already exists. Overwrite? (y/N)
اضغط على مفتاح ENTER (لا).
تحذير قد يكون هذا الإجراء عرضة للأخطاء، فإذا أعدت الكتابة فوقه، لن يكون ملف index.html الجديد متوافقًا مع p5js.

إذا سارت الأمور على ما يرام، من المفترض أن يظهر لك ما يلي:

من المفترض أن تكون هذه الإجراءات قد أنشأت بعض الملفات:

.firebaserc
.gitignore
firebase.json
public/404.html

على وجه الخصوص، يجب أن يحتوي .firebaserc على رقم تعريف مشروعك الذي يمكنك استرداده آليًا باستخدام ما يلي: cat .firebaserc | jq .projects.default -r

تحذير: راجِع index.html. إذا كان أطول من 16 سطرًا و/أو يتضمّن كلمة firebase، يعني ذلك أنّك استبدلت ملفات p5js عن طريق الخطأ. لا مشكلة، ما عليك سوى استعادة ملف index.html القديم من git أو من محرر p5js.

الاختبار المحلي

لتقليل وقت استجابة حلقة الملاحظات، يمكنك تجربة بعض الإجراءات على جهازك أولاً.

لإجراء ذلك، يمكنك تجربة مجموعة أدوات سطر الأوامر الفعّالة من فريق Firebase. على سبيل المثال:

$ firebase emulators:start

يجب بدء تشغيل خادم ويب على المنفذ 5000 ( http://127.0.0.1:5000/ ) لتتمكّن من الاختبار محليًا قبل إرسال التغييرات.

النشر على Firebase

حان الوقت الآن لتنفيذ الأمر الأخير:

$ firebase deploy

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

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

من المفترض أن يظهر لك عنوان URL الخاص بالاستضافة. ننصحكم بتجربتها.

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

افتح "أدوات المطوّرين" في المتصفّح وابحث عن الخطأ، ثم اطلب من Gemini مساعدتك في إصلاحه من خلال طلب مثل هذا:

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

♾️ كرِّر العملية

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

من المهم ملاحظة ما يلي:

تكون حلقة التكرار أسرع بكثير في Gemini > p5.js > حلقة Gemini مقارنةً بـ Gemini > المضيف المحلي > النشر على Cloud Run > اختبار التطبيق على المتصفّح (إعادة التحميل).
استخدِم Git للتحكّم في إصدار كلّ من الطلب والرمز البرمجي. قد تحتاج إلى الرجوع إلى الطلب N والرمز N. يجب بشكل خاص تنفيذ الأمر git commit لكل sketch.js تدفعه، لأنّ الأخطاء قد تكون مختبئة بدون أن يتم رصدها.

يُرجى العِلم أنّ بعض الألعاب تعمل بشكل جيد مع لوحة المفاتيح ولكنّها لا تعمل بشكل جيد مع الماوس أو النقر على الهاتف الجوّال. هذا هو الوقت المناسب لتحسين الرمز.

6. نصائح حول تحفيز النقاش

إليك بعض النصائح من تجربة إنشاء العديد من الألعاب.

تحديد إصدار لطلبك

من المحتمل أن تجد أخطاءً في الطلب الأصلي. أن يكون لديك إصدار git منه تتوفّر هنا بعض مسارات الرموز:

إذا أعجبك ما تراه وأردت تكرار العملية مع Gemini باستخدام طلبات فرعية لاحقة، قد يكون من المفيد تتبُّعها كلها في مكان ما (الطلب 1 و2 و3 - مثال 3-shot1 - example2).
إذا لم تكن مهتمًا بالتطبيق الذي تم إنشاؤه من خلال الطلب 1، قد يكون من الأفضل تحسين الطلب والتخلّي عن الرمز وإعادة البدء بالرمز المعدَّل (الطلب 1 الإصدار 1، والطلب 1 الإصدار 2، والطلب 1 الإصدار 3، وما إلى ذلك).

يمكنك بالطبع الجمع بين الطريقتَين.

وظائف الأجهزة الجوّالة

استنادًا إلى اللعبة التي تنشئها، قد تحتاج إلى بعض التفاعل مع المستخدم. هل يتطلّب هذا التفاعل استخدام لوحة مفاتيح؟ أو هل يمكن استخدامها من خلال النقر على الشاشة فقط (مثلًا، باستخدام جهاز جوّال)؟ احرص على توضيح ذلك في الطلب. قد تحتاج إلى إنشاء بعض الأزرار على لوحة المفاتيح (راجِع مثال Tetris 3D). يُرجى الاطّلاع أيضًا على dungemoji بشأن التوافق مع الأجهزة الجوّالة.

إرسال ملاحظات بشأن أخطاء JavaScript ولقطات الشاشة مباشرةً إلى Gemini

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

7. تهانينا!

🎉 تهانينا على إكمال الدرس العملي.

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

المواضيع التي تناولناها

إنشاء لعبة باستخدام Gemini 2.5
النشر على Firebase

حان الوقت الآن 👥 للتفاخر بهذا الإنجاز! لماذا لا تشارك أحدث ألعابك (your-project.web.app) على Linkedin أو Twitter باستخدام الهاشتاغ #VibeCodeAGameWithGemini (وربما الإشارة إلى المؤلف على Linkedin)؟ سيسمح لنا ذلك بمعرفة مدى جاذبية هذا الدرس التطبيقي حول الترميز، وقد نكتب المزيد من هذا النوع.

أريد المزيد!

إذا كنت تبحث عن مراجع إضافية، اطّلِع على هذه الألعاب والطلبات:

يمكنك إنشاء خمس ألعاب للأطفال باستخدام Gemini 2.5 وp5.js في عطلة نهاية الأسبوع! ستساعدك هذه المقالة في التعرّف على عملية البرمجة الوصفية في لعبة من خلال 6 أمثلة.
‫palladius/genai-googlecloud-scripts (مستودع GitHub يحتوي على حوالي 10 تطبيقات - الرمز والطلب): Tetris وPacman وConnect 4 وحتى نسخة طبق الأصل من Rogue لمحبي الألعاب القديمة يحتوي هذا الملف على طلبات جميع هذه الألعاب. اختَر أغنيتك المفضّلة وعدِّل الطلب واستمتِع بالأجواء!

في ما يلي بعض الأمثلة على الألعاب التي يمكنك إنشاؤها:

قد تبدو اللعبة النهائية على النحو التالي:

لعبة Tetris ثلاثية الأبعاد
لعبة لغوية
نسخة طبق الأصل غير مصرح بها
لعبة مشابهة للعبة Pac-Man

أكرّر أنّ الحدّ الأقصى هو اللغة الإنجليزية.

🎉 نتمنّى لك التوفيق في البرمجة.