تطبيق 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" />
