WP REST API Bölüm 1: WP-API ve React Native ile Mobil Uygulama Oluşturma

WP REST API, WordPress'i bir blog platformundan/CMS'den tam teşekküllü bir uygulama çerçevesine dönüştürmeye yönelik bir başka (büyük) adım olarak, sonunda WordPress'in çekirdeğine entegre edilmeyi amaçlayan bir WordPress eklentisidir. WordPress şu anda geniş bir uygulama yelpazesi için mükemmel bir seçim olsa da, şu anda yetersiz kaldığı bir alan, harici programların WordPress veritabanıyla iletişim kurması için kolay bir yol sağlamaktır. WP-API ekibinin düzeltmeyi amaçladığı şey budur.

Bu seride, size WP REST API eklentisini nasıl kullanacağınızı ve WordPress'i basit bir React Native mobil uygulaması için veri kaynağı olarak nasıl kullanacağınızı göstereceğim. REST API eklentisi hala beta sürümündedir ve yakın gelecekte değişmesi muhtemeldir, ancak v2 API, sonunda WordPress'in bir parçası haline gelecektir, bu nedenle ona bakmaya ve onunla şimdi oluşturmaya başlamak mantıklıdır.

Ne İnşa Ediyoruz?

Başlamak için, WP REST API aracılığıyla bir WordPress kurulumundan gönderileri alacak ve kullanıcıya her dokunduğunda rastgele bir 'derin düşünce' gösterecek olan 'Derin Düşünceler' adlı React Native kullanarak basit bir iPhone uygulaması oluşturacağız. düğme. Bu uygulamanın "minimum geçerli ürünü" veya MVP sürümü ile başlayacağız ve WP REST API'nin yeteneklerini daha derine inerek seri boyunca işlevsellik ekleyeceğiz.

Başlarken

İşlerin yürümesi için http://deep-thoughts.dev yerel olarak çalışan yeni bir WordPress kurulumuna ihtiyacınız olacak, çünkü tüm kod örneklerinde kullanacağım URL bu. Ayrıca bazı gönderiler oluşturmak veya Jack Handey'in en sevdiğim Derin Düşüncelerinden bazılarını içeren bu dışa aktarmayı indirmek isteyeceksiniz.

Ardından, eklenti deposundan WP REST API eklentisini yüklemek ve etkinleştirmek isteyeceksiniz. REST API özel yeniden yazma kuralları kullandığından, "oldukça kalıcı bağlantılar" kurduğunuzdan ve düzgün çalıştığından emin olun. Sitenizi http://deep-thoughts.dev adresinde kurduysanız, tarayıcınızı http://deep-thoughts.dev/wp-json/wp/v2/posts/ adresine yönlendirerek her şeyin doğru çalıştığını kontrol edebilirsiniz. http://deep-thoughts.dev/wp-json/wp/v2/posts/ – bazı JSON verilerini görmelisiniz, ancak bir 404 alırsanız, WP REST API eklentisinin kurulu olduğundan ve kalıcı bağlantıların düzgün çalıştığından emin olmak isteyeceksiniz.

İşin WordPress tarafında olan hemen hemen her şey bu. Perde arkasında oldukça fazla şey oluyor, ancak WP REST API, WordPress kurulumunuza basit API erişimi elde etmeyi bu kadar kolaylaştırıyor. Şimdi onu kullanalım!

WordPress'i Web'in Ötesine Taşımak

Web tabanlı bir uygulamayı güçlendirmek için yeni REST API'nizi kesinlikle kullanabilirsiniz, ancak API, onu web dışında kullandığınızda gerçekten parlar, bu nedenle Facebook'un React Native çerçevesini kullanarak basit bir iPhone uygulaması oluşturacağız.

Bunu kısa tutmak için, en azından React Native web sitesindeki başlangıç ​​kılavuzunu takip ettiğinizi ve başlangıç ​​noktamız olarak kullanacağımız ortak uygulama uygulamasını çalıştırabildiğinizi varsayacağım. Aşağıdakileri CLI'nizden çalıştırarak yeni bir proje oluşturun:

 $ react-native init DeepThoughts

Şimdi oluşturulan projeyi XCode'da açın ve uygulamayı iPhone simülatöründe çalıştırın. Şimdi şuna benzeyen ortak uygulama uygulamasını görüyor olmalısınız:

Artık index.ios.js dosyasını favori metin düzenleyicinizde açabilir ve standart kodu uygulama için oluşturduğum temel bir şablonla değiştirebilirsiniz:

Artık iOS simülatörünüze geri dönebilirsiniz, ⌘R ve uygulama güncellemesinin şöyle göründüğünü görmelisiniz: (İpucu: ⌘R çalışmazsa, donanım klavyesini etkinleştirmek için ⇧⌘K basın ve tekrar deneyin)

Şu anda sadece bazı sahte veriler kullanıyoruz, bu yüzden WP JSON API'mizi bağlamaya bakalım. Daha önce belirtildiği gibi, http://deep-thoughts.dev çalıştırıyorum ve /wp-json/posts/ adresindeki uç noktaya bir GET isteği gerçekleştirerek alabileceğim uygulamada kullanmak üzere bazı gönderiler almak istiyorum. /wp-json/posts/ . REQUEST_URL adlı MOCKED_DATA değişkeninin altına bir değişken ekleyerek başlayacağım:

 var REQUEST_URL = 'http://deep-thoughts.dev/wp-json/wp/v2/posts/';

Şimdi, React'in yerleşik fetch işleviyle oldukça basitleştirdiği API'mizden verileri almamız gerekecek. getInitialState işlevinden hemen sonra iki işlev ekleyeceğiz: uygulama yüklemeyi bitirdiğinde React tarafından otomatik olarak çağrılan componentDidMount ve API'mizden verileri alacak olan fetchData işlevimiz:

 componentDidMount: function() { this.fetchData(); }, fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ thought: { title: responseData[0].title.rendered, content:responseData[0].content.rendered }, }); }) .done(); },

Orada olan tek şey, componentDidMount React Native tarafından otomatik olarak çağrıldığında, sırayla, JSON verilerini WP REST API uç noktamızdan alan, JSON verileri olarak ayrıştıran ve ardından uygulamanın durumunu fetchData işlevimizi çağırıyor. API'den aldığı gönderiler dizisindeki ilk öğenin başlığını ve içeriğini içeren bir nesneye sahip thought değişkeni. React, uygulamanın durumu güncellendiğinde UI'de değiştirilmesi gereken her şeyi halleder, bu nedenle uygulama ilk yüklendiğinde, API'den çekilen gerçek verilerle değiştirilecek olan sahte verilerimizi görmeye devam edeceğiz. indirildi ve ayrıştırıldı.

İşte güncellenmiş kod:

index.ios.js güncelleyip kaydettikten sonra, iOS simülatörünüze dönebilir ve yeni kodla güncellemek için tekrar ⌘R . İlk başta sahte verileri görmelisiniz ve ardından WordPress kurulumunuzdaki en son gönderiyle birlikte uygulama güncellemesini göreceksiniz – oldukça temiz!

Tek sorun, WP REST API'nin html ve varlık kodları ekleyen gönderi içeriğine the_content filtresini uyguluyor gibi görünmesi, ancak React-Native bunu düz metin olarak görüntülüyor. Neyse ki, WP REST API, çıktısını değiştirmemize izin verecek olan rest_prepare_post filtresini sağlar. Aşağıdaki kodu bir yardımcı program eklentisine veya temanızın function.php dosyasına eklemek bunu düzeltmelidir:

 add_filter( 'rest_prepare_post', 'dt_use_raw_post_content', 10, 3 ); function dt_use_raw_post_content( $data, $post, $request ) { $data->data['content']['plaintext'] = $post->post_content; return $data; }

Şimdi, yeni plaintext içeriğini kullanmak için React Native kodunu güncellemeniz gerekecek, bu nedenle, thought değişkeninin content özelliğini responseData[0].content.rendered responseData[0].content.plaintext yerine answerData[0].content.plaintext kullanacak şekilde ayarlamak için fetchData işlevini değiştirin.

 fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ thought: { title: responseData[0].title.rendered, content:responseData[0].content.plaintext }, }); }) .done(); },

iPhone simülatörünüzü yenileyin ve işler şimdi çok daha iyi görünmelidir:

Şimdiye kadar bu oldukça güzel ve WP REST API, React Native ile çok güzel oynayarak bunu çok daha kolay bir süreç haline getirdi. Ancak sadece en son gönderiyi göstermek, eve yazılacak bir şey değil. Veritabanımızdan rastgele bir “Derin Düşünce” göstermek istersek ne olur? WordPress, WP_Query() veya get_posts() kullanırken orderby parametresini rand değeriyle geçirmenize izin vererek bunu yapmanın bir yolunu sağlar; bu, rastgele sıralanmış bir gönderi seçimi ^* döndürür.

Benzer şekilde, WP REST API, uç nokta URL'sine sorgu parametreleri ekleyerek sorguları benzer bir şekilde yapılandırmamızı sağlar. Yani rastgele bir gönderi almak için tek yapmamız gereken REQUEST_URL değişkenimizi sonuna ?filter[orderby]=rand içerecek şekilde güncellemek. Ayrıca şu anda ihtiyacımız olandan daha fazla gönderi alıyoruz, bu yüzden tek ihtiyacımız olan filter[per_page] değerini 1 olarak ayarlayalım. Güncellenen REQUEST_URL şimdi şöyle görünmelidir:

 var REQUEST_URL = 'http://deep-thoughts.dev/wp-json/wp/v2/posts/?filter[orderby]=rand&filter[per_page]=1';

Bu değişikliği yaptıktan sonra, devam edin ve iOS simülatörünüzde ⌘R ; her yenilediğinizde rastgele bir gönderi yüklediğini görmelisiniz. Şimdi 'hmmmm' düğmesini çalıştıralım, böylece her yeni “derin düşünce” görmek istediğimizde uygulamayı yenilemek zorunda kalmayalım. React bunu nispeten basitleştirir, tek yapmamız gereken şablondaki touchableHighlight fetchData işlevimizi tekrar çağıran bir onPress özniteliği eklemektir. Bu şöyle görünmelidir:

 <TouchableHighlight style={styles.button} underlayColor='#ccc' onPress={this.fetchData} > <Text style={styles.buttonText}>Hmmmmm...</Text> </TouchableHighlight>

İşte, sunucudan yeni bir "düşünce" getirdiğimizde ve uygulama ilk yüklenirken sahte yerine bir 'yükleniyor' mesajı göstermek için bazı küçük güncellemeler yaptığım uygulamanın son kodu. veri:

Ve işte uygulamamız çalışırken nasıl görünüyor:

Gördüğünüz gibi, WP REST API, HTTP istekleri gönderebilen ve JSON verilerini ayrıştırabilen hemen hemen tüm uygulama geliştirme çerçeveleriyle WordPress verilerini kullanmayı inanılmaz derecede kolaylaştırdı. Burada React Native kullanırken, API'miz Angular ve Ember gibi web çerçeveleriyle ve hatta iOS, Android ve Windows Phones için yerel mobil çerçevelerle iletişim kurabilir.

DeepThoughts uygulamamız şu anda basit, ancak daha fazla özellik ve etkileşim ekleyerek bu serinin sonraki bölümlerinde WP JSON API'nin yeteneklerini keşfedeceğiz. DeepThoughts uygulamasına hangi özelliklerin eklenmesini istersiniz ve daha sonra WP REST API'nin hangi bölümlerini keşfetmek istersiniz? Yorumlarda bana bildirin!

* Not: filter[orderby]=rand hiçbir düzeyde güvenilir şekilde önbelleğe alınamadığından performans açısından kötüdür. Aslında, bazı ana bilgisayarlar ve eklentiler, performansı artırmak için orderby=rand kullanımını özellikle devre dışı bırakır, bu nedenle, takip ediyorsanız ve sorgunuz düzgün çalışmıyorsa, nedeni bu olabilir. Burada orderby=rand kullanımı tanıtım amaçlıdır ve bu dizinin sonraki bölümünde, rastgele bir gönderi sağlamak için REST API'mizi genişletmenin yollarına bakacağız.