Volley 보다 쉽게 사용 가능한 Retrofit2 라이브러리로 유튜브 app 개발하기

Retrofit 라이브러리

- 안드로이드에서 널리 사용되는 HTTP 클라이언트 라이브러리

 

- Retrofit은 Square에서 개발한 HTTP 클라이언트 라이브러리이다.

 

- 주로 Android 애플리케이션에서 RESTful 웹 서비스를 호출하기 위해 사용된다.

 

- 즉, REST API와 상호작용하기 쉽게 도와준다.

 

- JSON을 Java 객체로 변환하거나 그 반대로 변환하는 작업을 간단하게 수행할 수 있다.

 

- Retrofit 라이브러리는 JSON을 자바의 클래스로 바로 담아주므로 파싱을 할 필요가 없어서 간편하다.

 

- Retrofit을 사용하면 네트워크 요청을 쉽게 만들고 관리할 수 있다.

 

 

Retrofit (1.x)

- Retrofit 1.x는 HTTP 클라이언트로 Apache HTTPClient를 사용한다

- 기본적으로 Call 객체를 사용하지 않고, 인터페이스 메소드의 반환 타입으로 직접적인 POJO 객체를 반환한다

- RxJava와의 통합은 별도의 어댑터가 아닌 방식으로 제공된다

- Gson은 기본적으로 통합되어 있었으며, 추가적인 설정 없이 바로 사용할 수 있다

 

Retrofit2

- Retrofit 2.x는 HTTP 클라이언트로 OkHttp를 사용한다 이는 네트워크 요청 및 응답의 처리를 더 효율적으로 한다

 

 

- 반환 타입 : Call<T> 객체를 반환하는 방식으로 변경되었다 이는 네트워크 요청이 비동기적으로 수행될 수 있도록 도와준다

Call<MyResponse> call = api.getMyData();

 

 

- 어댑터 : 다양한 호출 어댑터(Call Adapters)를 지원한다. 예를 들어, RxJava나 Kotlin Coroutines와 쉽게 통합할 수 있도록 별도의 어댑터를 제공한다

@GET("users/{user}") Observable<User> getUser(@Path("user") String user);

 

 

- Gson 통합 : Gson은 여전히 사용할 수 있지만, 명시적으로 Retrofit 객체에 추가해야 한다

Retrofit retrofit = new Retrofit.Builder() .baseUrl("https://api.example.com") .addConverterFactory(GsonConverterFactory.create()) .build();

 

 

 

https://github.com/square/retrofit

GitHub - square/retrofit: A type-safe HTTP client for Android and the JVM

 

 

 

환경변수 설정하기

 

 

 

 

 

Retrofit 라이브러리 설치하기

 

 

 

implementation("com.squareup.retrofit2:retrofit:2.11.0")
implementation("com.squareup.retrofit2:converter-gson:2.11.0")
implementation("com.squareup.okhttp3:logging-interceptor:4.12.0")

 

 

Sync를 눌러주면 설치가 완료된다.

 

 

 

 

 

Retrofit 라이브러리로 코드 짜기 전에 봐야할 유튜브 데이터 API 만드는 법

 

https://codebunny99.tistory.com/163

유튜브 데이터 API를 Postman(포스트맨)으로 사용하는 방법

 

 

 

 

결과 미리보기

 

 

 

 

 

 

 

 

 

Config 만들기

 

package com.~.youtube2.config;

public class Config {
    public static final String YOUTUBE_KEY = "자신의 key 입력";
    public static final String DOMAIN = "https://www.googleapis.com";

}

 

 

 

 

 

NetworkClient 클래스 작성하기

 

package com.~.youtube2.api;

import android.content.Context;

import com.~.youtube2.config.Config;

import java.util.concurrent.TimeUnit;

import okhttp3.OkHttpClient;
import okhttp3.logging.HttpLoggingInterceptor;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

public class NetworkClient {

    public static Retrofit retrofit;

    public static Retrofit getRetrofitClient(Context context){
        if(retrofit == null){
            // 통신 로그 확인할때 필요한 코드
            HttpLoggingInterceptor loggingInterceptor =
                    new HttpLoggingInterceptor();
            loggingInterceptor.setLevel(HttpLoggingInterceptor.Level.BODY);

            // 네트워크 연결관련 코드
            OkHttpClient httpClient = new OkHttpClient.Builder()
                    .connectTimeout(1, TimeUnit.MINUTES)
                    .readTimeout(1, TimeUnit.MINUTES)
                    .writeTimeout(1, TimeUnit.MINUTES)
                    .addInterceptor(loggingInterceptor)
                    .build();
            // 네트워크로 데이터를 보내고 받는
            // 레트로핏 라이브러리 관련 코드
            retrofit = new Retrofit.Builder()
                    .baseUrl(Config.DOMAIN)
                    .client(httpClient)
                    .addConverterFactory(GsonConverterFactory.create())
                    .build();
        }
        return retrofit;
    }
}

 

 

 

 

 

VideoApi 인터페이스 작성하기

 

package com.~.youtube2.api;

import com.~.youtube2.model.VideoList;

import retrofit2.Call;
import retrofit2.http.GET;
import retrofit2.http.Query;

public interface VideoApi {  //인터페이스로 바꿔준다.

    // 유튜브에 검색하는 API

    // HTTP Method 써주고, 그 안에는 경로를 써준다.
    @GET("/youtube/v3/search")
    Call<VideoList> searchVideo(@Query("key") String key,
                                @Query("part") String part,
                                @Query("maxResults") int maxResults,
                                @Query("order") String order,
                                @Query("type") String type,
                                @Query("q") String q );

    // 함수의 리턴 데이터 타입은, Call 안에 응답으로 받을 클래스를 넣어준다.

}

 

 

 

 

 

 

model 패키지에 VideoList.class 작성하기

 

{ } 로 되어있는 오브젝트는 클래스로 작성한다.

 

package com.~.youtube2.model;

import java.util.ArrayList;

public class VideoList {

    public String nextPageToken;
    public ArrayList<Item> items;
}

 

 

 

 

model 패키지에 클래스 만들기

 

 

ImageUrl 클래스

package com.~.youtube2.model;

public class ImageUrl {

    public String url;

}

 

 

Item 클래스

package com.~.youtube2.model;

public class Item {

    public Id id;
    public Video snippet;
}

 

 

Video 클래스

package com.~.youtube2.model;

public class Video {

    public String title;
    public String description;
    public Thumbnail thumbnails;
}

 

 

Thumbnail 클래스

package com.yujinoh.youtube2.model;

public class Thumbnail {

    public ImageUrl medium;
    public ImageUrl high;
}

 

Id 클래스

package com.~.youtube2.model;

public class Id {

    public String videoId;

}

 

 

 

 

 

activity_main.xml 작성하기

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:id="@+id/topLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_margin="10dp"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/editSearch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="5dp"
                android:layout_weight="5"
                android:ems="10"
                android:hint="검색어 입력..."
                android:inputType="text"
                android:textSize="22sp" />

            <ImageView
                android:id="@+id/imgSearch"
                android:layout_width="45dp"
                android:layout_height="45dp"
                app:srcCompat="@drawable/search_24dp" />
        </LinearLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/topLayout" />

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

 

activity_row.xml 만들어주기

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="7dp"
        android:layout_marginRight="15dp"
        android:layout_marginBottom="7dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txtTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                android:text="TextView"
                android:textSize="24sp" />

            <TextView
                android:id="@+id/txtDescription"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="7dp"
                android:layout_marginBottom="10dp"
                android:ellipsize="end"
                android:maxLines="2"
                android:text="TextView"
                android:textSize="20sp" />

            <ImageView
                android:id="@+id/imgThumb"
                android:layout_width="320dp"
                android:layout_height="180dp"
                android:layout_gravity="center"
                android:src="@drawable/image_24dp" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>

 

 

 

 

 

MainActivity 작성하기

 

package com.~.youtube2;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.~.youtube2.adapter.VideoAdapter;
import com.~.youtube2.api.NetworkClient;
import com.~.youtube2.api.VideoApi;
import com.~.youtube2.config.Config;
import com.~.youtube2.model.Item;
import com.~.youtube2.model.VideoList;

import java.util.ArrayList;

import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;


public class MainActivity extends AppCompatActivity {

    EditText editSearch;
    ImageView imgSearch;
    ProgressBar progressBar;
    RecyclerView recyclerView;

    ArrayList<Item> videoArrayList = new ArrayList<>();
    VideoAdapter adapter;

    String keyword;
    String nextPageToken;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editSearch = findViewById(R.id.editSearch);
        imgSearch = findViewById(R.id.imgSearch);
        progressBar = findViewById(R.id.progressBar);

        recyclerView = findViewById(R.id.recyclerView);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(MainActivity.this));


        //프로그레스바 안보이게 하기
        progressBar.setVisibility(View.GONE);


        imgSearch.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {


                keyword = editSearch.getText().toString().trim();

                if (keyword.isEmpty()) {
                    Toast.makeText(MainActivity.this, "검색어를 입력해주세요.", Toast.LENGTH_SHORT).show();
                    return;
                }

                // 네트워크로 API를 호출한다
                getNetworkData();


            }
        });
    }

    private void getNetworkData() {

        //프로그레스바 보이게 하기
        progressBar.setVisibility(View.VISIBLE);

        Retrofit retrofit = NetworkClient.getRetrofitClient(MainActivity.this);

        VideoApi api = retrofit.create(VideoApi.class);

        // API를 만들고
        Call<VideoList> call =api.searchVideo(Config.YOUTUBE_KEY, "snippet", 20, "date", "video", keyword);

        // 네트워크로 호출한다.
        call.enqueue(new Callback<VideoList>() {
            @Override
            public void onResponse(Call<VideoList> call, Response<VideoList> response) {
                // 네트워크 통신 성공

                // 프로그레스바 안보이게 하기
                progressBar.setVisibility(View.GONE);

                // 200 OK 일때 코드
                if(response.isSuccessful()){

                    // 응답하는 전체 JSON 데이터는 body에 들어있으므로 body() 함수 호출한다.
                    // Retrofit 라이브러리는 JSON을 자바의 클래스로 바로 담아주므로 파싱할 필요가 없다.
                    VideoList videoList = response.body();

                    nextPageToken = videoList.nextPageToken;

                    videoArrayList.addAll( videoList.items );

                    adapter = new VideoAdapter(MainActivity.this, videoArrayList);

                    recyclerView.setAdapter(adapter);


                }else if(response.code() == 400){
                    // response.code()는 HTTP 상태코드가 들어있다.

                }else if(response.code() == 500){

                }else {

                }
            }

            @Override
            public void onFailure(Call<VideoList> call, Throwable throwable) {
                // 네트워크 통신 실패

                // 프로그레스바 안보이게 하기
                progressBar.setVisibility(View.GONE);

                // 유저한테 알려주고, 로그찍고 리턴
            }
        });

    }

}

 

 

 

 

 

Adapter 만들기

 

package com.~.youtube2.adapter;

import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.RecyclerView;


import com.~.youtube2.R;
import com.~.youtube2.model.Item;
import com.bumptech.glide.Glide;

import java.util.ArrayList;

public class VideoAdapter extends RecyclerView.Adapter<VideoAdapter.ViewHolder>{

    Context context;
    ArrayList<Item> videoArrayList;

    public VideoAdapter(Context context, ArrayList<Item> videoArrayList) {
        this.context = context;
        this.videoArrayList = videoArrayList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.activity_row, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Item video = videoArrayList.get(position);

        holder.txtTitle.setText( video.snippet.title );
        holder.txtDescription.setText( video.snippet.description );
        Glide.with(context).load( video.snippet.thumbnails.medium.url ).into( holder.imgThumb );
    }

    @Override
    public int getItemCount() {
        return videoArrayList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        TextView txtTitle;
        TextView txtDescription;
        ImageView imgThumb;
        CardView cardView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);

            txtTitle = itemView.findViewById(R.id.txtTitle);
            txtDescription = itemView.findViewById(R.id.txtDescription);
            imgThumb = itemView.findViewById(R.id.imgThumb);
            cardView = itemView.findViewById(R.id.cardView);


        }

        // 웹브라우저 액티비티를 실행시키는 함수
        void openWebPage(String url){
            Uri uri = Uri.parse(url);
            Intent intent = new Intent(Intent.ACTION_VIEW, uri);
            context.startActivity(intent);
        }
    }
}