Bubble
Неудивительно, что в связи с растущим числом разработчиков веб-приложений неудивительно, что существует несколько альтернатив более стандартным подходам к разработке веб-приложений.
Вы должны быть знакомы с некоторыми из наиболее известных платформ CMS, таких как WordPress, которые практически не содержат кода. Но если вы хотите создавать веб-приложения, такие платформы могут показаться ограничивающими.
Здесь я познакомлю вас с Bubble.io, мощный инструмент без кода который позволяет создавать веб-приложения, как никогда раньше.
Что такое Bubble.io?
Bubble — это нетехническая платформа, которая сочетает в себе визуальный язык программирования и фреймворк для веб-разработки.
Пользователи могут использовать эти инструменты программирования для создания уникальных онлайн-приложений, изменения баз данных и процессов, добавления компонентов страницы (изображений, текста, форм ввода, карт) и разработки своих интерфейсов.
Это торговая площадка, где вы можете найти идеальные шаблоны, плагины и услуги, которые помогут вам в создании надежных продуктов.
Без необходимости настраивать типичную среду программирования вы можете создать что угодно, от торговой площадки до социальной сети и CRM (управление взаимоотношениями с клиентами), используя Bubble.
Это дает клиентам возможность создавать и персонализировать свои приложения с помощью удобного интерфейса и редактора «укажи и щелкни».
Вы можете использовать его в сочетании со службами, предоставляющими REST API, такими как Facebook, SQL, аналитические и платежные приложения. Это позволяет пользователям уделять время улучшению функциональности и внешнего вида своих приложений, чтобы они хорошо выглядели на планшетах и мобильных устройствах.
Он подходит для всех размеров бизнеса, от малого до среднего и крупного; и доступен для Windows, Mac и Интернета.
Что такое визуальное программирование?
Визуальное программирование — это, по сути, то, на что это похоже. Вместо ручного программирования путем написания кода вы делаете это графически, щелкая и перетаскивая компоненты на страницы.
Пусть вас не вводит в заблуждение это краткое описание.
Это не похоже ни на одно другое готовое приложение или инструмент для создания веб-сайтов, с которыми вы сталкивались в Интернете. Большинство разработчиков приложений требуют, чтобы вы полагались на базовые шаблоны и имели крайне ограниченную функциональность; они позволяют вам разрабатывать только определенные виды приложений и ограничивают вашу персонализацию.
Хотя понятия «визуального программирования» и «перетаскивания» кажутся простыми в Bubble, они чрезвычайно эффективны.
Его среда визуального программирования не только позволяет перетаскивать на страницу такие объекты, как текст, графика, вводимые данные и т. д., но также позволяет настраивать действия этих элементов.
Что делает Бабл?
Основная цель Bubble — дать возможность любому создавать веб-приложения без написания кода.
Однако, несмотря на то, что это обеспечивает легко запоминающуюся постановку цели, это упускает из виду значительную часть истории. Путь от идеи к рынку сложнее, чем просто создание строк кода.
В обычной разработке требуется команда высококвалифицированных специалистов, работающих над определенными разделами создания, расширения и обслуживания приложения. Учти это.
Что требуется для каждого приложения?
- Безопасность, чтобы убедиться, что никто не имеет несанкционированного доступа к данным.
- База данных для хранения и извлечения информации, такой как элементы, статьи и обновления в социальных сетях.
- Масштабируемость, обеспечивающая беспрепятственное развитие пользовательской базы и объема данных.
- Приятный пользовательский интерфейс, делающий приложение привлекательным и простым в использовании.
- Интеграция с различными сервисами и системами.
Bubble заменяет не только кодера. Он предоставляет все эти услуги визуально привлекательным и высокоавтоматизированным способом, что делает возможным, если не простым, выполнение всего одним человеком.
В то время как предыдущие платформы без кода пытались различными способами заменить кодирование. Его концепция состоит в том, чтобы устранить как можно больше барьеров для выхода приложения на рынок, обрабатывая все, от адаптивного дизайна и анимации до хостинга, развертывания версий, безопасности и операций с базами данных.
Использование коннектора API для подключения Bubble к другим сервисам
Его API-коннектор, вероятно, является самым важным плагином на рынке. Как следует из названия, это позволяет вам подключаться к другим приложениям и службам для обмена действиями и данными.
Вместо того, чтобы углубляться в технические особенности того, как это работает, рассмотрите следующие примеры того, чего могут достичь API:
- Получение доступа к обучение с помощью машины такие методы, как распознавание изображений и перевод.
- Получайте самую свежую информацию о погоде из любой точки мира.
- Когда событие запускается в Bubble, происходит обмен информацией между системами, например, установление лида в вашей CRM или назначение в вашем Календаре Google.
- Забронируйте рейс или проживание в отеле в любой точке земного шара.
- Получите номер телефона, местоположение, фотографии, логотип и отзывы о любой компании на Картах Google.
Использование плагинов для улучшения нативных функций
Технически он смешивает модули кода JavaScript, CSS и HTML в функциональный узел. Приложение, написанное на JS.JSON, служит основой для собственного языка.
Хотя вам не нужно полностью понимать эту терминологию для создания приложений, они указывают на один ключевой факт: он соответствует известным и признанным веб-стандартам, что позволяет разработчикам значительно улучшить его собственные функциональные возможности.
Это уже видно на сайте плагинов, где доступны сотни бесплатных и платных расширений базового функционала. Это также означает, что если вы достигнете точки, когда его основных возможностей будет недостаточно, найдется множество экспертов по JavaScript, готовых предложить вам индивидуальное решение.
Какие типы приложений вы можете разрабатывать?
Вы можете создавать широкий спектр приложений, некоторые из которых приведены ниже.
- Приложения для специализированных рынков с сообществом.
- Приложения для досок объявлений в различных секторах.
- Программное обеспечение для больничного персонала.
- Программное обеспечение для торговых точек для физических магазинов.
- Программное обеспечение для стоматологического кабинета с белой этикеткой.
- Программное обеспечение для инвентаризации личного бизнеса и обслуживания клиентов.
- Брокерские и клиентские приложения для агрегации недвижимости.
- Приложения для событий и курсов на рынке (и даже лодки).
- Профессиональные сертификаты требуют приложений для внутреннего тестирования.
- Приложения для первых респондентов.
- Программное обеспечение для управления персоналом для внутреннего использования.
Честно говоря, платформа не предназначена для всего. Это может быть не идеальным выбором, если вы разрабатываете игровое приложение со сложными визуальными эффектами и движением. Кроме того, если вы создаете собственное приложение (для магазинов приложений), вам необходимо интегрировать его с другим сторонним сервисом.
Key features
Bubble полон функций. Мы не сможем охватить их все здесь, но мы постараемся охватить самые важные из них.
1. Плагины
Это позволяет вам включать функциональные возможности многочисленных инструментов в Интернете в ваш веб-приложение. Например, если вы хотите, чтобы ваши пользователи входили в систему, используя свою учетную запись Facebook, вы можете использовать для этого плагин Facebook.
2. Разработка
Он позволяет создавать динамические многопользовательские приложения для настольных и мобильных веб-браузеров, а также все инструменты, необходимые для создания сайта, подобного Instagram или Airbnb.
3. Дизайн
Вы можете создавать удобные для мобильных устройств макеты и динамический контент, чтобы добавить последние штрихи к продукту, которым вы будете рады похвастаться перед другими.
4. Хостинг
Никогда не нужно снова и снова беспокоиться об обслуживании сервера, инфраструктуре или операциях.
Он позаботится о развертывании и размещении для вас безопасным и надежным образом. Количество пользователей, объем трафика и хранилище данных не ограничены.
Создание приложения с помощью Bubble (учебник)
Давайте теперь приступим к делу и рассмотрим, как вы можете создать новостное приложение на Bubble.
1. Начало работы
Мы начнем с использования инструмента визуального дизайна Bubble, чтобы сформировать нашу платформу. интерфейс . Некоторые из ключевых страниц, которые следует включить, приведены ниже:
- Страница загрузки — веб-сайт, на котором авторы будут разрабатывать и распространять статьи.
- Домашняя страница — отображается список недавно опубликованных историй.
- Страница повествования — страница, на которой можно найти каждую уникальную историю.
- Страница автора — страница для отображения списка сказок от определенного автора.
2. Настройка базы данных
После того, как вы разместили дисплей вашего продукта, вы можете сосредоточиться на создании полей данных, которые будут подпитывать ваше приложение. Мы будем использовать эти поля, чтобы связать рабочие процессы, лежащие в основе вашего продукта.
В этом примере мы установим два разных типа данных для каждой новости. Один тип данных будет содержать основные факты истории (такие как заголовок, избранное изображение и автор), а другой тип данных будет содержать более крупные файлы контента, такие как само повествование.
Определив их как дискретные типы данных, мы можем загружать только ту информацию, которая требуется, когда это требуется, ограничивая количество материала, которое потребуется для создания редактора Bubble.
Будут созданы следующие типы данных и поля:
Тип данных: Информация о пользователе
Тип данных: Содержание истории
3. Построение рабочих процессов
Теперь, когда вы организовали дизайн своего приложения и базу данных, пришло время собрать все вместе и заставить его работать.
Рабочие процессы являются основным методом для достижения этого в Bubble.
Каждый рабочий процесс возникает, когда происходит событие (например, пользователь нажимает кнопку), а затем в ответ выполняет последовательность «действий» (например, «зарегистрировать пользователя», «внести изменения в базу данных» и т. д.). .
4. Создание новости
Первая функция, которую мы предложим, — это инструмент, позволяющий издателям писать и публиковать новости на сайте.
На странице загрузки мы начнем с включения множества элементов ввода, которые будут применяться для ввода данных в нашу базу данных. Примерами этих полей являются ввод текста, загрузчик изображений и выбор в раскрывающемся списке.
Нам также потребуется настроить раскрывающееся меню издателя для отображения списка динамических параметров. Поскольку каждая новая статья будет добавляться в список всех статей издателя, нам нужно будет выбрать существующего издателя из нашей базы данных.
При настройке этого раскрывающегося меню мы выберем тип параметров, чтобы быть издателем.
После этого наш источник данных просканирует нашу базу данных и вернет список всех текущих публикаций. Наконец, мы изменим заголовок источника, включив в него имя издателя.
После того, как писатель введет необходимую информацию в каждую запись на странице, он нажмет кнопку публикации, чтобы создать новую историю.
Затем в своей базе данных вы создадите новую вещь с описательным типом данных.
Затем нам нужно начать заполнять нашу базу данных необходимыми полями. Подключите каждый из компонентов ввода на странице к соответствующим столбцам базы данных.
Во-первых, мы создадим тип контента рассказа, который, наконец, будет связан с самим рассказом.
Далее мы добавим к этой процедуре еще один этап, сгенерировав что-то еще — на этот раз саму сказку.
Эти данные можно легко интегрировать в вашу платформу, интегрировав первый повествовательный материал, который мы разработали для этой истории.
Каждый раз при активации этой процедуры (нажатие кнопки) будет создаваться новая история.
5. Отображение динамического контента в ленте
Как только издатели начнут загружать материалы в ваше мобильное приложение, нам нужно будет приступить к созданию логики на вашей домашней странице, которая будет отображать каждую статью в виде динамического списка. Этого можно добиться, используя повторяющийся групповой элемент.
Повторяющиеся группы работают с вашей базой данных, чтобы представить и обновить список динамического материала.
При применении повторяющейся группы вы должны сначала связать элемент с типом данных в вашей базе данных.
В этом случае вы отнесете материал к категории сказок. Вам также потребуется предоставить источник данных в виде списка всех таблиц в вашей базе данных.
Мы также упорядочим эту повторяющуюся группу по дате начала каждой истории, показав список в обратном хронологическом порядке. Теперь вы можете приступить к организации динамического материала, который будет отображаться в каждой сетке.
Просто заполните верхнюю строку соответствующим материалом, который вы хотите отобразить, и этот мощный элемент заполнит оставшиеся столбцы данными из вашей текущей базы данных.
6. Отправка данных между страницами
Также возможно создавать события в каждой строке повторяющейся группы. При разработке навигационных функций для вашей платформы этот функционал пригодится.
На главной странице нашего новостного приложения просто отображается предварительный просмотр каждой истории, включая издателя, избранное изображение и название истории.
Однако он не отображает все содержание статьи до тех пор, пока пользователь не перейдет на страницу истории. Мы будем использовать наш редактор рабочего процесса для передачи данных между страницами для отображения этого материала.
Для начала создайте процесс, который отправляет пользователя на страницу истории при нажатии на изображение истории.
Используйте событие навигации для перехода пользователя на другую страницу при разработке этого процесса.
В раскрывающемся меню выберите тип целевой страницы для описательной страницы (детали истории). Затем вам нужно будет предоставить дополнительную информацию на этой странице, чтобы редактор Bubble понял, какую уникальную историю показать.
Информация, которую вам нужно предоставить, исходит из текущей ячейки списка.
7. Отображение динамического контента на странице истории
Вы можете легко получить эти данные о событии и показать соответствующий материал, когда пользователь отправляется на страницу истории.
Чтобы создать эту функцию, вы должны сначала убедиться, что тип целевой страницы соответствует ТИПУ данных, которое вы ПЕРЕДАЕТЕ через рабочий процесс (в предыдущем шаге). В этой ситуации вы должны связать страницу истории с ТИПОМ STORY и страница сама поймет, когда ей передадут Историю с любой другой ячейки на вашем сайте.
Теперь вы можете начать вставлять динамический материал в поля, отображающие информацию из одной таблицы.
Просто везде в начале указывайте: Current Page Story (это означает история, переданная этой странице)
8. Отображение статей Автора
После прочтения новости пользователь может просмотреть весь каталог статей издателя. Создать отдельную страницу для издателей так же просто, как создать исходную домашнюю страницу.
На этой странице нам нужно начать с установки типа страницы для Автора.
Затем скопируйте повторяющуюся группу с домашней страницы и отредактируйте настройки, заменив все истории, на истории этого автора.
В этом случае источник данных нашей повторяющейся группы будет искать все существующие статьи, издателем которых является текущий издатель страницы.
ПОИЩИ: ВСЕ ИСТОРИИ, затем указываем параметр поиска: Автор, который передан текущей странице. ДА, ТАК ПРОСТО.
9. Подписка на Авторов
Третья фундаментальная функция, которую мы создадим для нашего MVP, — это возможность следить за автором на платформе. Мы добавим кнопку подписки на страницу Автора. Щелкнув по этому значку, мы запустим новый процесс, который что-то изменяет.
Добавление текущего издателя страницы в их список следующих публикаций изменит текущего пользователя.
После этого нам нужно будет обновить список подписчиков текущего издателя страницы, добавив текущего пользователя.
10. Дополнительные функции, которые вы можете добавить
Теперь, когда вы освоились с созданием настраиваемых полей данных и представлением динамической информации, вы можете проявить творческий подход к возможностям, которые вы создаете для своего продукта. Вы также можете включить:
- Создайте функцию, позволяющую пользователям сохранять контент для последующего чтения.
- В нижней части каждой статьи предоставьте повторяющуюся коллекцию рекомендуемых статей.
- Создайте инструмент поиска, чтобы помочь людям найти свежий контент на сайте.
11. Результат
Ваше окончательное приложение будет выглядеть примерно так.
