Tutorial Android Dengan Retrofit Http Library

Jumat, 26 Agustus 2016

Hai, pada artikel sebelumnya yang berjudul Android Grid RecyclerVew dan Menampilkan Gambar dengan Picasso, telah dijelaskan cara menciptakan aplikasi android yang menampilkan data dengan grid layout memakai RecyclerView. Pada artikel tersebut juga diterangkan cara untuk menampilkan data dengan memakai library Picasso. Dan kali ini, akan dijelaskan cara memakai Retrofit di dalam aplikasi untuk mengambil json dan menampilkan data ke aplikasi.

Retrofit yaitu library android yang dibentuk oleh Squre yang dipakai sebagai REST Client pada Android, yang niscaya akan memudahkan kita dalam programing. Karena kita tidak perlu lagi untuk menciptakan method-method sendiri untuk memakai REST Client API dari backend. Library ini menyediakan framework yang powerfull untuk authenticating dan berinteraksi dengan API dengan mengirimkan request memakai OkHTTP.

Menyiapkan API

Pada artikle ini kita akan memakai API dari sebuah website berjulukan The Movie DB, website penyedia warta perihal film dan juga menyediakan API secara gratis dengan syarat harus register terlebih dahulu.

Untuk mendapat API, masuk ke website tersebut, kemudian pilih Sign Up. Selanjutnya masuk ke akun, kemudian pilih hidangan API dan lakukan langkah sesuai dengan yang dibituhkan, kalau sudah maka akan tampil data ibarat ini

Membuat Project Baru

Pertama buat project gres dengan nama Retrofit HTTP Library. Pilih empty activity pada pilihan activity.

Membuat Request Pertama

Menginstal Library

Untuk memakai Retrofit, kiata harus menginstal terlebih dahulu library Retrofit dan library Gson. Library gson sendiri yaitu library yang dilincurkan oleh Google untuk memparsing data json.

Buka build:grandle dan masukkan instruksi berikut ini, sesudah itu pilih sync project

 dependencies {     compile fileTree(include: ['*.jar'], dir: 'libs')     testCompile 'junit:junit:4.12'     compile 'com.android.support:appcompat-v7:24.0.0'     // retrofit, gson     compile 'com.google.code.gson:gson:2.6.2'     compile 'com.squareup.retrofit2:retrofit:2.0.2'     compile 'com.squareup.retrofit2:converter-gson:2.0.2'     compile 'com.android.support:recyclerview-v7:24.0.0' }

Membuat Model

Pertama, kita harus mengetahui tipe respon json yang akan kita terima. Buka link berikut ini http://api.themoviedb.org/3/movie/top_rated?api_key=(api sobat). Maka kita akan mendapat 50 data film. Gunakan JsonViewer untuk melihat struktur json. Setelah dibuka, salin seluruh data yang tampil ke dalam JsonViewer dan pilih tab Viewer. Dari situ kita sanggup melihat struktur data ibarat field dan parent data yang nantinya akan kita panggil dalam aplikasi ini

Masuk ke aplikasi Android Studio, klik kanan dan tambahkan package gres dengan nama Model, kemudian buat class gres dengan nama Movie.java dan buat kodenya ibarat berikut ini

 package com.blogsetyaaji.retrofithttplibrary.Model;  import com.google.gson.annotations.SerializedName;  import java.util.ArrayList; import java.util.List;  /**  * Created by AJISETYA  */ public class Movie {      @SerializedName("poster_path")     private String posterPath;     @SerializedName("adult")     private boolean adult;     @SerializedName("overview")     private String overview;     @SerializedName("release_date")     private String releaseDate;     @SerializedName("genre_ids")     private List<Integer> genreIds = new ArrayList<Integer>();     @SerializedName("id")     private Integer id;     @SerializedName("original_title")     private String originalTitle;     @SerializedName("original_language")     private String originalLanguage;     @SerializedName("title")     private String title;     @SerializedName("backdrop_path")     private String backdropPath;     @SerializedName("popularity")     private Double popularity;     @SerializedName("vote_count")     private Integer voteCount;     @SerializedName("video")     private Boolean video;     @SerializedName("vote_average")     private Double voteAverage;      public Movie(String posterPath, boolean adult, String overview, String releaseDate, List<Integer> genreIds, Integer id,                  String originalTitle, String originalLanguage, String title, String backdropPath, Double popularity,                  Integer voteCount, Boolean video, Double voteAverage) {         this.posterPath = posterPath;         this.adult = adult;         this.overview = overview;         this.releaseDate = releaseDate;         this.genreIds = genreIds;         this.id = id;         this.originalTitle = originalTitle;         this.originalLanguage = originalLanguage;         this.title = title;         this.backdropPath = backdropPath;         this.popularity = popularity;         this.voteCount = voteCount;         this.video = video;         this.voteAverage = voteAverage;     }      public Double getVoteAverage() {         return voteAverage;     }      public void setVoteAverage(Double voteAverage) {         this.voteAverage = voteAverage;     }      public String getPosterPath() {         return posterPath;     }      public void setPosterPath(String posterPath) {         this.posterPath = posterPath;     }      public boolean isAdult() {         return adult;     }      public void setAdult(boolean adult) {         this.adult = adult;     }      public String getOverview() {         return overview;     }      public void setOverview(String overview) {         this.overview = overview;     }      public String getReleaseDate() {         return releaseDate;     }      public void setReleaseDate(String releaseDate) {         this.releaseDate = releaseDate;     }      public List<Integer> getGenreIds() {         return genreIds;     }      public void setGenreIds(List<Integer> genreIds) {         this.genreIds = genreIds;     }      public Integer getId() {         return id;     }      public void setId(Integer id) {         this.id = id;     }      public String getOriginalTitle() {         return originalTitle;     }      public void setOriginalTitle(String originalTitle) {         this.originalTitle = originalTitle;     }      public String getOriginalLanguage() {         return originalLanguage;     }      public void setOriginalLanguage(String originalLanguage) {         this.originalLanguage = originalLanguage;     }      public String getTitle() {         return title;     }      public void setTitle(String title) {         this.title = title;     }      public String getBackdropPath() {         return backdropPath;     }      public void setBackdropPath(String backdropPath) {         this.backdropPath = backdropPath;     }      public Double getPopularity() {         return popularity;     }      public void setPopularity(Double popularity) {         this.popularity = popularity;     }      public Integer getVoteCount() {         return voteCount;     }      public void setVoteCount(Integer voteCount) {         this.voteCount = voteCount;     }      public Boolean getVideo() {         return video;     }      public void setVideo(Boolean video) {         this.video = video;     } }

Di dalam class Moview, fild dala data json dideklarasikan dan dijadikan variable untuk diproses di dalam aplikasi. Dalam class tersebut juga memakai getter dan setter untuk mengatur dan mendapat data.

Selanjutnya buat class gres dengan nama MoviewResponse.java. Class ini dipakai untuk mendapat data komplemen yang nanatinya diharapkan dalam aplaikasi. Untuk kodenya ibarat berikut ini

 package com.blogsetyaaji.retrofithttplibrary.Model;  import com.google.gson.annotations.SerializedName;  import java.util.List;  /**  * Created by AJISETYA  */ public class MovieResponse {      @SerializedName("page")     private int page;     @SerializedName("results")     private List<Movie> results;     @SerializedName("total_results")     private int totalResults;     @SerializedName("total_pages")     private int totalPages;      public int getTotalPages() {         return totalPages;     }      public void setTotalPages(int totalPages) {         this.totalPages = totalPages;     }      public int getPage() {         return page;     }      public void setPage(int page) {         this.page = page;     }      public List<Movie> getResults() {         return results;     }      public void setResults(List<Movie> results) {         this.results = results;     }      public int getTotalResults() {         return totalResults;     }      public void setTotalResults(int totalResults) {         this.totalResults = totalResults;     }   }

Membuat Instansi Retrofit

Kita membutuhkan Retrofit Builder dan URL dasar. Maka buat package gres dengan nama Rest, dan buat class gres dengan nama ApiClient.java, kemudian buat kodenya ibarat berikut ini

 package com.blogsetyaaji.retrofithttplibrary.Rest;  import retrofit2.Retrofit; import retrofit2.converter.gson.GsonConverterFactory;  /**  * Created by AJISETYA  */ public class ApiClient {      public static selesai String BASE_URL = "http://api.themoviedb.org/3/";     private static Retrofit retrofit = null;       public static Retrofit getClient() {         if (retrofit==null) {             retrofit = new Retrofit.Builder()                     .baseUrl(BASE_URL)                     .addConverterFactory(GsonConverterFactory.create())                     .build();         }         return retrofit;     } }

Mendefinisikan Endpoints

Endpoint didefinisikan di dalam interface memakai anotasi Istimewa retrofit untuk untuk mengkodekan rincian perihal parameter dan metode permintaan.

Buat Interface gres dengan nama ApiInterface.java di dalam package Rest dan buat kodenya ibarat berikut

 package com.blogsetyaaji.retrofithttplibrary.Rest;  import com.blogsetyaaji.retrofithttplibrary.Model.MovieResponse;  import retrofit2.Call; import retrofit2.http.GET; import retrofit2.http.Path; import retrofit2.http.Query;  /**  * Created by AJISETYA  */ public interface ApiInterface {     @GET("movie/top_rated")     Call<MovieResponse> getTopRatedMovies(@Query("api_key") String apiKey);      @GET("movie/{id}")     Call<MovieResponse> getMovieDetails(@Path("id") int id, @Query("api_key") String apiKey); }

Setiap EndPoint menentukan anotasi dari method HTTP (GET, POST, dll) dan parameter dari method ini juga mempunyai anotasi Istimewa (@Query, @Path, @Body, dll)

Memangil Permintaan Pertama

Buka MainActivity.java dan buat kodenya menjadi ibarat di bawah ini. Jangan lupa masukkan Api ilik sobat.

 package com.blogsetyaaji.retrofithttplibrary;  import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.widget.Toast;  import com.blogsetyaaji.retrofithttplibrary.Model.Movie; import com.blogsetyaaji.retrofithttplibrary.Model.MovieResponse; import com.blogsetyaaji.retrofithttplibrary.Rest.ApiClient; import com.blogsetyaaji.retrofithttplibrary.Rest.ApiInterface;  import java.util.List;  import retrofit2.Call; import retrofit2.Callback; import retrofit2.Response;  public class MainActivity extends AppCompatActivity {      private static selesai String TAG = MainActivity.class.getSimpleName();      // TODO - insert your themoviedb.org API KEY here     private selesai static String API_KEY = "api key kamu";      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          if (API_KEY.isEmpty()) {             Toast.makeText(getApplicationContext(), "Please obtain your API KEY first from themoviedb.org", Toast.LENGTH_LONG).show();             return;         }          ApiInterface apiService =                 ApiClient.getClient().create(ApiInterface.class);          Call<MovieResponse> call = apiService.getTopRatedMovies(API_KEY);         call.enqueue(new Callback<MovieResponse>() {             @Override             public void onResponse(Call<MovieResponse>call, Response<MovieResponse> response) {                 List<Movie> movies = response.body().getResults();                 Log.d(TAG, "Number of movies received: " + movies.size());                 Toast.makeText(MainActivity.this, "Number of movies received: " + movies.size(), Toast.LENGTH_LONG).show();             }              @Override             public void onFailure(Call<MovieResponse>call, Throwable t) {                 // Log error here since request failed                 Log.e(TAG, t.toString());             }         });     } }

Retrofit akan mendownload dan memparsing data API dan mengembalikan ke User Interface lewat metode onResponse dan onFailure. Tapi sebelum menjalankan aplikasi, terlebih dahulu beri izin kanal internet pada AndroidManifest.xml ibarat instruksi di bawah ini

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

Jalankan aplikasi dengan menentukan hidangan Run 'app', balasannya akan ibarat berikut

Dan itu yaitu percobaan pertama untuk mengetes apakah seruan sanggup diproses pada tahap selanjutnya. Sekarang kita akanmelakukan langkah selanjutnya yaitu menampilkan data dari web The Movie Db. Berikut langkah-langkahnya.

Menampilkan Data di RecyclerView

Selain kita menampilkan data di RecyclerView, kita juga akan menampilkan gambar di library Picasso. Makara untuk pertama kali, kita lakukan langkah di bawah ini

Menambah Dependencies

Tambahkan dependencies gres di dalam build:grandle untuk menambah library recyclerview dan picasso. Kodenya ibarat berikut ini

 compile 'com.android.support:recyclerview-v7:24.0.0' compile 'com.squareup.picasso:picasso:2.3.2'

Membuat Tampilan

Buka color.xml dan tambahkan instruksi sampai menjadi ibarat di bawah ini untuk menambah warna yang nantinya akan ditampilkan.

 <?xml version="1.0" encoding="utf-8"?> <resources>     <color name="colorPrimary">#3F51B5</color>     <color name="colorPrimaryDark">#303F9F</color>     <color name="colorAccent">#FF4081</color>      <color name="orange">#FF3909</color>     <color name="colorAccentDark">#00B482</color>      <color name="colorBlack">#555555</color>     <color name="colorWhite">#FFFFFF</color>     <color name="colorGrey">#707070</color>     <color name="colorGreyLight">#8A8A8A</color> </resources>

Selanjutnya kita buat gambar bintang untuk menunjukka rate dari film. Buat layout gres di dalam folder drawable dengan nama star.xml dan buat kodenya ibarat berikut ini

  <vector xmlns:android="http://schemas.android.com/apk/res/android"     android:width="24dp"     android:height="24dp"     android:viewportHeight="24"     android:viewportWidth="24">     <path         android:fillColor="#000"         android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /> </vector>

Kita butuh layout untuk menampng warta yang akan ditampilkan. Kita membutuhkan 4 TextView dan dua ImageView dalam layout tersebut. Buat layout gres dengan nama list_item_movie.xml dan buat kodenya ibarat berikut ini

 <?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/movies_layout"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:gravity="center_vertical"     android:minHeight="72dp"     android:orientation="horizontal"     android:padding="16dp">      <ImageView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:id="@+id/backbg"         android:layout_marginRight="7dp"/>      <LinearLayout         android:layout_width="0dp"         android:layout_height="wrap_content"         android:layout_weight="1"         android:orientation="vertical">          <TextView             android:id="@+id/title"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_gravity="top"             android:paddingRight="16dp"             android:textStyle="bold"             android:textColor="@color/colorBlack"             android:textSize="16sp" />           <TextView             android:id="@+id/subtitle"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:paddingRight="16dp"             android:textColor="@color/colorGreyLight" />          <TextView             android:id="@+id/description"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:maxLines="3"             android:paddingRight="16dp"             android:textColor="@color/colorGreyLight" />      </LinearLayout>      <LinearLayout         android:layout_width="wrap_content"         android:layout_height="35dp"         android:orientation="horizontal">          <ImageView             android:id="@+id/rating_image"             android:layout_width="15dp"             android:layout_height="15dp"             android:layout_centerInParent="true"             android:scaleType="centerCrop"             android:src="@drawable/star"             android:tint="@color/colorAccent" />           <TextView             android:id="@+id/rating"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_marginLeft="8dp"             android:text="5.0" />     </LinearLayout>  </LinearLayout>

Tambahkan objek RecyclerViewada di dalam activity_main.xml dengan menciptakan kodenya ibarat berikut ini

 <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"     tools:context="com.blogsetyaaji.retrofithttplibrary.MainActivity">      <android.support.v7.widget.RecyclerView         android:layout_width="match_parent"         android:layout_height="match_parent"         android:id="@+id/movie_recycler"/> </RelativeLayout>

Membuat Adapter

RecylerView membutuhkan adapter yang berfungsi untuk melihat, mengikat, dan memproses data. Untuk membuatnya, buat class gres dengan nama MovieAdapter.java di dalam package Adapter dan buat kodenya ibarat berikut ini

 package com.blogsetyaaji.retrofithttplibrary.Adapter;  import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView;  import com.blogsetyaaji.retrofithttplibrary.Model.Movie; import com.blogsetyaaji.retrofithttplibrary.R; import com.squareup.picasso.Picasso;  import java.util.List;  /**  * Created by AJISETYA  */ public class MoviesAdapter extends RecyclerView.Adapter<MoviesAdapter.MovieViewHolder> {      private List<Movie> movies;     private int rowLayout;     private Context context;       public static class MovieViewHolder extends RecyclerView.ViewHolder {         LinearLayout moviesLayout;         TextView movieTitle;         TextView data;         TextView movieDescription;         TextView rating;         ImageView backbg;           public MovieViewHolder(View v) {             super(v);             moviesLayout = (LinearLayout) v.findViewById(R.id.movies_layout);             movieTitle = (TextView) v.findViewById(R.id.title);             data = (TextView) v.findViewById(R.id.subtitle);             movieDescription = (TextView) v.findViewById(R.id.description);             rating = (TextView) v.findViewById(R.id.rating);             backbg = (ImageView) v.findViewById(R.id.backbg);         }     }      public MoviesAdapter(List<Movie> movies, int rowLayout, Context context) {         this.movies = movies;         this.rowLayout = rowLayout;         this.context = context;     }      @Override     public MoviesAdapter.MovieViewHolder onCreateViewHolder(ViewGroup parent,                                                             int viewType) {         View view = LayoutInflater.from(parent.getContext()).inflate(rowLayout, parent, false);         return new MovieViewHolder(view);     }       @Override     public void onBindViewHolder(MovieViewHolder holder, selesai int position) {         holder.movieTitle.setText(movies.get(position).getTitle());         holder.data.setText(movies.get(position).getReleaseDate());         holder.movieDescription.setText(movies.get(position).getOverview());         holder.rating.setText(movies.get(position).getVoteAverage().toString());         Picasso.with(context).load("https://image.tmdb.org/t/p/w300_and_h450_bestv2" + movies.get(position).getBackdropPath()).resize(200, 250).into(holder.backbg);     }      @Override     public int getItemCount() {         return movies.size();     } }

Di dalam instruksi adapter di atas, terdapat satu baris instruksi picasso untuk menampilkan gambar dari sumber API dengan mengunakan komplemen link dasar.

Membuat Activity

Sekarang buka MainActivity.java untuk menambahkan data ke activity objek RecyclerView. Buat kodenya ibarat berikut ini

 package com.blogsetyaaji.retrofithttplibrary;  import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.util.Log; import android.widget.Toast;  import com.blogsetyaaji.retrofithttplibrary.Adapter.MoviesAdapter; import com.blogsetyaaji.retrofithttplibrary.Model.Movie; import com.blogsetyaaji.retrofithttplibrary.Model.MovieResponse; import com.blogsetyaaji.retrofithttplibrary.Rest.ApiClient; import com.blogsetyaaji.retrofithttplibrary.Rest.ApiInterface;  import java.util.List;  import retrofit2.Call; import retrofit2.Callback; import retrofit2.Response;  public class MainActivity extends AppCompatActivity {      private static selesai String TAG = MainActivity.class.getSimpleName();      // TODO - insert your themoviedb.org API KEY here     private selesai static String API_KEY = "api key kamu";      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          if (API_KEY.isEmpty()) {             Toast.makeText(getApplicationContext(), "Please obtain your API KEY first from themoviedb.org", Toast.LENGTH_LONG).show();             return;         }          selesai RecyclerView recyclerView = (RecyclerView) findViewById(R.id.movie_recycler);         recyclerView.setLayoutManager(new LinearLayoutManager(this));          ApiInterface apiService =                 ApiClient.getClient().create(ApiInterface.class);          Call<MovieResponse> call = apiService.getTopRatedMovies(API_KEY);         call.enqueue(new Callback<MovieResponse>() {             @Override             public void onResponse(Call<MovieResponse>call, Response<MovieResponse> response) {                 List<Movie> movies = response.body().getResults();                 Log.d(TAG, "Number of movies received: " + movies.size());                 Toast.makeText(MainActivity.this, "Number of movies received: " + movies.size(), Toast.LENGTH_LONG).show();                 recyclerView.setAdapter(new MoviesAdapter(movies, R.layout.list_item_movie, getApplicationContext()));             }              @Override             public void onFailure(Call<MovieResponse>call, Throwable t) {                 // Log error here since request failed                 Log.e(TAG, t.toString());             }         });     } }

Menjalankan Aplikasi

Setelah semuanya selesai, saatnya menjalankan aplikais dengan menentukan hidangan Run 'app'. Tampilanya akan ibarat berikut ini

SIlahkan kalau sahabat ingin melihat hasil projectnya di github saya

Follow @AjiSetya Watch Star
Data telah berhasil ditampilkan, mungki sahabat sanggup menambahkan CardView untuk mempercantik tampilanya.
Oiya kalau sahabat pengen menambahkan agresi ketika datanya diklik, sahabat sanggup buka artkel di bawah ini.

Membuat Klik pada RecyclerView Menggunakan OnClick Listener / ItemClick Listener

Sekian artikel tentang Tutorial Android dengan Retrofit HTTP Library. supaya bermanfaat. Ikuti terus dan nanikan artikel menarik lainya.

Tag : Pemrograman, Pemrograman Android

Tutorial Android Dengan Retrofit Http Library

0 Komentar untuk "Tutorial Android Dengan Retrofit Http Library"

Tema Tulisan

Formulir Kontak

Info Literasi & Penerbitan

Tutorial Android Dengan Retrofit Http Library

Previous

Next

0 Komentar untuk "Tutorial Android Dengan Retrofit Http Library"

Tema Tulisan

Formulir Kontak

Info Literasi & Penerbitan