Kayıtlar

2018 tarihine ait yayınlar gösteriliyor

Angular Yazı Serisi - 5 - Component ve Servis Oluşturma

Resim
Bu yazımızda Angular4 projesi içerisinde Component ve Servis oluşturma ve kullanımlarına bakacağız. Angular projemiz içerisine component ve servis oluşturmak oldukça kolay. Component oluşturmak için, app klasörüne geliyoruz. " ng g component componentAdi " ya da " ng g c componentAdi " komutunu çalıştırarak oluşturabiliriz. Service oluşturmak içinse; " ng g service serviceAdi " ya da " ng g s serviceAdi " komutunu çalıştırarak oluşturabiliriz. Öncelikle component oluşturalım "ng g component myComponent" komut satırını çalıştırdığımızda, ilgili dosyaları oluşturdu. Şimdi de bir servis oluşturalım. "my-service.service.ts" ve "my-service-spec.ts" dosyaları oluşturuldu. my-service.service.ts dosyasına baktığımızda, bu classın "Injectable()" olduğunu görüyoruz. Service'ler Injectable() özelliğe sahiptir. Şimdilik bu kadar. Bir daha ki yazımızda Angular ile Firebase kullanımını incel...

Angular Yazı Serisi - 4 - Notifications Kullanımı

Resim
printf("Selam yazılımcılar") Bu yazımızda Angular 4 projesi içerisinde Notifications'ların nasıl kullanıldığına bakacağız.  İlk olarak projemizi Visual Studio Code ortamında açalım. package.json dosyamızı içerisine ilgili paketi ekleyelim. dependencies altına "angular2-notifications" paketini eklemeliyiz. Ardından ilgili paketi indirmek için View sekmesi altında Integrated Terminal'i açalım. "npm install" yazarak kodumuzu çalıştıralım. Eksik olan paketleri indirmeye başlayacak. Şimdi ilgili paketi, tüm projeden erişmek istediğimiz için, app.module.ts içerisine eklemeliyiz. "NotificationsService" ve "SimpleNotificationModule" ünü "angular2-notifications" paketinden import ediyoruz. Ardından imports içine "SimpleNotificationsModule.forRoot()" satırını ekliyoruz. "providers" kısmına da "NotificationsService" i ekliyoruz. Şimdi Notifications'ı ku...

Angular Yazı Serisi - 3 - Angular Projesi Çalıştırma

Resim
Oluşturduğumuz "myProject" projesini çalıştıralım. Proje dosyamızın içine girip, "ng serve --open" diyerek projemizi çalıştırıyoruz. Projemiz "localhost" ta 4200 numaralı portta çalışmaya başlayacaktır. İyi kodlamalar !

Angular Yazı Serisi - 2 - Proje Ortamının Tanımlanması

Resim
Bir önceki yazımızda Node.js, NPM(Node Package Manager) ve Angular-CLI kurulumunu yapmıştık. Şimdi oluşturduğumuz Angular projesi içerisindeki dosya ve klasörleri inceleyeceğiz. Bir Angular projesi oluşturduğumuzda aşağıda görülen dosya ve klasörler otomatik olarak oluşturulur. node_modules : tüm modüllerimiz bu klasörün altında yer alır(animations, bootstrap vs.) src : Oluşturduğumuz component'ler, servisler ve html dosyaları src klasörü altında depolanır. angular-cli.json : Başlangıç html dosyası, Typescript dosyası, test dosyaları vs. bu dosyada tutulur. package.json : Kullanılan tüm paketler burada belirtilir(typescript, rxjs, @angular/animations vs.) src klasörü altında app, assets ve enviroment klasörleri bulunur. Ana html(index.html) ve typescript(main.ts) dosyaları da bu klasör altında tutulur. Projemiz app klasörü içerisinde bulunur. Aslında projemiz app klasörüdür. Diğer component'ler app klasörü içerisinde oluşturulur. app klasörü içeriği aşağıda g...

Angular Yazı Serisi - 1 - Kurulum

Resim
AngularJS Google tarafından desteklenen, dünya genelinde yazılımcılar tarafından katkı sağlanan açık kaynak kodlu web uygulama çatısıdır. İlk olarak Angular 4 kurulumuyla başlayalım. İhtiyacımız olan NPM(Node Package Manager) ile Node.Js ve Angular-CLI. Angular4 uygulamalarını Visual Studio Code kullanarak geliştireceğiz. Visual Studio Code'u  https://code.visualstudio.com adresinden indirebilirsiniz. Node.js 'i https://nodejs.org adresinden indirebilirsiniz. Node.js'in kurulumunu tamamladıktan sonra, Angular-CLI'yı kuracağız. Şimdi komut satırını çalıştırarak kurulumu gerçekleştireceğiz.  Kurulum tamamlandıktan sonra Angular4 projemizi oluşturabiliriz. Angular uygulamalarını C:/Projects/Angular4 klasörü içinde oluşturacağım. Sizde ilgili klasörleri oluşturabilirsiniz ya da arzu ettiğiniz şekilde oluşturabilirsiniz. Command Prompt'u açıyoruz. Ardından ilgili klasöre geliyoruz. Şimdi Angular projemizi oluşturalım. İlgili paketler...

Firebase Nedir ?

Resim
Firebase Google tarafından desteklenen Real-Time çalışan bir içerik sağlayıcı ve bir BackEnd servisidir . IOS, Android ve Web geliştirmede kolaylıkla kullanılabilir. Firebase bir bulut alt yapısıdır.  Firebase veri tabanı kullanımını ise oldukça kolay. İlk olarak gmail hesabımız ile giriş yapıyoruz. Sonra https://console.firebase.google.com sitesine giriyoruz. Bizi yukarıdaki ekran karşılayacak. "Proje Ekle" ye tıklıyoruz. Sonra Proje adını giriyoruz ve Ülke/Bölge'yi seçiyoruz. Proje adını "Projem" olarak giriyoruz. Şimdi oluşturduğumuz "Projem" veri tabanı ile ilgili ekran karşımıza geldi. Sol üst taraftan oluşturduğumuz diğer veri tabanlarını da görebiliriz.  Şimdi sol taraftaki menüden Develop altındaki Database alt menüsüne tıklıyoruz. Oluşturduğumuz veri tabanı karşımıza geldi.  Şimdi Kurallar menüsüne tıklıyoruz. Bir authentication bekliyor. Şimdilik veri tabanının herkes tarafından okunup yazılmasını...

Design Patterns (Tasarım Kalıpları) Yazı Serisi - 3

Resim
Bu yazımda Singleton design patterni anlatatmaya çalışacağım. Singleton design pattern'i sınıfın tek bir instance(örneğine) ihtiyacımız olduğu zaman kullanabileceğimiz bir patterndir. UML gösterimi aşağıdaki gibidir. Şimdi Singleton design patterninin kodunu yazalım. Burada instance değişkeni ve  getInstance() metodu static olarak tanımlandı. Ama runtime'da bir instance oluşturarak, program çalıştığı sürece aynı instance'i kullanmaktır. Şimdi uygulama kodumuzu yazalım. Buradaysa s1, s2 ve s3 Singleton nesnesine sahibiz. Her Singleton.getInstance() dediğimizde oluşturulan Singleton örneği döndürülür. s1, s2 ve s3 nesneleri aslında aynı nesnelerdir. Ekran çıktısıda aşağıdaki gibi olmalıdır.

Design Patterns (Tasarım Kalıpları) Yazı Serisi - 2

Resim
İlk olarak Observer design pattern'i anlatarak başlayalım. Observer patterni bir bildirim mekanizması olarak çalışır. Örnek verecek olursak, Hisse Senedi uygulaması hayal edelim. Burada Hisse Senetleri Subject'tir yani gözlenendir. Yatırımcılar ise Observer(gözleyen)'dir. Hisse senedi fiyatında olan herhangi bir değişiklikte, Observer'lar bilgilendirilmelidir. Bu noktada yapmamız gereken eğer değer değiştiyse Notify() metodunu gerçekleştirmektir. Genel olarak Observer patterni UML'i aşağıdaki gibidir. Burada Subject hisse senedi, Observer ise yatırımcılardır. Hisse senedinin yatırımcıları vardır. Hisse senedi değeri değiştiğinde Hisse senedi içindeki Notify() metodu çalışır ve observer'lar içerisindeki update() metodu tetiklenir. Şimdi Observer design patternin uygulamasına geçelim. 2 tane sınıf oluşturacağız. Bunlar Stock(Hisse Senedi) ve Observer(Yatırımcı) Öncelikle Observer sınıfını oluşturalım. Şimdi Stock sınıfını oluşturmaya başla...

Design Patterns (Tasarım Kalıpları) Yazı Serisi - 1

Bugün, design pattern yazı serisine başlıyoruz. Toplamda 23 tane design pattern bulunmaktadır. Bunlar GoF(Gang of Four) olarak bilinir. Hepsi üzerinde durmayacağız. En çok kullanılan 6 design pattern üzerinde duracağız. Observer Singleton Repository ( C# tarzı Generic Type olan dillerde uygulanabilir) Strategy Decorator Factory