فهرست مندرجات[پنهان شدن][نمایش]
من اخیراً به رویکردهای توسعه وب غیر از HTML، CSS و جاوا اسکریپت علاقه مند شده ام.
با افزایش چشم انداز بدون کد، کشف اینکه چندین جایگزین برای رویکردهای استانداردتر برای توسعه برنامه های کاربردی وب وجود دارد، تعجب آور نبود.
شما باید با برخی از پلتفرم های شناخته شده CMS مانند وردپرس که تقریباً بدون کد هستند آشنا باشید. اما، اگر می خواهید برنامه های وب بسازید، چنین پلتفرم هایی ممکن است محدود کننده به نظر برسند.
در اینجا من شما را با Bubble.io آشنا می کنم، یک ابزار قدرتمند ابزار بدون کد که به شما امکان می دهد برنامه های وب بسازید که قبلاً هرگز نبوده است.
بیایید آن را عمیقاً بررسی کنیم!
چه شده است Bubble.io?
Bubble یک پلتفرم غیر فنی است که یک زبان برنامه نویسی بصری و a چارچوب توسعه وب.
کاربران می توانند از این ابزارهای برنامه نویسی برای ساخت اپلیکیشن های آنلاین منحصر به فرد، تغییر پایگاه های داده و فرآیندها، افزودن اجزای صفحه (تصاویر، متن، فرم های ورودی، نقشه ها) و طراحی رابط هایشان استفاده کنند.
این بازاری است که در آن میتوانید قالبها، افزونهها و خدمات ایدهآلی را برای کمک به شما در ساخت محصولات قوی کشف کنید.
بدون نیاز به راهاندازی یک چارچوب برنامهنویسی معمولی، میتوانید با استفاده از Bubble هر چیزی از یک بازار گرفته تا یک شبکه اجتماعی و یک CRM (مدیریت ارتباط با مشتری) ایجاد کنید.
این به مشتریان این امکان را می دهد که برنامه های خود را با استفاده از یک رابط کاربر پسند و یک ویرایشگر نقطه و کلیک ایجاد و شخصی سازی کنند.
میتوانید آن را همراه با سرویسهایی که REST API ارائه میکنند، مانند Facebook، SQL، تجزیه و تحلیل و برنامههای پرداخت استفاده کنید. این به کاربران امکان می دهد تا زمانی را به بهبود عملکرد و ظاهر برنامه های خود اختصاص دهند تا در تبلت ها و دستگاه های تلفن همراه ظاهر خوبی داشته باشند.
برای تمام اندازه های کسب و کار، از کوچک تا متوسط تا بزرگ مناسب است. و برای ویندوز، مک و وب قابل دسترسی است.
برنامه نویسی بصری چیست؟
برنامه نویسی بصری در اصل همان چیزی است که به نظر می رسد. به جای برنامه نویسی دستی با نوشتن کد، این کار را به صورت گرافیکی با کلیک کردن و کشیدن اجزا به داخل صفحات انجام می دهید.
با این توضیحات کوتاه گمراه نشوید.
این برنامه مانند سایر برنامه های کوکی برش یا ابزار ساخت وب سایتی که به صورت آنلاین با آنها برخورد کرده اید نیست. اکثر سازندگان برنامه از شما می خواهند که به الگوهای اولیه تکیه کنید و عملکرد بسیار محدودی داشته باشید. آنها فقط به شما اجازه می دهند انواع خاصی از برنامه ها را توسعه دهید و شخصی سازی خود را محدود کنید.
اگرچه مفهوم "برنامه نویسی بصری" و "کشیدن و رها کردن" در Bubble آسان به نظر می رسد، اما بسیار قدرتمند است.
محیط برنامه نویسی بصری آن نه تنها به شما امکان می دهد اشیایی مانند متن، گرافیک، ورودی ها و موارد دیگر را روی یک صفحه بکشید، بلکه به شما امکان می دهد آنچه را که آن عناصر انجام می دهند را پیکربندی کنید.
حباب چه کار می کند؟
هدف اصلی Bubble این است که هر کسی را قادر سازد تا بدون نیاز به نوشتن کد، برنامه های وب ایجاد کند.
با این حال، در حالی که این یک بیانیه هدف را به راحتی به یاد میآورد، بخش مهمی از داستان را کنار میگذارد. مسیر ایده تا بازار پیچیده تر از ایجاد خطوط کد است.
تیمی از متخصصان بسیار آموزش دیده که روی بخشهای خاصی از ایجاد، رشد و نگهداری برنامه کار میکنند، در توسعه معمولی مورد نیاز است. این را در نظر بگیرید.
هر اپلیکیشنی به چه چیزی نیاز دارد؟
- امنیت برای اطمینان از اینکه هیچ کس به داده ها دسترسی غیرمجاز ندارد.
- پایگاه داده ای برای ذخیره و بازیابی اطلاعاتی مانند اقلام، مقالات و به روز رسانی رسانه های اجتماعی.
- مقیاس پذیری برای فعال کردن توسعه بدون مانع پایگاه کاربر و حجم داده.
- یک رابط کاربری دلپذیر برای جذاب و آسان کردن برنامه.
- ادغام با سرویس ها و سیستم های مختلف.
حباب خیلی بیشتر از یک کدگذار جایگزین می شود. این همه این خدمات را به شیوه ای بصری جذاب و بسیار خودکار ارائه می دهد، و این امر را برای یک فرد، اگر ساده نباشد، قابل تصور می کند که همه چیز را اداره کند.
در حالی که پلتفرم های بدون کد قبلی به روش های مختلف سعی کرده اند جایگزین کدگذاری شوند. مفهوم آن حذف هر چه بیشتر موانع برای دسترسی یک برنامه به بازار است و همه چیز از طراحی واکنشگرا و انیمیشن ها گرفته تا میزبانی، استقرار نسخه، امنیت و عملیات پایگاه داده را مدیریت می کند.
استفاده از رابط API برای اتصال Bubble به سرویس های دیگر
رابط API آن احتمالاً مهمترین افزونه موجود در بازار است. همانطور که از نام آن پیداست، این امکان را به شما می دهد تا به برنامه ها و سرویس های دیگر متصل شوید تا اقدامات و داده ها را به اشتراک بگذارید.
بهجای بررسی جزئیات فنی نحوه کار، به این مثالها از آنچه APIها ممکن است انجام دهند توجه کنید:
- به دست آوردن دسترسی به فراگیری ماشین روش هایی مانند تشخیص و ترجمه تصویر.
- آخرین اطلاعات آب و هوا را از هر کجای زمین دریافت کنید.
- وقتی رویدادی در Bubble راهاندازی میشود، اطلاعات بین سیستمها رد و بدل میشود، مانند ایجاد یک سرنخ در CRM یا قرار ملاقاتی در تقویم Google شما.
- رزرو پرواز یا اقامت در هتل در هر نقطه از جهان.
- شماره تلفن، مکان، عکسها، نشانواره و نظرات هر شرکتی را در Google Maps دریافت کنید.
استفاده از افزونه ها برای افزایش ویژگی های بومی
از نظر فنی، ماژولهای کد جاوا اسکریپت، CSS و HTML را در یک گره کاربردی ترکیب میکند. برنامه ای که به زبان JS.JSON نوشته شده است به عنوان پایه ای برای زبان خود عمل می کند.
در حالی که برای ساخت اپلیکیشن ها نیازی به درک کامل این اصطلاحات ندارید، اما یک واقعیت کلیدی را نشان می دهند: استانداردهای وب شناخته شده و تایید شده را رعایت می کند و به توسعه دهندگان اجازه می دهد تا عملکرد بومی آن را به میزان قابل توجهی افزایش دهند.
این قبلاً در سایت افزونه دیده می شود، جایی که صدها افزونه رایگان و پولی برای عملکرد اصلی در دسترس هستند. همچنین نشان میدهد که اگر به نقطهای رسیدید که قابلیتهای اساسی آن کافی نیست، متخصصان جاوا اسکریپت زیادی وجود دارند که مایلند یک راهحل سفارشی برای شما ارائه دهند.
چه نوع برنامه هایی را می توانید توسعه دهید؟
شما می توانید طیف گسترده ای از برنامه ها را ایجاد کنید که برخی از آنها در زیر آورده شده است.
- برنامه های کاربردی برای بازارهای تخصصی با یک جامعه.
- برنامههایی برای تابلوهای شغلی در بخشهای مختلف.
- نرم افزار پرسنل بیمارستان.
- نرم افزار نقطه فروش برای فروشگاه های فیزیکی.
- نرم افزار مطب دندانپزشکی با برچسب سفید.
- موجودی کسب و کار شخصی و نرم افزار خدمات مشتری.
- برنامه های تجمیع املاک و مستغلات کارگزار و مشتری.
- برنامه های رویدادها و دوره های موجود در بازار (و حتی قایق).
- گواهینامه های حرفه ای نیاز به برنامه های آزمایش داخلی دارند.
- برنامه های کاربردی برای اولین پاسخ دهندگان.
- نرم افزار مدیریت کارکنان برای استفاده داخلی.
صادقانه بگویم، این پلتفرم برای انجام همه کارها طراحی نشده است. اگر در حال طراحی یک برنامه بازی با تصاویر و حرکت پیچیده هستید، ممکن است انتخاب ایده آلی نباشد. علاوه بر این، اگر در حال ایجاد یک برنامه بومی (یکی برای فروشگاه های برنامه) هستید، باید آن را با یک سرویس شخص ثالث دیگر ادغام کنید.
ویژگی های کلیدی
حباب پر از ویژگی است. ما نمی توانیم همه آنها را در اینجا پوشش دهیم، اما سعی خواهیم کرد ضروری ترین آنها را پوشش دهیم.
1. پلاگین ها
این امکان را به شما می دهد تا قابلیت هایی از ابزارهای متعدد در اینترنت را در خود قرار دهید برنامه های تحت وب. به عنوان مثال، اگر می خواهید کاربران شما با استفاده از حساب فیس بوک خود وارد شوند، می توانید از افزونه فیس بوک برای این کار استفاده کنید.
2. توسعه دهید
این به شما امکان می دهد برنامه های پویا و چند کاربره برای مرورگرهای وب دسکتاپ و موبایل و همچنین تمام ابزارهای مورد نیاز برای ساخت سایتی مشابه اینستاگرام یا Airbnb بسازید.
3. طرح
میتوانید طرحبندیهای سازگار با موبایل و محتوای پویا ایجاد کنید تا به محصولی که از نمایش آن به دیگران خوشحال میشوید، سنگ تمام بگذارید.
4. میزبانی وب
هرگز نباید بارها و بارها نگران نگهداری سرور، زیرساخت یا عملیات باشید.
استقرار و میزبانی را برای شما به روشی ایمن و مطمئن انجام می دهد. تعداد کاربران، حجم ترافیک و ذخیره داده ها همگی نامحدود هستند.
ساخت اپلیکیشن با Bubble (آموزش)
بیایید اکنون وارد عمل شویم و چگونگی ایجاد یک برنامه خبری در Bubble را بررسی کنیم.
1. شروع کار
برای شروع ، ابتدا باید برای یک حساب کاربری رایگان در Bubble ثبت نام کنید.
ما با استفاده از ابزار طراحی بصری Bubble برای شکل دادن به پلتفرم خود شروع خواهیم کرد رابط کاربر. برخی از صفحات کلیدی برای گنجاندن در زیر آورده شده است:
- صفحه آپلود - وب سایتی که ناشران در آن مقالات را توسعه و توزیع می کنند.
- صفحه اصلی - لیستی از داستان های اخیرا منتشر شده نمایش داده می شود.
- صفحه روایت - صفحه ای که در آن می توان هر داستان منحصر به فردی را پیدا کرد.
- صفحه ناشر - صفحه ای برای نمایش فهرستی از داستان های یک ناشر خاص.
2. پیکربندی پایگاه داده
بعد از اینکه نمایشگر محصول خود را چیدمان کردید، می توانید روی ایجاد فیلدهای داده تمرکز کنید که به برنامه شما کمک می کند. ما از این فیلدها برای پیوند دادن جریانهای کاری زیربنای محصول شما استفاده خواهیم کرد.
برای این مثال، ما دو نوع داده مجزا برای هر خبر ایجاد می کنیم. یک نوع داده حاوی حقایق اساسی یک داستان (مانند عنوان، تصویر ویژه و ناشر) است، در حالی که نوع داده دیگر حاوی فایلهای محتوای بزرگتر مانند کل روایت است.
با تعریف آنها بهعنوان انواع دادههای گسسته، ما فقط میتوانیم اطلاعاتی را که مورد نیاز است بارگیری کنیم، و مقدار محتوایی را که ویرایشگر Bubble برای تولید نیاز دارد محدود کنیم.
انواع داده ها و فیلدهای زیر ایجاد خواهند شد:
نوع داده: کاربر
زمینه های:
- نام
- ناشران زیر فهرستی از ناشران هستند. نکته مهم: ایجاد یک فیلد به عنوان یک لیست بر اساس نوع داده متمایز به شما این امکان را می دهد که همه فیلدهای داده ضروری آن را بدون زحمت و بدون نیاز به ایجاد فیلدهای اضافی ترکیب کنید.
نوع داده: داستان
زمینه های:
- عنوان
- تصویر برجسته
- نویسنده
- دسته بندی
- ناشر
- محتوای داستان
نوع داده: محتوای داستان
زمینه های:
- محتوای داستان
نوع داده: ناشر
زمینه های:
- نام
- لوگو
- دنبال
3. ایجاد گردش کار
اکنون که طراحی و پایگاه داده برنامه خود را سازماندهی کرده اید، زمان آن رسیده است که همه چیز را کنار هم قرار دهید و آن را به کار بگیرید.
گردش کار روش اصلی برای انجام این کار در Bubble است.
هر گردش کاری زمانی اتفاق میافتد که یک رویداد رخ میدهد (مثلاً کاربر روی دکمه کلیک میکند) و سپس دنبالهای از «عملها» را در پاسخ انجام میدهد (مثلاً «عضو کاربر»، «تغییر در پایگاه داده» و غیره) .
4. ایجاد یک خبر
اولین ویژگی که ما ارائه خواهیم کرد ابزاری است که به ناشران اجازه می دهد اخبار را بنویسند و در سایت پست کنند.
در صفحه آپلود، با ترکیب بسیاری از موارد ورودی که برای وارد کردن داده ها در پایگاه داده ما اعمال می شوند، شروع می کنیم. ورودیهای متن، آپلودکننده تصویر و انتخاب کشویی نمونههایی از این فیلدها هستند.
همچنین باید منوی کشویی ناشر را سفارشی کنیم تا لیستی از گزینه های پویا نمایش داده شود. از آنجایی که هر مقاله جدید به فهرست کل مقالات ناشر اضافه می شود، باید ناشر موجود را از پایگاه داده خود انتخاب کنیم.
هنگام تنظیم این منوی کشویی، نوع گزینه هایی را برای ناشر بودن انتخاب می کنیم.
پس از آن، منبع داده ما پایگاه داده ما را اسکن می کند و لیستی از تمام انتشارات فعلی را برمی گرداند. در نهایت، عنوان منبع را تغییر میدهیم تا نام ناشر را در بر بگیرد.
هنگامی که نویسنده اطلاعات لازم را در هر ورودی صفحه وارد کرد، روی دکمه انتشار کلیک می کند تا داستان جدیدی تولید کند.
سپس، در پایگاه داده خود، یک چیز جدید با نوع داده تنظیم شده روی روایت ایجاد خواهید کرد.
سپس باید پایگاه داده خود را با فیلدهای لازم پر کنیم. هر یک از اجزای ورودی صفحه را به ستون های پایگاه داده مربوطه خود وصل کنید.
ابتدا نوع محتوای داستان را ایجاد می کنیم که در نهایت به خود داستان پیوند داده می شود.
در مرحله بعد، مرحله دیگری را به این رویه اضافه می کنیم و چیز دیگری را ایجاد می کنیم - این بار، خود داستان.
با ادغام اولین مطالب روایتی که با این داستان ایجاد کردیم، میتوان این دادهها را بدون زحمت در سرتاسر پلتفرم خود ادغام کرد.
هر بار که این روش فعال شود، داستان جدیدی تولید خواهد شد.
5. نمایش محتوای پویا در فید
هنگامی که ناشران شروع به آپلود مطالب در برنامه تلفن همراه شما می کنند، باید منطقی را در صفحه اصلی شما ایجاد کنیم که هر مقاله را به عنوان یک لیست پویا نشان می دهد. این را می توان با استفاده از عنصر گروه تکراری ما انجام داد.
گروههای تکراری با پایگاه داده شما کار میکنند تا فهرستی از مطالب پویا را ارائه و تازهسازی کنند.
هنگام اعمال یک گروه تکراری، ابتدا باید عنصر را به یک نوع داده در پایگاه داده خود پیوند دهید.
در این مورد، شما نوع مطالب را به عنوان داستان دسته بندی خواهید کرد. همچنین باید منبع داده را به عنوان لیستی از تمام جداول موجود در پایگاه داده خود ارائه دهید.
ما همچنین این گروه تکراری را بر اساس تاریخ شروع هر داستان ترتیب میدهیم و فهرست را به ترتیب زمانی معکوس نشان میدهیم. اکنون می توانید شروع به سازماندهی مواد پویا کنید که در هر شبکه ظاهر می شود.
به سادگی ردیف بالا را با مواد مناسبی که می خواهید نمایش دهید پر کنید، و این عنصر قدرتمند، ستون های باقی مانده را با داده های پایگاه داده فعلی شما پر می کند.
6. ارسال داده ها بین صفحات
همچنین امکان ساخت رویدادها در هر ردیف از یک گروه تکراری وجود دارد. هنگام توسعه ویژگی های ناوبری برای پلتفرم خود، این قابلیت مفید خواهد بود.
صفحه اصلی برنامه خبری ما فقط یک پیش نمایش از هر داستان، از جمله ناشر، یک تصویر ویژه و عنوان داستان را نشان می دهد.
با این حال، تا زمانی که کاربر به صفحه داستان کلیک نکند، کل محتوای یک مقاله را نمایش نمی دهد. ما از ویرایشگر گردش کار خود برای انتقال داده ها بین صفحات برای نمایش این مطالب استفاده می کنیم.
برای شروع، فرآیندی ایجاد کنید که با کلیک روی تصویر یک داستان، کاربر را به صفحه داستان می فرستد.
از یک رویداد ناوبری برای انتقال کاربر به صفحه دیگری در حین توسعه این فرآیند استفاده کنید.
نوع صفحه مقصد را به عنوان صفحه روایت از منوی کشویی انتخاب کنید. سپس باید اطلاعات بیشتری به این صفحه بدهید تا ویرایشگر حباب بفهمد کدام داستان منحصر به فرد را نشان دهد.
اطلاعاتی که باید بدهید از داستان سلولهای فعلی میآید.
7. نمایش محتوای پویا در صفحه استوری
وقتی کاربر به صفحه داستان خاصی فرستاده می شود، می توانید به راحتی این داده های رویداد را بازیابی کنید و مطالب مربوطه را از روایت نشان دهید.
برای ایجاد این تابع، ابتدا باید بررسی کنید که نوع صفحه هدف با ویژگی داده ای که از طریق گردش کار تحویل می دهید مطابقت داشته باشد. در این شرایط، باید صفحه استوری را با یک ویژگی داستان مرتبط کنید.
به سادگی می تواند با دسته بندی نوع محتوا در یک صفحه، داده های مناسب را از منابع موجود جمع آوری و ارائه کند.
اکنون می توانید شروع به درج مطالب پویا در فیلدهایی کنید که اطلاعات را از یک جدول نمایش می دهند.
8. نمایش مقاله ناشر
پس از خواندن یک خبر، کاربر می تواند کل کاتالوگ مقالات ناشر را بررسی کند. اگر یک نوع داده ناشر ایجاد کرده اید، ایجاد یک صفحه جداگانه برای ناشران به سادگی ایجاد صفحه اصلی اصلی ما است.
در این صفحه، باید با تنظیم نوع صفحه روی ناشر شروع کنیم.
سپس گروه تکرار شونده را از صفحه اصلی کپی کرده و تنظیمات را ویرایش کنید.
در این صورت، منبع داده گروه تکراری ما به دنبال همه مقالات موجود می گردد که ناشر آن ناشر صفحه فعلی است.
9. دنبال کردن ناشران
سومین ویژگی اساسی که ما برای MVP خود خواهیم ساخت، توانایی دنبال کردن یک ناشر در پلتفرم است. ما یک دکمه فالو را در صفحه ناشر اضافه می کنیم. وقتی روی این نماد کلیک می کنیم، فرآیند جدیدی را راه اندازی می کنیم که یک چیز را تغییر می دهد.
افزودن ناشر صفحه فعلی به فهرست انتشارات بعدی، کاربر فعلی را تغییر می دهد.
پس از آن، باید فهرست فالوورهای ناشر صفحه فعلی را با افزودن کاربر فعلی به روز کنیم.
10. ویژگی های اضافی که می توانید اضافه کنید
اکنون که با ایجاد فیلدهای داده سفارشی و ارائه اطلاعات پویا راحت هستید، می توانید با تجربیاتی که برای محصول خود ایجاد می کنید خلاق باشید. شما همچنین می توانید شامل:
- قابلیتی ایجاد کنید که به کاربران امکان می دهد محتوا را برای خواندن بعدی ذخیره کنند.
- در پایین هر قطعه، مجموعه ای تکراری از مقالات پیشنهادی را ارائه دهید.
- یک ابزار جستجو برای کمک به افراد در یافتن محتوای جدید در سایت ایجاد کنید.
11. نتیجه
برنامه نهایی شما چیزی شبیه به این خواهد بود.
مزایا
- قابلیت اتصال به بسیاری از API ها و پلاگین ها.
- یک برنامه کاربردی آسان برای استفاده و بدون کد.
- افرادی که تجربه برنامه نویسی ندارند از این کار سود خواهند برد.
- ابزارهایی را طراحی کنید که هم همه کاره و هم قدرتمند هستند.
- پردازش سریع پرس و جو
منفی
- افزایش قابلیت اطمینان
- سرعت پردازش داده ها کند است.
- عملکرد محدود است.
قیمت گذاری
طرح رایگان به شما امکان می دهد در مورد پلتفرم اطلاعات کسب کنید و برنامه خود را توسعه دهید.
اشتراکهای پولی شامل موارد اضافی مانند برچسبگذاری سفید، دامنه سفارشی، دسترسی به Bubble API و ظرفیت سرور رزرو شده است که در زیر فهرست شدهاند.
- شخصی - 25 دلار در ماه (پرداخت سالانه) یا 29 دلار در ماه (پرداخت ماهانه).
- حرفه ای - 115 دلار در ماه (پرداخت سالانه) یا 129 دلار در ماه (پرداخت ماهانه).
- تولید - 475 دلار در ماه (پرداخت سالانه) یا 529 دلار در ماه (پرداخت ماهانه).
با Bubble به صورت رایگان شروع کنید
نتیجه
Bubble یک جایگزین عالی برای ساخت برنامه های کاربردی وب است که فقط می توانند اطلاعات را نشان دهند یا حداقل رابط کاربری داشته باشند.
استفاده از آن بسیار ساده است و آموزش های ارائه شده توسط Bubble بسیار مفید هستند. ویرایشگر بصری آنلاین آن که به شما امکان می دهد برنامه های وب را بر اساس ترجیحات خود طراحی کنید.
و بهترین بخش این است که شما به هیچ تجربه یا تخصص برنامه نویسی نیاز ندارید. حباب برای همه مناسب است، صرف نظر از اینکه می دانید چگونه کدنویسی کنید یا نه.
با این حال، درک قبلی زبانهای فرانتاند میتواند به شما برتری دهد، زیرا به شما امکان میدهد به سرعت بفهمید که در مورد مدیریت رویداد چه میکند.
بنابراین، نظر شما در مورد قابلیت های Bubble چیست؟
اجازه دهید ما را در نظر می دانم!
اربهی
آیا می توان فروشگاهی برای فروش محصولات با استفاده از ابزار bubble.io ایجاد کرد؟