データは私たちの日常生活に欠かせない要素であるため、Vtigerは、CRMの外部でもデータに簡単にアクセスできるようにすることを目指しています。
の最も重要な機能のXNUMXつ Vtiger Application Platform（VTAP）は、必要なデータをCRMから任意の場所に（またはその逆に）転送する機能です。 そしてVTAPを組み合わせる モジュールデザイナツール、UIのカスタマイズが可能で、外部アプリケーションと接続できるAPI Designerにより、可能性の世界が開かれました。
思い出してください。以前のブログでVTAPプラットフォームについて話しました。
このブログでは、REST APIをサポートする他のアプリケーションに接続し、VtigerUI内のデータを表示する方法について説明します。 このために、以下を使用します。
- 外部アプリに接続してデータをフェッチするためのAPIデザイナー
- ウィジェットUIを追加するためのモジュールデザイナツール
ケーススタディ： 連絡先の場所の天気の詳細を取得し、連絡先のレコードに詳細を表示します。
連絡先の天気の詳細を取得して、連絡先のウィジェット内に表示する方法を見てみましょう。 詳細ページ。 オープンウェザーマップ.org 無料の天気APIを提供します。 サインアップしてAPIキーを取得し、 details 200,000万以上の都市の。
これは、OpenWeatherMapに接続した後、VtigerCRMの連絡先レコードでどのように表示されるかを示しています。
APIデザイナから始めましょう。
ステップ1：API Designerを使用して、openweathermap.orgに接続してデータをフェッチします.
このステップでは、次のことを行います。
- APIDesignerを使用してAPIを作成する
- HTTPベースのエンドポイントを定義する
- API Designerを使用してAPIを作成するにはどうすればよいですか？
まず、APIDesignerのopenweathermap.orgから天気情報を取得するAPIを作成しましょう。 次の手順を実行します：- [メニュー]> [プラットフォーム]> [APIデザイナー]に移動します。
- [APIの追加]をクリックします。
- 'get_weather'などの名前を追加します。 ここでは、JavaScript APIから接続するために命名規則を使用するため、命名規則が重要です。
- 天気ウィジェットを作成する場所である連絡先モジュールを選択します。
- HTTPベースのエンドポイントの定義
すべてのAPIは ヴァドル（Vtiger Application Definition Language）。これは大まかにXMLに基づいており、HTTPベースのエンドポイントを呼び出すことができます。
HTTPエンドポイントの構造を定義する必要があります。これには通常、GET、POST、PUT、DELETE、URLエンドポイント、リクエストヘッダー、基本認証などの認証などのタイプのリクエストが含まれます。 都市にアクセスするには 天気の詳細 openweathermap.orgから、以下のエンドポイントでGETリクエストを定義しました。
GET api.openweathermap.org/データ/2.5/weather?q= {シティ 名}＆appid = {API キー}
これをVADLにマップする必要があり、次の例のようになります。
このプロセスを段階的に説明しましょう。
- 任意のHTTP API 下に置かれます a 残り HTTP（GET、POSTなど）タイプのリクエストを定義する必須のメソッド属性を持つノード。
- その中で、私たちは URL APIのエンドポイントに到達します。
- 次の属性があることに注意してください URL ノード。 これらの属性はエンドポイントの動的な部分であり、実行時に値に置き換えるために使用されます。
- 動的な値（@を前に付ける）を持つ属性は、リクエストで渡されたときに受け入れられます。 ここでは@cityを使用しました。
- APIキーの場合、openweathermapから値を貼り付けることができます。 どの属性についても、必ず先頭に追加してください $ 実行時にそれらを置き換える属性名を使用します。
- この CDATA URL内のセクションが使用されます。 ＆のような特殊文字は保持されます。
保存して公開すると、エンドポイントを備えた他のREST APIと同じように、外部アプリケーションからAPIにアクセスできます。 以下のURLをご覧ください。 APIの名前でAPIを呼び出します 天気を取得する。 最終的なxmlにはからアクセスできます こちら 同様に。
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
重要な注意点のXNUMXつは、API設定ですべてのAPIドメインをホワイトリストに登録する必要があるということです。
Vtiger JavascriptAPIからこのAPIにアクセスすることもできます。その方法を説明します。 その前に、詳細ページに天気情報を表示するウィジェットを作成します。
このために、モジュールデザイナに移動して[連絡先]を選択し、TAPスクリプトを追加します。
ステップ2：モジュールデザイナーを使用して新しい天気ウィジェットを追加する
このステップでは、次のことを行います。
- 詳細ページにウィジェットを追加します
- ウィジェットのビジュアルコンポーネントを追加する–マップ
- ポップアップモデルと管理設定を追加する
始めましょう。
ウィジェットの追加
詳細ページにウィジェットを追加するために、JavaScriptAPIを公開しました VTAP.コンポーネント.レジスタ.
これは、特定のページに追加できるボタン、ウィジェット、またはアイコンのタイプを定義するのに役立ちます。
例：
- リストページにボタンを追加するには、「LIST_BASIC_BUTTON
- 詳細ページにウィジェットを追加するには、「DETAIL_SUMMARY_WIDGET
そのようなフックの完全なリストについては、をクリックしてください こちら.
ウィジェットがどのように見えるかを定義するには、必要なHTMLを持つコンポーネントを追加する必要があります。 この場合、WeatherWidgetContentsコンポーネントに移動します。
Vtigerでは、コンポーネントはウィジェットやボタンなどのUIインターフェイスのベースです。コンポーネントの基本的なスケルトンが定義されています こちら.
WeatherWidgetContentsコンポーネントは、次のことを行います。
- APIDesignerで作成したopenweathermapAPIget_weatherを呼び出します。
- 現在の時刻、日の出と日の入りの時刻、気温、一般的な予測など、いくつかの基本的な詳細を読み込みます。
- オープンストリートをロードし、地図上に都市を表示します。
Vtigerコンポーネントの構造を理解するには、 Vueコンポーネント VTAPプラットフォームはその上に構築されているためです。
以下の例を考えてみましょう。 ここでは、 天気を取得する API Designerで追加したAPI（作成された関数内）。 VTAP.Detail.Record（） Javascript APIは、レコードの詳細を提供します。 天気の詳細にアクセスするには、連絡先の郵送都市のフィールド情報にアクセスします。
データを受信したら、テンプレート内の気象データを使用して、メソッド内で定義されたコンポーネント固有の関数を使用してデータをレンダリングします。
を使用しております VTAP.CustomApi.Get を呼び出してopenweathermap.orgからデータをフェッチするAPI 天気を取得する APIDesignerで記述されたAPI。 次の方法でアクセスできるように、応答をデータ変数に割り当てます。
- 処理のためのコンポーネントメソッド
- 表示用のテンプレート。
多くのヘルパー関数は、時間と温度を読み取り可能な形式で表示するのに役立つメソッドで記述されています。
あなたはコードを見ることができます こちら.
これは、スクリプトを保存して公開し、郵送先の都市がある連絡先を開くとどのように表示されるかを示しています。 しかし、これは少し退屈に思えませんか？ 地図を追加してみませんか？
- ビジュアルコンポーネントの追加–マップ
この例では、OpenStreetマップを追加して、地図上に郵送都市を表示しましょう。
Open Streetマップを追加するには、最初にそのライブラリファイルを含める必要があります。 VTAPのJavascriptライブラリでは、を使用してランタイムに任意のライブラリを含めることができます。 VTAP.Resource.Require APIです。
詳細ウィジェット自体を登録するときに、これらのライブラリを含めることができます。
次に、WeatherWidgetContentにマップを表示する必要があります。 テンプレートにプレースホルダーを追加し、座標を使用してget_weatherAPIからデータを取得した後にロードすることから始めます。 例から完全なスクリプトを取得できます こちら そしてそれが実際に動いているのを見てください。
これを拡張モジュールとしてリリースし、各顧客がこれをインストールして独自のopenweathermap.orgAPIキーを使用したいとします。 このために、JavaScriptストアAPIを使用して顧客データを保存できます。これは、APIDesignerで次を使用してアクセスできます。 プレースホルダー変数.
- ポップアップモデルと管理設定の追加
管理者のみがアクセスしてデータストアにAPIキーを保存できる小さなモーダルポップアップを作成しましょう。 まず、コンポーネントを登録して、リストページに設定を表示します。
これは、リストページでどのように表示されるかを示しています。
- Vtigerのデータストレージ
我々は使用するだろう VTAP.AppData APIキーを保存および取得するためのAPI。 保存するキーとしてweather_apikeyを使用していることに注意してください。これには、APIDesignerで$ apps。$ app.Contacts.weather_apikeyを使用してアクセスできます。
WeatherSettingsコード全体にはからアクセスできます こちら.
APIキーを格納するためにVTAPストアデータAPIを使用した後、以下に示すようにAPIDesignerのget_weather定義を変更できます。 直接キー値を次のように置き換えます $ apps。$ app.Contacts.weather_apikey.
これで、顧客ごとにAPIキーを構成できるようになったため、拡張機能をマーケットプレイスに公開できる状態になりました。
