React Native ile Mobil Uygulama Geliştirme – 2 – Props ve State

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 2. kısmıdır. Bir önceki makalede (Part 1), React Native ile cross-platform mobil uygulama geliştirmek için bilmeniz gereken program kurulumlarından ve Android ve IOS platformları için yapılması gereken ortam kurulum ve ayarlarından bahsettim.

Bu makalede de props” ve “state” kavramlarından bahsedeceğim. React Native’de veri komponent içinde 2 şekilde işlenir: State ya da props kullanarak. State, bir verinin değiştirilme/güncellenme durumu varsa kullanılabilir. Props ise, mevcut bir verinin başka bir komponente aktarılma yöntemidir.

Makaleleri sırasıyla okumanızı tavsiye ediyorum. Eğer PART 1’i okumadıysanız buradan ulaşabilirsiniz.

“props” ve “state”, React Native’deki iki önemli kavramdır. React Native Props ve State kullanarak, bir bileşeni kontrol edebiliriz. Bu derste, “props” ve “state” in örneklerle nasıl kullanılacağını öğreneceğiz.

Props

React Native’de, yeniden kullanılabilir her eleman bir bileşen olarak oluşturulabilir. Örneğin, bir resim ve başlık içeren bir feed listeniz varsa, o öğe için bir bileşen oluşturabilir ve bu öğeyi feed’in her satırında kullanabiliriz. Her satır farklı görüntü ve başlıklarla aynı bileşeni kullanacaktır.

Yine, uygulamamızda, başka bir sayfada resim ve başlık ile aynı görünüm gerekiyorsa, bu bileşeni kullanabiliriz.

Ancak bileşenin yükleyeceği değerleri nasıl ileteceğiz? Bu örnekte, her bir satır için aynı bileşene farklı bir resim URL’si ve başlığı geçirmemiz gerekiyor. “props” bunun için kullanılır. ReactJS’lere aşina iseniz, props konsepti aynıdır. Farklı bileşen örneğine farklı “props” atayabiliriz ve her örnek, görüşlerini oluşturmak için “props” değerini kullanır.

“props”, “properties” anlamına gelir. Normalde, bir üst bileşen props’u alt bileşenlerine geçirir. Alt bileşen, props’ta tanımlanan değerleri kullanır. Propsları kullanarak, yeniden kullanılabilir kod yazmak kolaylaşır.

Bileşenlerde props kullanımı:

Çoğu sistem bileşeninde props kullanmamız gerekir, çünkü bu bileşenler farklı özellikler için farklı görünecektir. Örneğin, yerel bir uygulamada bir resim eklemek için aşağıdaki “Resim” bileşeni gereklidir:

Burada ‘source’ bir props. Farklı URL’yi geçebiliriz ve farklı resimler gösterecektir. Aynı “Image” bileşenini kullandığımızı, ancak “url” desteklerinin farklı olduğunu unutmayın.

“Props” nin değişmez olduğunu hatırlamamız gereken bir şey var, yani onları değiştiremeyiz. Ayrıca, propslar üst bileşenden alt bileşene, yani yukarıdan aşağıya doğru geçirilir.

Custom Component oluşturma:

Bir ‘props’u kabul eden özel bir bileşen oluşturalım. Tek bir basit bileşen oluşturacağız ve farklı sahne değerleri kullanarak farklı değerler göstereceğiz.

Her şeyden önce, basit bir react-native projesi oluşturun. Kök klasörde bir “CustomCard.js” dosyası oluşturun ve aşağıdaki kodu ekleyin:

Bu bir react bileşenidir. Diğer görünüm bileşenleri gibi içe aktarabilir ve yükleyebiliriz. Bu bileşen yüklendiğinde, kullanıldığı yerden döndürülecek bir görünüm döndüren render() yöntemini yürütür.

View olarak return  içinde, bir Metin ve bir Resim var. Metin, “props” lardan aldığı “başlık” değerini gösteriyor. Benzer şekilde, Resim aynı “props” lardan aldığı “url” yi kullanarak bir resim yükler.

Şimdi ‘App.js’ dosyasını açın ve içeriğini aşağıdaki gibi değiştirin:

Burada, ‘firstImage’ ve ‘secondImage’ iki farklı görüntünün iki farklı url’si. Kök bileşendir, yani Uygulama bu bileşenin oluşturma yönteminden döndürülen içeriği yükler.

“Render” içinde “CustomCard” bileşenlerini iki kez kullanıyoruz. Her seferinde iki değer iletiyoruz: “url” ve “başlık”. Bu değerler bileşende sırasıyla “this.props.url” ve “this.props.title” olarak kullanılır. Uygulamayı çalıştırın ve aşağıdaki gibi bir çıktı verecektir:

 

Burada gördüğünüz gibi, aynı bileşen farklı görüntü ve metinlerle yüklendi.

State

Daha önce “props” öğesinin ana bileşen tarafından ayarlandığından ve bir alt bileşene aktarıldığından bahsetmiştim. Alt bileşen, “props” daki değerleri değiştiremez. Değişebilir verileri işlemek için “state” adı verilen farklı bir bileşen özelliği kullanmamız gerekir.

Bir “state”, bir bileşende değişebilecek verileri depolamak için kullanılır. Her bileşenin farklı bir “state” değerleri vardır. Bu değerlere dayanarak kullanıcı arayüzü değiştirilir.

Daha önemli bir şey de, bir state’deki hiçbir değeri doğrudan değiştiremeyeceğimizdir. Bunun için “setState” adlı bir yöntemi çağırmamız gerekiyor. Bu yöntem geçerli durumu değiştirir ve tüm bileşeni yeniden oluşturur.

Yukarıda açıklanan aynı örneği kullanıyoruz. CustomCard.js dosyasını aşağıdaki gibi değiştirin:

Çıktı
Programı şimdi çalıştırırsanız, aşağıdaki gibi görünecektir:

 

Bileşenin altına bir düğme ekledik. Bu düğmelerden herhangi birini tıklatırsanız, her tıklamada başlık metnini gizler ve gösterir.

Koda yakından bakın. “constructor” yöntemi, bileşen her oluşturulduğunda, yani “render” çağrılmadan önce çağrılır. “constructor” içinde “state” i başlatıyoruz. Yalnızca bir boolean değeri ‘isHidden’ ve başlangıç ​​değeri ‘false’.

“constructor” yönteminin “render” ifadesinde, “Metin” bileşeni yalnızca “eyalet” te tanımlanan “isHidden” değeri “yanlış” ise gösterilir. Aksi takdirde, gizlenir. Bir “state’te” mevcut değeri kontrol etmek için “this.state” kullanıyoruz.

‘Düğme’ bileşeninde, üzerine tıklarsak, ‘onPress’ desteklerinin işaret ettiği yöntemi, yani ‘showHideText’ ok işlevini uygular. Düğmeye her tıkladığınızda, aynı yöntemi çağıracaktır. Bu yöntemin içinde, ‘state’ tanımlı ‘isHidden’ ın mevcut değerini değiştiriyoruz.

this.setState ({isHidden:! this.state.isHidden})

Bunu “! This.state.isHidden” olarak değiştiriyoruz, yani, değer “doğru” ise “yanlış” ve “yanlış” ise, “doğru” olacaktır. Bir “state” içindeki herhangi bir şeyi değiştirmek için “this.setState” yöntemi çağrılır. Bu yöntemi çağırdığımızda, bileşen yeniden yeniden oluşturulur. Dolayısıyla, “isHidden” değeri “doğru” olursa, “Metin” gizlenir ve “yanlış” olursa “Metin” gösterilir.

Bir state’deki hiçbir değeri doğrudan değiştiremeyiz. Bunu değiştirmek için “setState” yöntemi gerekir. Bu yöntemi kullanarak bir veya daha fazla durum değerini değiştirebiliriz. Ayrıca, durum her bileşen nesnesinde farklıdır.

React Native Props ve State arasındaki fark:

React Native props ve state başlıkları arasındaki temel fark şunlardır:

Props değiştirilemez ancak state değiştirilebilir.
Props donanımı normalde ana bileşenden alt bileşenine geçirilir. Ancak, her bileşende state korunur.
Props araçlarını kullanarak bir üst bileşenin durumunu değiştirebiliriz.

Bir sonra ki makale de Part3:React Native Uygulamalarında stillendirmeden bahsedeceğim. Takipte kalın!

AndroidX Biometric API ile Parmak İzi Doğrulama

Hepimiz mobil cihazlarımızda birçok bilgiyi saklıyoruz. İnsanlar, uygulama içi ödemeler yapmak gibi hassas işlemleri gerçekleştirmek için düzenli olarak akıllı telefonlar ve tabletler kullanıyor.Bu yüzden mobil uygulamalarda güvenlik çok önemli bir konumdadır. Güvenliği sağlamak için çeşitli yöntemleri uygulayabilirsiniz. Kullanıcının sisteme erişirken kim olduğunu kanıtlama işlemi olan kimlik doğrulama, güvenlik yöntemlerden biridir. PIN, şifre, güvenlik anahtarı ve biyometrik (parmak izi, yüz algılama) kimlik doğrulama çeşitlerinden birini kullanarak uygulamanızın bazı bölümlerini veya tüm uygulamanızı kilitlemeyi düşünebilirsiniz.

Parola ve PIN  kimlik doğrulama yöntemlerinde, giriş bilgilerini unutma ya da karıştırma ihtimaliniz yüksektir. Fakat Biyometrik parmak izi doğrulama, parmak ucunuzu dokunmatik sensöre basarak yapılan bir işlem olduğu için uygulaması daha kolaydır. Parola ve PIN kimlik doğrulama gibi yöntemleri kullandığınızda birisinin şifreleri tahmin edemeyeceğinin veya kullanıcının cihazına casus yazılım gibi araçlar yoluyla şifresini sızdırmayacağına dair bir garanti yoktur. Parmak izi ise benzersiz ve tahmin edilmesi imkansız olduğundan güvenliği daha yüksek bir yöntemdir.

Bu makalemde, bir Android uygulamasında AndroidX Biometric kütüphanesini kullanarak, parmak izi kimlik doğrulama yöntemini örnekleyeceğim.

Örneğimizi uyguladığımızda aşağıdaki gibi bir ekran görüntüsünü elde edeceğiz.

androidx-biometric

Örneklediğim projemin kodlarını indirmek isterseniz; yapmanız gereken tek şey aşağıya koyduğum KODLARI İNDİR resmine tıklamak.

Birkaç adımda bir Android uygulamasında AndroidX Biometric kütüphanesini kullanarak, parmak izi kimlik doğrulamayı nasıl yapacağımızı görelim.

1-Gerekli Kütüphanelerin Eklenmesi

Biometric API ile parmak izi doğrulama yapabilmek için AndroidX kütüphanesine geçmeniz gerekir.Bu yüzden projedeki appcompat, constraintlayout ve biometric kütüphanelerinin tanımlamaları androidx ile başlayacaktır.

Dilerseniz AndroidX Kütüphanesine Geciş adlı makalemi okuyarak, var olan projelerinizi AndroidX yapısına kolaylıkla geçişini sağlayabilirsiniz.

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Biometric kütüphanesini yüklüyoruz.

2-Projede İzinlerin Tanımlanması

Cihazın desteklediği tüm farklı biyometrik kimlik doğrulama işlemlerini kullanabilmek için bir tane izin tanımlamamız gerekir. Aşağıdaki izin kodunu da AndroidManifest.xml dosyasında application tag’nin üst kısmına yerleştirin.

3-Arayüz Kodlaması

Örneğimizdeki görüntüyü elde etmek içim, 1 tane xml dosyasında kodlama yapmamız gerekmektedir. activity_main xml kodlarımızda, constraintlayout içine Button ekledim.

activity_main xml kodlarımız;

4-Java kodlama ile işlevsellik oluşturma

AndroidX Biometric API’nin içinde bulunan BiometricPrompt sınıfını kullanarak, parmağı sensöre dokundurduğunuz anda, telefonda kayıtlı iz ile karşılaştırma yaparak uygulama içinde kimlik doğrulama yapar.Daha detaylı kod açıklamaları, yorum tagları içinde bulunmaktadır.