تطبيق restaurant بأندرويد و firebase الجزء الأول
imadbelasri
Android
AN
فهاد الدرس الجديد من سلسلة أندرويد غادي
نشوفو كيفاش نقادو تطبيق restaurant بأندرويد و firebase فالتطبيق الأول غادي نشوفو التطبيق الخاص ب restaurant لي كيمكن المستخدم أو صاحب المطعم من إضافة menu من بعد يمكنلو يحدف عناصر أو يزيد أخرى للقائمة ديال المطعم منبعد غادي نشوفو التطبيق الخاص بل client ولي كيمكنوا باش يكوموندي des plats من ال menu ديال restaurant.
نظرة سريعة بالفيديو
1- الملف activity_add_to_menu.xml
فأول حاجة غادي نديرو غادي نزيدو project
جديد ف android studio ختار Basic Activity سميه RestaurantApp من بعد
ميتزاد غادي تمشي للمجلد java فيه غادي تزيد Activity جديدة سميها AddToMenu منبعد مكتزاد سير ل res/layout فيها غادي تلقى الملف activity_add_to_menu.xml فهاد ل Activity هي لي غادي تمكن صاحب المطعم من إضافة أطباق لل menu فهاد الملف غادي يكون عندنا ImageButton لي كتاخد ل image ديال ل plat منبعد عندي des EditTexts لي كيمكنو من إدخال عنوان وتفاصيل على ل plat والثمن ديالو وعندي ايضا bouton لي كتنفد ل fonction addToMenu ولي غادي تكون فالملف AddToMenu.java الكود ديال الملف هو:
<?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"
android:background="#fff"
android:padding="10dp"
tools:context="com.example.belasri.restaurantapp.AddToMenu">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/addTextView"
android:text="Ajouter"
android:textAlignment="center"
android:textColor="#e74c3c"
android:textSize="30sp"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<View
android:background="#e74c3c"
android:layout_width="match_parent"
android:layout_height="1dp"></View>
<LinearLayout
android:layout_marginTop="60dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="@+id/imgBtn"
android:backgroundTint="#FFF"
android:tooltipText="Choisir une image"
android:scaleType="fitXY"
android:onClick="uploadImage"
android:layout_gravity="center"
android:src="@drawable/ic_launcher_round"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></ImageButton>
<LinearLayout
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/title"
android:hint="Titre"
android:textAlignment="textStart"
android:layout_marginTop="10dp"
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/desc"
android:hint="Déscription"
android:layout_marginTop="10dp"
android:inputType="textMultiLine"
android:textAlignment="textStart"
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/price"
android:hint="Prix"
android:layout_marginTop="10dp"
android:inputType="number"
android:textAlignment="textStart"
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:id="@+id/addbtn"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:textSize="20dp"
android:text="Valider"
android:background="#e74c3c"
android:onClick="addToMenu"
android:textColor="#fff"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>
2- AddToMenu.java
غادي تمشي للمجلد java فيه غادي تلقى الملف AddToMenu.java فيه غادي يكون الكود لي كيمكن من إضافة ل menu لقاعدة البيانات فهنا خدمنا ب firebase فيلا معرفتيش كيفاش تكونيكطي ل app ديالك مع firebase شوف الدروس السابقة فهنا كنسترجع les Edit Texts ول ImageButton وBouton لي زدت منبعد كنزيد la base ف firebase وكنسميها Menu منبعد عندي ل fonction uploadImage لي ملي كيكليكي المستخدم على ل ImageButton كتمكن المستخدم من اختيار صورة وال onActivityResult كتسترجع chemin ديال الصورة كنزيدها لل ImageButton وكاين addToMenu لي كتزيد الصورة ف dossier images والمعلومات الخاصة بل plat ف la base Menu لي كنسترجعهم من ل EditTexts الكود ديال الملف هو :
package com.example.belasri.restaurantapp;
import android.content.ContentResolver;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.provider.MediaStore;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.AppCompatEditText;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.webkit.MimeTypeMap;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.Spinner;
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;
import com.theartofdev.edmodo.cropper.CropImage;
import com.theartofdev.edmodo.cropper.CropImageView;
import java.io.IOException;
public class AddToMenu extends AppCompatActivity {
private EditText mTitleEdit,mDescTitle,mPriceEdit;
private ImageButton imageButton;
private StorageReference storageReference;
private FirebaseDatabase database;
private DatabaseReference databaseReference;
private static final int RESULT_IMAGE = 1;
Uri resultUri;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_add_to_menu);
imageButton = (ImageButton) findViewById(R.id.imgBtn);
mTitleEdit = (EditText) findViewById(R.id.title);
mDescTitle = (EditText) findViewById(R.id.desc);
mPriceEdit = (EditText) findViewById(R.id.price);
storageReference = FirebaseStorage.getInstance().getReference();
databaseReference = database.getInstance().getReference().child("Menu");
}
public void uploadImage(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();
imageButton.setImageURI(resultUri);
imageButton.setTag(resultUri);
}else if(resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE){
Exception error = result.getError();
}
}
}
public void addToMenu(View view) {
final String title = mTitleEdit.getText().toString().trim();
final String desc = mDescTitle.getText().toString().trim();
final String price = mPriceEdit.getText().toString().trim();
if(!TextUtils.isEmpty(title) && !TextUtils.isEmpty(desc) && !TextUtils.isEmpty(price)) {
StorageReference filePath = storageReference.child("images").child(resultUri.getLastPathSegment());
filePath.putFile(resultUri).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
@Override
public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
@SuppressWarnings("VisibleForTests") Uri downloadUrl = taskSnapshot.getDownloadUrl();
DatabaseReference newPost = databaseReference.push();
newPost.child("title").setValue(title);
newPost.child("description").setValue(desc);
newPost.child("price").setValue(price);
newPost.child("imageUrl").setValue(downloadUrl.toString());
Toast.makeText(AddToMenu.this, "Ajouté avec succés", Toast.LENGTH_SHORT).show();
Intent home = new Intent(AddToMenu.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();
}
}
}
3- الملف list_item
فالمجلد res/layout فيه كنزيد ملف
كنسميه list_item.xml فيه ImageView ولي غادي تاخد الصورة و TextView لي
غادي يكون فيها titre وغادي تزاد فل RecyclerView لي غادي نزيدوها منبعد فل MainActivity ولي غادي تمكنا من عرض ال menu ديالنا الكود ديال الملف هو :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardBackgroundColor="@android:color/white"
app:cardCornerRadius="5dp"
app:cardElevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:background="#e74c3c"
android:layout_height="60dp">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:selectableItemBackground"
android:padding="15dp"
tools:text="This is the title"
android:fontFamily="sans-serif"
android:maxLines="1"
android:textAlignment="center"
android:textColor="#fff"
android:textStyle="bold"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
4- الملف activity_main.xml
دائما فالمجلد res/layout فيه كاين الملف activity_main.xml كنزيد فيه RecyclerView ولي غادي يكونوا فيها les plats لي فل menu ولي زاد المستخدم وايضا عندي ل BottomNavigation لي كيمكني باش نزيد ل menu للتطبيق ديالي ولي كتزاد تحت ل MainActivity الكود ديال الملف هو:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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.restaurantapp.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/menu"
android:padding="10dp"
android:layout_marginBottom="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottomNav"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/bottom_menu"
android:elevation="5dp"
android:layout_gravity="bottom"
>
</android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>