[코틀린 멀티플랫폼] 첫 번째 멀티플랫폼 앱 만들기

여기에서 첫 번째 KMM 애플리케이션을 어떻게 만드는 지 배울 수 있다.

 

애플리케이션 프로젝트 생성하기

1. 적절한 운영체제에 필요한 툴을 설치하여 KMM 개발을 위한 환경을 설정해야 한다.

(원본 링크 - kotlinlang.org/docs/mobile/setup.html 또는 정리한 포스팅 - blog.soobinpark.com/217)

이 튜토리얼의 특정 단계를 완료하기 위해서는 macOS가 설치된 Mac이 필요하다. 이곳에는 iOS 관련 코드 작성 및 iOS 애플리케이션 실행이 포함된다. 이러한 단계는 Microsoft Windows와 같은 다른 운영체제에서는 수행할 수 없기 때문이다. 이는 Apple의 요구사항 때문이다.

 

2. Android Studio에서, File | New | New Project 를 선택한다.

New Project 선택

 

3. KMM Application을 선택하고, Next를 클릭한다.

KMM Application을 선택

 

4. 여러분의 첫 번째 애플리케이션 이름을 지정하고 Next를 클릭한다.

원하는 대로 이름을 짓는다.

 

이렇게 필요한 빌드 툴이 설치된다.

 

5. 애플리케이션 및 공유 폴더의 기본 이름을 그대로 유지하고, 체크 박스를 선택하여 프로젝트에 대한 샘플 테스트를 생성한 다음, Finish를 클릭한다.

그대로 두고, 체크만 잘 해준다.

 

6. 기다림

이제 프로젝트가 초기설정 되는 동안 기다린다.(안드로이드 프로젝트 대비 생각보다 시간이 꽤 걸린다. 인덱싱 포함 약 5분정도..?) 이 작업을 처음 수행할 때 필요한 구성 요소를 다운로드 하고 설정하는 데 시간이 걸릴 수 있다.

모바일 멀티 플랫폼 프로젝트의 전체 구조를 보려면 View를 Android에서 Project로 전환하면 된다. 여러분은 KMM 프로젝트 구조와 이것을 사용하는 방법을 이해할 수 있을 것이다.(원본 자료 - kotlinlang.org/docs/mobile/discover-kmm-project.html)

Project를 꼭 선택.

애플리케이션 실행

여러분은 여러분의 멀티플랫폼 애플리케이션을 안드로이드나 iOS에서 실행할 수 있다.

안드로이드에서 애플리케이션 실행하기

Run configuration 목록에서 androidApp을 선택하고 Run 아이콘을 클릭한다.

녹색 화살표 아이콘이 Run 아이콘이다

당연하겠지만, 이렇게 실행되는 것을 확인할 수 있다.

안드로이드에서 실행

실행은 에뮬레이터나 실제 기기에서나 같은 방법으로 실행이 가능하다. 기기 선택만 바꿔주면 된다.

가상 기기를 바꾸고싶다면, AVD Manager를 통해서 생성해 준 뒤 진행하면 된다.

 

iOS에서 애플리케이션 실행하기

Run configuration 목록에서 iosApp을 선택하고 Run 아이콘을 클릭한다.

이미 실행중인 상태에서는 Run 아이콘이 다음과 같이 바뀐다

열심히 빌드를 수행한다

실행한 결과는 이렇게 다르게 나온다

다른 iPhone 시뮬레이션 기기로 작동시키기

만약 다른 시뮬레이션 기기로 동작시키고 싶다면, Run configuration을 추가한다.

1. Edit configuration을 선택

Edit를 찾아간다

2. Add New Configuration의 iOS Application을 선택하여 세팅 진행

이곳에서 add를 할 수 있다

3. 또 다른 방법으로는 기존 설정에서 가져와서 진행할 수도 있다

하지만 개인적으로는 저 copy 아이콘을 추천한다

4. 이름과 타겟을 지정해준다

원하는 이름으로 설정하고 Apply 버튼이나 OK 버튼을 눌러서 진행

만일 문제가 발생한다면, 이 곳(youtrack.jetbrains.com/issue/KT-40907?_ga=2.79464157.874378201.1619018566-1847291108.1565600046)에 제보한다

 

테스트 수행하기

테스트를 실행하여 shared code가 두 플랫폼 모두에서 올바르게 작동하는지 확인할 수 있다. 물론 플랫폼별 코드를 확인하는 테스트를 작성하고 실행하는 것도 가능하다.

iOS에서 테스트 수행하기

1. iosTest.kt를 연다.

shared/src/iosTest/kotlin/com.example.kmmapplication.shared 디렉토리에서 iosTest.kt 파일을 연다.

이름에 Test가 있는 디렉토리에는 테스트가 포함된다고 보면 된다. 이 파일에는 iOS용 샘플 테스트가 담겨있다.

이런 내용이 있다

2. 클래스 이름 옆의 녹색 화살표를 눌러 Run을 수행한다.

UI 없이 테스트를 수행하고, 테스트가 성공한 것을 console에서 확인할 수 있다.

Run Test 수행시, 왼쪽 아래에서 결과를 확인할 수 있다

안드로이드에서 테스트 수행하기

1. androidTest.kt를 연다.

shared/src/androidTest/kotlin/com.example.kmmapplication.shared에서 androidTest.kt 파일을 연다.

2. iOS와 동일한 방법으로 Run Test 수행한다.

Android에서 Test 수행

애플리케이션 수정해보기

한 번의 수정으로 두 플랫폼에서 확인해보려고 한다.

1. Greeting.kt 파일을 연다.

shared/src/commonMain/kotlin/com.example.kmmapplication.shared에서 Greeting.kt파일을 연다.

이 디렉토리는 Android, iOS 두 플랫폼의 공유 코드를 저장하는 곳이다. 그래서 shared code를 변경하면, 두 플랫폼 모두에 반영되는 것을 확인할 수 있다.

2. 아래와 같이 수정해보자.

텍스트를 reversed()를 호출해서 뒤집는 것을 수행해보자. 이것은 kotlin의 standard 라이브러리이다.

class Greeting {
    fun greeting(): String {
//        return "Hello, ${Platform().platform}!"
        return "이것이 무엇인지 맞춰보시죠! > ${Platform().platform.reversed()}!"
    }
}

3. 안드로이드에서 수행한 결과이다.

4. iOS에서 수행한 결과이다.

5. commonTest까지 수행한다.

fail이 된 것을 볼 수 있을 것이다. 문구를 수정했기 때문이다.

fail 발생

Hello라는 문자열을 찾을 수 없어서 발생한 에러이므로 적절하게 수정하면 Test를 성공시킬 수 있다.

class Greeting {
    fun greeting(): String {
//        return "Hello, ${Platform().platform}!"
        return "안녕하세요! 이것이 무엇인지 맞춰보시죠! > ${Platform().platform.reversed()}!"
    }
}

그리고 테스트코드는

class CommonGreetingTest {

    @Test
    fun testExample() {
        assertTrue(Greeting().greeting().contains("안녕"), "Check '안녕' is mentioned")
    }
}

결과는

다만, 인지해야 할 점은 commonTest라도 타겟 플랫폼은 지정해야 한다는 사실이다.

플랫폼에 따라 다른 결과를 보일 수 있으니, 이 점은 알고 있어야 한다.

 

 

이렇게 함으로써, 앱을 각각의 플랫폼에서 실행해보았으며, 테스트 코드 또한 수정해보는 것까지 진행해보았다.

이제는 뭐라도 만들 수 있을 것이다!

 

출처

kotlinlang.org/docs/mobile/create-first-app.html

Create your first multiplatform application – tutorial | Kotlin Multiplatform Mobile Docs