Come funzionano le API e come integrarle nella tua app

Le interfacce di programmazione delle applicazioni (API) sono una delle scorciatoie definitive per la creazione di app intelligenti. È un canale di comunicazione tra due applicazioni. Volutamente o no, hai utilizzato le API in alcuni punti durante la navigazione in Internet o l'utilizzo di programmi nella tua vita quotidiana.

Sebbene un'API in genere invii dati complessi come risposta, come puoi comprendere e utilizzare queste informazioni per servire i tuoi utenti? Le API semplificano la vita sia agli sviluppatori esperti che a quelli nuovi. Quindi devi sapere come usarli con la tua app.

Qui, con alcuni casi d'uso ed esempi, diamo un'occhiata a come puoi utilizzare un'API per servire i tuoi programmi come sviluppatori.

Come funzionano le API?

Gli sviluppatori creano API come prodotti che possono servire altri sviluppatori. L'obiettivo è rendere i processi di sviluppo web complessi facili, più efficienti e più veloci per gli sviluppatori consumer o le aziende.

La maggior parte delle aziende ora dipende da API di terze parti per risolvere i problemi e servire meglio i propri clienti. Tuttavia, l'utilizzo delle API non è così complicato come molte persone pensano. Puoi pensarla come una soluzione di terze parti che ti fornisce una risposta specifica sotto forma di dati quando effettui una particolare richiesta HTTP.

Usare un'API è come effettuare un ordine in una pizzeria. Non puoi andare in cucina a dire loro quello che vuoi. Hai bisogno di un cameriere per prendere il tuo ordine e comunicarlo alla cucina prima di tornare con la tua pizza.

Puoi visualizzare un'API come collegamento tra te e la cucina. In questo caso, sei un cliente che patrocina il ristorante che fornisce un cameriere (API). Il cameriere risponde quindi con la tua scelta di pizza (dati). In una vera API, la tua app web è il client che richiede di utilizzare il contenuto del provider tramite la sua API effettuando richieste HTTP endpoint.

Cos'è un endpoint API?

La connessione a un'API richiede di collegare il programma a un endpoint API. Puoi vederlo come una connessione a due vie. L'endpoint connesso al tuo programma invia una richiesta, mentre quello connesso all'API ti restituisce una specifica risposta.

L'endpoint è un URL che richiede e fornisce al client l'accesso diretto alle risorse di un'API.

Oltre a ottenere dati con un'API, puoi anche eseguire il POST delle richieste da un provider a un client, utilizzare il metodo PUT per ottenere maggiori informazioni da un provider, nonché utilizzare il metodo DELETE per rimuovere i dati esistenti dal tuo programma. Ciascuno di questi metodi è solitamente disponibile nella documentazione di un'API.

Criteri per la connessione a un'API

L'integrazione di un'API con il tuo programma non è solo una decisione spontanea, è pre-meditata. Devi sapere quali informazioni vuoi e quante ne vuoi. Ciò riduce la complessità, soprattutto se hai a che fare con dati JSON che si presentano come un array multidimensionale. Questa pratica ti consente anche di ottenere le informazioni specifiche di cui hai bisogno per il tuo programma.

Esistono centinaia di API con regole diverse per la connessione ad esse. Mentre alcune API sono gratuite e open source, altre sono accessibili solo su abbonamento.

Sebbene alcune siano semplici e dirette e non richiedano alcun prerequisito, altre API potrebbero richiedere il soddisfacimento di condizioni come la generazione di una chiave API o la registrazione per un account sviluppatore prima di potersi connettere ai loro endpoint.

Correlati: integrazione dei dati di volo nel progetto con l'API Aviationstack

Tuttavia, uno degli aspetti più importanti di qualsiasi API è la sua documentazione. La procedura migliore è leggere e seguire la documentazione di qualsiasi API con cui intendi connetterti per guide su come codificare e utilizzare le sue risorse. Questo perché ogni API ha i propri metodi di connessione e istruzioni.

Per connetterti con qualsiasi API, devi anche conoscere i linguaggi di programmazione che supporta.

Come connettersi a un'API: esempi pratici

Non esistono modi specifici per connettersi a un'API, ma alcuni esempi ti esporranno ai concetti di base su come utilizzare i dati dell'API con la tua app. Ma prima di andare oltre, abbiamo scritto un paio di articoli sulle API e su come utilizzarle.

Ad esempio, abbiamo un articolo dettagliato su come puoi connetterti con l'API Weatherstack , che ti dà accesso ai dati meteorologici in tempo reale. Abbiamo anche scritto su come puoi utilizzare Mediastack API , che è un'API a pagamento che puoi utilizzare per aggiungere titoli di notizie al tuo sito web.

Diamo un'occhiata ad alcuni brevi esempi di codice su come puoi connetterti a un'API.

Come utilizzare l'API Color Picker Iro.js

Iro.js è una semplice API che ti consente di aggiungere un selettore di colori gratuito al tuo sito web. Quando si seleziona un punto di colore sulla ruota dei colori, l'API restituisce il codice esadecimale o RGB di quel colore. Per connettersi al API iro.js, tutto ciò che dovete fare è incollare il suo Content Delivery Network (CDN) endpoint nella sezione head del DOM.

La documentazione completa di questa API è disponibile su iro.js.org . Vediamo come puoi connetterti a questa API con lo snippet di codice di esempio di seguito:

 <!DOCTYPE html>
 <html>
 <head>
 <title>Practice Slider</title>
 <script src="https://cdn.jsdelivr.net/npm/@jaames/[email protected]"></script>
 </head>
 <body>
 <button id="color-button" onclick="sample()">Display color picker</button>
 <div id="color-circle"> </div>
 <div id="color-code"> </div>
 </body>
 <script>
 let colors= document.getElementById('color-code');
 const sample= ()=>{
 var colorPicker = new iro.ColorPicker('#color-circle', {
 // Set the size of the color picker
 width: 320,
 // Set the initial color to pure red
 color:"#ff0000"
 });
 colorPicker.on(['color:change', 'color:init'], function(color) {
 // log the current color as a HEX string
 colors.innerHTML=color.hexString;
 });
 };
 </script>
 </html>

Nel caso dell'API di esempio sopra, non è necessaria una chiave API per connettersi ad essa. Tuttavia, per capirlo meglio, dai un'occhiata più da vicino a JavaScript. Per connetterci con questa API, dobbiamo solo chiamare la funzione ColorPicker dalla classe iro , quindi passiamo l' id del contenitore della ruota dei colori nella classe.

L'endpoint dell'API iro.js è facile da connettere perché i suoi sviluppatori hanno svolto il lavoro extra di codificare la classe per i suoi utenti. L'immagine sotto è il risultato del codice di esempio sopra.

Per vedere come si verifica l'evento di cambio colore, puoi aprire un altro file HTML e incollare il seguente codice nella sua sezione script :

 var colorPicker = new iro.ColorPicker('#color-pick', {
 // Set the size of the color picker
 width: 400,
 // Set the initial color to pure red
 color:"#ff0000"
 });
 const myColor =(color)=>{
 console.log(color.hexString);
 };
 colorPicker.on("color:change", myColor);

Il codice precedente registra i valori esadecimali del colore ogni volta che si modifica la posizione del selettore dei colori sulla ruota.

Correlati: intrattieni i visitatori del tuo sito con l'API Marketstack

NB: Tutto il codice di esempio è il risultato del seguire le istruzioni nella documentazione dell'API.

Come utilizzare l'API di cambio valuta NoCodeAPI

NoCodeAPI offre molte API tra cui l'API del convertitore di valuta. Per connetterti al suo endpoint di cambio valuta, vai al marketplace NoCodeAPI e crea un account.

Una volta effettuato l'accesso, è presente una barra di ricerca nella parte superiore della pagina. In quella barra di ricerca, digita cambio di valuta , una volta visualizzata la tua query, fai clic su Attiva .

Nella pagina successiva, fai clic su Make Currency Exchange API . Quindi, digita un nome preferito per l'API e fai clic su Crea .

Dopo aver creato l'API, fare clic su Visualizza documentazione . Quindi, seleziona una lingua preferita per visualizzare il codice per la connessione all'endpoint dell'API. È quindi possibile copiare quel codice di esempio e incollarlo nell'applicazione per un'ulteriore personalizzazione.

Dai un'occhiata al nostro codice di esempio di seguito per la conversione di valuta:

 <!DOCTYPE html>
 <html>
 <head>
 <title>Currency converter</title>
 </head>
 <div id="currency"> </div>
 </body>
 <script>
 let currency= document.getElementById('currency');
 async function callingFn() {
 try {
 const response = await fetch("https://v1.nocodeapi.com/techyprem/cx/FHNXhKRkWDCvMehl/rates/convert?amount=10&from=USD&to=Eur", {
 method: "get",
 headers: {
 "Content-Type": "application/json"
 }
 });
 const json = await response.json();
 currency.innerHTML="Success:" + JSON.stringify(json);
 } catch (error) {
 console.error("Error:", error);
 }
 }
 callingFn();
 <script>
 </html>

Il codice sopra è solo una versione modificata di quella nella documentazione. Tuttavia, prestare molta attenzione ai parametri di conversione nella variabile di risposta di JavaScript.

Ecco come appare l'output JSON grezzo:

 Success:{"query":{"from":"USD","to":"EUR","amount":10},"info":{"time":1604587505388,"rate":0.844865},"result":8.44865,"text":"10 USD = 8.44865 EUR"}

Approfitta delle API

L'utilizzo delle API per la tua app ti consente di completare i progetti più velocemente. Sebbene una parte della documentazione API possa essere tecnica, ce ne sono molte là fuori che tornano utili per i nuovi arrivati.

Tuttavia, come abbiamo affermato in precedenza, per ottenere il massimo da qualsiasi API da cui desideri attingere i dati, devi studiarne attentamente la documentazione e rispettare le regole per la connessione ad essa.

Sebbene abbiamo utilizzato JavaScript per i nostri esempi qui, a seconda del tipo di API, la maggior parte di essi supporta anche altri linguaggi di programmazione. È possibile ottenere informazioni sul supporto linguistico dalla documentazione di qualsiasi API. Inoltre, tieni presente che gli esempi che abbiamo usato qui sono solo alcuni dei molti casi d'uso delle API.