تطبيق Restaurant ب أندرويد التطبيق الخاص بل client الجزء الأول

imadbelasri Android
AN

فهاد الجزء الجديد من تطبيق Restaurant بأندرويد غادي نشوفو التطبيق الخاص بل client ولي غادي يمكنوا باش يطلع على ال menu ديال المطعم ومنبعد يدير des commandes هاد les commandes من بعد غادي يتعرضوا فالتطبيق الخاص بالمطعم ولي شفناه فالأجزاء السابقة.


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


1- الملف list_item.xml

فأول حاجة غادي نديرو غادي نزيدو project جديد ف android studio ختار Basic Activity سميه RestoClientApp من بعد ميتزاد غادي تمشي للمجلد 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>
                                                    
                                                

2- الملف activity_main.xml

دائما فالمجلد res/layout فيه كاين الملف activity_main.xml كنزيد فيه  RecyclerView ولي غادي يكونوا فيها les plats لي فل menu ولي زاد المطعم فقاعدة البيانات الكود ديال الملف هو:


                                                        
                                                            <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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.restoclientapp.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.constraint.ConstraintLayout>
                                                        
                                                    

3- الملف Item.java

فالمجلد com.example زيد dossier جديد سميه model فيه زيد ملف جديد عبارة عن java class  سميه Item.java فيه غادي نخزنو المعلومات الخاصة بكل plat فعندنا المعلومات على شكل des variables و كاين ل constructeur ولgetters وsetters الكود ديال الملف هو:

                                                        
                                                            package com.example.belasri.restoclientapp.model;

public class Item {
        private String title;
        private String description;
        private String imageUrl;

        public Item(String title, String description, String imageUrl) {
            this.title = title;
            this.description = description;
            this.imageUrl = imageUrl;
        }
        public Item(){

        }

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }

        public String getDescription() {
            return description;
        }

        public void setDescription(String description) {
            this.description = description;
        }

        public String getImageUrl() {
            return imageUrl;
        }

        public void setImageUrl(String imageUrl) {
            this.imageUrl = imageUrl;
        }
}
                                                        
                                                    

4- الملف MainActivity.java

فالمجلد java كاين الملف MainActivity.java  فيه الكود لي كيمكن باش ن référencer la base منين غادي نجبد المعلومات ولي هي Menu من بعد كنسترجع ال RecyclerView من الملف activity_main.xml ومنبعد عندي ل fonction showMenu  فيها  كنخدم ب FirebaseRecyclerAdapter لي كيمكنا باش نزيدو المعلومات لي استرجعنا فبلايصهم فكنعطيه ل class Item و ل list_item.xml ول MenuViewHolder لي غادي تمكني باش نmodifier المعلومات لي فال ImageView و TextView منبعد مكنسترجعهم وكنعطيه ايضا référence لقاعدة البيانات وكنزيد لRecyclerView   ل onclick لي كتمكني باش ملي نضغط على شي plat كنصيفط ل id ديالو ل MenuDetailsActivity لي غادي تمكنا من مشاهدة تفاصيل ل plat ولي غادي نزيدوها منبعد الكود ديال الملف هو: 


                                                        
                                                            package com.example.belasri.restoclientapp;

import android.content.Context;
import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.belasri.restoclientapp.model.Item;
import com.firebase.ui.database.FirebaseRecyclerAdapter;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {
    private DatabaseReference menuDb;
    private TextView title;
    private RecyclerView recyclerview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerview = (RecyclerView) findViewById(R.id.menu);
        menuDb = FirebaseDatabase.getInstance().getReference().child("Menu");
        LinearLayoutManager linearManager = new LinearLayoutManager(this);
        linearManager.setOrientation(linearManager.VERTICAL);
        recyclerview.setLayoutManager(new GridLayoutManager(this,2));
        recyclerview.setItemAnimator(new DefaultItemAnimator());
        showMenu();
    }
    private void showMenu(){
        FirebaseRecyclerAdapter<Item, MenuViewHolder> firebaseRecyclerAdapter = new FirebaseRecyclerAdapter<Item, MenuViewHolder>(
                Item.class,
                R.layout.list_item,
                MenuViewHolder.class,
                menuDb
        ) {
            @Override
            protected void populateViewHolder(MenuViewHolder viewHolder, Item model, int position) {
                //get selected post id
                final String menu_id = getRef(position).getKey().toString();
                viewHolder.setTitle(model.getTitle());
                viewHolder.setImage(model.getImageUrl(),getApplicationContext());
                viewHolder.view.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Intent singleItem = new Intent(MainActivity.this,MenuDetailsActivity.class);
                        singleItem.putExtra("menu_id",menu_id);
                        startActivity(singleItem);
                    }
                });
            }
        };
        recyclerview.setAdapter(firebaseRecyclerAdapter);
    }
    public static class MenuViewHolder extends RecyclerView.ViewHolder{
        View view;
        public MenuViewHolder(View itemView) {
            super(itemView);
            view = itemView;
        }
        public void setTitle(String title){
            TextView mTitle = (TextView) view.findViewById(R.id.title);
            mTitle.setText(title);
        }
        public void setImage(String image,Context ctx){
            ImageView imageView = (ImageView) view.findViewById(R.id.image);
            Picasso.with(ctx).load(image).into(imageView);
        }
    }
}
                                                        
                                                    

5- activity_menu_details.xml

غادي تمشي للمجلد java  فيه غادي تزيد Activity جديدة سميها MenuDetailsActivity منبعد مكتزاد سير ل res/layout فيها غادي تلقى الملف activity_menu_details.xml فهاد ل Activity هي لي غادي تمكن ل client من مشاهدة تفاصيل plat اختارو ولي المعلومات ديالو غادي يكونوا ف TextViews  وغادي تكون فيها ايضا bouton لي كتمكنوا باش ي commander  هاد ل plat الكود ديال الملف هو:

                                                        
                                                            <?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.restoclientapp.MenuDetailsActivity">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:elevation="3dp"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/menuDetailsImage"
                android:scaleType="fitXY"
                android:layout_width="match_parent"
                android:layout_height="250dp" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:padding="5dp"
            android:layout_width="match_parent"
            android:elevation="5dp"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/menuTitle"
                android:text="Pizza fruits de mer"
                android:padding="5dp"
                android:textSize="20dp"
                android:textColor="@color/colorAccent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:padding="5dp"
            android:elevation="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/menuDesc"
                android:layout_marginTop="10dp"
                android:padding="5dp"
                android:textColor="#000000"
                android:maxLines="10"
                android:textSize="20dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/price"
                android:layout_marginTop="10dp"
                android:text="150 dh"
                android:padding="5dp"
                android:textColor="#000000"
                android:maxLines="10"
                android:textSize="20dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <Button
            android:id="@+id/cmdBtn"
            android:layout_marginTop="62dp"
            android:text="Commander"
            android:textColor="#fff"
            android:textSize="20sp"
            android:layout_marginBottom="10dp"
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</ScrollView>
                                                        
                                                    

دروس ذات صلة

AN

كيفاش نصاوب آلة حاسبة ب Android

فهاد الدرس من سلسلة Android غادي نشوفو كيفاش نقادو واحد الآلة حاسبة بسيطة غادي تمكنا من القيام بع...


AN

كيفاش نصاوب Notes App

فهاد الدرس من سلسلة الأندرويد غادي نشوفو كيفاش نقادو واحد التطبيق كيمكن المستخدم من إمتلاك مذكرة يسج...


AN

كيفاش تصاوب Scanner Mood بالاندرويد

فهاد الدرس من سلسلة الاندرويد غادي نشوفو كيفاش نقادو واحد التطبيق كيمكن المستخدم من التعرف على الحا...


AN

كيفاش تصوب لعبة Brain Train بالاندرويد

فهاد الدرس من سلسلة الأندرويد غادي نشوفو كيفاش نصاوبو واحد اللعبة بسيطة سميتها Brain Train لعبة بسي...


AN

كيفاش نصاوب Contacts App بالأندرويد الجزء الاول

فهاد الدرس من سلسلة الاندرويد غادي نقادو واحد التطبيق كيمكن من تسجيل Contacts فقاعدة البيانات كما ك...


AN

كيفاش نصاوب Contacts App بالأندرويد الجزء الثاني

فهاد الجزء الثاني من هاد الدرس غادي نكملو الملفات الأخرى ولي غادي تمكن التطبيق ديالنا من الإشتغال ول...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الأول

فهاد الدرس من سلسلة الاندرويد غادي نشوفو كيفاش نستعملو ل volley library باش نديرو إتصال مع قاعدة بي...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الثاني

فهاد الجزء الثاني من هاد المشروع غادي نقادو الملفات لي غادي يمكننا من الإتصال بقاعدة البيانات والكود...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الثالت

فهاد الجزء الثالث من هاد المشروع غادي نزيدو واحد الدومين لي غادي يكون مجاني وغادي يعطينا واحد العنو...


AN

كيفاش تصاوب تطبيق Top 10 Downloads ب Android

فهاد الدرس غادي نصابو مشروع بسيط بandroid عبارة عن تطبيق كيعرض قائمة أفضل عشر تطبيقات مجانية فمتجر آ...