Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Web APIs modernas

4/29
Recursos

Aportes 41

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

¿Qué rayos son las API?

Puede parecernos un concepto muy abstracto o confuso al principio, ya que como dice el profesor ‘’lo utilizamos sin discreción para referirnos a todo’’. Pero, en pocas palabras, una API es todo lo que sirva para comunicar fácilmente un pedazo de software con otro.

APIs de terceros
Twitter, por ejemplo, nos proporciona una manera sencilla de mostrar tweets de algún usuario a través de su API. Tan solo tenemos que hacer una petición GET al siguiente Endpoint:

GET https://api.twitter.com/2/users/:id/tweets

APIs de servicios
Si quisieramos mostrar mapas de Google Maps, tambien podriamos hacerlo a través de su API.

Por ejemplo, para mostrar la ubicación de Sydney, New South Wales, Australia, lo haríamos de la siguiente manera:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

Conclusión
Si prestamos atención, nos damos cuenta de que son una manera sencilla de acceder a información o funcionalidades de otro pedazo de código. Es por eso que se les llama ‘’intermediarios’’ o ‘’puentes’’.

Si tienes algún otro ejemplo de APIs coméntalo o si dije alguna imprecisión corrígeme con confianza. Estamos para ayudarnos compañeros,** nunca paren de aprender.**

Un ejemplo para entender el back, front y apis

  • el backend es la cocina
  • el frontend serían las mesas, la decoración de ellas
  • las apis serían los meseros

🚵‍♂️ Web APIs modernas

<h4>Ideas/conceptos claves</h4>

API ⇒ Es un puente 🌉

<h4>Recursos</h4>

MDN Web Docs

Can I use… Support tables for HTML5, CSS3, etc

<h4>Apuntes</h4>
  • DOM + JS = Web API
  • Una web API nos permite conectar el JS con el DOM para poder manejarlo (leer y modificar)

Actualmente existen más de 70 web APIs, Dom es solo una de ellas

  • ya existen diferentes propósitos
    • Animaciones
    • Drag & Drop
    • Transmisión de video con web RTC
    • Manejo de videojuegos como ser con WebGL
    • Incluso pagos sin necesidad de otro servicio
  • Debemos hacernos dos preguntas al momento de usar las APIs
    • ¿Como lo uso?
      • MDN contiene bastante información acerca de las webs APIs
    • **¿Puedo usarlo?**
      • No todas las webs API’s estarán soportadas por todos los navegadores entonces podemos usar caniuse
      • Chrome tiene bastante compatibilidad con nuevas APIs

RESUMEN: Para manejar el DOM mediante JS se debe tomar en cuenta que estaremos usando una web API, cada vez que usemos una de ellas debemos tomar en cuenta dos preguntas de cómo usarlo y si se puede implementar en todos los navegadores o usuarios que deseemos llegar

Resumen de la Clase 👌👌
Web Apis Modernas

Una WEB API nos permite conectar el DOM con Javascript para que nosotros podamos (leerlo y modificarlo), actualmente existen mas de 70 web APIS y el DOM solo es una de ellas

Pero existen algunas de ella para hacer:

  • Animaciones
  • Drag & Drog
  • Manejar de Archivos
  • Trasmisión de video con web RTC
  • Manejo de videojuegos como ser con OpenGL
  • Incluso para manejo de pagos, sin necesidad de contar con librerías o servicios externos.

Recursos que debemos tener en cuenta al momento de usar APIS

¿Como lo uso? → developer mozilla org

Podremos encontrar bastante información sobre Frontend cuando la necesitamos

¿Puedo usarlo? → caniuse

También tenemos que tener en cuenta que la API que vayamos a usar este soportada por los navegadores, entonces caniuse podrá ayudarnos a saber sobre la compatibilidad que hay.

Chrome tiene compatibilidad con la mayoría de APIS y también de las mas recientes.

No me quedó muy claro que son las web API con este video, así que les comparto lo que conseguí
APIs
Las Interfaces de Programacion de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar.
APIs en JavaScript del lado cliente
JavaScript del lado cliente, particularmente, tiene muchas APIs disponibles — estas no son parte del lenguaje en sí, sino que están construidas sobre el núcleo de este lenguaje de programación, proporcionándote superpoderes adicionales para usar en tu código. Por lo general, se dividen en dos categorías:

  • Las APIs de navegador están integradas en tu navegador web y pueden exponer datos del navegador y del entorno informático circundante y hacer cosas complejas y útiles con él. Por ejemplo, la API de Geolocalización.
  • Las APIs de terceros no están incluídas por defecto en el navegador, y por lo general es necesario obtener el código e información desde algún lugar de la Web. Por ejemplo, la API de Twitter permite hacer cosas como mostrar tus últimos tweets en un sitio web. Proporciona un conjunto especial de construcciones que puedes usar para consultar el servicio de Twitter y devolver información específica.

DOM + JavaScript = Web API
.
Existen más de 70 Web API’s, el DOM Es solo una de ellas, una que en lo personal me encanta es la API de Audio/Video HTML
.
Mozilla Developer es una excelente página para buscar documentación de estas API’s
.
Can I Use es otra excelente página para saber la compatibilidad de los navegadores con las API’s existentes.
.
ANTES DE USAR UN API REVISA SU COMPATIBILIDAD, no saquen un proyecto a producción sin saber si será compatible en todos los navegadores 😄
.

Metaforas de una API

Las API’s pueden ser vistas como puentes, pero esa metafora puede llegar a ser ambigua.
.
Una manera de verlo mas facil es ver a las API’s como el “plug socket” o el enfuche de tu casa donde conectas tu refri para que funcione.
.
¿Qué soluciona el socket?
En pocas palabras te da acceso a la electricidad de una manera muy fácil, literalmente no tienes que hacer nada mas que enchufar tu conector.
.
¿Qué solucionan las API’s?
En pocas palabras, puedes acceder a data o código de una manera muy fácil, literalmente nada mas tienes que llamar a la API.
.
¿Qué pasa si no uso el socket?
Tendrías que ir a la planta de energía eléctrica a conectarte a la electricidad. Lo cual es poco eficiente y peligroso si no eres electricista
.
¿Qué pasa si no usa una API?
Tendrías que hacer mas esas conexiones a la información por tu cuenta, lo cual es poco eficiente e incluso desastroso si no eres desarrollador.

https://es.javascript.info/ Lo dejare por aquí de nuevo por si no lo vieron el video anterior

Cuando combinamos el DOM+JS = WEB API.

Una API no es nada mas que un puente. Nos permite conectar el DOM con JS para que podamos manipularlo, agregar o modificar los nodos a nuestro antojo.

Actualmente existen mas de 70 WEB APIs. DOM es solo 1.

Unas buenas fuentes para nuestras preguntas son

  • Como lo uso? → developer mozilla
  • Puedo usarlo? → caniuse

Aqui puedes encontrar documentacion oficial y mas contexto de como utilizar una API:
https://developer.mozilla.org/es/docs/Glossary/API

Pero que es una API, no es nada más que un puente, otra forma de poder entender esto es que una Web API nos permite conectar el DOM con JavaScript, para que nosotros podamos manipularlo, podamos agregar o modificarlo a nuestro antojo.

¿Qué es una API?

API (Application Programming Interface - Interfaz de programación de aplicaciones) Una API es un conjunto de reglas que permiten a una pieza de código hablar con otra.
Las API’s además hace nuestras vidas más fáciles abstrayendo el código complejo y remplazándolo con uno más simple y directo.

Tipos de APIs

En el mundo del desarrollo web, las APIs generalmente se dividen en dos categorías:

  1. APIs del navegador: Están integradas en los navegadores web, y exponen datos del navegador y del entorno informático circundante que los desarrolladores pueden aprovechar fácilmente, la API del navegador más común es la del DOM, Nos perimte manipular el HTML y el CSS, creando, quitando y cambiando el HTML y dinámicamente aplicando nuevos estilos para nuestra página.
    Hay una extensa lista de otras APIs del navegador.

  2. APIs de terceros: Por otra parte, las APIs de terceros no están integradas en el navegador por defecto, y tu generalmente tienes que recuperar su código e información de algún lugar en la web. Por ejemplo: la API de Twitter te permite hacer cosas como mostrar tus tweets más recientes en tu página web. Similarmente, la API de Spotify te permite hacer cosas como mostrar tus mejores artistas y canciones de todos los tiempos.

este curso hay que verlo a velocidad 1.5x.

Una Web API nos permite conectar el DOM con JavaScript para que podamos manipularlo, modificarlo a nuestro antojo.

Si conocía lo del DOM. Pero no entendía bien la Web API. Ahora es mas sencillo. Excelente!

NOTES

.

API

An API (Application Programming Interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface. The API can be seen as a simple contract (the interface) between the application offering it and other items, such as third party software or hardware.
.

Web API

When writing code for the Web, there are a large number of Web APIs available. Below is a list of all the APIs and interfaces (object types) that you may be able to use while developing your Web app or site.

https://developer.mozilla.org/en-US/docs/Web/API

Web APIs are typically used with JavaScript, although this doesn’t always have to be the case.

¿Que es una API?

Una API (del inglés “Application Programming Interface”) es un conjunto de reglas, protocolos y herramientas que permiten la comunicación entre diferentes aplicaciones de software.

En otras palabras, es un intermediario que permite que dos o más programas “hablen” entre sí y compartan información o funcionalidades específicas, como el acceso a bases de datos o la realización de ciertas tareas automatizadas.

Las APIs son fundamentales para el desarrollo de aplicaciones modernas y la integración de diferentes sistemas.

Veo excesivo el termino “biblia” en muchos de los cursos de platzi. Es molesto porque llega a comunicarse de forma peyorativa.

Si ustedes quieren ser inclusivos, empiecen por serlo y respetar las creencias de las personas, las cuales día a día meditamos la palabra de Dios.

Y si no lo son, ¿entonces de que inclusividad hablan?
¿De la de ser “inclusivos” acerca de todo lo que biblia RECHAZA y por ende están en contra de la misma?.

Antes que nada, les ahorro una busqueda en google:
Término biblia:
El cual significa biblos, del griego el cual significa libros.

Independientemente del significado ambiguo que quieran usar para justificar dicha conducta, es menester que su uso es a manera despectiva, y su fondo no es para nada el enfoque inclusvo el cual pretenden sostener.

¿En todo caso de que inclusividad hablan?
Eso no es ser inclusivos, se llama ser excluyente.

Las API son una pieza de software, que permite la comunicación otro software

gracias

DOM + JavaScript = Web API

Excelente recurso profe: https://caniuse.com/

Notas de la clase:
APIs Web

  • Una API ( Interfaz de Programación de Aplicación) es un software intermedio que permite comunicar fácilmente un software con otro.
  • Son una forma sencilla de acceder a información o funcionalidades de otro pedazo de softwate.
  • Es por eso que se les llama ‘’intermediarios’’ o ‘’puentes’’.
  • Una web API nos permite conectar el JS con el DOM para poder manejarlo (leer y modificar)
  • Actualmente existen más de 70 web APIs, DOM es solo una de ellas
  • Entre las web API tenemos:
    • Animaciones
    • Drag & Drop
    • Transmisión de video con web RTC
    • Manejo de videojuegos con open WebGL
    • Incluso pagos sin necesidad de otro servicio ( experimental)

El manejo de APIs

  • ¿Como lo uso?
    • MDN contiene bastante información acerca de las webs APIs
  • ¿Puedo usarlo?
    • No todas las webs API’s estarán soportadas por todos los navegadores entonces podemos usar caniuse
    • Chrome tiene bastante compatibilidad con nuevas APIs

API

las API´s son como puentes, pero no todos los navegadores soportan por igual los distintas API´s.

Siempre es bueno conocer a fondo las herramientas que se usan día con día

Importante, siempre vayan a la documentación para entender mejor lo que se está hablando.

El DOM es solo una de tantas WEB APIs
¿Qué es DOM?
Su función es conectar paginas web con scripts o lenguajes de programación.
¿Cómo lo hace?
Representando una estructura HTML en memoria, esa estructura es representada como un arbol logico, donde cada una de sus ramas es un nodo, los metodos del DOM permiten la programación de cualquiera de estos nodos con el fin de cambiar su estructura, configuración o estilo.
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Application Programming Interface, o API es simplemente un puente, una manera de conectar el DOM con JavaScript para así poderlo modificar de acuerdo a nuestras necesidades. Actualmente existen más de 70 Web APIs, siendo el DOM una de ellas. Entre las otros tipos de actividades que podemos hacer con las Web APIs nos encontramos:
.

  1. Animaciones
  2. Drag & Drop
  3. Manejo de Archivos
  4. Transmisión de Video con web RTC
  5. Manejo de videojuegos con OpenGL
  6. (Experimental) Incluso para manejo de pagos, sin necesidad de contar con librerias o servicios externos.
    .

Al momento de trabajar con una API siempre es buena idea revisar la documentación de MDN de Mozilla ya que aquí encontramos la información necesaria para desarrollar y utilizar estas librerias. A su vez siempre es bueno utilizar el sitio web caniuse para chequear si la Web API que queremos usar es soportada por todos los navegadores.

Dos herramientas fundamentales a considerar desde este momento.

Si escuchas de una nueva API para el DOM busca en google Como puedo usar esta API

También es posible modificar el CSSOM no? es decir cambiar valor de CSS o eso solo aplica al DOM? 🤔

Genial

<h4>Web APIs modernas</h4>

DOM + Javascript = Web API

API es un puente entre el DOM y JS para que podamos manipular el DOM usando JS.

Existen más de 70 APIs, el DOM es solo 1 de ellas.

Biblias del desarrollo web:

WEB API

API: Es un puente que permite conectar al DOM con Javascript, para que podamos manipularlo y modificarlo a nuestro antojo.

Aquí una explicación sobre las web api

Algunas notas y apuntes extras sobre el DOM

https://github.com/undefinedschool/notes-dom