WP REST API Parte 1: Creación de una aplicación móvil con WP-API y React Native

Este es el artículo 1 en 3 de la serie “WP REST API”
WP REST API Parte 1: Creación de una aplicación móvil con WP-API y React Native
WP REST API Parte 2: Personalización de puntos finales predeterminados y agregando nuevos
WP REST API PARTE 2.5: Use en WordPress 4.4
La API WP REST es un complemento de WordPress que tiene la intención de integrarse en el núcleo de WordPress como otro paso (grande) para transformar WordPress de una plataforma de blogging/CMS en un marco de aplicación completo. Si bien WordPress es actualmente una excelente opción para una amplia gama de aplicaciones, un área es actualmente insuficiente para proporcionar una manera fácil para que los programas externos se comuniquen con la base de datos de WordPress. Esto es lo que el equipo WP-API tiene como objetivo reparar.
En esta serie, le mostraré cómo usar la API REST de complementos WP y usar WordPress como fuente de datos para una aplicación móvil Native Native simple. La API REST del complemento todavía está en versión beta y es probable que cambie en el futuro cercano, pero la API V2 es lo que eventualmente se convertirá en una parte de WordPress, por lo que es lógico comenzar a mirarlo y construirlo con él ahora. Lo que creamos para comenzar, construiremos una aplicación de iPhone simple usando React Native llamado “Pensamientos profundos”, que extraerá publicaciones de una instalación de WordPress a través de la API REST WP y mostrará un “pensamiento profundo” al usuario cada vez que toque . un botón. Comenzaremos con el “producto mínimo viable” o la versión MVP de esta aplicación y agregaremos funcionalidades a lo largo de la serie, investigando las capacidades de WP REST.
Nociones básicas para iniciar cosas, necesitará una nueva instalación de WordPress que se ejecute localmente en http: // profundo- throughts.dev, porque esta es la URL que usaré en todos los ejemplos de código. También querrá crear algunas publicaciones o descargar esta exportación que contenga algunos de mis pensamientos favoritos de Jack Handey. Luego querrá instalar la API REST del complemento WP desde el almacén del complemento y activarla. Asegúrese de tener “enlaces permanentes bastante buenos” y funcione correctamente, porque la API REST utiliza reglas de reescritura personalizadas. Si ha configurado su sitio en http://deep-thoughts.dev, puede verificar si todo funciona correctamente señalando el navegador a http: // profundo- a través de los -ar tienes que ver algunos datos JSON, pero si obtienes un 404, querrás asegurarte de que el complemento de API REST WP esté instalado y que los enlaces permanentes funcionen correctamente. Esto es todo lo que existe en el lado de WordPress. Ocurre bastante en las escenas, pero la API WP hace que sea tan fácil obtener acceso simple a la API a su instalación de WordPress. ¡Ahora usemos! Tomando WordPress más allá de la web, aunque definitivamente puede usar su nueva API para alimentar una aplicación basada en la web, la API realmente brilla cuando la usa en la web, por lo que crearemos una aplicación simple de iPhone utilizando el marco Native React desde Facebook. Para ser breve, supongo que siguió al menos la guía inicial en el sitio web de React Native y que puede ejecutar la aplicación estándar que utilizaremos como punto de partida. Cree un nuevo proyecto ejecutando lo siguiente desde CLI:

$ React-Native Init Deep Hotroughts ahora abre el proyecto creado en Xcode y ejecuta la aplicación en el simulador de iPhone. Ahora debería ver la aplicación Boilerplate que se ve así: ahora puede abrir el archivo index.ios.js en su editor de texto preferido y puede reemplazar el código estándar con una plantilla básica que creé para la aplicación:
Ahora puede volver al simulador iOS, presione ⌘R y debe ver la actualización de la aplicación para verse así: (Sugerencia: si ⌘R no funciona, presione ⇧⌘K para activar el teclado de hardware e intente nuevamente)

Actualmente, solo usamos unos pocos datos simulados, así que veamos sobre la conexión de nuestra API WP JSON. Como señalé anteriormente, ejecuto mi API en http://deep-thoughts.dev y querré que se utilicen algunas publicaciones en la aplicación, que puedo obtener ejecutando una solicitud GET al punto final AT/WP -Json/publicaciones/. Comenzaré agregando una variable bajo la variable MOCARD_DATA llamada request_url:
Var request_url = ‘http://deep-thoughts.dev/wp-json/wp/v2/posts/’; Ahora tendremos que obtener los datos de nuestra API, que reacciona es bastante simple con la función de búsqueda incorporada. Agregaremos dos funciones inmediatamente después de la función GetInitialState: ComponentDidMount que se llama automáticamente por React cuando la aplicación termine, y nuestra función FetchData que obtendrá los datos de nuestra API: ComponentDidMount: function () {this.fetchData (); }, fetchData: function () {fetch (request_url) .sen ((respuesta) => respuesta.json ()) .then ((respuesta) => {this.setsate ({pensamiento: {título: respuesta [0]. Title.rended, contenido: respuesta [0] .content.rendered},};}) .done (); }, Todo lo que sucede allí es cuando CompanentDidMount es llamado automáticamente por React Native, a su vez llamar a nuestra función FetchData que toma los datos JSON de nuestro punto final de la API REST WP, los analiza como datos JSON y luego actualiza el estado de la Aplicación del pensamiento variable popular con un objeto que contiene el título y el contenido del primer artículo en la matriz de publicación que ha recibido de la API. React trata sobre todo lo que debe cambiarse en la interfaz de uso cada vez que se actualice el estado de la aplicación, por lo que cuando la aplicación se cargue por primera vez, continuaremos viendo nuestros datos simulados, que se reemplazarán con los datos reales que se han extraído de API una vez que han sido descargados y analizados. Aquí están el código actualizado:

Después de que haya actualizado y guardado index.ios.js, puede volver al simulador iOS y presionar ⌘r nuevamente para actualizarlo con el nuevo código. Debería ver primero los datos simulados, luego verá la actualización de la aplicación con la última publicación de su instalación de WordPress, ¡bastante bueno! El único problema es que el reposo de la API WP parece aplicar el filtro de contenido del contenido de la publicación que agrega HTML y códigos de entidad, pero React-Native muestra esto como un texto simple. Afortunadamente, WP REST API ofrece el filtro REST_PREPARE_POST que nos permitirá cambiar su resultado. Agregar el siguiente código a un complemento de utilidad o al archivo Functions.php del tema debe resolver esto:
ADD_FILTER (‘REST_PREPARE_POST’, ‘DT_USE_RAW_POST_CONTENT’, 10, 3); Function dt_use_raw_post_content ($ date, $ post, $ request) {$ data-> date [‘content’] [‘asignext’] = $ post-> post_content; devolver $ fecha; } Ahora tendrá que actualizar el código React Native para usar el nuevo contenido de PlinIntext, por lo que cambia la función Fetchata para establecer la propiedad de contenido de la variable de pensamiento para usar la respuesta [0]. Content.rendered fetchData: function () {fetch (request_url) .sen ((respuesta) => respuesta.json ()) .sen ((respuesta) => {this.setsate ({pensamiento: {título: respuesta [0] .title.rendered, content: resphipedata [0 ] .content.Plaintext},};}) .Done (); }, Actualice su simulador de iPhone y las cosas deberían verse mucho mejor ahora:

Hasta ahora, esto es bastante bueno y la API WP ha hecho que este proceso sea mucho más fácil de jugar tan maravillosamente con reaccionamientos nativos. Pero solo mostrar la última publicación no es algo para escribir en casa. ¿Qué sucede si queremos mostrar un “pensamiento profundo” aleatorio en nuestra base de datos? WordPress proporciona una forma de hacer esto cuando se usa wp_query () o get_posts (), lo que le permite cruzar el parámetro Orderby con un valor aleatorio que devolverá una selección de publicación aleatoria *. Además, la API WP REST nos permite estructurar consultas de manera similar, agregando parámetros de consulta a la URL del punto final. Entonces, todo lo que tenemos que hacer para obtener una publicación aleatoria es actualizar nuestra variable request_url para incluir? Filtrar [ordenby] = rand al final. Además, ahora tomamos más publicaciones de las que necesitamos, así que establezcamos el filtro [per_page] en 1, porque es todo lo que necesitamos. Nuestra solicitud actualizada_url ahora debería verse así: var request_url = ‘http://deep-thoughts.dev/wp-json/wp/v2/posts/?filterÓrdebyfont>=rand&filteró_page; Una vez que haya realizado este cambio, vaya más allá y presione ⌘r en el simulador iOS y debería ver que está cargando una publicación aleatoria cada vez que se actualiza. Ahora hagamos que el botón “Hmmmm” funcione para que no necesitemos actualizar la aplicación cada vez que queremos ver un nuevo “pensamiento profundo”. React hace esto relativamente simple, todo lo que tenemos que hacer es agregar un atributo onpress al elemento TouchableHighLight en la plantilla que nuevamente llama a nuestra función FetchData. Debería verse así:
hmmmmm … Here is the final code Para la aplicación, donde hicimos algunas pequeñas actualizaciones para mostrar un mensaje de “carga” cuando recibimos un nuevo “pensamiento” del servidor, así como cuando la aplicación se carga inicialmente, en lugar de simulación.Datos: Y así es como se ve nuestra aplicación en acción:

Como puede ver, WP REST API ha hecho que sea increíblemente fácil usar datos de WordPress con casi cualquier desarrollo de aplicaciones que pueda enviar solicitudes HTTP y analizar datos JSON. Si bien usamos React Native aquí, nuestra API puede comunicarse como simple con marcos angulares y de biegos, o incluso marcos móviles nativos para teléfonos iOS, Android y Windows. Nuestra aplicación DeerepThoughts es simple ahora, pero exploraremos las capacidades de la API WP JSON en las versiones posteriores de esta serie, agregando más funciones e interactividad. ¿Qué características le gustaría ver agregar las pruebas profundas y qué partes de la API WP le gustaría explorar? ¡Házmelo saber en los comentarios! * Nota: Filtro [OrderBy] = Rand es malo para el rendimiento porque no se puede almacenar en caché en ningún nivel. De hecho, algunos hosts y complementos deshabilitan especialmente el uso de Orderby = rand para mejorar el rendimiento, por lo que si sigue su consulta, no funciona correctamente, esa podría ser la razón. El uso de Orderby = rand aquí es para fines demostrativos, y en la próxima edición de esta serie analizaremos formas de expandir nuestro descanso para ofrecer de manera más eficiente. Este es el artículo 1 en 3 de la serie “WP REST API” WP REST API Parte 1: Creación de una aplicación móvil con WP-API y React Native
WP REST API Parte 2: Personalizar los puntos finales predeterminados y agregar nuevos

WP REST API PARTE 2.5: Use en WordPress 4.4