كيفية استخدام Bubble: دليل خطوة بخطوة في عام 2025

هل ترغب في إنشاء تطبيق ولكنك تعتقد أنك بحاجة إلى معرفة الكثير من البرمجة؟

هذه مشكلة كبيرة.

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

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

والآن، إليكم الحل: الفقاعات. 

سنوضح لك كيفية استخدام الفقاعات.

فقاعة

توقف عن المعاناة مع قواعد البيانات المعقدة. يتيح لك Bubble إدارة بيانات تطبيقك بشكل مرئي. ابدأ ببناء تطبيقك القائم على البيانات اليوم!

جرب بابل مجاناً اقرأ المراجعة الكاملة

إعداد حسابك على Bubble

الوصول إلى موقع Bubble الإلكتروني

الخطوة الأولى لبناء تطبيقك هي الوصول إلى موقع Bubble الإلكتروني.

افتح متصفح الويب المفضل لديك - هذا هو البرنامج الذي تستخدمه لعرض مواقع الويب.

من بين المتصفحات الشائعة: كروم، فايرفوكس، سفاري، أو إيدج. في شريط العناوين بالأعلى، اكتب "bubble.io" واضغط على زر الإدخال (Enter).

سينقلك هذا مباشرةً إلى الصفحة الرئيسية لـ Bubble.

ابحث عن زر مكتوب عليه شيء مثل "التسجيل" أو "البدء" أو "إنشاء حساب".

هذه هي تذكرتك لبدء البناء.

التسجيل للحصول على حساب مجاني

يؤدي النقر على هذا الزر إلى بدء عملية التسجيل.

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

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

اختر كلمة مرور قوية - مزيج من الأحرف والأرقام والرموز هو الأفضل - واكتبها في مكان آمن حتى لا تنساها.

قد يطرح عليك تطبيق Bubble بعض الأسئلة الأخرى، مثل ما تخطط لاستخدام Bubble من أجله.

لا تقلق؛ فقط اختر الخيار الذي يبدو الأقرب إلى ما تريد القيام به.

فهم واجهة الفقاعات

بمجرد تسجيل الدخول، سترى واجهة Bubble.

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

أهم الأجزاء هي:

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

بناء الصفحة الأولى لتطبيقك

التعرف على المحرر المرئي

المحرر المرئي هو المكان الذي ستصمم فيه فعليًا شكل تطبيقك.

إنها أشبه بلوحة بيضاء. على الجانب الأيسر من الشاشة، سترى مجموعة من الأدوات تسمى "العناصر".

هذه عناصر يمكنك سحبها وإفلاتها على صفحتك. فكّر فيها كأنها لبنات بناء رقمية.

لديك مربعات نصية للكلمات، وأزرار للنقر عليها، وصور لعرض الصور، وغير ذلك الكثير.

إضافة النصوص والأزرار

لنبدأ بشيء بسيط.

لإضافة نص، انقر على عنصر "النص" واسحبه إلى منتصف صفحتك.

الآن، يمكنك كتابة ما تريد فيه. 

ربما شيء مثل "مرحباً بك في تطبيقي!" أو "انقر على الزر أدناه."

والآن، لنضف زرًا.

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

جرب شيئًا مثل "ابدأ" أو "انقر هنا".

تصميم تخطيط الصفحة

قد تلاحظ الآن أن الأمور فوضوية بعض الشيء.

لا تقلق، يمكننا إصلاح ذلك. يمكنك النقر وسحب العناصر لتحريكها.

هل ترى تلك الخطوط الزرقاء التي تظهر عند السحب؟

إنهم يساعدونك في ترتيب الأمور. 

حاول تحريك النص والزر حتى يبدوا بشكل جيد.

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

إضافة الوظائف الأساسية

فهم سير العمل

حسنًا، لقد جعلنا تطبيقنا يبدو جميلًا.

لكن كيف نصنع ذلك؟ يفعل شئ ما؟

وهنا يأتي دور سير العمل. سير العمل يشبه مجموعة من التعليمات.

يخبر هذا التطبيق بما يجب فعله عندما ينقر شخص ما على زر أو يقوم بشيء آخر.

جعل زر يقوم بشيء ما

لنجعل زرنا يقوم بشيء بسيط.

انقر على الزر الذي أنشأته. ثم ابحث عن علامة تبويب مكتوب عليها "سير العمل".

انقر على ذلك. الآن، سترى زرًا مكتوبًا عليه "انقر هنا لإضافة حدث".

"أن حدث هذا ما يبدأ سير العمل. انقر على هذا الزر.

اختر "إجراءات العنصر" ثم انقر.

الآن، نحتاج إلى إخبار التطبيق بما يجب فعله عند النقر على الزر.

لنجعلها تعرض رسالة. انقر على "إضافة إجراء".

ستظهر لك قائمة بالوظائف التي يمكن لتطبيقك القيام بها. ابحث عن "تنبيه" وانقر عليه. في مربع النص، اكتب الرسالة التي تريد عرضها. على سبيل المثال، "لقد نقرت على الزر!"

الآن، عندما ينقر أحدهم على الزر، ستظهر نافذة صغيرة تحتوي على رسالتك. هذه هي أولى خطوات سير العمل!

إضافة حقول الإدخال

حقول الإدخال هي الأماكن التي يمكن للمستخدمين فيها كتابة المعلومات.

تخيلها كصناديق نصية حيث يمكن للأشخاص كتابة أسمائهم أو عناوين بريدهم الإلكتروني أو أي شيء آخر.

لإضافة حقل إدخال، انقر على عنصر "Input" واسحبه إلى صفحتك.

تمامًا كما هو الحال مع النصوص والأزرار، يمكنك تحريكها وتغيير حجمها.

يمكنك أيضًا تغيير نوع المعلومات التي يتوقعها حقل الإدخال.

انظر إلى محرر الخصائص. يمكنك اختيار ما إذا كان مخصصًا للنصوص أو الأرقام أو رسائل البريد الإلكتروني أو كلمات المرور.

ربط الصفحات والتنقل

إنشاء صفحات متعددة

تحتوي معظم التطبيقات على أكثر من صفحة واحدة.

قد يكون لديك صفحة رئيسية، أو صفحة ملف تعريف، أو صفحة إعدادات.

لإنشاء صفحة جديدة، ابحث عن زر أو رابط مكتوب عليه "صفحة جديدة" أو شيء مشابه.

انقر عليه، وستحصل على صفحة جديدة فارغة.

أعطه اسمًا، مثل "الملف الشخصي" أو "الإعدادات".

ربط الصفحات بالأزرار

والآن، دعونا نجعل الأمر بحيث يمكن للأشخاص التنقل بين الصفحات.

يمكننا فعل ذلك باستخدام الأزرار. ارجع إلى صفحتك الأولى.

اسحب زرًا إلى الصفحة. في مسار عمل الزر، أضف إجراءً جديدًا.

هذه المرة، اختر "التنقل" ثم "الانتقال إلى الصفحة".

ثم اختر الصفحة التي تريد أن ينقل الزر الأشخاص إليها. 

الآن، عندما ينقر شخص ما على هذا الزر، سينتقل إلى الصفحة الأخرى.

إنشاء قائمة تنقل

إذا كان لديك الكثير من الصفحات، فقد يكون من المفيد وجود قائمة تنقل.

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

لإنشاء قائمة تنقل، أضف عنصر "Group" إلى أعلى صفحتك.

ثم أضف بعض الأزرار داخل المجموعة.

اجعل كل زر يؤدي إلى صفحة مختلفة، تمامًا كما فعلنا سابقًا. الآن، لديك طريقة سهلة للتنقل داخل تطبيقك.

نقل البيانات بين الصفحات

في بعض الأحيان، قد ترغب في إرسال معلومات من صفحة إلى أخرى.

على سبيل المثال، إذا كان لديك صفحة تعريفية، فقد ترغب في إرسال اسم المستخدم من الصفحة الرئيسية إلى صفحة التعريف.

للقيام بذلك، تحتاج إلى استخدام شيء يسمى "معلمات الصفحة".

عند إنشاء زر ينتقل إلى صفحة أخرى، يمكنك إضافة معلمة إلى عنوان URL. 

هذا يشبه إضافة علامة صغيرة تخبر الصفحة بالمعلومات التي يجب عرضها.

في الصفحة التي ترسل إليها البيانات، يمكنك استخدام المعلمة لعرض المعلومات.

على سبيل المثال، يمكنك إضافة عنصر نصي وإخباره بعرض اسم المستخدم من المعلمة.

الآن، ستعرض صفحة الملف الشخصي الاسم الصحيح.

اختبار ومعاينة تطبيقك

كيفية معاينة عملك

حسنًا، لقد قمت بإنشاء بعض الصفحات وإضافة بعض الإجراءات. 

الآن، تريد أن ترى كيف يبدو تطبيقك وكيف يعمل.

تطبيق Bubble يجعل الأمر سهلاً. ابحث عن زر مكتوب عليه "معاينة" أو شيء مشابه.

عادة ما يبدو كزر تشغيل.

انقر عليه، وسيفتح تطبيق Bubble علامة تبويب جديدة في متصفحك لعرض تطبيقك.

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

اختبار سيناريوهات مختلفة

عند معاينة تطبيقك، لا تنقر عشوائياً.

حاول التفكير في طرق مختلفة قد يستخدم بها الناس تطبيقك.

انقر على كل زر. اكتب في كل حقل. شاهد ما يحدث عندما تقوم بأشياء مختلفة.

على سبيل المثال، إذا كانت لديك صفحة تسجيل دخول، فحاول كتابة كلمة المرور الخاطئة.

تحقق مما إذا كان تطبيقك يعرض رسالة خطأ.

إذا كان لديك زر لحفظ البيانات، فتحقق من قاعدة البيانات للتأكد من حفظ البيانات بشكل صحيح.

تصحيح الأخطاء الشائعة

أحيانًا، لا تسير الأمور على ما يرام. لا بأس بذلك.

يحدث هذا للجميع. عندما تجد مشكلة، تُسمى "خطأً برمجيًا". لإصلاح خطأ برمجي، عليك "تصحيحه".

يحتوي تطبيق Bubble على بعض الأدوات التي يمكن أن تساعدك في العثور على الأخطاء.

ابحث عن أداة تسمى "المصحح".

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

تشمل المشاكل الشائعة ما يلي:

• الأزرار لا تعمل.
• لم يتم حفظ البيانات بشكل صحيح.
• الصفحات لا يتم تحميلها.
• رسائل الخطأ.

بدائل الفقاعة

أبحث عن شيء آخر بدائل الفقاعات في مجال تطوير التطبيقات بدون كتابة أكواد أو باستخدام أكواد قليلة؟

إليك بعض الخيارات الشائعة:

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

خاتمة

لقد نجحت! أنت الآن تفهم كيفية استخدام أساسيات برنامج Bubble.

لقد قدم لك هذا الدليل دورة مكثفة، ولكن لا يزال هناك الكثير مما يمكنك فعله.

لا تحتاج إلى سطر واحد من التعليمات البرمجية.

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

لا تخف من البحث يوتيوب أو دروس Bubble.io لمزيد من الشروحات.

يمكنك العثور على الكثير من الموارد وأفضل الممارسات للمبتدئين.

يُعد سوق Bubble مكانًا رائعًا للعثور على المساعدة.

الأسئلة الشائعة