我最近對 HTML、CSS 和 JavaScript 以外的 Web 開發方法感興趣。
隨著無代碼環境的發展,發現有多種替代標準方法來開發 Web 應用程序也就不足為奇了。
您必須熟悉一些比較知名的 CMS 平台,例如幾乎沒有代碼的 WordPress。 但是,如果您想構建 Web 應用程序,這些平台可能會顯得有些限制。
在這裡,我向您介紹 Bubble.io,一個強大的 無代碼工具 讓您以前所未有的方式構建 Web 應用程序。
讓我們深入探討一下!
什麼是 泡泡網?
Bubble 是一個結合了可視化編程語言和 網頁開發框架.
用戶可以使用這些編程工具來構建獨特的在線應用程序、更改數據庫和流程、添加頁面組件(圖像、文本、輸入表單、地圖)並設計其界面。
這是一個市場,您可以在其中發現理想的模板、插件和服務,以幫助您構建強大的產品。
無需設置典型的編程框架,您就可以使用 Bubble 創建從市場到社交網絡再到 CRM(客戶關係管理)的任何東西。
它使客戶能夠使用用戶友好的界面和點擊式編輯器來創建和個性化他們的應用程序。
您可以將它與提供 REST API 的服務結合使用,例如 Facebook、SQL、分析和支付應用程序。 它使用戶能夠花時間改進其應用程序的功能和外觀,以便它們在平板電腦和移動設備上看起來很好。
它適用於從小型到中型到大型的所有企業規模; 並可用於 Windows、Mac 和 Web。
什麼是可視化編程?
可視化編程本質上就是它聽起來的樣子。 您無需通過編寫代碼手動編程,而是通過單擊組件並將其拖入頁面以圖形方式進行。
不要被那個簡短的描述誤導。
它不像您在網上遇到的任何其他千篇一律的應用程序或網站構建工具。 大多數應用程序構建器要求您依賴基本模板並且功能極其有限; 它們只允許您開發特定類型的應用程序並限制您的個性化。
雖然“可視化編程”和“拖放”的概念在 Bubble 中看起來很簡單,但它非常強大。
它的可視化編程環境不僅允許您將文本、圖形、輸入等對象拖到頁面上,還允許您配置這些元素的功能。
泡泡是做什麼的?
Bubble 的主要目標是讓任何人無需編寫代碼即可創建 Web 應用程序。
然而,雖然這提供了一個容易記住的目標陳述,但它遺漏了故事的重要部分。 從想法到市場的路徑比僅僅創建代碼行更複雜。
在傳統開發中,需要一支訓練有素的專業人員團隊來處理應用程序的創建、增長和維護的某些部分。 考慮一下。
每個應用程序需要什麼?
- 確保沒有人未經授權訪問數據的安全性。
- 用於存儲和檢索信息(例如項目、文章和社交媒體更新)的數據庫。
- 可擴展性使用戶群和數據量的發展不受阻礙。
- 令人愉悅的用戶界面,使應用程序具有吸引力且易於使用。
- 與各種服務和系統集成。
Bubble 取代的不僅僅是編碼器。 它以視覺上吸引人且高度自動化的方式提供所有這些服務,即使不簡單,也可以想像由一個人來處理所有事情。
而以前的無代碼平台已嘗試以各種方式替換編碼。 它的概念是盡可能多地消除應用程序進入市場的障礙,處理從響應式設計和動畫到託管、版本部署、安全性和數據庫操作的所有事情。
使用 API 連接器將 Bubble 連接到其他服務
它的 API 連接器可能是市場上最重要的插件。 顧名思義,這允許您連接到其他應用程序和服務以共享操作和數據。
與其深入研究其工作原理的技術細節,不如考慮這些 API 可能完成的示例:
- 獲得訪問權 機器學習 圖像識別和翻譯等方法。
- 從地球上的任何地方獲取最新的天氣信息。
- 在 Bubble 中觸發事件時,系統會交換信息,例如在您的 CRM 中建立潛在客戶或在 Google 日曆中進行約會。
- 預訂全球任何地方的航班或酒店住宿。
- 在 Google 地圖上獲取任何公司的電話號碼、位置、照片、徽標和評論。
使用插件增強原生功能
從技術上講,它將 JavaScript 代碼模塊、CSS 和 HTML 混合到一個功能節點中。 用 JS.JSON 編寫的應用程序是其自身語言的基礎。
雖然您不需要完全理解這些術語來構建應用程序,但它們確實表明了一個關鍵事實:它遵循已知和公認的 Web 標準,允許開發人員顯著增強其原生功能。
這已經在插件站點上看到,那裡有數百個基本功能的免費和付費擴展。 這也意味著,如果你的基礎能力不足,那麼有很多 JavaScript 專家願意為你提供定制的解決方案。
您可以開發哪些類型的應用程序?
您可以創建範圍廣泛的應用程序,其中一些在下面給出。
- 適用於具有社區的專業市場的應用程序。
- 適用於各個行業的工作委員會的應用程序。
- 醫院人員配備軟件。
- 實體店的銷售點軟件。
- 帶有白色標籤的牙科辦公室軟件。
- 個人商業庫存和客戶服務軟件。
- 經紀人和麵向客戶的房地產聚合應用程序。
- 市場上的活動和課程應用程序(甚至船隻)。
- 專業證書需要內部測試申請。
- 第一響應者的應用程序。
- 內部使用的員工管理軟件。
老實說,該平台並非旨在完成所有工作。 如果您正在設計具有復雜視覺效果和動作的遊戲應用程序,它可能不是理想的選擇。 此外,如果您正在創建一個原生應用程序(一個用於應用商店的應用程序),您需要將它與另一個第三方服務集成。
主要特徵
Bubble 充滿了各種功能。 我們將無法在這裡涵蓋所有內容,但我們將嘗試涵蓋最重要的內容。
1。 插件
它允許您將 Internet 上眾多工具的功能包含在您的 Web應用程序. 例如,如果您希望您的用戶使用他們的 Facebook 帳戶登錄,您可以使用 Facebook 插件來執行此操作。
2。 開發
它允許您為桌面和移動網絡瀏覽器構建動態的多用戶應用程序,以及構建類似於 Instagram 或 Airbnb 的網站所需的所有工具。
3。 設計
您可以創建適合移動設備的佈局和動態內容,為您樂於向他人展示的產品進行最後潤色。
4。 主機
永遠不必一次又一次地擔心服務器維護、基礎設施或操作。
它以安全可靠的方式為您處理部署和託管。 用戶數量、流量、數據存儲都不受限制。
使用 Bubble 構建應用程序(教程)
現在讓我們開始行動,探索如何在 Bubble 上構建新聞應用程序。
1.入門
首先,您必須先 在 Bubble 上註冊一個免費帳戶.
我們將首先使用 Bubble 的視覺設計工具來塑造我們平台的 用戶界面. 下面給出了一些要包括的關鍵頁面:
- 上傳頁面——出版商將開發和分發文章的網站。
- 主頁 – 顯示最近發布的故事列表。
- 敘述頁面——可以找到每個獨特故事的頁面。
- 出版商頁面 - 顯示某個出版商的故事列表的頁面。
2.配置數據庫
在您佈置好產品的展示之後,您可以專注於構建將為您的應用程序提供動力的數據字段。 我們將使用這些字段來鏈接您產品的工作流程。
對於這個例子,我們將為每條新聞建立兩種不同的數據類型。 一種數據類型將包含故事的基本事實(例如標題、特色圖片和出版商),而另一種數據類型將包含更大的內容文件,例如整個敘述本身。
通過將它們定義為離散數據類型,我們只能在需要時加載所需的信息,從而限制氣泡編輯器需要生成的材料數量。
將創建以下數據類型和字段:
數據類型: 用戶名单
領域:
- 姓名
- 以下發布者是發布者列表。 重要提示:根據不同的數據類型將字段創建為列表允許您輕鬆合併其所有基本數據字段,而無需創建額外的字段。
數據類型: 我們的故事
領域:
- 標題
- 特色圖片
- 作家
- 類別
- 出版者
- 故事內容
數據類型: 故事內容
領域:
- 故事內容
數據類型: 出版者
領域:
- 姓名
- Logo
- 關注
3. 構建工作流程
現在您已經組織了應用程序的設計和數據庫,是時候開始將所有內容放在一起並使其工作了。
工作流是在 Bubble 中完成此任務的主要方法。
每個工作流在事件發生時發生(例如,用戶單擊按鈕),然後執行一系列“操作”作為響應(例如,“註冊用戶”、“更改數據庫”等) .
4. 創建新聞故事
我們將提供的第一個功能是允許出版商撰寫和發布新聞到網站的工具。
在上傳頁面上,我們將首先合併許多輸入項,這些輸入項將用於將數據輸入到我們的數據庫中。 文本輸入、圖片上傳器和下拉選擇是這些字段的示例。
我們還需要自定義發布者下拉菜單以顯示動態選項列表。 由於每篇新文章都會添加到出版商的總文章列表中,因此我們需要從我們的數據庫中選擇一個現有的出版商。
設置此下拉菜單時,我們將選擇作為發布者的選項類型。
之後,我們的數據源將掃描我們的數據庫並返回所有當前出版物的列表。 最後,我們將更改源標題以包含發布者的名稱。
一旦作者在每個頁麵條目中輸入了必要的信息,他們將單擊發布按鈕以生成新故事。
然後,在您的數據庫中,您將創建一個數據類型設置為敘述性的新事物。
然後我們需要開始用必要的字段填充我們的數據庫。 將每個頁面輸入組件連接到它們各自的數據庫列。
首先,我們將創建故事內容類型,最終將鏈接到故事本身。
接下來,我們將在此過程中添加另一個階段,生成其他內容——這次是故事本身。
通過整合我們用這個故事開發的第一個敘述材料,可以輕鬆地將這些數據整合到整個平台中。
每次激活此程序時,都會產生一個新的故事。
5. 在提要中顯示動態內容
一旦出版商開始將材料上傳到您的移動應用程序,我們將需要開始在您的主頁上創建將每篇文章顯示為動態列表的邏輯。 這可以通過使用我們的重複組元素來實現。
重複組與您的數據庫一起工作,以呈現和刷新動態材料列表。
應用重複組時,您必須首先將元素鏈接到數據庫中的數據類型。
在這種情況下,您會將這類材料歸類為故事。 您還需要將數據源作為數據庫中所有表的列表提供。
我們還將按每個故事的開始日期排列此重複組,按時間倒序顯示列表。 您現在可以開始組織將出現在每個網格中的動態材料。
只需使用您要顯示的適當材料填寫第一行,這個強大的元素將使用當前數據庫中的數據填充剩餘的列。
6. 頁面間發送數據
也可以在重複組的每一行中構建事件。 在為您的平台開發導航功能時,此功能會派上用場。
我們的新聞應用程序的主頁僅顯示每個故事的預覽,包括發布者、特色圖片和故事標題。
但是,在用戶單擊故事頁面之前,它不會顯示文章的全部內容。 我們將使用我們的工作流編輯器在頁面之間傳輸數據以顯示此材料。
首先,創建一個在單擊故事圖片時將用戶發送到故事頁面的流程。
在開發此過程時,使用導航事件將用戶轉移到另一個頁面。
從下拉菜單中選擇目標頁麵類型作為敘述頁面。 然後,您需要向此頁面提供更多信息,以便 Bubble 編輯器了解要顯示的獨特故事。
您需要提供的信息來自當前的細胞故事。
7. 在故事頁面上顯示動態內容
當用戶被發送到某個故事頁面時,您可以輕鬆地檢索此事件數據並顯示敘述中的相關材料。
要創建此函數,您必須首先檢查目標頁麵類型是否與您通過工作流提供的數據屬性相匹配。 在這種情況下,您必須將故事頁面與故事屬性相關聯。
通過對頁面上的內容類型進行分類,它可以簡單地從現有來源中提取和交付適當的數據。
您現在可以開始將動態材料插入到顯示單個表中信息的字段中。
8. 顯示發布者的文章
閱讀新聞項目後,用戶可以選擇檢查出版商的整個文章目錄。 如果您已經開發了發布者數據類型,那麼為發布者創建單獨的頁面就像創建我們的原始主頁一樣簡單。
在此頁面上,我們首先需要將頁麵類型設置為發布者。
然後,從主頁複製重複組並編輯設置。
在這種情況下,我們的重複組的數據源將查找其發布者是當前頁面發布者的所有現有文章。
9.關注發布者
我們將為 MVP 構建的第三個基本功能是能夠在平台上關注發布者。 我們將在發布者頁面上添加一個關注按鈕。 當我們單擊此圖標時,我們將啟動一個修改事物的新進程。
將當前頁面發布者添加到他們的以下出版物列表中將更改當前用戶。
之後,我們需要通過添加當前用戶來更新當前頁面發布者的關注者列表。
10.您可以添加的附加功能
現在您已經習慣了構建自定義數據字段並呈現動態信息,您可以通過為您的產品創建的體驗獲得創意。 您還可以包括:
- 創建一個功能,允許用戶保存內容以供以後閱讀。
- 在每篇文章的底部,提供建議文章的重複集合。
- 創建一個搜索工具來幫助人們在網站上找到新鮮的內容。
11. 結果
您的最終應用程序將如下所示。
優點
- 連接到許多 API 和插件的能力。
- 一個易於使用的無代碼應用程序。
- 沒有編程經驗的人將從中受益。
- 多功能且功能強大的設計工具。
- 快速查詢處理。
缺點
- 增加了可靠性。
- 數據處理速度慢。
- 性能受到限制。
方案收費
免費計劃允許您了解該平台並開發您的應用程序。
付費訂閱包括白標籤、自定義域、對 Bubble API 的訪問和保留的服務器容量等額外內容,如下所列。
- 個人 – 每月 25 美元(每年支付)或每月 29 美元(每月支付)。
- 專業 - 115 美元/月(按年支付)或 129 美元/月(按月支付)。
- 生產 – 475 美元/月(按年支付)或 529 美元/月(按月支付)。
結論
Bubble 是構建只能顯示信息或具有最小 UI 的 Web 應用程序的絕佳替代方案。
它使用起來非常簡單,而且 Bubble 提供的教程非常有幫助。 它的在線可視化編輯器允許您根據自己的喜好設計 Web 應用程序。
最好的部分是您不需要任何編程經驗或專業知識。 Bubble 適合所有人,無論您是否知道如何編碼。
但是,對前端語言的事先了解可以為您提供優勢,因為它可以讓您快速弄清楚它在事件處理方面做了什麼。
那麼,您如何看待 Bubble 的能力?
讓我們在評論中知道!
阿爾貝伊
可以使用 bubble.io 工具建立商店來銷售產品嗎?