Advertisement
  1. Web Design
  2. HTML/CSS
  3. HTML

Usando la API Webinar de Citrix en WordPress

Scroll to top
Read Time: 20 min

() translation by (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

¿Alguna vez ha usado GoToWebinar de Citrix? ¿No? No te preocupes, no estás solo. Sin embargo, ¿alguna vez has intentado vincular algún servicio a WordPress? MailChimp, Mad Mimi, PayPal, Twitter? Si bien estos servicios difieren en muchos aspectos específicos, la idea general de cómo podemos incorporar datos de API externas a WordPress es la misma. En este artículo exploraré esto a través de los ojos de un ejemplo de integración con GoToWebinar de Citrix.

¿Qué es GoToWebinar?

GoToWebinar le permite programar eventos de transmisión web en vivo donde la audiencia y los presentadores se unen a una interfaz de usuario común. Los presentadores pueden compartir diapositivas, su pantalla, sus cámaras web y hacer todo tipo de cosas interesantes.

El servicio ha existido durante un tiempo, por lo que sucedió lo inevitable: ahora tiene una API, y una muy buena.

En un proyecto reciente que dirigí, queríamos mantener los registros en el sitio, y también queríamos que los datos de los registrantes estuvieran disponibles en WordPress. Sin la API, esto simplemente no es posible. Por defecto, cada seminario web tiene un enlace de registro que lo lleva fuera del sitio al sistema GoToWebinar, donde los usuarios se registran. Funciona bien, pero no queríamos confundir a los usuarios con este salto repentino.

¡Pensé en guiarte a través del proceso de cómo logramos algo de esto usando sorprendentemente poco código!

Antes de que Comencemos

Antes de sumergirse en el abismo, necesitará un par de cosas. Debe tener una cuenta de GoToWebinar, y también debe iniciar sesión en el Centro de desarrolladores con su cuenta. Una vez allí, haga clic en el botón grande Agregar una nueva aplicación.

Siga las instrucciones en pantalla y complete todos los campos, asegurándose de seleccionar que está creando una aplicación GoToWebinar. Para la URL de la aplicación, asegúrese de usar https://api.citrixonline.com. Deberá cambiar esto cuando use OAuth, pero en nuestros ejemplos usaremos autenticación de inicio de sesión directo, lo que hace que esta URL sea la mejor opción.

Logging InLogging InLogging In

Una vez que se haya creado su aplicación, anote la clave de consumidor. Usaremos esto más adelante en nuestras llamadas a la API. De lo contrario, eso es todo para la configuración, así que ahora es el momento de ensuciarse las manos.

Cómo trabajar con API REST

Actualmente, las API en su mayoría siguen las pautas REST, que significa Transferencia de Estado Representacional. Sin entrar en el meollo de la cuestión, se reduce a una interfaz simple con la que puede comunicarse de una manera muy natural.

Como mencioné, cada API es diferente en sus especificaciones, pero la forma general en que las usamos es más o menos la misma:

  1. Necesitamos autenticar nuestra aplicación de alguna manera.
  2. Utilizamos llamadas HTTP para recuperar / enviar datos.
  3. Almacenamos o usamos los datos recuperados en nuestra propia aplicación.

Es realmente así de simple. Si ha intentado leer la documentación de PayPal desde cero (lo cual es horrible), es posible que haya tenido la impresión de que trabajar con API es un proceso terriblemente agotador. Creo que parte de la confusión proviene de la dificultad de la autenticación y el hecho de que los desarrolladores que solo están familiarizados con PHP no están realmente acostumbrados a las llamadas HTTP que generalmente se representan sin ningún código PHP al lado. Vamos a aclarar todo eso, ¿de acuerdo?

Hacer llamadas HTTP con WordPress

Un requisito previo para todo lo que estamos a punto de hacer es hacer llamadas HTTP correctamente. La mayoría de las veces verá tutoriales usando CURL o solo HTTP sin formato, pero WordPress nos tiene cubiertos (como de costumbre) con su API HTTP.

Como las llamadas HTTP pueden tener varias partes diferentes, pensé que sería una buena idea profundizar un poco más en esto. Veamos muy brevemente qué es realmente una solicitud HTTP.

Una solicitud HTTP se envía a una URL específica, y aquí es de donde provienen los puntos finales API y las rutas específicas. Por ejemplo, la URL en la documentación de GoToWebinar para obtener todos los registrantes para un seminario web es:

1
https://api.citrixonline.com/G2W/rest/organizers/{organizerKey}/webinars/{webinarKey}/registrants

Incluso si tiene su clave de organizador e ID de seminario web reales, usar la URL no es suficiente. Una solicitud HTTP es más que solo una URL. Contiene un montón de otra información, principalmente una serie de encabezados y tal vez incluso un cuerpo.

Esto es bastante fácil de entender cuando recibe datos. Cada vez que visita un sitio web, su navegador emite una solicitud y recibe una respuesta HTTP. La respuesta no es solo el sitio web que ve ante usted. Contiene una serie de encabezados, como el código de estado, por ejemplo, que probablemente sea 200 OK. El código que el navegador interpreta y muestra para usted se envía en el cuerpo de la respuesta.

Debido a esto, la documentación entra en más detalles: da un ejemplo de solicitud HTTP:

1
GET https://api.citrixonline.com/G2W/rest/organizers/7913299991555673093/webinars/2575999967611407361/registrants HTTP/1.1 Accept: application/json Content-Type: application/json Authorization: OAuth oauth_token=hdKAifAke73JTJR5GABCdByGz4kp

Este desorden de cuerdas en realidad no es tan difícil de descifrar. Incluso si no comprende qué es todo, puede crear esta solicitud con bastante facilidad con las funciones nativas de WordPress.

Todo comienza con GET, lo que significa que será una solicitud de obtención. WordPress ofrece la función wp_remote_get (), que funcionará bien. Esto es seguido por la URL, que pasaremos como el primer parámetro para esta función. A continuación, vemos la versión HTTP, que se puede establecer en el segundo argumento, que es una matriz de opciones.

Todo después es un encabezado. El valor del encabezado Accept es application/json, el valor del encabezado Content-Type es application/json y así sucesivamente. Con esta información en mente, elaboremos nuestra solicitud HTTP en WordPress:

1
$url = 'https://api.citrixonline.com/G2W/rest/organizers/7215599994255673093/webinars/2575945029611407361/registrants';
2
$args = array(
3
    'httpversion' => '1.1',
4
    'headers' => array(
5
        'Accept' => 'application/json',
6
        'Content-Type' => 'application/json',
7
        'Authorization' => 'OAuth oauth_token=hdKAifAke73gh885ghJTJR5GA4kp'
8
    )
9
);
10
11
$http_request = wp_remote_get( $url, $args );

Si bien este es un ejemplo específico que veremos con más detalle pronto, el punto clave es este: las solicitudes HTTP no son tan intimidantes. Por lo general, debe establecer una URL, algunos encabezados y, en algunos casos, un cuerpo, y eso es todo. Luego recibe algunos datos, generalmente en forma JSON, que puede ejecutar a través de json_decode() y luego usarlos como una matriz u objeto normal.

Ahora que conocemos la estructura básica de una solicitud HTTP, descubramos cómo autenticarnos y poder realizar las llamadas que queramos.

Autenticando Nuestra Aplicación Citrix

En este ejemplo, veré el método de autenticación de inicio de sesión directo. El flujo para OAuth es un poco más complejo, pero los conceptos básicos son los mismos: solo necesita hacer dos llamadas HTTP en lugar de una.

Dicho esto, recomiendo usar OAuth porque es más seguro y cada vez más API lo están integrando, ¡o incluso lo requieren!

La documentación para el inicio de sesión directo deja muy claro lo que queremos lograr. De hecho, lo que noté en mi propia programación es que cuando descubrí cómo se pueden hacer fácilmente las solicitudes HTTP, encontré que toda la documentación de la API era mucho más fácil de comprender. ¡Esperemos que este artículo haga lo mismo por ti!

De acuerdo con la documentación, podemos hacer una llamada GET a https://api.citrixonline.com/oauth/access_token con los encabezados de Accept y Content-Type adecuados, además de establecer los parámetros de URL grant_type, user_id y password, y GoToWebinar lo hará escupir nuestras credenciales de autenticación. Probemos eso ahora:

1
$url = 'https://api.citrixonline.com/oauth/access_token?grant_type=password&user_id=myaccount@email.com&password=mysecretpass&client_id=mycitrixapikey';
2
$args = array(
3
    'headers' => array(
4
        'Accept' => 'application/json',
5
        'Content-Type' => 'application/json'
6
    )
7
);
8
9
$http_request = wp_remote_get( $url, $args );

Tenga en cuenta que los valores de todos estos parámetros son falsos. Deberá utilizar el user_id (correo electrónico) y la contraseña de una cuenta real de GoToWebinar. Client_id debe ser la "Clave del consumidor" de su aplicación, que configuramos en la sección "Antes de comenzar" de arriba.

Si usa var_dump() para mostrar el contenido de la variable $http_request, encontrará que es una matriz que consta de varios miembros como "encabezados", "cuerpo", "respuesta", etc. Para nuestros propósitos, el "cuerpo" contiene la información más importante:

body section of vardumpbody section of vardumpbody section of vardump

Como bien habrá notado, esta es una cadena JSON que necesitaremos convertir a una forma utilizable. Ejecutarlo a través de json_decode() nos dará una matriz PHP adecuada si establecemos el segundo parámetro en verdadero (de lo contrario, será una matriz).

1
$body = json_decode( $http_request, true );

De todos estos datos, necesitará dos cosas: access_token y organizer_key. El token de acceso es su "contraseña temporal". La idea es evitar la necesidad de enviar su contraseña actual con cada solicitud: solicita un token de acceso temporal con sus credenciales solo una vez, luego lo usa para "firmar" cada solicitud posterior.

Volvamos a nuestro ejemplo de la sección Llamadas HTTP, y quizás el ejemplo sea ahora mucho más claro. Aquí está el mismo código con marcadores de posición para toda la información que tenemos ahora:

1
$organizer_key = '2893726';
2
$webinar_id = '849927254829281838';
3
$access_token = 'h7dwo20vAsXI8GLaGvun0wOJ6H5I';
4
5
$url = "https://api.citrixonline.com/G2W/rest/organizers/$organizer_key/webinars/$webinar_id/registrants";
6
$args = array(
7
    'httpversion' => '1.1',
8
    'headers' => array(
9
        'Accept' => 'application/json',
10
        'Content-Type' => 'application/json',
11
        'Authorization' => "OAuth oauth_token=$access_token"
12
    )
13
);
14
15
$http_request = wp_remote_get( $url, $args );

El webinar_id allí proviene de un seminario web real que he creado en GoToWebinar, y puede encontrar la ID en la URL al final. En esta etapa, debería estar claro de dónde provienen los datos, pero en el ejemplo todavía está esencialmente codificado, ¡aclaremos eso de inmediato!

Almacenar Datos de Autenticación

¿Necesitamos almacenar datos de autenticación y caduca? Sí y sí, y dado que la palabra "caducar" se usó junto con "almacenar", estamos hablando de una situación transitoria aquí, así que ingrese la API de transitorios.

Si no tienes ni idea de qué es, ¡no te preocupes! Es bastante sencillo, te permite almacenar cosas usando funciones de WordPress que disponen de un sello del tiempo que indica en qué momento expiran los datos. Escribamos nosotros mismos una mini clase para poder gestionar la creación de un sencillo token de acceso. Esto puede asustar al principio, pero es muy sencillo, ¡sigue la explicación!

1
class Citrix_WP {
2
3
    var $client_id;
4
    var $password;
5
    var $user_id;
6
    var $access;
7
8
    function __construct() {
9
10
        $this->client_id = 'sI48T4iXP0J6720G9wAB0Ghfg37576301';
11
        $this->user_id = 'email@email.com';
12
        $this->password = 'superpassword';
13
14
15
        $this->access_field = 'citrix_access';
16
17
        $this->set_access();
18
        
19
    }
20
21
    function set_access() {
22
        
23
        $access = $this->get_access();
24
        $this->access = $access;
25
        
26
    }
27
28
29
    function get_access() {
30
        
31
        $access = get_transient( $this->access_field );
32
33
        if ( empty( $access ) ) {
34
            
35
            $access = $this->request_access();
36
            $this->set_access_transient( $access );
37
            
38
        }
39
40
        return $access;
41
42
    }
43
44
    function set_access_transient( $access ) {
45
        
46
        set_transient( $this->access_field, $access, DAY_IN_SECONDS );
47
        
48
    }
49
50
    function request_data( $url, $args = array() ) {
51
        
52
        $defaults = array(
53
            'httpversion' => '1.1',
54
            'headers' => array(
55
                'Accept' => 'application/json',
56
                'Content-Type' => 'application/json',
57
                'Authorization' => 'OAuth oauth_token=' . $this->access[ 'access_token' ]
58
            )
59
        );
60
        
61
        $args = wp_parse_args( $args, $defaults );
62
        $http_request = wp_remote_get( $url, $args );
63
        $body = json_decode( $http_request[ 'body' ], true );
64
65
        if ( ! empty( $body[ 'int_err_code' ] ) ) {
66
            
67
            $this->get_access();
68
            $this->request_data( $url, $args );
69
            
70
        } else {
71
            
72
            return $body;
73
            
74
        }
75
76
    }
77
78
    function request_access() {
79
        
80
        $url = 'https://api.citrixonline.com/oauth/access_token?grant_type=password&user_id=' . $this->user_id . '&password=' . $this->password . '&client_id=' . $this->client_id;
81
        $args = array(
82
            'headers' => array(
83
                'Accept' => 'application/json',
84
                'Content-Type' => 'application/json'
85
            )
86
        );
87
88
        $result = wp_remote_get( $url, $args );
89
        
90
        return json_decode( $result[ 'body' ], true );
91
92
    }
93
94
}

¿Qué diablos está pasando aquí?! Hay una simple explicación, queremos escribir la menor cantidad de código posible cuando gestionemos las solicitudes HTTP. Ya sabemos que necesitamos un token de acceso para cada una y que ese token expire en algún momento. Así que para cada una de las llamadas que realicemos, necesitaremos comprobar si el token de acceso es válido. Si no lo es, necesitaremos solicitar uno nuevo y rehacer la llamada original. Esta clase se ocupa de todo esto.

En la función constructora, que se ejecuta tan pronto como un objeto es instanciado, yo mismo he escrito el código de mi client_id, user_id y password. En realidad es una buena idea usar constantes e incluso pasarlas a la función constructora, pero he pensado que lo haré autocontenedor para este tutorial.

Una cosa más que necesitamos es un lugar para almacenar las credenciales de acceso que recibimos de Citrix. Yo estaré usando un transitorio, y su nombre será “citrix_access”. He almacenado el nombre de este campo como propiedad de la clase. Por último, ejecutamos el método set_access().

Esto nos asegura que disponemos de credenciales válidas y las almacena en la propiedad access para acceder fácilmente. ¿Cómo se asegura de que todo es válido? Usa el método get_access(). Este método recupera las credenciales de acceso de nuestro transitorio. Si el transitorio no está vacío, devuelve el valor del mismo. Si el transitorio está vacío, usa el método request_access() para obtener nuevas credenciales de Citrix, establece el valor del transitorio a las nuevas credenciales, y lo devuelve también.

En este momento tenemos disponibles nuestras credenciales de acceso, así que podemos empezar ha realizar solicitudes. Existe otro asunto: las credenciales del lado de Citrix podrían haber expirado por razones de seguridad. Si ese es el caso, nuestras solicitudes volverán con un error. Debido a esto, he añadido un método request_data() que puede gestionar esto por nosotros.

Este método contiene casi el mismo código que escribimos antes, usando las propiedades de la clase para rellenar la solicitud. Ten en cuenta que he añadido algunas cabeceras como predefinidas. Estas probablemente no cambien de una llamada a otra, eliminando la necesidad de pasar argumentos en la mayoría de los casos.

Además, el método comprueba la respuesta del body. Si contiene un error de código, genera nuevas credenciales de acceso y vuelve a llamar al método con los mismos parámetros.

Usar nuestra nueva clase

Aquí es donde nuestro trabajo tiene resultados. Para recopilar una lista de usuarios registrados, aquí tienes todo lo que necesitamos hacer:

1
$citrix = new Citrix_WP;
2
3
$registrants = $citrix->request_data( 'https://api.citrixonline.com/G2W/rest/organizers/' . $citrix->access[ 'organizer_key' ] . '/webinars/849927252521582337/registrants');

No necesitamos añadir ningún argumento, solo la URL y recibiremos todos los jugosos datos de vuelta desde Citrix.

Una nota de advertencia: la clase que he escrito es una rápida clase de demostración. A mí me funciona bien ahora mismo, pero no recomiendo su uso tal cual en producción. Aquí tienes algunos problemas:

  • Como he mencionado, los datos están introducidos en forma de código en la función constructora. Deberías pasar estas a la clase cuando la instancies, o quizá usar constantes.
  • El comprobador de errores en la función request_data no es genial. Si la solicitud falla por cualquier otra razón a un token invalido, podrías caer en un bucle infinito.
  • Ahora mismo, la clase es muy específica para la plataforma (usa transitorios directamente). En realidad querrías escribir el código en una interfaz.

Como ejemplo de un caso concreto, está bien, pero ten cuidado con los errores al usarlo.

Una clase de terceros

Como siempre, alguien ha sido lo suficientemente gentil como para crear una clase que podemos usar y que es mucho más completa que la que acabo de mostrarte como caso de estudio. Teodor Talov escribió una clase contenedora (Wrapper Class) para la API de citrix que está disponible vía GitHub.

Voy a estar usando su clase para interactuar con GoToWebinar a partir de ahora. Para conseguir lo mismo que hicimos antes, necesitarás algunos preparativos y algunas líneas de código. En primer lugar, usar la clase es mucho más fácil si la obtienes a través de Composer. Composer es superfácil de instalar si todavía no lo tienes, sigue la Guia de inicio y vuelve a reencontrarte conmigo aquí de nuevo en cinco minutos.

Usa la terminal o la línea de comandos para dirigirte al directorio de tu plugin y escribe el siguiente comando:

1
composer require teodortalov/citrix

Esto tomará los archivos que necesitas y los pondrá en el directorio del proveedor. A continuación, debes incluir dentro de tu plugin el archivo de autocarga de la siguiente manera:

1
include( plugin_dir_path( __FILE__ ) . '/vendor/autoload.php' );

Esto es para la preparación, así que ahora podemos usar la clase. Aquí tenemos un fragmento que extraerá los webinars desde Citrix.

1
$client = new \Citrix\Authentication\Direct( 'sI48T4iXP0J6720G9wAB0GHIHiIoyw20' );
2
3
$client->auth( 'nick@bitesizebio.com', 'gnasher1' );
4
5
$goToWebinar = new \Citrix\GoToWebinar( $client );
6
7
$webinars = $goToWebinar->getUpcoming();

Así de fácil, ¿cierto? Con esta clase más potente en tu cinturón de herramientas, ¡construyamos algo chulo! Parte de nuestro plan era usar tipos de entradas personalizadas para almacenar webinars que queremos listar en nuestro sitio. Todo lo que necesitamos en un campo meta que almacene el ID del webinar de Citrix y todo lo demás lo podemos extraer desde Citrix, por ejemplo: los usuarios registrados. ¡Creemos ahora mismo una caja meta que liste los usuarios registrados!

Listar los usuarios registrados en una caja meta

Solucionemos lo referente al núcleo de WordPress primero: la caja meta en sí. Aquí tienes algo de código que mostrará una caja meta vacía con un bonito título:

1
function my_registrants_metabox() {
2
    
3
    add_meta_box(
4
        'webinar_registrants',
5
        'Registrants',
6
        'my_registrants_metabox_content',
7
        'webinar'
8
    );
9
    
10
}
11
12
function my_registrants_metabox_content( $post ) {
13
    
14
    // Here be metabox content.
15
    
16
}

Por supuesto necesitarás una entrada personalizada con el nombre “webinar" para mostrar esto. Si necesitas leer más sobre esto, tenemos una útil guía sobre la creación de entradas personalizadas.

A mí me gusta crear un pequeño prototipo en HTML de lo que pretendo que sea el resultado final, así que simplemente hagámoslo. Con datos ficticios pero una interfaz de usuario real. Pretendo usar Datatables, un plugin jQuery, así que vamos a encolar también los scripts y los estilos necesarios. Aquí lo tienes:

1
function my_backend_assets() {
2
    
3
    wp_register_script(
4
        'datatables', 
5
        '//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js', 
6
        array(
7
            'jquery', 
8
            'customselect'
9
        ), 
10
        '1.0', 
11
        true 
12
    );
13
14
    wp_register_style(
15
        'datatables', 
16
        '//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css'
17
    );
18
19
    wp_enqueue_script( 
20
        'my-app', 
21
        plugin_dir_path( __FILE__ ) . '/js/app.js', 
22
        array( 'datatables' ), 
23
        '1.0', 
24
        true
25
    );
26
27
}
28
29
30
function my_registrants_metabox() {
31
    
32
    add_meta_box(
33
        'webinar_registrants',
34
        'Registrants',
35
        'my_registrants_metabox_content',
36
        'webinar'
37
    );
38
    
39
}
40
41
function my_registrants_metabox_content( $post ) {
42
43
    wp_enqueue_script( 'datatables' );
44
    wp_enqueue_style( 'datatables' );
45
    
46
    ?>
47
    <div class="my-data-table">
48
        <table data-order=\'[[ 3, "desc" ]]\'>';
49
            <thead>
50
                <tr>
51
                    <th>First Name</th>
52
                    <th>Last Name</th>
53
                    <th>Email</th>
54
                    <th>Date</th>
55
                    <th>Zone</th>
56
                </tr>
57
            </thead>
58
            <tbody>
59
                <tr>
60
                    <td>Daniel</td>
61
                    <td>Pataki</td>
62
                    <td>lolz@stillnotmyemail.com</td>
63
                    <td>2015-08-12</td>
64
                    <td>New York</td>
65
                </tr>
66
                <tr>
67
                    <td>Someone</td>
68
                    <td>Else</td>
69
                    <td>anotherpeep@mail.com</td>
70
                    <td>2015-08-13</td>
71
                    <td>Paris</td>
72
                </tr>
73
            </tbody>
74
        </table>
75
    </div>
76
    <?php
77
    
78
}

Esto creará el marcado que necesitamos y encolará los estilos. Todo lo que necesitamos hacer es crear js/app.js en nuestro plugin con el siguiente contenido:

1
(function( $ ){
2
3
    $( document ).ready( function( $ ) {
4
        $( '.my-data-table table' ).DataTable();
5
    });
6
7
})( jQuery );

El resultado debería tener un aspecto similar a la siguiente captura de pantalla.

RegistrantsRegistrantsRegistrants

No es super-bonito, pero lo solucionaré encolando otra hoja de estilo y sobreescribiré algunos de los estilos predeterminados impuestos por Datatables. El siguiente paso consiste en recoger datos de Citrix en lugar de simularlos.

Nuevamente he decidido usar transitorios para asegurarme de no bombardear Citrix con solicitudes cada vez que una página de edición de un webinar sea visualizada. Recogeremos la lista de usuarios registrados y los almacenaremos en un transitorio con un periodo de caducidad de una hora. Esto significa que la lista solo se refrescara cada hora, pero reducirá también nuestras solicitudes a una por hora en lugar de una por visita.

También necesitamos usar un campo meta para el ID del webinar. Yo uso normalmente Advanced Custom Fields, pero dado que este es un simple ejemplo, usemos simplemente la opción de campos personalizados predeterminado de WordPress y almacenemos un ID de webinar en él con la clave webinar_id. Aquí tienes el código final:

1
function my_backend_assets() {
2
3
    wp_register_script(
4
        'datatables',
5
        '//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js',
6
        array(
7
            'jquery',
8
            'customselect'
9
        ),
10
        '1.0',
11
        true
12
    );
13
14
    wp_register_style(
15
        'datatables',
16
        '//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css'
17
    );
18
19
    wp_enqueue_script(
20
        'my-app',
21
        plugin_dir_path( __FILE__ ) . '/js/app.js',
22
        array( 'datatables' ),
23
        '1.0',
24
        true
25
    );
26
27
    wp_register_style(
28
        'my-datatables',
29
        plugin_dir_path( __FILE__ ) . '/css/my-datatables.css'
30
    );
31
32
}
33
34
35
function my_registrants_metabox() {
36
37
    add_meta_box(
38
        'webinar_registrants',
39
        'Registrants',
40
        'my_registrants_metabox_content',
41
        'webinar'
42
    );
43
44
}
45
46
function my_registrants_metabox_content( $post ) {
47
48
    wp_enqueue_script( 'datatables' );
49
    wp_enqueue_style( 'datatables' );
50
    wp_enqueue_style( 'my-datatables' );
51
52
    $webinar_id = get_field( 'webinar_id', $post->ID );
53
    $registrants = get_transient( 'registrants_' . $webinar_id );
54
55
    if ( empty( $registrants ) ) {
56
57
        $client = new \Citrix\Authentication\Direct( 'consumer_key' );
58
        $client->auth( 'user_id', 'password' );
59
        $goToWebinar = new \Citrix\GoToWebinar( $client );
60
        $webinars = $goToWebinar->getRegistrants( $webinar_id );
61
        set_transient( 'registrants_' . $webinar_id, $registrants, HOUR_IN_SECONDS );
62
63
    }
64
65
    if ( count( $registrants ) > 0 ) {
66
        
67
        echo '<div class="my-data-table">';
68
            echo'<table data-order=\'[[ 3, "desc" ]]\'>';
69
                echo '<thead>';
70
                    echo '<tr>';
71
                        echo '<th>First Name</th>';
72
                        echo '<th>Last Name</th>';
73
                        echo '<th>Email</th>';
74
                        echo '<th>Date</th>';
75
                        echo '<th>Zone</th>';
76
                    echo '</tr>';
77
                echo '</thead>';
78
                echo '<tbody>';
79
        
80
                    foreach ( $registrants as $registrant ) {
81
                        
82
                        $time_zone = explode( '/', $registrant[ 'timeZone' ] );
83
                        
84
                        echo '<tr>';
85
                            echo '<td>' . $registrant[ 'firstName' ] . '</td>';
86
                            echo '<td>' . $registrant[ 'lastName' ] . '</td>';
87
                            echo '<td>' . $registrant[ 'email' ] . '</td>';
88
                            echo '<td class="date">' . date( 'Y-m-d', strtotime( $registrant[ 'registrationDate' ] ) ) . '</td>';
89
                            echo '<td>' . str_replace( '_', ' ', $time_zone[ 1 ] ) . '</td>';
90
                        echo '</tr>';
91
                        
92
                    }
93
                
94
                echo '</tbody>';
95
            echo '</table>';
96
        echo '</div>';
97
        
98
    }
99
100
}

Aquí han sucedido un par de cosas. La primera de ellas, he añadido una nueva hoja de estilos, solo para añadir algún distintivo visual a la lista que ves en la captura de pantalla de aquí abajo.

Después he intentado obtener la lista de usuarios registrados de los transitorios. Si esto me devuelve vacío, significa que o bien el transitorio nunca estuvo establecido, o que ha expirado. Si ese es el caso, recuperamos los usuarios registrados y los colocamos en un transitorio.

Después recorremos en bucle los usuarios registrados para rellenar la tabla, ¡y ya lo tenemos! Aquí tienes el aspecto final con algunos estilos aplicados:

RegistrantsRegistrantsRegistrants

Conclusión

Y ahí lo tienes: datos extraídos de una API externa, cacheados y mostrados, todo mediante mecanismos y funciones nativas de WordPress. Aunque esto lleva algún tiempo de lectura y digestión, especialmente si estás haciendo algo como esto por primera vez, realmente no cuesta mucho una vez lo has comprendido.

De hecho, una vez tienes algo de experiencia con APIs externas, emplearás la mayoría de tu tiempo intentando descubrir qué métodos y opciones tienen, no en cómo hacer solicitudes HTTP y en como almacenar datos, etc.

Recomiendo encarecidamente el uso de la API HTTP junto con la API de transitorios. Ha demostrado ser un recurso útil y rápido en mi cinturón de herramientas.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.