REST API là gì? Giới thiệu và cách sử dụng WordPress REST API cơ bản

Bạn muốn cung cấp dữ liệu của website đến một bên thứ 3 hoặc những nền tảng khác nhau, bạn không thể cho kết nối trực tiếp đến dữ liệu của bạn để bảo mật, điều gì có thể giúp bạn làm được điều này? đó chính là REST API. Trong bài viết này mình sẽ chia sẻ một chút về REST API là gì, mình cũng sẽ giới thiệu về REST API của WordPress và cách sử dụng nó để lấy dữ liệu cho website khác.

REST API là gì?

REST (REpresentational State Transfer) hiểu đơn giản thì nó là một dạng chuyển đổi cấu trúc dữ liệu. API (Application Programming Interface) là giao diện lập trình ứng dụng giúp tạo ra các phương thức kết nối với các thư viện và ứng dụng khác nhau.

Như vậy có thể hiểu REST API là một ứng dụng chuyển đổi cấu trúc dữ liệu có các phương thức để kết nối với các thư viện và ứng dụng khác. REST API không được xem là một công nghệ, nó là một giải pháp để tạo ra các ứng dụng web services thay thế cho các kiểu khác như SOAP, WSDL (Web Service Definition Language),…

Các ưu điểm của REST

• Giúp cho API trở nên rõ ràng hơn.
• REST URL đại diện cho resource chứ không phải là hành động.
• Dữ liệu được trả về với nhiều định dạng khác nhau như:  xml, html, rss, json …
• Code đơn giản và ngắn gọn.
• REST chú trọng vào tài nguyên hệ thống.

Các trang web ngày nay thường sử dụng REST API để cho phép kết nối dữ liệu của họ. Facebook cũng cung cấp các REST API giúp các ứng dụng bên ngoài có thể kết nối đến dữ liệu của họ. (bạn có thể tham khảo tại đường dẫn: https://developers.facebook.com/tools/explorer).

Với WordPress bạn cũng có thể làm được những điều tương tự, REST API đã được tích hợp sẵn trong WordPress và sẽ giúp website của bạn không chỉ là một website thông thường mà còn là một web services có thể ban phát dữ liệu sang các nền tảng khác. Cùng mình tìm hiểu về WordPress REST API ở bên dưới đây.

Giới thiệu về WordPress REST API

Trước WordPress phiên bản 4.7 thì muốn có REST API bạn phải cài các Plugin hỗ trợ, tuy nhiên các phiên bản sau này nó đã được WordPress tích hợp sẵn và bạn không cần phải cài bất cứ Plugin nào.

Các REST API WordPress trả về các định dạng dữ liệu Json (JavaScript Object Notation), giúp người dùng có thể lấy dữ liệu hoặc cập nhật dữ liệu từ các ứng dụng khác mà không cần phải kết nối trực tiếp đến dữ liệu của website. Với REST API WordPress chúng ta có thể tạo ra các ứng dụng android đọc báo sử dụng dữ liệu Json của REST API, các ứng dụng như winform để quản lý,…

REST API mặc định của WordPress chỉ có khả năng tác động dữ liệu đến các thành phần mặc định như post, page, taxanomy, comment, user, settings,… mà không thể tác động đến các dữ liệu của plugin khác. Ví dụ Woocommerce, tuy nhiên nếu bạn sử dụng các plugin như Woocommerce thì nó cũng sẽ cung cấp cho bạn các REST API để sử dụng.

Các đơn giản nhất để kiểm tra xem REST API của website bạn hoạt động hay chưa bằng cách truy cập vào đường dẫn: http://tên_web_của_bạn/wp-json/wp/v2/posts. Nếu bạn thấy xuất hiện một loạt các dòng chữ thì đó chính là dữ liệu Json do REST API trả về cho bạn.

Một kết quả Json từ REST API của tuandc.com

Bạn có thể tìm thấy cách sử dụng WordPress REST API tại https://developer.wordpress.org/rest-api/using-the-rest-api/.

Ví dụ sử dụng REST API WordPress để lấy dữ liệu

Thật ra tùy vào mục đích sử dụng dữ liệu Json trên nền tảng nào thì sẽ có cách xử lý trên nền tảng đó. Mình sẽ làm một ví dụ ngắn về việc lấy dữ liệu Json trên tuandc.com và hiển thị trên một website ở localhost.

• Đầu tiên mình sẽ tạo ra một tệp main.js bên trong thư mục JS của theme.
• Mở file content.php và thêm đoạn code sau vào:

 <button id="btn_load">Nhấn để tải dữ liệu</button>
 <div id="div_content"></div>

• Mở file functions.php và thêm đoạn code sau vào:

function getjsdata()
{
 wp_register_script('custom-script',get_template_directory_uri().'/js/main.js',array( 'jquery' ));
 wp_enqueue_script( 'custom-script' );
}
add_action('wp_enqueue_scripts','getjsdata');

• Quay trở lại file main.js và thêm đoạn code sau vào:

var button_load = document.getElementById("btn_load");
var content = document.getElementById("div_content");

if(button_load){
 button_load.addEventListener("click",function(){
   //Load JSON
    var request = new XMLHttpRequest();
    request.open('GET','http://Domain_của_bạn/wp-json/wp/v2/posts');
    request.onload = function(){
      if(request.status >= 200 && request.status <400){
        var data = JSON.parse(request.responseText);
        console.log("đã có dữ liệu");
      }else{
        console.log("đã kết nối đến server, nhưng có lỗi");
      }
    };
    request.onerror = function(){
    console.log("kết nối thất bại");
 };
 request.send();
 });
}

• Bây giờ bạn chạy website lên, nhấn vào nút “tải dữ liệu” nếu kết quả trả về trong tab Console là “đã có dữ liệu” tức là đã thành công, nếu trả về “đã kết nối đến server, nhưng có lỗi” thì xem lại REST API trên server của bạn, và nếu trả về “kết nối thất bại” thì xem lại kết nối đến server của bạn có vấn đề gì không.

• Các dữ liệu sau khi được gửi về sẽ có dạng là các object. Trong các Object này sẽ có các thuộc tính và dữ liệu của nó. Để hiểu hơn bạn thay dòng console.log("đã có dữ liệu"); thành console.log(data); và trở lại console để xem thử nhé.

Dữ liệu được trả về từ REST API

• Bây giờ việc còn lại của chúng ta là bóc tách các dữ liệu này và hiển thị lên trên website.
• Bạn thêm một đoạn code sau vào file “main.js“

function viewdata(datapost)
{
 var HTMLstring ='';
 for(i=0;i<datapost.length;i++){
 HTMLstring += '<div class="col-md-4 col-sm-6"><h2>'+datapost[i].title.rendered+'</h2>';
 HTMLstring += datapost[i].excerpt.rendered+'</div>';
 }
 content.innerHTML = HTMLstring;
}

• sau đó thay dòng console.log(data); thành viewdata(data);
• Trở lại website bạn tải lại và nhấn nút sẽ có kết quả như sau:

• Bạn có thể lấy ra nhiều thành phần khác nữa dựa vào dữ liệu trả về. Đoạn code trên mình có tô đỏ từ title.rendered và excerpt.rendered tức là lấy tiêu đề và mô tả của bài viết, cái này các bạn có thể sử dụng console để phân tích.

Ví dụ sử dụng REST API WordPress để thêm dữ liệu

• Đầu tiên mình sẽ thêm một vùng nhập liệu cho giao diện bằng đoạn mã HTML sau:

 <div class="col-md-12">
     <div class="form">
       <div class="form-group text-center">
          <input id="title_name" name="title_name" placeholder="Tiêu đề" type="text" value="">
       </div>
       <div class="form-group text-center">
          <textarea id="content_name" name="content_name" placeholder="Nội dung" ></textarea>
       </div>
       <div class="text-center padding-md-top">
          <button id="btn_adddata" type="submit">Tạo bài viết</button>
       </div>
     </div> 
 </div>

• Tiếp theo bạn thêm đoạn sau vào file main.js

var adddata = document.querySelector("#btn_adddata");

if(adddata){
  adddata.addEventListener("click",function(){
   var datapost ={
     "title":document.querySelector('.form [name="title_name"]').value,
     "content":document.querySelector('.form [name="content_name"]').value,
     "status":"publish",
   }
   var post_data = new XMLHttpRequest();
   post_data.open("POST","http://domain_của_bạn/wp-json/wp/v2/posts");
   post_data.setRequestHeader("X-WP-Nonce",nonce);
   post_data.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
   post_data.send(JSON.stringify(datapost));
 });
}

Trong phần code này bạn chú ý đến dòng post_data.setRequestHeader("X-WP-Nonce",nonce);. Nếu bạn không có nonce bạn sẽ không được xác thực việc đăng dữ liệu.

Để lấy Nonce bạn có thể sử dụng hàm wp_create_nonce('wp_rest')những người đã đăng nhập sẽ được cấp một none được xác thực và có thể đăng bài.

Như vậy là mình đã xong bài giới thiệu và hướng dẫn sử dụng cơ bản REST API của WordPress, các bạn có thể sử dụng nó để mở rộng trên nhiều nền tảng khác nhau.