由於數據是我們日常生活的基本要素，Vtiger 旨在使數據易於訪問，即使在 CRM 之外。
最顯著的特點之一 Vtiger 應用程序平台 (VTAP) 能夠將所需的數據從 CRM 傳輸到任何地方，反之亦然。 並結合 VTAP 模塊設計器工具，它允許 UI 自定義，帶有可以與外部應用程序連接的 API 設計器打開了一個充滿可能性的世界。
回想一下，我們在之前的博客中談到了 VTAP 平台。
在本博客中，我們將討論如何連接到支持 REST API 的其他應用程序並在 Vtiger UI 中顯示數據。 為此，我們將使用：
- 用於從外部應用程序連接和獲取數據的 API 設計器
- 用於添加小部件 UI 的模塊設計器工具
案例分析： 獲取聯繫人位置的天氣詳細信息並在聯繫人記錄中顯示詳細信息。
讓我們來看看如何獲取聯繫人的天氣詳細信息並將其顯示在聯繫人的小部件中 詳情頁面。 openweathermap.org 提供免費的天氣 API。 您可以註冊並獲取 API 密鑰以訪問 詳情 超過 200,000 個城市。
這是您連接 OpenWeatherMap 後，它在 Vtiger CRM 中的聯繫人記錄中的外觀。
現在讓我們從 API Designer 開始。
步驟 1：使用 API Designer 連接並從 openweathermap.org 獲取數據.
在這一步中，我們將：
- 使用 API Designer 創建 API
- 定義基於 HTTP 的端點
- 如何使用 API Designer 創建 API？
首先，讓我們在 API Designer 中創建一個 API 來從 openweathermap.org 獲取天氣信息。 按著這些次序：- 轉到菜單 > 平台 > API 設計器。
- 單擊添加 API。
- 添加名稱，例如“get_weather”。 在這裡，命名約定至關重要，因為我們將使用它從我們的 javascript API 進行連接。
- 選擇聯繫人模塊，因為這是我們構建天氣小部件的地方。
- 定義基於 HTTP 的端點
我們所有的 API 都依賴於 VADL（Vtiger 應用程序定義語言），它鬆散地基於 XML，允許您調用任何基於 HTTP 的端點。
我們需要定義一個 HTTP 端點的結構，它通常涉及一種請求類型，如 GET、POST、PUT、DELETE、URL 端點、請求標頭和身份驗證（如基本身份驗證等）。 訪問一個城市的 天氣詳情 他們從 openweathermap.org 定義了一個帶有以下端點的 GET 請求。
GET api.openweathermap.org/數據/2.5/天氣？q={ 名稱}&appid={API 關鍵}
我們需要將它映射到 VADL，它會像下面的例子一樣：
讓我一步一步解釋這個過程：
- 任何 HTTP API 被放在 a 其餘 具有強制性方法屬性的節點，該屬性定義了請求的 HTTP（GET、POST 等）類型。
- 在裡面，我們使用 網址 到達 API 的端點。
- 請注意，有些屬性帶有 網址 節點。 這些屬性是端點的動態部分，用於在運行時用值替換它們。
- 在請求中傳遞時，將接受任何具有動態值（以@ 開頭）的屬性； 我們在這裡使用了@city。
- 對於 API 密鑰，您可以粘貼來自 openweathermap 的值。 對於任何屬性，請確保您預先 $ 使用屬性名稱在運行時替換它們。
- 數據 使用 URL 內的部分。 像 & 這樣的特殊字符被保留下來。
保存並發布後，您可以從外部應用程序訪問 API，就像我們其他帶有端點的 REST API 一樣。 看看下面的網址。 我們用 API 的名稱調用 API 獲取天氣. 您可以從 点击這裡 以及。
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
一個重要的注意事項是您應該將 API 設置下的每個 API 域列入白名單。
您也可以從 Vtiger Javascript API 訪問此 API，我們將告訴您如何操作。 在此之前，我們要在詳細信息頁面上創建一個小部件來顯示天氣信息。
為此，我們將轉到 Module Designer 並選擇 Contacts 並添加一個 TAP 腳本。
步驟 2：使用模塊設計器添加新的天氣小部件
在這一步中，我們將，
- 在詳細信息頁面添加小部件
- 為小部件添加可視化組件——地圖
- 添加彈出模型和管理設置
讓我們開始吧。
添加小部件
為了在詳細信息頁面中添加小部件，我們公開了 javascript API VTAP.組件.註冊.
這將幫助您定義可以添加到特定頁面的按鈕、小部件或圖標的類型。
例如：
- 要在列表頁面上添加按鈕，請使用“列表_基本_按鈕“
- 要在詳細信息頁面中添加小部件，請使用“DETAIL_SUMMARY_WIDGET“
有關此類掛鉤的完整列表，請單擊 点击這裡.
要定義小部件的外觀，我們需要添加一個具有所需 HTML 的組件。 在本例中，我們將轉到 WeatherWidgetContents 組件。
在 Vtiger 中，組件是任何 UI 界面（如小部件、按鈕等）的基礎。組件的基本框架已定義 点击這裡.
WeatherWidgetContents 組件將執行以下操作：
- 調用我們在 API Designer 中創建的 openweathermap API get_weather。
- 加載一些基本細節，如當前時間、日出和日落時間、溫度和一般預報。
- 加載 Open Street 並在地圖上顯示城市。
要了解 Vtiger 組件的結構，您需要了解一些 組件 因為我們的 VTAP 平台是建立在它之上的。
考慮下面的例子。 這裡我們稱 獲取天氣 API，我們在 API Designer 中添加（在創建的函數內）。 VTAP.Detail.Record() Javascript API 提供了記錄的詳細信息。 我們將訪問聯繫人郵寄城市字段信息以訪問天氣詳細信息。
接收到數據後，我們使用模板中的天氣數據在方法中定義的特定於組件的函數的幫助下呈現它們。
我們使用 VTAP.CustomApi.Get 通過調用從 openweathermap.org 獲取數據的 API 獲取天氣 用 API Designer 編寫的 API。 將響應分配給數據變量，以便可以通過以下方式訪問它：
- 一種組件處理方法
- 用於展示的模板。
許多輔助函數都編寫在方法中，以幫助以可讀格式顯示時間和溫度。
你可以看到代碼 点击這裡.
這是保存並發布腳本並打開具有郵寄城市的聯繫人後的樣子。 但是你不覺得這看起來有點無聊嗎？ 為什麼不添加地圖？
- 添加可視化組件——地圖
在本例中，讓我們添加一個 OpenStreet 地圖並在地圖上顯示郵寄城市。
要添加 Open Street 地圖，我們首先需要包含其庫文件。 VTAP 中的 Javascript 庫允許在運行時包含任何使用 VTAP.資源.需求 API。
您可以在註冊詳細信息小部件本身時包含這些庫。
現在我們需要在 WeatherWidgetContent 中顯示地圖。 首先在模板中添加一個佔位符，並在從帶有坐標的 get_weather API 獲取數據後加載它。 您可以從我們的示例中獲取完整的腳本 点击這裡 並觀看它的行動。
現在假設您想將它作為擴展模塊發布，並且每個客戶都希望安裝它並使用他們自己的 openweathermap.org API 密鑰。 為此，我們可以使用我們的 javascript 存儲 API 存儲客戶數據，這些 API 可以在 API Designer 中使用 佔位符變量.
- 添加彈出模型和管理設置
讓我們創建一個小的模態彈出窗口，只有管理員才能訪問 API 密鑰並將其存儲在我們的數據存儲中。 首先，註冊一個組件以在列表頁面上顯示設置。
這就是它在列表頁面中的樣子。
- Vtiger 中的數據存儲
我們將使用 VTAP.應用程序數據 API 用於存儲和檢索其 API 密鑰。 請注意，我們使用weather_apikey 作為存儲密鑰，可以在API Designer 中使用$apps.$app.Contacts.weather_apikey 訪問它。
您可以訪問整個 WeatherSettings 代碼 点击這裡.
使用 VTAP 存儲數據 API 存儲 API 密鑰後，我們可以修改 API Designer get_weather 定義，如下所示。 我們將直接鍵值替換為 $apps.$app.Contacts.weather_apikey.
現在您可以將您的擴展發佈到我們的市場，因為您已經為每個客戶配置了 API 密鑰。
