Тъй като данните са съществен елемент от нашето ежедневие, Vtiger има за цел да направи данните лесно достъпни, дори извън CRM.
Една от най -значимите характеристики на Vtiger Application Platform (VTAP) е способността му да прехвърля необходимите данни от CRM навсякъде и обратно. И комбиниране на VTAP Инструмент за конструктор на модули, който позволява персонализиране на потребителския интерфейс, с API Designer, който може да се свързва с външни приложения, отвори свят на възможности.
Само да си припомним, в предишните ни блогове говорихме за платформата VTAP.
- Инструментът Module Designer ви помага да персонализирате потребителския си интерфейс
- Инструментът API Designer ви помага да създавате персонализирани REST API
В този блог ще обсъдим как можем да се свържем с други приложения, които поддържат REST API и да покажем данните вътре в потребителския интерфейс на Vtiger. За това ще използваме:
- API Designer за свързване и извличане на данни от външни приложения
- Инструментът Module Designer за добавяне на потребителски интерфейс на джаджа
Казус: Получаване на подробности за времето за местоположението на контакт и показване на подробностите в записа на контакта.
Нека да разгледаме как можем да получим подробности за времето на даден контакт и да го покажем в приспособлението в контакта страница с подробности. openweathermap.org предоставя безплатен API за времето. Можете да се регистрирате и да получите API ключ за достъп до детайли от над 200,000 XNUMX града.
Ето как ще изглежда в записа на контакти във Vtiger CRM, след като се свържете с OpenWeatherMap.
Нека сега започнем с API Designer.
Стъпка 1: Използване на API Designer за свързване и извличане на данни от openweathermap.org.
В тази стъпка ще:
- Създайте API с помощта на API Designer
- Определете базирани на HTTP крайни точки
- Как да създадете API с помощта на API Designer?
Първо, нека създадем API за извличане на информация за времето от openweathermap.org в API Designer. Следвай тези стъпки:- Отидете в Меню> Платформа> API Designer.
- Кликнете върху Добавяне на API.
- Добавете име, например „get_weather“. Тук конвенцията за именуване е от решаващо значение, тъй като ще я използваме за свързване от нашите javascript API.
- Изберете модула Контакти, тъй като именно там изграждаме джаджата за времето.
- Определяне на HTTP базирани крайни точки
Всички наши API зависят от VADL(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.
- Забележете, че има атрибути с a URL възел. Тези атрибути са динамична част от крайната точка и се използват за замяната им със стойности по време на изпълнение.
- Всеки атрибут с динамична стойност (предварителен с @) ще бъде приет, когато бъде предаден в заявката; тук сме използвали @city.
- За API ключа можете да поставите стойността от openweathermap. За всеки атрибут се уверете, че сте подготвили предварително $ с име на атрибут, за да ги замените по време на изпълнение.
- - CDATA раздел в URL адреса се използва. Такива специални знаци като & се запазват.
След като бъде запазен и публикуван, можете да получите достъп до API от външни приложения, точно както другите ни REST API с крайни точки. Погледнете URL адреса по -долу. Ние наричаме API с името на API get_weather. Можете да получите достъп до окончателния xml от тук , както добре.
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
Една важна забележка е, че трябва да включите всеки API домейн в белия списък в настройките на API.
Можете също да получите достъп до този API от Vtiger Javascript API и ние ще ви кажем как можете да го направите. Преди това искаме да създадем джаджа на страницата с подробности, която да показва информацията за времето.
За целта ще отидем в Module Designer и ще изберем Contacts и ще добавим TAP скрипт.
Стъпка 2: Добавяне на нова джаджа за времето с помощта на Module Designer
В тази стъпка ще,
- Добавете страницата с подробности на приспособлението
- Добавете визуален компонент за приспособлението - Карта
- Добавете изскачащ модел и администраторски настройки
Нека започнем
Добавяне на джаджа
За да добавим подробна страница на приспособление, разкрихме javascript API VTAP.Component.Register.
Това ще ви помогне да определите типа бутон, приспособление или икона, които можете да добавите към определена страница.
Например:
- За да добавите бутон на страницата със списък, използвайте „LIST_BASIC_BUTTON"
- За да добавите подробна страница на приспособление, използвайте „DETAIL_SUMMARY_WIDGET"
За пълен списък на такива куки щракнете тук.
За да определим как трябва да изглежда джаджата, трябва да добавим компонент, който ще има необходимия HTML. В този случай отиваме към компонента WeatherWidgetContents.
Във Vtiger компонентът е основата за всеки интерфейс на потребителския интерфейс като джаджи, бутони и т.н. Основният скелет на компонент е дефиниран тук.
Компонентът WeatherWidgetContents ще направи следните неща:
- Извикайте openweathermap API get_weather, който създадохме в API Designer.
- Заредете някои основни подробности като текущото време, времето на изгрев и залез, температурата и общата прогноза.
- Заредете Open Street и покажете града на картата.
За да разберете структурата на Vtiger компонент, имате нужда от малко познаване на Компонент Vue тъй като нашата платформа VTAP е изградена върху него.
Помислете за примера по -долу. Тук наричаме get_weather API, който добавихме в API Designer (вътре в създадената функция). VTAP.Detail.Record () Javascript API дава подробности за записа. Ще имаме достъп до полевата информация за градския адрес на Контакти, за да получим подробности за времето.
След като данните бъдат получени, ние използваме метеорологичните данни в шаблона, за да ги изобразяваме с помощта на специфични за компонентите функции, определени в методите.
Ние използваме VTAP.CustomApi.Get API за извличане на данни от openweathermap.org чрез извикване get_weather API, написан в API Designer. Задайте отговора на променлива от данни, така че да може да бъде достъпен чрез:
- Компонентен метод за обработка
- Шаблон за показване.
Много помощни функции са написани в методи, които помагат за показване на времето и температурата в четим формат.
Можете да видите кода тук.
Ето как би изглеждало, след като запишете и публикувате скрипта и отворите контакт, който има пощенски град. Но не мислите ли, че това изглежда малко скучно? Защо не добавите карта?
- Добавяне на визуален компонент - карта
В този пример нека добавим карта OpenStreet и покажем пощенския град на картата.
За да добавим картата Open Street, първо трябва да включим нейния библиотечен файл. Библиотеката на Javascript във VTAP позволява включването на всяка библиотека по време на изпълнение VTAP.Resource.Require API.
Можете да включите тези библиотеки, когато регистрирате самата джаджа за подробности.
Сега трябва да покажем картата във WeatherWidgetContent. Започнете, като добавите заместител в шаблона и го заредите, след като получите данни от get_weather API с координатите. Можете да получите пълния скрипт от нашите примери тук и го гледайте в действие.
Сега да кажем, че искате да освободите това като разширителен модул и всеки клиент иска да го инсталира и да използва свой собствен API ключ за openweathermap.org. За тази цел можем да съхраняваме клиентски данни, използвайки нашите API за съхранение на javascript, до които можете да получите достъп в API Designer, като използвате заместващи променливи.
- Добавяне на изскачащ модел и администраторски настройки
Нека създадем малък модален изскачащ прозорец, до който само администраторите имат достъп и съхраняват API ключа в нашето хранилище за данни. Първо регистрирайте компонент, за да покажете настройките на страницата със списъка.
Ето как ще изглежда на страницата със списъка.
- Съхранение на данни във Vtiger
Ще използваме VTAP.AppData API за съхраняване и извличане на техния API ключ. Забележете, че използваме weather_apikey като ключ за съхранение и това може да бъде достъпно в API Designer с помощта на $ apps. $ App.Contacts.weather_apikey.
Можете да получите достъп до целия код на WeatherSettings от тук.
След като използваме VTAP API за съхранение на данни за съхраняване на API ключа, можем да променим определението get_weather на Designer API, както е показано по -долу. Заменяме стойността на директния ключ с $ apps. $ app.Contacts.weather_apikey.
Сега сте в състояние, в което можете да публикувате разширението си на нашия пазар, тъй като сте направили API ключа конфигурируем за всеки клиент.
За всякакви други запитвания, моля, изпратете имейл на [имейл защитен].
Регистрирайте се за изданието за програмисти тук.
