프로젝트: Amphibians 앱

1. 시작하기 전에

이 Codelab에서는 개발자가 직접 빌드할 Amphibians라는 새로운 앱을 소개합니다. 이 Codelab에서는 Android 스튜디오 내에서의 프로젝트 설정 및 테스트를 비롯하여 Amphibians 앱 프로젝트를 완료하는 단계를 안내합니다.

기본 요건

이 프로젝트는 Kotlin으로 배우는 Android 기본사항 과정의 4단원을 완료한 사용자를 대상으로 합니다.

빌드할 항목

Retrofit과 Moshi, 적절한 오류 처리를 사용하여 앱에서 네트워킹을 구현합니다.

필요한 항목

Android 스튜디오가 설치된 컴퓨터

2. 완성된 앱 개요

프로젝트: Amphibians에 오신 것을 환영합니다.

지금까지 빌드한 앱은 모두 로컬에 저장된 데이터에 의존했습니다. 이번에는 다양한 양서류 종에 관한 정보를 표시하는 앱을 사용하고, 네트워킹과 JSON 파싱, 뷰 모델에 관한 지식을 사용하여 앱이 네트워크의 데이터를 사용하도록 설정합니다. 앱은 이 프로젝트의 맞춤 API에서 데이터를 가져와 목록 보기에 표시합니다.

최종 앱에서는 사용자에게 표시되는 첫 번째 화면에서 recycler 뷰에 각 종의 이름이 표시됩니다.

목록 항목을 탭하면 세부정보 화면으로 이동하고 여기서도 종의 이름과 자세한 설명이 표시됩니다.

이 앱의 UI 부분은 이미 빌드되어 있지만 시작 프로젝트를 실행하면 데이터가 표시되지 않습니다. 앱의 네트워킹 부분을 구현한 후 다운로드된 데이터를 레이아웃에 표시해야 합니다.

3. 시작하기

프로젝트 코드 다운로드

폴더 이름은 android-basics-kotlin-amphibians-app입니다. Android 스튜디오에서 프로젝트를 열 때 이 폴더를 선택하세요.

이 Codelab의 코드를 가져와서 Android 스튜디오에서 열려면 다음을 실행합니다.

코드 가져오기

제공된 URL을 클릭합니다. 브라우저에서 프로젝트의 GitHub 페이지가 열립니다.
프로젝트의 GitHub 페이지에서 Code 버튼을 클릭하여 대화상자를 엽니다.

대화상자에서 Download ZIP 버튼을 클릭하여 컴퓨터에 프로젝트를 저장합니다. 다운로드가 완료될 때까지 기다립니다.
컴퓨터에서 파일을 찾습니다(예: Downloads 폴더).
ZIP 파일을 더블클릭하여 압축을 해제합니다. 프로젝트 파일이 포함된 새 폴더가 만들어집니다.

Android 스튜디오에서 프로젝트 열기

Android 스튜디오를 시작합니다.
Welcome to Android Studio 창에서 Open an existing Android Studio project를 클릭합니다.

참고: Android 스튜디오가 이미 열려 있는 경우 File > New > Import Project 메뉴 옵션을 대신 선택합니다.

Import Project 대화상자에서 압축 해제된 프로젝트 폴더가 있는 위치로 이동합니다(예: Downloads 폴더).
프로젝트 폴더를 더블클릭합니다.
Android 스튜디오가 프로젝트를 열 때까지 기다립니다.
Run 버튼 을 클릭하여 앱을 빌드하고 실행합니다. 예상대로 작동하는지 확인합니다.
Project 도구 창에서 프로젝트 파일을 살펴보고 앱이 설정된 방식을 확인합니다.

API 서비스 구현

이전 프로젝트에서와 마찬가지로 대부분의 앱은 이미 구현되어 있습니다. 4단원에서 학습한 내용을 토대로 네트워킹 부분을 구현하면 됩니다. 시작 코드를 자유롭게 사용해 보세요. 대부분의 개념은 1~3단원에서 이미 알아봤습니다. 다음 단계에서는 각 단계를 완료하는 데 필요한 코드의 특정 부분을 호출합니다.

앱에는 네트워크의 양서류 데이터 목록이 표시됩니다. 양서류 데이터의 출처는 API에서 반환된 JSON 객체입니다. network 패키지의 Amphibian.kt 파일을 살펴보세요. 이 클래스는 단일 양서류 객체를 모델링하며, 이러한 객체의 목록이 API에서 반환됩니다. 각 양서류에는 3가지 속성(이름, 유형, 설명)이 있습니다.

data class Amphibian(
    val name: String,
    val type: String,
    val description: String
)

이 API의 백엔드는 매우 간단합니다. 양서류 데이터에 액세스하려면 두 가지 주요 정보가 필요합니다. 하나는 기본 URL이고 다른 하나는 양서류 목록을 가져오기 위한 엔드포인트입니다.

기본 URL: https://developer.android.com/courses/pathways/android-basics-kotlin-unit-4-pathway-2/
GET 양서류 목록: android-basics-kotlin-unit-4-pathway-2-project-api.json

프로젝트에는 이미 Retrofit 및 Moshi 종속 항목이 있습니다. network 패키지에서 AmphibianApiService.kt 파일을 확인할 수 있습니다. 파일에는 여러 TODO 주석이 포함되어 있습니다. 다음 5가지 작업을 실행하여 양서류 앱을 구현합니다.

API의 기본 URL을 저장할 변수를 만듭니다.
Retrofit이 JSON을 파싱하는 데 사용할 Kotlin 어댑터 팩토리로 Moshi 객체를 빌드합니다.
Moshi 변환기를 사용하여 aRetrofit 인스턴스를 빌드합니다.
각 API 메서드의 suspend 함수로 AmphibianApiService 인터페이스를 구현합니다(이 앱에는 양서류 목록을 가져오는 메서드가 하나뿐임).
AmphibianApi 객체를 만들어 AmphibianApiService 인터페이스를 사용하는 지연 초기화 Retrofit 서비스를 노출합니다.

ViewModel 구현

API가 구현되면 amphibians API에 요청하고, 표시해야 하는 모든 값을 저장합니다. 이 작업은 ui 패키지에 있는 AmphibianViewModel.kt 클래스에서 실행합니다.

클래스 선언 위에 AmphibianApiStatus라는 열거형이 표시됩니다.

enum class AmphibianApiStatus {LOADING, ERROR, DONE}

가능한 3가지 값 LOADING, ERROR, DONE은 요청 상태를 사용자에게 표시하는 데 사용됩니다.

AmphibianViewModel.kt 클래스 자체에서 몇 가지 LiveData 변수, API와 상호작용하는 함수, 세부정보 화면에서 양서류 설정을 처리하는 함수를 구현해야 합니다.

AmphibianApiStatus 열거형과 상태의 지원 속성 status를 보유할 수 있는 비공개 MutableLiveData 변수 _status를 추가합니다.
List<Amphibian> 유형의 양서류 목록에 관한 amphibians 변수와 비공개 지원 속성 _amphibians를 추가합니다.
MutableLiveData<Amphibian> 유형의 _amphibian 변수와 LiveData<Amphibian> 유형의 선택된 양서류 객체에 관한 지원 속성 amphibian을 추가합니다. 세부정보 화면에 표시된 선택된 양서류를 저장하는 데 사용됩니다.
getAmphibianList()라는 함수를 정의합니다. ViewModelScope를 사용하여 코루틴을 실행하고 코루틴 내에서 Retrofit 서비스의 getAmphibians() 메서드를 호출하여 양서류 데이터를 다운로드하는 GET 요청을 실행합니다. try와 catch를 사용하여 오류를 적절히 처리해야 합니다. 요청하기 전에 _status 값을 AmphibianApiStatus.LOADING으로 설정합니다. 요청에 성공하면 _amphibians가 서버의 양서류 목록으로 설정되고 _status가 AmphibianApiStatus.DONE으로 설정됩니다. 오류가 발생하면 _amphibians는 빈 목록으로 설정되고 _status는 AmphibianApiStatus.ERROR로 설정됩니다.
onAmphibianClicked() 메서드를 구현하여 직접 정의한 _amphibian 속성을 함수에 전달된 양서류 인수로 설정합니다. 이 메서드는 양서류가 선택되었을 때 이미 호출되어 세부정보 화면에 표시됩니다.

ViewModel에서 UI 업데이트

ViewModel을 구현하고 나면 데이터 결합을 사용하도록 프래그먼트 클래스와 레이아웃 파일을 수정하기만 하면 됩니다.

ViewModel은 이미 AmphibianListFragment에서 참조됩니다. onCreateView() 메서드에서 레이아웃이 확장된 후 ViewModel에서 getAmphibianList() 메서드를 호출하면 됩니다.
fragment_amphibian_list.xml에서는 데이터 결합 변수의 <data> 태그가 이미 레이아웃 파일에 추가되었습니다. 뷰 모델에 따라 UI를 업데이트하려면 TODO를 구현하면 됩니다. listData와 apiStatus에 적절한 결합을 설정합니다.
fragment_amphibian_detail.xml에서 TODO를 구현하여 양서류 이름과 설명의 적절한 텍스트 속성을 설정합니다.

4. 테스트 안내

테스트 실행

테스트를 실행하려면 다음 중 하나를 실행하면 됩니다.

단일 테스트 사례의 경우 테스트 사례 클래스를 열고 클래스 선언 왼쪽의 녹색 화살표를 클릭합니다. 그런 다음 메뉴에서 실행 옵션을 선택하면 됩니다. 그러면 테스트 사례의 테스트가 모두 실행됩니다.

예를 들어 실패한 테스트는 하나뿐이고 나머지 테스트는 통과된 경우와 같이 단일 테스트만 실행하려는 때가 많습니다. 전체 테스트 사례와 마찬가지로 단일 테스트를 실행할 수 있습니다. 녹색 화살표를 사용하여 실행 옵션을 선택합니다.

테스트 사례가 여러 개라면 전체 테스트 모음을 실행할 수도 있습니다. 앱을 실행하는 것과 마찬가지로 Run 메뉴에서 이 옵션을 찾을 수 있습니다.

Android 스튜디오는 마지막으로 실행한 타겟(앱, 테스트 타겟 등)을 기본값으로 설정하므로 메뉴에 여전히 Run > Run 'app'이라고 표시되면 Run > Run을 선택하여 테스트 타겟을 실행할 수 있습니다.

그런 다음 팝업 메뉴에서 테스트 타겟을 선택합니다.

테스트 실행 결과는 Run 탭에 표시됩니다. 왼쪽 창에서 실패한 테스트 목록을 확인할 수 있습니다(있는 경우). 실패한 테스트는 함수 이름 옆에 빨간색 느낌표가 표시됩니다. 통과한 테스트는 녹색 체크표시가 표시됩니다.

테스트에 실패하면 텍스트 출력을 통해 테스트 실패를 야기한 문제를 해결할 수 있는 정보가 제공됩니다.

예를 들어 위 오류 메시지에서 테스트는 TextView가 특정 문자열 리소스를 사용하고 있는지 확인합니다. 그러나 테스트에 실패합니다. 'Expected'와 'Got' 다음에 있는 텍스트가 일치하지 않습니다. 즉, 테스트에서 예상한 값이 실행되는 앱의 값과 일치하지 않습니다. 이 예에서 TextView에 사용된 문자열은 테스트에서 예상한 대로 실제로 squeeze_count가 아닙니다.