Ionic 4 WordPress İstemcisi Nasıl Kurulur?

Temel olarak çoğu internet sayfası WordPress tarafından desteklendiğinden, bir kullanıcı mobil uygulamanızı kullanarak sizinle etkileşime geçme ihtimali daha yüksektir.

Bir önceki makalemde Ionic 4 ile basit ve statik bir blog uygulaması yapmıştık. Okumayanlar için bu makaleyi okumadan önce bir önceki makaleyi okumalarını tavsiye ederim.

Şu anda WordPress harika bir REST API içeriyor. Ionic uygulamamızı içerdiği verilere kolayca bağlayabiliyoruz. wp-api-angular paketini daha önce kullanmama rağmen, bu eklentinin artık temel olarak ölü olduğu ve bakımının yapılmadığı görünüyor. Bu yüzden API‘yi doğrudan kullanalım!

Ionic 4 WordPress Makaleleri Yükleniyor
Ionic 4 WordPress Makaleler

WordPress’i Ionic Uygulamamıza Bağlamak

Bir önceki makalemizde bir Ionic 4 uygulaması oluşturmuştuk ve birkaç sayfa eklemiştik. Şimdi yeni bir servis oluşturuyoruz. Başka bir eklentiye ihtiyacımız yok!

cd Teknoreel
ionic g service services/wordpress

Şimdi Http‘yi API‘ye çağırmak için modül dosyamıza bir ekleme yapmamız gerekiyor. Bu yüzden app/app.module.ts dosyasını şu şekilde değiştirin:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { IonicStorageModule } from '@ionic/storage';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Şimdi blog makalelerini çekmeye hazırız!

WordPress Hizmetini Oluşturma

Görünümü oluşturmaya başlamadan önce tüm verileri almak için mantığı oluşturuyoruz. Bir makale listesi almak için basitçe bir çağrı yapacağız. Ancak siz temel olarak kategoriler, etiketler, sayfalar gibi WordPress API’sından tüm verileri alabilirsiniz…

Çağrıları bir seferde sadece 5 makale almakla sınırlayacağız ve ayrıca sayfa parametresini de kullanacağız, böylece daha sonra listemize harika bir yükleme ekleyebiliriz.

Bunun yanında, API’nın gerçekte kaç sayfa/sonuç elde ettiğini bilmek istiyorsanız, başka bir değişiklik yapmamız gerekiyor:

İlk olarak, observe key (gözlemleme anahtarı) seçeneklerimize eklemek ve yanıtı (response) değer olarak iletmek zorundayız. Ancak bu bir TypeScript hatasıyla sonuçlandığından, aynı zamanda “body” olarak sahip olmamız gerekir. Belki de bu sorun yakında çözülür.

API çağrısının cevabı normalden daha fazla bilgi tutar. Ayrıca başlık alanlarını da içerir! İhtiyaç duyduğumuz gerçek bilgileri x-wp-totalpages ve x-wp-total ile bulacağız.

app/services/wordpress.service.ts dosyamızı düzenleyelim.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class WordPressService {

  url = 'https://www.teknoreel.com/wp-json/wp/v2/';
  totalPosts = null;
  pages: any;

  constructor(private http: HttpClient) { }

  getPosts(page = 1): Observable<any[]> {
    let options = {
      observe: "response" as 'body',
      params: {
        per_page: '5',
        page: '' + page
      }
    }
 
    return this.http.get<any[]>(this.url + 'posts?_embed', options).pipe(
      map(resp => {
        this.pages = resp['headers'].get('x-wp-totalpages');
        this.totalPosts = resp['headers'].get('x-wp-total');
 
        let data = resp['body'];
 
        for (let post of data) {
          post.media_url = post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url;
        }

        return data;
      })
    )
  }
}

Tabii ki kendi WordPress blog URL’nizi girdiğinizden emin olun.

Artık her şeyi hazırladık ve WordPress makalelerini kolayca görüntülemek için işlevlerimizi kullanabiliriz!

WordPress Makalelerini Listeleme

İlk olarak avuç dolusu yazılarımızı en baştan yüklememiz gereken listeyle başlıyoruz. Bu noktada, daha önce aldığımız sayı ve sayfa değişkenine de erişebiliyoruz. Ancak burada gerçekten fazla kullanmayacağız.

Bunun nedeni, listenin sonuna ulaştığımızda (veya yaklaştığımızda) yeni makaleleri otomatik olarak yükleyecek olan görünüşün içine infinite scrolling (sonsuz kaydırma) uygulayabilmemizdir!

Aynı zamanda mevcut sayfayı takip etmemizin sebebi de budur. Bunu ayrıca, bir web sitesinde kullanıldığı gibi bir tür sayfalandırma ve sayfa sayısıyla da yapılandırabilirsiniz. Ancak buradaki kalıp, mobil uygulama için daha anlamlı olur.

Son olarak sayfanın sonuna ulaşırsanız, loadMore() fonksiyonumuzda yaptığımız gibi sonsuz yüklemeyi de devre dışı bırakmalısınız.

Şimdi app/blog/blog.page.ts dosyamızı düzenleyelim.

import { Component, OnInit } from '@angular/core';
import { WordPressService } from '../services/wordpress.service';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-blog',
  templateUrl: 'blog.page.html',
  styleUrls: ['blog.page.scss']
})
export class BlogPage implements OnInit {

  posts = [];
  page = 1;
  count = null;

  constructor(
    private wp: WordPressService,
    private loadingCtrl: LoadingController
  ) {}

  ngOnInit() {
    this.loadPosts();
  }

  async loadPosts() {
    let loading = await this.loadingCtrl.create({
      message: 'Makaleler Yükleniyor...'
    });

    await loading.present();
 
    this.wp.getPosts().subscribe(res => {
      this.count = this.wp.totalPosts;
      this.posts = res;
      loading.dismiss();
    });
  }

  loadMore(event) {
    this.page++;
 
    this.wp.getPosts(this.page).subscribe(res => {
      this.posts = [...this.posts, ...res];
      event.target.complete();
 
      // Maksimum veriye ulaşıldığında sonsuz yüklemeyi devre dışı bırak
      if (this.page == this.wp.pages) {
        event.target.disabled = true;
      }
    });
  }

}

Bu alanların bazıları HTML karakterleri içeriyor, bu yüzden bazen elementlerin innerHTML’sini kullanıyoruz ve daha sonra doğru görüntülenecek olan değeri doğrudan kullanıyoruz.

Sonsuz yükleme yapmak istiyorsanız, bunu sayfanızın en altına ekleyin ve uygun yükleme işlevini ekleyin. Belgelerde açıklandığı gibi bir metin veya yükleme göstergesi de tanımlayabilirsiniz!

app/blog/blog.page.html dosyamızı düzenleyelim.

<ion-header no-border class="bar bar-subheader">
  <ion-toolbar mode="ios">
    <ion-title>
      Blog
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div text-center *ngIf="count">{{ count }} makele bulundu</div>

  <ion-card *ngFor="let post of posts">
    <ion-card-header>
      <ion-card-title [innerHTML]="post.title.rendered"></ion-card-title>
      <ion-card-subtitle>{{ post.date_gmt | date }}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <img [src]="post.media_url">
      <div [innerHTML]="post.excerpt.rendered"></div>
      <ion-button expand="full" fill="clear" [routerLink]="['/', 'posts', post.id]" text-right>
        Devamını Oku...
      </ion-button>
    </ion-card-content>
  </ion-card>
 
  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadMore($event)">
    <ion-infinite-scroll-content loadingText="Daha fazla makale yükleniyor...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

Sonuç

WordPress REST API’sini kullanmak için bir pakete ihtiyacınız yok. Referanslarında açıklandığı gibi son noktalara çağrı yapın ve bu verileri doğrudan Ionic uygulamanızın içinde kullanın!

Bunu genişletmenin ve WordPress verilerinin desteklediği Ionic uygulamalarını geliştirmenin pek çok yolu var.

Kaynak: https://devdactic.com/ionic-4-wordpress-client

Yayınlayan

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir