Keďže údaje sú zásadným prvkom nášho každodenného života, cieľom spoločnosti Vtiger je uľahčiť prístup k údajom, a to aj mimo systému CRM.
Jednou z najdôležitejších vlastností Vtiger Application Platform (VTAP) je jeho schopnosť prenášať požadované údaje z CRM kamkoľvek a naopak. A kombinovanie VTAP Nástroj na návrh modulu, ktorá umožňuje prispôsobenie používateľského rozhrania, pomocou API Designer, ktorý sa dokáže spojiť s externými aplikáciami, otvoril svet možností.
Len pre pripomenutie, o platforme VTAP sme hovorili v našich predchádzajúcich blogoch.
- Nástroj Module Designer vám pomôže prispôsobiť si používateľské rozhranie
- Nástroj API Designer vám pomôže vytvoriť vlastné rozhrania REST API
V tomto blogu budeme diskutovať o tom, ako sa môžeme pripojiť k iným aplikáciám, ktoré podporujú rozhrania REST API, a zobrazovať údaje v používateľskom rozhraní Vtiger. Na tento účel použijeme:
- API Designer na pripojenie a načítanie údajov z externých aplikácií
- Nástroj Module Designer na pridanie používateľského rozhrania miniaplikácie
Prípadová štúdia: Získanie podrobností o počasí pre polohu kontaktu a zobrazenie podrobností v zázname kontaktu.
Poďme sa pozrieť na to, ako môžeme získať informácie o počasí kontaktu a ukázať ho v miniaplikácii v kontaktoch podrobná stránka. openweathermap.org poskytuje bezplatné počasie API. Môžete sa zaregistrovať a získať kľúč API na prístup k súboru Podrobnosti z viac ako 200,000 XNUMX miest.
Takto by to vyzeralo v zázname kontaktov vo Vtiger CRM po spojení s OpenWeatherMap.
Začnime teraz s API Designer.
Krok 1: Použitie API Designer na pripojenie a načítanie údajov z openweathermap.org.
V tomto kroku budeme:
- Vytvorte API pomocou API Designer
- Definujte koncové body založené na HTTP
- Ako vytvoriť API pomocou API Designer?
Najprv si v API Designer vytvoríme API na načítanie informácií o počasí z openweathermap.org. Nasleduj tieto kroky:- Prejdite do ponuky> Platforma> Návrhár API.
- Kliknite na Pridať API.
- Pridajte názov, napríklad „get_weather“. Tu je konvencia pomenovania zásadná, pretože ju budeme používať na pripojenie z našich rozhraní API JavaScriptu.
- Vyberte modul Kontakty, pretože práve tam vytvárame miniaplikáciu počasia.
- Definovanie koncových bodov založených na HTTP
Všetky naše API závisia od VADL(Vtiger Application Definition Language), ktorý je voľne založený na XML a umožňuje vám vyvolať akékoľvek koncové body založené na HTTP.
Musíme definovať štruktúru koncového bodu HTTP, ktorý zvyčajne zahŕňa typ požiadavky ako GET, POST, PUT, DELETE, koncový bod URL, hlavičky požiadaviek a autentifikáciu, ako je základné overovanie atď. Prístup do mesta podrobnosti o počasí z openweathermap.org definovali požiadavku GET s nižšie uvedeným koncovým bodom.
GET api.openweathermap.org/data/2.5/weather?q= {mesto názov} & appid = {API kľúč}
Musíme to namapovať na VADL a chcelo by to niečo ako príklad nižšie:
Vysvetlím tento proces krok za krokom:
- Ľubovoľný HTTP API sa dáva pod a zvyšok uzol s povinným atribútom metódy, ktorý definuje typ požiadavky HTTP (GET, POST atď.).
- Vnútri toho používame URL dosiahnuť koncový bod rozhrania API.
- Všimnite si, že existujú atribúty s a URL uzol. Tieto atribúty sú dynamickou súčasťou koncového bodu a používajú sa na ich nahradenie hodnotami za behu.
- Akýkoľvek atribút s dynamickou hodnotou (predpona s @) bude prijatý, keď bude odoslaný v žiadosti; tu sme použili @city.
- Pre kľúč API môžete prilepiť hodnotu z openweathermap. Pri akomkoľvek atribúte sa uistite, že ste predplatili $ s názvom atribútu, ktorý ich má nahradiť za behu.
- CDATA sa používa časť vo vnútri adresy URL. Zachovajú sa také špeciálne znaky ako &.
Po uložení a publikovaní máte k rozhraniu API prístup z externých aplikácií, rovnako ako k iným rozhraniam REST API s koncovými bodmi. Pozrite sa na nižšie uvedenú adresu URL. Rozhranie API nazývame názvom rozhrania API získať_počasie. K záverečnému xml máte prístup z tu rovnako.
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
Jednou dôležitou poznámkou je, že by ste mali v rámci nastavení API pridať na bielu listinu každú doménu API.
K tomuto rozhraniu API máte tiež prístup z rozhraní API Vtiger Javascript a my vám povieme, ako to môžete urobiť. Predtým chceme na stránke s podrobnosťami vytvoriť widget, ktorý bude zobrazovať informácie o počasí.
Za týmto účelom prejdeme do Návrhára modulov, vyberieme Kontakty a pridáme skript TAP.
Krok 2: Pridanie novej miniaplikácie Počasie pomocou programu Module Designer
V tomto kroku budeme
- Pridajte stránku s podrobnosťami o miniaplikácii
- Pridajte pre widget vizuálny komponent - Mapa
- Pridajte vyskakovací model a nastavenia správcu
Začnime.
Pridanie miniaplikácie
Na pridanie miniaplikácie na stránku s podrobnosťami sme odhalili rozhrania API JavaScriptu VTAP.Component.Register.
Pomôže vám to definovať typ tlačidla, miniaplikácie alebo ikony, ktoré môžete pridať na konkrétnu stránku.
Napríklad:
- Ak chcete pridať tlačidlo na stránku Zoznam, použite „LIST_BASIC_BUTTON"
- Ak chcete pridať widget na stránku podrobností, použite príkaz „DETAIL_SUMMARY_WIDGET"
Úplný zoznam takýchto háčikov zobrazíte kliknutím tu.
Aby sme definovali, ako má widget vyzerať, musíme pridať komponent, ktorý bude mať požadovaný HTML. V tomto prípade ideme na komponent WeatherWidgetContents.
Vo Vtiger je komponent základom pre akékoľvek rozhranie používateľského rozhrania, ako sú miniaplikácie, tlačidlá atď. Základná kostra komponentu je definovaná tu.
Komponent WeatherWidgetContents bude vykonávať nasledujúce činnosti:
- Zavolajte API openweathermap get_weather, ktoré sme vytvorili v API Designer.
- Načítajte niekoľko základných podrobností, ako je aktuálny čas, čas východu a západu slnka, teplota a všeobecná predpoveď.
- Načítajte Open Street a ukážte mesto na mape.
Aby ste pochopili štruktúru komponentu Vtiger, potrebujete malú znalosť Vue komponent pretože je na tom postavená naša platforma VTAP.
Zvážte nasledujúci príklad. Tu voláme získať_počasie API, ktoré sme pridali do API Designer (vo vnútri vytvorenej funkcie). VTAP.Detail.Record () Javascript API poskytuje podrobnosti o zázname. Budeme mať prístup k informáciám o meste, ktoré posielajú kontakty, aby sme získali prístup k podrobnostiam o počasí.
Akonáhle sú údaje prijaté, použijeme údaje o počasí v šablóne na ich vykreslenie pomocou funkcií špecifických pre komponenty definovaných v rámci metód.
Používame VTAP.CustomApi.Get API na načítanie údajov z openweathermap.org volaním získať_počasie API napísané v API Designer. Priraďte odpoveď k dátovej premennej, aby k nej mala prístup:
- Zložková metóda na spracovanie
- Šablóna na zobrazenie.
Mnoho pomocných funkcií je napísaných v metódach, ktoré pomáhajú zobraziť čas a teplotu v čitateľnom formáte.
Môžete vidieť kód tu.
Takto by to vyzeralo, keď skript uložíte a publikujete a otvoríte kontakt s poštovým mestom. Ale nezdá sa vám to trochu nudné? Prečo nepridať mapu?
- Pridanie vizuálnej súčasti - mapy
V tomto prípade pridáme mapu OpenStreet a zobrazíme poštové mesto na mape.
Aby sme mohli pridať mapu Open Street, musíme najskôr zahrnúť jej súbor knižnice. Knižnica Javascript vo VTAP umožňuje zahrnutie akejkoľvek knižnice za behu pomocou VTAP.Resource.Require API.
Tieto knižnice môžete zahrnúť pri registrácii samotného widgetu s podrobnosťami.
Teraz musíme zobraziť mapu v WeatherWidgetContent. Začnite pridaním zástupného symbolu do šablóny a jeho načítaním po získaní údajov z rozhrania get_weather API so súradnicami. Kompletný skript môžete získať z našich príkladov tu a sledovať to v akcii.
Teraz povedzme, že to chcete uvoľniť ako rozširujúci modul a každý zákazník to chce nainštalovať a používať svoj vlastný kľúč API openweathermap.org. Za týmto účelom môžeme ukladať údaje o zákazníkoch pomocou našich rozhraní API obchodu JavaScript, ku ktorým je prístup pomocou rozhrania API Designer zástupné premenné.
- Pridanie vyskakovacieho modelu a nastavení správcu
Vytvorme malé modálne kontextové okno, ku ktorému budú mať prístup a uloženie kľúča API v našom úložisku údajov iba správcovia. Najprv zaregistrujte komponent a zobrazte nastavenia na stránke so zoznamom.
Takto by to vyzeralo na stránke so zoznamom.
- Ukladanie údajov vo Vtigeri
Budeme používať VTAP.AppData API na ukladanie a získavanie ich kľúča API. Všimnite si, že ako kľúč na ukladanie používame weather_apikey, a k tomu je prístup v API Designer pomocou $ apps. $ App.Contacts.weather_apikey.
K celému kódu WeatherSettings máte prístup z tu.
Po použití API ukladania údajov VTAP na uloženie kľúča API môžeme zmeniť definíciu rozhrania API Designer get_weather, ako je uvedené nižšie. Hodnotu priameho kľúča nahrádzame hodnotou $ apps. $ app.Contacts.weather_apikey.
Teraz ste v stave, v ktorom môžete publikovať svoje rozšírenie na našom trhu, pretože ste urobili kľúč API konfigurovateľným pre každého zákazníka.
V prípade ďalších otázok pošlite e -mail na adresu [chránené e-mailom].
Zaregistrujte sa do edície pre vývojárov tu.
