Membangun kustom API untuk menghubungkan WordPress dengan Ruby on Rails

Indonesian (Bahasa Indonesia) translation by Diangr (you can also view the original English article)

Final product image — What You'll Be Creating

Once upon a time, aplikasi web yang digunakan untuk menjadi monolit yang melakukan segalanya sendiri. Hari ini, tidak begitu banyak. Dengan layanan web membuka api mereka, pengembang bergerak untuk menggunakan aplikasi pihak ketiga untuk menangani bagian fungsi — hal-hal seperti otentikasi atau email pengguna.

Sementara kasus yang paling umum adalah salah satu tempat anda menggunakan API untuk menyambung ke salah satu layanan online yang populer (Google, Twitter, dan sebagainya) ada saat-saat ketika aplikasi yang anda ingin menghubungkan keduanya anda sendiri.

Ini terjadi pada saya beberapa waktu lalu: Saya telah membuat keranjang belanja khusus sebagai aplikasi Ruby on Rails dan, untuk sementara waktu, dengan senang hati menggunakannya bersama dengan laman landas HTML biasa. Namun setelah beberapa waktu, saya menemukan bahwa untuk membuat laman landas lebih menarik, saya perlu meningkatkannya menjadi sesuatu yang lebih sering diperbarui. Saya menginginkan sebuah blog, sehingga WordPress adalah pilihan alami.

Dengan situs WordPress dibangun, Semua itu baik kecuali satu hal kecil: ketika pengunjung menambahkan item ke keranjang belanja dan kemudian kembali ke toko untuk lebih, mereka lupa mereka telah menambahkan item ke keranjang belanja mereka! Keranjang belanja dan situs web yang diperlukan untuk bekerja sama. Saya perlu untuk menampilkan isi dari keranjang di situs web utama.

Ini adalah tempat untuk beberapa pengembangan API.

Dengan mengekspos keranjang belanja API ke dunia dan kemudian menelepon dari tema WordPress saya, saya akan dapat lulus data secara elegan, tanpa hacking sistem baik.

Dalam tutorial ini, berdasarkan pelajaran yang dipetik dalam melakukan proyek ini, saya akan membahas kedua ujung komunikasi API: Pertama, dengan bantuan permata Grape, kami akan membuat API untuk mengekspos bagian Ruby on Rails berdasarkan keranjang belanja ke aplikasi luar. Kemudian, kami akan menggunakan API untuk mengambil konten keranjang belanja dan menampilkannya di situs WordPress. Tergantung pada apa kebutuhanmu, anda mungkin menemukan bahwa membuat API adalah apa yang menarik bagi anda atau bahwa anda sebenarnya hanya tertarik pada bagian tentang memanggil API eksternal dari WordPress. Bagaimanapun, saya berharap anda akan menemukan tutorial yang berguna dan menarik.

Untuk menjalankan kode dalam tutorial ini, anda akan memerlukan seperangkat berikut:

Ruby di Rails versi 3.2
PHP 5.3
cURL dan PHP yang / Apache perpustakaan

Meskipun tidak ada yang benar-benar rumit tentang tutorial, pemahaman dasar tentang Ruby dan Ruby on Rails serta PHP dan WordPress diperlukan.

1. Dapatkan untuk Mengetahui Contoh Aplikasi

Karena anda berencana untuk menghubungkan aplikasi Ruby on Rails ke situs web yang didukung WordPress, mungkin aman untuk mengasumsikan anda sudah memiliki aplikasi Rails — dan mungkin bahkan situs WordPress — aktif dan berjalan. Jadi, untuk kebutuhan tutorial, saya telah membuat versi keranjang belanja yang disederhanakan tetapi fungsional, dengan metode untuk tindakan dasar yang diperlukan di tempat.

Anda dapat men-download kode sampel atau hanya membaca tutorial dan menerapkannya ke rel proyekmu sendiri.

Contoh Ruby di Rails proyek tulang telanjang dan terdiri hanya model (ShoppingCart) dan controller (ShoppingCartController). Dalam ShoppingCart model, anda akan menemukan metode berikut:

find_or_create_with(token): metode statis mendongak dan mengembalikan sebuah objek keranjang belanja dengan token identitas tertentu. Jika salah satu tidak ditemukan (atau tanda tidak diberikan), sebuah keranjang belanja yang baru dibuat dan kembali.
token: metode ini mengembalikan tanda mengidentifikasi objek keranjang belanja saat ini.
as_json: metode ini mengembalikan isi keranjang belanja sebagai string JSON diformat.

Pengontrol, ShoppingCartController berisi tindakan untuk menambahkan item ke keranjang. Tindakan, tambah, mengambil dua parameter: token dan (produk) id:

http://<SERVER_PATH>/shopping_cart/menambah/<id>? token =<token> </token> </id> </SERVER_PATH>

Kami akan kembali ke semua ini kemudian, tapi sekarang, mari kita untuk bekerja dan membuat API untuk keranjang belanja.

2. instal anggur dan membuat API

Sekarang, dengan proyek rel di tempat, sekarang saatnya untuk mulai membuat API.

Untuk membangun API kami, kami akan menggunakan alat yang disebut Grape. Grape adalah kerangka kerja mikro yang dirancang untuk mengimplementasikan API sederhana, REST-like dalam situasi di mana, seperti yang pengembang katakan, "anda tidak perlu kekuatan pengangkatan besar kerangka besar seperti Rails."

Kerangka Grape dapat digunakan sendiri tetapi juga duduk dengan baik di samping Rails, menyediakan cara mudah untuk membuat API untuk mengakses subset (atau mengapa tidak semua) fungsi aplikasi Railsmu. Itulah tepatnya yang akan kita lakukan dalam tutorial ini.

Langkah 1: Instal Grape

Untuk menambahkan permata ke proyek Railsmu, tambahkan baris berikut ke Gemfile anda:

1	gem 'grape'

Kemudian perbarui permatamu dengan menelepon (pada baris perintah):

1	bundle install

Thats it. Permata telah terinstal dan kita dapat mulai menggunakannya.

Langkah 2: Konfigurasikan Grape Paths

Untuk mulai menulis API, anda harus terlebih dahulu membuat file sumber ruby yang akan memegang fungsi API. Ini adalah kerangka kerja ringan, sehingga kami dapat menulis seluruh API hanya dalam satu file. Tempatkan file ini di dalam aplikasi Railsmu, dalam sebuah direktori yang disebut api tepat di bawah direktori utama app.

Dalam contoh proyek, anda akan menemukan kode API di app/api/cart_external.rb.

Tambahkan baris berikut ke file konfigurasi application.rb anda untuk memastikan file di app/api disertakan:

1	config.paths.add "app/api", glob: "*/.rb"
2	config.autoload_paths += Dir["#{Rails.root}/app/api/*"]

Step 3: Membuat modul API

Di dalam file sumber API, kita sekarang akan mendefinisikan sebuah modul yang akan berisi kelas API kami:

module CartExternal

  class API < Grape::API
    version 'v1', :using => :path
    format :json

    helpers do
    end

    resource :cart do
    end
  end

end

Ini adalah yang paling tulang telanjang versi isi API anggur sederhana. Pada titik ini, itu tidak melakukan apa-apa lagi, tapi mari kita lihat elemen konfigurasi pada awal kode di dalam kelas.

Pertama, versi baris 'v1',: using =>: path memberitahukan bahwa ini adalah versi v1 dari API dan bahwa versi yang diinginkan pengguna API untuk mengakses harus didefinisikan dalam URL, misalnya http://localhost: 3000/v1/. Pilihan lain untuk bidang konfigurasi ini adalah :header, : accept_version_header dan :param, masing-masing mendefinisikan metode yang berbeda untuk menyampaikan informasi versi. Lihat dokumentasi Grape untuk informasi lebih lanjut tentang penggunaan masing-masing.
format :json memberitahu anggur untuk mengkodekan keluar tanggapan sebagai string JSON diformat (:txt dan :xml juga dapat digunakan).

Langkah 4: Gunung API

Sebelum kita mulai menambahkan fungsionalitas ke API, sebagai langkah akhir setup, menyatakan kelas API untuk aplikasi Railsmu sehingga ia akan tahu untuk melayani orang-orang dan meminta layanan.

Untuk melakukannya, tambahkan baris berikut ke config/routes.rb:

1	mount CartExternal::API => '/'

2. membuat API melakukan sesuatu

Sekarang, mari kita kembali ke kelas CartExternal::API kita didefinisikan di atas.

Langkah 1: Menentukan sumber daya

Di dalam kelas API, anda akan menemukan dua elemen yang saya tidak menyebutkan belum: helpers dan resource.

helpers adalah sebuah makro yang dapat digunakan bersama-sama dengan blok (atau modul) untuk memperkenalkan metode penolong yang kemudian dapat digunakan dalam tindakan API. Metode ini bisa misalnya pembantu yang dibutuhkan untuk verifikasi parameter API atau metode untuk menghubungi aplikasi Rails induk.
resource mendefinisikan kumpulan Logis metode API. Anda dapat menambahkan sebanyak yang anda inginkan, tetapi dalam kasus kami kita akan melakukan baik dengan hanya satu, yang akan kita sebut :cart. Sumber daya ini akan berisi semua metode API yang terkait dengan keranjang belanja. Dengan definisi ini, setiap panggilan yang dilakukan ke http://<APPLICATION_PATH>/v1/cart akan dialihkan ke sumber daya kami dan tindakan yang ditentukan di dalamnya.

Langkah 2: Buat tindakan API pertama Anda

Untuk melihat bagaimana ini bekerja, mari kita mulai dengan membuat panggilan API untuk mengambil item dalam keranjang belanja, diidentifikasi oleh parameter token.

Di dalam resource blok, tambahkan kode berikut:

desc 'Return items in cart.'
params do
  optional :token, type: String, default: nil
end
get '/items' do
  token = params[:token]
  
  cart = ShoppingCart.find_or_create_with token

  response = {
    status: 200,
    token: cart.token,
    cart: cart.as_json
  }

  response.as_json
end

Sekarang, kami telah membuat suatu tindakan yang menanggapi permintaan GET yang dikirim ke jalan /items.

Tindakan mengambil satu parameter opsional string, token, dinyatakan dalam blok params. Meskipun tidak wajib untuk menyatakan parameter, itu adalah praktik yang baik karena itu membuat lebih mudah dibaca kodemu dan juga menghemat waktumu seperti Grape akan melakukan sebagian besar parameter validasi untukmu. Untuk parameter yang diperlukan, anda dapat menggunakan membangun serupa, menggantikan opsional dengan memerlukan. Parameter yang dibutuhkan tidak dapat memiliki nilai default.

Tindakan kami mendongak shopping cart yang sesuai token atau menciptakan yang baru jika token tidak berlalu. Kemudian kembali respons JSON yang dikodekan yang terdiri dari status, sebenarnya token keranjang belanja dan isi keranjang belanja.

Langkah 3: Menguji tindakan API

Jika anda menjalankan aplikasi Rails secara lokal, anda sekarang dapat mulai server anda dan Arahkan browsermu ke http://localhost:3000/v1/troli/item untuk melihat respon, yang seharusnya terlihat seperti ini:

1	{"status":200,"token":"XBrf2nCkTYfQJoU8d4A1nw","cart":{"item_count":0,"items":[]}}

Seperti kita tidak lulus tanda dalam panggilan kita, keranjang belanja baru diciptakan dan ditugaskan nilai token unik yang dihasilkan secara acak. Itulah sebabnya mengapa gerobak masih kosong.

Jika anda suka, untuk pengujian, anda dapat menggunakan tindakan menambahkan di ShoppingCartController untuk menambahkan item ke keranjang:

http://localhost:3000/shopping_cart/menambah/1? token = TOKEN_FROM_PREVIOUS_CALL

Setelah menambahkan produk, ketika anda menelepon API lagi, anda akan melihat bahwa sekarang ada item dalam keranjang:

{"status": 200, "token": "XBrf2nCkTYfQJoU8d4A1nw", "keranjang": {"item_count": 1, "item": [{"cart_id": 2, "created_at": "2014-05-20T16:44:24Z","id": 4, "product_id": 1, "product_name": "Tes Produk", "product_price": "10.0", "updated_at": " 2014-05-20T16:44:24Z "}]}}

Tambahkan sebagai banyak item yang anda inginkan- dan kemudian, sebelum menambahkan fungsionalitas yang lebih, mari kita menyelesaikan pengaturan dan memiliki WordPress berbicara dengan API.

3. Hubungi API dari WordPress

Kami sekarang telah diuji dengan API dengan menyebutnya dari web browser dan selanjutnya, saatnya untuk membuat WordPress berkomunikasi dengan itu.

Kode WordPress yang mengikuti dapat dimasukkan di sebuah plugin atau di sebuah WordPress tema functions.php tergantung pada proyekmu dan konteks mana API komunikasi yang diperlukan. Dalam integrasi keranjang belanja saya sendiri, saya memutuskan untuk menambahkan kode di tema anak untuk kesederhanaan.

Apapun cara yang anda memutuskan untuk pergi, kode akan menjadi sama.

Langkah 1: Membuat fungsi untuk memanggil API

Buka functions.php file (atau file PHP plugin cocok) dan menyisipkan fungsi PHP berikut. Ini adalah fungsi pembantu yang merangkum komunikasi API sehingga di masa depan, jika anda perlu untuk mengubah tanda tangan API atau unsur-unsur lain generik di panggilan, anda dapat melakukannya di satu tempat.

Berikut adalah tulang-tulang dari apa yang perlu dalam yang berfungsi:

function api_get_as_json( $action, $params ) {

    $api_endpoint = "http://localhost:3000/v1/cart";

    if ( null == $params ) {
        $params = array();
    }

    // Create URL with params
    $url = $api_endpoint . $action . '?' . http_build_query($params);

    // Use curl to make the query
    $ch = curl_init();

    curl_setopt_array(
        $ch, array( 
            CURLOPT_URL => $url,
            CURLOPT_RETURNTRANSFER => true
        )
    );

    $output = curl_exec($ch);

    // Decode output into an array
    $json_data = json_decode( $output, true );

    curl_close( $ch );

    return $json_data;
}

Fungsi yang diperlukan di jalan untuk tindakan API dan parameter yang diperlukan, menggabungkan mereka ke dalam URL, dan kemudian menggunakan cURL untuk membuat permintaan ke API.

Setelah menerima respon, fungsi yang mem-parsing itu ke dalam sebuah array, menggunakan json_decode, sebuah fungsi yang merupakan bagian dari standar PHP perpustakaan.

Langkah 2: Call API dan Membuat Respon

Sekarang bahwa kita telah menciptakan fungsi untuk memanggil API, mari kita menggunakannya untuk query isi keranjang belanja melalui /cart/items metode API kami dan kemudian mencetak respon:

function show_shopping_cart() {
    $cart_data = api_get_as_json('/items', null);
?>    
    <div class="shopping-cart">
        <h3>Shopping Cart</h3>
        <ul>
        <?php if (isset($cart_data["cart"]["items"]) 
                    && $cart_data["cart"]["items"].length > 0) : ?>

            <?php foreach ($cart_data["cart"]["items"] as $item) : ?>  
                <li>
                    <?php echo $item["product_name"]; ?> 
                    $<?php echo $item["product_price"]; ?>
                </li>
            <?php endforeach; ?>

        <?php else : ?>

            Your shopping cart is empty.

        <?php endif; ?>
        </ul>
    </div>
    
    <div style="margin-top: 20px;">
        <pre style="font-size: 8pt;"><?php print_r($cart_data); ?></pre>
    </div>
<?php
}

Fungsi membuat panggilan API ke /items dan mencetak respon dengan beberapa format HTML dasar. Pada akhir fungsi, saya menyertakan sebuah blok print_r sederhana untuk membuat isi respon JSON untuk keperluan debugging.

Hal ini berguna terutama di awal, ketika keranjang masih kosong dan kami ingin memastikan bahwa ada tidak ada kesalahan komunikasi yang mencegah kode untuk menampilkan isinya.

Langkah 3: Menghubungkan fungsi untuk WordPress

Sekarang bahwa kita memiliki fungsi untuk membuat panggilan dan mencetak respon di tempat, semua yang tersisa adalah membuat WordPress menyebutnya.

Cara termudah untuk melakukan hal ini akan pergi langsung ke file template tema dan menyebutnya show_shopping_cart di sana di tempat mana yang ingin anda Tampilkan keranjang belanja. Jika temamu sendiri dan anda yakin ini adalah semua yang anda butuhkan, mungkin pilihan yang layak.

Di ujung lain dari spektrum adalah yang paling fleksibel dan pendekatan ramah pengguna embedding panggilan ke WordPress widget. Dengan cara ini, anda dapat bergerak keranjang belanja dan tempat itu di daerah sidebar manapun di situs WordPress anda. Tidak semua yang keras, jadi mari kita pergi ke depan dan melakukan itu.

Semua yang kita butuhkan adalah kelas sub WP_Widget dengan konstruktor dan beberapa kode untuk render isi keranjang belanja di widget fungsi. Dua fungsi lain, form dan options dapat dibiarkan kosong untuk sekarang (jika anda ingin menambahkan kustomisasi widget, ini adalah di mana ia akan pergi).

class ShoppingCartWidget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'shopping_cart_widget',
            __( 'Shopping Cart Widget', 'shopping_cart' ),
            array( 'description' => __( 'A widget for displaying a shopping cart.', 'shopping_cart' ) )
        );
    }

    /**
     * Outputs the content of the widget
     */
    public function widget( $args, $instance ) {
        echo $args['before_widget'];

        show_shopping_cart();

        echo $args['after_widget'];
    }

    /**
     * Outputs the options form.
     */
    public function form( $instance ) {
        // The widget takes no options
    }

    /**
     * Processing widget options on save
     */
    public function update( $new_instance, $old_instance ) {
        // The widget takes no options
    }
    
}

function register_shopping_cart_widget() {
    register_widget( 'ShoppingCartWidget' );
}
add_action('widgets_init', 'register_shopping_cart_widget');

Sekarang, pergi ke WordPress admin, dan tarik widget Shopping Cart Widget ke salah satu sidebarmu:

Sekarang, kunjungi situs WordPress untuk melihat kode dalam tindakan. Anda harus melihat sesuatu seperti ini:

Keranjang belanja Anda masih kosong, tapi seperti yang anda lihat dari Keluaran print_r di bawah keranjang belanja, karya-karya komunikasi dan WordPress blog adalah menerima data dari aplikasi Rails kami.

Sekarang, dengan dasar yang dibahas, mari kita lihat membuat komunikasi yang sedikit lebih aman.

4. mengamankan koneksi dengan API Key

Kita sekarang telah dibangun sebuah API untuk Ruby on Rails aplikasi dan menyebutnya dari WordPress situs; Namun, ada masih sesuatu yang penting hilang: mengamankan API sehingga tidak terbuka untuk semua orang di Internet untuk panggilan yang mereka inginkan. Saya yakin anda dapat memikirkan hal-hal buruk yang akan terjadi jika anda meninggalkan pintu benar-benar terbuka untuk semua orang, kanan?

Cara sederhana untuk mengamankan API adalah dengan membuat kunci rahasia untuk setiap aplikasi yang anda izinkan untuk memanggil API Anda. Dengan cara ini, setiap kali aplikasi membuat permintaan ke API, itu perlu mengirim kunci API untuk server untuk memeriksa. Pemanggil tanpa kunci API berlaku tidak akan diizinkan untuk membuat permintaan. Untuk keamanan tambahan, sebagian besar layanan juga termasuk sebuah rahasia API selain kunci API.

Jadi sekarang, mari kita kembali untuk bekerja dan menambahkan kunci API, pertama kode Ruby kami dan kemudian pada WordPress samping.

Langkah 1: Tambahkan Metode untuk Memeriksa Kunci API

Pertama, tambahkan metode untuk memeriksa kunci API. Yang ini masuk dalam blok helpers kelas API anda:

1	def is_valid_api_key?(key)
2	key == 'API_KEY'
3	end

Ini adalah versi sederhana dengan hanya satu kunci API, jadi tergantung pada aplikasimu, anda mungkin harus memperpanjangnya. Misalnya, jika anda memiliki beberapa aplikasi yang memanggil API, anda perlu menentukan kunci API unik untuk masing-masing dan menyimpannya dalam basis data. Anda mungkin juga ingin membuat halaman admin untuk membuat kunci API baru.

Paling tidak, anda perlu mengganti API_KEY dengan kunci nyata yang dihasilkan yang tidak terlalu mudah ditebak. Untuk contoh ini, yang penting adalah anda memiliki kunci API dan metode untuk memeriksa bahwa kunci yang dilewatkan cocok dengan yang disimpan dalam sistem.

Langkah 2: Gunakan Metode Helper untuk Memverifikasi API Key

Dengan metode helper di tempat, kita dapat menambahkan cek ke satu dan satu-satunya panggilan API kami dengan mengelilingi kode di dalamnya dengan yang berikut if...else membangun:

if is_valid_api_key? params[:key]
  token = params[:token]

  cart = ShoppingCart.find_or_create_with token

  response = {
    status: 200,
    token: cart.token,
    cart: cart.as_json
  }

  response.as_json
else
  error!('401 Unauthorized', 401)
end

Perhatikan blok else yang mana kita meningkatkan kesalahan menggunakan metode Grape error!.

Sekarang, restart Rails server dan isi ulang WordPress anda halaman rumah dan anda akan melihat sesuatu seperti ini:

Hal ini karena kita belum belum menambahkan kunci API kode WordPress kami dan sehingga API rel tidak lagi menerima permintaan itu membuat. Jika anda suka, pada titik ini, anda dapat menambahkan beberapa penanganan kesalahan yang tepat dan menampilkan pesan kesalahan baik.

Kemudian, mari kita bergerak dan membuat API menelepon bekerja lagi.

Langkah 3: Menambahkan Pengaturan Field API Key

Untuk sekarang, anda bisa hanya pergi ke depan dan keras kode kunci API dalam fungsi api_get_as_json anda, tetapi seperti menambahkan opsi baru untuk pengaturan umum WordPress halaman sangat sederhana, mari kita melakukan hal ini melalui bidang pengaturan.

Dan saat menambahkan itu, kita juga dapat menambahkan pilihan untuk menentukan URL untuk API.

Cara ini, kemudian bila anda menggunakan kode WordPress untuk server live yang sebenarnya, anda akan mampu mengkonfigurasi tanpa harus menyentuh kode — yang selalu bagus.

$cart_api_settings_field = new CartApiSetting();

class CartApiSetting {
    function CartApiSetting() {
        add_filter( 'admin_init', array( $this , 'register_fields' ) );
    }

    function register_fields() {
        register_setting( 'general', 'cart_api_key', 'esc_attr' );

        add_settings_field( 'cart_api_key', 
             '<label for="cart_api_key">' . __( 'Shopping Cart API key' , ‘shopping_cart’ ).'</label>' , 
              array( $this, 'fields_html' ) , 'general' );
    }

    function fields_html() {
        $value = get_option( 'cart_api_key', '' );
        echo '<input type="text" id="cart_api_key" name="cart_api_key" value="' . $value . '" />';
    }
}

Berikut adalah pengaturan bidang definisi API endpoint URL menggunakan konstruksi yang sama:

$cart_api_endpoint_settings_field = new CartApiEndpointSetting();

class CartApiEndpointSetting {
    function CartApiEndpointSetting() {
        add_filter( 'admin_init', array( $this, 'register_fields' ) );
    }

    function register_fields() {
        register_setting( 'general', 'cart_api_endpoint', 'esc_attr' );

        add_settings_field( 'cart_api_endpoint', 
             '<label for="cart_api_endpoint">' . __( 'Shopping Cart API URL' , ‘shopping_cart’ ).'</label>' , 
              array( $this, 'fields_html' ) , 'general' );
    }

    function fields_html() {
        $value = get_option( 'cart_api_endpoint', '' );
        echo '<input type="text" id="cart_api_endpoint" name="cart_api_endpoint" value="' . $value . '" />';
    }
}

Kunjungi menu pengaturan umum WordPress anda untuk menetapkan nilai-nilai yang tepat untuk pengaturan ini, memastikan kunci API sesuai dengan apa pun yang anda telah mengatur nilainya harus di layanan Railsmu.

Langkah 4: Lulus kunci API dengan API Request

Sekarang, dengan kunci API dan URL disimpan dalam pilihan WordPress, mari kita diperbaharui fungsi yang membuat API panggilan.

Perubahan pergi pada awal fungsi, seperti ini:

function api_get_as_json($action, $params) {

    if ( null == $params ) {
        $params = array();
    }

    $api_key = get_option( "cart_api_key" );
    $api_endpoint = get_option( "cart_api_endpoint" );

    if ( ! isset( $api_key ) || ! isset( $api_endpoint ) ) {
        return false;
    }

    $params["key"] = $api_key;
    
}

Melihat kode baru di atas, anda akan melihat bahwa $api_key dan $api_endpoint pengaturan dibaca dari WordPress pilihan. $api_endpoint telah digunakan untuk membuat URL untuk memanggil, tetapi untuk $api_key, kita perlu menambahkan baris (14) untuk memasukkan nilai parameter dikirim ke API.

Refresh halaman rumah WordPress anda dan isi keranjang belanja muncul lagi, kali ini dijamin dengan API key. Semuanya terlihat baik-sebenarnya, sama seperti sebelum memerlukan kunci API — dan anda telah terhubung aplikasi Rails dengan situs WordPressmu.

5. Tambahkan Sesi Shared

Kode WordPress kami telah ditulis sejauh membuat API panggilan dan mengamankan mereka dengan API key, tetapi melakukannya dengan cara yang benar-benar tanpa kewarganegaraan. Untuk tindakan sederhana, stateless seperti posting update ke papan pesan atau Twittermu sendiri seperti microblogging platform, satu kali panggilan seperti ini adalah semua yang anda butuhkan. Namun, contoh keranjang belanja, hal ini tidak cukup.

Ketika anda melihat ketika pengujian kode, sementara server Rails kami mengidentifikasi keranjang belanja dengan tanda, kita belum pernah menggunakan token ini di mana saja, sehingga setiap kali panggilan ke cart/list dilakukan, server menciptakan keranjang belanja, baru kosong.

Tidak sangat baik. Untuk koneksi keranjang belanja untuk dapat digunakan, anda harus dapat menambahkan item ke keranjang anda dan menjaga mereka di sana untuk sementara waktu, bahkan ketika anda bergerak dari satu halaman ke yang lain.

Dalam satu kata, anda perlu sesi.

Ada beberapa cara anda bisa membuat sesi, tetapi mari kita pergi dengan yang paling sederhana, menggunakan token dikirimkan ke kita oleh aplikasi Rails dan menyimpannya dalam cookie klien. Sebagai WordPress anda situs adalah antarmuka pengguna (dan browser web nya) melihat dan berkomunikasi dengan, yang juga di mana kita perlu untuk menetapkan cookie.

Langkah 1: Menetapkan Cookie

Cookie hanya dapat ditetapkan di header, sebelum konten apa pun telah diterjemahkan, jadi kita perlu melakukan beberapa menata ulang dalam kode, bergerak /cart/items menelepon dalam aliran eksekusi. Untuk melakukan ini, mari kita membuat sebuah fungsi PHP yang baru, get_shopping_cart, dan menyebutnya tepat di awal pelaksanaan situs WordPress.

Ini dapat dilakukan menggunakan WordPress aksi kait. Untuk daftar lengkap kait, anda dapat melihat WordPress Codex. Dalam kasus ini, tindakan init melakukan apa yang kita butuhkan, jadi mari kita menghubungkan permintaan kami untuk yang satu.

add_action ("init", "get_shopping_cart");

Get_shopping_cart fungsi itu sendiri terlihat seperti ini:

function get_shopping_cart() {

    $cart_data = api_get_as_json( '/items', null );
    $token = $cart_data['token'];

    // Expire cookie in 30 minutes    
    setcookie( 'bread_cart', $token, time() + 60 * 30 );
    set_saved_cart_data( $cart_data );
    
}

Pertama, membuat fungsi oleh sekarang akrab ajakan untuk bertindak /items API kami. Maka kita memiliki sesuatu yang baru: di jalur 3, kita ekstrak token keranjang belanja dikembalikan oleh API dan kemudian, beberapa baris kemudian, menyimpannya dalam cookie. Cookie ditetapkan untuk berakhir pada 30 menit ketika saya menganggap seseorang berbelanja di toko online akan lupa tentang toko saat itu...

Jalur 7, anda mungkin melihat fungsi baru lain panggilan: set_saved_cart_data. Kami akan kembali ke sana dalam hanya satu menit. Tapi pertama-tama, mari kita membuat API panggilan menggunakan token juga.

Langkah 2: Gunakan Token dari Cookie

Pertama, mari kita membuat fungsi pembantu untuk mengambil token dari cookie:

function api_shopping_cart_token() {

    $token = null;

    if ( isset( $_COOKIE[‘shopping_cart_token’] ) ) {
        $token = $_COOKIE['shopping_cart_token'];
    }    

    return $token;
}

Dan kemudian, menggunakan fungsi, tambahkan baris berikut ke api_get_as_json, tepat setelah baris mana kita mengatur parameter kunci API:

1	$params['token'] = api_shopping_cart_token();

Dengan tambahan ini, setiap kali panggilan untuk API dibuat, api_get_as_json metode mendongak token keranjang belanja dari cookie dan menambahkannya ke parameter permintaan. Jika cookie tidak ditemukan, API akan menerima token kosong dan memperlakukan panggilan sebagai pengunjung baru, membuat keranjang belanja, baru kosong.

Langkah 3: Mengoptimalkan Pelaksanaan Oleh Menyimpan Beberapa Data

Dan sekarang, kembali ke set_saved_cart_data.

Seperti yang kita perhatikan dalam kode di atas, get_shopping_cart menerima isi penuh dari keranjang belanja-data yang sama yang kita query di show_shopping_cart. Ini berarti bahwa kita panggil API dua kali dalam satu halaman WordPress membuat ketika satu panggilan harus cukup. Hemat respon untuk durasi permintaan HTTP adalah optimasi sederhana yang bisa kita gunakan untuk mengurangi jumlah panggilan API ke dalam setengah.

Dalam PHP, variabel global spesifik dan hanya hidup melalui satu permintaan HTTP, sehingga kita dapat dengan aman menggunakan satu untuk menyimpan data dari get_shopping_cart ke titik di mana ia digunakan untuk benar-benar render isi keranjang belanja.

Untuk melakukan ini, saya telah membuat sepasang sederhana fungsi, set_saved_cart_data dan get_saved_cart_data, yang membungkus $g_shopping_cart_data variabel global untuk menjaga kode mudah dibaca dan mudah untuk mempertahankan:

global $g_shopping_cart_data;

function set_saved_cart_data( $cart_data ) {

    global $g_shopping_cart_data;
    $g_shopping_cart_data = $cart_data;
    
}

function get_saved_cart_data() {

    global $g_shopping_cart_data;
    return $g_shopping_cart_data;
    
}

Dengan data keranjang belanja yang disimpan ke variabel global, semua yang perlu anda lakukan adalah untuk mengubah baris pertama dalam show_shopping_cart untuk:

1	$cart_data = get_saved_cart_data();

Dengan perubahan ini dilakukan, keranjang belanja sekarang memiliki sesi dan pengguna dapat menambahkan item ke keranjang dan bergerak di antara halaman sementara masih melihat keranjang belanja sama.

Langkah 4: Tes Dengan Menambahkan Beberapa Item ke Keranjang

Untuk menguji fungsionalitas, mari kita membuat link ke controller aksi shopping_cart/add dan mencetaknya pada akhir show_shopping_cart. Perhatikan, bahwa untuk controller untuk berbagi sesi kami juga membutuhkan token keranjang belanja sebagai parameter:

$product_id = 1;

$token_params = http_build_query(array('token' => api_shopping_cart_token()));
$url = "http://localhost:3000/shopping_cart/add/" . $product_id . "?" . $token_params;

echo '<p><a href="' . $url . '">Add test item to cart</a></p>';

Klik pada link, Add tes item ke card, untuk menambahkan item. Kemudian kembali ke situs WordPress anda dan sekarang anda dapat melihat item dari keranjang belanja muncul di WordPress blog!

Beberapa kata-kata akhir

That's it: anda sekarang berhasil tersambung Ruby on Rails keranjang belanja berbasis WordPress blog atau situs web.

Menghapus print_r debugging, gaya output dengan beberapa CSS dan menciptakan beberapa link nyata "Add to Cart" (serta "Check Out" tombol yang akan membawa pengguna kembali ke aplikasi shopping cart aktual) dan anda memiliki integrasi keranjang belanja yang berfungsi penuh.

Lebih penting lagi, namun, anda dapat menggunakan metode untuk menciptakan dan berbicara kembali ke API untuk menghubungkan dua aplikasi anda sendiri. Mereka bisa menjadi apa pun, jadi sekarang, pergi ke depan dan membuat Apis beberapa!