Firebase ile Angular Universal

Firebase ile Angular Universal

Turkish Table of Contents:

1. 🔍 Giriş
2. 🚀 Firebase ve Angular Universal Nedir?
3. 🛠 Gereksinimler: Angular Firestore ve Universal Yüklemek
4. 📝 Meta Etiketlerini Ayarlamak İçin SEO Servisi Oluşturma
   1. 🏷 SEO Servisi oluşturma
   2. 💡 Meta etiketlerini ayarlama
5. 🖥️ Animal Detail Component Oluşturma ve Meta Etiketlerini Ayarlama
   1. 🐱 Animal Detail Component oluşturma
   2. 📄 Veri okuma ve meta etiketlerini ayarlama
   3. ⚙️ Sunucu tarafından istemciye veri aktarma
6. ⚙️ Angular Universal Ayarları
   1. 📦 App Server Module Oluşturma
   2. 👷‍♀️ Main Server TS ve Webpack Server Config Oluşturma
   3. ⚙️ Angular CLI Yapılandırması
   4. 🏭 Uygulamaları Derleme ve Çalıştırma
7. 🧪 Sonuçlar ve Performans Kontrolü
8. ❓ SSS: Sıkça Sorulan Sorular

Turkish Article:

🔍 Giriş

Bu makalede Firebase ve Angular Universal'ı bir araya getirerek nasıl bir arama motoru optimize edilmiş (SEO) JavaScript uygulaması oluşturabileceğimizi öğreneceğiz. Angular Firebase'deki son güncellemeler, şimdi Universal ile sunucu tarafında render alma imkanı sağlamaktadır. Bu da demek oluyor ki, uygulamamızın içeriği arama motorları tarafından anlaşılabilir ve sosyal medya botları tarafından kullanılabilir hale gelir ve hatta sayfa yükleme performansında iyileştirmeler elde edebiliriz. Eğer burada ilk kezyseniz, beğenmeyi ve abone olmayı unutmayın ve kaynak kodunu angularfirebase.com adresinden takip etmenizi şiddetle öneririm.

🚀 Firebase ve Angular Universal Nedir?

Firebase, Google tarafından sağlanan bir Backend-as-a-Service (BaaS) platformudur ve geliştiricilere uygulama geliştirme için gerekli altyapıyı sunar. Angular Universal ise Angular uygulamalarının sunucu tarafında render edilmesini sağlayan bir framework'tür. Bu ikisini bir araya getirerek, Firebase üzerinde depolanan verileri kullanarak SEO dostu bir JavaScript uygulaması oluşturabiliriz.

🛠 Gereksinimler: Angular Firestore ve Universal Yüklemek

Bu adımda, öncelikle bir Angular uygulaması oluşturacak ve ardından Firebase ve Angular Universal'ı yükleyeceğiz. Bu gereksinimleri ayrıntılı bir şekilde açıklayacağız ve adım adım takip edeceğiz.

Angular Uygulaması Oluşturma

1. Angular CLI yükleme: Angular uygulaması oluşturmak için Angular CLI'yi yükleyin. Komut satırında aşağıdaki komutu çalıştırın:

   npm install -g @angular/cli

2. Yeni bir Angular projesi oluşturma: Bir klasör oluşturun ve içine girin. Ardından aşağıdaki komutu çalıştırarak yeni bir Angular projesi oluşturun:

   ng new my-app

3. Proje klasörüne girin:

   cd my-app

Firebase ve Angular Universal Yüklemek

1. Angular Firebase ve Fire store yükleme: Firebase ve Firestore'i yüklemek için aşağıdaki komutu çalıştırın:

   npm install firebase @angular/fire firestore

2. Angular Universal yükleme: Angular Universal'ı yüklemek için aşağıdaki komutu çalıştırın:

   ng add @nguniversal/express-engine

Bu adımları takip ederek Angular Firebase ve Universal'ı projenize eklemiş olacaksınız. Şimdi, SEO için meta etiketlerini ayarlamaya başlayabiliriz.

📝 Meta Etiketlerini Ayarlamak İçin SEO Servisi Oluşturma

SEO, arama motoru optimizasyonu anlamına gelir ve web sitelerinin arama motorlarında daha iyi sıralama almasını sağlamak için kullanılan teknikler bütünüdür. Meta etiketleri, web sayfalarının temel bilgilerini açıklayan HTML etiketleridir ve SEO için önemlidir. Angular uygulamamızda meta etiketlerini ayarlamak için bir SEO servisi oluşturacağız.

🏷 SEO Servisi Oluşturma

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Injectable()
export class SeoService {
  constructor(private meta: Meta, private title: Title) {}

  public setMetaTags(tags: any): void {
    const defaults = {
      title: 'Default Title',
      description: 'Default Description',
      image: 'Default Image URL'
    };

    const mergedTags = { ...defaults, ...tags };

    this.title.setTitle(mergedTags.title);

    this.meta.updateTag({ name: 'description', content: mergedTags.description });
    this.meta.updateTag({ property: 'og:title', content: mergedTags.title });
    this.meta.updateTag({ property: 'og:description', content: mergedTags.description });
    this.meta.updateTag({ property: 'og:image', content: mergedTags.image });
  }
}

💡 Meta Etiketlerini Ayarlama

Meta etiketlerini ayarlamak için SEO servisini kullanacağız. Meta etiketleri için varsayılan değerleri ve kullanıcının geçersiz kılması gereken değerleri birleştirip her birini ayrı ayrı ayarlayacağız. Bu şekilde kodumuzu tekrar kullanabilir ve etkinliklerimizi kolaylıkla yönetebiliriz.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { SeoService } from '../seo.service';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-animal-detail',
  templateUrl: './animal-detail.component.html',
  styleUrls: ['./animal-detail.component.css']
})
export class AnimalDetailComponent implements OnInit {
  animal: any;

  constructor(private route: ActivatedRoute, private seoService: SeoService, private firestore: AngularFirestore) {}

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      const animalName = params['name'];

      this.firestore
        .collection('animals')
        .doc(animalName)
        .valueChanges()
        .subscribe(data => {
          this.animal = data;

          const tags = {
            title: this.animal.name,
            description: this.animal.bio,
            image: this.animal.imageUrl
          };

          this.seoService.setMetaTags(tags);
        });
    });
  }
}

Yukarıdaki kodda, RouteParams'ten hayvanın adını alıyoruz ve bu adı kullanarak Firestore'dan ilgili hayvan belgesini alıyoruz. Gelen veriye dayanarak meta etiketlerini ayarlıyoruz ve SEO servisi vasıtasıyla DOM'a ekliyoruz.

Şimdi, Angular Universal ayarlarına geçebiliriz.

⚙️ Angular Universal Ayarları

Angular Universal, Angular uygulamalarının sunucu tarafında render edilmesini sağlar. Bu şekilde, uygulamanın içeriği arama motorları ve sosyal medya botları tarafından anlaşılabilir hale gelir. Angular Universal'ı projemize eklemek için aşağıdaki adımları takip edebilirsiniz.

📦 App Server Module Oluşturma

1. Proje klasöründe app.server.module.ts adında bir dosya oluşturun.
2. Oluşturduğunuz dosyayı açın ve aşağıdaki kodu ekleyin:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { TRANSFER_STATE_KEY } from '@angular/platform-browser';

@NgModule({
  imports: [AppModule, ServerModule, ModuleMapLoaderModule],
  providers: [{ provide: TRANSFER_STATE_KEY, useValue: 'animal' }],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Bu kod, ServerModule'u ve ModuleMapLoaderModule'u ekleyerek Angular Universal'ı projemize entegre eder. Ayrıca, transfer durumunu sağlamak için TRANSFER_STATE_KEY'i kullanır.

👷‍ Main Server TS ve Webpack Server Config Oluşturma

1. Proje klasöründe main.server.ts adında bir dosya oluşturun.
2. Oluşturduğunuz dosyayı açın ve aşağıdaki kodu ekleyin:

import { enableProdMode } from '@angular/core';

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';

Bu dosya, Angular CLI'nin projemizi sunucu tarafında derleyebilmesi için gereklidir. Ayrıca, AppServerModule'u projeden dışarıya ihraç eder.

3. Proje klasöründe webpack.server.config.js adında bir dosya oluşturun.
4. Oluşturduğunuz dosyayı açın ve aşağıdaki kodu ekleyin:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: { server: './src/main.server.ts' },
  resolve: { extensions: ['.js', '.ts'] },
  target: 'node',
  mode: 'none',
  externals: [/node_modules/],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
  },
  module: {
    rules: [{ test: /\.ts$/, loader: 'ts-loader' }],
  },
  plugins: [
    new webpack.NormalModuleReplacementPlugin(/\.\.\/environments\/environment/, '../environments/environment.prod'),
  ],
};

Bu dosya, Angular CLI'nin TypeScript dosyalarını derlemesini sağlar ve sunucu tarafında çalışacak şekilde ayarlar.

⚙️ Angular CLI Yapılandırması

1. angular.json dosyasını açın.
2. projects -> my-app -> architect -> build -> configurations -> production bölümüne erişin.
3. Bu bölümdeki assets öğesini aşağıdaki gibi değiştirin:

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/robots.txt",
  {
    "glob": "**/*",
    "input": "src/assets",
    "output": "/assets/"
  },
]

Bu, Angular Universal tarafından kullanılan statik dosyaların doğru şekilde dağıtılmasını sağlar.

4. Aynı angular.json dosyasında, projects -> my-app -> architect -> server bölümüne erişin ve outputPath'i aşağıdaki gibi güncelleyin:

"outputPath": "dist/server",

Bu, Angular Universal tarafından derlenen sunucu dosyalarının doğru bir şekilde hedeflenmesini sağlar.

🏭 Uygulamaları Derleme ve Çalıştırma

Angular Universal'ı derlemek ve başlatmak için aşağıdaki komutları kullanabilirsiniz:

1. Express sunucusunu başlatmak için server.ts dosyasını oluşturun ve aşağıdaki Express kodunu içine yapıştırın. Daha sonra, bu dosyayı node komutuyla çalıştırabilirsiniz.

2. Angular uygulamalarını derlemek için aşağıdaki komutu çalıştırın:

npm run build:ssr

Bu komut, Angular uygulamalarını Universal ile derler ve sunucu tarafı için gerekli dosyaları oluşturur.

3. Universal sunucusunu başlatmak için aşağıdaki komutu çalıştırın:

npm run serve:ssr

Bu komut, Express sunucusunu başlatır ve Angular Universal uygulamanızı sunar.

4. Tarayıcınızı açın ve http://localhost:4000 adresine gidin. Artık Angular Universal ile çalışan bir uygulama görmelisiniz.

Bu adımları takip ederek Angular Firebase ve Universal kullanarak SEO dostu bir JavaScript uygulaması oluşturabilirsiniz. Şimdi performans sonuçlarını ve en sık sorulan soruları kontrol edelim.

🧪 Sonuçlar ve Performans Kontrolü

Uygulamanızı Angular Universal ile geliştirmenin sizin için getirdiği avantajları görmek için performans testlerini yapmanız önemlidir. Angular uygulamanızın performansını kontrol etmek için Lighthouse kullanabilirsiniz. Lighthouse, performans, erişilebilirlik, SEO ve diğer web sayfası performansını ölçen bir araçtır.

Uygulamanızı Lighthouse'ta test etmek için aşağıdaki adımları takip edebilirsiniz:

1. Uygulamanızı npm run serve:ssr komutuyla başlatın.
2. Tarayıcınızda http://localhost:4000 adresine gidin.
3. Tarayıcının Geliştirici Araçları'nda Lighthouse sekmesini açın.
4. "Run Audit" düğmesine tıklayın ve sonuçları kontrol edin.

Performans testlerinden aldığınız sonuçlar, Angular Universal kullanmanın performansınıza ne kadar katkıda bulunduğunu gösterecektir. Bu sonuçları dikkate alarak geliştirmeler yapabilir ve kullanıcı deneyimi üzerinde daha iyi kontrol sağlayabilirsiniz.

❓ SSS: Sıkça Sorulan Sorular

Q: Angular Universal için alternatifler var mı?

A: Evet, Angular Universal'a alternatif olarak Next.js veya Nuxt.js gibi diğer JavaScript framework'lerini kullanabilirsiniz. Ancak Angular Universal, Angular uygulamaları için özel olarak geliştirilen bir çözümdür.

Q: Angular Universal'ı kullanmanın SEO'ya etkisi nedir?

A: Angular Universal ile sunucu tarafında render edilen uygulamalar, arama motorları tarafından daha iyi anlaşılır. Bu, sayfalarınızın daha yüksek bir sıralamada yer almasına yardımcı olabilir. Ayrıca, meta etiketlerini ve sosyal paylaşım önizlemelerini düzgün bir şekilde ayarlayarak sosyal medya paylaşımlarının daha çekici olmasını sağlayabilirsiniz.

Q: Eşzamanlı olmayan verileri nasıl işleyebiliriz?

A: Angular Firebase, verileri Observable'lara dönüştürerek eşzamanlı olarak işlemenizi sağlar. Bu sayede verileri okurken veya kaydederken çakışmaları engelleyebilirsiniz.

Q: Sunucu tarafında render edilmiş içeriğin kullanıcı deneyimine etkisi nedir?

A: Sunucu tarafında render edilmiş içerik daha hızlı yüklenir ve kullanıcılara ilk etkileşimde daha iyi bir deneyim sunar. Bu, uygulamanızın daha hızlı yüklendiğini ve kullanıcıların daha hızlı etkileşim kurabildiğini gösterir.