如何在幾分鐘內發送自定義登錄表單——無需編碼

已發表: 2019-02-14

如果您可以在幾分鐘內為您的產品或應用程序創建一個用戶登錄表單——並且無需編碼——那麼你一定是在做一些非法或神奇的事情。 或者，您可以使用 Mason，這是一個功能構建平台，專為團隊協作設計、構建和部署前端功能而設計。

讓我們先解釋一下梅森是什麼。 然後，我們將向您展示在幾分鐘內構建、設計和部署登錄表單是多麼容易。

Mason 是一個前端即服務平台，您可以在該平台上設計、構建和部署軟件應用程序的全功能特性。 您可以完全控制在代碼庫中管理前端體驗，從而可以在幾分鐘內創建實時功能。

Mason 有效地消除了為開發提供文檔和等待下一個部署週期的需要； 從而從您的工作計劃中消除數週甚至數月的時間。 您將整合原型設計、QA 和工程設計，以閃電般的速度前進。

以下是您使用 Mason 的方法：

  1. 從您將用於設計您希望創建的功能的平台中選擇一個或多個組件； 在這種情況下，可以是單個用戶登錄，也可以是帶有各種命令和選項的登錄流。
  2. 選擇一個模板來工作或構建您自己的模板。 無論哪種方式，您都可以將其自定義到最終像素。
  3. 讓開發人員花幾分鐘時間，讓他們幫助您連接您的 API 端點，點擊“發布”，您新創建的功能將在幾秒鐘內上線。 現在，您可以導出您的功能並使用一行代碼將其放入您的代碼庫中。

如何在不編寫代碼的情況下創建登錄表單

正如您從視頻教程中看到的那樣，這並不難。 您所要做的就是點擊 Play，坐下來，準備好對它的簡單程度留下深刻印象。

如果您想再看一遍這些說明以確保它們正確無誤，為了您的利益，我們會重複一遍。

您將使用Mason Canvas和Mason Builder創建用戶登錄表單。

Mason Canvas是一個虛擬白板，您可以在上面直觀地創建前端設計。 不涉及編碼，您不必將設計交給開發團隊。

Mason Builder使您能夠為網站或應用程序創建和自定義功能，並將它們連接到現有的後端。

重要的是要注意，每當您對功能進行更改時，它都會自動轉換為有效的 HTML/CSS； 不需要調試的代碼可能會減慢部署週期。

有了這些工具，您就可以按照以下分步說明繼續操作：

第 1 步：塑造您的登錄表單

當您登錄到您的Mason帳戶時，您會看到一個“+新功能”按鈕。 單擊它將顯示各種選項。 單擊“畫布”選項。

+新功能 → 畫布

接下來，單擊“元素”選項卡（在您的左側），然後轉到“表單”部分。 選擇一個表單並將其拖放到已經位於 Canvas 上的容器中。

元素 → 表單 → 從 Canvas 拖放表單

單擊表單周圍的空白區域以選擇容器。 這樣做後，您會在右側看到一個欄。 重要提示：在繼續之前檢查欄以確保高度設置為 100%。

您現在只需點擊 3 次即可塑造您的登錄表單！ 做得好！

選擇表單中的“數據”輸入表單，然後單擊頂部的“克隆”選項卡，以添加您需要的任意數量的輸入字段。 然後，您需要切換到右側欄上的“屬性”選項卡，以選擇每個字段所需的輸入類型——文本、數字、URL 等。

數據→克隆→添加輸入字段

數據→屬性→為每個輸入字段選擇輸入類型

第 2 步：自定義表單

使用 Mason 自定義表單本質上是不費吹灰之力。 再次選擇您的表單並查找“樣式”側邊欄。 “樣式”可讓您以任何您想要的方式設置表單樣式，包括更改彩色編輯邊框、更改大小或背景等等。

一旦達到你想要的風格，移動到“提交”按鈕，順便說一下，你也可以自定義。

剩下的就是點擊“發布”。

不要忘記定期點擊“保存”來保存您的工作！

第 3 步：是時候讓您的表單功能齊全了

要使您的表單功能齊全，您需要轉到配置並選擇“數據源”。 這是您填寫 API 端點的地方。 如果您不是技術產品用戶，您團隊中的開發人員可以在幾分鐘內為您提供幫助。

如果您不確定 API 端點是什麼，它是一個地址 (URL)，使用戶能夠訪問您的應用程序（在這種情況下，請登錄）。

Datasources → 填寫 API Endpoint

下一步：返回“表格”部分並選擇“發布”作為您的提交方式。 剩下的就是點擊“發布”並單擊“預覽”按鈕以驗證一切正常。

表單部分→發布→發布→預覽

第 4 步：測試登錄表單

由於您遵循了這些說明，因此您可以確信一切正常，但檢查也無妨。 您可以通過使用 Chrome 的開發者工具檢查網絡請求來做到這一點。

只需轉到“檢查 - 網絡”，您就可以看到瀏覽器正在發出的請求。 通過填寫一些測試憑據，您可以驗證您的表單是否按計劃工作。

梅森可以做的其他很酷的事情以及為什麼你應該嘗試它

為 UI 設計和構建功能部件可能需要數週甚至數月的時間，而使用Mason ，您可以在幾分鐘內獲得相同的結果，並在幾秒鐘內測試您的創作——在此過程中節省時間、金錢和資源。

而且，您還將獲得這些額外的好處：

  1. 交付功能解決方案的閃電般的快速周轉將使您的客戶驚嘆不已，遠遠超出他們的預期。
  2. 您不會被困在一個項目上數週。 相反，您可以承擔額外的工作並為新客戶騰出空間。
  3. 您創建的功能將與品牌風格指南保持一致。 如果某些東西發生了變化，比如顏色或字體，只需在 Mason 中進行更改，點擊發布，您的更改就會實時推送到您已經可以使用的前端功能中。

梅森以團隊為導向。 通過在前端完成所有工作，您的團隊成員會感到被授權，團隊成員、客戶和其他項目利益相關者之間的協作成為第二天性。

最重要的是，您曾經不得不忍受的停機時間和部署週期可能會成為歷史，因為任何授權的個人都可以登錄、進行更改並使更新的功能生效。

將您團隊的工作效率至少提高 10 倍 - Mason 已為您開放並為您準備就緒，並且可以免費開始，因此請單擊此處試一試！