Angular 4 Notlarım

Neler Yüklemeli?

Proje klasöründe cmd’de “code .” yazıldığında otomatik olarak vscode ile açılır

Projenin olmasını istediğimiz klasör açılır, yeni angular projesi oluşturulur
-ng new <proje adı>

Uygulamayı çalıştırır ama herhangi bir browser açmaz
default 4200 portunda “localhost:4200” çalıştırır sadece
-ng serve

Eğer browser’da açılsın istiyorsak
-ng serve –open

Proje Yapısı Tanımlamaları
————————————
e2e(end to end test) > Unit Test ve diğer testlerin konfigürasyonlarının yapıldığı kısım
node_modules > Node ile indirilen paketlerin buluduğu yer
-src > Uygulamanın kendisinin yer aldığı kısım
-src/app >
-src/assets > imaj vs gibi dosyalar
-src/environments > Geliştirme ve yayın ortamı ile ilgili konfigürasyonların yer aldığı kısımdır
-src/index.html > Uygulamanın ayağa kalktığı html sayfadır, uygulama ana sayfasını ve root component directive ifade içerir
-src/main.ts > Uygulamanın giriş noktasıdır. Uygulamanın compile olması ve hangi modül ile uygulamanın başlayacağını içerir
-src/polyfills.js > Farklı tarayıcılar için angular uygunluk scriptleri içerir
-src/style.css > Bss tanımlamaları yapılan dosyadır.
-src/test.ts > Unit testlerin başlangıç dosyasıdır, konfigürasyonları içerir.
-angular-cli.json > Angular cli ile ilgili konfigürasyonları içerir
-.editorconfig > Kullanılan editor, ide ile ilgili ayarlar
-karma.conf.js > Unit testleri çalıştıran yapıdır
-package.json > Npm ile indirilen paketlerin konfigürasyonun olduğu kısımdır.
——-dependecies > Uygulama için gerekenler
——-devDependecies > Geliştirme akışı için gerekenler
-protractor.conf.js > e2e unit testleri ile ilgili ayarları içerir
-tsconfic.json > Typescript compiler konfigürasyon içeren dosyadır
tslint.json > IDE’de kodların formatlı ve intellisense ile yapılmasını sağlayan konfigürasyom

-src/app/app.component.css > İlgili komponent için olan css tanımlamaları buraya yazılır
-src/app/app.component.html > İlgili komponent için olan html tanımlamaları buraya yazılır
-src/app/app.component.spec.ts > İlgili komponent için olan unit test tanımlamaları buraya yazılır
-src/app/app.component.ts > İlgili komponentin kendisidir.
———bir html çıktısına hizmet eden class’tır
———selector > component çağrılacağı isim
———templateUrl > component kullanacağı html yapısı
———styleUrl > component kullanacağı css dosyası bilgisi
———providers > servis kullanılacak ise burada tanımlama yapılır.(singleton olur) sadece bu component’te instance alınır

-src/app/app.module.ts > Uygulamanın root modulüdür.
———declarations > dahil etmek istediğimiz componentler
———imports > dışarıdan servislreini, componentlerini kullanmak istediğimiz modüllerdir.(3.parti yada angular kendi modulleri)
———exports > appmodule kullanan biri appmodule içindeki hangi modülleri kullanabilir tanımı
———providers > servis kullanılacak ise burada tanımlama yapılır.(singleton olur)
———bootstrap > modülüm başlangıç component tanımlaması yapılır

(export > public anlamına gelir)
./ > bulunduğu klasöre bakar, hiç bişi yazmıyor ise src klasöründen bakmaya başlar

Component oluşturmak için
-ng g component <component adı>

Servis olusşturmak için hangi component altında servis oluşturacak isek önce oraya gideriz (product.Service gibi isim verilir)
-ng g service <Servis adı>

Servis için ne zaman component scope , ne zaman module scope
-servis datası değişken ve her yerde takip edilmek isteniyor ise örneğin sepet, componentler arasında gezerken sepete birşey eklenir çıkarılır ama hep aynı sepet olmalı, global olmalı(module scope)
-her component için yeni oluşturması gerekirse component scope provider kısmında tanımlanmalıdır

yeni third-party paket eklemek için
-package.json tanımlaması yapılır
-root kısımda “npm install” denir

Pipe > Çalışma esnasında getirilen datayı kullanıcıya daha farklı şekilde göstermek için kullanılan özel tekniklerdir
Kendi pipe’mızı oluşturmak için hangi component ile ilgili bir pipe yapılacak ise onun klasörüne gidilir
-ng g pipe <pipe adı>

Projenin deploy edilmesi aşağıdaki komut ile olur ve angular cli “dist” isimli bir klasöre deploy edilecek halde projeyi oluşturur
-ng build –base-href ./

Örnek Projem.

GitBash Notlarım

  • Bu işlemler için bilgisayarınızda git-bash yüklü olmalıdır.
  • Projeyi bilgisayarınıza indirmek
    1. İlk olarak Github, Bitbucket ne kullanıyorsanız clone url bulun
    2. Projenin bilgisayarınızda olmasını istediğiniz klasörü açın.
    3. Boş bir alana fare ile sağ tıklayın ve “Git Bash Here” tıklayın. Bu işlerm git bash komut satırını ilgili klasörde açmış olacak, dir yöntemde cd.. cd.. …. ile klasöre kadar gitmelisiniz.
    4. Projeyi çekmek için “git clone <kopyaladığınız proje url>” ve proje bilgisayara indirilmeye başlar.
  • Projeniz için yeni branch açmak
    1. Proje klasöründe mouse ile sağ tık “Git Bash Here” 
    2. git checkout -b “<branch ismi>”
    3. Verdiğiniz isimde branch açılır ve otomatik o branch aktif olur
  • Projedeki tüm branchleri görmek
    1. Proje klasöründe mouse ile sağ tık “Git Bash Here” 
    2. git branch
    3. Branch listesi ekranda listelenir
  • Projede yapılan değişiklikleri görmek
    1. Git bash ekranına “git status -s” yazılır. (-s > kısa bilgi içindir yok uzun uzun ekranda bilgiler yer alır)
    2. Ekranda değişikliklere uramış dosyaların listesi gelir
    3. Her bir dosyanın ismini başında bir harf yada simge yer alır, bunlar dosya üzerindeki durumu ifade eder. Ayrıntılı listesi buradadır.
  • Ve commit, değişiklikler sunucuya yollamaya hazırlayıp, yollamak(push)
    1. “git add -A” ile tüm dosyalar commit dahil edilir
    2. git commit -m”<commit_mesajı>”
    3. git push origin <push_yapılacak_branch_adı>

Peki YA ŞİMDİ?

peki ya şimdi, Peki Ya Şimdi, PEKİ YA ŞİMDİ?

Bu kelimeler uzun zamandır kendime sorduğum, sebebinin mesleki tatminsizlik olduğunu anladığım soruların sadece bir tanesi.

Benim gibi yaklaşık 6 yıldır bu işi severek yapıp bu soruları sormaya başlamış iseniz demek ki artık sıradaki adıma sizinde geçme zamanınız gelmiş demektir.

Peki ya şimdi?…..

Yazılım hayatımda şuan ana kadar bir çok projenin, sorunun, çözümün, mesainin, sinirin, stresin içinde epey bir yol kat etmiştim. Bir çok şey öğrendim, deneyimledim. Kod okudum kod yazdım çözüm geliştirdim google ile, mantık ile, tecrübe ile, başkasının aktardığı tecrübe ile.

Kompleks senaryolar için kompleks çözümler, imkansızlar gerçekleştiriyorsunuz. Yani kod yazıyorsunuz ve sorun ne olursa olsun iyi yada kötü, yeni yada eski teknoloji sonuçta o sorunu çözebileceğinizi biliyorsunuz. Ama bir şey yanlış yada eksik o google dan okuduğum kodlara bakınca vay anasını diyorum adam yapmış arkadaş, ve hep bunu nasıl yapmış acaba dedim aklıma gelen yezen kişinin tecrübesi ve dili çok iyi bilmesinin sonucu olarak düşündüm ki evet bir yere kadar doğru. Aradan zaman geçti daha çok proje daha çok kod ama bu o hayal edilen duruma yaklaşamıyorum yada çok az, yavaş yaklaşıyorum, nirvanaya çıkamıyorum.

Demek ki bu yolun sonuna gelmişsiniz ve o soru PEKİ YA ŞİMDİ?

Ve bingbang, aslında bunun yazılımın temellerinde olan eksiklerden olduğunu fark ettim, kendi mantığımız ve tecrübemiz ile sınırlanmış durumdayız. Yazılımın kendi metodolojileri kendi doğası ile derinlemesine bakamıyoruz.

Buna göre sıradaki adım için etrafımda örnek aldığım yazılımcıları incelemeye başladım farklı olan ne tam olarak. Şimdi bizde ne eksik nasıl gitmeli bu süreç?

Sıradaki adım artık daha derinlere inmek, kod yazmayı, yazılım geliştirmeyi başka boyuttan kavramak, dili değil yazılımı anlamak.

Bu çerçevede

  • Yazılım prensipleri
  • Tasarım Desenleri
  • Kurumsal Yazılım mimarileri
  • Ve hangi dilin uzmanı isek onun için ileri bilgileri öğrenmek

sıradaki adımlarımız oluyor.

Sizin ile kendi yol haritamı paylaşmak istiyorum,  ben oldum olası Microsoft dünyasında yazılım geliştiriciyim ileri eğitim planlamamı da buna göre yaptım, sizde kendi uzman olduğunuz yazılım diline göre planlama yapmalısınız. Aşağıdaki eğitimler benim yol haritam ilk eğitimi almaya başladım ve daha ilk günden beri ufkum açılmaya algım değişmeye başladı. 1 ve 3 nolu eğitiler dil bağımsızdır, yazılım kendi dünyasına aittir.

  1. OOP Principles Design Patterns- Tasarim Kaliplari
  2. İleri C# Uygulamaları
  3. Enterprise Design Patterns & Architectures (Kurumsal Yazılım Mimarileri)

dotTrace Notlarım

Uygulama geliştirme dünyasında yer alan herkezin muhakkat yolunun geçeği sokaktır, uygulama performans analizi, performansı uygulama geliştirme yada uygulamayı daha performanslı hale getirme. Bu yolda ya yazdığınız kodların “best practice” araştırır uygularsınız yada performans analizi uygulamaları ile uygulamanızı(kodunuzu) analiz eder uzun süren yada fazla işlemci yükü oluşturan yerleri tespit edip düzenleme yaparsınız.

İşte bu senaryolarda kullanılan performans analizi uygulamalarından biri de ReSharper geliştiricisi JetBrains tarafından sunulan “dotTrace” uygulamasıdır.

Performans analizi uygulamaları temel olarak, yazdığınız uygulamanın memory, cpu, hangi kod satırı kaç kere işlendi, ne kadar sürdü vs gibi metrik bilgiler çıkararak size sunan yazılımlardır. Hatta bazı uygulamalar yazdığınız kodu analiz edip kodunuzun kısmi bölümlerine best practice kullanımlar önermektedir.

Okumaya devam et dotTrace Notlarım

Thread Safe Random

Online örnek linki. 

Örnek uygulama kodları

AutoMapper Passing Parameter

Online yazdığım örnek linki

Yada direk kodlar aşağıdadır.

IFrame içinden Parent-Page URL bilgisini almak

Üzerinde çalıştığım bir projede farklı bir domain içinde olan formları farklı domainlerdeki sitelerde iframe olarak ekleniyordu. Eklenen bu siteler iframe içinden, iframe yer aldığı sayfanın URL bilgisini almam ve bir hiddenfield içine atmam gerekiyordu ki bu bilgiyi server-side olarak kullanabilmek için.

Doğal olarak bir backend developer olarak önce server side denemeler yaptım ama fark ettim ki en güzel yol bunu javascript olduğunu fark ettim.
İlk olarak “parent.document.location.href” kodunu kullandım. Local testlerde sıkıntı olmadı fakat gerçek ortam testlerine sıra geldiğinde karşıla “Cross-Domain” hatası çıktı tekrardan. Doğal olarak formlar başka yerde gösterim yapılan yer başka.
Ve nihaği çözümü altta yer alan kod ile gerçekleştirdim.
İlk aşamada (try bloğu içinde) parent-page url bilgisi “parent.document.location.href” ile alınmaya çalışılıyor.
Burada, Cross-domain yada parent-page url bilgisi almaya çalışılırken başka bir hata alınırsa (catch bloğu içinde) işlem “document.referrer” ile gerçekleştiriliyor. Gereken bilgi sayfada yer alan hdParentPage id’li hidden içine aktarılmış oluyor.

Olmazsa Olmaz Visual Studio Extension’larım

Aşağıda iş hayatımda kullandığım ve iş süreçlerinize çok çok yardımcı olacak Visual Studio Extension’larım vardır. Emin olun sizinde işinize yarayacak.

Ayrıca genel olarak Visual Studio extensionların siteside aşağıdadır olurda sizde kurcalamak istersiniz;
http://visualstudiogallery.msdn.microsoft.com/