API дизайнер

Свят от възможности - Използвайте VTAP API Designer и се свържете с външни приложения

Тъй като данните са съществен елемент от нашето ежедневие, Vtiger има за цел да направи данните лесно достъпни, дори извън CRM. 

Една от най -значимите характеристики на Vtiger Application Platform (VTAP) е способността му да прехвърля необходимите данни от CRM навсякъде и обратно. И комбиниране на VTAP Инструмент за конструктор на модули, който позволява персонализиране на потребителския интерфейс, с API Designer, който може да се свързва с външни приложения, отвори свят на възможности. Само да си припомним, в предишните ни блогове говорихме за платформата VTAP.   В този блог ще обсъдим как можем да се свържем с други приложения, които поддържат REST API и да покажем данните вътре в потребителския интерфейс на Vtiger. За това ще използваме: 
  • API Designer за свързване и извличане на данни от външни приложения
  • Инструментът Module Designer за добавяне на потребителски интерфейс на джаджа
 
Казус: Получаване на подробности за времето за местоположението на контакт и показване на подробностите в записа на контакта.
Нека да разгледаме как можем да получим подробности за времето на даден контакт и да го покажем в приспособлението в контакта страница с подробности. openweathermap.org предоставя безплатен API за времето. Можете да се регистрирате и да получите API ключ за достъп до детайли от над 200,000 XNUMX града.

Ето как ще изглежда в записа на контакти във Vtiger CRM, след като се свържете с OpenWeatherMap.

 

Под-изображение-1

Нека сега започнем с 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.
    • Изберете модула Контакти, тъй като именно там изграждаме джаджата за времето.

Под-изображение-2

 
  • Определяне на 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 и той би искал нещо като примера по -долу:

Екранна снимка в 00-04-07

Нека обясня този процес стъпка по стъпка:

  • Всеки 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.

Под-изображение-3

Можете също да получите достъп до този API от Vtiger Javascript API и ние ще ви кажем как можете да го направите. Преди това искаме да създадем джаджа на страницата с подробности, която да показва информацията за времето. За целта ще отидем в Module Designer и ще изберем Contacts и ще добавим TAP скрипт.

Стъпка 2: Добавяне на нова джаджа за времето с помощта на Module Designer 

В тази стъпка ще, 

  1. Добавете страницата с подробности на приспособлението
  2. Добавете визуален компонент за приспособлението - Карта
  3. Добавете изскачащ модел и администраторски настройки

Нека започнем

Добавяне на джаджа

Под-изображение-4

За да добавим подробна страница на приспособление, разкрихме javascript API VTAP.Component.Register. Това ще ви помогне да определите типа бутон, приспособление или икона, които можете да добавите към определена страница.

Например:

  • За да добавите бутон на страницата със списък, използвайте „LIST_BASIC_BUTTON"
  • За да добавите подробна страница на приспособление, използвайте „DETAIL_SUMMARY_WIDGET"

За пълен списък на такива куки щракнете тук.

За да определим как трябва да изглежда джаджата, трябва да добавим компонент, който ще има необходимия HTML. В този случай отиваме към компонента WeatherWidgetContents. Във Vtiger компонентът е основата за всеки интерфейс на потребителския интерфейс като джаджи, бутони и т.н. Основният скелет на компонент е дефиниран тук.

Екранна снимка в 00-11-50

Компонентът WeatherWidgetContents ще направи следните неща:

  • Извикайте openweathermap API get_weather, който създадохме в API Designer.
  • Заредете някои основни подробности като текущото време, времето на изгрев и залез, температурата и общата прогноза.
  • Заредете Open Street и покажете града на картата.

За да разберете структурата на Vtiger компонент, имате нужда от малко познаване на Компонент Vue тъй като нашата платформа VTAP е изградена върху него. Помислете за примера по -долу. Тук наричаме get_weather API, който добавихме в API Designer (вътре в създадената функция). VTAP.Detail.Record () Javascript API дава подробности за записа. Ще имаме достъп до полевата информация за градския адрес на Контакти, за да получим подробности за времето.   

Екранна снимка в 00-12-43

След като данните бъдат получени, ние използваме метеорологичните данни в шаблона, за да ги изобразяваме с помощта на специфични за компонентите функции, определени в методите. 

Ние използваме VTAP.CustomApi.Get API за извличане на данни от openweathermap.org чрез извикване get_weather API, написан в API Designer. Задайте отговора на променлива от данни, така че да може да бъде достъпен чрез:

  • Компонентен метод за обработка
  • Шаблон за показване. 

Много помощни функции са написани в методи, които помагат за показване на времето и температурата в четим формат. Можете да видите кода тук.

Ето как би изглеждало, след като запишете и публикувате скрипта и отворите контакт, който има пощенски град. Но не мислите ли, че това изглежда малко скучно? Защо не добавите карта?

Под-изображение-5

 
  • Добавяне на визуален компонент - карта
В този пример нека добавим карта OpenStreet и покажем пощенския град на картата. За да добавим картата Open Street, първо трябва да включим нейния библиотечен файл. Библиотеката на Javascript във VTAP позволява включването на всяка библиотека по време на изпълнение VTAP.Resource.Require API. Можете да включите тези библиотеки, когато регистрирате самата джаджа за подробности.

Екранна снимка в 00-24-23


Сега трябва да покажем картата във WeatherWidgetContent. Започнете, като добавите заместител в шаблона и го заредите, след като получите данни от get_weather API с координатите. Можете да получите пълния скрипт от нашите примери тук и го гледайте в действие.
 

Под-изображение-6

Сега да кажем, че искате да освободите това като разширителен модул и всеки клиент иска да го инсталира и да използва свой собствен API ключ за openweathermap.org. За тази цел можем да съхраняваме клиентски данни, използвайки нашите API за съхранение на javascript, до които можете да получите достъп в API Designer, като използвате заместващи променливи.

 
  • Добавяне на изскачащ модел и администраторски настройки

Нека създадем малък модален изскачащ прозорец, до който само администраторите имат достъп и съхраняват API ключа в нашето хранилище за данни. Първо регистрирайте компонент, за да покажете настройките на страницата със списъка.

Екранна снимка в 00-30-37

Ето как ще изглежда на страницата със списъка.

Под-изображение-7

 
  • Съхранение на данни във Vtiger

Ще използваме VTAP.AppData API за съхраняване и извличане на техния API ключ. Забележете, че използваме weather_apikey като ключ за съхранение и това може да бъде достъпно в API Designer с помощта на $ apps. $ App.Contacts.weather_apikey.

Екранна снимка в 23-57-00

Можете да получите достъп до целия код на WeatherSettings от тук.

След като използваме VTAP API за съхранение на данни за съхраняване на API ключа, можем да променим определението get_weather на Designer API, както е показано по -долу. Заменяме стойността на директния ключ с $ apps. $ app.Contacts.weather_apikey.

Екранна снимка в 23-43-36


Сега сте в състояние, в което можете да публикувате разширението си на нашия пазар, тъй като сте направили API ключа конфигурируем за всеки клиент.

За всякакви други запитвания, моля, изпратете имейл на platform@vtiger.com. Регистрирайте се за изданието за програмисти тук.

Tags: , , , , , , , ,

CRM тенденции-06

Ключови CRM тенденции за подобряване на бизнес ефективността

Софтуерът за управление на взаимоотношенията с клиентите (CRM) се е развил драстично - от файл, който съхранява информация за клиентите като Rolodex до инструмент, който съхранява клиентите...
Управление на контакти 5 (1)

Проследявайте пътуването на клиентите си и спечелете още сделки с Vtiger Contact Management

Клиентите са от съществено значение за растежа на бизнеса. И колкото повече клиенти имате, съхраняването и споделянето на данни става сложно. Много организации използват множество инструменти...
Управление на контакти Общ блог банер-07

Управлявайте данните си за контакт, за да приключвате по-бързо търговски сделки

Днес предприятията не се стремят само към печалби, но и върху създаването на трайни взаимоотношения с клиентите. Сключването на сделка е само един от аспектите на...
Блог за активиране на продажбите – Vtiger Specific-01

Увеличете процентите на реализация с инструменти за активиране на продажбите на Vtiger

Поради блокирането, предизвикано от covid, много фирми преминаха към култура на отдалечена работа. Но дали новата работна среда промени бизнес динамиката? Да, служители, работещи от...
Банер на блога за активиране на продажбите-02

6 ключови елемента за изграждане на вашата стратегия за насърчаване на продажбите

Всеки ход, който правите във вашия бизнес, се основава предимно на приходите, които искате да спечелите. И приходите зависят от постигането на прогнозирани продажби...
Блог с едно изглед-02

6 предимства от използването на Vtiger One View

Според Gartner 14% от организациите са свикнали с 360-градусова функция в CRM1. Има много причини, поради които повече предприятия получават...
Изображение за интеграция на Razorpay 4

Осигурете плащанията си с Vtiger – Razorpay Integration

Приемането на стратегия за цифрово плащане е едно от най-ценните решения за бизнеса и потребителите за подобряване на бизнес ефективността. От автоматично фактуриране и събиране на плащания...
Изображение на героя

5 причини да автоматизирате вашия бизнес процес с Vtiger Process Designer

„Ако имах един час, за да спася света, щях да прекарам петдесет и пет минути в дефиниране на проблема и само пет минути в намиране на решението.” - Алберт...
Vtiger URL Shortener

Vtiger URL съкращаване за сигурни, надеждни кратки връзки за оптимизиране на вашите кампании

Всяка уеб страница ще има URL с добавени различни параметри; обаче това може да стане продължително. Освен филтриране, организиране и представяне на съдържанието на потребителите, ...
Изображение на банер-02

Спестете усилия и време, като използвате интеграцията на Vtiger – Zoho Sign

Ежедневните операции на всяка организация включват значително количество документи. Трябва да бъдат подписани няколко клаузи, договори и документи. Електронният подпис е най-сложният метод...
Зареждане