عمل صفحة تسجيل و دخول وربطها بالفاير بيز داخل تطبيقك في ألاندرويد ستوديو #2

Ahmed Mahmoud

اخر تحديث :

عمل صفحة تسجيل و دخول وربطها بالفاير بيز داخل تطبيقك في ألاندرويد ستوديو

تعتبر صفحة التسجيل و صفحه الدخول هي أكثر الصفحات استخدامها داخل برنامج الاندرويد ستوديو او داخل خدمة "Firebase" تحديدا ان هذه الصفحات قد لا يخلو تطبيق منها وفي مقاله اليوم سوف نتحدث باذن الله عن طريقه عمل صفحه تسجيل و صفحه الدخول لتطبيقك وربطها بخدمة الفايربيز باذن الله , إن لم تكن تعرف ما هي الفاير بيز او لم تسمعها من قبل فيمكنك الرجوع إلى المقالات السابقة والتعرف على الفايربيز والتعرف أيضا على مميزاتها لتتضح معك الصوره وهذا يعتبر اول شرح سنقوم بعمله في الاندرويد ستوديو مع "الفايربيز" ارجو منكم التركيز فى المقالة الطريقة بسيطة جدا ولكن تحتاج منكم الى التركيز

إنشاء صفحة تسجيل وصفحة دخول بالفاير بيز

استكمالا للدرس السابق حيث تم شرح كيفية ربط تطبيقك بخدمة فاير بيز الموجهه من جوجل وفي هذا المقال سوف نتعرف على نقوم بعمل صفحة تسجيل حساب وصفحة تسجيل دخول وربطها اونلاين بتطبيقك اولا يجب عليك انشاء صفحتين activity واحده للتسجيل وواحده اخرى لتسجيل الدخول .

توجة الى صفحة التسجيل login وصمم شكل تسجيل الدخول ( الاميل و الرقم السري وزر للدخول وزر اخرى للتسجيل )

واربطها بالفاير بيز كما تعرفنا في الدرس السابق بعدها عن طريق كتابة الكود التالي بعد public class LoginActivity

FirebaseAuth firebaseAuth = FirebaseAuth.getInstance();

قم ايضا بتعريف Edittext و button الموجودين في LoginActivity ولكني هنا استخدم data binding لذلك لا احتاج لتعريفهم بالاعلى

قم بعمل setOnClickListener للزر المسؤول عن عملية الانتقال من LoginActivity الى RegisterActivity واكتب الكود التالي بداخلة

    Intent intent = new Intent(LoginActivity.this,RegisterActivity.class);
    startActivity(intent);

قم بتغيير RegisterActivity باسم Activity المسؤوله عن عملية التسجيل , وقم بعمل setOnClickListener للزر المسؤول عن عملية الدخول وضع الكود التالي بداخلة

                String email = binding.emailuser.getText().toString();
                String pass = binding.passuser.getText().toString();
                if (email.isEmpty() || pass.isEmpty()) {
                    Toast.makeText(LoginActivity.this, "Please Check your Data", 
                         Toast.LENGTH_SHORT).show();
                    return;
                }
                singin(email,pass);

سوف تلاحظ انة يوجد ايرور في emailuser و passuser وهذة هي id الاميل والرقم السري لذلك قم بتغييرها بإسم id الذي قمت بوضعه داخل xml وايضا اذا لم تكن تستخدم data binding احذف binding التي قبلهم واكمل الكود بشكل عادي , ايضا ستلاحظ ايرور في singin قم بالضغط على alt + Enter واختر Method وبعدها اختر اسم Activity التي تعملها كما بالصورة

سوف تجد انة قام بعمل Creat Method لعمل تسجل الدخول قم بلصق الكود التالي بداخلها

firebaseAuth.signInWithEmailAndPassword(email,pass).addOnCompleteListener(new OnCompleteListener<AuthResult>() {
            @Override
            public void onComplete(@NonNull Task<AuthResult> task) {
                if (task.isSuccessful()) {
                    Toast.makeText(LoginActivity.this, "Welcome", Toast.LENGTH_SHORT).show();
                    Intent intent = new Intent(LoginActivity.this,MainActivity.class);
                    startActivity(intent);
                    finish();
                    return;
                } else {
                    Toast.makeText(LoginActivity.this, "Please check your email and password", Toast.LENGTH_SHORT).show();
                }
            }
        });

هذا الكود سوف يقوم بمقارنة الاميل والرقم السري المخزن في قاعة بيانات التطبيق ( firebase ) واذا كانت صحيح سوف يظهر رسالة Welcome وينقل المستخدم الى MainActivity واذا كانت الاجابه خطأ سوف تظهر رسالة Please check your email and password , والى هنا يكون انتهى العمل في صفحة Login , الكود النهائي في الصورة التالية .

افتح صفحة Register وقم بتصميم واجهة لكتابة الاميل واسم المستخدم والرقم السري واعادة الرقم السري وزر لعمل تسجيل

اقرء المزيد

شرح كيفية استخدام الماتريال ديزين Material Design داخل تطبيقك في الاندرويد ستوديو

اضافة زر للعودة للصفحة السابقه وتعديل اسم toolbar داخل android studio

كيفية اضافة صور json الى تطبيقك في الاندرويد ستوديو android studio

الان نتوجة الى عمل code الى واجهة التسجيل وعمل setOnClickListener للزر وبعدها سنعمل بداخلها مجموعة اختبارات وهي اذا كانت احدى العناصر فارغة Please Check your Data واذا كانت كلمة السر غير متطابقة مع اعادة كلمة السر سوف تخرج رسالة password does not match واذا كانت كلمة السر اقل من 6 ارقام تخرج رسالة The password is very weak واذا لم يكن خطا في عملية التسجيل سوف يقوم بتنفيذ creataccount

                String email = binding.emailuser.getText().toString();

                String user = binding.iduser.getText().toString();

                String pass = binding.passuser.getText().toString();

                String Repass = binding.convpassuser.getText().toString();

                if (email.isEmpty() || user.isEmpty() || pass.isEmpty() || Repass.isEmpty()) {
                    Toast.makeText(RegisterActivity.this, "Please Check your Data", Toast.LENGTH_SHORT).show();
                    return;
                }
                if(!pass.equals(Repass)) {
                    Toast.makeText(RegisterActivity.this,"password does not match", Toast.LENGTH_SHORT).show();
                    return;
                }
                if (pass.length() < 6) {
                    Toast.makeText(RegisterActivity.this, "The password is very weak", Toast.LENGTH_SHORT).show();
                    return;
                }
                creataccount(email,pass);

سوف تلاحظ خطأ في emailuser وغيرها من العناصر التي تقع اسفلها حيث ان هذا هو id الذي تم وضعه في صفحة xml لذلك قم بتغييره واذا لم تكن تستخدم داتا بيندنج احذفها من الاول ايضا , سوف تلاحظ وجود خطا في creataccount ايضا alt + enter واخر method بعدها اختر اسم Activity التي تعمل عليها كما بالصورة السابقة

الان بداخل Method التي فمت بعملها ضع هذا الكود

firebaseAuth.createUserWithEmailAndPassword(email, pass);

هذا الكود يقوم بتخزين البيانات من المستخدم في firebase ولكن تريد ان تظهر رسالة ان عملية التسجيل ناجحة للمستخدم او تنقلة للصفحة التالية فقم بإضافة الكود التالي بدلا من الكود الاول

        firebaseAuth.createUserWithEmailAndPassword(email, pass).addOnCompleteListener(new OnCompleteListener<AuthResult>() {

            @Override
            public void onComplete(@NonNull Task<AuthResult> task) {
                if (task.isSuccessful()) {
                    Toast.makeText(RegisterActivity.this, "successfully registered", Toast.LENGTH_SHORT).show();
                } else {
                    String ErrorMessage = task.getException().getLocalizedMessage();
                    Log.i(TAG, "onComplete: "+ErrorMessage);
                    Toast.makeText(RegisterActivity.this, ErrorMessage, Toast.LENGTH_SHORT).show();
                }
            }
        });

اذا كانت عملية التسجيل ناجة ستخرج للمستخدم رسالة successfully registered واذا لم تكن ناجحة ستظهر لدي (المطور) سبب المشكلة التي جعلت المستخدم غير قادر على التسجيل لكي استطيع معرفة سبب المشكلة وحلها , الكود كامل بالصورة التالية .

الان الخطوة الاخيرة وهي صفحة MainActivity يمكنك وضع بداخلها اي شيئ ولكني سأضع زر لتسجيل الخروج فقط بداخلها وبعدها انتقل للكود لتكويد الزر .

قم بتصميم زر في منتصف الصفحة او في اي مكان حيث عندما ينقر عليه المستخدم يتم تسجيل الخروج , وقم بتعريف FirebaseAuth كما تعرفنا سابقا واكتب الكود التالي داخل onCreate

        if (firebaseAuth.getCurrentUser() == null) {
            Intent intent = new Intent(MainActivity.this,LoginActivity.class);
            startActivity(intent);
            finish();
            return;
        }

واكتب الكود التالي داخل الزر بعدما تقوم بعمل setOnClickListener للزر

            firebaseAuth.signOut();
            if (firebaseAuth.getCurrentUser() == null) {
                Intent intent = new Intent(MainActivity.this, LoginActivity.class);
                startActivity(intent);
                finish();
            }

صورة للكود