Angular 6 İle Kütüphane Geliştirmek: İlk kütüphanemizi yazıyoruz!

Bu yazı ile Angular 6 ile birlikte kolaylaşan kütüphane geliştirme sürecini hep birlikte inceleyecek, “yeni bir kütüphane nasıl geliştirilir?” sorusunu yanıtlayacağız.

Gereksinimler

Eğer hali hazırda bir Angular geliştirme ortamına sahip değilseniz ihtiyacınız olan iki şey var;

Kütüphane Projesini Oluşturmak

İlk olarak yeni bir Anguılar 6 çalışma ortamı kurarak işe başlıyoruz. Bunun için aşağıdaki Angular CLI komutunu kullanacağız;

ng new peakup-lib-demo

Proje oluşturulup, npm paketleri yüklendikten sonra yeni bir Angular 6 projesine sahip oluyoruz. Şimdi ismi daha önce “angular-cli.json” olan, Angular 6 birlikte “angular.json” olarak değişen konfigürasyon dosyamızı incelediğimizde “projects” isminde bir alan olduğunu göreceğiz. Bu alanın anlamı artık aynı çalışma ortamında birden fazla proje oluşturabiliyoruz. Bu proje yeni bir uygulama olabileceği gibi, bizim bugün inceleyeceğimiz gibi bir kütüphane de olabiliyor. O zaman bir kütüphane projesi oluşturarak sürece devam edelim. Bunun için aşağıdaki komutu kullanacağız;

ng generate library peakup-lib

Bu komutun ardından root dosyamızın altında “projects” adından bir dosya oluştuğunu, ve altında da ismini “peakup-lib” olarak belirlediğimiz kütüphanemizin yer aldığını göreceğiz. Aynı zamanda angular.json dosyasını incelediğinizde “projects” altında “peakup-lib” adında yeni bir proje olduğunu göreceksiniz.

Şimdi hep birlikte oluşan projeyi inceleyelim!

İlk olarak src > lib dizininde yer alan peakup-lib.module.ts dosyasına göz atalım;

Daha önce Angular 2+ projesi geliştirdiyseniz app.module.ts dosyasından mutlaka haberdarsınızdır. Angular projeleri modüler bir yapıda geliştirildiğinden her uygulamada varsayılan olarak en az bir modül olmak zorunda. Kütüphane projeleri için de aynı durum geçerli. Fakat dikkat edilmesi gereken bir husus var; eğer daha önce birden fazla modül içeren bir proje geliştirmediyseniz kullanmaya alışık olmadığınız “exports” alanı. Bu alan ilgili modülün import edildiği projeler/modüllerin erişebileceği component’leri içermelidir. Bu şekilde export edilen component’lere, modülün import edildiği projelerden/modüllerden erişilebilmesine olmasına olanak sağlanır.

Resimde de görüldüğü üzere proje içerisinde bulunan “PeakUpLibComponent” export edildiğinden dolayı, modülün import edildiği projelerde/modüllerde erişilebilir olacak. Yani siz de kütüphaneniz içerisinde oluşturduğunuz ve dışarıdan erişilebilir olmasını istediğiniz component’leri bu alana eklemelisiniz.

Şimdi default olarak oluşan component’imize göz atalım;

PeakUpLibComponent

görüldüğü üzere yalnızca içerisinde bir html template’e sahip. Bu component kütüphanemizin çalışıp çalışmadığını anlamamıza yardımcı olacak. Daha sonra kendisine ihtiyacımız olmayacak

Şimdi kütüphanemiz için önemli olan asıl dosyaya göz atalım; public_api.ts

public_api.ts

kütüphanemizde bulunan modül, component, service, model gibi tüm proje dosyalarından hangilerinin kütüphanemizin kurulu olduğu projeden erişilebilir olduğunu tanımadığımız dosya. Yukarıda yer alan resimden de anlaşılacağı üzere, kütüphanemizde bulunan 3 dosya, kütüphanemizi kurduğumuz projede kullanılabilir olacak.

Kütüphanemizi build etme zamanı!

Kütüphanemizi yayınlamak veya test etmek için build etmemiz gerekiyor. Aşağıdaki komutla kütüphanemizi build ediyoruz:

ng build peakup-lib

Şimdi ilk oluştuduğumuz proje olan peakup-lib-demo içerisinde kütüphanemizi deneyelim. Bunun için peakup-lib-demo projesinin app.module.ts dosyasında kütüphanemizi import etmemiz gerekiyor.

Resimdeki gibi PeakUpLibModule‘ü import ediyoruz. Şimdi kütüphanemiz içerisinde yer alan PeakUpLibComponent‘i, AppComponent içerisinde kullanarak kütüphanemiz çalışıyor mu bakalım;

app.component.html

dosyamıza component’imizi yerleştirdikten sonra “ng serve” komutuyla projemizi çalıştırıyoruz.

Ve sonuç;

Görüldüğü üzere kütüphanemiz sorunsuz çalışıyor.

Bu yazımızda sizlerle birlikte Angular 6 ile birlikte kolaylaşan kütüphane oluşturma sürecini temel olarak inceledik. Bir sonraki yazımızda ise “yazdığımız bu kütüphaneleri public ve private olarak nasıl yayınlar ve kullanma sunarız?” sorusunu yanıtlayacağız!

Aklınıza takılan soruları sormaktan çekinmeyin, bir sonraki yazımızda görüşmek üzere.