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

الدقائق المتبقية: 29

لمحة عن هذا الدرس التطبيقي حول الترميز

تاريخ التعديل الأخير: مايو 13, 2025

تأليف: Riccardo Carlesso

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

1. مقدمة

في 25 آذار (مارس) 2025، أطلقت Google الإصدار Gemini 2.5. من بين الجوانب الأكثر تذكرًا في هذا الإطلاق هو أنّه سمح للجميع بتجربة ميزة "الترميز المتقدّم" [ فيديو]:

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

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

المُعطيات

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

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

إذا أعجبك هذا الدليل التعليمي حول البرمجة، ننصحك بالاطّلاع على Firebase Studio الذي يوفّر تجربة برمجة أنيقة ومتكاملة.

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

يتألّف هذا الدرس التطبيقي حول الترميز من مرحلتين:

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

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

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

gemini.google.com هي منصة رائعة يمكنك من خلالها تجربة أحدث نماذج Gemini، ويمكنك أيضًا إنشاء صور وفيديوهات خاصة بك. يوفّر التطبيق ميزات رائعة تشمل عمليات دمج مع خدمات 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 الحالي واحذِفه.
لصق الرمز

من المفترض أن تظهر صفحتك على النحو التالي:

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

يمكن أن يحدث الآن أمران: إما أن تعمل رمزك البرمجي أو لا تعمل. لنطبّق التعليمات وفقًا لكلتا الحالتَين:

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

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

(الحالة 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 Code في لقطات الشاشة والأمثلة، ولكن يمكنك استخدام أيّ رمز برمجي.

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

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

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

# 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 علامات اقتباس معكوسة ( مثال).
**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

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

ملاحظة: إذا كان لديك مشروع حالي على Cloud، قد لا يكون مشروعًا على 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 - لا

[الخطوة 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.

الاختبار على الجهاز

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

ولإجراء ذلك، يمكنك تجربة مجموعة أدوات CLI القوية من فريق 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 لإنشاء إصدارات من كلّ من الطلب والرمز البرمجي. قد تحتاج إلى الرجوع إلى الطلب ن والرمز ن. ويجب بشكل خاص استخدام git commit مع كل sketch.js يتم دفعه، لأنّه قد تكون هناك أخطاء غير مكتشفة.

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

6. نصائح حول الطلبات

بعض النصائح من خلال إنشاء العديد من الألعاب

إنشاء إصدارات من طلبك

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

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

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

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

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

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

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

7. تهانينا!

🎉 نشكرك على إكمال دورة codelab.

لقد تبيّن لنا مدى سهولة إنشاء لعبة باستخدام 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 لمن يحنّ إلى الماضي يحتوي هذا القسم على طلبات جميع هذه الألعاب. اختَر طلبك المفضّل، وغيِّر الطلب، واستمتع بالتجربة.

إذا كنت تعتقد أنّ ما فعلته اليوم يتطلّب مجهودًا كبيرًا، يمكنك أيضًا تجربة 🔥 استوديو Firebase الذي يتضمّن حلقة الفكرة > الطلب > الرمز البرمجي > التطبيق في نافذة متصفّح واحدة.

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

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

لعبة تيك تاك ثلاثية الأبعاد
لعبة لغوية
نسخة طبق الأصل غير مصرّح بها
نسخة طبق الأصل من Pacman

مرة أخرى، اللغة الإنجليزية هي اللغة الوحيدة المسموح بها.

🎉 مع أطيب التحيّات،

الإبلاغ عن خطأ