Saltar al contenido
Cosas Tecnológicas

Introducción a la API web en JavaScript

Antes de discutir las API en JavaScript y cómo usarlas, necesitamos saber el significado exacto de las API. API son las siglas de Application Programming Interface, un concepto que no es limitado ni específico. JavaScript, Pero se usa en casi todos los lenguajes de aplicaciones web. Como desarrollador web, espero que comprenda la API, así que primero intentemos comprender este concepto.

Como concepto, API ha existido durante más de 50 años, pero en los últimos años se ha vuelto muy popular y describe diferentes formas de cómo creamos aplicaciones. Ahora suponga que está creando una aplicación web donde los usuarios pueden registrarse y hablar sobre sus viajes recientes, escribir historias, publicar imágenes y compartirlas. Como complemento, deberían poder compartir el mismo contenido en múltiples plataformas como Facebook e Instagram. ¿Qué debemos hacer? No tenemos acceso a la aplicación de Instagram ni a sus datos. No sabemos cómo administran sus datos y si los datos de nuestra aplicación se ajustan a su base de datos.

Intentemos imaginar cómo Instagram permite complementos sin API. Tal vez podríamos enviar un correo electrónico a Instagram pidiéndoles que nos permitan acceder a una base de datos donde puedan escribir contenido. Es posible que hayan recibido otras solicitudes similares de millones de personas que también necesitan usar el complemento de Instagram. Instagram cumplirá nuestras solicitudes y las de millones de personas, y puede utilizar sorteos para determinar quién puede acceder a su base de datos. Obviamente, esta no es una solución razonable. Sin una solución razonable, todas las aplicaciones del mundo quedarán aisladas, lo que significa que no pueden comunicarse y no pueden respaldar las funciones de las demás. ¡Afortunadamente, nuestra imaginación es así!

Afortunadamente, vivimos en un mundo rodeado de API que nos permiten comunicarnos fácilmente con otras aplicaciones. Puedo crear una aplicación en la que pueda usar la búsqueda de Google, el feed de Facebook, la publicación de Instagram, el tweet de Twitter en una sola aplicación. Todo esto se puede lograr usando API. Como sugiere el nombre, nos permite abrir una interfaz, y luego otras aplicaciones pueden usar esa interfaz para comunicarse usando esa interfaz.

¿Cómo funciona la API?

El propósito de la API es comunicarse entre sí entre aplicaciones intermediario, Dos de las aplicaciones pueden construirse utilizando diferentes herramientas y tecnologías. Se puede implementar mediante el uso de estándares API como REST y SOAP. Estos estándares describen los protocolos o conjuntos de reglas que el cliente (la persona que necesita llamar) y el servidor (la persona que proporciona los servicios para la solicitud del cliente) deben seguir. . Estos estándares son la clave para la comunicación. Estos estándares describen cómo debe verse la solicitud y el formato en el que el cliente debe esperar la respuesta del servidor.

Cada api expone su punto final (también llamado punto de entrada), que permite a sus clientes usarlo para acceder a la funcionalidad de la api. Por ejemplo, en JavaScript, para usar el DOM, expone el Documento como un punto de entrada para usar múltiples métodos. Permite a sus clientes usarlo para manipular el DOM. Sin embargo, en JavaScript, usamos un contenedor, que no es más que un control HTML que puede llamar a una API y puede generar una respuesta en el control.

JavaScript: Introducción

JavaScript Es uno de los lenguajes de programación más utilizados, aunque se utiliza principalmente en navegadores para renderizar HTML y CSS. También puede ejecutarse en nuestro servidor para manejar las solicitudes de los clientes, conectarse a la base de datos y realizar casi todo lo que cualquier otro lenguaje de programación hace en el servidor. Esto lo convierte en una herramienta importante para aprender.

Aquí, discutiremos la API proporcionada por JavaScript para manejar casi todos los aspectos de las aplicaciones web.

API en JavaScript

Como lenguaje de programación muy utilizado, JavaScript tiene una gran cantidad de API disponibles, lo que facilita la vida de los desarrolladores de JavaScript. JavaScript también es un lenguaje de usos múltiples, lo que significa que puede ejecutarse no solo en el navegador, sino también en el servidor o en el teléfono móvil. Para admitir diferentes plataformas, tiene un conjunto de diferentes API disponibles. También proporciona un amplio conjunto de controles y otras características, como el almacenamiento del lado del cliente, que se puede utilizar fácilmente a través de JavaScript.

API del navegador en JavaScript

El navegador utiliza JavaScript para mostrar páginas web, procesar las interacciones del usuario, enviar solicitudes al servidor y recibir respuestas. Para que esto sea posible, JavaScript proporciona una API de navegador que se puede utilizar para realizar funciones relacionadas con el navegador:

  1. Usar DOM

DOM significa modelo de objeto de documento, que es una estructura que contiene todos los controles HTML en una página web. No solo contiene, sino que también nos permite agregar y eliminar controles. Es posible que haya utilizado la API de documentos para obtener, enviar o incluso eliminar elementos del DOM, todos los cuales provienen de la API DOM de JavaScript.

ejemplo: document.getElementById (“encabezado”). texto (“Este es un encabezado”);

  1. Solicitar datos del servidor

JavaScript se usa ampliamente para optimizar las páginas web actualizando solo una parte de la página web en lugar de cargar la página completa. Por ejemplo, cuando le gusta una publicación en Facebook, no volverá a cargar la página completa, solo actualizará esa publicación específica. Del mismo modo, cuando tuiteamos en Twitter, no se recargará toda la página para mostrar el nuevo tuit. Así es como JavaScript utiliza la búsqueda popular y las apis AJAX para realizar llamadas parciales al servidor.

ejemplo:

const response= await fetch(url); 
// when response is success which is status 200 
if (response.ok)    
  // receive response from server. 
  let json = await response.json(); 
 else  
  // if there are errors returned by server, show the error 
  alert("Error occured" + response.status); 
  1. Almacenar datos sobre el cliente

Incluso si nuestra base de datos se ejecuta sin problemas en un servidor que procesa terabytes de datos todos los días, es posible que desee almacenar grandes cantidades de datos en el navegador del cliente para optimizar el rendimiento de la aplicación. qué hacemos?

JavaScript una vez más nos mostrará el camino, al proporcionar API como localStorage, sessionStorage, etc., podemos usarlas para almacenar datos en el navegador del cliente y eliminarlos cuando sea necesario. La diferencia entre localStorage y sessionStorgae es que incluso si el navegador o la pestaña están cerrados, los datos que almacenamos en localStorage todavía existen, y una vez que se cierran la pestaña o el navegador, los datos almacenados en sessionStorage se borrarán. Ahora, según sus necesidades, ambos tienen sus propias ventajas.

sessionStorage.setItem('key', value); 
sessionStorage.getItem('key')  
localStorage.setItem('key', value); 
sessionStorage.getItem('key';)
  1. Usa gráficos

En muchas aplicaciones populares, es posible que haya visto gráficos 2D o 3D creados mediante la interacción del usuario, lo que permite a los usuarios crear tales dibujos, y no me refiero solo a CSS (hojas de estilo en cascada). Sí, CSS tiene su función, pero para permitir a los usuarios crear dibujos 2D / 3D en la Web, necesitamos más que CSS. JavaScript proporciona la API de lienzo, que se puede utilizar para procesar píxeles en una página web para dibujar La imagen 2D / 3D dentro de la etiqueta html.

API de terceros.

La integración con otras aplicaciones (no tenemos mucha información sobre su estructura) puede resultar difícil. Pero JavaScript nos permite integrarnos con muchas aplicaciones populares de terceros, como Twitter, YouTube, Facebook.

Por ejemplo, si tiene el sitio web de su empresa, también desea mostrar los tweets más recientes de la cuenta de Twitter de su empresa. qué hacemos? La API de Twitter de JavaScript es la respuesta. Esto no solo se aplica a Twitter, sino que también puede utilizar la API de terceros de JavaScript para integrar muchas otras aplicaciones populares en sus propias páginas web.

API de audio web

La API de audio en JavaScript proporciona una implementación fluida de los controles de audio en las páginas web. Esto incluye múltiples controles de reproducción de audio y efectos de audio en la web. La API de Web Audio tiene múltiples interfaces, incluidas las operaciones relacionadas con los efectos de visualización, los destinos de audio, la fusión de canales de audio y el procesamiento de audio.

ejemplo

<div> 
  <audio src="https://www.knowledgehut.com/blog/web-development/myfavsong.mp3"></audio> 
  <button>Play</button> 
  <input type="range" min="0" max="1" step="0.01" value="1"> 
</div>

API de geolocalización

Hay muchas aplicaciones web que son las mejores para manejar la información de ubicación del usuario. Por ejemplo, si está buscando un restaurante cercano, obtendrá mejores resultados si Google conoce su ubicación. Obviamente, por razones de privacidad, si los usuarios están dispuestos a compartir su ubicación depende del consentimiento del usuario, pero si quieren compartir, la API de geolocalización proporcionará la ubicación del usuario a la aplicación web.

ejemplo:

var address = document.getElementById("address"); 
function accessUserLocation() { 
  if (navigator.geolocation)  
navigator.geolocation.getCurrentPosition(displayLocation); 
 
 
function displayLocation(location)  
address.innerHTML = "Latitude: " + location.coords.latitude +   
"Longitude: " + location.coords.longitude;   

API de historial

La API de historial es otra API útil pero que rara vez se usa, si desea permitir que los usuarios recorran una aplicación web de un lado a otro, puede usarla. La API de historial utiliza tres métodos diferentes disponibles para ejecutar con objetos de ventana: ir, retroceder y avanzar.

ejemplo:

// Visit page visited previously 
window.history.back(); 
// Traverse to forward on web page. 
window.history.forward(); 
// Move forward by 1 page 
window.history.go(1); 

API de trabajo web

Puede usar el constructor en JavaScript para crear un trabajador, que puede ejecutar archivos JavaScript en el contexto del hilo del trabajador, que es diferente del contexto de Windows en JavaScript. Hay algunas excepciones al tipo de código que podemos ejecutar en un hilo de trabajo. Por ejemplo, no podemos usar un hilo de trabajo para manipular el DOM. La pregunta que sigue es: si el hilo de trabajo es diferente del hilo de la ventana principal, ¿cómo se comunican? Porque incluso si se ejecuta en un hilo diferente, el trabajador aún puede ejecutar muchos métodos de ventana. Para lograr esto, el hilo de trabajo y el hilo principal utilizan el método postMessage () para comunicarse; los datos se envían cada vez que se llama y procesa el evento onmessage.

ejemplo:

const worker = new Worker('input.js'); 

El archivo de entrada aquí es un archivo JavaScript que contendrá el código que necesita ejecutar por el hilo de trabajo.

La API de JavaScript más popular

  • API del navegador —— Los hemos discutido en detalle, y dado que JavaScript lidera la forma en que las aplicaciones web se representan en el navegador, la popularidad de las API del navegador es obvia.
  • API de Canvas —— Esta es la API favorita de muchos desarrolladores que trabajan en el campo de los gráficos y necesitan proporcionar aplicaciones interactivas para que sus clientes manejen fácilmente dibujos y gráficos en la web.
  • API de redes sociales —— Esto es muy común hoy. Cualquier aplicación web que se dirija a una audiencia necesita integrar las redes sociales en su aplicación, como Facebook, Twitter, API de Instagram, para que puedan mostrar las actividades recientes en sus páginas web.
  • API de almacenamiento —— Cada sitio que navegue ahora mostrará un panel que me pedirá que acepte la configuración de las cookies. ¿Por qué? Porque puede ayudar a la aplicación a manejar bien la interacción y la respuesta del usuario a la aplicación, y el almacenamiento no se limita a las cookies. sessionStorage y localStorage se utilizan ampliamente en aplicaciones JavaScript para almacenar información del usuario en el navegador del cliente. ¡No podemos imaginar la vida sin la API de almacenamiento de JavaScript!

Herramientas JavaScript y su relación

Biblioteca de JavaScript

Hay bibliotecas de JavaScript como jQuery y React, que implementan JavaScript usando su propia sintaxis nueva. Por ejemplo, la forma en que usamos JavaScript vanilla para acceder al DOM es diferente de la forma en que jQuery accede al DOM, pero al final, ambos usan la misma API que discutimos anteriormente. Otro ejemplo es cuando se usa React, que usa JSX para extender JavaScript para incrustar JavaScript con HTML en los componentes de React.

Marco de JavaScript

Los marcos de JavaScript como Angular y Vue crean la mayor parte de la API de JavaScript porque están construidos sobre JavaScript. La diferencia entre los marcos es la estructura, el flujo de datos y los diferentes patrones que utilizan, lo que facilita el uso de JavaScript y la implementación de su API.

Por ejemplo, Angular usa la inyección de dependencia para inyectar servicios en el constructor del componente, lo que lo convierte en una forma compleja de control invertido, que no es tan fácil con JavaScript ordinario. Los marcos como Angular intentan evitar que los usuarios manipulen directamente el DOM porque es una operación costosa. Sin embargo, esto no significa que no actualice el DOM en absoluto. Finalmente, Angular usa la manipulación DOM internamente de una manera muy eficiente, usando la misma API que discutimos anteriormente.

en conclusión

Una API se puede comparar con un teléfono con tiempo de conversación ilimitado, que se puede proporcionar a una aplicación para que pueda comunicarse con todas las demás aplicaciones del mundo. ¿Porqué necesitamos esto? Porque una aplicación no necesita y no puede hacer todo. Necesitan la ayuda del otro.

La API se puede utilizar tanto externa como internamente. Las API externas permiten que las aplicaciones se comuniquen con otras aplicaciones, y las API internas o integradas permiten a los desarrolladores utilizar estas herramientas de manera eficaz. Como el lenguaje más popular del mundo, JavaScript es consciente de esto y, por lo tanto, nos proporciona como desarrolladores una gran cantidad de interfaces para usar en nuestras aplicaciones. Ya sea que se trate de almacenamiento, creación de controles, integración con Twitter, presentación de medios o dibujo de gráficos, JavaScript no lo defraudará.