Web APIs modernas

3/28
Recursos

Aportes 37

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

驴Qu茅 rayos son las API?

Puede parecernos un concepto muy abstracto o confuso al principio, ya que como dice el profesor 鈥樷檒o 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 鈥樷檌ntermediarios鈥欌 o 鈥樷檖uentes鈥欌.

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鈥檚 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鈥檚, 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鈥檚
.
Can I Use es otra excelente p谩gina para saber la compatibilidad de los navegadores con las API鈥檚 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鈥檚 pueden ser vistas como puentes, pero esa metafora puede llegar a ser ambigua.
.
Una manera de verlo mas facil es ver a las API鈥檚 como el 鈥減lug 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鈥檚?
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

驴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鈥檚 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.

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

Veo excesivo el termino 鈥渂iblia鈥 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 鈥渋nclusivos鈥 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.

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 鈥樷檌ntermediarios鈥欌 o 鈥樷檖uentes鈥欌.
  • 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鈥檚 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