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

Temel PHP Örnekleri

Bu makalede kendi hazırladığım temel PHP örneklerini göstereceğim. Bu örnekleri not alarak veya bu sayfayı yer işaretlerine ekleyerek unuttuğunuz noktalara tekrardan göz atabilirsiniz.

Örnekler, ne kadar temel olsa da PHP dilini tam anlamıyla kavramanıza yardımcı olacaktır. Şimdi 12 bölüme ayrılan örnekleri inceleyelim.

  • If-Else
  • Switch-Case
  • For Döngüsü
  • While Döngüsü
  • Operatörler
  • If Deyimi İle Kullanılan Komutlar
  • Diziler (Arrays)
  • Fonksiyonlar
  • Form İşlemleri
  • Zaman Fonksiyonları
  • Dosya ve Dizin İşlemleri
  • Dosya Yükleme

If-Else

Daha önce C# dilini gördüyseniz If-Else mantığı ile yazılan kontrol yapılarını aynı yöntem ile yazabilirsiniz.

<?php

	$yas = 33;

	if ($yas < 18) {
		echo "Yaşınız 18 den küçük";
		echo "<br>";
		echo "Bu siteye girmeniz yasaktır.";
	}else {
		echo "Web sitemize hoş geldiniz."
	}

?>

Bu tür kontrol yapılarını basit bir web sitesinden tutun Facebook, YouTubevb. popüler web siteleri oldukça fazla kullanmaktadır.

<?php

	$cinsiyet = "erkek";
	$boy = 1.60;
	$kilo = 50;

	if ($cinsiyet == "erkek") {

		if ($boy >= 1.80){

			if ($kilo <= 90){
				echo "Aranan eleman bulundu.";
			}else {
				echo "Kilonuz 90 kg olmadığı için <br>";
				echo "Şartı sağlayamadınız.";
			}

		}else {
			echo "Boyunuz 1.80  olmadığı için <br>";
			echo "Şartı sağlayamadınız.";
		}

	}else {
		echo "Cinsiyetiniz erkek olmadığı için <br>";
		echo "Şartı sağlayamadınız.";
	}

?>

Not: Bu tür uzun koşul belirtilen kodlarda, en dışarıdan yazılan koşuldan başlayarak adım adım gitmenizi öneririm.

Switch-Case

Bir önceki If-Else kontrol yapısına oldukça benzemektedir. Tek farkı koşul sadece değişkenin değeri için belirtilebilir.

<?php 

	$islem = "topla";

	switch ($islem){

		case "topla":
		$sayi1 = 1;
		$sayi2 = 2;
		echo $sayi1 + $sayi2;
		break;

		default:
		echo "İşlem geçersiz!";
		break;

	}

?>

For Döngüsü

Tüm programlama dillerinde öğretilen ilk döngü türüdür. Mantığını anladıktan sonra hiçbir zorluğu yoktur.

<?php 
	
	for ($i=1; $i < 5; $i++){
		echo $i; // Yapılacak işlemler
	}

	/*
		Bu döngüyü sırasıyla inceleyelim:
		1. $i değişkenine 1 sayısını atadık.
		2. $i değişkeni 5'den küçük olana kadar döndürdük.
		3. Döngü her döndüğünde $i değişkenini bir arttırdık.
		4. Döngü her döndüğünde ekrana $i değişkenini yazdırdık.
	*/

?>

While Döngüsü

Bir önceki For Döngüsü gibi mantığını anladıktan sonra hiçbir zorluğu yoktur. Bana göre programlamada kullanılan en basit döngü türü While döngüsüdür.

<?php 
	
	$i = 1;

	while ($i < 5){
		echo $i; // Yapılacak işlemler
	}

	/*
		Bu döngüyü sırasıyla inceleyelim:
		1. $i değişkenine 1 sayısını atadık.
		2. $i değişkeni 5'den küçük olana kadar döndürdük.
		3. Döngü her döndüğünde ekrana $i değişkenini yazdırdık.
		4. Döngü her döndüğünde $i değişkenini bir arttırdık.
	*/

?>

Uygulama

<?php 
	
	$i = 1;
	$toplam = 0;

	while ($i <= 10){

		echo $i;

		if ($i != 10){
			echo "+";
		}

		$toplam = $toplam + $i;

		$i++;

	}

	echo "=$toplam;"

	/*
		Bu uygulamayı sırasıyla inceleyelim:
		Amaç: 1'den 10'a kadar olan tüm sayıları ekrana yazdırıyor ve yanınada sayıların toplamını veriyor.
		1. $i değişkenine (Sayımız 1'den başlayacağı için) 1 sayısını atadık.
		2. $toplam değişkenine 0 sayısını atadık. (Döngü başlamadan önce tanıtmamız gerekiyor.)
		3. $i değişkeni, 10'dan küçük veya eşit olana kadar döndürdük.
		4. Döngü her döndüğünde ekrana $i değişkenini yazdırdık.
		5. $i değişkeni 10'a eşit değilse ekrana + işaretini yazdırdık.
		6. Döngü her döndüğünde $toplam değişkenine $i değişkeni ile kendisinin toplamını atadık.
		7. Döngü her döndüğünde $i değişkenini bir arttırdık.
		8. Döngü bittikten sonra ekrana $toplam değişkenini yazdırdık.
	*/

?>

Operatörler

<?php

	$a = 5;
	$b = 4;

	if ($a == $b){ // $a değişkeni $b'ye eşitse
		echo "Sayılar birbirine eşittir";
	}else {
		echo "Sayılar birbirine eşit değildir."
	}

?>
<?php

	$kadi = "Fatih";
	$sifre = 1453;

	if ($kadi == "Fatih" AND $sifre == 1453){ // AND komutu yerine && komutu da kullanılabilirdi.
		echo "Doğru giriş yaptınız.";
	}else {
		echo "Kullanıcı adı veya şifre yanlış.";
	}

?>

If Deyimi ile Kullanılan Komutlar

<?php

	isset() // Bu komut bir değişken tanımının içerisinde değer olup olmadığını kontrol eder.

	empty() // Bu ise isset ile aynı işi görür ama kontrolü tersten yapar.

?>
<?php

	$sifre = 1071;

	if (isset($sifre)){ // $sifre değişkeni dolu mu?
		echo "Değişkenin değeri var.";
	}else {
		echo "Değişkenin değeri yok.";
	}

?>
<?php

	$sifre = 1071;

	if (empty($sifre)){ // $sifre değişkeni boş mu?
		echo "Değişkenin değeri yok.";
	}else {
		echo "Değişkenin değeri var.";
	}

?>

Not: Unutmayın aslında boşluk karakteri de bir değerdir. Bu yüzden karşınıza $x = “” çıksa dahi değer var demektir.

Uygulama

Sayıları ekrana yazdırıp yanına toplamını yazdığımız uygulamaya çok benzemektedir. Ek olarak $harf değişkeni kullanılmıştır.

<?php 

	$harf = "a";
	$sayac = 0;

	while ($sayac < 26){

		echo $harf;

		if ($sayac != 25){
			echo "-";
		}

		$sayac++;
		$harf++;

	}

?>

Diziler (Arrays)

İki adet dizi türü vardır. Bunlar Tek Boyutlu ve Çok Boyutlu dizilerdir.

Tek Boyutlu Diziler

Sadece aynı özellikteki bir değer grubunu barındırmak için kullanılırlar.

Diziler tanımlarken array() fonksiyonu kullanılır.

<?php 
	
	// Bu örnekte günler, tek boyutlu bir dizi olup içerisinde 7 tane gün vardır

	$gunler = array("Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar");
	echo $gunler[2]; // Ekrana "Çarşamba" yazdırır.

?>
<?php 
	
	// For döngüsü ile dizi elemanlarını listelemek

	$ogrenciler = array("Emin Arif", "Kemal", "Ertuğrul", "Ubeytullah", "Erkan", "Hakan");
	
	for ($i=0; $i<count($ogrenciler); $i++){
		echo $ogrenciler[$i]."<br>";
	}

?>

Çok Boyutlu Diziler

<?php 

	$uyeler = array(
		array("isim" => "Yusuf", "yas" => 25, "memleket" => "Çankırı"),
		array("isim" => "Ahmet", "yas" => 20, "memleket" => "Van")
	);
	
	for ($i=0; $i<count($uyeler); $i++){
		echo $uyeler[$i]["isim"]." - ".$uyeler[$i]["yas"]." - ".$uyeler[$i]["memleket"]."<br>";
	}

?>

Fonksiyonlar

Kodlamayı kolaylaştırması ve hızlı derlenmesi için fonksiyonlar kullanılır. Fonksiyonlar bir kere tanımlanır ve defalarca, ihtiyaç olduğu noktada çağrılır. Genellikle bir iş veya hesaplama yapar ve sonucunu ortaya yeni bir değer olarak çıkartır. Bu değere “fonksiyondan dönen değer” denir.

<?php 

	function karebul($sayi) {
		return $sayi * $sayi; // Değer döndürür
	}

	$sonuc = karebul(5); // $sonuc değişkenini yazdırmak için "echo $sonuc" kullanılmalıdır!

?>
<?php 

	function sayi_topla($a, $b) {
		$topla = $a + $b;
		echo $topla; // Ekrana yazar
	}

	sayi_topla(3,5); // Ekrana yazdırmak için "echo" komutu gerekmez!

?>
<?php 

	function ucgen_alan_hesapla($a, $b) {
		$sonuc = $a * $b; // Uzun kenar ile kısa kenarı çarptık
		return $sonuc;
	}

	ucgen_alan_hesapla(5,3);

?>

Form İşlemleri

Web sitelerinde form gönderirken iki adet metot (yöntem) kullanırız. Bunlardan biri Get diğeri Post metodudur. Güvenlik açısından “Post Methodu” tercih edilir.

Get Metodu – HTML

<html>
<head>
	<title>Get Metodu</title>
</head>
<body>
	<form action="" method="get">
		<input type="text" name="metin">
		<input type="submit" value="Gönder">
	</form>
</body>
</html>

Get Metodu – PHP

<?php

	$metin = $_GET["metin"];
	echo $metin;

?>

Güvenlik açısından “Post Metodunun” tercih edilmesinin sebebi Form bilgilerini gönderirken adres çubuğunda parametreler görüntülenemez ve parametreler değişkene daha güvenli bir şekilde atanmış olur. Aşağıdaki resimde “Get Metodu” ile gönderilen bir formun adres çubuğu gösterilmiştir. Göründüğü gibi güvenlik yok denilecek kadar az.

Get Metodu Adres Çubuğu

Post Metodu – HTML

<html>
<head>
	<title>Post Metodu</title>
</head>
<body>
	<form action="" method="post">
		<input type="text" name="metin">
		<input type="submit" value="Gönder">
	</form>
</body>
</html>

Post Metodu – PHP

<?php

	$metin = $_POST["metin"];
	echo $metin;

?>

Zaman Fonksiyonları

Dizi mantığı ile çalışır. getdate() fonksiyonu kullanılır.

<?php 
	
	$tarih = getdate();

	echo $tarih["mday"]."."; // Gün
	echo $tarih["mon"]."."; // Ay
	echo $tarih["year"]."."; // Yıl
	echo $tarih["hours"]."."; // Saat
	echo $tarih["minute"]."."; // Dakika
	echo $tarih["seconds"]."."; // Saniye

?>

Dosya ve Dizin İşlemleri

file_exists(): Bir dosya veya klasörün var olup olmadığını kontrol eder. Dosya varsa true, yoksa false değerini döndürür.

<?php 
	
	$dizin = "resimler";

	if (file_exists($dizin)){
		echo "Dizin var";
	}else {
		echo "Dizin yok";
	}

?>

mkdir(): Klasör oluşturmak için mkdir() fonksiyonu kullanılır. Oluşturulan klasörün izin yetkisi parametre kısmında belirtilir. Varsayılan değer 0700’dır.

<?php 
	
	$klasor = "test";

	if (file_exists($klasor)){
		echo "Klasör zaten var!";
	}else {

		if (mkdir($klasor, 0700)){
			echo "Klasör oluşturuldu.";
		}else {
			echo "Klasör oluşturulamadı!";
		}

	}

?>

is_file() / is_dir(): Öğe dosya ise is_file, klasör ise is_dir fonksiyonları true değerini döndürür.

Dosya Yükleme

Dosya yükleme işlemi için HTML kodundaki form etiketine eklemeniz gereken kod:

<form enctype="multipart/form-data">

Şimdi seçtiğimiz ve yüklemek istediğimiz dosyanın bilgilerini alalım.

<?php 
	
	$kaynak = $_FILES["dosya"]["tmp_name"]; // Bilgisayardaki konumunu al
	$ad = $_FILES["dosya"]["name"]; // Adını al
	$tip = $_FILES["dosya"]["type"]; // Tipini al (jpg, png)
	$boyut = $_FILES["dosya"]["size"]; // Boyutunu al

?>

Artık yükleme işlemini yapabiliriz.

<?php
	
	$kaynak = $_FILES["dosya"]["tmp_name"];
        $ad = $_FILES["dosya"]["name"];

	if (@copy($kaynak, "/www/upload/$ad")){
		echo "Dosya başarıyla yüklendi."
	}else {
		echo "Dosya yüklenirken bir hata oluştu.";
	}

?>

Bootstrap 4’e Giriş

Bootstrap, web sitelerinin daha hızlı ve daha kolay yanıt vermesi için geliştirilen en popüler ve güçlü front-end (ön yüz) (HTML, CSS ve JavaScript) kodlama yöntemi (framework) dir.

Bootstrap 4

Bootstrap, daha hızlı ve daha kolay web geliştirme için güçlü bir front-end kodlama yöntemidir. Formlar, düğmeler, navigations (gezinmeler), açılır menüler, uyarılar, modeller, sekmeler, accordions (akordeonlar), carousels (karuseller), araç ipuçları vb. gibi ortak kullanıcı arayüzü bileşenleri oluşturmak için HTML ve CSS tabanlı tasarım şablonları içerir.

Bootstrap size çok az çaba ile flexible and responsive (esnek ve mobil uyumlu) web şablonları oluşturma yeteneği verir.

Bootstrap aslen 2010 ortasında Twitter’da bir tasarımcı ve bir geliştirici tarafından oluşturuldu. Bootstrap açık kaynak kodlu bir framework olmadan önce Twitter’ın, Blueprint (Görsel Progralama Aracı) gibi araçları kullandığı biliniyordu.

Bootstrap ile oldukça fazla zaman ve emek tasarrufu yapabilirsiniz.

İpucu: Bootstrap eğitim makalelerimiz, her konunun anlaşılması, kolay açıklamasıyla adım adım Bootstrap’ın temel ve gelişmiş özelliklerini öğrenmenize yardımcı olacaktır. Eğer bir acemi iseniz, temel bilgilerle başlayın ve her gün biraz öğrenerek yavaş yavaş ilerleyin.

Bootstrap İle Yapabilecekleriniz

Bootstrap ile yapabileceğiniz birçok şey var.

  • Kolayca responsive web siteleri oluşturabilirsiniz.
  • Önceden tanımlanmış sınıflarla hızlı bir şekilde çoklu sütun düzeni oluşturabilirsiniz.
  • Hızlı bir şekilde farklı form düzeni türleri oluşturabilirsiniz.
  • Hızlı bir şekilde farklı gezinti çubuğunu oluşturabilirsiniz.
  • Herhangi bir JS kodu yazmadan kolayca accordions, modals vb. gibi bileşenler oluşturabilirsiniz.
  • Büyük miktardaki içerikleri yönetmek için kolayca dinamik sekmeler oluşturabilirsiniz.
  • İpucu metnini göstermek için kolayca araç ipuçları ve açılır pencereler oluşturabilirsiniz.
  • İçeriğinizi sergilemesi için kolayca bir resim slaytı veya carousel oluşturabilirsiniz.
  • Farklı türlerde uyarı kutularını hızlı bir şekilde oluşturabilirsiniz.

Liste burada bitmiyor. Bootstrap ile yapabileceğiniz birçok ilginç şey var. Gelecek makalelerde hepsini ayrıntılı olarak öğreneceksiniz.

Bootstrap Kullanmanın Avantajları

Herhangi bir front-end framework ile ilgili bazı deneyimleriniz varsa, Bootstrap’ı bu kadar özel kılan şeyin ne olduğunu merak ediyor olabilirsiniz. İşte bir web geliştiricisinin Bootstrap framework’unu tercih etmesi için bazı avantajlar:

  • Fazlasıyla zaman tasarrufu: Bootstrap önceden tanımlanmış tasarım şablonlarını ve sınıflarını kullanarak çok fazla zaman ve emek tasarrufu yapabilir. Bu sayede diğer geliştirme çalışmalarına konsantre olabilirsiniz.
  • Responsive özellikler: Bootstrap özelliğini kullanarak, işaretlemede herhangi bir değişiklik yapmadan farklı cihazlarda ve ekran çözünürlüklerinde daha uygun görünen duyarlı web siteleri oluşturabilirsiniz.
  • Tutarlı tasarım: Tüm Bootstrap bileşenleri, aynı tasarım şablonlarını ve stillerini merkezi bir kütüphane aracılığıyla paylaşır. Böylece web sayfalarınızın tasarımı ve düzeni tutarlı olur.
  • Kullanımı kolay: Bootstrap kullanımı çok kolaydır. Temel HTML, CSS ve JavaScript çalışma bilgisi olan herkes Bootstrap ile geliştirmeye başlayabilir.
  • Tarayıcılarla uyumlu: Bootstrap, modern web tarayıcılarını göz önünde bulundurularak oluşturulur. Chrome, Firefox, Safari, Internet Explorer vb. gibi tüm modern tarayıcılarla uyumludur.
  • Açık kaynaklı: Ve en iyi kısmı, indirmek ve kullanmak tamamen ücretsizdir.

Not: Bootstrap 4.3, Bootstrap’ın en son ve en kararlı sürümüdür. Bootstrap 4; Google Chrome, Firefox, Safari, Internet Explorer 10 ve üstü gibi tüm modern tarayıcılarda desteklenir.

Bu Eğitim Makaleleri Neleri Kapsar?

Bu Bootstrap eğitim serisi, Bootstrap framework’ünün tüm özelliklerini kapsar; grid sistemi, typography şekillendirme mekanizması, form şekillendirme yöntemleri gibi tablo, liste, resim vb. başka bir deyişle ortak kullanıcı arayüzü elemanlarının şekillendirme tekniklerinin tümünü kapsar.

Ayrıca; input grupları, düğme grupları, medya nesneleri, gezinti çubuğu (navbar), paneller, sayfalandırma, etiketler ve rozetler (badges), ilerleme çubukları (progress bars) vb. gibi hazır Bootstrap bileşenlerini nasıl kullanacağınızı ve bunların farklılarını oluşturmak için nasıl özelleştireceğinizi öğreneceksiniz.

Son olarak; modal pencere oluşturma, dinamik sekmeler, araç ipuçları, uyarılar, accordion menü, carousel, scrollspy vb. gibi bazı gelişmiş özellikleri keşfedeceksiniz, ayrıca mevcut seçenekleri ve yöntemleri kullanarak bunları nasıl özelleştirebileceğinizi veya genişletebileceğinizi öğreneceksiniz.

Kaynak: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial

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

En İyi Oyun Motoru Seçimi

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. Bir oyun geliştiricisinin bir oyunu oluştururken çözmesi gereken ilk bilmece, en iyi kullanıcı deneyimini elde etmek için hangi oyun motorunu kullanması gerektiğidir. Bir oyun motoru sadece Ping, Tetris, Snake gibi klasik arcade oyunları değil, aynı zamanda GTA ve Assassin’s Creed gibi yenilikçi ve ileri seviye oyunlar yapmanıza da yardımcı olur. Bugünlerde piyasada çok sayıda güçlü oyun motoru bulunmasına rağmen, bu makalede en iyi 2019 oyun motorunu seçmenize yardımcı olacağım.

Bir oyun geliştiricisiyseniz, Unreal Engine, CryEngine ve Unity gibi bazı inanılmaz oyun motorlarını duymuş olmalısınız. Bunlar, günümüzde ileri seviye oyunlar yapmada en baskın ve önde gelen oyun motorlarından bazılarıdır. Bu 3 oyun motorunun her birinin kendine has özellikleri ve potansiyelleri var. Ancak, üzerinde çalışacağınız projeye dayanarak bunlardan herhangi birini seçmenizi tavsiye ederiz. Projenizin doğası hakkında net olmalısınız. Örneğin lisans bütçeniz, oyun platformu, (2B veya 3B) ve benzeri boyutlar. Bu nedenle, projeniz için en iyi oyun motorunu seçmeden önce amacınız net olmalıdır.

Şimdi biraz CryEngine, Unreal Engine ve Unity arasındaki karşılaştırmaları yapalım!

Unity 3D

Unity 3D, en iyi oyun motorlarından biri olarak kabul edilir. Çünkü motor kullanıcılarına, teknoloji meraklısı olmasanız bile kolayca erişilebilen çok çeşitli araçlar ve özellikler sunar.

Bu aracın sunduğu en iyi özelliklerden biri, oyun geliştiricilerin Android, Blackberry, iOS ve Windows arasında herhangi bir oyun platformunu değiştirmesine izin veren cross (çapraz) platform entegrasyonu. Özellikle Unity cross platform entegrasyonu, rakiplerinin Unreal Engine ve sırasıyla 10 ve 5’i destekleyen CryEngine’nin önündeki 25 platformu desteklemektedir.

Unity 3D Arayüz

Unity topluluğunda, projenize anında yardım edebilecek çok sayıda üyesi var. 2019’un en iyi 3D oyun motorlarından biri olan Unity’i öne çıkaran bir diğer özellik ise, 3D Max, Blender, CINEMA, Maya, Softimage ve daha pek çoğu dahil olmak üzere önde gelen 3D uygulamalarında kullanılan bir dizi dosya formatını destekleyebilmesi. Ayrıca oyun geliştiricileri, oyunları tasarlarken 15.000’den fazla ücretsiz + ücretli 3D model, ses, animasyon, düzenleyici eklentisi, material (malzeme), script (komut dosyası) ve shader (gölgelendirici) kullanma olanağına sahip olabilirler.

Unity 3D, C++‘dan daha çok tercih edilen C# ve JavaScript kullanıyor. C++’dan C#’a geçiş yaparken hiç birşey kaybetmezsiniz. Hiç değilse, Unity 3D’nin temiz ve hızlı bir arayüzü var ve Windows XP Service Pack 2’de (SP2) bile çalışacak kadar hafif.

Unreal Engine 4 (UE4)

Listede ikincisi, en büyük Amerikan video oyunları ve yazılım geliştirme şirketlerinden Epic Games tarafından sunulan en yeni motor olan Unreal Engine 4’tür. Unreal Engine 4, genellikle oyun dünyasında UDK olarak bilinen Unreal Development Kit (Geliştirme Kiti) tarafından devralındı.

Unreal Engine 4, oyun deneyimine gelişmiş dinamik aydınlatmalar gibi özelliklerle gerçekçi bir dokunuş katan inanılmaz grafiklerle geliyor. Bu oyun motorunu daha da mucizevi kılan şey, tek bir sahnede milyonlarca parçacığı tutabilen yeni parçacık sistemi.

Üstelik, UE4’ün kullanımı tamamen ücretsizdir. Ancak Unreal Engine 4 tarafından tasarlanan oyunlarından kazandığınız paraya %5’lik bir telif ücreti ödemeniz gerekir. Özet olarak, Epic Games uygulama içi satın alımlar, oyun içi reklamlar veya kullanıcılardan oyununuzu satın almak için ücretlendirdiğiniz para gibi kazandığınız her şeyin %5’ini alacak. Bununla birlikte, Unreal Engine 4’ün yapımcıları, oyundan kazandığınız gelirin $3,000/çeyreğe kadar çıkması durumunda geliştiricilerin tam sürümünü ücretsiz kullanmalarına izin verir.

Ayrıca Unreal Engine 4, yalnızca Blueprint kullanarak oyun oluşturmanıza olanak tanıyan Blueprint Visual Scripting (Görsel Komut Dosyası) teknolojisini kullanır. Programcı olmayanlar bile UE4’ü kullanarak bir ölçüde kod yazabilir ve oyunlar oluşturabilir; ancak, bu tür oyunların bazı sınırları olacaktır. Bunların dışında, bu motorun kötü tarafı eski nesil konsollar için oyun geliştirememesidir.

CryEngine

2019’deki en iyi oyun motorları listemizdeki en son oyun moturu CryEngine’dir. CryEngine, büyük geliştirme şirketi Crytek tarafından ilk kez Far Cry oyununda tanıtılan, bugün sahip olduğumuz en güçlü ve en baskın oyun motorlarından biri. CryEngine’i listeye layık kılan şey, Unity’nin grafiksel yeteneklerini gölgede bırakan ve Unreal’in sahip oldukları ile eşdeğer olan grafiksel yetenekleridir. Ağır ve güçlü bir oyun motoru olmasına rağmen, CryEngine bu platformu etkili bir şekilde kullanabilmek için biraz zaman alıyor ve daha önce başka bir oyun motoru kullanmayan yeni başlayanlar için kullanımı biraz daha zor.

CryEngine, Virtual Reality (Sanal Gerçekliği) destekliyor. Bulutlara tam bir 3D uzaysal görüntü oluşturma, sis ve hava efektleri için gerçekçi bir görselleştirme sağlayan hacimsel sis ve bulut işleme sistemi dahil şaşırtıcı görsel efektlere sahip. Dahası, oyun tasarımı için CryEngine platformunu seçmenin en iyi yanı, kullanıcılarının oyun tasarlarken telif ücreti ödemesini istememesidir. Ancak, sabit bir miktar kira ödemek zorundasınız. CryEngine’e erişim kazanmak için ayda $9.90 kira ödemesi yapılır. Ayrıca CryEngine, tüm şüphelerinizi ve sorularınızı gideren, en iyi deneyimi elde etmenize yardımcı olan CryEngine Answer adlı bir soru ve cevap forumuna sahiptir.

Peki, şimdi oyun motoru karşılaştırmasına sahip olduk. Size göre en iyi 3D oyun motoru olarak hangisi öne çıkıyor? Karşılaştırmayı özetlemenize yardımcı olayım!

Unreal, Unity ve CryEngine’yi karşılaştırırken, oyun motorlarının bize sunduğu en iyi özelliklerle karşılaştık. Unity ile Unreal performansını eşleştirirken, Unity’nin mobil ve 2D/3D oyunlar geliştirmek için daha iyi bir platform olduğunu, Unreal’in ise grafiksel ve fotogerçekçi oyunlar geliştirmek için en uygun oyun motoru olduğu ortada. Bu Unreal ve Unity arasında büyük bir fark olduğunu ortaya çıkarıyor.

CryEngine, yüksek grafiksel oyunlar yaratma yeteneğine de sahip. Ayrıca, CryEngine ve Unreal yeni nesil platform özelliklerini daha cazip bir fiyatlandırma modeli ile sunma konusunda karşılaştırırken, CryEngine kesinlikle Unreal’i uygun maliyetli yapısıyla yeniyor. Ancak, yeni başlayanlar için kolaylık ve minimalizm temelinde Unreal Engine 4 ve Unity kesinlikle denemeye değer.

Kaynak: https://medium.com/@thinkwik/cryengine-vs-unreal-vs-unity-select-the-best-game-engine-eaca64c60e3e

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

AMP Nedir?

Daha önce telefonunuzdan arama yaptıysanız ve sonuçlarla etkileşime girdiyseniz, muhtemelen “AMP (Accelerated Mobile Pages)” veya “Hızlandırılmış Mobil Sayfalar” ile karşılaştınız.

AMP, Google tarafından Twitter ile işbirliği içinde geliştirilen açık kaynaklı bir kodlama yöntemidir. “Hızlandırılmış Mobil Sayfalar”, mobil web tarayıcılarında daha iyi ve daha hızlı deneyimler kazandırır. Temelde kodlama yöntemi, HTML’yi basitleştirerek ve düzenli CSS kurallarını izleyerek mobil cihazlar için hafif deneyimler oluşturmanıza olanak tanır.

AMP, başlangıçta Facebook’un “Anında Makalelere Yanıt” özelliği için geliştirildi. Bununla birlikte yıllar geçtikçe içeriği doğrudan arama sonuçlarından neredeyse ışık hızında yayınlamak için güçlü bir platform haline geldi. Bu yılın başlarında Google, AMP teknoloji çerçevesini web standartlarına eklemek için zorlayacağını ilan ederek, kuma bir çizgi çizdi.

Mobil telefonunda AMP kullanan bir genç

AMP nasıl çalışır?

AMP kodlama yönteminde 3 ana bölüm var.

  • AMP HTML: AMP HTML’yi normal HTML’nin daha zayıf bir sürümü olarak düşünün. AMP kodlama yönteminde kullanabileceğiniz HTML etiketleri için katı kurallar vardır. Hızlı sayfa yüklemesini sağlamak için AMP’de formlar gibi belirli HTML öğelerine izin verilmez. AMP çerçevesi ayrıca düzenli bir CSS sürümü kullanmanızı gerektirir. AMP çerçevesi için gerekli HTML etiketlerinin tam listesini görüntüleyin. Modern HTML ve CSS kullanarak web içeriği oluşturmaya alışkınsanız, bunların hiçbiri zor gelmeyecektir.
  • AMP JS: Mobil platformlarda hızlı sayfa yüklemesini sağlamak için, AMP herhangi bir Javascript kullanımını kısıtlar. Bunun tek istisnası, sayfa yükleme hızlandırma akılda tutularak optimize edilmiş AMP komut dosyaları içindir. AMP’nin JS ile ne alıp götürdüğünü, “Uygulaması Kolay Bileşenler” kütüphanesi sağlar. AMP’nin engin bileşen kitaplığını kullanarak animasyon oluşturabilir, içeriği dinamik olarak yükleyebilir, düzende değişiklik yapabilir ve daha fazlasını yapabilirsiniz. (Ve endişelenmeyin, GDPR (General Data Protection Regulation) yani “Genel Veri Koruma Yönetmeliği” uyumluluğu için de bir AMP bileşeni var.)
  • AMP CDN: Genellikle “AMP Önbelleği” olarak bilinen AMP platformunun kritik bir bileşeni, proxy tabanlı içerik dağıtım ağıdır (CDN). CDN, AMP içeriğini alır ve hızlı teslimat için önbelleğe yerleştirir. Varsayılan olarak, AMP CDN geçerli tüm AMP içeriğini önbelleğe alır ve dışarıda bırakma seçeneği sunmaz. Ancak, içerik yayınlama yapılandırmalarınızı özelleştirmek için kendi CDN sağlayıcınızı AMP önbelleğinin üstüne koyarak devam edebilirsiniz.

Öyleyse, web sitem için AMP kullanmalı mıyım?

AMP’nin lansmanından bu yana geçen birkaç yıl içinde, medya sitelerinin AMP’de başarılı olduğu genel olarak kabul edildi. Medya sitelerindeki içeriğin çoğunluğu statik olduğundan, bu web siteleri organik arama trafiğinde önemli artışlar görmüştür. Ayrıca Google, yayıncıların içeriğini “Zengin Kartlar”la öne çıkarmasını kolaylaştırmıştır. Çok fazla dinamik ve kullanıcı seçimlerine göre değişen filtreleme, sıralama, alışveriş sepeti ekleme ve daha dinamik kullanıcı eylemleri gibi içeriği olan e-ticaret web siteleri için jüri, AMP’nin mobil cihazlarda performansı ne kadar artırabileceğine karar verdi. Tüm SEO ve mobil performans meraklıları, iyi uygulanmış bir AMP web sitesinin şunları yapacağını kabul ediyor gibi görünmektedir:

  • Organik arama trafiğinin hacmini önemli ölçüde arttırır.
  • Daha hızlı ve daha iyi mobil deneyimlerden kaynaklanan etkileşimi ve dönüşümleri arttırma.
  • AMP, CDN önbelleğe aldığından ve çoğu arama sonucuna yanıt verdiğinden, sunucularınızdaki yükü azaltır.
  • Mobil arama sonuçlarında, içeriğinizin AMP çerçevesinde belirgin bir şekilde öne çıkması için bir fırsat sağlar.

Fakat AMP’nin sakıncaları nelerdir?

Bazı dijital web markalarının AMP’yi uygulamamaya karar vermesinin en yaygın nedeni, web varlıklarınızı AMP-ify için gerekli çaba düzeyidir. Mobilin bir fırsat sunduğu inkar edilemez ama aynı zamanda önemli ve düşünceli bir yaklaşım gerektiriyor. Bir AMP deneyiminin avantajlarından yararlanmak için, geliştirme ekibinizin AMP için ayrı varlıklar oluşturması ve sürdürmesi gerekir.

AMP her seferinde sunucularınıza bir istek yapmadan içerik önbelleğe aldığından, analitik ve ölçüm araçlarınız sunucu isteklerine %100 güvenemez. Web sitenizin AMP sürümünden katılım metriklerini doğru bir şekilde yakalamak için özel izleme parametreleri uygulamanız gerekecektir.

Basitçe söylemek gerekirse, AMP bir diyette HTML’dir; bu, AMP’de hareketli haritalar, dönen resimler ve daha fazlası gibi zengin kullanıcı deneyimleri sunamayacağınız anlamına gelir. Web sitenizin bölümleri yoğun olarak zengin UX (Kullanıcı Deneyimi)’e dayanıyorsa, bu web bölümlerinin AMP sürümlerini tekrar gözden geçirmek isteyebilirsiniz.

Son olarak, AMP deneyimleri tasarımla sınırlıdır. Kullanıcıların, AMP deneyiminden Google arama sonuçlarına geri dönme dışında herhangi bir şey yapması zor. Bu, mobil kullanıcı katılımını kaybetme riski ve markanız için potansiyel bir dönüşüm yaratır.

Google AMP Görünümü
AMP Görünümü

Kaynak: https://blog.branch.io/accelerated-mobile-pages-what-is-amp-and-what-does-it-mean-for-your-mobile-business