كيفية انشاء صفحة لتحديث بيانات المستخدم داخل برنامج الاندرويد ستوديو #5

Ahmed Mahmoud

اخر تحديث :

كيفية انشاء صفحة لتحديث بيانات المستخدم داخل برنامج الاندرويد ستوديو

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

صفحة تحديث بيانات مربوطة بالفاير بيز

في الدرس السابق قمنا بإنشاء صفحة لعرض بيانات المستخدم الموجوده داخل قاعدة البيانات المربوطة بالتطبيق , وفي مقالة اليوم سوف نتعرف كيف يمكن للمستخدم إجراء تعديلات على المعلومات الخاصة به ويتم حفظها في firebase ايضا .

اولا توجة الى كود صفحة SettingsActivity والمخصصة لعرض بيانات المستخدم (قمنا بإنشائها في المقالة السابقة) , قم بتعريف FirebaseFirestore و FirebaseAuth وStorageReference وString بالاعلى .

في البداية داخل onCreat قم بتعريف محتويات الكود الموجود في xml وبعدها قم بعمل setOnClickListener للصورة و الزر المسؤول عن تحديث البيانات داخل الزر المسؤول عن تحديث البيانات ضع هذة الميثود uploaduserdata();

وداخل id الخاص بالصورة ضع الكود المسؤول عن فتح صورة من هاتفك

                CropImage.activity()
                        .setGuidelines(CropImageView.Guidelines.ON)
                        .start(SettingsActivity.this);

الموجود باللون الاصفر هذا ما يجب عليك كتابتة في حالتي استخدم Databinding لذلك قبل كل id اكتب binding اذا كنت لا تستعملها لا تكتب قبل الاي دي binding بل id الخاص بالعنصر مباشر ومن ثم عمل setOnClickListener , سوف تجد انة يوجد خط باللون الوردي بالاعلى فوقهم وهذة هي الميثود المسؤوله عن عرض البيانات يجب ان يكون بالاول لانة عندما يدخل المستخدم الى صفحة الاعدادات يتم عرض بياناته وبعدها يقوم بعمل تغيير (يجب ان تركز في ترتيب الاكواد) .

الان قم بعمل method الخاصه بي uploaduserdata كما تعلمنا سابقا وضع الكود التالي بداخلها

.

        String name = binding.settingName.getText().toString().trim();
        String phone = binding.settingPhone.getText().toString().trim();

        if (name.isEmpty() || phone.isEmpty()) {
            Toast.makeText(this, "من فضلك ادخل البيانات بشكل صحيح", Toast.LENGTH_SHORT).show();
            binding.settingEmail.setError("ادخل البيانات");
            binding.settingPhone.setError("ادخل البيانات");
            return;
        }
        HashMap<String, Object> hashMap = new HashMap<>();
        hashMap.put("name", name);
        hashMap.put("phone", phone);

        firestore.collection("upload UserData").document(uid).update(hashMap).addOnCompleteListener(new OnCompleteListener<Void>() {
            @Override
            public void onComplete(@NonNull Task<Void> task) {
                if (task.isSuccessful()) {
                    Toast.makeText(SettingsActivity.this, "تم رفع بياناتك بنجاح", Toast.LENGTH_SHORT).show();
                } else {
                    String Errormessage = task.getException().getLocalizedMessage();
                    Log.i(TAG, "onComplete: " + Errormessage);
                    Toast.makeText(SettingsActivity.this, Errormessage, Toast.LENGTH_SHORT).show();
                }
            }
        });

في البداية قم بتعريف id الاشياء التي تريد المستخدم ان يعدل عليها وبعدها عملية اختبار اذا كان الهاتف او الاسم فارغ تظهر رسالة ادخال بيانات وايضا المكان الخاص بهم اذا كان فارغ ييضيئ بالون الاحمر وعليها رسالة ادخل البيانات وبعدها return لكي يرجع السابق ولا يكمل , واذا كانت المعلومات المدخلة كاملة وبشكل صحيح ينفذ HashMap وتعرفنا عليها في الدروس السابقه وهنا وهي بكل اختار تكتب HashMap وتاخذ بداخلها قيم من نوع String و Object وبعدها قم بوضع اسم لها كما بالصورة السابقة , بعد ذلك تقوم بمنادتها عن طريق اسمها وتوضع بداخلها امر put وهذا يعني انك تريد تخزين قيم وتكتب الاسم الموجود في firestor للعنصر المراد تغيير اسمة وهنا اريد تغيير الهاتف و الاسم اقوم اولا بكتابة اسم العنصر الذي اريد تغيره في الفاير ستور وبعدها , واكتب بعدها اسم العنصر المعرف بالاول الميثود name كررت العملية على الاسم والهاتف (اذا كان الاسم الموجود بين "" غير مطابق للاسم الموجود في Firestore لن يحدث اي تغيير ) وعمل firestore.collection ونكتب اسم المجلد الموجود بداخلها في firebase والذي يحتوي على معلومات المستخدم وبعدها document وهنا نكتب id الخاص بالمستخدم وقمنا بتعريفه سابقا بإسم uid وبعدها update لكي يقوم بعمل تحديث للبيانات الموجوده عنده ونضع بداخلها اسم hashMap الذي قمت بتسميتة , بعد الانتهاء من هذة العملية سوف تجد انة يمكنك تغيير البيانات بكل سهولة وبدون مشاكل بإذن الله .

الان نريد طريقة لتغيير الصورة وهي بكل سهولة سوف نقوم بأخذ method المسؤوله عن تحديد الصورة بإسم onActivityResult سوف تجدها في صفحة Register التي قمنا بعملها هناك من قبل ولذلك اختصارا للوقت يمكنك سحبها من هناك وهذا هو الكود الموجود بعد عمل بعض التغيرات ضعها اسفل الميثود uploaduserdata

    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {
            CropImage.ActivityResult result = CropImage.getActivityResult(data);
            if (resultCode == RESULT_OK) {
                Uri imageURI = result.getUri();
                binding.settingImage.setImageURI(imageURI);
                UploadprofileImage(imageURI);
                prograsbar_start();
            } else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {
                Exception error = result.getError();
                Toast.makeText(this, error.getLocalizedMessage(), Toast.LENGTH_SHORT).show();
            }
        }

    }

قم بتغيير binding.settingImage بإسم id الصورة الموجود في xml , وimageURI نضع قبلة Uri لكي يحظر الصورة من الهاتف وقم بإستبدال SettingsActivity بإسم Activity التي تعمل عليها (اذا كنت قمت بتسميتة بإسم اخر) هتشاهد ايرور في prograsbar_start اتركة سنرجع له في النهايه .

اقرء المزيد

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

كيفية عرض معلومات المستخدم داخل صفحة الاعدادات "فاير بيز" - أندرويد ستوديو

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

قم بعمل ميثود اخرى بإسم UploadprofileImage او يمكنك سحبها من RegisterActivity كما تعلمنا سابقا إختصارا للوقت والكود الخاص بها التالي

    private void UploadprofileImage(Uri imageURI) {
        storageReference.child("ProfileImages").child(uid).putFile(imageURI).addOnCompleteListener(new OnCompleteListener<UploadTask.TaskSnapshot>() {
            @Override
            public void onComplete(@NonNull Task<UploadTask.TaskSnapshot> task) {
                if (task.isSuccessful()) {
                    Toast.makeText(SettingsActivity.this, "تم رفع الصورة بنجاح", Toast.LENGTH_SHORT).show();
                    getprofileimage();

                } else {
                    String ErrorMessage = task.getException().getLocalizedMessage();
                    Log.i(TAG, "onComplete: " + ErrorMessage);
                    Toast.makeText(SettingsActivity.this, ErrorMessage, Toast.LENGTH_SHORT).show();
                }
            }
        });

    }

قم بتغيير uid بإسم id المستخدم الذي قمت بتعريفة في الاعلى String uid , قم بإنشاء ميثود اخرى بإسم getprofileimage

بداخل getprofileimage نكتب الكود المسؤول عن إحضار الصورة لكي يقوم بتغييرها عندما ينقر المستخدم على تغيير البيانات

    private void getprofileimage() {
        storageReference.child("ProfileImages").child(uid).getDownloadUrl().addOnCompleteListener(new OnCompleteListener<Uri>() {
            @Override
            public void onComplete(@NonNull Task<Uri> task) {
                if (task.isSuccessful()) {
                    String imageurl = task.getResult().toString();
                    Log.i(TAG, "onComplete: " + imageurl);
                    updateprofileimage(imageurl);

                } else {
                    String ErrorMessage = task.getException().getLocalizedMessage();
                    Log.i(TAG, "onComplete: " + ErrorMessage);
                    Toast.makeText(SettingsActivity.this, ErrorMessage, Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

اخيرا قم بعمل ميثود اخيرة بإسم updateprofileimage وهي مسؤوله عن تغيير الصورة القديمة بالجديدة التي قام المستخدم بتغيرها وهذا الكود الخاص بها

    private void updateprofileimage(String imageurl) {
        HashMap<String, Object> hashMap = new HashMap<>();
        hashMap.put("imageurl", imageurl);

        firestore.collection("upload UserData").document(uid).update(hashMap).addOnCompleteListener(new OnCompleteListener<Void>() {
            @Override
            public void onComplete(@NonNull Task<Void> task) {
                if (task.isSuccessful()) {
                    Toast.makeText(SettingsActivity.this, "تم رفع بياناتك بنجاح", Toast.LENGTH_SHORT).show();
                    prograsbar_stop();
                } else {
                    String Errormessage = task.getException().getLocalizedMessage();
                    Log.i(TAG, "onComplete: " + Errormessage);
                    Toast.makeText(SettingsActivity.this, Errormessage, Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

ستشاهد ايرور في prograsbar_stop اتركها سنرجع لها في النهاية , في هذة الجزئية قمنا بعمل HashMap جديدة للصورة كما تم شرحها بالاعلى لا يوجد اي اختلاف .

ارجع الان الى صفحة xml الخاصة بالكود الذي تعمل عليها بهذة الصفحة لاضافة وقم بعمل constraintlayout اسفل LinearLayout وقم بوضع الصورة بداخلها لكي نقوم بعمل ProgressBar بعد اضافة الصورة سوف تشاهد بها ايرور انقر عليها في الــ privio وعمل لهم vertical و horizontal كما بالصورة ( للصورة و البروجرس بار )

اخيرا توجة الى الكود وقم بتعريف ProgressBar وعمل ميثود لتشغيله وميثود اخرى لايقافة بالاسماء التالية prograsbar_start و prograsbar_stop وسوف تجد المشاكل السابقه انحلت