Ponieważ dane są istotnym elementem naszego codziennego życia, Vtiger dąży do tego, aby dane były łatwo dostępne, nawet poza CRM.
Jedna z najważniejszych cech Platforma aplikacji Vtiger (VTAP) to możliwość przesyłania wymaganych danych z CRM w dowolne miejsce i odwrotnie. I łączenie VTAP Narzędzie do projektowania modułów, który pozwala na dostosowanie UI, z API Designerem, który może łączyć się z zewnętrznymi aplikacjami, otworzył świat możliwości.
Dla przypomnienia, o platformie VTAP mówiliśmy w naszych poprzednich blogach.
- Narzędzie do projektowania modułów pomaga dostosować interfejs użytkownika
- Narzędzie API Designer pomaga budować niestandardowe interfejsy API REST
Na tym blogu omówimy, w jaki sposób możemy łączyć się z innymi aplikacjami obsługującymi interfejsy API REST i wyświetlać dane w interfejsie użytkownika Vtiger. W tym celu wykorzystamy:
- API Designer do łączenia i pobierania danych z zewnętrznych aplikacji
- Narzędzie do projektowania modułów do dodawania interfejsu widżetu
Studium przypadku: Pobieranie szczegółów pogody dla lokalizacji kontaktu i wyświetlanie szczegółów w rekordzie kontaktu.
Przyjrzyjmy się, jak możemy uzyskać szczegóły dotyczące pogody kontaktu i pokazać je w widżecie w strona szczegółów. openweathermap.org zapewnia bezpłatny interfejs API pogody. Możesz się zarejestrować i uzyskać klucz API, aby uzyskać dostęp do detale z ponad 200,000 XNUMX miast.
Tak by to wyglądało w rekordzie kontaktu w Vtiger CRM po połączeniu z OpenWeatherMap.
Zacznijmy teraz od Projektanta API.
Krok 1: Używanie API Designer do łączenia i pobierania danych z openweathermap.org.
W tym kroku:
- Utwórz API za pomocą API Designer
- Zdefiniuj punkty końcowe oparte na HTTP
- Jak stworzyć API za pomocą API Designera?
Najpierw utwórzmy API do pobierania informacji o pogodzie z openweathermap.org w API Designer. Wykonaj następujące kroki:- Przejdź do Menu > Platforma > Projektant interfejsu API.
- Kliknij Dodaj API.
- Dodaj nazwę, na przykład „get_weather”. Tutaj konwencja nazewnictwa jest kluczowa, ponieważ będziemy używać jej do łączenia się z naszych API JavaScript.
- Wybierz moduł Kontakty, ponieważ tam budujemy widżet pogody.
- Definiowanie punktów końcowych opartych na HTTP
Wszystkie nasze interfejsy API zależą od WADL(Vtiger Application Definition Language), który jest luźno oparty na XML i umożliwia wywoływanie dowolnych punktów końcowych opartych na HTTP.
Musimy zdefiniować strukturę punktu końcowego HTTP, który zazwyczaj obejmuje typ żądania, taki jak GET, POST, PUT, DELETE, punkt końcowy adresu URL, nagłówki żądania i uwierzytelnianie, takie jak podstawowe uwierzytelnianie itp. Aby uzyskać dostęp do miasta szczegóły pogody z openweathermap.org zdefiniowali żądanie GET z poniższym punktem końcowym.
GET api.openweathermap.org/dane/2.5/pogoda?q={miasto Nazwa}&appid={API klucz}
Musimy zmapować to do VADL, a to wyglądałoby jak w poniższym przykładzie:
Pozwólcie, że wyjaśnię ten proces krok po kroku:
- Dowolny HTTP API jest postawiony pod a reszta węzeł z obowiązkowym atrybutem metody, który definiuje typ żądania HTTP(GET, POST itp.).
- Wewnątrz tego używamy URL trafić w punkt końcowy interfejsu API.
- Zauważ, że istnieją atrybuty z URL węzeł. Te atrybuty są dynamiczną częścią punktu końcowego i służą do zastępowania ich wartościami w czasie wykonywania.
- Każdy atrybut z wartością dynamiczną (poprzedzony @) zostanie zaakceptowany, gdy zostanie przekazany w żądaniu; użyliśmy tutaj @city.
- Dla klucza API możesz wkleić wartość z openweathermap. W przypadku dowolnego atrybutu upewnij się, że dodajesz prefiks $ z nazwą atrybutu, aby zastąpić je w czasie wykonywania.
- Połączenia CDATA sekcja wewnątrz adresu URL jest używana. Takie znaki specjalne jak & są zachowywane.
Po zapisaniu i opublikowaniu możesz uzyskać dostęp do interfejsu API z zewnętrznych aplikacji, tak jak nasze inne interfejsy API REST z punktami końcowymi. Spójrz na poniższy adres URL. Nazywamy API nazwą API uzyskać_pogodę. Możesz uzyskać dostęp do końcowego pliku XML z tutaj , jak również.
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
Ważną uwagą jest to, że każdą domenę API należy umieścić na białej liście w Ustawieniach API.
Możesz również uzyskać dostęp do tego interfejsu API z interfejsów API Vtiger Javascript, a my powiemy Ci, jak możesz to zrobić. Wcześniej chcemy utworzyć widżet na stronie szczegółów, aby pokazać informacje o pogodzie.
W tym celu przejdziemy do Projektanta modułów, wybierzemy Kontakty i dodamy skrypt TAP.
Krok 2: Dodanie nowego widżetu pogody za pomocą projektanta modułów
Na tym etapie będziemy:
- Dodaj widżet na stronie szczegółów
- Dodaj komponent wizualny do widżetu – Map
- Dodaj wyskakujący model i ustawienia administratora
Zacznijmy.
Dodawanie widżetu
Aby dodać widżet na stronie szczegółów, ujawniliśmy API javascript Rejestracja.komponentu.VTAP.
Pomoże Ci to zdefiniować typ przycisku, widżetu lub ikony, które możesz dodać do określonej strony.
Na przykład:
- Aby dodać przycisk na stronie listy, użyj „LIST_BASIC_BUTTON"
- Aby dodać widżet na stronie szczegółów, użyj „DETAIL_SUMMARY_WIDGET"
Aby zobaczyć pełną listę takich haczyków, kliknij tutaj.
Aby zdefiniować wygląd widżetu, musimy dodać komponent, który będzie posiadał wymagany kod HTML. W tym przypadku przechodzimy do komponentu WeatherWidgetContents.
W Vtiger komponent jest podstawą dowolnego interfejsu użytkownika, takiego jak widżety, przyciski itp. Podstawowy szkielet komponentu jest zdefiniowany tutaj.
Komponent WeatherWidgetContents wykona następujące czynności:
- Wywołaj API openweathermap get_weather, które utworzyliśmy w API Designer.
- Załaduj podstawowe informacje, takie jak aktualny czas, czas wschodu i zachodu słońca, temperatura i ogólna prognoza.
- Załaduj Open Street i pokaż miasto na mapie.
Aby zrozumieć strukturę komponentu Vtiger, potrzebujesz trochę wiedzy na temat Składnik Vue ponieważ jest na nim zbudowana nasza platforma VTAP.
Rozważ poniższy przykład. Tutaj nazywamy uzyskać_pogodę API, które dodaliśmy w API Designer (wewnątrz stworzonej funkcji). VTAP.Szczegóły.Rekord() Javascript API podaje szczegóły rekordu. Uzyskamy dostęp do informacji o mieście, w których przesyłane są kontakty, aby uzyskać dostęp do informacji o pogodzie.
Po otrzymaniu danych wykorzystujemy dane pogodowe z szablonu do renderowania ich za pomocą funkcji specyficznych dla komponentów zdefiniowanych w metodach.
Używamy pliki VTAP.CustomApi.Get API do pobierania danych z openweathermap.org przez wywołanie uzyskać_pogodę API napisane w API Designer. Przypisz odpowiedź do zmiennej danych, aby uzyskać do niej dostęp przez:
- Składowa metoda przetwarzania
- Szablon do wyświetlenia.
Wiele funkcji pomocniczych napisano w metodach, które pomagają wyświetlać czas i temperaturę w czytelnym formacie.
Możesz zobaczyć kod tutaj.
Tak by to wyglądało, gdy zapiszesz i opublikujesz skrypt oraz otworzysz Kontakt z miastem pocztowym. Ale czy nie uważasz, że to wydaje się trochę nudne? Dlaczego nie dodać mapy?
- Dodawanie komponentu wizualnego – mapa
W tym przykładzie dodajmy mapę OpenStreet i pokażmy na mapie miasto do korespondencji.
Aby dodać mapę Open Street, najpierw musimy dołączyć jej plik biblioteki. Biblioteka Javascript w VTAP pozwala na włączenie dowolnej biblioteki do środowiska wykonawczego za pomocą VTAP.Zasób.Wymaganie API.
Możesz dołączyć te biblioteki podczas rejestrowania samego widżetu szczegółów.
Teraz musimy pokazać mapę w WeatherWidgetContent. Zacznij od dodania symbolu zastępczego w szablonie i załadowania go po pobraniu danych z API get_weather wraz ze współrzędnymi. Możesz uzyskać pełny skrypt z naszych przykładów tutaj i obejrzyj to w akcji.
Załóżmy teraz, że chcesz wydać to jako moduł rozszerzenia, a każdy klient chce to zainstalować i używać własnego klucza API openweathermap.org. W tym celu możemy przechowywać dane klientów za pomocą naszych interfejsów API sklepu javascript, do których można uzyskać dostęp w API Designer za pomocą zmienne zastępcze.
- Dodawanie modelu wyskakującego okienka i ustawień administratora
Utwórzmy małe wyskakujące okienko modalne, do którego tylko administratorzy mogą uzyskać dostęp i przechowywać klucz API w naszym magazynie danych. Najpierw zarejestruj składnik, aby wyświetlić ustawienia na stronie listy.
Tak by to wyglądało na stronie listy.
- Przechowywanie danych w Vtiger
Użyjemy Dane aplikacji VTAP API do przechowywania i pobierania klucza API. Zwróć uwagę, że używamy weather_apikey jako klucza do przechowywania i można uzyskać do niego dostęp w Projektancie API za pomocą $apps.$app.Contacts.weather_apikey.
Możesz uzyskać dostęp do całego kodu WeatherSettings z tutaj.
Po użyciu API danych sklepu VTAP do przechowywania klucza API, możemy zmodyfikować definicję API Designer get_weather, jak pokazano poniżej. Zamieniamy bezpośrednią wartość klucza na $apps.$app.Kontakty.weather_apikey.
Teraz jesteś w stanie, w którym możesz opublikować swoje rozszerzenie na naszym rynku, ponieważ skonfigurowałeś klucz API dla każdego klienta.
W przypadku jakichkolwiek innych pytań, wyślij e-mail na adres [email chroniony].
Zarejestruj się w wersji dla programistów tutaj.
