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


فهاد الجزء الأخير من تطبيق Instagram بأندرويد و Firebase غادي نكملو الملف الخاص بمشاهدة publication اختارها المستخدم من بعد مكليكا عليها منبعد  ما نصمموا الواجهة ديالو وغادي نزيدو les biblios لي غادي يمكنونا باش نخدموا ب FirebaseStorage وغيرها لي خدمنا بهم فالتطبيق كامل. 

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

1- الملف activity_view_post.xml

غادي  تمشي للمجلد java فيه غادي تدير كليك بليمن ديال la souris غادي تختار New Activity منبعد Empty Activity  منبعد سميه ViewPostActivity ملي تزاد غادي تمشي للمجلد res/layout فيه كاين ملف سميتو activity_view_post.xml هادا هو الملف لي فيه كاين  les ImageViews وles TextViews لي غادي تكون فيهم المعلومات الخاصة بكل publication والمستخدم لي زادها الكود ديال الملف activity_view_post.xml هو :

                                <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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_marginTop="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:elevation="5dp"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    tools:context="com.example.belasri.instaapp.ViewPostActivity">
    <LinearLayout
        android:orientation="vertical"
        android:translationY="@dimen/cardview_compat_inset_shadow"
        android:translationX="@dimen/cardview_compat_inset_shadow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/postImage"
            android:scaleType="fitXY"
            android:elevation="5dp"
            android:layout_width="match_parent"
            android:layout_height="300dp" />
        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/colorPrimaryDark"></View>
        <TextView
            android:id="@+id/title"
            android:text="text title"
            android:textSize="25sp"
            android:textColor="@color/colorPrimary"
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/description"
            android:text="text description"
            android:textSize="15sp"
            android:textColor="@color/colorPrimaryDark"
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/colorPrimaryDark"></View>
        <LinearLayout
            android:orientation="horizontal"
            android:padding="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/userImage"
                android:padding="10dp"
                android:src="@drawable/user"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:id="@+id/userPost"
                android:text="pseudo"
                android:textSize="15sp"
                android:textAlignment="center"
                android:textColor="#000"
                android:padding="10dp"
                android:layout_marginTop="10dp"
                android:layout_width="300dp"
                android:layout_gravity="center"
                android:layout_height="match_parent" />

        </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

                            

2- الملف PostActivity.java

منبعد كنرجع للمجلد java فيه الملف لي زدت لي هو ViewPostActivity.java فيه الكود لي كيسترجع ImageViews وTextViews كيف شرحنا فالملفات السابقة كندير référence لقاعدة البيانات وللجداول لي غادي نجبد منهم المعلومات Users وInstaAppBase  منبعد كنسترجع ل id ديال ل publication لي به كنجبد المعلومات الخاصين بها وبل user_id ديالها كنجبد المعلومات ديال المستخدم لي زادها وكنخدم ب Picasso لي هي ل bibliothèque  كتمكني باش نجبد الصورة بالرابط ديالها من Firebase وكنزيدها فل ImageView  الكود ديال الملف هو:


                                package com.example.belasri.instaapp;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.ImageView;
import android.widget.TextView;

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.squareup.picasso.Picasso;


public class ViewPostActivity extends AppCompatActivity {
    ImageView imageView,userImg;
    TextView postTitle,postDescription,usernameText;
    DatabaseReference reference,userRef;
    String post_id = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_post);
        imageView = (ImageView) findViewById(R.id.postImage);
        userImg = (ImageView) findViewById(R.id.userImage);
        postTitle = (TextView) findViewById(R.id.title);
        usernameText = (TextView) findViewById(R.id.userPost);
        postDescription = (TextView) findViewById(R.id.description);
        post_id = getIntent().getStringExtra("post_id");
        reference = FirebaseDatabase.getInstance().getReference().child("InstaAppBase");
        userRef = FirebaseDatabase.getInstance().getReference().child("Users");
        reference.child(post_id).addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                String post_title = (String) dataSnapshot.child("title").getValue();
                String post_description = (String) dataSnapshot.child("description").getValue();
                String post_image = (String) dataSnapshot.child("imageUrl").getValue();
                String user_post_id = (String) dataSnapshot.child("user_id").getValue();
                postTitle.setText(post_title);
                postDescription.setText(post_description);
                Picasso.with(ViewPostActivity.this).load(post_image).into(imageView);
                setUserName(user_post_id);
                Log.d("user_id",user_post_id);
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });
    }
    public void setUserName(String userId){
        userRef.child(userId).addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                String name = (String) dataSnapshot.child("name").getValue();
                String username = (String) dataSnapshot.child("pseudo").getValue();
                String image = (String) dataSnapshot.child("image").getValue();
                if(image != null) {
                    Picasso.with(ViewPostActivity.this).load(image).into(userImg);
                }else{
                    userImg.setImageResource(R.drawable.user);
                }
                if(username != null) {
                    usernameText.setText("Ajouté par : " + username);
                }else{
                    usernameText.setText("Ajouté par : " + name);
                }
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });
    }
}

                            

3- الملف menu_main.xml

فالمجلد menu كاين الملف menu_main.xml كنزيد فيه القائمة ديالي ولي كتدي المستخدم لإضافة publication و للبروفايل وكتمكن المستخدم باش يديكونيكطا ملي يكليكي على déconnexion الكود ديال الملف هو :

                                <menu 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"
    tools:context="com.example.belasri.instaapp.MainActivity">
    <item
        android:id="@+id/profile"
        android:orderInCategory="100"
        android:title="Modifier mon profile"
        app:showAsAction="never" />
    <item
        android:id="@+id/addIcon"
        android:title="Add"
        android:icon="@drawable/ic_add_circle_outline_white_24dp"
        app:showAsAction="always"
        />
    <item
        android:id="@+id/logout"
        android:orderInCategory="100"
        android:title="Déconnexion"
        app:showAsAction="never" />

</menu>
                            

4- الملف build.gradle

فالمجلد app كاين الملف build.gradle كنزيد فيه les bibliothèques لي غادي نحتاج ولي كيمكنوني باش نخدم ب RecyclerView ول CardView و Picasso وغيرهم الكود ديالو بعد التغيير:

                                    apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
    defaultConfig {
        applicationId "com.example.belasri.instaapp"
        minSdkVersion 17
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        // Enabling multidex support.
        multiDexEnabled true
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-v4'
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.android.support:design:26.+'
    compile 'com.google.firebase:firebase-database:11.2.0'
    compile 'com.google.firebase:firebase-storage:11.2.0'
    compile 'com.google.firebase:firebase-auth:11.2.0'
    compile 'com.android.support:recyclerview-v7:26.+'
    compile 'com.android.support:cardview-v7:26.+'
    compile 'com.google.gms:google-services:3.1.0'
    compile 'com.firebaseui:firebase-ui-database:2.2.0'
    compile 'com.android.support:multidex:1.0.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.theartofdev.edmodo:android-image-cropper:2.4.+'
    testCompile 'junit:junit:4.12'
}








apply plugin: 'com.google.gms.google-services'
                                

5- الملف AndroidManifest.xml

فآخر حاجة باش التطبيق يتمكن من استخدام الأنترنيت ويهز التصاور من الmémoire ديال الهاتف ديال المستخدم كنزيد ال permission فالملف AndroidManifest.xml لي كاين فالمجلد app/manifests :

                                       <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد