En este tutorial, hablaremos acerca del uso de WordPress como backend de una aplicación para móvil de PhoneGap. Vamos a echar un vistazo ahora a como podemos crear APIs REST para WordPress, de manera que la app de PhoneGap se pueda comunicar con WordPress usando esas APIs. Así mismo vamos a desarrollar una app de PhoneGap simple la cual permita a los usuarios hacer login y mostrar una lista de posts en el blog de WordPress.

Imagen 0 en Desarrollo de App PhoneGap con Backend WordPress

Los entornos de desarrollo para aplicaciones de móviles como AppPresser, IdeaPress y Mobicloud están limitadas a la hora de crear apps de tipo blog. Entender como integrar WordPress con PhoneGap te ayudar a desarrollar cualquier tipo de app utilizando WordPress como backend.

Requerimientos Previos

Para el desarrollo de la app descrita se asume que tenemos disponible y funcionando en nuestro entorno lo siguiente:

  • WordPress para usarlo como backend
  • NodeJS para poder instalar a posteriori PhoneGap Desktop Builder
  • PhoneGap Desktop Builder para desarrollar la app
  • Una conexión a internet para conectar con los CDN que usaremos para jQuery

Crear REST APIs para WordPress

Vamos a comenzar configurando las APIs REST para WordPress. WordPress te provee de las acciones necesarias para crear APIs REST que pueden ser usadas por cualquier tipo de cliente HTTP.Las APIs REST APIs pueden ser instaladas por medio de un tema o plugin de WordPress.

Las acciones WordPress wp_ajax_ y wp_ajax_nopriv_ pueden ser utilizadas para crear las REST APIs que hacen uso de GET o POST.

Un callback unido a wp_ajax_ es ejecutado si el cliente HTTP que realiza la petición está logueado en WordPress. De igual manera, un callback unido a wp_ajax_nopriv_ es ejecutado si el cliente HTTP que realiza la petición no está logueado en WordPress.

Creemos entonces la API REST que permite al usuario loguearse en WordPress.

function ya_logueado()
    {
    echo "Usuario ya logueado.";
    die();
    }
 
function login()
    {
    $creds = array();
    $creds['user_login'] = $_GET["username"];
    $creds['user_password'] = $_GET["password"];
    $user = wp_signon($creds, false);
    if (is_wp_error($user))
        {
        echo "FALSE";
        die();
        }
    echo "TRUE";
    die();
    }
 
add_action("wp_ajax_login", "ya_logueado");
add_action("wp_ajax_nopriv_login", "login");

Veamos que hace el anterior código:

  • Si el usuario esta ya logueado en el momento de hacer una petición AJAX usando PhoneGap, una cookie de sesión es enviada automáticamente al servidor. En este caso la función ya_logueado se ejecuta.
  • Si una cookie de sesión no es enviada al servidor, significa que el usuario no está logueado y la función login se ejecutará.
  • Necesitamos hacer peticiones HTTP a http://[tu_nombre_de_dominio_o_ip]//wp-admin/admin-ajax.php?action=login&username=tu_nombre_de_usuario&password=tu_clave_de_acceso . Aquí la acción es el nombre de la API REST, es decir la cadena que viene detrás de wp_ajax_ y wp_ajax_nopriv_ .
  • Puedes realizar una petición GET o POST a esta URL pero es obligatorio que des el nombre de la API REST.
  • Se usa wp_signon para crear una cookie de sesión, utilizada por el usuario para loguearse en WordPress.

Vamos a crear otra API REST que devuleva los diez últimos posts del blog en un formato JSON.

function posts()
    {
    header("Content-Type: application/json");
    $posts_array = array();
    $args = array("post_type" => "post", "orderby" => "date", "order" => "DESC", "post_status" => "publish", "posts_per_page" => "10");
    $posts = new WP_Query($args);
    if($posts->have_posts()):
        while($posts->have_posts()): 
            $posts->the_post();
            $post_array = array(get_the_title(), get_the_permalink(), get_the_date(), wp_get_attachment_url(get_post_thumbnail_id()));
            array_push($posts_array, $post_array);
        endwhile;
    else:
        echo "{'posts' = []}";
        die();
    endif;
    echo json_encode($posts_array);
    die();
    }
 
function no_posts()
    {
    echo "Por favor loguéate.";
    die();
    }

add_action("wp_ajax_posts", "posts");
add_action("wp_ajax_nopriv_posts", "no_posts");

Veamos que hace el anterior código:

  • Aquí hemos registrado una API HTTP que se llamará ‘posts’.
  • Si el usuario no está logueado, entonces le devolverá un mensaje para que se que lo haga.
  • Si el usuaario está logueado, entonces enviará un array de JavaScript con los últimos diez posts.
  • Aquí usamos el objeto WP_Query para obtener los posts del blog.

Creación de la App de PhoneGap

Pasemos ahora a explicar cómo crear la aplicación de PhoneGap a través del uso WordPress como backend.

Hay un par de puntos que aclarar antes de continuar con este tutorial:

  • Hay dos formas de desarrollar una app de PhoneGap. Puedes usar PhoneGap online builder o bien puedes desarrollarla tu mismo usando el PhoneGap desktop builder . En este tutorial, vamos a asumir que la desarrollamos usando la aplicación de escritorio ( PhoneGap desktop builder ).
  • La app de PhoneGap no obedece a las políticas de AJAX and Cookie Same Origin Policy . Por lo tanto, puedes hacer una petición AJAX a cualquier sitio web usando JavaScript corriendo en la app de PhoneGAP. Además, durante la petición HTTP todas las cookies son enviadas al servidor y cualquier dominio puede guardar cookies en la app.

La app PhoneGap que desarrollaremos en este tutorial tendrá la siguiente estructura de directorios y archivos:

--www
    --cordova.js
--js
    --index.js
    --index.html

El directorio www estará presente en tu proyecto recién creado.

Aquí es neesario que el archivo cordova.js sea el mismo que viene por defecto.

Borra todo el contenido presente en los archivos index.js y index.html .

Copia esto en tu archivo index.html .

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
      <title>OpenWebinars.net - App PhoneGap usando WordPress</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
   </head>
   <body>
      <div data-role="page">
         <div data-role="header" data-position="fixed">
            <h2>Entrar</h2>
         </div>
         <div data-role="main" class="ui-content">
            <input id="username" type="text" placeholder="Escribe tu nombre de usuario">
            <input id="password" type="password" placeholder="Escribe tu clave de usuario">
            <button onclick="login();">Entrar</button>
            <a href="#pagetwo" id="page_two_link"></a>
         </div>
         <div data-role="footer" data-position="fixed">
            <h3>Por @OpenWebinars_net</h3>
         </div>
      </div>
      <div data-role="page" id="pagetwo">
         <div data-role="header" data-position="fixed">
            <h2>Posts</h2>
         </div>
         <div data-role="main" class="ui-content">
            <ul data-role="listview" id="posts">                 
            </ul>
         </div>
         <div data-role="footer" data-position="fixed">
            <h3>Por @OpenWebinars_net</h3>
         </div>
      </div>
      <script type="text/javascript" src="cordova.js"></script>
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
      <script type="text/javascript" src="js/index.js"></script>
   </body>
</html>

Veamos como funciona el código de arriba:

  • Aquí estamos utilizando jQuery mobile para crear la UI de la app. jQuery mobile es leído desde un CDN.
  • Tenemos dos páginas. La primera es una página para loguearse y si las credenciales son correctas entonces se envía al usuario hacia la segunda página donde una lista de posts es mostrada.
  • Cuando se hace click en el botón login se realiza una llamada a una función login de JavaScript.

Ahora que hemos terminado con la UI de la app, vamos a codear la funcionalidad frontend. Pon este código en el archivo index.js .

function fetch_and_display_posts()
    {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://localhost/wp-admin/admin-ajax.php?action=posts");
    xhr.onload = function()
	{
        var posts_array = JSON.parse(xhr.responseText);
        var html = "";
        for(var count = 0; count < posts_array.length; count++)
	    {
            var title = posts_array[count][0];
            var link = posts_array[count][1];
            var date = posts_array[count][2];
            var image = posts_array[count][3];
            html = html + "<li>" + "<a href='javascript:open_browser(\"" + link + "\")'>" + "<img height='128' width='128' src='" + image + "'>" + "<h2>" + title + "</h2>" + "<p>" + date + "</p></a></li>";
	    }
        document.getElementById("posts").innerHTML = html;
        $("#posts").listview("refresh");
	};
    xhr.send();
    }

function login()
    {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if(username === "")
	{
        navigator.notification.alert("Por favor introduce tu nombre de usuario", null, "Falta nombre de usuario", "OK");
        return;
	}
    if(password === "")
	{
        navigator.notification.alert("Por favor introduce tu clave de usuario", null, "Falta clave de usuario", "OK");  
        return;
        }
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://localhost/wp-admin/admin-ajax.php?action=login&username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
    xhr.onload = function()
    	{
	if(xhr.responseText == "FALSE")
	    {
	    navigator.notification.alert("Usuario y/o clave erróneos", null, "Fallo al entrar", "Inténtalo de Nuevo");
	    }
        else if(xhr.responseText == "TRUE")
            {
            fetch_and_display_posts();
            $("#page_two_link").click();
            }
        }   
    xhr.send();
    }

function open_browser(link)
    {
    window.open(link, '_blank', 'location=yes');
    }

Veamos que realiza el anterior código:

  • La función login recoge el nombre de usuario y la clave desde el formulario y lo envia a WordPress. Si las credenciales son correctas entonces WordPress envía una cooki de sesión de vuelta indicando que el usuario está logueado.
  • Si login ha tenido éxito, llamamos a la función fetch_and_display_posts que se encarga de obtener los diez últimos posts y mostrarlos en la segunda página.
  • Cuando se hace click en un post llamamos a la función open_browser la cual muestra el artículo completo en una nueva ventana del navegador usando PhoneGap InAppBrowser.
  • Aquí mientras se realiza la petición AJAX hemos usado el nombre de dominio localhost . Hay que estar seguro de que se cambia dicho nombre por el del dominio dónde se quiera testear.

Finalmente, estas son algunas muestras de la app PhoneGap con backend WordPress funcionando:

Imagen 1 en Desarrollo de App PhoneGap con Backend WordPress Imagen 2 en Desarrollo de App PhoneGap con Backend WordPress Imagen 3 en Desarrollo de App PhoneGap con Backend WordPress

Más Información y Recursos

Ahora que sabemos crear una app Phonegap simple usando WordPress como backend, si queremos mas información, podemos realizar el curso de desarrollo de apps PhoneGap de OpenWebinars.net.