جدول المحتويات[يخفي][يعرض]
لقد كنت مؤخرًا مهتمًا بأساليب تطوير الويب بخلاف HTML و CSS و JavaScript.
مع تزايد مشهد عدم وجود رمز ، لم يكن من المستغرب اكتشاف أن هناك عدة بدائل للنُهج القياسية لتطوير تطبيقات الويب.
يجب أن تكون على دراية ببعض منصات CMS الأكثر شهرة ، مثل WordPress الخالية من الأكواد إلى حد كبير. ولكن ، إذا كنت ترغب في إنشاء تطبيقات ويب ، فقد تبدو هذه الأنظمة الأساسية مقيدة.
هنا أقدم لكم Bubble.io ، أحد تطبيقات قوية أداة no-code يتيح لك إنشاء تطبيقات ويب لم يسبق لها مثيل.
دعنا نستكشفها بعمق!
ما هي تفاصيل Bubble.io?
Bubble عبارة عن منصة غير تقنية تجمع بين لغة البرمجة المرئية و إطار تطوير الويب.
يمكن للمستخدمين استخدام أدوات البرمجة هذه لإنشاء تطبيقات فريدة عبر الإنترنت ، وتغيير قواعد البيانات والعمليات ، وإضافة مكونات الصفحة (الصور والنصوص ونماذج الإدخال والخرائط) وتصميم واجهاتهم.
إنه سوق حيث يمكنك اكتشاف القوالب والمكونات الإضافية والخدمات المثالية لمساعدتك في بناء منتجات قوية.
بدون الحاجة إلى إعداد إطار عمل برمجة نموذجي ، يمكنك إنشاء أي شيء من سوق إلى شبكة اجتماعية إلى CRM (إدارة علاقات العملاء) باستخدام Bubble.
يمنح العملاء القدرة على إنشاء تطبيقاتهم وتخصيصها باستخدام واجهة سهلة الاستخدام ومحرر التأشير والنقر.
يمكنك استخدامه مع الخدمات التي توفر واجهة برمجة تطبيقات REST ، مثل Facebook و SQL والتحليلات وتطبيقات الدفع. إنها تمكن المستخدمين من تكريس الوقت لتحسين وظائف ومظهر تطبيقاتهم بحيث تبدو جيدة على الأجهزة اللوحية والأجهزة المحمولة.
إنه مناسب لجميع أحجام الأعمال ، من الصغيرة إلى المتوسطة إلى الكبيرة ؛ ويمكن الوصول إليه لأنظمة Windows و Mac والويب.
ما هي البرمجة المرئية؟
البرمجة المرئية هي في الأساس ما تبدو عليه. بدلاً من البرمجة يدويًا عن طريق كتابة التعليمات البرمجية ، يمكنك القيام بذلك بيانياً بالنقر فوق المكونات وسحبها إلى الصفحات.
لا تنخدع بهذا الوصف المختصر.
إنه ليس مثل أي تطبيق آخر لتقطيع ملفات تعريف الارتباط أو أداة لبناء مواقع الويب صادفتها عبر الإنترنت. يطلب منك معظم منشئي التطبيقات الاعتماد على القوالب الأساسية ولديهم وظائف محدودة للغاية ؛ يسمحون لك فقط بتطوير أنواع معينة من التطبيقات والحد من التخصيص الخاص بك.
على الرغم من أن فكرة "البرمجة المرئية" و "السحب والإفلات" تبدو سهلة في Bubble ، إلا أنها قوية للغاية.
لا تسمح لك بيئة البرمجة المرئية الخاصة به فقط بسحب كائنات مثل النص والرسومات والمدخلات والمزيد إلى الصفحة ، ولكنها تتيح لك أيضًا تكوين ما تفعله هذه العناصر.
ماذا تفعل Bubble؟
الهدف الأساسي لـ Bubble هو تمكين أي شخص من إنشاء تطبيقات الويب دون الحاجة إلى كتابة تعليمات برمجية.
ومع ذلك ، في حين أن هذا يوفر بيان هدف يسهل تذكره ، إلا أنه يترك جزءًا كبيرًا من الحكاية. المسار من الفكرة إلى السوق أكثر تعقيدًا من مجرد إنشاء سطور من التعليمات البرمجية.
مطلوب فريق من المهنيين المدربين تدريباً عالياً الذين يعملون في أقسام معينة من إنشاء التطبيق ونموه وصيانته في التطوير التقليدي. ضع في اعتبارك هذا.
ماذا يتطلب كل تطبيق؟
- الأمان للتأكد من عدم تمتع أي شخص بوصول غير مصرح به إلى البيانات.
- قاعدة بيانات لتخزين واسترجاع المعلومات مثل العناصر والمقالات وتحديثات الوسائط الاجتماعية.
- قابلية التوسع لتمكين التطوير دون عوائق لقاعدة المستخدمين وحجم البيانات.
- واجهة مستخدم ممتعة تجعل التطبيق جذابًا وسهل الاستخدام.
- التكامل مع مختلف الخدمات والأنظمة.
يستبدل Bubble أكثر بكثير من مجرد مبرمج. إنه يوفر كل هذه الخدمات بطريقة جذابة بصريًا وآلية للغاية ، مما يجعل من الممكن تصورها ، إن لم يكن بسيطًا ، لشخص واحد للتعامل مع كل شيء.
بينما حاولت الأنظمة الأساسية السابقة بدون رمز استبدال الترميز بطرق مختلفة. يتمثل مفهومها في إزالة أكبر عدد ممكن من الحواجز أمام وصول التطبيق إلى السوق ، والتعامل مع كل شيء بدءًا من التصميم المتجاوب والرسوم المتحركة إلى الاستضافة ونشر الإصدار والأمان وعمليات قاعدة البيانات.
استخدام موصل API لتوصيل Bubble بخدمات أخرى
من المحتمل أن يكون موصل API الخاص به هو المكون الإضافي الأكثر أهمية في السوق. كما يوحي الاسم ، يتيح لك ذلك الاتصال بالتطبيقات والخدمات الأخرى لمشاركة الإجراءات والبيانات.
بدلاً من الخوض في التفاصيل الفنية لكيفية عمل ذلك ، ضع في اعتبارك هذه الأمثلة لما يمكن أن تحققه واجهات برمجة التطبيقات:
- الحصول على حق الوصول إلى آلة التعلم طرق مثل التعرف على الصور والترجمة.
- احصل على أحدث معلومات الطقس من أي مكان على وجه الأرض.
- عندما يتم تشغيل حدث في Bubble ، يتم تبادل المعلومات عبر الأنظمة ، مثل إنشاء عميل متوقع في CRM أو موعد في تقويم Google الخاص بك.
- احجز رحلة طيران أو إقامة في فندق في أي مكان في العالم.
- احصل على رقم الهاتف والموقع والصور والشعار والمراجعات لأي شركة على خرائط Google.
استخدام المكونات الإضافية لتحسين الميزات الأصلية
من الناحية الفنية ، يمزج بين وحدات تعليمات JavaScript البرمجية و CSS و HTML في عقدة وظيفية. يُعد التطبيق المكتوب بلغة JS.JSON بمثابة الأساس للغة الخاصة به.
على الرغم من أنك لست بحاجة إلى فهم هذه المصطلحات تمامًا لإنشاء التطبيقات ، إلا أنها تشير إلى حقيقة رئيسية واحدة: فهي تلتزم بمعايير الويب المعروفة والمعترف بها ، مما يسمح للمطورين بتعزيز وظائفها الأصلية إلى حد كبير.
شوهد هذا بالفعل على موقع البرنامج المساعد ، حيث تتوفر مئات الامتدادات المجانية والمدفوعة للوظائف الأساسية. هذا يعني أيضًا أنه إذا وصلت إلى نقطة تكون فيها قدراتها الأساسية غير كافية ، فهناك الكثير من خبراء JavaScript المستعدين لتقديم حل مخصص لك.
ما أنواع التطبيقات التي يمكنك تطويرها؟
يمكنك إنشاء مجموعة كبيرة من التطبيقات ، بعضها مذكور أدناه.
- تطبيقات للأسواق المتخصصة مع المجتمع.
- تطبيقات للوحات العمل في مجموعة متنوعة من القطاعات.
- برنامج لتوظيف المستشفيات.
- برنامج نقاط البيع للمخازن الفعلية.
- برنامج مكتب طب الأسنان مع ملصق أبيض.
- جرد الأعمال الشخصية وبرامج خدمة العملاء.
- تطبيقات الوسيط وتجميع العقارات التي تواجه العميل.
- تطبيقات للأحداث والدورات التدريبية في السوق (وحتى القوارب).
- تتطلب الشهادات المهنية تطبيقات اختبار داخلية.
- طلبات أول المستجيبين.
- برنامج إدارة الموظفين للاستخدام الداخلي.
لنكون صادقين ، النظام الأساسي غير مصمم للقيام بكل شيء. قد لا يكون الخيار المثالي إذا كنت تصمم تطبيق لعبة به عناصر مرئية وحركة معقدة. بالإضافة إلى ذلك ، إذا كنت تقوم بإنشاء تطبيق أصلي (تطبيق لمتاجر التطبيقات) ، فستحتاج إلى دمجه مع خدمة أخرى تابعة لجهة خارجية.
الملامح الرئيسية
الفقاعة مليئة بالميزات. لن نتمكن من تغطيتها جميعًا هنا ، لكننا سنحاول تغطية أهمها.
1. الإضافات
يسمح لك بتضمين وظائف من العديد من الأدوات على الإنترنت في ملف تطبيق ويب. على سبيل المثال ، إذا كنت تريد أن يقوم المستخدمون بتسجيل الدخول باستخدام حساب Facebook الخاص بهم ، فيمكنك استخدام المكون الإضافي Facebook للقيام بذلك.
2. تطوير
يتيح لك إنشاء تطبيقات ديناميكية ومتعددة المستخدمين لمتصفحات الويب على سطح المكتب والجوال ، بالإضافة إلى جميع الأدوات المطلوبة لإنشاء موقع مشابه لـ Instagram أو Airbnb.
3. تصميم
يمكنك إنشاء تخطيطات مناسبة للجوال ومحتوى ديناميكي لإضفاء اللمسات النهائية على منتج يسعدك التباهي به للآخرين.
4. استضافة
لا داعي للقلق بشأن صيانة الخادم أو البنية التحتية أو العمليات مرارًا وتكرارًا.
إنه يعتني بالنشر والاستضافة من أجلك بطريقة آمنة ومأمونة. عدد المستخدمين وحجم حركة المرور وتخزين البيانات كلها غير مقيدة.
إنشاء تطبيق باستخدام Bubble (برنامج تعليمي)
دعنا الآن نبدأ العمل ونستكشف كيف يمكنك إنشاء تطبيق أخبار على Bubble.
1. الشروع في العمل
لتبدأ ، يجب عليك أولا سجل للحصول على حساب مجاني على Bubble.
سنبدأ باستخدام أداة التصميم المرئي لـ Bubble لتشكيل منصتنا واجهة المستخدم. فيما يلي بعض الصفحات الرئيسية التي يجب تضمينها:
- صفحة التحميل - موقع ويب حيث يقوم الناشرون بتطوير المقالات وتوزيعها.
- الصفحة الرئيسية - يتم عرض قائمة بالقصص المنشورة حديثًا.
- صفحة السرد - صفحة حيث يمكن العثور على كل قصة فريدة.
- صفحة الناشر- صفحة تعرض قائمة حكايات من ناشر معين.
2. تكوين قاعدة البيانات
بعد تخطيط عرض منتجك ، يمكنك التركيز على بناء حقول البيانات التي ستغذي تطبيقك. سنستخدم هذه الحقول لربط عمليات سير العمل الأساسية لمنتجك.
في هذا المثال ، سننشئ نوعين مختلفين من البيانات لكل خبر. سيحتوي أحد أنواع البيانات على الحقائق الأساسية للقصة (مثل العنوان والصورة المميزة والناشر) ، بينما سيحتوي نوع البيانات الآخر على ملفات محتوى أكبر مثل السرد بأكمله.
بتعريفها على أنها أنواع بيانات منفصلة ، يمكننا فقط تحميل المعلومات المطلوبة عندما تكون مطلوبة ، مما يحد من كمية المواد التي سيحتاج محرر الفقاعة إلى إنتاجها.
سيتم إنشاء أنواع البيانات والحقول التالية:
نوع البيانات: مستخدم
مجالات:
- الاسم
- الناشرون التالية قائمة الناشرين. ملاحظة مهمة: يتيح لك إنشاء حقل كقائمة تستند إلى نوع بيانات مميز دمج جميع حقول البيانات الأساسية الخاصة به دون عناء دون الحاجة إلى إنشاء حقول إضافية.
نوع البيانات: قصتنا
مجالات:
- عنوان الاعلان
- صورة مميزة
- كاتب
- الفئة
- Publisher
- محتوى القصة
نوع البيانات: محتوى القصة
مجالات:
- محتوى القصة
نوع البيانات: Publisher
مجالات:
- الاسم
- الشعار
- المتابعين
3. بناء سير العمل
الآن بعد أن قمت بتنظيم تصميم التطبيق وقاعدة البيانات الخاصة بك ، حان الوقت لبدء تجميع كل شيء معًا وجعله يعمل.
تدفقات العمل هي الطريقة الأساسية لإنجاز ذلك في Bubble.
يحدث كل سير عمل عند وقوع حدث (على سبيل المثال ، ينقر المستخدم على زر) ثم ينفذ سلسلة من "الإجراءات" استجابةً (على سبيل المثال ، "تسجيل المستخدم" ، "إجراء تغيير على قاعدة البيانات" ، وما إلى ذلك) .
4. إنشاء قصة إخبارية
الميزة الأولى التي سنقدمها هي أداة تسمح للناشرين بكتابة ونشر مقالات إخبارية على الموقع.
في صفحة التحميل ، سنبدأ بدمج الكثير من عناصر الإدخال التي سيتم تطبيقها لإدخال البيانات في قاعدة البيانات الخاصة بنا. مدخلات النص ، أداة تحميل الصور ، واختيار القائمة المنسدلة هي أمثلة على هذه الحقول.
سنحتاج أيضًا إلى تخصيص القائمة المنسدلة للناشر لعرض قائمة بالخيارات الديناميكية. نظرًا لأنه سيتم إضافة كل مقال جديد إلى قائمة الناشر لمجموع المقالات ، فسنحتاج إلى اختيار ناشر حالي من قاعدة بياناتنا.
عند تعيين هذه القائمة المنسدلة ، سنختار نوع الخيارات لتكون ناشرًا.
بعد ذلك ، سيقوم مصدر البيانات لدينا بفحص قاعدة البيانات الخاصة بنا وإرجاع قائمة بجميع المنشورات الحالية. أخيرًا ، سنقوم بتغيير التسمية التوضيحية المصدر لتضمين اسم الناشر.
بمجرد أن يدخل الكاتب المعلومات اللازمة في كل إدخال على الصفحة ، سينقرون على زر النشر لإنشاء قصة جديدة.
بعد ذلك ، داخل قاعدة البيانات الخاصة بك ، ستنشئ شيئًا جديدًا مع ضبط نوع البيانات على السرد.
ثم سنحتاج إلى البدء في ملء قاعدة البيانات الخاصة بنا بالحقول الضرورية. قم بتوصيل كل من مكونات الإدخال على الصفحة بأعمدة قاعدة البيانات الخاصة بها.
أولاً ، سننشئ نوع محتوى القصة ، والذي سيتم ربطه أخيرًا بالحكاية نفسها.
بعد ذلك ، سنضيف مرحلة أخرى إلى هذا الإجراء ، وننشئ شيئًا آخر - هذه المرة ، الحكاية نفسها.
من الممكن دمج هذه البيانات بسهولة في جميع أنحاء النظام الأساسي الخاص بك من خلال دمج المواد السردية الأولى التي طورناها مع هذه الحكاية.
سيتم إنتاج حكاية جديدة في كل مرة يتم فيها تنشيط هذا الإجراء.
5. عرض محتوى ديناميكي في الخلاصة
بمجرد أن يبدأ الناشرون في تحميل المواد إلى تطبيق الجوال الخاص بك ، سنحتاج إلى البدء في إنشاء منطق على صفحتك الرئيسية يعرض كل مقالة كقائمة ديناميكية. يمكن تحقيق ذلك من خلال استخدام عنصر المجموعة المتكرر.
تعمل المجموعات المكررة مع قاعدة البيانات الخاصة بك لتقديم قائمة بالمواد الديناميكية وتحديثها.
عند تطبيق مجموعة مكررة ، يجب أولاً ربط العنصر بنوع بيانات في قاعدة البيانات الخاصة بك.
في هذه الحالة ، ستصنف المواد على أنها حكايات. ستحتاج أيضًا إلى توفير مصدر البيانات كقائمة بجميع الجداول في قاعدة البيانات الخاصة بك.
سنقوم أيضًا بترتيب هذه المجموعة المتكررة حسب تاريخ بدء كل قصة ، مع عرض القائمة بترتيب زمني عكسي. يمكنك الآن البدء في تنظيم المادة الديناميكية التي ستظهر داخل كل شبكة.
ما عليك سوى ملء الصف العلوي بالمواد المناسبة التي تريد عرضها ، وسيقوم هذا العنصر القوي بتعبئة الأعمدة المتبقية ببيانات من قاعدة البيانات الحالية.
6. إرسال البيانات بين الصفحات
من الممكن أيضًا إنشاء أحداث داخل كل صف من مجموعة متكررة. عند تطوير ميزات التنقل لمنصتك ، ستكون هذه الوظيفة مفيدة.
تعرض الصفحة الرئيسية لتطبيق الأخبار لدينا فقط معاينة لكل قصة ، بما في ذلك الناشر ، وصورة مميزة ، وعنوان الخبر.
ومع ذلك ، فإنه لا يعرض المحتوى الكامل للمقالة حتى ينقر المستخدم للوصول إلى صفحة القصة. سنستخدم محرر سير العمل الخاص بنا لنقل البيانات بين الصفحات لعرض هذه المواد.
للبدء ، قم بإنشاء عملية ترسل مستخدمًا إلى صفحة القصة عند النقر على صورة القصة.
استخدم حدث تنقل لنقل مستخدم إلى صفحة أخرى أثناء تطوير هذه العملية.
اختر نوع الصفحة الوجهة لتكون صفحة السرد من القائمة المنسدلة. ستحتاج بعد ذلك إلى تقديم مزيد من المعلومات إلى هذه الصفحة حتى يفهم محرر الفقاعات الحكاية الفريدة التي يجب عرضها.
المعلومات التي ستحتاج إلى تقديمها تأتي من حكاية الخلايا الحالية.
7. عرض محتوى ديناميكي على صفحة القصة
يمكنك بسهولة استرداد بيانات هذا الحدث وإظهار المواد ذات الصلة من السرد عندما يتم إرسال المستخدم إلى صفحة قصة معينة.
لإنشاء هذه الوظيفة ، يجب عليك أولاً التحقق من أن نوع الصفحة الهدف يطابق خاصية البيانات التي تقوم بتسليمها من خلال سير العمل. في هذه الحالة ، يجب عليك ربط صفحة القصة بممتلكات القصة.
يمكنه ببساطة سحب وتقديم البيانات المناسبة من المصادر الحالية عن طريق تصنيف نوع المحتوى على الصفحة.
يمكنك الآن البدء في إدراج مادة ديناميكية في الحقول التي تعرض معلومات من جدول واحد.
8. عرض مقال الناشر
بعد قراءة عنصر الأخبار ، يمكن للمستخدم اختيار فحص فهرس مقالات الناشر بالكامل. إذا قمت بتطوير نوع بيانات الناشر ، فإن إنشاء صفحة منفصلة للناشرين أمر بسيط مثل إنشاء صفحتنا الرئيسية الأصلية.
في هذه الصفحة ، سنحتاج أن نبدأ بتعيين نوع الصفحة على الناشر.
ثم انسخ المجموعة المكررة من الصفحة الرئيسية وقم بتحرير الإعدادات.
في هذه الحالة ، سيبحث مصدر بيانات المجموعة المكررة عن جميع المقالات الموجودة التي يكون ناشرها هو ناشر الصفحة الحالية.
9. متابعة الناشرين
الميزة الأساسية الثالثة التي سنبنيها لأفضل لاعب لدينا هي القدرة على متابعة ناشر على المنصة. سنقوم بإضافة زر متابعة على صفحة الناشر. عندما نضغط على هذا الرمز ، سنطلق عملية جديدة تقوم بتعديل شيء ما.
ستؤدي إضافة ناشر الصفحة الحالية إلى قائمة المنشورات التالية إلى تغيير المستخدم الحالي.
بعد ذلك ، سنحتاج إلى تحديث قائمة متابعي ناشر الصفحة الحالية عن طريق إضافة المستخدم الحالي.
10. ميزات إضافية يمكنك إضافتها
الآن بعد أن أصبحت مرتاحًا لإنشاء حقول بيانات مخصصة وتقديم معلومات ديناميكية ، يمكنك أن تكون مبدعًا من خلال التجارب التي تنشئها لمنتجك. يمكنك أيضًا تضمين:
- قم بإنشاء ميزة تسمح للمستخدمين بحفظ المحتوى لقراءته لاحقًا.
- في الجزء السفلي من كل قطعة ، قم بتوفير مجموعة متكررة من المقالات المقترحة.
- قم بإنشاء أداة بحث لمساعدة الأشخاص في العثور على محتوى جديد على الموقع.
11. النتيجة
سيبدو تطبيقك النهائي مثل هذا.
الايجابيات
- القدرة على الاتصال بالعديد من واجهات برمجة التطبيقات والمكونات الإضافية.
- تطبيق سهل الاستخدام ولا يحتوي على تعليمات برمجية.
- سيستفيد من هذا الأشخاص الذين ليس لديهم خبرة في البرمجة.
- أدوات تصميم متعددة الاستخدامات وقوية.
- معالجة سريعة للاستعلام.
سلبيات
- زيادة الاعتمادية.
- سرعة معالجة البيانات بطيئة.
- الأداء مقيد.
التسعير
تتيح لك الخطة المجانية التعرف على النظام الأساسي وتطوير تطبيقك.
تشمل الاشتراكات المدفوعة إضافات مثل التسمية البيضاء ، والمجال المخصص ، والوصول إلى Bubble API ، وسعة الخادم المحجوزة ، والتي تم سردها أدناه.
- شخصي - 25 دولارًا في الشهر (تدفع سنويًا) أو 29 دولارًا في الشهر (تدفع شهريًا).
- محترف - 115 دولارًا في الشهر (تدفع سنويًا) أو 129 دولارًا في الشهر (تدفع شهريًا).
- الإنتاج - 475 دولارًا في الشهر (تدفع سنويًا) أو 529 دولارًا في الشهر (تدفع شهريًا).
وفي الختام
تعد Bubble بديلاً ممتازًا لإنشاء تطبيقات الويب التي يمكنها فقط عرض المعلومات أو الحصول على الحد الأدنى من واجهة المستخدم.
إنه سهل الاستخدام للغاية ، والبرامج التعليمية التي تقدمها Bubble مفيدة للغاية. يسمح لك المحرر المرئي عبر الإنترنت بتصميم تطبيقات الويب بناءً على تفضيلاتك.
وأفضل جزء هو أنك لست بحاجة إلى أي خبرة أو خبرة في البرمجة. Bubble مناسبة للجميع ، بغض النظر عما إذا كنت تعرف كيفية البرمجة أم لا.
ومع ذلك ، يمكن أن يمنحك الفهم المسبق للغات الواجهة الأمامية ميزة لأنها تتيح لك اكتشاف ما تفعله بسرعة فيما يتعلق بمعالجة الأحداث.
لذا ، ما رأيك في قدرات Bubble؟
اسمحوا لنا أن نعرف في هذه التعليقات!
أربيهي
هل يمكن إنشاء متجر لبيع المنتجات باستخدام أداة bubble.io؟