شرح طريقة استخدام مكتبة Retrofit HTTP Library في الاندرويد

السلام عليكم ..بعدما شرحنا في الدرس السابق شرح استخدام مكتبة Volley سنشرح في هذا الدرس شرح طريقة استخدام مكتبة Retrofit HTTP Library في الاندرويد وسنشرح ماهي مكتبة Retrofit HTTP Library؟ بالاضافةإلى مثال بسيط على كيفية استخدام Retrofit HTTP Library وتقوم بنفس هذه المكتبة بنفس وضائف مكتبة Volley ولكن مع بعض الاختلافات.كثيرا مانقوم بإنشاء تطبيقات اندرويد تقوم بالاتصال بالإنترنت حيث إن أغلب التطبيقات التي نستخدمها في يومنا هذا تعتمد أعتمادا كاملا على الاتصال بالإنترنت لذلك سنقوم بشرح كيفية استخدام مكتبة Retrofit HTTP Library في الاندرويد .

كثيرا ماتواجهه المبرمجين بعض الصعوبات في كتابة الكود الخاص بالاتصال بالإنترنت وجلب البيانات منه .. لكن سنتعلم في درس اليوم كيفية تسهيل عملية الاتصال بالانترنت وذلك فب خطوات بسيطة وسهلة باستخدام مكتبة Retrofit HTTP Library.

وسنتعلم في هذا الدرس مايلي:
1-ماهي مكتبة Retrofit HTTP Library ومميزاتها؟
2-مثال بسيط على استخدام المكتبة.

1-ماهي مكتبة Retrofit HTTP Library؟

Retrofit HTTP Library هي عبارة مكتبة اندرويد تم كتابتها وتطويرها بواسطة square الغرض منها تسهيل عملية اتصال أي تطبيق الاندرويد بالانترنت وقراء كل البيانات بسهولة من السيرفر.

,اكثر مايميز هذه المكتبة:

1-سهولة وبساطة في التعامل معها.

2-تمنحك اتصال اسرع وقراء البيانات من كل سهولة.

3-لست بحاجة لعمل Json Parsing وهي ميزة جميلة فقط قم بإنشاء model class والمكتبة تتكفل بباقي المهمة وستلاحظ ذلك بالمثال .

2-مثال على استخدام مكتبة Android HTTP Retrofit.

سنقوم بإنشاء تطبيق اندرويد يقوم بقراء بيانات طلاب من Json feed وعرضها في ListView سيحتوي تطبيقنا على شاشتين ,الشاشة الاولى تقوم بعرض إسماء الطلاب في ListView وعند الضغط على أي أسم من إسماء الطلاب يتم عرض كل بيانات الطالب في الشاشة الثانية وسوف يتم جلب وقراءة البيانات باستخدام مكتبة ريتروفت Android HTTP Retrofit.
وسيكون الـ output من هذا المثال كما في الصورة ادناه :-

أولا سنحتاج لمصدر تلك البيانات وسنحصل على تلك البيانات من هذا الرابط : http://muteetechbot.esy.es/api/Students.json

حيث يحتوي الرابط اعلاه على مصفوفة JsonArray تحتوي على بيانات الطلاب كـ الرقم والاسم والعمر والصف كمافي الكود ادناه:

[
 {
 "student_Id":"1",
 "student_name":"Ahmed",
 "class":"4",
 "age":9
 },
   
 {
 "student_Id":"2",
 "student_name":"Saleh",
 "class":"9",
 "age":14
 },
 
 {
 "student_d":"3",
 "student_name":"Ali",
 "class":"7",
 "age":12
 },
 
 {
 "student_d":"4",
 "student_name":"essa",
 "class":"7",
 "age":11
 }
 
]

ونبدا الان المثال بالخطوات التالية:-

1.2-نفتح اندرويد استديو ونقوم بانشاء مشروع جديد نسميه RetrofitExample .
ونقوم بإنشاء Activity شاشة جديدة نسميها StudentDetails .. بحيث يحتوي مشروعنا الان على شاشتين واحدة لعرض إسماء الطلاب والاخرى لعرض بيانات الطالب.
قد يهمك :شرح ماهي الـ Activity ؟وماهي دورة حياة الـactivity؟ بالتفصيل
قد يهمك ايضا :إنشاءوتشغيل أول تطبيق اندرويد في اندرويد ستديو Android Studio

2.2-نقوم باضافة مكتبة Retrofit إلى مشروع وذلك باضافة الـ dependency الخاص بها في ملف build.gradle كما في الكود ادناه:

 compile 'com.squareup.retrofit2:retrofit:2.1.0'

 compile 'com.squareup.retrofit2:converter-gson:2.0.2'

3-نقوم بالذهاب إلى ملف Manifest.xmlونضيف صلاحية الوصول إلى الانترنت وذلك لإننا نستخدم تطبيق يتصل بالانترنت فلابد من اضافة هذه الصلاحية كمافي الكود ادناه:

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

قد يهمك ايضا شرح ماهو ملف AndroidManifest.xml في مشروع الاندرويد؟بالتفصيل

4.2-نقوم الان بتصميم واجهات التطبيق وذلك عبر الخطوات الاتية:

1.4.2- نقوم بالذهاب إلى مجلد res<layout ومن ثم نفتح ملف activity_mai.xml ونقوم باضافة ListView لعرض اسماء الطلاب كمافي الكود ادناه:

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"

    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listViewStudents"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>

</RelativeLayout>

2.4.2- نقوم بالذهاب إلى مجلد res<layout ومن ثم نفتح ملف activity_student_details.xml ونقوم باضافة 4 TextView نستخدمها لعرض بيانات كا طالب كمافي الكود ادناه:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"

    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".StudentDetails">

    <TextView
        android:id="@+id/textViewStudentId"
        android:textSize="24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=" ID : "/>

    <TextView
        android:id="@+id/textViewStudentName"
        android:textSize="24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Name : "/>

    <TextView
        android:id="@+id/textViewStudentClass"
        android:textSize="24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Leve : "/>

    <TextView
        android:id="@+id/textViewStudentAge"
        android:textSize="24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Age : "/>

</LinearLayout>

5.2- نقوم بإنشاء model class للبيانات التي نريد استرجاعها وهي معلومات الطلاب . الجميل في مكتبة Android HTTP Retrofit إنك ليست بحاجة إلى عملية JsonParsing فقط قم بإنشاء model class والمكتبة تقوم بعملية استخراج البيانات بالنيابة عنك.

package com.blogspot.muteealjabri.shorttest;

import com.google.gson.annotations.SerializedName;

/**
 * Created by mutee on 08/03/2016.
 */
public class Student {
    @SerializedName("student_Id")
    private String student_Id;
    @SerializedName("student_name")
    private String student_name;
    @SerializedName("class_id")
    private String level;
    @SerializedName("age")
    private String age;

    //Getters and setters
    public String getStudentId() {
        return student_Id;
    }

    public void setStudentId(String  student_Id) {
        this.student_Id = student_Id;
    }

    public String getStudentName() {
        return student_name;
    }

    public void setStudentName(String name){
        this.student_name = name;
    }

    public String getLevel() {
        return level;
    }

    public void setLevel(String level) {
        this.level = level;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }
}

ملاحظات:
1-عند إنشاء model class فقط نقوم بتعريف المتغيرات التي نريد الحصول عليها من Json feed .
في مثالنا الـ Json feed يحتوي على رقم الطالب واسمه ومستواه والعمر .. فلذلك قمنا بإنشاء model class يحتوي فقط على تلك البيانات.
2- يجب عليك تعريف Setters and Getters لتلك المتغيرات(مهم جدا).

6.2-نقوم بإنشاء Java Interface لارسال طلب HTTP Request باستخدام Retrofit.
نقوم بإنشاء Java Interface تقوم بارسال طلب request الحصول على البيانات من Json feed ونسميها StudentAPI كمافي الكود ادناه:

package com.blogspot.muteealjabri.retrofitexample;


import java.util.List;

import retrofit.Callback;
import retrofit.http.GET;

/**
 * Created by Mutee on 2/8/2016.
 */
public interface StudentAPI {

    /*Retrofit get annotation with our URL
       And our method that will return us the list of students info
    */
    @GET("api/Student.json")
    public void getStudents(Callback<List<Student>> response);
}

نلاحظ من الكود اعلاه مايلي:
-تم إرسال طلب باستخدام الميثود Get وتم اسناد المسار api/Student.json وذلك لان في مكتبة retrofit لايمكنك وضع الرابط كله وتم استثناء الـ root من الرابط وهو http://muteetechbot.esy.es.. وسيتم التعامل مع الرابط كاملا في MainActivity .

- تم تعريف دالة اسمها getStudents وتمرير لها callBack method وتحتوي على قائمة List من البيانات التي نريد الحصول عليها وهي بيانات الطلاب.

7.2-نقوم بالذهاب إلى MainActivity وسيتم في هذه الشاشة عرض البيانات في ListView كما في الكود ادناه :-

package com.blogspot.muteealjabri.shorttest;

import android.app.ProgressDialog;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import java.util.List;

import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;


public class MainActivity extends AppCompatActivity implements OnItemClickListener {

    public static final String KEY_STUDENT_ID = "id";
    public static final String  KEY_STUDENT_NAME = "name";
    public static final String  KEY_STUDENT_LEVEL = "level";
    public static final String  KEY_STUDENT_AGE = "age";
    private List<Student> studentsList;
    ListView list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        list=(ListView)findViewById(R.id.listViewStudents);
        list.setOnItemClickListener(this);
        getStudents();

    }

    //This method will execute on listitem click
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        //Creating an intent
        Intent intent = new Intent(this, StudentDetails.class);

        //Getting the requested student from the list
        Student student = studentsList.get(position);

        //Adding studrnt details to intent
        intent.putExtra(KEY_STUDENT_ID,student.getStudentId());
        intent.putExtra(KEY_STUDENT_NAME,student.getStudentName());
        intent.putExtra(KEY_STUDENT_LEVEL,student.getLevel());
        intent.putExtra(KEY_STUDENT_AGE,student.getAge());

        //Starting another activity to show student details
        startActivity(intent);
    }

    private void getStudents(){
        //While the app fetched data we are displaying a progress dialog
        final ProgressDialog loading = ProgressDialog.show(this,"Fetching Data","Please wait...",false,false);



        Retrofit adapter = new Retrofit.Builder()
                .baseUrl("http://muteetechbot.esy.es/")
                .addConverterFactory(GsonConverterFactory.create())
                .build();

        //Creating an object of our api interface
        StudentsAPI api = adapter.create(StudentsAPI.class);

        //Defining the method
        Call<List<Student>> call = api.getStudents();
        call.enqueue(new Callback<List<Student>>() {
            @Override
            public void onResponse(Call<List<Student>> stlist, Response<List<Student>> response) {
                //Dismissing the loading progressbar
                loading.dismiss();

                //Storing the data in our list
                studentsList = response.body();

                //Calling a method to show the list
                showList();
            }

            @Override
            public void onFailure(Call<List<Student>> call, Throwable t) {
                loading.dismiss();
                Toast.makeText(getApplicationContext(), "erro", Toast.LENGTH_LONG).show();
            }


        });
    }
private void showList() {
//String array to store all the Students names
    String[] items = new String[studentsList.size()];

    //Traversing through the whole list to get all the names
    for(int i=0; i<studentsList.size(); i++){
        //Storing names to string array
        items[i] = studentsList.get(i).getStudentName();
    }

    //Creating an array adapter for list view
    ArrayAdapter adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,items);

    //Setting adapter to listview
    list.setAdapter(adapter);
    }

}

سنقوم الان بشرح الكلاس والداول الموجودة فيه:-
يحتوي الكلاس على داولتين methods مهمة وهي كمايلي:-
-getStudent : وفي هذه الدالة سيتم جلب بيانات الطلاب من الانترنت وسنحصل من هذه الدالة على <List<Student وسيتم شرحها بالتفصيل لاحقا.
-showlist : في هذه الدالة سيتم تهيئة البيانات وعرضها في الـ listView.

والان نأتي إلى شرح الكلاس بالكامل:-
الاسطر 25-28:-
اربعة متغيرات نصية سوف نستخدمها كـمفتايح Keys عندما نريد إرسال بيانات كل طالب إلى StudentDetails وهي الشاشة التي ستقوم بعرض بيانات كل طالب وسيتم إرسال البيانات الطلاب بوسطة الـ Intent.
قد يهمك :- شرح كيفية نقل البيانات بواسطة الـ intent في الاندرويد
السطر29:-
وهي عبارة عن List من الكلاس Student سوف نستخدمها لتخزين بيانات الطلاب فيها.

السطر30:-

اوبجكت من نوع ListView سوف نستخدمها لعرض أسماء الطلاب.

الاسطر33-40:-

دالة onCreate نستخدمها لتهئية الـ ListView واستدعاء الدالة getStudents لعرض إسماء الطلاب.

الاسطر44-59:-

دالة onItemClick ويتم استدعاء هذا الدالة method عند الضغط على item في القائمة ListView ويتم إرسال بيانات كل طالب إلى StudentDetails بإستخدام الـ Intent.

قديهمك:- -شرح كيفية نقل البيانات بواسطة الـ intent في الاندرويد

قد يهمك ايضا :- شرح مفهوم الـ Intent في الاندرويد بالتفصيل

وناتي إلى شرح أهم دالة في الكلاس وهي getStudents والتي تبدأ من السطر 61 -98:-
ونأتي إلى شرح عمل الدالة بالتفصيل:-
السطر63:-
عرض progress Dialoge عندما يبدا البرنامج بجلب البيانات من json feed .
الاسطر 67-70 :-
إنشاء كائن من الكلاس Retrofit وتحديد له الرابط الاساسي (root url )للبيانات وذلك من خلال الدالة baseUrl وتمرير الرابط له muteeteachbot والغرض من إنشاء الكائن هو سنستخدمه لإرسال طلب Request وذلك بتحديد الرابط الاساسي .

السطر 73:-

أنشاء object كائن من الانترفيس التي قمنا بانشائها في الخطوة 4 والتي تقوم بارسال طلب HTTP Request باستخدام retrofit ويتم إنشاء الكائن object من خلال الدالة create ومن ثم تمرير لها الكلاس Student.class

السطر 76:-

استدعاء الدالة getStudents الموجودة وتمري بارميترمن موع <List<Student>>CallBack والذي يحتوي على بيانات الطللاب.

الاسطر 77-97:-

بعد تهيئة الطلب الذ ي سنرسله نقوم بوضع في الـ Queue وذلك عبر دالة enqueue ووظيفة هذا الدالة إرسال الطلب. وتستقبل هذه الدالة بارميتر من نوع <CallBack<T وهي عبارة عن Interface وتحتوي على دالتين :-

 onResponse(Call<T> call, Response<T> response)

ويتم استدعاء هذه الدالة عندما يتم استلام الاستجابة بنجاح من السيرفر أي اننا سنمت الكود الذي نريده وسنتعامل مع البيانات مثلا : عرضها في ListView ألخ...

onFailure(Call<T> call, Throwable t)

ويتم استدعاء هذه الدالة عندما لايتم استلام الاستجابة من السيرفر وهنا نخبر المستخدم إنه لم يتم استلام البيانات .
والان انتهينا من شرح دالة getStudents تبقى لنا شرح دالة showList ببساطة هذه الدالة تقوم بتهئية وعرض البيانات على ListView.

والان انتهينا من شرح أهم دالة في الكلاس .

الان سنتكمل شرح الدالة الأخيرة method في الكلاس وهي showlist :-
الاسطر 99-114:-

وقمنا في هذا الدالة بتحويل الـ List التي تحتوي على بيانات الطلاب إلى مصفوفة وعرض تلك المصفوفة على ListView.

الان انتهينا من الكلاس MainActivity .

8.2-نذهب إلى ملف الكلاس StudentDetails ونقوم باضافة كود استقبال الـ Intent الذي سيرسل من MainActivity كمافي الكود ادناه:

 //Initializing Views
        textViewStudentId = (TextView) findViewById(R.id.textViewStudentId);
        textViewStudentName = (TextView) findViewById(R.id.textViewStudentName);
        textViewStudentLevel = (TextView) findViewById(R.id.textViewStudentClass);
        textViewStudentAge = (TextView) findViewById(R.id.textViewStudentAge);

        //Getting intent
        Intent intent = getIntent();

        //Displaying values by fetching from intent
        textViewStudentId.setText(String.valueOf(intent.getIntExtra(Activity2.KEY_STUDENT_ID, 0)));
        textViewStudentName.setText(intent.getStringExtra(Activity2.KEY_STUDENT_NAME));
        textViewStudentLevel.setText(intent.getStringExtra(Activity2.KEY_STUDENT_LEVEL));
        textViewStudentAge.setText(String.valueOf(intent.getIntExtra(Activity2.KEY_STUDENT_AGE,0)));

حيث يتم اضافة الكود اعلاه في دالة onCreate ويتم استقبال الـ Intent من MainActivity بواسطة دالة Method
getIntent .
قد يهمك :- شرح كيفية نقل البيانات بواسطة الـ intent في الاندرويد

وهنا نكون وصلناإلى نهاية الدرس .. ارجو ان يكون الدرس مفيد .. ورأيكم يهمني بالتعليقات.