Webpack 3, React ve REST API Kullanarak Bir WordPress Eklentisi Nasıl Geliştirilir (bölüm 2)

React'i WordPress REST API ile nasıl çalıştıracağınızı hiç merak ettiniz mi? Eğer öyleyse doğru yerdesiniz – bir WordPress eklentisinin nasıl geliştirileceğinin birinci bölümünün devamında bu konuya değineceğiz! Bir önceki yazımızda Webpack'in ne olduğunu açıkladık ve WordPress örnek eklentimize entegre ettik. Ayrıca BrowserSync'i kurduk ve uygulamamızı yeniden yükledik. Bu bölümde, eklentinin gerçekten harika bir şey yapması için WordPress REST API ile çalışan eklentimizin React tarafının nasıl elde edileceğine bakacağız.

O halde zaman kaybetmeden konuya geri dönelim.

Birinci bölümde, WP React Boilerplate adında bir başlangıç ​​eklentisi kurduk. Şimdi bu eklentiyi ikinci bölümde yapılan güncellemeleri içerecek şekilde güncelledim, bu yüzden kontrol etmekten çekinmeyin.

Web paketi güncellemeleri

Hatırlarsanız, 1. bölümde Webpack'in ne olduğunu ve yükleyiciler ve eklentiler gibi şeylerin nasıl çalıştığını öğrendik. Bunlardan herhangi birinin ne olduğundan emin değilseniz – devam edin ve önce 1. bölümü okuyun. webpack.config.js dosyamızı, SASS ile çalışmak ve CSS'mizi harici bir dosyadan yüklemek için birkaç güncelleme içerecek şekilde güncelleyeceğiz.

Güncellemeleri görmek için package.json git suçlama'ya göz atabilirsiniz, ancak stillerimizi daha iyi ele almak için temel olarak bazı SASS'a özel modüllere ve extract-text-webpack-plugin .

extract-text-webpack-plugin eklentisi, Webpack ile çalışmak ve stilleri harici dosyalara çıkarmak için gidilecek yerdir. Örneğin, harici stilleri yüklemek ve bunların bir CDN'de önbelleğe alınmasını sağlamak çok daha kolaydır. Bunu çalıştırmak için webpack.config.js dosyamızda en üste aşağıdakileri ekleyeceğiz:

 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );

webpack.config.js dosyamızın güncelleyeceğimiz sonraki kısmı, Webpack'e .css ve .scss dosyalarımızın çıktısını almak için extract-text-webpack-plugin kullanmasını ve ayrıca sass-loader loader'ı kullanmasını söyleyen modüller bölümüdür. .

 { test: /\.css$/i, use: ExtractTextPlugin.extract( { fallback: 'style-loader', use: 'css-loader' } ), }, { test: /\.scss$/i, exclude: /node_modules/, use: ExtractTextPlugin.extract( { use: [ 'css-loader', 'sass-loader' ] } ) },

Son olarak, Webpack çalıştığında eklentinin yüklendiğinden emin olacağız:

 plugins: [ ... new ExtractTextPlugin( { disable: false, filename: 'style.bundle.css', allChunks: true } ), ]

Yukarıdaki pasajda, extract-text-webpack-plugin tarafından dosya çıktısının style.bundle.css olduğunu görebilirsiniz. Bu, JavaScript bundle.js ile dist klasörümüze eklenir. CSS dosyasının yüklenmesi için eklentiye bir wp_enqueue_style() çağrısı ekleyeceğiz.

 wp_enqueue_style( $this->plugin_domain . '-bundle-styles', plugin_dir_url( __FILE__ ) . 'dist/style.bundle.css', array(), $this->version, 'all' );

w00t! Artık eklentimizde SASS kullanma yeteneğine sahibiz, bu da @imports , @mixins , değişkenler ve yuvalama gibi sözdizimsel şeker kullanmamıza izin verecek. Ayrıca harici dosyalardan yüklenen stillerimiz var. Tatlı.

WordPress REST API'si

Sırada, REST API'nin eklentiyle çalışacak şekilde nasıl ayarlandığını gözden geçireceğiz. REST API'yi geçmişte burada ele aldık, bu yüzden çok fazla ayrıntıya girmeyeceğim. Size karşı dürüst olacağım, ancak bu kısım düşündüğümden çok daha fazla çaba harcadı 😩.

Size bir fikir vermek için, inşa edeceğimiz şey şu:

Eklentimizi işlevsel hale getirmek için eklememiz gereken ilk şey, bazı REST API uç noktaları eklemektir. REST API belgeleri harika değildir, ancak özel bir uç nokta oluşturmak için bilmeniz gereken temel bilgileri kapsar. Dürüst olmak gerekirse, çeşitli yöntemleri daha iyi anlamak için kodu okudum, bu yüzden biraz daha bilgiye ihtiyacınız varsa bunu yapmak isteyebilirsiniz.

Bizim durumumuzda wp_options tablosu için süper basit ve gerçekten çirkin bir React tabanlı veritabanı düzenleyicisi oluşturacağız. Bunu yapmak için, seçenekleri okumak ve güncellemek için bazı rotalara ve işleyicilere ihtiyacımız olacak.

İlk uç nokta bize wp_options tablosundaki tüm kayıtların bir listesini verecektir. server/wprb-rest-server.php dosyasında uç noktanın nasıl kurulduğuna dair daha fazla bilgi görebilirsiniz. Ama esasen, bu uç noktayı ayarlamak şöyle görünür:

 $namespace = $this->namespace . $this->version; register_rest_route( $namespace, '/records', array( array( 'methods' => WP_REST_Server::READABLE, 'callback' => array( $this, 'get_options' ), 'permission_callback' => array( $this, 'get_options_permission' )//Remove to leave open ), ) );

register_rest_route() işlevi, REST API'sinin eti ve patatesidir. Yaptığınız şey, uç nokta için temel URL'yi ( http://plugins.dev/wp-json/wprb/v1 gibi bir şey) ayarlamak ve ardından uç noktanın yolunu ayarlamaktır. Bu durumda, /records .

Sonraki argüman bir konfigürasyon dizisidir. methods anahtarı, uç noktanın dinlemesi gereken HTTP istek yöntemini ayarlamanıza olanak tanır. Bunlar GET , POST , OPTIONS vb. olabilir. REST API'si bunlar için yardımcı değişkenlere sahiptir, bu durumda WP_REST_Server::READABLE sadece 'GET' olur. WP_REST_Server sınıfındaki seçeneklerin bir listesini görebilirsiniz.

Geri callback tuşu, tahmin ettiğiniz gibi bir geri arama işlevi tanımlamanıza izin verir. Ve allow_callback, mevcut isteği yapan kullanıcının izin verilip verilmediğini kontrol etmek için bir yöntem tanımlamanıza permission_callback verir. Yerel bir MAMP sunucusu kullanırken bunu biraz acı verici buldum, ancak buna daha sonra gireceğiz.

Bu yüzden /records bitiş noktası için wp_options tablosundaki tüm kayıtların bir listesini çıkarmamız gerekiyor. Neyse ki WordPress wp_load_alloptions() işlevine sahip, bu yüzden onu kullanacağız.

 public function get_options( WP_REST_Request $request ) { return wp_load_alloptions(); }

Rest API'mizin çalıştığını test etmek için bir REST API istemcisi kullanmamız gerekecek. CURL kullanabilirsiniz , ancak gözlerinizi biraz daha rahatlatan bir şey kullanmak istiyorsanız, Insomnia veya Postman'ı öneririm. Burada Postacı kullanıyorum ama Insomnia da işe yarıyor.

Gördüğünüz gibi /records bitiş noktası tüm seçeneklerimizi JSON biçiminde döndürüyor, bu yüzden çalışmaya başlıyoruz.

Sırada, bir kaydı düzenlemek için bir rota oluşturmamız gerekecek. Bunu yapmak için, HTTP POST isteklerini dinleyen normal bir ifadeye sahip bir uç nokta oluşturacağız.

 register_rest_route( $namespace, '/record/(?P<slug>(.*)+)', array( array( 'methods' => WP_REST_Server::READABLE, 'callback' => array( $this, 'get_option' ), 'permission_callback' => array( $this, 'get_options_permission' ) ), array( 'methods' => WP_REST_Server::EDITABLE, 'callback' => array( $this, 'edit_option' ), 'permission_callback' => array( $this, 'get_options_permission' ) ), ) );

Bu rota tanımında, /record/(?P<slug>(.*)+) için biraz farklı bir rotamız olduğunu görebilirsiniz. Olduğundan daha karmaşık görünüyor. P<slug> kısmı, kodumuzdaki <slug> değerini almak için geri çağırma yönteminde kullanabileceğiniz şeydir. Aksi takdirde, geri kalanı normal PHP PCRE düzenli ifade sözdizimidir, böylece istediğinizi eşleştirebilirsiniz. Ben şahsen, seçeneğin bir kısmının URL üzerinden iletilmesini istedim, bu yüzden bu böyle olur.

Burada iki farklı HTTP yöntemi için iki tanım var. WP_REST_Server::READABLE daha önce olduğu gibi, GET istekleri içindir. Bunu kullanmayacağız, ama tam olması için bıraktım. WP_REST_Server::EDITABLE POST , PUT ve PATCH isteklerini işler, aradığımız şey POST .

Bir seçeneği güncellememiz gereken geri aramanın birkaç şey yapması gerekiyor. Veritabanında seçeneğin olup olmadığını kontrol edin, ihtiyacımız olan tüm verilerin gelip gelmediğini kontrol edin ve son olarak seçeneği güncelleyin.

 public function edit_option( WP_REST_Request $request ) { $params = $request->get_params(); if ( ! isset( $params['slug'] ) || empty( $params['slug'] ) ) { return new WP_Error( 'no-param', __( 'No slug param' ) ); } $body = $request->get_body(); if ( empty( $body ) ) { return new WP_Error( 'no-body', __( 'Request body empty' ) ); } $decoded_body = json_decode( $body ); if ( $decoded_body ) { if ( isset( $decoded_body->key, $decoded_body->value ) ) { if ( ! get_site_option( $decoded_body->key ) ) { return false; } if ( update_option( $decoded_body->key, $decoded_body->value ) ) { return true; } } } return false; }

Neyse ki WordPress seçenekleri API'si, herhangi bir nedenle mevcut değilse, bir seçeneği düzenleyecek veya ekleyecek update_option() gibi birkaç yardımcı işleve sahiptir. JSON'u istek gövdesinden ayrıştırdığımızı fark edeceksiniz, bunun nasıl gönderildiğini birazdan göreceğiz!

Ve bununla artık seçeneklerimizi yükleyebilir ve seçeneklerimizi REST API kullanarak düzenleyebiliriz. Şimdi bu API'ye React önyüzümüzden nasıl erişebileceğimizi görelim.

Tepki Bölüm Deux

1. bölümde, Webpack ile React kurulumunun yüzeyini sıyırdık. Şimdi ellerimizi kirleteceğiz ve aslında React ile çalışan, çalışan bir mini uygulama alacağız.

src/components/App.js geri döndüğümüzde, React uygulamamızı çalıştırmak için her şeyi ayarlayacağız.

Yapmamız gereken ilk şey, REST API uç noktamızı kullanarak veritabanındaki tüm seçenekleri almak. Tüm seçenekleri yükleme sırasında AJAX aracılığıyla yüklemek için React yaşam döngüsü yöntemini, componentDidMount() 'u kullanacağız.

 jQuery.ajax({ url: AJAX_BASE + '/records', dataType: 'json', method: 'GET', beforeSend: function ( xhr ) { xhr.setRequestHeader( 'X-WP-Nonce', window.wpApiSettings.nonce ); }, success: function(data) { this.setState( { options: data } ); }.bind(this) });

Örnek uygulamada, jQuery sayfaya zaten yüklendiğinden, jQuery'nin AJAX yöntemini kullanıyoruz. Ancak, hangi AJAX kitaplığında rahat olursanız olun, kolayca kullanabilirsiniz.
API'den başarılı bir yanıt aldığımızda ortaya çıkan JSON'u React'in durumuna atarız.

render() fonksiyonumuzun alt kısmında, temel olarak seçeneklerimizin bu listesini çıkarmak için bir HTML tablosu oluşturduk. Gerçek bir dünya uygulamasında bu listeyi sayfalara ayırmak istersiniz, ancak şimdilik ihtiyacımız olanı gerçekleştiriyor.

 render() { const items = Object.keys( this.state.options ).map( key => <tr key={key}> <td>{key}</td> <td> <p> <span className="edit-me">{this.state.options[ key ]} | <a href="#" onClick={( e ) => this.toggleVisible( e, key )}>Edit ✏️</a></span> <span className={this.state.saved[ key ] ? 'saved check' : 'check'}>✅</span> </p> <EditForm handleSubmit={this.saveItem} handleChange={this.handleChange} key={key} id={key} value={this.state.options[ key ]} visible={this.state.visible[ key ]} hideItem={this.toggleVisible} /> </td> </tr> ); return ( <div className="wp-react-boilerplate"> <h1>WP React Boilerplate</h1> <h4>Options Editor</h4> <table> <tbody> {items} </tbody> </table> </div> ); }

Tüm React uygulamaları gibi, UI etkileşimi de uygulama durumu tarafından yönetilir. Bizim uygulamamız da farklı değil. items değişkeni, daha önce REST API'sinden aldığımız tüm seçenekleri tutan this.state.options nesnesinde bir map() işlevi çalıştırır. Daha sonra düzenleme formunu gizlemek/göstermek için biraz HTML ekleriz ve aslında kaydı düzenlemek için formu tutan bir EditForm bileşenine başvururuz.

Bileşenler ve Aksesuarlar

Bileşenler ve aksesuarlar, modüler React uygulamaları oluşturmak için gereklidir. Belgelerden:

Bileşenler, kullanıcı arabirimini bağımsız, yeniden kullanılabilir parçalara ayırmanıza ve her parçayı ayrı ayrı düşünmenize olanak tanır.

Proplar, React ile çalışmanın en önemli yönlerinden biri olan, üst bileşenden alt bileşene tek yönde veri aktarmanıza izin verir. Ana bileşenler, bir çocuğa aksesuarlar aracılığıyla her şeyi gönderebilir: değerler, nesneler ve hatta işlevler.

Tablomuzdaki her kayıt için düzenleme formunu kesinlikle yeniden kullanmak istiyoruz, bu yüzden onu bir bileşene ayırmak mantıklı.

src/components/EditForm.js basit bir HTML formundan oluşan temel bir React bileşeni bulacaksınız.

 handleSubmit( event ) { event.preventDefault(); this.props.handleSubmit( this.props.id ); } render() { return ( <form onSubmit={( e ) => this.handleSubmit( e )} className={this.props.visible ? 'visible' : 'hidden'}> <label> <input type="text" value={this.props.value} onChange={this.handleChange} /> </label> <br /> <input type="submit" value="Save" /> </form> ); }

React, DOM öğelerinde olay işleyicilerinin ayarlandığı günlere kadar gider…

onSubmit() işleyicisi, bir 'prop' aracılığıyla bileşene geçirilen handleSubmit() yöntemini çağıran yerel bir işlevi çağırır. Bu şekilde, App bileşenimiz gerçeğin tek kaynağı olarak hareket eder ve durumun manipülasyonunu yönetir.

src/components/App.js , asıl gönderiyi REST API uç saveItem() yöntemimiz var.

 saveItem( key ) { const val = this.state.options[ key ]; const post_data = { key: key, value: val }; jQuery.ajax({ url: AJAX_BASE + `/record/${key}`, dataType: 'json', method: 'POST', data: JSON.stringify( post_data ), beforeSend: function ( xhr ) { xhr.setRequestHeader( 'X-WP-Nonce', window.wpApiSettings.nonce ); }, success: function(data) { if ( true === data ) { const saved = this.state.saved; saved[ key ] = true; this.setState( { saved } ); //HACK to hide 'saved' checkmark setTimeout( () => { saved[ key ] = false; this.setState( { saved } ); }, 1200 ); }; }.bind(this) }); }

AJAX isteğinde her şeyin yolunda olduğunu bildiğimizde, durumu günceller ve süslü yeşil onay işaretini gösteririz ✅.

REST API ve İzinler

Bahsedeceğim son şey, REST API'nin izinler ve kimlik doğrulama ile nasıl çalıştığıdır. Belgelere göre, varsayılan yöntem, doğrulama işlevi gören nonces ile çerez tabanlı kimlik doğrulamadır. React uygulamamızda, jQuery'nin beforeSend() yönteminde X-WP-Nonce başlığı olarak bir nonce iletiyoruz.

WordPress'te zaten oturum açtıysanız bu sorun değil, ancak oturum açmadan API'ye erişmek istiyorsanız, JSON Web Belirteçleri veya Oauth gibi belgelerde listelenen diğer kimlik doğrulama yöntemlerini kullanmanız gerekir.

REST API SSS bölümünde belirtildiği gibi, kimlik doğrulamanın çalışmasını sağlamak için Apache'deki vhost yönergenize SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1 kuralını da eklemeniz gerekebilir. MAMP'ta bunu buraya ekledim:

Sonraki adımlar

Ve bununla işimiz bitti. Ne sürüşü. Görünen o ki, basit bir arayüz bile olsa bir yönetim arayüzü yapmak çok iş gerektiriyor!

Bu ikinci bölümde, bazı özel uç noktalarla REST API'nin nasıl kurulacağını inceledik. Ayrıca, UI'mizi hızlı hale getirmek için React'i nasıl kullanabileceğimizi ve veritabanı kayıtlarını almak ve güncellemek için API'mizi nasıl sorgulayabileceğimizi gördük. Düzenli! Sonraki adımlar, veritabanındaki başka bir tabloyu düzenlemek, silme işlevi eklemek ve muhtemelen kullanıcı arayüzünü biraz daha güzel hale getirmek olabilir.

Daha önce React ve WordPress REST API ile çalıştınız mı? Kimlik doğrulama için farklı bir yöntem kullandınız mı? Yorumlarda bize bildirin.