طريقة سهلة لبناء ميزة رمز PIN تفاعلية وآمنة في Android

قبل سنوات عديدة، لم يكن بناء ميزة رمز PIN مع حماية البيانات أمرًا سهلًا من دون Data Binding. كان عليكم ربما إنشاء ملف XML إلى جانب صنف (class) مخصص للعرض، أما مع Data Binding فيمكنكم بناء ميزة رمز PIN بسهولة أكبر.

سأوضح كيفية استخدام Data Binding من خلال بناء ميزة رمز PIN تحدّث واجهة المستخدم تفاعليًا مع كل تغيير في البيانات.

**ما هو Data Binding في Android؟**مكتبة Data Binding مكتبة دعم تتيح لكم ربط مكونات واجهة المستخدم في التخطيطات (layouts) بمصادر البيانات في تطبيقكم باستخدام صيغة تصريحية بدلًا من الربط البرمجي. -- Data Binding Libraryكنت أتساءل: "لماذا نستخدم Data Binding ولدينا Kotlin Synthetics التي تتيح الوصول إلى مكونات الواجهة مباشرة من الـ fragment/activity؟" الجواب أن Data Binding يتيح لكم الوصول إلى الـ ViewModel مباشرة وتفاعليًا من ملف XML، ويمكننا كتابة تعبير بسيط لا يحتاج إلى أي كود برمجي داخل الـ fragment/activity.طريقة التنفيذ.

لنبدأ بملف PinCodeViewModel.kt الذي يحتوي على منطق إضافة أرقام رمز PIN وحذفها.

package com.him.secured_pincode.ui.main

import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel

class PinCodeViewModel : ViewModel() {

    val pinCode = MutableLiveData<String>().also {
        it.value = ""
    }

    val numPadListener = object : NumPadListener {
        override fun onNumberClicked(number: Char) {
            val existingPassCode = pinCode.value ?: ""
            val newPassCode = existingPassCode + number
            pinCode.postValue(newPassCode)
        }

        override fun onEraseClicked() {
            val droppedLast = pinCode.value?.dropLast(1) ?: ""
            pinCode.postValue(droppedLast)
        }
    }

}
<strong>language-</strong>kotlin

إنشاء نقاط رمز PIN وتغيير لونها تفاعليًا أنشئوا ملف layout_pin_code_dots.xml. يحتوي الملف على نقاط رمز PIN، ويحوّل كل نقطة بيضاء إلى نقطة بنفسجية كلما أدخل المستخدم رقمًا من الرمز، وذلك بإضافة تعبير بسيط إلى النقاط كما يلي:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

        <variable
            name="pinCode"
            type="androidx.lifecycle.MutableLiveData&lt;java.lang.String>" />
    </data>

....
        <View
            android:id="@+id/dot1"
            android:layout_width="@dimen/pincode_dot_size"
            android:layout_height="@dimen/pincode_dot_size"
            android:background="@drawable/pass_code_dot_selector"

<-- We will change the first dot to a purple dot when the user entered the first pin code -->
            android:enabled="@{pinCode.length() >= 1}" />

        <View
            android:id="@+id/dot2"
            android:layout_width="@dimen/pincode_dot_size"
            android:layout_height="@dimen/pincode_dot_size"
            android:layout_marginStart="16dp"
            android:background="@drawable/pass_code_dot_selector"
            android:enabled="@{pinCode.length() >= 2}" />
<strong>...</strong>

أنشئوا ملف XML للوحة الأرقام وأضيفوا callback إلى كل زر، بحيث نضيف أرقام الرمز إلى الـ ViewModel مباشرة من دون أي كود إضافي داخل الـ fragment/activity.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

        <variable
            name="numPadListener"
            type="com.him.secured_pincode.ui.main.NumPadListener" />

    </data>

...
        <Button
            style="@style/passCodeButton"
            android:onClick="@{(v) -> numPadListener.onNumberClicked('1')}"
            android:text="1" />

        <Button
            style="@style/passCodeButton"
            android:layout_marginStart="24dp"
            android:onClick="@{(v) -> numPadListener.onNumberClicked('2')}"
            android:text="2" />
...

وهذا كل شيء، بهذه السهولة نبني ميزة رمز PIN باستخدام Data Binding. شاركونا إن كانت لديكم أفكار أخرى، ويمكنكم العثور على الكود المصدري على Github وفي الجزء التالي، سأشرح طريقة سهلة لتأمين رمز PIN في Android.