Съдържание[Крия][Покажи]
- Какво е 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 конектор вероятно е най-важният плъгин на пазара. Както подсказва името, това ви позволява да се свързвате с други приложения и услуги, за да споделяте действия и данни.
Вместо да задълбавате в техническите специфики на това как работи това, помислете за тези примери за това какво могат да постигнат API:
- Получаване на достъп до машинно обучение методи като разпознаване на изображения и превод.
- Вземете най-новата информация за времето от всяка точка на земята.
- Когато събитие се задейства в Bubble, информацията се обменя между системите, като например установяване на потенциален клиент във вашия CRM или среща във вашия Google Календар.
- Резервирайте полет или престой в хотел навсякъде по света.
- Вземете телефонния номер, местоположението, снимките, логото и отзивите за всяка компания в Google Maps.
Използване на плъгини за подобряване на естествените функции
Технически, той смесва 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.io?