Youtube 앱 개발하기

Side Project - Youtube
영상의 목록을 보여주고 영상을 플레이하는 유튜브의 간단한 기능을 구현한 프로젝트

 

• Github -> https://github.com/hwayeon351/Youtube

GitHub - hwayeon351/Youtube

---

학습 회고

오늘은 유튜브 앱에 띄울 영상 리스트를 mocky를 활용해 임의 데이터를 만들고 Retrofit2 라이브러리를 통해 데이터를 받아왔다.

---

오늘 공부한 내용

• mock 데이터 만들기

구글에 dummy video를 검색해서 구글에서 제공하는 비디오를 가져오는 JSON 형식을 제공하는 Github를 활용해 유튜브 앱에 적용하였다.

https://gist.github.com/deepakpk009/99fd994da714996b296f11c3c371d5ee

sample free video urls

 

그리고 해당 JSON을 뿌려주는 URL을 만들기 위해 mocky 사이트를 활용하였다.

 

 

• Retrofit2를 사용해서 데이터 받아오기

Retrofit2를 사용하기 위해 세 가지 구성요소인 모델, 서비스, DTO를 작성해준다.

• Data Model 클래스 만들기

mock 데이터에서 각각의 비디오에 관한 데이터를 하나의 객체로 받아오기 위해 key 값을 일치시켜준 데이터 모델을 만들어 준다.

package com.example.youtube.model

data class VideoModel(
    val title: String,
    val sources: String,
    val subtitle: String,
    val thumb: String,
    val description: String
)

 

• DTO 만들기

VideoModel 형식의 리스트로 데이터를 받아오기 위해 DTO를 만든다.

package com.example.youtube.dto

import com.example.youtube.model.VideoModel

data class VideoDto(
    val videos: List<VideoModel>
)

 

• Service 인터페이스 만들기

실제 통신 로직을 정의하는 서비스를 작성한다.

위에서 생성한 Mocky 데이터로부터 비디오 데이터들을 담은 리스트를 받아오기 위해 GET을 정의하였다.

package com.example.youtube.service

import com.example.youtube.dto.VideoDto
import retrofit2.Call
import retrofit2.http.GET

interface VideoService {
    @GET("/v3/1d022ac7-2cfa-4306-80f2-8f31419d8d20")
    fun listVideos(): Call<VideoDto>
}

 

• Retrofit 구현체 만들기

Retrofit.Builder를 통해 Retrofit 구현체를 생성하고 create()에 위에서 만든 VideoService를 담아 VideoService를 수행하는 객체를 생성한다.

서비스 객체의 메서드를 호출해서 통신을 수행한다.

private fun getVideoList() {
    val retrofit = Retrofit.Builder()
        .baseUrl("https://run.mocky.io/")
        .addConverterFactory(GsonConverterFactory.create())
        .build()

    retrofit.create(VideoService::class.java).also {

        it.listVideos()
            .enqueue(object: Callback<VideoDto> {
                override fun onResponse(call: Call<VideoDto>, response: Response<VideoDto>) {
                    if(response.isSuccessful.not()) {
                        Log.d("MainActivity", "response fail")
                        return
                    }

                    response.body()?.let {
                        Log.d("MainActivity", it.toString())
                    }
                }

                override fun onFailure(call: Call<VideoDto>, t: Throwable) {
                    t.printStackTrace()
                }

            })
    }
}