Зміст[Сховати][Показати]
- Що таке Bubble.io?
- Що таке візуальне програмування?
- Які типи програм ви можете розробляти?
Створення програми за допомогою Bubble (підручник)+-
- 1. Початок роботи
- 2. Налаштування бази даних
- 3. Побудова робочих процесів
- 4. Створення новинного сюжету
- 5. Відображення динамічного вмісту в стрічці
- 6. Пересилання даних між сторінками
- 7. Відображення динамічного вмісту на сторінці історії
- 8. Відображення статті видавця
- 9. Наступні видавці
- 10. Додаткові функції, які ви можете додати
- 11. Результат
- профі
- мінуси
- Ціни
- Висновок
Нещодавно мене цікавили інші підходи до веб-розробки, крім HTML, CSS та JavaScript.
З огляду на зростаючий ландшафт без коду, не було дивним виявити, що існує кілька альтернатив більш стандартним підходам до розробки веб-додатків.
Ви повинні бути знайомі з деякими з більш відомих платформ CMS, таких як WordPress, які майже не містять коду. Але якщо ви хочете створювати веб-програми, такі платформи можуть здатися обмежуючими.
Тут я представляю вам Bubble.io, потужний інструмент без коду що дозволяє створювати веб-програми, як ніколи раніше.
Давайте вивчимо його глибше!
Що таке Bubble.io?
Bubble — це нетехнічна платформа, яка поєднує візуальну мову програмування та a фреймворк веб-розробки.
Користувачі можуть використовувати ці інструменти програмування для створення унікальних онлайн-додатків, зміни баз даних і процесів, додавання компонентів сторінки (зображення, текст, форми введення, карти) та розробки їхніх інтерфейсів.
Це ринок, де ви можете знайти ідеальні шаблони, плагіни та сервіси, які допоможуть вам створити потужні продукти.
Без необхідності налаштовувати типовий фреймворк програмування, ви можете створити що завгодно: від маркетплейсу до соціальної мережі до CRM (управління взаємовідносинами з клієнтами) за допомогою Bubble.
Це дає клієнтам можливість створювати та персоналізувати свої програми за допомогою зручного інтерфейсу та редактора «наведи і клацни».
Ви можете використовувати його разом зі службами, які надають REST API, такими як Facebook, SQL, аналітичні та платіжні програми. Це дозволяє користувачам приділяти час покращенню функціональності та зовнішнього вигляду своїх програм, щоб вони добре виглядали на планшетах і мобільних пристроях.
Він підходить для всіх розмірів бізнесу, від малого до середнього до великого; і доступний для Windows, Mac і Інтернету.
Що таке візуальне програмування?
Візуальне програмування – це, по суті, те, як воно звучить. Замість того, щоб вручну програмувати шляхом написання коду, ви робите це графічно, клацаючи та перетягуючи компоненти на сторінки.
Нехай вас не вводить в оману цей короткий опис.
Це не схоже на будь-яку іншу програму для вирізання печива чи інструмент для створення веб-сайтів, з якими ви зустрічалися в Інтернеті. Більшість конструкторів додатків вимагають, щоб ви покладалися на базові шаблони та мають надзвичайно обмежену функціональність; вони дозволяють лише розробляти певні види програм і обмежують вашу персоналізацію.
Хоча поняття «візуальне програмування» та «перетягування» здається легким у Bubble, воно надзвичайно потужне.
Його візуальне середовище програмування дозволяє не тільки перетягувати такі об’єкти, як текст, графіка, введення тощо, на сторінку, а й налаштовувати дії цих елементів.
Що робить Bubble?
Основна мета Bubble — дозволити будь-кому створювати веб-програми без необхідності писати код.
Однак, незважаючи на те, що це забезпечує легко запам’ятовується формулювання мети, воно залишає значну частину історії. Шлях від ідеї до ринку складніший, ніж просто створення рядків коду.
У звичайній розробці необхідна команда висококваліфікованих фахівців, які працюють над певними розділами створення, розвитку та підтримки програми. Враховуйте це.
Що вимагає кожен додаток?
- Безпека, щоб переконатися, що ніхто не має несанкціонованого доступу до даних.
- База даних для зберігання та отримання інформації, такої як елементи, статті та оновлення соціальних мереж.
- Масштабованість для забезпечення безперешкодного розвитку бази користувачів і обсягу даних.
- Приємний інтерфейс користувача, який робить додаток привабливим і простим у використанні.
- Інтеграція з різними сервісами та системами.
Bubble замінює набагато більше, ніж кодер. Він надає всі ці послуги візуально привабливим і високоавтоматизованим способом, що робить його можливим, якщо не простим, для однієї людини, щоб впоратися з усім.
У той час як попередні платформи без коду намагалися замінити кодування різними способами. Його концепція полягає в тому, щоб усунути якомога більше бар’єрів для того, щоб програма вийшла на ринок, обробляючи все, від адаптивного дизайну та анімації до хостингу, розгортання версії, безпеки та операцій з базою даних.
Використання конектора API для підключення Bubble до інших служб
Його API Connector, ймовірно, є найважливішим плагіном на ринку. Як випливає з назви, це дозволяє підключатися до інших програм і служб для обміну діями та даними.
Замість того, щоб вникати в технічні особливості того, як це працює, розглянемо ці приклади того, чого можуть досягти API:
- Отримання доступу до навчання за допомогою машини такі методи, як розпізнавання та переклад зображень.
- Отримуйте найновішу інформацію про погоду з будь-якої точки землі.
- Коли подія запускається в Bubble, між системами відбувається обмін інформацією, як-от встановлення потенційного клієнта у вашій CRM або зустріч у вашому Календарі Google.
- Забронюйте переліт або проживання в готелі в будь-якій точці земної кулі.
- Отримайте номер телефону, місцезнаходження, фотографії, логотип та відгуки про будь-яку компанію на Картах Google.
Використання плагінів для покращення рідних функцій
Технічно він змішує модулі коду JavaScript, CSS і HTML у функціональний вузол. Додаток, написаний на JS.JSON, служить основою для власної мови.
Хоча вам не потрібно повністю розуміти цю термінологію для створення додатків, вони вказують на один ключовий факт: він дотримується відомих і визнаних веб-стандартів, що дозволяє розробникам значно розширити його рідну функціональність.
Це вже видно на сайті плагіна, де доступні сотні безкоштовних і платних розширень базової функціональності. Це також означає, що якщо ви досягнете точки, коли її фундаментальні можливості виявляються недостатніми, є багато експертів з JavaScript, які готові запропонувати для вас індивідуальне рішення.
Які типи програм ви можете розробляти?
Ви можете створювати широкий спектр додатків, деякі з яких наведено нижче.
- Програми для спеціалізованих ринків із спільнотою.
- Додатки для дощок вакансій у різних галузях.
- Програмне забезпечення для персоналу лікарні.
- Програмне забезпечення для торгових точок для фізичних магазинів.
- Програмне забезпечення для стоматологічного кабінету з білою етикеткою.
- Програмне забезпечення для персонального інвентаризації бізнесу та обслуговування клієнтів.
- Додатки для агрегації нерухомості для брокерів і клієнтів.
- Додатки для подій і курсів на ринку (і навіть човни).
- Професійні сертифікати вимагають внутрішнього тестування.
- Додатки для швидкого реагування.
- Програмне забезпечення для управління персоналом для внутрішнього використання.
Чесно кажучи, платформа не розрахована на все. Це може бути не ідеальним вибором, якщо ви розробляєте ігровий додаток зі складними візуальними елементами та рухом. Крім того, якщо ви створюєте нативний додаток (для магазинів додатків), вам потрібно буде інтегрувати його з іншим стороннім сервісом.
Ключові характеристики
Bubble наповнений багатьма функціями. Ми не зможемо охопити їх усі тут, але спробуємо охопити найважливіші.
1. Плагіни
Це дозволяє вам включити функціональні можливості з численних інструментів в Інтернеті веб-додаток. Наприклад, якщо ви хочете, щоб ваші користувачі входили за допомогою свого облікового запису Facebook, ви можете використовувати плагін Facebook для цього.
2. Розвивати
Він дозволяє створювати динамічні багатокористувацькі програми для настільних і мобільних веб-браузерів, а також усі інструменти, необхідні для створення сайту, схожого на Instagram або Airbnb.
3. дизайн
Ви можете створювати зручні для мобільних пристроїв макети та динамічний вміст, щоб завершити продукт, який ви будете раді продемонструвати іншим.
4. Хостинг
Ніколи не потрібно турбуватися про обслуговування сервера, інфраструктуру чи роботу знову і знову.
Він дбає про розгортання та розміщення для вас у безпечний та безпечний спосіб. Кількість користувачів, обсяг трафіку та зберігання даних не обмежені.
Створення програми за допомогою Bubble (підручник)
Тепер давайте приступимо до дії та дослідимо, як створити програму для новин на Bubble.
1. Початок роботи
Для початку потрібно спочатку зареєструйте безкоштовний обліковий запис на Bubble.
Ми почнемо з використання інструменту візуального дизайну Bubble для формування нашої платформи інтерфейс користувача. Деякі з ключових сторінок, які слід включити, наведено нижче:
- Сторінка завантаження – веб-сайт, на якому видавці розроблятимуть та поширюють статті.
- Домашня сторінка – відображається список нещодавно опублікованих історій.
- Оповідна сторінка – сторінка, на якій можна знайти кожну унікальну історію.
- Сторінка видавця – сторінка, на якій відображається список казок певного видавця.
2. Налаштування бази даних
Після того, як ви розмістили дисплей свого продукту, ви можете зосередитися на створенні полів даних, які будуть підживлювати вашу програму. Ми будемо використовувати ці поля, щоб зв’язати робочі процеси, що лежать в основі вашого продукту.
Для цього прикладу ми встановимо два різних типи даних для кожної новини. Один тип даних міститиме основні факти історії (такі як назва, пропонована картинка та видавець), тоді як інший тип даних міститиме більші файли вмісту, такі як сама розповідь.
Визначаючи їх як дискретні типи даних, ми можемо завантажувати ту інформацію, яка потрібна лише тоді, коли вона потрібна, обмежуючи кількість матеріалу, який буде потрібно створювати редактору Bubble.
Будуть створені такі типи даних і поля:
Тип даних: користувач
Поля:
- ІМ'Я
- Наведені нижче видавці є списком видавців. Важлива примітка. Створення поля у вигляді списку на основі окремого типу даних дозволяє без зусиль об’єднати всі основні поля даних без створення додаткових полів.
Тип даних: Історія
Поля:
- назва
- Вибране зображення
- письменник
- Категорія
- видавець
- Зміст оповідання
Тип даних: Зміст оповідання
Поля:
- Зміст оповідання
Тип даних: видавець
Поля:
- ІМ'Я
- логотип
- послідовники
3. Побудова робочих процесів
Тепер, коли ви організували дизайн і базу даних свого додатка, настав час почати збирати все разом і запустити його.
Робочі процеси є основним методом для досягнення цієї мети в Bubble.
Кожен робочий процес відбувається, коли відбувається подія (наприклад, користувач натискає кнопку), а потім виконує послідовність «дій» у відповідь (наприклад, «зареєструвати користувача», «внести зміни до бази даних» тощо) .
4. Створення новинного сюжету
Перша функція, яку ми запропонуємо, — це інструмент, який дозволяє видавцям писати та розміщувати новини на сайті.
На сторінці завантаження ми почнемо з включення багатьох елементів введення, які будуть застосовані для введення даних у нашу базу даних. Прикладами цих полів є введення тексту, засіб завантаження зображень та вибір у спадному меню.
Нам також потрібно буде налаштувати спадне меню видавця, щоб відобразити список динамічних параметрів. Оскільки кожна нова стаття буде додана до загального списку статей видавця, нам потрібно буде вибрати наявного видавця з нашої бази даних.
Встановлюючи це спадне меню, ми виберемо тип параметрів для видавця.
Після цього наше джерело даних просканує нашу базу даних і поверне список усіх поточних публікацій. Нарешті, ми змінимо заголовок джерела, щоб включити ім’я видавця.
Після того, як автор введе необхідну інформацію в кожен запис на сторінці, він натисне кнопку опублікувати, щоб створити нову історію.
Потім у вашій базі даних ви створите нову річ із типом даних, встановленим на опис.
Потім нам потрібно почати заповнювати нашу базу даних необхідними полями. Підключіть кожен із компонентів введення на сторінці до відповідних стовпців бази даних.
Спочатку ми створимо тип вмісту історії, який, нарешті, буде пов’язано з самою казкою.
Далі ми додамо ще один етап до цієї процедури, створивши щось інше – на цей раз саму казку.
Можна без зусиль інтегрувати ці дані у вашу платформу, інтегрувавши перший оповідний матеріал, який ми розробили з цією казкою.
Кожного разу, коли ця процедура буде активована, буде створюватися нова історія.
5. Відображення динамічного вмісту в стрічці
Щойно видавці почнуть завантажувати матеріал у вашу мобільну програму, нам потрібно буде почати створювати логіку на вашій домашній сторінці, яка відображатиме кожну статтю як динамічний список. Це можна досягти, використовуючи наш повторюваний груповий елемент.
Повторювані групи працюють з вашою базою даних, щоб представити та оновити список динамічного матеріалу.
Застосовуючи повторювану групу, ви повинні спочатку зв’язати елемент із типом даних у вашій базі даних.
У цьому випадку ви віднесете такий матеріал до категорії казок. Вам також потрібно буде надати джерело даних у вигляді списку всіх таблиць у вашій базі даних.
Ми також організуємо цю повторювану групу за датою початку кожної історії, показуючи список у зворотному хронологічному порядку. Тепер ви можете почати впорядковувати динамічний матеріал, який з’явиться в кожній сітці.
Просто заповніть верхній рядок відповідним матеріалом, який ви хочете відобразити, і цей потужний елемент заповнить решту стовпців даними з вашої поточної бази даних.
6. Пересилання даних між сторінками
Також можна побудувати події в кожному рядку повторюваної групи. При розробці навігаційних функцій для вашої платформи ця функція стане у нагоді.
На домашній сторінці нашого додатка новини лише відображається попередній перегляд кожної історії, включаючи видавця, пропоновані зображення та назву статті.
Однак він не відображає весь вміст статті, доки користувач не перейде на сторінку історії. Ми будемо використовувати наш редактор робочого процесу для передачі даних між сторінками для відображення цього матеріалу.
Для початку створіть процес, який надсилає користувача на сторінку історії, коли натискається зображення історії.
Використовуйте подію навігації, щоб перемістити користувача на іншу сторінку під час розробки цього процесу.
У спадному меню виберіть тип цільової сторінки як сторінку опису. Потім вам потрібно буде надати додаткову інформацію на цій сторінці, щоб редактор Bubble зрозумів, яку унікальну історію показати.
Інформація, яку вам потрібно надати, походить із поточної розповіді клітинок.
7. Відображення динамічного вмісту на сторінці історії
Ви можете легко отримати дані про цю подію та показати відповідний матеріал з розповіді, коли користувач переходить на певну сторінку історії.
Щоб створити цю функцію, спершу потрібно перевірити, чи відповідає тип цільової сторінки властивість даних, яку ви надаєте через робочий процес. У цій ситуації ви повинні пов’язати сторінку історії з властивістю історії.
Він може просто витягувати та надавати відповідні дані з існуючих джерел, класифікуючи тип вмісту на сторінці.
Тепер ви можете почати вставляти динамічний матеріал у поля, які відображають інформацію з однієї таблиці.
8. Відображення статті видавця
Після прочитання новини користувач може переглянути весь каталог статей видавця. Якщо ви розробили тип даних видавця, створити окрему сторінку для видавців так само просто, як створити оригінальну домашню сторінку.
На цій сторінці нам потрібно почати з налаштування типу сторінки на видавця.
Потім скопіюйте повторювану групу з домашньої сторінки та відредагуйте налаштування.
У цьому випадку джерело даних нашої повторюваної групи шукатиме всі наявні статті, видавцем яких є поточна сторінка.
9. Наступні видавці
Третя фундаментальна функція, яку ми створимо для нашого MVP, — це можливість стежити за видавцем на платформі. Ми додамо кнопку підписки на сторінку видавця. Коли ми клацнемо цю піктограму, ми запустимо новий процес, який змінює річ.
Додавання поточного видавця сторінки до його списку наступних публікацій змінить поточного користувача.
Після цього нам потрібно буде оновити список підписників поточної сторінки видавця, додавши поточного користувача.
10. Додаткові функції, які ви можете додати
Тепер, коли вам зручно створювати спеціальні поля даних і представляти динамічну інформацію, ви можете творчо підходити до досвіду, який ви створюєте для свого продукту. Ви також можете включити:
- Створіть функцію, яка дозволяє користувачам зберігати вміст для подальшого читання.
- У нижній частині кожного фрагмента надайте періодичну колекцію запропонованих статей.
- Створіть інструмент пошуку, щоб допомогти людям знаходити свіжий вміст на сайті.
11. Результат
Ваш остаточний додаток буде виглядати приблизно так.
профі
- Можливість підключення до багатьох API та плагінів.
- Проста у використанні програма без коду.
- Люди без досвіду програмування виграють від цього.
- Інструменти дизайну, які є одночасно універсальними та потужними.
- Швидка обробка запиту.
мінуси
- Підвищена надійність.
- Швидкість обробки даних повільна.
- Продуктивність обмежена.
Ціни
Безкоштовний план дозволяє вам дізнатися про платформу та розробити свій додаток.
Платні підписки включають такі додаткові можливості, як білий домен, користувацький домен, доступ до Bubble API та зарезервований ресурс сервера, які перераховані нижче.
- Особисті – $25/місяць (оплачується щорічно) або $29/місяць (оплачується щомісяця).
- Професійний – 115 доларів США на місяць (оплачується щорічно) або 129 доларів США на місяць (оплачується щомісяця).
- Виробництво – $475/місяць (оплачується щорічно) або 529$/місяць (оплачується щомісяця).
Почніть працювати з Bubble безкоштовно
Висновок
Bubble є чудовою альтернативою для створення веб-додатків, які можуть відображати лише інформацію або мають мінімальний інтерфейс користувача.
Він досить простий у використанні, а підручники, надані Bubble, надзвичайно корисні. Його візуальний онлайн-редактор, який дозволяє створювати веб-програми на основі ваших уподобань.
І найкраще те, що вам не потрібен досвід програмування чи знання. Bubble підходить для всіх, незалежно від того, вмієте ви кодувати чи ні.
Однак попереднє розуміння мов інтерфейсу може дати вам перевагу, оскільки дозволяє швидко зрозуміти, що він робить щодо обробки подій.
Отже, що ви думаєте про можливості Bubble?
Повідомте нас у коментарях!
Арбехі
Чи можна створити магазин для продажу товарів за допомогою інструменту bubble.io?