Articoli contrassegnati con "#SalesBestPractices"

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/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.
  • 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 per saperne di più, clicca 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 per saperne di più, clicca 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 per saperne di più, clicca 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 per saperne di più, clicca 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 per saperne di più, clicca 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 per saperne di più, clicca 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 [email protected]. Iscriviti all'edizione per sviluppatori per saperne di più, clicca qui.

Banner (2)

I 15 errori più comuni da evitare sul posto di lavoro

Gli errori accadono ovunque e a tutti, anche sul posto di lavoro. Indipendentemente dalla tua esperienza, commetterai inevitabilmente uno o due errori. . Nonostante ...
Collaborazione

Come un CRM ti aiuta nella collaborazione interna ed esterna

Ciao gente! Bentornati alla riduzione dei costi con le serie di blog CRM in cui discuteremo di molteplici dimensioni di riduzione dei costi con l'aiuto di ...
Banner centralizzato delle informazioni sui clienti

In che modo i dati centralizzati in un CRM possono avvantaggiare la tua azienda

Ciao gente! Benvenuti alla riduzione dei costi utilizzando la serie di blog CRM in cui discuteremo di molteplici dimensioni della riduzione dei costi con l'aiuto di un ...
Chat interna di Vtiger 2

Sfrutta la chat interna di Vtiger per una rapida collaborazione in team

La collaborazione interna è indispensabile per rimanere in contatto con i tuoi colleghi e aumentare la produttività. Un rapporto di Businesswire afferma che il 71% dei dipendenti si sente più produttivo...
Azioni - Immagine caratteristica

Usa le azioni in Vtiger per velocizzare le tue attività

Amo le scadenze. Mi piace il suono sibilante che fanno mentre volano via - Douglas Adams Le scadenze in un ambiente lavorativo sono importanti. Scadenze...
Banner (1)

Prendersi una pausa dal lavoro

Cosa pensi che facciano le persone nei fine settimana o durante la pausa dal lavoro? Ebbene, la maggior parte delle persone trascorre il proprio tempo combinando le attività familiari con il proprio...
Banner

Usa la tecnica del pomodoro per aumentare l'efficienza e la produttività

Hai mai avuto uno di quei giorni in cui senti che non riuscirai mai a portare a termine tutti i tuoi compiti? Partecipi a troppe riunioni a...
Immagine caratteristica del blog di MS Teams

Microsoft Teams - Integrazione con Vtiger CRM per una collaborazione di squadra superiore

Microsoft Teams o MS Teams è uno strumento collaborativo per condurre riunioni o discussioni di gruppo da postazioni remote. Consente ai team di collaborare senza problemi creando...
Prontezza alla vendita

Crea esperti di vendita attraverso un programma di preparazione alle vendite

La marea degli affari è in continua evoluzione e anche le informazioni aziendali continuano a cambiare. Dalle informazioni relative al prodotto alle metodologie di vendita, c'è molto...
Piccole grandi cose

Piccole cose grandi – La funzione Segui

Bentornati in un altro capitolo della serie di blog Big Little Things, in cui mettiamo in evidenza alcune delle funzionalità e dei miglioramenti meno conosciuti e talvolta trascurati...
Caricamento in corso
Copyright 2022 Vtiger | Privacy | Centro legale e politico