Poiché i dati sono un elemento essenziale della nostra vita quotidiana, Vtiger mira a rendere i dati facilmente accessibili, anche al di fuori del CRM.
Una delle caratteristiche più significative del Vtiger Application Platform (VTAP) è la sua capacità di trasferire i dati richiesti da CRM a qualsiasi luogo e viceversa. E combinando VTAP Strumento di progettazione moduli, che consente la personalizzazione dell'interfaccia utente, con un API Designer in grado di connettersi con applicazioni esterne ha aperto un mondo di possibilità.
Giusto per ricordare, abbiamo parlato della piattaforma VTAP nei nostri blog precedenti.
- Lo strumento Module Designer ti aiuta a personalizzare la tua interfaccia utente
- Lo strumento API Designer ti aiuta a creare API REST personalizzate
In questo blog, discuteremo come possiamo connetterci ad altre applicazioni che supportano le API REST e mostrare i dati all'interno dell'interfaccia utente di Vtiger. Per questo utilizzeremo:
- L'API Designer per connettersi e recuperare dati da app esterne
- Lo strumento Module Designer per aggiungere l'interfaccia utente dei widget
Argomento di studio: Ottenere i dettagli meteo per la posizione di un contatto e visualizzare i dettagli nel record del contatto.
Diamo un'occhiata a come possiamo ottenere i dettagli meteo di un contatto e mostrarlo all'interno di un widget nei contatti pagina di dettaglio. オレゴンガン&ナイフショー – GunShows-USA オレゴン州の銃とナイフのショー。ウェス・ノーデル・アルバニーのガン＆ナイフショー。ウェス・ノーデル・レドモンドのナイフ＆ガンショー。私たちのウェブサイトはスポンサー記事やゲスト投稿を受け付けていません。アメリカのオンライン銃とナイフのショーのディレクター [...] fornisce un'API meteo gratuita. Puoi registrarti e ottenere la chiave API per accedere al dettagli di oltre 200,000 città.
Ecco come apparirebbe nel record dei contatti in Vtiger CRM dopo la connessione con OpenWeatherMap.
Iniziamo ora con API Designer.
Passaggio 1: utilizzo di API Designer per connettersi e recuperare i dati da openweathermap.org.
In questo passaggio, dovremo:
- Crea un'API utilizzando API Designer
- Definire endpoint basati su HTTP
- Come creare un'API utilizzando API Designer?
Innanzitutto, creiamo un'API per recuperare le informazioni meteorologiche da openweathermap.org in API Designer. Segui questi passi:- Vai a Menu > Piattaforma > Progettazione API.
- Fare clic su Aggiungi API.
- Aggiungi un nome, ad esempio "get_weather". Qui la convenzione di denominazione è cruciale poiché la useremo per connetterci dalle nostre API javascript.
- Seleziona il modulo Contatti poiché è lì che stiamo costruendo il widget meteo.
- Definizione di endpoint basati su HTTP
Tutte le nostre API dipendono da VADL(Vtiger Application Definition Language), che è vagamente basato su XML e consente di invocare qualsiasi endpoint basato su HTTP.
Dobbiamo definire la struttura di un endpoint HTTP, che in genere comporta un tipo di richiesta come GET, POST, PUT, DELETE, endpoint URL, intestazioni di richiesta e autenticazione come l'autenticazione di base, ecc. Per accedere a una città dettagli meteo da openweathermap.org hanno definito una richiesta GET con l'endpoint sottostante.
GET api.openweathermap.org/dati/2.5/tempo?q={città Nome}&appid={API chiave}
Dobbiamo mapparlo su VADL e vorrebbe qualcosa come l'esempio seguente:
Lascia che ti spieghi questo processo passo dopo passo:
- Qualsiasi HTTP API è messo sotto a riposo nodo con un attributo di metodo obbligatorio che definisce il tipo di richiesta HTTP(GET, POST, ecc.).
- All'interno di questo, usiamo il URL per raggiungere l'endpoint dell'API.
- Nota che ci sono attributi con a URL nodo. Questi attributi sono una parte dinamica dell'endpoint e vengono utilizzati per sostituirli con valori in fase di esecuzione.
- Qualsiasi attributo con un valore dinamico (preceduto da @) verrà accettato quando passato nella richiesta; abbiamo usato @city qui.
- Per la chiave API, puoi incollare il valore da openweathermap. Per qualsiasi attributo, assicurati di anteporre $ con il nome dell'attributo per sostituirli in fase di esecuzione.
- Le CDATA viene utilizzata la sezione all'interno dell'URL. Tali caratteri speciali come & vengono mantenuti.
Una volta salvate e pubblicate, puoi accedere all'API da applicazioni esterne proprio come le nostre altre API REST con endpoint. Guarda l'URL qui sotto. Chiamiamo l'API con il nome dell'API get_meteo. Puoi accedere all'xml finale da qui come pure.
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
Una nota importante è che dovresti autorizzare ogni dominio API in Impostazioni API.
Puoi anche accedere a questa API dalle API Javascript di Vtiger e ti diremo come puoi farlo. Prima di ciò, vogliamo creare un widget nella pagina dei dettagli per mostrare le informazioni meteorologiche.
Per questo, andremo a Module Designer e selezioneremo Contatti e aggiungeremo uno script TAP.
Passaggio 2: aggiunta di un nuovo widget Meteo utilizzando il Designer moduli
In questo passaggio, lo faremo,
- Aggiungi il widget nella pagina dei dettagli
- Aggiungi un componente visivo per il widget: Mappa
- Aggiungi un modello popup e le impostazioni di amministrazione
Cominciamo.
Aggiunta del widget
Per aggiungere un widget nella pagina dei dettagli, abbiamo esposto le API javascript VTAP.Registro.Componenti.
Questo ti aiuterà a definire il tipo di pulsante, widget o icona che puoi aggiungere a una determinata pagina.
Per esempio:
- Per aggiungere un pulsante nella pagina Elenco, utilizzare "LIST_BASIC_BUTTON"
- Per aggiungere un widget nella pagina dei dettagli, usa "DETTAGLI_SUMMARY_WIDGET"
Per un elenco completo di tali hook, fare clic su qui.
Per definire come dovrebbe apparire il widget, dobbiamo aggiungere un componente che avrà l'HTML richiesto. In questo caso, andremo al componente WeatherWidgetContents.
In Vtiger, un componente è la base per qualsiasi interfaccia dell'interfaccia utente come widget, pulsanti, ecc. Viene definito lo scheletro di base di un componente qui.
Il componente WeatherWidgetContents farà le seguenti cose:
- Chiama l'API di openweathermap get_weather, che abbiamo creato in API Designer.
- Carica alcuni dettagli di base come l'ora corrente, l'ora di alba e tramonto, la temperatura e le previsioni generali.
- Carica Open Street e mostra la città sulla mappa.
Per comprendere la struttura di un componente Vtiger, è necessaria una piccola conoscenza del Componente Vue poiché la nostra piattaforma VTAP è costruita su di essa.
Considera l'esempio seguente. Qui chiamiamo il get_meteo API, che abbiamo aggiunto in API Designer (all'interno della funzione creata). VTAP.Dettagli.Record() L'API Javascript fornisce i dettagli del record. Accederemo ai contatti che inviano le informazioni sul campo della città per accedere ai dettagli meteo.
Una volta ricevuti i dati, utilizziamo i dati meteorologici nel modello per renderli con l'aiuto di funzioni specifiche dei componenti definite all'interno dei metodi.
Usiamo VTAP.CustomApi.Get API per recuperare i dati da openweathermap.org chiamando get_meteo API scritta in API Designer. Assegnare la risposta a una variabile di dati in modo che sia possibile accedervi da:
- Un metodo componente per l'elaborazione
- Modello per la visualizzazione.
Molte funzioni di supporto sono scritte in metodi per aiutare a visualizzare l'ora e la temperatura in un formato leggibile.
Puoi vedere il codice qui.
Ecco come apparirà una volta salvato e pubblicato lo script e aperto un contatto con una città di posta. Ma non pensi che questo sembri un po' noioso? Perché non aggiungere una mappa?
- Aggiunta del componente visivo – Mappa
In questo esempio, aggiungiamo una mappa OpenStreet e mostriamo la città di spedizione sulla mappa.
Per aggiungere la mappa di Open Street dobbiamo prima includere il suo file di libreria. La libreria Javascript in VTAP consente l'inclusione di qualsiasi libreria sul runtime utilizzando VTAP.Richiesta.Risorsa API.
È possibile includere queste librerie durante la registrazione del widget dei dettagli stesso.
Ora dobbiamo mostrare la mappa in WeatherWidgetContent. Inizia aggiungendo un segnaposto nel modello e caricandolo dopo aver ottenuto i dati dall'API get_weather con le coordinate. Puoi ottenere lo script completo dai nostri esempi qui e guardalo in azione.
Ora supponiamo che tu voglia rilasciarlo come modulo di estensione e ogni cliente desideri installarlo e utilizzare la propria chiave API openweathermap.org. Per questo, possiamo archiviare i dati dei clienti utilizzando le nostre API del negozio javascript, a cui è possibile accedere in API Designer utilizzando variabili segnaposto.
- Aggiunta di un modello popup e impostazioni di amministrazione
Creiamo un piccolo popup modale a cui solo gli amministratori possono accedere e archiviare la chiave API nel nostro datastore. Innanzitutto, registra un componente per mostrare le impostazioni nella pagina dell'elenco.
Ecco come apparirebbe nella pagina dell'elenco.
- Archiviazione dei dati in Vtiger
Noi useremo VTAP.AppData API per archiviare e recuperare la loro chiave API. Nota che stiamo usando weather_apikey come chiave per l'archiviazione, e questo è accessibile in API Designer usando $apps.$app.Contacts.weather_apikey.
Puoi accedere all'intero codice WeatherSettings da qui.
Dopo aver utilizzato l'API dei dati del negozio VTAP per memorizzare la chiave API, possiamo modificare la definizione get_weather di API Designer come mostrato di seguito. Stiamo sostituendo il valore della chiave diretta con $apps.$app.Contacts.weather_apikey.
Ora sei nello stato in cui puoi pubblicare la tua estensione sul nostro marketplace poiché hai reso la chiave API configurabile per ogni cliente.
Per qualsiasi altra domanda, inviare un'e-mail a [email protected].
Iscriviti all'edizione per sviluppatori qui.
