Şimdi Decorator yapısını göstereceğim örnekle daha iyi anlayacağınızı düşünüyorum 🙂

Örneğin, aşağıdaki gibi bir arayüz ve temel sınıf tanımlayabilirsiniz:

Daha sonra, bu arayüzü kullanan decorator sınıfları oluşturabilirsiniz:

Bu şekilde, SimpleCoffee nesnesi üzerine Americano veya Cappuccino eklemeleri yaparak nesnenin özelliklerini ve davranışlarını değiştirebilirsiniz.

Umarım konuyu anlaşılabilir bir şekilde sizlere anlatabilmişimdir.

Örnek proje halini aşağıda ki Github logosuna tıklayarak gidebilirsiniz;

Her arabada olabilecek/arabanın ortak özelliklerini belirttiğim Car adında bir abstract class oluşturuyorum.

Araba tiplerini, kalıtım sayesinde Car abstract sınıfından alarak Sedan, SUV ve Hatchback araç tiplerini oluşturuyorum.

Programda oluşabilecek type hatalarını engellemek ve belirli tiplerin dışına çıkılmaması adına CarTypes adında bir enum oluşturuyorum.

Şimdi sıra geldi Factory’imizi oluşturmaya..
CarFactory adında bir public class oluşturuyorum ve içine Create adında geriye Car modelinde değer döndüren bir method hazırlıyorum.

* Koddan anlaşılacağı üzere, ben CarFactory‘de Create methoduna Sedan tipini gönderdiğimde bana new Sedan(); bloguna girip oluşturduğum nesnin artık Sedan yapısında;
4 teker olacağını, sunroof ve elektrikli olmayacağının bilgisini vermiş oluyor.

Şimdi bakalım Fabrikamız gerçekten bir Sedan arabamı üretmiş? 🙂

Eğer Factory.Create’içine Hatchback gönderirseniz; Sunroof’ı olmayan, elektrikli ve 4 tekerlekli bir araba üretecektiniz 🙂

Umarım konuyu anlaşılabilir bir şekilde sizlere anlatabilmişimdir.

Örnek proje halini aşağıda ki Github logosuna tıklayarak gidebilirsiniz;

Askerden döndükten sonra baktım ki Maui üzerinde baya bir geliştirmeler yapılmış bende hemen beğendiğim bir tasarımı Maui üzerinde kodlamaya başladım:p

Tasarımı koda dökmeye başlamadan önce tasarımı kafamdan parçalara bölmeye başlıyorum ki ilerde Row,Column‘ların birbirine karışmasını engelliyorum.
Eğer sizde bir tasarımı koda dökecekseniz önceden kafanızda böyle parçalarsanız ilerleyen aşamalarda sorun yaşamazsınız 🙂

1) Fontların yüklenmesi

* RobotoFontFamily proje üzerinde ki kullanılan ana fontumuz,
* MaterialDesignIcons ise projemizde ki iconları göstereceğimiz font.

Fontlarımızı Resources > Fonts klasörüne attıktan sonra MauiProgram.cs içine tanımlamarı yapıyoruz.

Font yüklememiz bu kadar basit. Şimdi sıra geldi tasarımda ki parçacıkları teker teker oluşturmaya 🙂

Üşengeç arkadaşlarımız için Github üzerinden projeyi indirip, istediği değişikliği yapabilir ve düzenleyebilirler. 🙂

Kaynak Kodu & Full Source

İki gün önce Github üzerinde ki bir projemi güncellerken güvenlik ile alakalı bir mail bildirimi aldım. Konu güvenlik ile alakalı olunca GitGuardian dikkatimi çekti ve derinden incelemeye başladım. Biraz araştırdıktan sonra hoşuma giden bu aracı sizinle paylaşmak istiyorum..

GitGuardian Nedir?

Github, GitLab, Azure vb. platformlarında ki paylaştığınız projelerin güvenlik açıklarını sizlere bildiren bir geliştirici aracıdır. Örneğin Github üzerinde Public olarak paylaştığınız bir projede ConnectionString’i değiştirmeyi unutup, commit’i gönderdiniz. GitGuardian bu konuda devreye giriyor ve proje üzerinde ki ConnectionString, Api-Key&Token, Sertifika vb. key-value’leri kontrol edip sizleri güvenlik konusunda uyarıyor.

GitGuardian’ı Nasıl Kullanabilirim?

GitGuardian.com üzerinden ‘Sign up with Github’ seçeneği ile github hesabınızı eşleştirebilir veya üyelik formunu doldurup üye olabilirsiniz. Üyeliğinizi tamamladıktan sonra isterseniz tek bir projenizi, isterseniz tüm projelerinizin güvenlik açıklarını kontrol ettirtebilirsiniz.

*Üyeliğinizin son aşamasında ‘All Repositories’ seçeneğine tıkladığınızda tüm projelerinizi taramaya başlayacaktır.
Tüm projelerime baktığımda Public olarak paylaştığım RPG projesinde 3 tane riskli durumun olduğunu belirtiyor içine girip sorunun neden kaynaklandığını birlikte inceleyelim.

Generic High Entropy Secret sorunun üstüne tıklayıp, içine girdiğimde ;

CommandLineArgumentsTests.cs içinde paylaşmış olduğum accessTokenValue key’imin açık olduğunu ve gizlemem gerektiğini belirtiyor.
Sizde kendi projelerinizde ki güvenlik açıklarını tespit edip, projenizi güncelleyebilirsiniz.

GitGuardian hangi platformlarda kullanılabilir?

• Azure
• Github
• Gitlab
• Bitbucket
• Circle
• Drone
• Jenkis
• Travis

Uyarı bildirimlerini entegre edebiliyor muyuz?

GitGuardian bildirimlerini Discord, Slack, Pager Duty, Splunk ve özel entegrasyonlarla dışarıya aktarmanız mümkün. bknz: Dökümantasyonlar

Umarım konunun sizlere faydası olmuştur.
Bir başka makalede görüşmek üzere..

Android uygulamalarımızı kimi zaman emulatörde kimi zaman prod bir telefonda debugging yapmak isteriz. Hele ki büyük bir proje yapıyorsak telefonda ön izleme almak çok daha önemli olabiliyor. Benim gibi kendi telefonlarında test eden arkadaşlar için “nerde bu usb kablosu?” derdini güzel bir yöntemle ortadan kaldıracağız. 🙂

Pekii nasıll??

* Anlatacağım yöntem bu zamana kadar herhangi bir platformda sorunsuz debug almış, adb komutlarında sorun yaşamayan, projelerine hali hazırda devam eden arkadaşlar içindir. Yaşanabilecek sorunlar için konu altında bazı çözüm yolları sunacağım.

Hadi başlayalım..

1-) Son kez olmak üzere, telefonumuzu usb ile bilgisayara bağlayalım.
2-) Bilgisayardan CTRL + R kombinasyonu ile çalıştır komutuna cmd yazıp CMD panelimizi açalım.

3-) Komut satırına adb devices ile bilgisayara tanımlanan cihazları listeleyelim.

* Eğer sizde benim gibi birden fazla devices görüyorsanız hem usb ile telefona bağlanmışınız hem de altta emülatör açık kalmış demektir. Emülatörü kapatın ve tekrar adb list çekin sadece sizin usb ile bağladığınız telefon gözükecektir.

4-) Adb debug portunu 5555 olarak ayarlayıp, adb’nin yeniden başlamasını bekleyin.


5-) Telefonunuzun modem üzerinden hangi IP adresini aldığını öğrenmek için Ayarlar -> Bağlantılar -> Wifi -> Gelişmiş bölümünden IP adresinizi alın.

6-) Adb connect ile IP&Port üzerinden bağlantınızı kurun.

* connected to 192.168.*****:5555 yazdıktan sonra usb kablonuzu çıkarıp IDE’mizi tekrar kontrol edelim.

📱Visual Studio ;


📱Android Studio ;

Umarım bu makalede sizlere faydalı olabilmişimdir.
İlerleyen sağlıklı günlerde tekrardan görüşmek üzere…:)

Kaynakça
• https://docs.microsoft.com/en-us/xamarin/android/get-started/installation/set-up-device-for-development

❌ TextColor=”#FFFFFF”   

✅ TextColor=”{StaticResource colorWhite}” 


*Ufak bir dipnot 2*
Iconlar için Android veya IOS katmanına asla resim yüklemiyoruz! Icon işleri için uzun zamandır fontawesome kullanan birisi olarak son 6aydır projelerimin tüm icon ve resim ihtiyacını artık materialdesignicons ile hallediyorum. Nedir bu materialdesignicons derseniz; Projenize 879 KB ile 26.315 responsive icon ekleyebiliyorsunuz desem? peki nasıl diyecek olursanız en aşağıda kaynak 3e ve daha sonrasında kaynak 4’e bakmanızı tavsiye ediyorum. 

Şimdi parça parça artık kodlarımızı oluşturmaya başlayalım.

 














Sorunsuz bir şekilde kodlarımızı dahil ettiğimizde MainPage.xaml bu şekilde olacaktır.



Şimdi sıra geldi SharedTransitions kullanmaya.. (kaynak 1) 
* SharedTransitions’ta ki en önemli detay: Anasayfadan içerik sayfasına gidecek olan Image Transition.Name’lerin aynı olmasıdır!
Eğer iki Image Transtion.Name’leri birbirinden farklı bir isimde olursa efektsiz-düz bir geçiş yapacaktır. Buna mutlaka dikkat edin:)



SharedTransitions sorunsuz olduğunda geçişi fark edeceksiniz.




Üşengeç arkadaşlarımız için Github üzerinden projeyi indirip, istediği değişikliği yapabilir ve düzenleyebilirler.
Şuan Mac olmadığı için IOS tarafında test yapamıyorum ama kısa bir süre sonra projeyi ios-update adında bir güncelleme göndereceğim:)
IOS tarafını da kullanmak isteyen arkadaşlar Android.Image’leri IOS katmanına taşırsa sorun yaşamayacaklardır.

Full Kaynak Kodu & Full Source

• Kaynaklar 
1) Xamarin.Plugin.SharedTransitions : https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions
2) Xamarin.Forms 4.8 – Gradients : https://devblogs.microsoft.com/xamarin/xamarinforms-4-8-gradients-brushes/
3) Using Font Icons : Goodbye Images, Hello Fonts! : https://montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts/
4) Embedding Fonts in Xamarin.Forms : https://www.youtube.com/watch?v=vhl1ISTlFpA

Node.JS işlerimize başlamadan önce MySQL serverimiz de “NodeLoginDB” adında bir database oluşturalım.

Veritabanımızı başarılı bir şekilde oluşturduktan sonra Node.JS’e geri dönüp hemen terminalden veya bash’den gereken paketleri kuralım:)

• Terminal veya bash >
  • npm install hbs
  • npm install bcryptjs
  • npm install cookie-parser
  • npm install dotenv
  • npm install jsonwebtoken
  • npm install mysql
  • npm install -g nodemon

Ana dizine app.js adında bir script oluşturup kurduğumuz paketlerin gerekli bir kısımını Importlamaya başlıyalım:)

CSS, JS ve Images dosyalarımızı projemizin assets klasörüne dahil etmeyi de unutmayalım:)

Projemizin view katmanını Handlebars (.hbs) ile yapacağımız için view engine’miz de belirtiyoruz ve ana dizine views adında bir klasör oluşturuyoruz.

Cookies ve json işlemleri için klasik encodedleri de app.use ile ekliyoruz.

Routes ayarları yapmak için ana dizine Routes adında bir klasör oluşturalım ve içine auth.js atında bir script oluşturalım.

Bütün işlemleri yaptıktan sonra app.js scriptimiz bu şekilde olacaktır.

Burada routing mantığını iyice kavramanız gerekiyor, yanlış bir routing yaparsanız <form action=”…”> veya herhangi bir yönlendirme de yanlış adrese gider durursunuz o yüzden app.js bittikten sonra iyice kodları okuyup, bu kod nasıl işliyor/nasıl yönleniyor diye bakmanızda fayda var 🙂

Şimdi sitemize ../auth olarak gelen requestleri yönlendirmek için ana dizine routes klasörünü açıp auth.js scriptini oluşturalım.

Eveeett routing,asset vb ayarlamaları yaptıktan sonra şimdi sıra geldi MySQL‘e bağlanmamıza…

Ana dizinimize .env adında bir settings dosyası oluşturalım ve database bilgilerimizi yazalım.

routes/auth.js‘den gelen ../login ve ../register requestleri yönlendirecek olan controllers klasörü açıp, içine auth.js scriptini oluşturalım.

Şimdi MySQL bağlantısını kontrol edebilmek için ” npm run start ” yazarak localhost’u hayata kaldırıyorum..

Leeeeeeeetttsss goo…

Evet projemiz başarıyla MySQL’e bağlandığını görüyoruz:) Şimdi github’da paylaştığım tasarımı projemize dahil ediyoruz eğer sizin beğendiğiniz bir login&register page var ise onu projenize ekleyebilirsiniz. *NOT* Kendi tasarımınızı kullanacak iseniz <form action=”/auth/login” method=”POST”> bölümünü eklemeyi unutmayınız.

Label Admin Template Source;

• assets : https://github.com/dgokhan/NodeJS-LabelAdminPanel/tree/main/assets
• views : https://github.com/dgokhan/NodeJS-LabelAdminPanel/tree/main/views

Githubda ki assets klasörünü ve views .hbs’leri indirip projeye dahil ettiğimize göre sıra auth.js‘e kayıt olma ve giriş yapma methodlarını eklemeye geldi..

#Register

Kayıt olma bölümünde ilk önce kullanıcının bize gönderdiği kullanıcı adı ile veritabanında arama yapıyoruz. Eğer o kullanıcı adına sahip birisi var ise ‘That username is already in use’ bilgisini dönüyoruz eğer böyle bir kullanıcı yok ise kullanıcının şifresinin hashlenmiş halini veritabanına gönderip üye olmasını sağlıyoruz:)

Unutmayın.. ne olursa olsun hiçbir zaman database’ye görünür bir şekilde şifre kaydetmeyiz! Şirketlerin kendilerine göre yazdığı şifreleme ile veya MD5 gibi şifrelemeler ile şifrelenir. Bizde şifrelerimiz açık bir şekilde gözükmemesi için bcrypt ile şifremizi hashleyeceğiz. Böylelikle olası bir database saldırısı sonucunda verilerimiz çalınsa bile müşterilerimizin şifrelerini bulmalarını zorlaştıracağız..

Yukarda bahsi geçen abimiz bu kadarcık bir kod 🙂

#Login

JWT ile ilgili kodlarımız;

maxAge: 20000 bırakırsanız giriş yaptıktan 20 saniye sonra token ölecektir ve kullanıcıyı tekrar login sayfasına yönlendirecektir. Eğer tokenin 1saatte ölmesini istiyorsanız maxAge: 3600000 yapmanız gerekmektedir. (1saniye = 1000ms ‘den istediğiniz dakikayı ayarlayabilirsiniz. (1000*60)*dakika )

Şimdi localhost:8000‘i yenileyip localhost:8000/register sayfasına gidelim ve kayıt bilgilerimizi girelim:)

Evet başarıyla kullanıcı kaydımızı olduk fakat bildirim yeşil yerine kırmızı bir uyarı gibi olmuş, bunlar hep hızlı kod yazayım derken copy&paste hatalarınadn:).. neyse orayı makaleyi paylaşmadan hemen önce düzenlerim:p Bu arada gelin veritabanımıza bir bakalım:)

Kayıt olma başarılı ✔️bir de giriş yapmayı deneyelim bakalım..

Şimdi database işlemlerimiz ve token oluşturmamız tamam geriye sadece siteye giriş yaptıktan sonra cookies’de ki token kodunu kontrol etmek kaldı..

Hemen routes/pages.js‘e geri gelip verifyToken adında bir function açalım..

Ardından ../ anasayfaya yapılan requestlere verifyToken yapıp tokeninin yaşayıp/yaşamadığını kontrol ettirelim.

Eğer token yaşıyor ise kullanıcı hiç bir sorun yaşamadan sitede ki işlemlerini yapmaya devam edecektir.
Fakat token süresi biter ise kullanıcı direk giriş yapma ekranına yönlendirelecektir.

Proje ağacımızın son hali;

Bu yazımızında sonuna geldik. Bu makalede NodeJS & MySQL veritabınında ki kullanıcıyı JWT kontrolü ile giriş yapmayı ve veritabanına kaydolmayı anlatmaya çalıştım.
Eğer projelerden vakit bulabilrsem yakında NodeJS, Swift ve Xamarin dersleri de çıkarmaya çalışacağım.

Sağlıkla ve yazılımla kalmanız dileğiyle, hamınızı öpürem. 🇦🇿 🇹🇷 🖥️

♏️ .NET MAUI Nedir?

Maui, aslında Xamarin’in yerine geçecek olan, Xamarin’in evrimleşmiş halidir. Peki nasıl bir yenilikler bizi bekliyor?

• Bu evrimin en güzel yanlarından birisi, tek bir kod tabanından tek bir projeye sahip olmasıdır. Eskisi gibi artık İOS ve Android için farklı katmanlar yok! 3 katman 1’e iniyor.

• MVVM’nin yanı sıra Maui, Elm Mimarisi olarak da bilinen yeni ve heyecan verici MVU (Model-View-Update) tasarım desenini de destekleyecek ve Blazor desteğini alacak.

• Yeni gelecek .NET CLI desteği ile basit bir komutla projeyi bir anda başlatılmasını sağlayabileceğiz. Artık dakikalarca beklemekte yok 😉

• Xamarin geliştiricilerinin en önemli araçlarından biri olan Xamarin.Essentials artık nuget paketi veya eklenti olarak değil, Maui projesi içinde System.Device olarak dahil olacak.

🕵🏻 .NET MAUI yeniliklerine bir göz atalım..

.

♻️ Maui’nin yeni proje yapısı;

• Renderers uygulamasında basitleştirilmiş mimari.
• Animasyon geliştirmeleri.
• UI özelleştirmesi için daha fazla ve daha iyi araçlar.

📲 Peki Xamarin.Forms projelerinde bir sorun yaşanacak mı?

Tabiki hayır. Maui, Xamarin.Forms ile geliştirdiğimiz projelerde herhangi bir sıkıntı yaratmayacak.
Kasım 2021’de gelecek olan güncelleme ile sıkıntısız devam edebileceğiz.

*Ayrıca MVVM veya MVU kullanımı tamamen opsiyonel olup, isteyen istediği dizaynı projesinde kullanabilecektir.

🚧 .NET MAUI Yol Haritası

• 2020 sonu : Önizleme 1
• 2021 başı : Önizleme 2 ve Önizleme 3
• 2021 ortası : Önizleme 4 ve Önizleme 5
• Eylül 2021 : İlk sürüm denemeleri
• Kasım 2021 : Genel kullanıma sunulması.

👁‍🗨 Blazor nedir ve faydaları nelerdir?

Blazor sistemi; size xaml yapılarının içinde javascript yazarmışcasına kodunuza direk müdahale etme şansı sağlıyor diyebiliriz. Konuyu açmak adına şöyle bir örnek veriyorum; Bir mobil uygulamamız var ve butona tıkladığında ekrandaki sayacın artmasını istiyoruz.. bunun için ilk önce xaml kodunu çıkarmanız gerekiyor daha sonra MVVM’den Command veya Clicked verdiğiniz noktaya gidip sayacı arttıracak kodlarımızı yazmanız gerekiyor. Fakat Blazor ile javascript yazarmışcasına buton nesnemize OnClick verip bir kaç alt satırda butonun iş kodunu yazabiliyoruz.

Blazor frameworkünü daha çok javascript yazmakla uğraşmak istemiyorum, javascriptide c# ile yazıp geçeyim diyen arkadaşların bildiği bir frameworktür kullanımı Xamarin’de de aynıdır.

*Blazor&Mobile konusunda kafanızda daha kalıcı birşey oluşmasını istiyorsanız sağ tarafta ki bulunan videoyu izlemenizi şiddetle tavsiye ediyorum.

Peki siz bu yeni Maui hakkında ne düşünüyorsunuz?
Yorumlarınızı ve düşüncelerinizi yorum olarak belirtebilirsiniz 🙂

Kaynak/References;
• https://www.telerik.com/blogs/time-to-evolve-net-multi-platform-app-ui-maui
• https://marcofolio.net/xamarin-maui/
• https://gunnarpeipman.com/dotnet-maui-announced/

Tasarım aslında çok basit gözükse de ürün ve ürün arkasında ki mavi daire yerleştirmesi biraz işlerimi zorlaştırmıştı 🙂
Fakat birkaç deneme ile istenilene çok yakın bir sonuç aldım 🙂

İlk önce mimarimizin Grid Row yüksekliklerimizi belirleyelim…

*NOT | Grid.Row = 1 ‘in Auto olma sebebi ScrollView kullanacağımız için ne kadar veri/tasarım varsa o kadar esneyip,bükülecek olmasıdır. Aynı durum ürün açıklaması içinde geçerlidir. Ürün açıklaması ne kadar uzunsa o kısım o kadar uzun olmalıdır herhangi bir boyut/piksel verirseniz olası durumlarda taşmalar veya büyük boşluklar görebilirsiniz o yüzden bu tarz esnek yerler için Auto kullanmalısınız.

Geriye gitmek için ve kaydetmek için biraz kolaya kaçıyorum ama gayet iş görür 🙂

Eğer ben üşengecim sen bana seriden github kodlarını gönder diyorsan buyruuunn;

https://github.com/dgokhan/XamNike

ve uğraşlarımızın sonucu:)

• Unutmayın ki proje MVVM olarak yapılmamıştır. MVVM örnekleri için başka makalelerde paylaşacağım bu sadece onpage-design’dir.
• Projede Material Design Icons ve ffimageloading kullanılmıştır.

kaynak; https://dribbble.com/shots/10795979-Movie-App-Free

Kuracağımız dizaynın mimarisini kafamda şu şekilde oluşturuyorum ve hemen işe koyulmaya başlıyorum.

Tasarım toplamda 1 +4 olarak 5 kısımdan oluşuyor. O yüzden banner dışında oluşan 4 kısmı hemen RowDefinitions ile oluşturuyorum.

Row 0 : Image (banner)
Row 1 : Frame
Row 2 : Grid
Row 3 : Grid
Row 4 : Grid

# Part I

Github kaynak kodları;

https://github.com/dgokhan/XamFilm

Umarım Xamarin.UI’da kendini geliştirecek arkadaşlara faydalı olmuştur. Kafanıza takılan ve sormak istediğiniz bir soru varsa konu altından sorabilir, geliştirmek istediğiniz noktayı Github üzerinden commitleyebilirsiniz. 🙂