تطبيق Instagram بأندرويد و Firebase الجزء الثاني

فهاد الجزء الثاني من تطبيق Instagram بأندرويد و Firebase غادي نكملو الملفات لي غادي يمكنوا المستخدم من تغيير البروفايل ديالو بالإضافة للملف لي غادي يمكن المستخدم من إضافة صورة لقاعدة البيانات.

نظرة سريعة بالفيديو


1- الملف activity_profile.xml


فأول حاجة غادي نديرو غادي  تمشي للمجلد java فيه غادي تدير كليك بليمن ديال la souris غادي تختار New Activity منبعد Empty Activity  منبعد سميه ProfileActivity ملي تزاد غادي تمشي للمجلد res/layout فيه كاين ملف سميتو activity_profile.xml هادا هو الملف لي فيه كاين form فيها ImageButton ملي كيكليكي عليها المستخدم كتنفد ل fonction profileImageClicked لي كتمكنو من اختيار صورة من ل gallery ديال التلفون ديالو ثم كاين حقل كيمكنو من إدخال ل pseudo ديالو  ثم bouton  منبعد مكيكليكي عليه كتنفد ل fonction addUserNameAndProfilePicture ولي غادي تكون فالملف ProfileActivity.java الكود ديال الملف activity_profile.xml هو :

                                    
                                        <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.belasri.instaapp.ProfileActivity">
    <LinearLayout
        android:orientation="vertical"
        android:layout_marginTop="20dp"
        android:background="#FFF"
        android:elevation="5dp"
        android:translationY="@dimen/cardview_compat_inset_shadow"
        android:translationX="@dimen/cardview_compat_inset_shadow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageButton
            android:id="@+id/profileImage"
            android:layout_gravity="center"
            android:background="@drawable/user"
            android:layout_marginTop="10dp"
            android:scaleType="fitXY"
            android:onClick="profileImageClicked"
            android:layout_width="250dp"
            android:layout_height="250dp" />
        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/colorPrimaryDark"></View>
        <EditText
            android:id="@+id/username"
            android:hint="Entrer votre pseudo"
            android:background="@drawable/editshape"
            android:padding="10dp"
            android:layout_margin="15dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/profileBtn"
            android:text="Valider"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="10dp"
            android:textColor="#FFF"
            android:background="@color/colorPrimary"
            android:onClick="addUserNameAndProfilePicture"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>
                                    
                                

2- الملف ProfileActivity.java


منبعد كنرجع للمجلد java فيه الملف لي زدت لي هو ProfileActivity.java فيه الكود لي كيسترجع le champ pseudo و ل ImageButton من الملف activity_profile.xml  منبعد كنديكلاري reference للقاعدة البيانات Users وFireBaseAuth لي غادي تمكن من استرجاع ال id ديال المستخدم لي مكونيكطي و StorageReference لي غادي تمكني من تحميل الصور للمجلد profile_images لي غادي نزيدهم فيه ولي يمكنلك تدخلو من Storage كيف مبين فالصورة :


منبعد كاين ل fonction profileImageClicked لي كتنفد ملي كيكليكي المستخدم على ل ImageButton ولي كتمكنو من اختيار صورة منبعد كاين onActivityResult لي كتسترجع chemin ديال الصورة وكنخدم بواحد الbibliothèque لي كتمكني باش ندير Crop للصورة ولي غادي نزيدوها من بعد فالملف build.gradle فمنبعد مكنديرلها ل crop كنزيدها لل ImageButton  من بعد كاين addUserNameAndProfilePicture لي كتمكن من استرجاع الصورة ول pseudo لي دخل المستخدم الصورة كتزيدها فالمجلد profile_images وال pseudo والرابط ديال الصورة كتزيدوهم  فالجدول Users للمستخدم لي مكونيكطي ولي كنسترجعوه بل id ديالو ثم كاين setUserProfileImg لي كتسترجع المستخدم بل id ديالو وكتحقق يلا داير صورة للبروفيل و كتعرضها فل ImageButton مكانش كتعرض صورة par default الكود ديال الملف هو:

                                    
                                        package com.example.belasri.instaapp;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.Toast;

import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;
import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.StorageReference;
import com.google.firebase.storage.UploadTask;
import com.squareup.picasso.Picasso;
import com.theartofdev.edmodo.cropper.CropImage;
import com.theartofdev.edmodo.cropper.CropImageView;

import static com.example.belasri.instaapp.R.id.username;

public class ProfileActivity extends AppCompatActivity {
    private EditText usernameText;
    private ImageButton profileButton;
    private  static final int RESULT_IMAGE = 1;
    private DatabaseReference database;
    private FirebaseAuth auth;
    private StorageReference storageReference;
    Uri resultUri;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_profile);
        usernameText = (EditText) findViewById(username);
        profileButton = (ImageButton) findViewById(R.id.profileImage);
        database = FirebaseDatabase.getInstance().getReference().child("Users");
        auth = FirebaseAuth.getInstance();
        storageReference = FirebaseStorage.getInstance().getReference().child("profile_images");
        setUserProfileImg(auth.getCurrentUser().getUid());
    }

    public void profileImageClicked(View view) {
        Intent gallery = new Intent(Intent.ACTION_GET_CONTENT);
        gallery.setType("image/*");
        startActivityForResult(gallery,RESULT_IMAGE);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if(requestCode == RESULT_IMAGE && resultCode == RESULT_OK){
            Uri imagePath = data.getData();
            //make the user crop the image
            CropImage.activity(imagePath).setGuidelines(CropImageView.Guidelines.ON)
                    .setAspectRatio(1,1)
                    .start(this);
        }
        //if image has successufully croped
        if(requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE){
            //get result
            CropImage.ActivityResult result = CropImage.getActivityResult(data);
            if(resultCode == RESULT_OK){
                resultUri = result.getUri();
                profileButton.setImageURI(resultUri);
            }else if(resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE){
                Exception error = result.getError();
            }
        }
    }

    public void addUserNameAndProfilePicture(View view) {
        final String username = usernameText.getText().toString();
        final String user_id = auth.getCurrentUser().getUid();
        StorageReference filePath = storageReference.child(resultUri.getLastPathSegment());
        if(!TextUtils.isEmpty(username) && filePath.toString() != null){
            Log.d("pathImage",resultUri.toString());
            //store image
            filePath.putFile(resultUri).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                @Override
                public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                    String imageUrl = taskSnapshot.getDownloadUrl().toString();
                    database.child(user_id).child("pseudo").setValue(username);
                    database.child(user_id).child("image").setValue(imageUrl);
                    Toast.makeText(ProfileActivity.this, "Profile modifié", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
    public void setUserProfileImg(String userId){
        database.child(userId).addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                String image = (String) dataSnapshot.child("image").getValue();
                if(image != null) {
                    Picasso.with(ProfileActivity.this).load(image).into(profileButton);
                }else {
                    profileButton.setImageResource(R.drawable.user);
                }
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });
    }
}

                                    
                                

3- الملف activity_post.xml


غادي  تمشي للمجلد java فيه غادي تدير كليك بليمن ديال la souris غادي تختار New Activity منبعد Empty Activity  منبعد سميه PostActivity ملي تزاد غادي تمشي للمجلد res/layout فيه كاين ملف سميتو activity_post.xml هادا هو الملف لي فيه كاين form فيها ImageButton ملي كيكليكي عليها المستخدم كتنفد ل fonction uploadImage  كتمكنو من اختيار صورة من ل gallery ديال التلفون ديالو ثم كاين الحقول titre و description لي كيمكنو من إدخال المعلومات الخاصة بال publication ديالو  ثم bouton  منبعد مكيكليكي عليه كتنفد ل fonction submitData لي غادي تكون فالملف PostActivity.java الكود ديال الملف activity_profile.xml هو :


                                      
                                        <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.belasri.instaapp.PostActivity">
    <LinearLayout
        android:background="#FFF"
        android:elevation="5dp"
        android:translationY="@dimen/cardview_compat_inset_shadow"
        android:translationX="@dimen/cardview_compat_inset_shadow"
        android:orientation="vertical"
        android:layout_marginBottom="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:text="Publier"
            android:textSize="25sp"
            android:padding="10dp"
            android:background="@color/colorPrimaryDark"
            android:layout_marginBottom="30dp"
            android:textAlignment="center"
            android:textStyle="bold"
            android:textColor="#FFF"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    <ImageButton
        android:id="@+id/imageButton"
        android:layout_margin="10dp"
        android:onClick="uploadImage"
        android:background="@drawable/plus"
        android:backgroundTint="@color/colorPrimary"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="250dp" />
    <EditText
        android:id="@+id/title"
        android:hint="Entrer le titre"
        android:padding="10dp"
        android:layout_margin="10dp"
        android:background="@drawable/editshape"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/description"
        android:hint="Entrer la déscription"
        android:padding="10dp"
        android:inputType="textMultiLine"
        android:layout_margin="10dp"
        android:layout_gravity="top"
        android:layout_width="match_parent"
        android:background="@drawable/editshape"
        android:layout_height="150dp" />
    <Button
        android:id="@+id/addButton"
        android:text="Valider"
        android:onClick="submitData"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:textColor="#FFF"
        android:background="@color/colorPrimary"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    </LinearLayout>
</ScrollView>

                                      
                                    

4- PostActivity.java


منبعد كنرجع للمجلد java فيه الملف لي زدت لي هو PostActivity.java فيه الكود لي كيسترجع les champs ول ImageButton من الملف activity_post.xml  منبعد كاين نفس الكود لي شرحت فالبروفيل كنزيد جدول جديد سميتو InstaAppBase ومجلد ديال الصور ثم كاين ل fonction uploadImage   كتمكن المستخدم من اختيار صورة وال onActivityResult كتسترجع chemin ديال الصورة كنزيدها لل ImageButton و submitData لي كتزيد الصورة والمعلومات الخاصة بها وال id ديال المستخدم لي زادها فالجدول InstaAppBase  الكود ديال الملف هو :

                                        
                                            package com.example.belasri.instaapp;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.Toast;

import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.UserInfo;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.StorageReference;
import com.google.firebase.storage.UploadTask;

public class PostActivity extends AppCompatActivity {
    private int UPLOAD_IMAGE = 1;
    ImageButton imageButton;
    private EditText titleText,descText;
    private StorageReference storageReference;
    private FirebaseDatabase database;
    private DatabaseReference databaseReference;
    private FirebaseAuth auth;
    Uri url;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_post);
        titleText = (EditText) findViewById(R.id.title);
        descText = (EditText) findViewById(R.id.description);
        storageReference = FirebaseStorage.getInstance().getReference();
        databaseReference = database.getInstance().getReference().child("InstaAppBase");
        auth = FirebaseAuth.getInstance();
    }
    public void uploadImage(View view) {
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.setType("image/*");
        startActivityForResult(intent,UPLOAD_IMAGE);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if(requestCode == UPLOAD_IMAGE && resultCode == RESULT_OK && null != data){
            url = data.getData();
            imageButton = (ImageButton) findViewById(R.id.imageButton);
            imageButton.setImageURI(url);
        }
    }
    public void submitData(View view) {
        final String title = titleText.getText().toString().trim();
        final String desc = descText.getText().toString().trim();
        if(!TextUtils.isEmpty(title) && !TextUtils.isEmpty(desc) && imageButton.getDrawable() != null) {
            StorageReference filePath = storageReference.child("images").child(url.getLastPathSegment());
            filePath.putFile(url).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                @Override
                public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                    Uri downloadUrl = taskSnapshot.getDownloadUrl();
                    UserInfo userInfo = auth.getCurrentUser();
                    Log.d("userInfo", userInfo.toString());
                    DatabaseReference newPost = databaseReference.push();
                    newPost.child("title").setValue(title);
                    newPost.child("description").setValue(desc);
                    newPost.child("imageUrl").setValue(downloadUrl.toString());
                    newPost.child("user_id").setValue(userInfo.getUid());
                    Toast.makeText(PostActivity.this, "Image Ajoutée", Toast.LENGTH_SHORT).show();
                    Intent home = new Intent(PostActivity.this, MainActivity.class);
                    home.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                    startActivity(home);
                }
            });
        }else{
            Toast.makeText(this, "Veuillez remplir tous les champs", Toast.LENGTH_SHORT).show();
        }
    }
}

                                        
                                    

كلمات مفاتيح :