citygame32

En este tema, primero obtendrá una descripción general de alto nivel sobre el empleo de las API REST. Luego, más adelante en el documento, una inmersión más profunda discutirá el código de ejemplo. El primer ejemplo utiliza el Analytics API para recuperar y enseñar en la barra de control del reproductor la cantidad de vistas que el vídeo que el jugador tiene actualmente tiene. El segundo ejemplo, un tanto más complejo, utiliza el Analytics API en conjunción con la Brightcove Player Catálogo para recuperar los videos más populares de una cuenta y mostrarlos en una lista de reproducción. La discusión del código en este documento se centrará en recobrar los datos deseados de la API REST adecuada.

Vista de alto nivel

Para usar las API REST necesita tener ciertas piezas en su lugar. En resumen, son:

• 
  Codigo del cliente: El código del cliente del servicio pide datos específicos y después los muestra según los requisitos de la aplicación. El código del usuario se tratará con determinada extensión en este documento, ya que es lo que necesitará redactar con más frecuencia.
• 
  Los servidores proxy: Por razones de seguridad, las API REST no aceptarán peticiones de datos directamente del usuario, puesto que eso alentaría el envío de información reservado, como credenciales del cliente, desde el cliente. Esto quiere decir que un proxy actuará como intercesor entre el cliente y la API REST. El proxy utilizado en los ejemplos está escrito en PHP y se examina más adelante en este documento. El proxy debe configurarse en un servidor bajo su control, y puede escribirse en el idioma de su elección. La configuración sugerida del proxy le deja ser escrita una vez y empleada por cualquiera de las API.
• 
  API REST: Brightcove provee un conjunto completo de API para personalizar, ampliar e integrar con el Brightcove plataforma. Ver eldocumento para más información.

El siguiente diagrama muestra la interacción entre las tres entidades centrales del proceso para recobrar datos de una de BrightcoveAPIs de REST:

Descripción de la funcionalidad del cliente

El código del lado del cliente cambia significativamente dependiendo de la API a la que pide los datos. Como se mencionó anteriormente, el proxy es una escritura una vez y no altera una parte del código, y las API se sostienen por Brightcove. Esta es la razón por la que el énfasis en el documento se centrará en aprender a alterar el código del cliente del servicio para recuperar los datos deseados de una de las API.

El siguiente diagrama se centra en las partes clave del código del cliente del servicio, que son:

• La función que hace que
  HTTPRequestal proxy. Para evitar la ambigüedad, la función tiene por nombre
  makeRequest(). Está representado en el lado derecho del diagrama a continuación.
• El código que reúne la información requerida para la petición. Está representado en la esquina superior izquierda del diagrama. Este código suele ser bastante fácil y usa conceptos bien conocidos aun para los programadores principiantes.
• La llamada que ejecuta el mencionado anteriormente
  makeRequest()función. Está representado en la esquina inferior izquierda del diagrama. La llamada pasa una función a
  makeRequest()como un parámetro. Entonces en
  makeRequest()Esa función lleva por nombre. Este es un ejemplo de un anónimo definido.
  llamar de vueltafunción.

Ves las 2 secciones en el diagrama etiquetado
Actividad asíncrona. Si bien se representa en el diagrama en dos lugares diferentes, esta es en realidad la misma actividad asincrónica, y representa el tiempo desconocido que requiere:

• El cliente del servicio para mandar la petición al proxy.
• El proxy para solicitar datos de la API.
• La API para edificar el conjunto de resultados y devolverlo al proxy.
• El proxy para devolver los datos al usuario.

Tenga en cuenta que las flechas de flujo lógico del cuadro que llama
makeRequest()(cuadro inferior izquierdo) parece indicar que el código se ejecuta en dos momentos diferentes, que es precisamente el caso. La llamada a la función se efectúa, mas la función de devolución de llamada no se ejecuta hasta
makeRequest()ha hecho su trabajo y se ejecuta la función de devolución de llamada, que devuelve los datos solicitados al código de llamada a la función.

Ejemplo de código paso a paso

En sitio de mirar el código como una sola pieza, será presentado y discutido en secciones. Ciertas secciones se relacionarán con el diagrama de arriba.

Código de jugador estándar

Esta sección de código contiene el código básico. Brightcove Player código de inserción en la página.

• Líneas once-21: Estándar Brightcove Player código con la adición de una
  idatributo agregado.

Preparándose para hacer una llamada

Esta sección de código inicializa las variables y se prepara para efectuar la llamada a
makeRequest(). En términos generales, para una petición de lectura deberá administrar la siguiente información:

1. La URL del proxy que va a usar, por servirnos de un ejemplo (por supuesto, debe ser un proxy bajo su control):
   

   
   			/bcls/bcls-proxy/doc-samples-proxy-v2.php
   		

   
   
2. La URL precisa para la petición real, por norma general construida dinámicamente:
   

   
   			/v1/alltime/accounts/ /videos/
   		

   
   
3. El método HTTP, por servirnos de un ejemplo
   GET.

Un ejemplo a continuación:

• Línea 1: código estándar para esperar hasta el momento en que el jugador esté listo para interactuar.
• Líneas 2-4: crea / establece valores para las variables necesarias más adelante en el código.
• Líneas 7-12: aguarde el
  loadstartevento con lo que el
  mediainfoobjeto se rellena. Asignar variables para sostener los valores precisos para el Analytics API punto final
• Línea 13: establece el método HTTP para la llamada.

Llamada
makeRequest()

Esta sección de código hace que la llamada a
makeRequest()función. Tenga presente que se pasan dos parámetros. El primero es el objeto de opciones que contiene información para el punto final, y el segundo es la función de devolución de llamada. Recuerde, esta es una llamada asíncrona, por lo que la función de devolución de llamada definida anónimamente no se ejecutará hasta el momento en que la API REST haya devuelto los datos a la
makeRequest()función.

• Línea 1: llamar al
  makeRequest()función, pasando los valores requeridos para la llamada en el
  optionsobjeto. En este caso, el objeto contiene lo siguiente:
  
  
• Líneas 3-13: la función de devolución de llamada se define como una función anónima (resaltada en amarillo). Recuerde que esta función es un parámetro y NO lleva por nombre aquí, sino más bien más adelante en el código.
• Líneas 6, ocho, 10:
  console.log()declaraciones que muestran:
  
  • La cadena JSON sin procesar que devuelve la llamada API.
  • El objeto JSON generado por el
    JSON.parse()método que hace la conversión de cadena a objeto.
  • Las vistas reales cuentan, extraídas del objeto a través de el empleo de simples
    object.propertynotación.
  
  
• Línea 12: llama a la función que muestra el número de vistas en la barra de control.

• La cadena JSON sin procesar que devuelve la llamada API.
• El objeto JSON generado por el
  JSON.parse()método que hace la conversión de cadena a objeto.
• Las vistas reales cuentan, extraídas del objeto mediante el empleo de simples
  object.propertynotación.

La siguiente captura de la consola muestra datos reales
console.logdeclaraciones:

Real
makeRequest()función

Esta sección del documento examina el código que realmente define el
makeRequest()función. El código que define la función está escrito de tal manera que NO necesita ser modificado, sino que se usa repetidamente tal como está. Usted emarketing esto no es true, pero para la gran mayoría de los usos, este código NO necesita modificarse.

Sigue una discusión línea por línea del código:

• Líneas 1-6: Definición de funciones y creación de variables. Un punto clave es que un nuevo
  XMLHttpRequestel objeto es creado
• Líneas 8, 26: define la función del controlador de acontecimientos para
  readyStatecambios.
• Líneas nueve, veintitres, 25: Use una
  try-catchen en el caso de que la solicitud falle en un nivel alto.
• Líneas diez, 11: uso
  ifdeclaraciones para cerciorarse de que la solicitud haya finalizado (
  readyStatees cuatro) y se completó con éxito, el estado está en el rango doscientos. A continuación, se muestra el registro de la consola del
  readyStatey
  statusvalores en la definición del controlador de eventos:
  
  
• Línea 18: la función de devolución de llamada se ejecuta. Esto pasa los datos devueltos de la API a la función de devolución de llamada como se especifica en el
  Llamar a makeRequest ()la sección de arriba.
• Line 33: establece el supervisor de eventos para el
  XMLHttpRequest.onreadystatechangeevento.
• Línea 35: Inicializa la solicitud al proxy.
• Línea 38: envía la solicitud, que es asincrónica.

Mostrar los datos devueltos

Este código muestra cómo poner los datos devueltos en la barra de control. Esta función se llama al final de la función de devolución de llamada, que se muestra en
Llamar a makeRequest ()la sección de arriba.

• Líneas cinco, 16: define la función.
• Línea 6: crea una variable para
  spacerelemento en la barra de control.
• Line 7: crea dinámicamente un
  divelemento.
• Línea 9: Ponga una etiqueta y el valor de las vistas en el recién creado
  divelemento.
• Línea 11: use JavaScript
  document.getElementsByClassName()método para obtener la barra de control
  spacerelemento.
• Línea 13: estilo el
  spacerpara enseñar el total de vistas justificadas a la derecha y cara abajo 10px desde la parte superior de la
  spacer.
• Línea 15: añada el elemento recién creado, poblado y estilo al
  spacer.

Completar el listado de códigos

El código completo y funcional se encuentra en este repositorio de GitHub:.

Depuración simple

Como puede ver, hay varias piezas involucradas al utilizar las API REST. Esto puede presentar desafíos cuando una aplicación no funciona correctamente. ¿Dónde empiezas a depurar?

En esta sección se hacen dos sugerencias simples y son un excelente lugar para iniciar su aventura de depuración. Las siguientes dos secciones le ofrecen una forma de ver la información más básica que necesita, qué se transmite para efectuar la llamada y qué se devuelve.

Comprobando las opciones de llamada

El código del lado del cliente del servicio que se examina en este documento debe ver básicamente con proporcionar las opciones adecuadas que se utilizarán con el proxy y, a su vez, la API real. Por lo tanto, saber que las opciones son adecuadas es esencial para el adecuado funcionamiento de su código. Una forma fácil de hacer esto es registrar en la consola el
optionsobjeto justo antes que pasen a la
makeRequestFunción donde se utilizan:

Lo que contiene el objeto de opciones variará según lo que intente hacer, pero siempre y en todo momento habrá algunos conceptos básicos, que son:

• El ID de la cuenta. Esto puede ser una propiedad separada o parte de la URL del punto y final de la API.
• La URL del proxy, que dependerá de dónde almacene su proxy.
• El género de método HTTP, por ejemplo
  GET,
  POSTor
  PATCH.
• La URL de punto y final de API empleada por el proxy para realizar la solicitud real desde la API. Por ejemplo:
  

  
  			/v2/accounts/ /players/playback/v1/accounts/ /videos/ /v1/alltime/accounts/ /videos/
  		

  
  

Es posible que se requieran otras propiedades en el objeto de opciones en dependencia de la solicitud de API. Este es un caso de lo que vería en la consola al registrar el objeto de opciones para realizar una petición para todos y cada uno de los jugadores en una cuenta específica:

Aquí hay un objeto de opciones registradas un poco más complejo que se usa al actualizar jugadores:

Viendo los datos devueltos

Lo que se devuelve variará según los datos que haya solicitado, y si se devuelve un fallo. Pero con independencia de lo que se devuelva, lo más probable es que desee ver qué datos se devuelven. Una forma fácil de hacer esto es registrar en la consola el raw
responsedatos justo después de la llamada a la
makeRequestfunción:

Lo que se devolverá tiene posibilidades casi infinitas, mas a continuación existen algunos ejemplos. El primero muestra el inicio de una contestación cuando se solicita a todos los jugadores en una cuenta:

Aquí está la respuesta después de actualizar los jugadores, utilizando el
PATCHMétodo HTTP:

Aquí hay una vista con un formato más agradable de los datos en la primera respuesta:

Y finalmente, aquí hay una contestación muy valiosa de cuando ocurrió un error. agencia marketing online huesca este caso, se estaba utilizando una cuenta sin las credenciales adecuadas:

Otros consejos para solventar problemas

Si tiene problemas, aquí hay otras cosas que debe buscar.

• Verifique la referencia de la API para asegurarse de que la petición devuelva una contestación. Ciertos solo devuelven una contestación doscientos uno o bien 204 sin contenido (en especial, pero no solo, las solicitudes DELETE). Tendrá que ajustar su código para manejar este caso.
• Verifique la sección Red de las Herramientas de desarrollo en su navegador para cerciorarse de que ve una llamada exitosa al proxy (ese servidor podría no estar libre provisionalmente):
  
  Sección de red de herramientas para desarrolladores
  
  

• Vea el elemento anterior: procurar analizar una cadena vacía generará una excepción JSON
• 
  

  Mire la contestación y asegúrese de que sea una cadena JSON (que empieza con una
  o una
  [). Hay algunos casos en los que una solicitud podría no devolver JSON: un Analytics API llame, por poner un ejemplo, si configura el
  formatparámetro para
  csvor
  xlxs. De nuevo, si realiza ese género de peticiones, deberá ajustar su código para manejar contestaciones que no sean JSON. seo manager /p>
  

• En la mayoría de los casos, los errores devueltos por las API también están en formato JSON, mas hay algunas salvedades donde el fallo se devuelve como texto sin formato o HTML.

Mire la respuesta y asegúrese de que sea una cadena JSON (que empieza con una
o una
[). Hay algunos casos en los que una solicitud podría no devolver JSON: un Analytics API llame, por poner un ejemplo, si configura el
formatparámetro para
csvor
xlxs. De nuevo, si efectúa ese tipo de peticiones, deberá ajustar su código para manejar respuestas que no sean JSON.

Código proxy

Como se mencionó previamente, el proxy se puede redactar en el idioma de su elección. los Brightcove Los ejemplos de documentación de la API usan un proxy escrito en PHP. Dado que la implementación del proxy es tan dependiente del idioma, el código PHP a continuación no se analizará en detalle en este documento.

La funcionalidad básica proporcionada por un proxy debe incluir:

1. Aceptar la solicitud del cliente
2. conseguir una
   token de autenticacióndel OAuth API.
3. Envíe el token de autenticación y la petición de datos (punto y final) a la API deseada.
4. Reciba datos de API.
5. Enviar datos de vuelta al cliente.

Aunque el código completo para el servidor proxy se muestra arriba, también se halla en el repositorio de GitHub:en el objeto
phpcarpeta.

ejemplo 2

Este segundo ejemplo es más complejo que el detallado previamente. Este caso de ejemplo muestra los videos diez más populares de una cuenta en una lista de reproducción. Los principales pasos del código son:

1. Solicitud del Analytics API Los vídeos 10 con la mayor cantidad de vistas en una cuenta. Este paso implica una llamada asíncrona a través de una función de devolución de llamada.
2. De la vuelta Analytics API datos, extraiga solo las ID de video y colóquelas en una matriz. Se escribe una función socorrer para efectuar la extracción de ID de los datos devueltos.
3. Solicite los objetos de video completos para cada uno de los videos en la lista de ID de la matriz. Este paso implica recorrer el conjunto y solicitar que los objetos de vídeo usen
   player.catalog.getVideo(). Por supuesto, esto implica múltiples llamadas asincrónicas usando el
   catalog. Se escribe una función socorrer para recuperar los objetos de vídeo basados ​​en ID y colocar los objetos en una matriz.
4. Coloque la matriz de objetos de vídeo en la lista de reproducción para un reproductor habilitado para lista de reproducción.

Como ahora está familiarizado con muchos de los conceptos y códigos específicos sobre cómo llamar a las API, solo el código que llama al
makeRequest()la función es detallada.

• Línea 2: llamar al
  makeRequest()función que pasa como razonamientos las opciones necesarias para una triunfante llamada a la API REST, junto con una función de devolución de llamada definida anónimamente (destacada en amarillo). Esto debería sonarle familiar desde arriba. Fundamental, el
  makeRequest()función que tiene por nombre ES LA MISMA FUNCIÓN EXACTA UTILIZADA EN EL EJEMPLO ANTERIOR. Puedes hacer lo mismo en tu código. los
  makeRequest()La función fue escrita para ser vuelta a utilizar con cualquier llamada a un Brightcove API REST.
• Línea 3: crea una variable para contener los datos devueltos analizados por JSON.
• Línea 5: examina los datos devueltos para convertir si de una cadena a un objeto.
• Línea 7: use la función de ayuda para extraer las ID de video de los datos devueltos. Desafortunadamente, el Analytics API no devuelve los objetos de video completos, por lo que se necesitan ID para acceder a los objetos completos.
• Líneas nueve-12: llame al
  getVideoDatafunción de ayuda que utiliza una función de devolución de llamada para poblar el
  videoObjectsmatriz basada en ID pasados.
• Línea 11: llena la lista de reproducción con la matriz de objetos de vídeo.

Completar el listado de códigos

El ejemplo completo de funcionamiento se halla en este CodePen:.