WP REST API Bölüm 1: WP-API ve React Native ile hücresel uygulamalar oluşturma
Bu, “WP Rest API” serisinde 3 Madde 1/3
WP REST API Bölüm 1: WP-API ve React Native ile hücresel uygulamalar oluşturma
WP REST API Bölüm 2: Varsayılan bitiş noktasını ayarlayın ve yeni bir noktayı ekleyin
WP REST API Bölüm 2.5: WordPress 4.4’te kullanma
WP REST API, WordPress’in bloglama/CMS platformundan eksiksiz bir uygulama çerçevesine değiştirmek için başka bir (büyük) adım olarak WordPress’in çekirdeğine entegre edilecek bir WordPress eklentisidir. WordPress şu anda çeşitli uygulamalar için doğru seçim olsa da, şu anda başarısız olan bir alan, harici programların WordPress veritabanlarıyla iletişim kurması için kolay bir yol sağlamaktır. WP-API ekibinin geliştirmek istediği budur.
Bu seride, WP REST API eklentisini nasıl kullanacağınızı göstereceğim ve WordPress’i basit yerel reaksiyon hücresel uygulamaları için veri kaynağı olarak kullanacağım. API Rest eklentisi hala beta sürümünde ve yakın gelecekte değişecektir, ancak V2 API nihayetinde WordPress’in bir parçası olacak, böylece onu görmeye ve şimdi inşa etmeye mantıklı geliyor. Başlamak için oluşturduğumuz şey, WPPPress kurulumundan WP REST API üzerinden yayınlar çizecek ve bir düğmeye her dokunduklarında kullanıcılara rastgele bir ‘derin düşünce’ gösterecek ‘Derin Düşünceler’ adlı bir React yerli olarak basit bir iPhone uygulaması oluşturacağız. . Bu uygulamanın “iyi bir minimum ürün” veya MVP sürümü ile başlayacağız ve WP REST API’sının yeteneğinde daha fazla kazarak seri boyunca işlevsellik ekleyeceğiz.
Çalışmaya başlamaya başlayarak, http://deep-thoughts.dev adresinde yerel olarak çalışan yeni bir WordPress kurulumuna ihtiyacınız olacak, çünkü bu tüm kod örneklerinde kullanacağım URL. Ayrıca bazı gönderiler yapmak veya Jack Handey’nin en sevdiğim derin düşüncelerden bazılarını içeren bu ihracatı indirmek istiyorsunuz. Ardından, WP Rest Fire eklentisini eklenti deposundan yüklemek ve etkinleştirmek istersiniz. API REST özel yeniden yazma kuralları kullandığından “güzel geçirgenler” hazırladığınızdan ve düzgün çalıştığınızdan emin olun. Sitenizi http://deep-touts.dev adresinde hazırladıysanız, tarayıcınızı http://deep-houghts.dev/wp-json/wp/v2/posts/ adresine yönlendirerek her şeyin doğru çalışıp çalışmadığını kontrol edebilirsiniz. – Bazı JSON verileri göreceksiniz, ancak 404 alırsanız, WP REST API eklentisinin yüklü olduğundan ve Permalink’in düzgün çalıştığından emin olmalısınız. Hepsi WordPress tarafında. Perde arkasında olan birçok şey var, ancak WP REST API’sı WordPress kurulumunuza basit yangın erişimini kolaylaştırıyor. Şimdi kullanalım! WordPress’i web’in ötesine taşıyan Web tabanlı uygulamaları çalıştırmak için yeni API REST’nizi kesinlikle kullanabilmenize rağmen, API web dışında kullandığınızda gerçekten parlıyor, bu nedenle React yerel Facebook çerçevesini kullanarak basit bir iPhone uygulaması oluşturacağız. Kısacası, en azından React Native web sitesindeki başlangıç kılavuzunu takip etmenizi ve başlangıç noktamız olarak kullanacağımız Bolarplate uygulamasını çalıştırabileceğinizi varsayacağım. CLI’nizden aşağıdakileri çalıştırarak yeni bir proje oluşturun: $ React-Native Insit DeepThoults artık Xcode’da oluşturulan bir proje açıyor ve uygulamayı iPhone simülatöründe çalıştırıyor. Şimdi şuna benzeyen bir daha fazla bir uygulama uygulaması göreceksiniz: Şimdi en sevdiğiniz metin düzenleyicinize index.ios.js dosyasını açabilir ve uygulama için oluşturduğum temel bir şablonla boilerplate kodunu değiştirebilirsiniz:
Şimdi iOS simülatörünüze geri dönebilirsiniz, ⌘r tuşuna basın ve uygulama güncellemesinin şöyle göründüğünü göreceksiniz: (Talimatlar: ⌘r çalışmazsa, donanım klavyesini etkinleştirmek ve tekrar deneyin) tuşuna basın) Şu anda sadece bazı yapay veriler kullanıyoruz, bu yüzden JSON API WP’imizi bağlamayı görelim. Daha önce açıklandığı gibi, API’mi http://deep-thoughts.dev adresinde çalıştırıyorum ve/wp-json//son noktaya gelmesini isteyebileceğim uygulamada kullanılacak bazı gönderiler almak istiyorum. Yayınlar/Yayınlar/Gönderiler/Gönderiler/Gönderiler/Gönderiler/Gönderiler/Gönderiler. İstek_url adlı Moked_Data değişkeni altına değişkenler ekleyerek başlayacağım:
var request_url = ‘http://deep-thoughts.dev/wp-json/wp/v2/posts/’; Şimdi API’mızdan veri almamız gerekiyor, bu da getirme işleviyle oldukça basit hale getirmek için tepki veriyor. Bottlestat işlevinden sonra iki tam işlev ekleyeceğiz: uygulama yüklendiğinde React tarafından otomatik olarak çağrılan bileşenliDidMount ve FetchData işlevimiz API’mizden veri alır: ComponentDidMount:) {this.fetchData (); }, fetchData: function () {fetch (request_url) .that ((yanıt) => reppo.json ()) .that ((yanıt) => {this.setstate ({düşünce: {başlık: yanıt [0]. Title.Rened, İçerik: Yanıt [0] .Conent.Rendered},});}) .Done (); }, ComponentDidMount, JSON verilerini WP REST API’mizin bitiş noktasından alan, JSON verileri olarak tanımlayan ve daha sonra durumunu güncelleyen FetchData işlevimizi çağırmak için ComponentDidMount otomatik olarak React Native tarafından çağrıldığında ve daha sonra Düşünce değişkenini, yangından aldığı yayın dizisindeki ilk öğenin başlığını ve içeriğini içeren nesneyle doldurarak uygulama. React, uygulama durumu her güncellendiğinde kullanıcı arayüzünde değiştirilmesi gereken her şeyi işler, bu nedenle uygulama ilk yüklendiğinde, tamamlandıktan sonra API’dan alınan gerçek verilerle değiştirilecek taklit verilerimizi göreceğiz. İndirildi ve ayrıştırıldı. Güncellenmiş kodu takip edin: Index.ios.js’i güncelledikten ve kurtardıktan sonra iOS simülatörüne dönebilir ve yeni bir kodla güncellemek için ⌘R’ye tekrar basın. İlk başta yapay verileri göreceksiniz ve sonra WordPress kurulumunuzdaki en son yayınlarla uygulama güncellemesini göreceksiniz – oldukça temiz!
Tek sorun, WP REST API’sının HTML ve Varlık Kodları ekleyen gönderme içeriğine_content filtresini uyguladığı görülüyor, ancak React-Native bunu sıradan metin olarak görüntülüyor. Neyse ki, WP REST API, çıktıyı değiştirmemizi sağlayan REST_PREPARE_POST filtresi sağlar. Yardımcı program eklentisine veya dosya işlevine aşağıdaki kodu ekleyin. İşlev dt_use_raw_post_content ($ data, $ post, $ request) {$ data-> data [‘content’] [‘düz metin’] = $ post-> post_content; Dönüş $ veri; } Artık yeni bir düz metin içeriği kullanmak için React yerel kodu güncellemeniz gerekir, bu nedenle yanıt [0] .content.plaintext kullanacak şekilde içerik değişkeninin içeriğini ayarlamak için FetchData işlevini değiştirin {fetch (request_url). that ((yanıt) => yanıt.json ()) .that ((yanıt) => {this.setState ({düşünce: {başlık: yanıt [0]. Title.Rendered, İçerik: Yanıt [0]. İçerik. Düz metin},});}). }, İPhone simülatörünüzü yenileyin ve şimdi her şey çok daha iyi görünecek:
WP REST API Bölüm 2: Varsayılan bitiş noktasını ayarlayın ve yeni bir noktayı ekleyin WP REST API Bölüm 2.5: WordPress 4.4’te kullanma
WP REST API Bölüm 1: WP-API ve React Native ile hücresel uygulamalar oluşturma
WP REST API Bölüm 2: Varsayılan bitiş noktasını ayarlayın ve yeni bir noktayı ekleyin
WP REST API Bölüm 2.5: WordPress 4.4’te kullanma
WP REST API, WordPress’in bloglama/CMS platformundan eksiksiz bir uygulama çerçevesine değiştirmek için başka bir (büyük) adım olarak WordPress’in çekirdeğine entegre edilecek bir WordPress eklentisidir. WordPress şu anda çeşitli uygulamalar için doğru seçim olsa da, şu anda başarısız olan bir alan, harici programların WordPress veritabanlarıyla iletişim kurması için kolay bir yol sağlamaktır. WP-API ekibinin geliştirmek istediği budur.
Bu seride, WP REST API eklentisini nasıl kullanacağınızı göstereceğim ve WordPress’i basit yerel reaksiyon hücresel uygulamaları için veri kaynağı olarak kullanacağım. API Rest eklentisi hala beta sürümünde ve yakın gelecekte değişecektir, ancak V2 API nihayetinde WordPress’in bir parçası olacak, böylece onu görmeye ve şimdi inşa etmeye mantıklı geliyor. Başlamak için oluşturduğumuz şey, WPPPress kurulumundan WP REST API üzerinden yayınlar çizecek ve bir düğmeye her dokunduklarında kullanıcılara rastgele bir ‘derin düşünce’ gösterecek ‘Derin Düşünceler’ adlı bir React yerli olarak basit bir iPhone uygulaması oluşturacağız. . Bu uygulamanın “iyi bir minimum ürün” veya MVP sürümü ile başlayacağız ve WP REST API’sının yeteneğinde daha fazla kazarak seri boyunca işlevsellik ekleyeceğiz.
Çalışmaya başlamaya başlayarak, http://deep-thoughts.dev adresinde yerel olarak çalışan yeni bir WordPress kurulumuna ihtiyacınız olacak, çünkü bu tüm kod örneklerinde kullanacağım URL. Ayrıca bazı gönderiler yapmak veya Jack Handey’nin en sevdiğim derin düşüncelerden bazılarını içeren bu ihracatı indirmek istiyorsunuz. Ardından, WP Rest Fire eklentisini eklenti deposundan yüklemek ve etkinleştirmek istersiniz. API REST özel yeniden yazma kuralları kullandığından “güzel geçirgenler” hazırladığınızdan ve düzgün çalıştığınızdan emin olun. Sitenizi http://deep-touts.dev adresinde hazırladıysanız, tarayıcınızı http://deep-houghts.dev/wp-json/wp/v2/posts/ adresine yönlendirerek her şeyin doğru çalışıp çalışmadığını kontrol edebilirsiniz. – Bazı JSON verileri göreceksiniz, ancak 404 alırsanız, WP REST API eklentisinin yüklü olduğundan ve Permalink’in düzgün çalıştığından emin olmalısınız. Hepsi WordPress tarafında. Perde arkasında olan birçok şey var, ancak WP REST API’sı WordPress kurulumunuza basit yangın erişimini kolaylaştırıyor. Şimdi kullanalım! WordPress’i web’in ötesine taşıyan Web tabanlı uygulamaları çalıştırmak için yeni API REST’nizi kesinlikle kullanabilmenize rağmen, API web dışında kullandığınızda gerçekten parlıyor, bu nedenle React yerel Facebook çerçevesini kullanarak basit bir iPhone uygulaması oluşturacağız. Kısacası, en azından React Native web sitesindeki başlangıç kılavuzunu takip etmenizi ve başlangıç noktamız olarak kullanacağımız Bolarplate uygulamasını çalıştırabileceğinizi varsayacağım. CLI’nizden aşağıdakileri çalıştırarak yeni bir proje oluşturun: $ React-Native Insit DeepThoults artık Xcode’da oluşturulan bir proje açıyor ve uygulamayı iPhone simülatöründe çalıştırıyor. Şimdi şuna benzeyen bir daha fazla bir uygulama uygulaması göreceksiniz: Şimdi en sevdiğiniz metin düzenleyicinize index.ios.js dosyasını açabilir ve uygulama için oluşturduğum temel bir şablonla boilerplate kodunu değiştirebilirsiniz:
Şimdi iOS simülatörünüze geri dönebilirsiniz, ⌘r tuşuna basın ve uygulama güncellemesinin şöyle göründüğünü göreceksiniz: (Talimatlar: ⌘r çalışmazsa, donanım klavyesini etkinleştirmek ve tekrar deneyin) tuşuna basın) Şu anda sadece bazı yapay veriler kullanıyoruz, bu yüzden JSON API WP’imizi bağlamayı görelim. Daha önce açıklandığı gibi, API’mi http://deep-thoughts.dev adresinde çalıştırıyorum ve/wp-json//son noktaya gelmesini isteyebileceğim uygulamada kullanılacak bazı gönderiler almak istiyorum. Yayınlar/Yayınlar/Gönderiler/Gönderiler/Gönderiler/Gönderiler/Gönderiler/Gönderiler. İstek_url adlı Moked_Data değişkeni altına değişkenler ekleyerek başlayacağım:
var request_url = ‘http://deep-thoughts.dev/wp-json/wp/v2/posts/’; Şimdi API’mızdan veri almamız gerekiyor, bu da getirme işleviyle oldukça basit hale getirmek için tepki veriyor. Bottlestat işlevinden sonra iki tam işlev ekleyeceğiz: uygulama yüklendiğinde React tarafından otomatik olarak çağrılan bileşenliDidMount ve FetchData işlevimiz API’mizden veri alır: ComponentDidMount:) {this.fetchData (); }, fetchData: function () {fetch (request_url) .that ((yanıt) => reppo.json ()) .that ((yanıt) => {this.setstate ({düşünce: {başlık: yanıt [0]. Title.Rened, İçerik: Yanıt [0] .Conent.Rendered},});}) .Done (); }, ComponentDidMount, JSON verilerini WP REST API’mizin bitiş noktasından alan, JSON verileri olarak tanımlayan ve daha sonra durumunu güncelleyen FetchData işlevimizi çağırmak için ComponentDidMount otomatik olarak React Native tarafından çağrıldığında ve daha sonra Düşünce değişkenini, yangından aldığı yayın dizisindeki ilk öğenin başlığını ve içeriğini içeren nesneyle doldurarak uygulama. React, uygulama durumu her güncellendiğinde kullanıcı arayüzünde değiştirilmesi gereken her şeyi işler, bu nedenle uygulama ilk yüklendiğinde, tamamlandıktan sonra API’dan alınan gerçek verilerle değiştirilecek taklit verilerimizi göreceğiz. İndirildi ve ayrıştırıldı. Güncellenmiş kodu takip edin: Index.ios.js’i güncelledikten ve kurtardıktan sonra iOS simülatörüne dönebilir ve yeni bir kodla güncellemek için ⌘R’ye tekrar basın. İlk başta yapay verileri göreceksiniz ve sonra WordPress kurulumunuzdaki en son yayınlarla uygulama güncellemesini göreceksiniz – oldukça temiz!
Tek sorun, WP REST API’sının HTML ve Varlık Kodları ekleyen gönderme içeriğine_content filtresini uyguladığı görülüyor, ancak React-Native bunu sıradan metin olarak görüntülüyor. Neyse ki, WP REST API, çıktıyı değiştirmemizi sağlayan REST_PREPARE_POST filtresi sağlar. Yardımcı program eklentisine veya dosya işlevine aşağıdaki kodu ekleyin. İşlev dt_use_raw_post_content ($ data, $ post, $ request) {$ data-> data [‘content’] [‘düz metin’] = $ post-> post_content; Dönüş $ veri; } Artık yeni bir düz metin içeriği kullanmak için React yerel kodu güncellemeniz gerekir, bu nedenle yanıt [0] .content.plaintext kullanacak şekilde içerik değişkeninin içeriğini ayarlamak için FetchData işlevini değiştirin {fetch (request_url). that ((yanıt) => yanıt.json ()) .that ((yanıt) => {this.setState ({düşünce: {başlık: yanıt [0]. Title.Rendered, İçerik: Yanıt [0]. İçerik. Düz metin},});}). }, İPhone simülatörünüzü yenileyin ve şimdi her şey çok daha iyi görünecek:
Şimdiye kadar oldukça havalı ve WP REST API, React Native ile çok iyi oynayarak bu süreci kolaylaştırdı. Ancak sadece en son gönderileri görüntülemek evde yazılabilecek bir şey değildir. Veritabanımızın rastgele bir “derinlemesine düşünce” sergilemek istersek ne olur? WordPress, rastgele sıralı bir posta seçeneğini geri yükleyecek bir RAND değeri ile sipariş parametresini geçmenize izin vererek WP_Query () veya get_posts () kullanırken bunu yapmanın bir yolunu sağlar. Benzer şekilde, WP REST API, son nokta URL’sine bir sorgu parametresi ekleyerek sorguları benzer şekilde düzenlememize olanak tanır. Rastgele gönderiler almak için yapmamız gereken şey, request_url değişkenini ekleyecek şekilde güncellemektir. Şu anda ihtiyacımız olandan daha fazla gönderi alıyoruz, bu yüzden filtreyi [per_page] 1’e ayarlayalım çünkü ihtiyacımız olan tek şey bu. Şimdi güncellenen request_url şöyle görünecek: var request_url = ‘http://deep-houts.dev/wp-json/wp/v2/posts/?filter girişimci Bu değişikliği yaptıktan sonra, devam edin ve iOS simülatörünüzde ⌘r tuşuna basın ve her yenilendiğinizde rastgele gönderiler yüklediğini göreceksiniz. Şimdi yeni bir “derinlemesine düşünce” görmek istediğimizde uygulamayı yenilememiz için ‘hmmmm’ düğme işlevini yapalım. React bunu nispeten basit hale getirir, tek yapmamız gereken şablondaki TouchData işlevimizi tekrar çağıran TouchbleHighlight öğesine bir onpress özniteliği eklemektir. Bunun gibi görünecek:
hmmmmm … benim yerim de ‘yükünü görüntülemek için bazı küçük güncellemeler yaptı ‘Sunucudan yeni bir “düşünce” aldığımızda ve uygulama ilk yüklendiğinde, veri taklidi değil: ve bu işlem yaparken uygulamamızın görünümüdür:
WP REST API Bölüm 2: Varsayılan bitiş noktasını ayarlayın ve yeni bir noktayı ekleyin WP REST API Bölüm 2.5: WordPress 4.4’te kullanma
