آموزش ساخت صفحه‌ login در اندروید به همراه مثال عملی

 مقدمه

در این پست قصد داریم آموزش ساخت صفحه‌ ثبت نام در اندروید استودیو را برای شما قرار دهیم. صفحه‌ی ثبت نام یا صفحه‌ ورود صفحه ای است که از شما می‌خواهد برای شروع به کار با اپلیکیشن اطلاعات شخصی خود مانند نام کاربری و رمز عبورتان را وارد کنید. احتمالا قبلا با صفحه‌ی لاگین در اپلیکیشن شبکه‌های اجتماعی مانند اینستاگرام، فیسبوک و غیره کار کرده اید. در این آموزش، روش ایجاد صفحه‌ی login در اندروید را به شما یاد داده و در مورد روش‌های بالا بردن امنیت حساب‌های کاربری هنگامی‌که هکر‌ها قصد دارند به حساب دیگران وارد شوند با شما صحبت خواهیم کرد.

دوره پیشنهادی: آموزش ساخت فرم ورود و ثبت نام با استفاده از SqliteDatabase و googleSignInApi

TextView برای ایجاد صفحه‌ login در اندروید

برای ایجاد صفحه‌ی login در اندروید، اولین چیزی که در loginScreen اپلیکیشن به آن نیاز دارید متنی است که از کاربر بخواهد نام کاربری و رمز عبورش را وارد کند. TextView مربوط به رمز عبور باید دارای inputType برای رمز عبور باشد. سینتکس آن در این جا آورده شده است:

<EditText

   android:id = "@+id/editText2"

   android:layout_width = "wrap_content"

   android:layout_height = "wrap_content"

   android:inputType = "textPassword" />



<EditText

   android:id = "@+id/editText1"

   android:layout_width = "wrap_content"

   android:layout_height = "wrap_content"

/>

در کنار متن صفحه‌ی لاگین یک دکمه تعریف کنید و ویژگی onClick را برای آن قرار دهید. سپس function ذکر شده در ویژگی onclick را با کد جاوای زیر تعریف کنید:

<Button

   android:id = "@+id/button1"

   android:layout_width = "wrap_content"

   android:layout_height = "wrap_content"

   android:onClick = "login"

   android:text = "@string/Login"

/>

درون فایل جاوا، در روش onclick نام کاربری و رمز عبور را با استفاده از() getTextو ()toString بگیرید و با استفاده از فانکشن() equals آن را با متن هماهنگ کنید.

EditText username = (EditText)findViewById(R.id.editText1);

EditText password = (EditText)findViewById(R.id.editText2);                      



public void login(View view){

   if(username.getText().toString().equals("admin") && password.getText().toString().equals("admin")){

  

   //correcct password

   }else{

   //wrong password

}

در مرحله‌ی آخر باید امنیت صفحه‌ی لاگین خود را بالا ببرید تا هکر‌ها توانایی ورود به حساب‌های کاربری دیگران را نداشته باشند. برای این کار یک شمارشگر قرار دهید که با هر ورود رمز اشتباه از تعداد آن کم شده و زمانی که به 0 رسید، دکمه‌ی لاگین را غیر فعال کند:

int counter = 3;

counter--;



if(counter==0){

   //disble the button, close the application e.t.c

}

روش ایجاد صفحه‌ی login در اندروید: مثال عملی

در این مثال روش ایجاد صفحه‌ی login در اندروید را به طور عملی به شما نشان می‌دهیم. هر کاربر فقط می‌تواند سه بار نام کاربری و رمز عبور خود را در این صفحه وارد کند. برای بررسی درستی این کد می‌توانید اپلیکیشن خود را در یک شبیه ساز یا یک گوشی اندروید امتحان کنید.

کد زیر نشان دهنده‌ی محتوای اصلاح شده‌ی فایل src/MainAvtivity.java است.

package com.example.sairamkrishna.myapplication;



import android.app.Activity;

import android.graphics.Color;

import android.os.Bundle;

import android.view.View;



import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

import android.widget.Toast;





public class MainActivity extends Activity  {

   Button b1,b2;

   EditText ed1,ed2;



   TextView tx1;

   int counter = 3;



   @Override

   protected void onCreate(Bundle savedInstanceState) {

      super.onCreate(savedInstanceState);

      setContentView(R.layout.activity_main);



      b1 = (Button)findViewById(R.id.button);

      ed1 = (EditText)findViewById(R.id.editText);

      ed2 = (EditText)findViewById(R.id.editText2);



      b2 = (Button)findViewById(R.id.button2);

      tx1 = (TextView)findViewById(R.id.textView3);

      tx1.setVisibility(View.GONE);



      b1.setOnClickListener(new View.OnClickListener() {

         @Override

         public void onClick(View v) {

            if(ed1.getText().toString().equals("admin") &&

               ed2.getText().toString().equals("admin")) {

                  Toast.makeText(getApplicationContext(),

                     "Redirecting...",Toast.LENGTH_SHORT).show();

               }else{

                  Toast.makeText(getApplicationContext(), "Wrong

                     Credentials",Toast.LENGTH_SHORT).show();



                  tx1.setVisibility(View.VISIBLE);

                  tx1.setBackgroundColor(Color.RED);

                  counter--;

                  tx1.setText(Integer.toString(counter));



                  if (counter == 0) {

                     b1.setEnabled(false);

                  }

               }

         }

      });



      b2.setOnClickListener(new View.OnClickListener() {

         @Override

         public void onClick(View v) {

            finish();

         }

      });

   }

}

کد زیر نشان دهنده‌ی محتوای اصلاح شده‌ی res/layout/activity_main.xml است.

عبارت abc در کد زیر نشان دهنده‌ی لوگوی tutorialspoint.com است.

<?xml version = "1.0" encoding = "utf-8"?>

<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"

   xmlns:tools = "http://schemas.android.com/tools" android:layout_width="match_parent"

   android:layout_height = "match_parent" android:paddingLeft= "@dimen/activity_horizontal_margin"

   android:paddingRight = "@dimen/activity_horizontal_margin"

   android:paddingTop = "@dimen/activity_vertical_margin"

   android:paddingBottom = "@dimen/activity_vertical_margin" tools:context = ".MainActivity">

  

   <TextView android:text = "Login" android:layout_width="wrap_content"

      android:layout_height = "wrap_content"

      android:id = "@+id/textview"

      android:textSize = "35dp"

      android:layout_alignParentTop = "true"

      android:layout_centerHorizontal = "true" />

     

   <TextView

      android:layout_width = "wrap_content"

      android:layout_height = "wrap_content"

      android:text = "Tutorials point"

      android:id = "@+id/textView"

      android:layout_below = "@+id/textview"

      android:layout_centerHorizontal = "true"

      android:textColor = "#ff7aff24"

      android:textSize = "35dp" />

     

   <EditText

      android:layout_width = "wrap_content"

      android:layout_height = "wrap_content"

      android:id = "@+id/editText"

      android:hint = "Enter Name"

      android:focusable = "true"

      android:textColorHighlight = "#ff7eff15"

      android:textColorHint = "#ffff25e6"

      android:layout_marginTop = "46dp"

      android:layout_below = "@+id/imageView"

      android:layout_alignParentLeft = "true"

      android:layout_alignParentStart = "true"

      android:layout_alignParentRight = "true"

      android:layout_alignParentEnd = "true" />

     

   <ImageView

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:id="@+id/imageView"

      android:src="@drawable/abc"

      android:layout_below="@+id/textView"

      android:layout_centerHorizontal="true" />

     

   <EditText

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:inputType="textPassword"

      android:ems="10"

      android:id="@+id/editText2"

      android:layout_below="@+id/editText"

      android:layout_alignParentLeft="true"

      android:layout_alignParentStart="true"

      android:layout_alignRight="@+id/editText"

      android:layout_alignEnd="@+id/editText"

      android:textColorHint="#ffff299f"

      android:hint="Password" />

     

   <TextView

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="Attempts Left:"

      android:id="@+id/textView2"

      android:layout_below="@+id/editText2"

      android:layout_alignParentLeft="true"

      android:layout_alignParentStart="true"

      android:textSize="25dp" />

     

   <TextView

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="New Text"

      android:id="@+id/textView3"

      android:layout_alignTop="@+id/textView2"

      android:layout_alignParentRight="true"

      android:layout_alignParentEnd="true"

      android:layout_alignBottom="@+id/textView2"

      android:layout_toEndOf="@+id/textview"

      android:textSize="25dp"

      android:layout_toRightOf="@+id/textview" />

     

   <Button

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="login"

      android:id="@+id/button"

      android:layout_alignParentBottom="true"

      android:layout_toLeftOf="@+id/textview"

      android:layout_toStartOf="@+id/textview" />

     

   <Button

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="Cancel"

      android:id="@+id/button2"

      android:layout_alignParentBottom="true"

      android:layout_toRightOf="@+id/textview"

      android:layout_toEndOf="@+id/textview" />



</RelativeLayout>

کد زیر محتوای res/values/string.xml است.

<resources>

   <string name="app_name">My Application</string>

</resources>

کد زیر محتوای فایل AndroidManifest.xml است.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

   package="com.example.sairamkrishna.myapplication" >

  

   <application

      android:allowBackup="true"

      android:icon="@mipmap/ic_launcher"

      android:label="@string/app_name"

      android:theme="@style/AppTheme" >

     

      <activity

         android:name=".MainActivity"

         android:label="@string/app_name" >

        

         <intent-filter>

            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />

         </intent-filter>

        

      </activity>

     

   </application>

</manifest>

پس از ایجاد صفحه‌ی Login در اندروید، می‌توانید کد اصلاح شده‌ی خود را امتحان کنید. ابتدا باید AVD خود را در حین نصب محیط نرم افزار ساخته باشید. یکی از پروژه‌های خود را باز کرده و روی آیکون Run در نوار ابزار کلیک کنید تا اپلیکیشن در اندروید استودیو اجرا شود. اندروید استودیو اپلیکیشن را روی AVD شما نصب کرده و آن را اجرا می‌کند. اگر فرایند نصب اپلیکیشن به خوبی انجام شود، این صفحه را مشاهده خواهید کرد:

عبارت دلخواه خود را در بخش‌های مربوط به نام کاربری و رمز عبور وارد کرده و سپس روی دکمه‌ی لاگین کلیک کنید. من نام کاربری و رمز عبور را abc وارد کردم و با خطا مواجه شدم. این صفحه مانند تصویر زیر است:

اگر همین کار را دوبار دیگر انجام دهید دفعات مجاز برای ورود رمز عبور برای شما به 0 رسیده و دکمه‌ی لاگین برایتان غیرفعال می‌شود.

حالا برنامه را ببندید و یک بار دیگر آن را باز کنید. این بار عبارت درست admin را در هر دو بخش نام کاربری و رمزعبور وارد کنید. برنامه به شما اجازه‌ی ورود می‌دهد.

اگر روی دکمه‌ی cancel کلیک کنید، برنامه‌ی صفحه‌ی لاگین بسته می‌شود.

نتیجه گیری

در این پست آموزش ساخت صفحه‌ login در اندروید و سورس کد صفحه‌ لاگین در اندروید استودیو را برای شما قرار دادیم. از این آموزش می‌توانید برای ساخت فرم در اندروید نیز استفاده کنید. امیدواریم که این آموزش برای شما مفید بوده باشد.