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

Ionic 4 İle Mobil Uygulama Geliştirin

Bu makalede, bir mobil uygulamanın kimlik doğrulama gibi içerik besleme ve alt kısımları içeren üst kısımlar gibi tüm temel işlevleri olan Ionic 4, Angular 7 ve TypeScript kullanarak bir mobil uygulamanın nasıl oluşturulduğunu göreceksiniz.

Bir önceki makalemde Ionic 4’e Giriş yapmıştık. Okumayanlar için bu makaleyi okumadan önce bir önceki makaleyi okumalarını tavsiye ederim.

Mobil uygulamayı oluşturmak için aşağıdaki adımları izleyin:

  • Tabs (Sekme) şablonuyla boş bir uygulama oluşturma
  • Sekmeleri yeniden adlandırma.
  • Üst kısım (Header) ve menü ekleme.
  • Alt kısım (Sub header) ekleme.
  • Authentication Service (Kimlik Doğrulama Hizmeti), Guard (Koruma) ve LocalStorage (Yerel Depolama) ekleme.
  • Blog içeriği ve kart listesi ekleme.

Sekme Şablonuyla Boş Bir Uygulama Oluşturma

Sekmeler şablonunu kullanarak boş bir Ionic uygulaması oluşturun. Boş uygulamayı oluşturmak için “ionic start” komutunu çalıştırın ve uygulamayı “ionic serve” ile çalıştırın.

$ ionic start teknoreel tabs --cordova
? Install the free Ionic Appflow SDK and connect your app? No
$ cd ./teknoreel
$ ionic serve

Bu, varsayılan sekmeler uygulamasını oluşturur ve çalıştırır. Chrome tarayıcısında, Menü > Diğer Araçlar > Geliştirici Araçları yolunu izleyin. Tarayıcıda geliştirici araçları açılacak. Uygulamaya geri dönün ve bir mobil uygulama düzenine geçmek için toggle device toolbar (cihaz geçiş araç çubuğu) düğmesine tıklayın.

Sekmeleri Yeniden Adlandırma

“Tab One, Tab Two ve Tab Three” yerine “Blog, Sohbet ve Profil” için sekmeler oluşturmak istiyorum. Tabi ki varsayılan sekmeleri silip yenilerini oluşturabilirim. Bunun yerine, varsayılan sekmeleri yeniden adlandırmayı seçiyorum.

Bunu yapmak için src/app altındaki tüm dosya ve klasörleri düzenleyin. Örneğin, tab1 klasörünü blog ile yeniden adlandırın. “blog” klasörünün altındaki tüm dosyaların tab1 yazan kısmını blog yazarak değiştirin. Bunun gibi diğer tab2 (chat) ve tab3 (profile) klasörlerini ve altındaki dosyaları düzenleyin.

Düzenleme işlemi bittikten sonra app/tabs/tabs.router.module.ts dosyasını açın ve aynı şekilde “tab1, tab2 ve tab3” yazan yerlere “blog, chat ve profile” yazarak değiştirin. Son olarak aşağıdaki koda benzer kod satırlarını gösterdiğim gibi değiştirin.

loadChildren: '../blog/blog.module#Tab1PageModule'
loadChildren: '../blog/blog.module#BlogPageModule'
Ionic 4 Uygulama Dizini
Uygulama Dizini

Hadi sekmedeki yazıları ve ikonları değiştirelim. Bu HTML dilini bilenlere oldukça kolay gelecektir. Öncelikle src/app/tabs/tabs.page.html dosyasını açın. <ion-label>Tab One</ion-label> kod satırı sekmedeki yazıyı oluşturur. Bunun içerisine “Blog” yazalım. İkonlar için ise <ion-icon name=”ikon adı”></ion-icon> kod satırını değiştireceğiz. “ikon adı” yazan yere gözükmesini istediğiniz ikon adını yazabilirsiniz. Ionicons kütüphanesinden tüm ikonları görüntüleyebilir ve dilediğinizi kullanabilirsiniz.

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="blog">
      <ion-icon name="paper"></ion-icon>
      <ion-label>Blog</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="chat">
      <ion-icon name="chatbubbles"></ion-icon>
      <ion-label>Sohbet</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
      <ion-label>Profil</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Değişiklikleri kaydettiğinizde, Ionic tarayıcınızdaki uygulamayı otomatik olarak yeniden derler ve yeniler.

Ionic Sekmeleri Yeniden Adlandırma ve İkonları Değiştirme

Üst Kısım ve Menü Ekleme

Şimdi, uygulamada gösterilen Ayarlar, Profil ve Çıkış için menü öğeleri içeren bir üst kısım eklemek istiyorum. Ayrıca her sekme için bir alt kısım eklemek istiyorum.

Ancak, “Ayarlar” sayfası açıldığında, herhangi bir uygulama üst kısmının gösterilmesini istemiyorum. “Profil” sayfası alt kısmına sahip bir sekme sayfasıdır ve “Çıkış” yalnızca varsayılan “Blog” sayfasına yönlendiren bir işlev çağrısıdır. “Ayarlar” sayfası ise sekmeler yığınının dışındaki yeni bir sayfadır.

Üst kısmımı sekmelere bileşen düzeyinde ekliyorum. Çünkü uygulamaya bileşen düzeyinde eklersem, tüm sayfalar için gösterilecek. Ancak dediğim gibi, üst kısmın “Ayarlar” gibi bazı sayfalarda gösterilmesini istemiyorum.

Sekmelere bileşen düzeyinde bir üst menüsüne sahip bir üst kısım eklemek için src/app/tabs/tabs.page.html dosyasını düzenleyin. “ion-menu” ve “ion-header” ekleyin. “ion-tabs” içinde, “ion-header” olan sekme alt kısmı için bir filler (dolgu) üst kısmı veya placeholder (yer tutucu) ekleyin.

<ion-menu side="start" type="overlay" menuId="mainMenu" class="main-menu">
  <ion-header>
    <ion-toolbar>
      <ion-title>Ana Menü</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item href="settings" routerDirection="root">
        Ayarlar
      </ion-item>
      <ion-item href="tabs/profile" routerDirection="root">
        Profil
      </ion-item>
      <ion-item (click)="logout()">
        Çıkış Yap
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-header no-border>
  <ion-toolbar mode="ios">
    <ion-title>Teknoreel</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-tabs main>

  <ion-header no-border>
    <ion-toolbar></ion-toolbar>
  </ion-header>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="blog">
      <ion-icon name="paper"></ion-icon>
      <ion-label>Blog</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="chat">
      <ion-icon name="chatbubbles"></ion-icon>
      <ion-label>Sohbet</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
      <ion-label>Profil</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Dolgu üst kısmı, alt kısmı doğrudan üst kısmın altına yerleştirir. Bu dolgu üst kısmı veya yapay üst kısmı kaldırırsanız, alt kısım katmanının altında konumlandırılır ve bir nevi görünmez olur.

Ayrıca üst kısım menüsünü uygulama bileşeni düzeyinde eklemeye karar verebilirsiniz. Bu durumda hem bağımsız sayfalar hem de sekmelerdeki tüm bileşenler üst kısmı görüntüler. Bunu yapmak için yukarıdakileri “tabs.page.html” yerine src/app/app.component.html dosyasında düzenleyin.

“Ayarlar” menü öğesini “href=”settings” özelliğine bağlamak için yeni bir “Ayarlar” sayfası oluşturun.

$ ionic g page settings

src/app/tabs/tabs.page.ts dosyasındaki “TabsPage” sınıfına bir logout() metodu ekleyin.

export class TabsPage {

  constructor() {}

  logout() {
    console.log("Çıkış yapıldı");
  }

}

Uygulamayı tekrar başlatın.

$ ionic serve
Ionic 4 Yan Menü (Ana Menü)

Alt Kısım Ekleme

Halen her sekme için alt kısma ihtiyacımız var. Sekme sayfalarının her birinde, alt kısmı style (stil) ile düzenleyin. Örneğin, src/app/chat/chat.page.html dosyasını düzenleyin.

<ion-header no-border>
  <ion-toolbar mode="ios">
    <ion-title>
      Sohbet
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content></ion-content>

“no-border” üst kısmın altındaki alt gölge resmini kaldıracak. mode=”ios”, Android’de üst kısmın başlığını ortalar.

Aynısını “blog” ve “profil” için de yapın.

Ionic 4 Boş Blog Sayfası

Authentication Service, Guard ve LocalStorage Ekleme

“Sohbet”, “Profil” ve “Ayarlar” sayfalarını yalnızca kimliği doğrulanmış kullanıcılar tarafından erişilebilir olarak korumak istiyorum. “Blog” sayfası her zaman görüntülenmelidir. Kimliği doğrulanmamış bir kullanıcı korumalı bir sayfaya erişmeye çalışırsa, “Giriş” sayfasına yönlendirilmelidir.

Öncelikle, sayfaları korumak için bir giriş ve bir kayıt sayfası, ayrıca bir kimlik doğrulama servisi ve kimlik doğrulama görevlisi oluşturun.

$ ionic g page auth/login
$ ionic g page auth/register
$ ionic g service services/authentication
$ ionic g guard services/auth

“src/app/auth/login/login.page.html” dosyasını düzenleyin.

<ion-header no-border>
  <ion-toolbar mode="ios">
    <ion-title>Giriş Yap</ion-title>
    <ion-buttons slot="start">
      <ion-button (click)="goHome()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row justify-content-center>
      <ion-col align-self-center>
        <ion-item>
          <ion-label stacked>Kullanıcı Adı</ion-label>
          <ion-input [(ngModel)]="username"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label stacked>Parola</ion-label>
          <ion-input type="password" [(ngModel)]="password"></ion-input>
        </ion-item>
        <ion-button (click)="login()" expand="block">
          Giriş Yap
        </ion-button>
        <ion-button expand="block" color="secondary" routerLink="/register" routerDirection="forward">
          Kaydol
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

“src/app/auth/login/login.page.ts” dosyasını düzenleyin.

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AuthenticationService } from '../../services/authentication.service';

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

  private username: string;
  private password: string;

  constructor(
    private activatedRoute: ActivatedRoute,
    private authService: AuthenticationService,
    public router: Router
  ) { }

  ngOnInit() {
  }

  login() {
    this.authService.login(this.username, this.password);
    this.username = null;
    this.password = null;
    this.goHome();
  }

  goHome() {
    this.router.navigateByUrl('tabs/blog');
  }

}

register.page.html dosyasını düzenleyebilirsiniz ancak şimdilik kayıt sayfasını boş bıraktım. Giriş örneğini takip edebilmeli ve kendi başınıza uygulayabilmelisiniz. Doğrulama akışının şu anda uygun bir back-end (arka yüz)’i olmadığından, uygun bir back-end hizmeti eklendiğinde daha sonra yapılması üzerine bıraktım.

“src/app/services/auth.guard.ts” dosyasını düzenleyin.

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthenticationService } from './authentication.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate  {

  constructor(
    public auth: AuthenticationService, public router: Router
  ){}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return new Promise( (resolve, reject) => {
      this.auth.isAuthenticated()
      .then( isAuthenticated => {
        if (!isAuthenticated) {
          this.router.navigate(['login']);
        }
        resolve(true);
      })
      .catch( error => {
        return (false);
      });
    });
  }

}

“@ionic/storage” NPM modülünü kurun.

$ npm install --save @ionic/storage

“src/app/services/authentication.service.ts” dosyasını düzenleyin.

import { Platform } from '@ionic/angular';
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { BehaviorSubject } from 'rxjs';

const TOKEN_KEY = 'auth-token';

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

  authenticationState = new BehaviorSubject(false);

  constructor(
    private storage: Storage, private platform: Platform
  ) {
    this.platform.ready().then(() => {
      this.checkToken();
    });
  }

  checkToken() {
    return new Promise( (resolve, reject) => {
      this.storage.get(TOKEN_KEY)
      .then(res => {
        if (res) {
          this.authenticationState.next(true);
        }
        resolve(res);
      })
      .catch( error => {
        reject(error);
      });
    });
  }

  login(username, password) {
    const accessToken = btoa(username + ':' + password);
    const token = 'Bearer ' + accessToken;
    return this.storage.set(TOKEN_KEY, token).then(() => {
      this.authenticationState.next(true);
    });
  }

  logout() {
    return this.storage.remove(TOKEN_KEY).then(() => {
      this.authenticationState.next(false);
    });
  }

  isAuthenticated() {
    return new Promise( (resolve, reject) => {
      this.checkToken()
      .then( res => {
        resolve(this.authenticationState.value);
      })
      .catch( error => {
        reject(error);
      });
    });
  }
}

Web’de veya Progressive Web App (Web Uygulaması) olarak çalışırken, Storage, IndexedDB, WebSQL ve localstorage öğelerini bu sırayla kullanmaya çalışır. AccessToken için temel kimlik doğrulamasını bir Base64 şifreli kullanıcı adı + ’:’ + şifre dizesiyle kullandım. Burada eksik olan, giriş bilgilerini bir kimlik doğrulama back-end’e karşı kontrol etmenin ve AccessToken’in bir son kullanma süresiyle depolanmasıdır. Ancak bu makalede back-end eksik olduğundan, şimdilik olduğu gibi bıraktım.

logout() ve constructor() metodunu değiştirin ve goHome() metodunu “src/app/tabs/tabs.page.ts” dizinine ekleyin.

import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { Router } from '@angular/router';
import { AuthenticationService } from '../services/authentication.service';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {

  constructor(
    private authService: AuthenticationService,
    public menuCtrl: MenuController,
    public router: Router
  ) {}

  logout() {
    this.authService.logout();
    this.menuCtrl.close('mainMenu');
    this.goHome();
  }

  goHome() {
    this.router.navigateByUrl('tabs/blog');
  }

}

“src/app/app.module.ts” dosyasına “IonicStorageModule” sınıfını dahil ederek depolamayı başlatın.

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';

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

Son olarak “Sohbet”, “Profil” ve “Ayarlar” sayfalarının korumasını yapalım. “app-routing.module.ts” dosyasını düzenleyin ve canActivate: [AuthGuard] özelliğini gerekli rotalara (routes) ekleyin.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

import { AuthGuard } from './services/auth.guard';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule', canActivate: [AuthGuard] },
  { path: 'login', loadChildren: './auth/login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './auth/register/register.module#RegisterPageModule' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Ve “src/app/tabs/tabs.router.module.ts” dosyasını düzenleyin.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

import { AuthGuard } from '../services/auth.guard';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'blog',
        children: [
          {
            path: '',
            loadChildren: '../blog/blog.module#BlogPageModule',
          }
        ]
      },
      {
        path: 'chat',
        children: [
          {
            path: '',
            loadChildren: '../chat/chat.module#ChatPageModule',
            canActivate: [AuthGuard]
          }
        ]
      },
      {
        path: 'profile',
        children: [
          {
            path: '',
            loadChildren: '../profile/profile.module#ProfilePageModule',
            canActivate: [AuthGuard]
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/blog',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/blog',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Uygulamayı tekrar başlatın.

Chrome tarayıcısında, “Menü > Diğer Araçlar > Geliştirici Araçları” yolununu izleyin ve uygulamaya geri dönün.

Ionic 4 Boş Local Storage (Yerel Depolama)

Giriş yaptıktan sonra, token (belirteç) yerel depoda saklanır ve sohbet ve profil sekmelerine erişebilirsiniz.

Ionic 4 Dolu Local Storage (Yerel Depolama)

Blog İçeriği ve Kart Listesi Ekleme

“blog.page.ts” dosyasına geçici test verileri ekleyin.

import { Component, OnInit } from '@angular/core';

const data = [
  {
    id: '1',
    title: 'En İyi Oyun Motoru Seçimi',
    category: 'Oyun Motoru',
    published: {
      month: 'Temmuz',
      day: '1',
      year: '2019'
    },
    thumbnail: 'https://www.teknoreel.com/wp-content/uploads/2019/07/oyun-motoru.png',
    text: 'Doğru oyun motorunu seçmek, bir oyun geliştiricisinin ürününden en iyi sonucu almak için vermesi gereken en önemli karardır.'
  },
  {
    id: '2',
    title: 'Web İçin Hangi Yazılım Dilini Kullanmalıyız',
    category: 'Yazılım Genel',
    published: {
      month: 'Haziran',
      day: '27',
      year: '2019'
    },
    thumbnail: 'https://www.teknoreel.com/wp-content/uploads/2019/06/web-tasar%C4%B1m%C4%B1.jpg',
    text: 'Web için hangi yazılım dilini kullanmalıyız sorusu Webmaster adaylarının en temel sorularından bir tanesidir. Frontend için CSS de ne kullanmak gerekir, veya Javascript mi yoksa js tabanlı ağır kütüphaneler mi, backend için PHP mi ASP mi soruları uzar gider.'
  }
];

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

  articles: any = [];

  constructor() {}

  ngOnInit() {
    this.articles = data;
  }

  openArticle(index: number) {
    console.log("Hop!");
  }

}

“blog.page.html” dosyasını düzenleyin ve makalelerdeki her makale için bir öğe listesi ekleyin.

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

<ion-content>
    <ion-list lines="none">
        <ion-item *ngFor="let a of articles; let i = index" (click)="openArticle(i)">
            <ion-card>
                <ion-card-header>
                    <ion-grid>
                        <ion-row>
                            <ion-col size="3" class="date-label">
                              <ion-row class="date-label-month">{{ a.published.month }}</ion-row>
                              <ion-row class="date-label-day">{{ a.published.day }}</ion-row>
                              <ion-row class="date-label-year">{{ a.published.year }}</ion-row>
                            </ion-col>
                            <ion-col size="9">
                              <ion-row>
                                <ion-card-title>{{ a.title }}</ion-card-title>
                              </ion-row>
                              <ion-row>
                                <ion-card-subtitle>{{ a.subtitle }}</ion-card-subtitle>
                              </ion-row>
                            </ion-col>
                        </ion-row>
                    </ion-grid>
                </ion-card-header>
                <ion-img [src]="a.thumbnail"></ion-img>
                <ion-card-content>
                  <p>{{ a.text }}</p>
                </ion-card-content>
            </ion-card>
        </ion-item>
    </ion-list>
</ion-content>

Artık uygulamayı tamamlamak için tüm özelliklere ve uygulamalara sahipsiniz. Sonraki bölümde, uygulamanın sohbet, profil ve ayar sayfalarını tamamlayacağım ve kimlik doğrulama, blog için bir filtreleme ekleyeceğim.

Kaynak: https://medium.com/nycdev/create-a-full-mobile-app-with-ionic4-2849df0d47c3

Ionic 4’e Giriş

Bu yazıda, Ionic 4’ün yeni özelliklerini öğreneceğiz ve sonunda Ionic CLI (Komut Satırı Yardımcı Programı) v4’ü nasıl kurup kullanacağınızı öğreneceksiniz.

Ayrıca Stencil, Capacitor (Native web bileşenleri oluşturmak için hazırlanan araçlar), shadow DOM ve CSS değişkenleri gibi modern tarayıcı teknolojileri gibi yeni araçlardan oluşan yeni Ionic 4 ekosistemini tanıyacaksınız.

Ionic 4, Ionic’in en yeni ve en iyi Ionic sürümüdür! Modern tarayıcı teknolojilerini ve aynı zamanda yeni Angular 7 araçlarını ve özelliklerini kucaklayan bir mobil UI (Kullanıcı Arayüzü) kütüphanesidir.

Ionic 4, mobil uygulamaları oluşturmak için tercih ettiğiniz JavaScript veya TypeScript front-end (ön yüz) kitaplığını veya Angular, Vue, Preact, React veya jQuery gibi bir kodlama yöntemini kullanmanıza izin verir.

Ionic şimdilik framework-agnostic (agnostik kodlama yöntemi) olmasına rağmen, hala Ionic ile Angular kullanmak isteyen Ionic geliştiriciler, Ionic ekibinden, Ionic 3 ve önceki sürümlerde olduğu gibi, ionic/angular paketi ile destek alacaktır.

Şimdi yeni Ionic’in arkasındaki teknolojileri tanıyalım.

Stencil

Stencil, Ionic ekibi tarafından oluşturulan Ionic Core’u standart uyumlu web bileşenleri ile kolayca kurmalarına yardımcı olmak için oluşturulan açık kaynaklı bir araçtır.

Stencil, JSX şablonları, yönlendirme, veri bağlama ve web bileşenlerini kolayca oluşturmak için dekoratörler ve dekoratörler gibi kodlama yapısına benzer yapıları kullanmanıza izin veren bir web bileşenleri derleyicisidir. Ancak uygulamanızın son hali tamamen modern ve yerel olarak çalışan web bileşenlerine dayanır.

Yeni Ionic perdenin arkasında Stencil kullanıyor. Bu, Ionic uygulamaları geliştirirken Stencil’i kullanmanıza gerek kalmaması anlamına geliyor; ancak Stencil’i, web bileşenlerini yazmak veya Ionic UI bileşenleriyle birlikte veya bunlar olmadan tam Progressive Web Uygulamaları oluşturmak için kullanabilirsiniz.

Web Bileşenleri

Web bileşenleri, W3C tarafından tanımlanan bir dizi standarttır. Front-end geliştiricilerin, modern web tarayıcıları tarafından doğal olarak yorumlanan bileşenler oluşturmasına olanak tanır.

Web bileşenleri ile ilgili teknolojiler arasında Custom Elements (Özel Öğeler) ve Shadow DOM bulunur.

Custom Elements

Custom Elements‘i kullanarak, HTML’yi genişletebilir ve yeni etiketler oluşturabilir veya diğer geliştiriciler tarafından geliştirilen bileşenleri yeniden kullanabilir ve genişletebilirsiniz. Bu yerel tarayıcı API, web bileşenlerinin temelidir. HTML ve CSS ile vanilla JavaScript kullanarak yeniden kullanılabilir bileşenler oluşturmanın yerel bir yolunu sağlar.

Custom Elements sayesinde, Ionic UI bileşenlerini modern web tarayıcılarında herhangi bir kodlama yöntemi veya çalışma zamanı olmadan doğal olarak yeniden kullanabiliriz.

Shadow DOM

Shadow DOM, DOM öğelerinin ve CSS stillerinin bir HTML belgesindeki diğer koddan bağımsız olarak enkapsüle edilmesini sağlayan başka bir yerel tarayıcı API’sidir. Element.attachShadow() yöntemini kullanarak bir öğeye gizli bir DOM (called shadow root) eklemenin bir yolunu sağlar.

Shadow DOM’u kullanmak, CSS stillerini içine alarak Ionic UI bileşenlerini herhangi bir web uygulamasından kolayca tüketmenize yardımcı olur.

CSS Değişkenleri / Özellikleri

Değişkenlerin yazılı değerleri tutmak için kullanıldığı tipik programlama dillerinde olduğu gibi, benzer şekilde renkler, genişlikler, yükseklikler ve yazı tipi özellikleri gibi CSS’de değerleri depolamak için kullanılabilir. Geliştiriciler artık CSS değişkenlerini tanımlayabiliyor, daha sonra bu belgeye referans veriyor ve yeniden kullanıyor. Ayrıca dinamik temalar gibi gelişmiş özellikler eklemek için daha fazla araştırılabilecek olan JavaScript’ten de erişilebilir.

Ionic’de, CSS değişkenleri, temanın bileşenleridir. Geliştiriciler, Sass ve karmaşık yapı araçlarına başvurmadan, yalnızca birkaç değişkeni değiştirerek kullanıcı arayüzünün genel görünümünü kolayca değiştirebilirler.

Ionic Native (Yerel)

Ionic Native, Ionic mobil uygulamanıza kolayca yerel cihaz (Android ve iOS) işlevleri eklemek için Cordova eklentileri için bir TypeScript sarıcı sağlar. Temelde topluluk tarafından korunan eklentiler kümesidir.

Ayrıca sürüm 5 ile başlayanlar için Ionic Native kodlama yönteminden bağımsızdır. Bu, şimdi sarmalayıcıları Angular’ın dışında kullanabileceğiniz anlamına gelir. Yeni Native API Docs (Yerel API Belgeleri)’a göz atın.

Ionic 4’e Geçiş

Geçiş kılavuzunu izleyerek mevcut Ionic 3 uygulamanızı Ionic/Angular v4 uygulamasına geçirebilir ve bu resmi geçiş aracıyla değişikliklerin çoğunu otomatik olarak tespit ederek bazı sorunları otomatik olarak giderebilirsiniz.

Ionic CLI ile Yeni Bir Ionic Proje Oluşturma

Ionic Komut Satırı Yardımcı Programı veya CLI, Ionic ve Cordova’ya dayalı mobil uygulamalar oluşturmak için Ionic ekibi tarafından geliştirilen resmi ve birincil araçtır.

Ionic CLI’yi birçok farklı bazlı proje üretmek için kullanabilirsiniz. Aynı zamanda şunlar için kullanılabilir:

  • Yerel olarak uygulama sunma.
  • Emülatörlerde veya gerçek cihazlarda çalışan uygulamalar.
  • Son paketlerin oluşturulması.
  • Sayfalar gibi çeşitli özellikler üretmek.
  • Ionic Pro servislerine bağlanma.

Ionic CLI v4, mobil (Android ve iOS), masaüstü (Electron sayesinde) ve web (PWAs) için cross-platform (çapraz platform) uygulamaları oluşturmak için Ionic ekibi tarafından oluşturulan Cordova’ya yeni bir alternatif olan Capacitor için deneysel destek gibi yeni özelliklerle geliyor.

Ionic CLI v4 Kurulumu

Ionic/Angular v4 projeleri üretmek için, Ionic CLI v4’ü kurmanız gerekir. CLI’yı yüklemeden önce, aşağıdaki gereksinimlerin bulunduğundan emin olun:

  • Node.js ve npm’nin en son sürümü. Node.js dosyasının kurulu olup olmadığını kontrol etmek için node –version komutunu çalıştırabilirsiniz. Değilse, resmi web sitesine gidin ve sisteminize uygun dosyaları indirin ve kurun.
  • Android’i hedeflemek istiyorsanız, Java ve Android SDK’nın yüklü olması gerekir. JDK 8’i resmi web sitesinden ve Android SDK’yı indirmek için kullanılan Android Studio’nun resmi web sitesinden indirebilirsiniz. Ayrıca, ANDROID_SDK_ROOT gibi ortam değişkenlerini yapılandırdığınızdan emin olun.
  • İOS’u hedeflemek istiyorsanız, Xcode IDE ile bir macOS’a sahip olmanız gerekir. Xcode’u resmi web sitesinden veya Apple Store’dan indirebilirsiniz.

Şimdi, aşağıdaki komutu kullanarak Ionic CLI’yi npm’den global olarak yükleyebilirsiniz:

npm install -g ionic

Npm yapılandırmanıza bağlı olarak, paketleri global olarak yüklemek istiyorsanız sudo’yu Linux/Mac’ta kullanmanız veya Windows’ta yönetici komut istemini kullanmanız gerekebilir.

Yeni Bir Proje Oluşturmak

Ionic CLI v4’ü kurduktan sonra, ionic start komutunu kullanarak yeni bir Ionic projesi oluşturabilir ve adı ve başlangıç şablonunu belirleyerek:

  • Blank starter (Boş başlangıç): Bir ana sayfa içeren boş bir proje.
  • Tabs starter (Sekmeli başlangıç): Sekmeleri olan basit bir proje.
  • Sidemenu starter (Yan menülü başlangıç): Bir yan menü ile basit bir proje.

Ayrıca, Ionic CLI v4’te yeni olan –type=angular seçeneğiyle kullanılacak kodlama türünü belirtmeniz gerekir (şimdilik CLI yalnızca Angular’ı destekler).

Terminalinize gidin ve aşağıdaki komutu çalıştırın:

ionic start myApp blank --type=angular

CLI size Cordova’yı entegre etmek isteyip istemediğinizi soracaktır. Native (Yerel) iOS ve Android’i hedeflemek istiyorsanız Evet’i veya Ionic ile Progressive Web App oluşturmak istiyorsanız Hayır’ı seçin.

Ionic 4 Angular Şablonu

Dizin yapısından bir ekran görüntüsü:

Ionic 4 Dizin Yapısı

Yapacağınız işlerin çoğu, kök uygulama bileşenini, modülünü, sayfalar ve bileşenler için diğer tüm dizinleri içeren src/app/ klasöründe olacaktır.

Uygulamayı Test Etmek

Ionic uygulamanızı doğrudan tarayıcıda ionic service komutunu kullanarak çalıştırabilir ve hata ayıklayabilirsiniz. Bu, hybrid mobile development (hibrit mobil geliştirmenin) yararlarından biridir. Yerel cihaz özelliklerini test etmek zorunda kalana kadar (emülatörleri veya gerçek mobil cihazları kullanmanıza gerek yoktur).

Terminalinize geri dönün, projenizin içine girin ve aşağıdakileri kullanarak uygulamanızı test edin:

cd myApp
ionic serve

Artık uygulamanızı localhost: 8100 adresinden görüntüleyebilirsiniz.

Ionic 4 Boş Uygulama Görünümü

Son uygulamayı oluşturmak için ionic build komutunu kullanabilirsiniz. Kullanılabilir tüm komutları dokümanlardan kontrol edin.

Sonuç

Bu yazıda, yeni güçlü özelliklerin arkasındaki araç ve teknolojileri içeren yeni Ionic 4 kütüphanesini ve yeni ekosistemini tanıdınız. Ayrıca Ionic CLI v4’ü kurduk, Angular’a dayalı yeni bir proje oluşturup sunduk. Benzer şekilde, şimdi yeni bir Ionic 4 uygulaması oluşturabilmeli ve Ionic CLI v4’ü kullanabilmelisiniz.

Kaynak: https://blog.jscrambler.com/introduction-to-ionic-4