Progettazione API

Un mondo di possibilità: usa VTAP API Designer e connettiti con app esterne

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.   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. openweathermap.org 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.

 

Sotto-Immagine-1

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.

Sotto-Immagine-2

 
  • 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/un'immissione errata dei dati/2.5/tempo?q={città Nome}&appid={API chiave}

Dobbiamo mapparlo su VADL e vorrebbe qualcosa come l'esempio seguente:

Screenshot su 00-04-07

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.
  • I 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.

Sotto-immagine-3

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, 

  1. Aggiungi il widget nella pagina dei dettagli
  2. Aggiungi un componente visivo per il widget: Mappa
  3. Aggiungi un modello popup e le impostazioni di amministrazione

Cominciamo.

Aggiunta del widget

Sotto-Immagine-4

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 "DETAIL_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.

Screenshot su 00-11-50

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.   

Screenshot su 00-12-43

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?

Sotto-Immagine-5

 
  • 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.

Screenshot su 00-24-23


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.
 

Sotto-immagine-6

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.

Screenshot su 00-30-37

Ecco come apparirebbe nella pagina dell'elenco.

Sotto-immagine-7

 
  • 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.

Screenshot su 23-57-00

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.

Screenshot su 23-43-36


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 platform@vtiger.com. Iscriviti all'edizione per sviluppatori qui.

Tag: , , , , , , , ,

Lascia un Commento

Avatar
  Sottoscrivi  
Notifica
Banner

Sei vantaggi dell'integrazione di Vtiger CRM con il tuo account WhatsApp

La messaggistica istantanea ha sostituito i metodi tradizionali di comunicazione commerciale. I clienti vogliono che le aziende siano in grado di interagire con loro immediatamente. Lo sapevi che il 63%...
Pagina di destinazione blog 2

Aumenta la tua generazione di lead con la funzione Landing Pages di Vtiger

Internet è un posto fantastico dove stare. Continua a cambiare il modo in cui comunichiamo gli uni con gli altri, condividiamo la conoscenza e viviamo un'esistenza appagante...
Vtiger aiutante 5

Multi-tasking senza sforzo con Aide, l'assistente virtuale di Vtiger

Quando sei in visita a un cliente, o viaggi, o semplicemente hai una giornata impegnativa, ci sono tutte le possibilità che tu possa perdere un ...
Vtiger Enrich

Vtiger Enrich: trasferisce i dati di contatto da LinkedIn al CRM

Al giorno d'oggi, tutti i professionisti che lavorano sono su LinkedIn. È uno dei modi migliori per fare rete con colleghi, potenziali dipendenti, clienti e contatti commerciali. Come un ...
Social GMB

Gestisci il tuo account Google My Business con Vtiger Social

Come promesso, siamo tornati con maggiori informazioni su Vtiger Social! In precedenza, ti abbiamo presentato[1] il modulo Social e ne abbiamo discusso l'aspetto Facebook[2]. In questo post,...
Social Facebook

Gestisci la tua Pagina Facebook con Vtiger Social

Pochi giorni fa vi abbiamo presentato il nostro nuovissimo modulo Social[1]. È una piattaforma all'interno di Vtiger CRM che ti consente di gestire ...
Immagine del blog - Modulo sociale

Vtiger Social Module: porta le tue interazioni sui social media nel tuo CRM

Non è un segreto che i social media ora svolgano un ruolo di primo piano nell'aiutare un'azienda a rimanere competitiva in un ambiente aziendale sempre più digitale. Voi ...
Visualizzazione elenco Azione 6 (1)

Grandi piccole cose – Azioni di visualizzazione elenco

Benvenuti nel primo blog della nostra nuova miniserie, "Big Little Things", in cui mettiamo in evidenza alcune delle funzionalità e dei miglioramenti più piccoli in Vtiger CRM ...
Immagine caratteristica del blog VTAP

Introduzione a VTAP API Designer – Parte 2

In precedenza, nella nostra serie di blog Vtiger Application Platform (VTAP), abbiamo discusso su come personalizzare l'interfaccia Vtiger e inserire pulsanti e widget personalizzati per ...
Blog - Test AB nelle vendite

Sfruttare al meglio i test A/B nelle vendite

"Non c'è niente di così terribile come l'attività senza intuizione." - Johann Wolfgang von Goethe Mi rendo conto che può essere difficile giustificare l'impegno...
Caricamento in corso
Copyright 2021 Vtiger | Privacy | Centro legale e politico