Angular ile Password Strength Meter yapımı

Bu makalede ‘Bir Angular projesinin üyelik formunda şifrenin yeteri kadar güçlü girildiğinden nasıl emin olabilirim?’ sorusunu cevaplayacağız.

Önce bir Angular projesi oluşturacağız, Bootstrap 4 ile stillendireceğimiz üyelik formu yapacağız ve şifre giriş alanının altına, girilen şifrenin güçlülük derecesine göre kırmızıdan-yeşile doğru hareket eden bir bar ekleyeceğiz.

Hemen projeyi oluşturmak istediğimiz dizine Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinden gidelim ve aşağıdaki komutu çalıştıralım;

Angular CLI, projeyi oluşturduktan sonra npm aracılığıya gerekli tüm dependency‘leri download edecek.

Projeyi oluşturduğumuz dizinde aşağıdaki komutu çalıştıralım, böylece Angular CLI projeyi http://localhost:4200 adresi üzerinden yayınlamaya başlayacak;

Projenin src dizininde yer alan index.html dosyasının head taglarının arasına aşağıdaki satırı ekleyelim ve projede Bootstrap 4 css framework‘ünü kullanmaya başlayalım;

Projenin src/app/app.component.html dosyasını açalım ve aşağıdaki kodlar ile değiştirelim;

Yukarıdaki kodlarda bootstrap‘in stillerini kullanarak bir üyelik formu oluşturduk. Şifre giriş alanının altında .strength-meter css class‘ına sahip olan div, şifrenin ne kadar güçlü olduğunu göstereceğimiz alan olacak.

Formun input elementlerine yazdığımız [(ngModel)] attribute'lerine dikkat! Bu attribute'lerin değeri, sayfanın Typescript kodlarında oluşturacağımız değişkenlerin isimleri ile aynı olmalı. Son olarak, button elementine yazdığımız (click) attribute'ü, button'a tıklandığında çalıştırılacak Typescript method'unun ismini içermeli!

Projenin src/app/app.component.css dosyasını açalım ve aşağıdaki kodlar ile değiştirelim;

Böylece ekranda ihtiyaç duyduğumuz tüm css‘leri de yazmış olduk.

Eğer sayfaya bu haline bakacak olursak, aşağıdaki gibi bir sonuç görmemiz lazım;

Şimdi gelelim src/app/app.component.ts dosyasına ve aşağıdaki kodları yazalım;

Öncelikle form elemanlarının değerlerini alabilmek için fullName, email ve password değişkenlerini string olarak tanımlıyoruz.

Ayrıca Kaydol butonuna tıklandığında yapılacak işleri yazacağımız signup() methodunu da tanımlıyoruz.

Şifre alanında keyup event‘i tetiklendikçe (yani şifre belirlenirken) çağırılan updateMeter() methodunda şifrenin karmaşıklık seviyesini hesaplayacağımız kodları yazıyoruz.

Şifrenin karmaşıklık seviyesini belirlemek için internetten yardım aldım, stackoverflow'daki çeşitli örnek kodları inceledim ve birkaç tanesini birleştirerek bu makaledeki kodu yazdım. Sizler kendiniz de bir kod geliştirebilir veya benim yaptığım gibi hazır yazılmışlardan faydalanabilirsiniz ;)

Eğer sayfayı yenileyecek ve sonuca bakacak olursak, aşağıdaki ekranı görmemiz lazım;

Bu makalenin kodlarına Github üzerinde polatengin hesabımda yer alan Password-Strength-Meter aracılığıyla erişebilirsiniz.

Global Game Jam 2017

Global Game Jam 2017 etkinliği 20 Ocak 2017 - 22 Ocak 2017 tarihleri arasında İstanbul Bahçeşehir Üniversitesi Oyun Laboratuvarında‘nda gerçekleştirildi.

Ben de konuşmacı , mentor ve juri üyesi sıfatları ile etkinliğe katıldım ve açıkçası çok keyifli zaman geçirdim.

Global Game Jam nedir?

Global Game Jam, IGDA (International Game Developers Association - Uluslararası Oyun Geliştiricileri Derneği) Eğitim Odak Grubu‘nun yönlendirmesiyle ortaya çıkan, tüm dünyada eş zamanlı gerçekleştirilen bir oyun geliştirme etkinliğidir.

GGJ dünyada oyun geliştirilmesi amacıyla birçok öğrenciyi, profesyoneli ve akademisyeni bir araya getiren dünya genelindeki en büyük oyun geliştirme organizasyonudur.

GGJ 2017 etkinliğinde, dünya genelinde 78 ülkede 518 etkinlik alanında 28837 katılımcı ile 5438 oynanabilir oyun yalnızca 48 saat içerisinde geliştirilmiştir. GGJ etkinliğine ev sahipliği yapan etkinlik merkezleri yerel oyun sektörünün gelişmesine katkı sağlarken, katılımcılara çeşitli açılardan faydalar sağlamaktadır.

Quartz.Net kullanarak .Net Core projelerinde zamanlanmış görevler yapmak

Eğer geliştirdiğiniz .Net Core projelerinde zamanlanmış görevler çalıştırmaya ihtiyaç duyarsanız, Quartz.Net kütüphanesinden faydalanabilirsiniz.

Bu makalede Quartz.Net kütüphanesini .Net Core ile geliştireceğimiz bir Console uygulamasında kullanacağız.

Hemen Visual Studio 2017 açalım ve yeni bir Console App (.Net Core) projesi oluşturalım;

Şimdi projenin Dependencies kısmına sağ tuşla tıklayıp Manage Nuget Packages… menüsünü seçelim, açılan pencerede Quartz paketini aratalım ve projeye ekleyelim. (Ben bu yazıyı yazarken v3.0.0-alpha2 .Net Core destekliyordu)

Program.cs dosyasını açalım ve Main() methodu içerisini aşağıdaki gibi değiştirelim;

InitializeJob() methodu içerisinde öncelikle StdSchedulerFactory sınıfından yeni bir instance çıkartıp, GetScheduler() methodunu çağırıyor, IScheduler interface‘inde yeralan Start() methodu ile başlatıyoruz.

JobBuilder sınıfının önce Create() methodunu, sonra Build() methodunu çağırıyoruz.

TriggerBuilder sınıfının da önce Create() methodunu, sonra StartNow() methodunu çağırarak hemen çalıştırmaya başlayacağımızı, WithCronSchedule() mthodunu çağırarak hangi periyotta çalıştırmak istediğimizi belirtiyoruz, en sonunda Build() methodunu çağırmayı unutmuyoruz.

WithCronSchedule() methoduna parametre verebileceğimiz değerler için CronExpressionGenerator sayfasını kullanabiliriz.

Ben bu makalede * * * ? * * ile her saniye tetiklenecek bir zamanlayıcı görev tanımladım.

IScheduler interface’inin ScheduleJob() methodu ile Job ve Trigger aracılığı ile zamanlanmış görevi başlatıyoruz.

Son olarak projeye aşağıdaki sınıfı da ekleyelim;

Uygulamayı çalıştırdığımızda aşağıdaki gibi bir çıktı almamız lazım;

Xamarin.Forms DevNot Atölye Etkinliği Aralık 2016

24 Aralık 2016 tarihinde DevNot Atölye bünyesinde ITU Ayazağa Kampüsü‘nde Xamarin.Forms ile Cross-Platform Uygulama Geliştirme konusunda bir etkinlik organize ettik.

Etkinliği gerçekleştirmemizi sağlayan sevgili arkadaşım Uğur Umutluoğlu‘na ve etkinliğe katılan tüm arkadaşlara çok teşekkür ederim.

AçıkAkademi Sanayi 4.0 İleri Seviye Eğitimleriyle Akıllı Nesneler (IoT) Dünyasına Giriş Yapmak İstiyorum Eğitimi 2016

AçıkAkademi üzerinde yayınlanan 33 video’luk Sanayi 4.0 İleri Seviye Eğitimleriyle Akıllı Nesneler (IoT) Dünyası eğitim seti yayına alındı.

Sevgili arkadaşlarım Umut Erkal ve Faruk Çelik ile hazırladığımız eğitim setini sizler de Sanayi 4.0 İleri Seviye Eğitimleriyle Akıllı Nesneler (IoT) Dünyasına Giriş Yapmak İstiyorum başlıklı AçıkAkademi sayfasından izleyebilirsiniz. Eğitim konu listesi;

  • Amaç ve Kapsam
  • Nesnelerin İnterneti
  • Raspberry PI 3 Genel Tanıtım
  • Raspberry PI 3
  • IoT Sensor Shield Tanıtımı - 1
  • IoT Sensor Shield Tanıtımı - 2
  • Universal Windows Platform (UWP) nedir?
  • Visual Studio’da Proje Oluşturmak
  • Olaya Dayalı Programlama
  • Değişkenler
  • Sınıflar
  • Fonksiyonlar ve Metotlar
  • Kontrol Yapıları
  • Raspberry PI İçin İlk Uygulamamızı Yazıyoruz - 1
  • Raspberry PI İçin İlk Uygulamamızı Yazıyoruz - 2
  • Raspberry PI İçin İlk Uygulamamızı Yazıyoruz - 3
  • Sıcaklık - Nem Sensöründen Veri Okuma Uygulaması
  • IoT HAT’imizle Çiçek Suluyoruz - 1
  • IoT HAT’imizle Çiçek Suluyoruz - 2
  • Sıcaklık Değişimine Göre Çiçek Sulama Uygulaması
  • Bulut Bilişim ve Microsoft Azure
  • Microsoft Azure Hesabımızı Açıyoruz
  • Microsoft Azure’daki IoT Projelerimiz için Kullanacağımız Hizmetler
  • Power BI ve Verilerimizin Görselleştirilmesi
  • Ücretsiz Bir Power BI Hesabı Açıyoruz
  • Power BI’a Göz Atalım
  • Örnek IoT Projemiz
  • Azure Hesabımızda IoT Hub Oluşturalım ve Gerekli Bilgileri Not Edelim
  • Azure Stream Analytics Hizmetimizi Oluşturalım
  • Azure Storage Hesabı Hizmetimizi Oluşturalım ve Container Yaratalım
  • RPI3’te Çalışacak UWP Uygulamamızı Yazalım - 1
  • RPI3’te Çalışacak UWP Uygulamamızı Yazalım - 2
  • RPI3’te Çalışacak UWP Uygulamamızı Yazalım - 3

AçıkAkademi için bu eğitim setini çekmemizi sağlayan sevgili arkadaşım Ümit Batu‘ya da teşekkür ederim.

Engin Polat hakkında

Chief Architect, Microsoft RD, Microsoft MVP

Ada ve Ege'nin babası ;)

Kategoriler

İstatistik

Makale Adedi: 452

Creative Commons Lisansı