Cómo funcionan las API y cómo integrarlas en su aplicación

Las interfaces de programación de aplicaciones (API) son uno de los atajos definitivos para crear aplicaciones inteligentes. Es un canal de comunicación entre dos aplicaciones. Intencionalmente o no, ha utilizado API en algunos lugares mientras navega por Internet o utiliza programas en su vida diaria.


Cómo utilizar una API web con el programa de primer plano (2)

Si bien una API generalmente env√≠a datos complejos como respuesta, ¬Ņc√≥mo puede comprender y utilizar esta informaci√≥n para atender a sus usuarios? Las API facilitan la vida tanto a los desarrolladores nuevos como a los experimentados. Entonces necesitas saber c√≥mo usarlos con tu aplicaci√≥n.

Aquí, con algunos casos de uso y ejemplos, echemos un vistazo a cómo puede usar una API para servir sus programas como desarrollador.

¬ŅC√≥mo funcionan las API?

Los desarrolladores crean API como productos que otros desarrolladores pueden ofrecer. El objetivo es hacer que los procesos de desarrollo web complejos sean m√°s f√°ciles, eficientes y r√°pidos para los desarrolladores de consumidores o las empresas.

La mayoría de las empresas ahora dependen de API de terceros para solucionar problemas y brindar un mejor servicio a sus clientes. Sin embargo, usar las API no es tan complicado como mucha gente piensa. Puede considerarlo como una solución de terceros que le brinda una respuesta específica en forma de datos cuando realiza una solicitud HTTP en particular.

Usar una API es como hacer un pedido en una pizzería. No puedes ir a la cocina y decirles lo que quieres. Necesitas que un camarero tome tu pedido y lo comunique a la cocina antes de regresar con tu pizza.

Puede ver una API como un vínculo entre usted y la cocina. En este caso, usted es un cliente del restaurante que proporciona un camarero (API). Luego, el camarero responde con su elección de pizza (datos). En una verdadera API, su aplicación web es el cliente que solicita utilizar el contenido del proveedor a través de su API mediante solicitudes de punto final HTTP.

¬ŅQu√© es un punto final de API?

Para conectarse a una API, es necesario conectar el programa a un punto final de la API. Puede ver esto como una conexión bidireccional. El punto final conectado a su programa envía una solicitud, mientras que el punto final conectado a la API le devuelve una respuesta específica.

El punto final es una URL que solicita y proporciona al cliente acceso directo a los recursos de una API.

Además de obtener datos con una API, también puede POST solicitudes de un proveedor a un cliente, usar el método PUT para obtener más información de un proveedor y usar el método DELETE para eliminar datos existentes de su programa. Cada uno de estos métodos suele estar disponible en la documentación de una API.

Políticas para conectarse a una API

La integración de una API con su programa no es solo una decisión espontánea, es una idea previa. Necesita saber qué información desea y cuánto desea. Esto reduce la complejidad, especialmente si se trata de datos JSON que parecen una matriz multidimensional. Esta práctica también le permite obtener la información específica que necesita para su programa.

Hay cientos de API con diferentes reglas para conectarse a ellas. Si bien algunas API son gratuitas y de código abierto, a otras solo se puede acceder mediante suscripción.

Si bien algunas son sencillas y directas y no requieren requisitos previos, otras API pueden requerir condiciones como generar una clave de API o registrarse para que se cumpla una cuenta de desarrollador antes de que puedan conectarse a sus puntos finales.

Relacionado: Integración de datos de vuelo en el proyecto con la API de Aviationstack


vuelo-datos-aviationstack

Sin embargo, uno de los aspectos más importantes de cualquier API es su documentación. Su mejor práctica es leer y seguir la documentación de cualquier API con la que desee conectarse para obtener guías sobre cómo codificar y usar sus recursos. Esto se debe a que cada API tiene sus propios métodos e instrucciones de conexión.

Para conectarse con cualquier API, también necesita conocer los lenguajes de programación que admite.

Cómo conectarse a una API: ejemplos prácticos

No hay formas específicas de conectarse a una API, pero algunos ejemplos lo expondrán a los conceptos básicos de cómo usar los datos de la API con su aplicación. Pero antes de continuar, hemos escrito un par de artículos sobre las API y cómo usarlas.

Por ejemplo, tenemos un artículo detallado sobre cómo puede conectarse con la API Weatherstack, que le brinda acceso a datos meteorológicos en tiempo real. También hemos escrito sobre cómo puede usar la API de Mediastack, que es una API de pago que puede usar para agregar titulares de noticias a su sitio web.

Echemos un vistazo a algunos ejemplos de código corto sobre cómo puede conectarse a una API.

Cómo usar Iro.js Color Picker API

Iro.js es una API simple que le permite agregar un selector de color gratuito a su sitio web. Cuando selecciona un punto de color en la rueda de colores, la API devuelve el código hexadecimal o RGB de ese color. Para conectarse a la API de iro.js, todo lo que necesita hacer es pegar su punto final de la red de entrega de contenido (CDN) en jefe sección de tu DOM.

La documentación completa de esta API está disponible en iro.js.org. Veamos cómo puede conectarse a esta API con el fragmento de código de muestra a continuación:

<!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>

En el caso de la API de ejemplo anterior, no se requiere una clave de API para conectarse a ella. Sin embargo, para entender esto mejor, eche un vistazo más de cerca a JavaScript. Para conectarnos con esta API, solo necesitamos llamar al Selector de color función desde iro clase, luego pasemos a la carné de identidad del contenedor de la rueda de colores en el aula.

El punto final de la API de iro.js es fácil de conectar porque sus desarrolladores han realizado el trabajo adicional de codificar la clase para sus usuarios. La imagen a continuación es el resultado del código de ejemplo anterior.

Resultado del código API del selector de color

Para ver cómo ocurre el evento de cambio de color, puede abrir otro archivo HTML y pegar el siguiente código en su archivo guión sección:

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);

El código anterior registra los valores de color hexadecimales cada vez que cambia la posición del selector de color en la rueda.

Relacionado: entretenga a los visitantes de su sitio con la API de Marketstack

N√ďTESE BIEN: Todo el c√≥digo de muestra es el resultado de seguir las instrucciones de la documentaci√≥n de la API.

Cómo utilizar la API de cambio de moneda NoCodeAPI

NoCodeAPI ofrece muchas API, incluida la API de conversor de divisas. Para conectarse a su punto final de cambio de moneda, vaya al mercado NoCodeAPI y cree una cuenta.

Una vez que haya iniciado sesi√≥n, hay una barra de b√ļsqueda en la parte superior de la p√°gina. En esa barra de b√ļsqueda, escriba cambio de divisas, una vez que se muestra la consulta, haga clic en Activar.

En la p√°gina siguiente, haga clic en Crear API de cambio de moneda. Luego, escriba un nombre preferido para la API y haga clic en Crear.

Después de crear la API, haga clic en Ver la documentación. Luego, seleccione un idioma preferido para ver el código para conectarse al punto final de la API. Luego puede copiar ese código de muestra y pegarlo en su aplicación para una mayor personalización.

Consulte nuestro código de ejemplo a continuación para la conversión de moneda:

<!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>

El código anterior es solo una versión modificada del que se encuentra en la documentación. Sin embargo, preste mucha atención a los parámetros de conversión en la variable de respuesta de JavaScript.

Así es como se ve la salida JSON sin procesar:

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

Aprovecha la API

El uso de las API de su aplicaci√≥n le permite completar proyectos m√°s r√°pido. Si bien parte de la documentaci√≥n de la API puede ser t√©cnica, hay muchas que son √ļtiles para los reci√©n llegados.

Sin embargo, como se indicó anteriormente, para aprovechar al máximo cualquier API de la que desee extraer datos, debe estudiar su documentación detenidamente y cumplir con las reglas para conectarse a ella.

Si bien hemos usado JavaScript para nuestros ejemplos aquí, dependiendo del tipo de API, la mayoría de ellos también admiten otros lenguajes de programación. Puede obtener información sobre el soporte de idiomas en cualquier documentación de API. Además, tenga en cuenta que los ejemplos que hemos utilizado aquí son solo algunos de los muchos casos de uso de API.


imagen de primer plano cdn de servidores

Por qué debería utilizar una CDN para mejorar la experiencia de usuario de su sitio web


Sobre el Autor

.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *