Line Creators Studio Android With Kotlin

LINE Creators Studio
Android with Kotlin.

⾃⼰紹介
李性賢
LINE Fukuoka 株式会社
開発1チーム所属
LEE
SUNGHYUN(Dave)

LINE Creators Studio Android with Kotlin.
・LINE Creators Studio Android with Kotlin
・LINE Creators Studio Androidのアプリ設計
・AndroidでUIテスト⾃動化 with Firebase Test Lab
⽬次

技術概要
⾔語：Kotlin
Layout：Anko
Network：Retrofit2, OkHttp3
DB：Realm
Reactive Programming：RxJava1, RxBinding, RxLifecycle
Dependecy Injection：Dagger2
Test：Espresso, Mockito-Kotlin

Why Kotlin?
null safe
lambda extension
property
型推論
anko
100% java 相互運用性

Why Kotlin?
・チームの開発⽣産性を向上させたい
・メンテしやすいコードを書きたい
・NPEから発⽣するバグを減らしたい
背景

Null Safe
・NPEによるバグ発⽣率↓
・annotationを作成するコスト↓
・メンテしやすさ↑
No more needed @NonNull, @Nullable annotations in
kotlin.

Lambda
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.v(TAG, "clicked");
}
});
Java

Lambda
@Override
}
});
button.setOnClickListener { Log.v(TAG, "clicked") }
Java
Kotlin

Lambda
@Override
}
});
button.setOnClickListener { Log.v(TAG, "clicked") }
button.onClick { Log.v(TAG, "clicked") }
Java
Kotlin
Kotlin with anko
・コード量↓
・読みやすさ↑

Extension
fun View.onGlobalLayout(once: Boolean = true, init: View.() -> Unit) {
val view = this
viewTreeObserver.addOnGlobalLayoutListener(object : OnGlobalLayoutListener {
override fun onGlobalLayout() {
init()
if (once) {
view.viewTreeObserver.removeOnGlobalLayoutListener(this)
}
}
})
}
ViewExtension.kt

Extension + Anko
frameLayout {
val button = button()
button.onClick {
// click event.
}
}.onGlobalLayout {
// view update codes.
}
MainUi.kt

Anko

Anko
・Dialog or PopupWindowを使う
・layout.xmlに定義し、tooltip layoutをvisible, gone
・別のxmlを作り、必要に応じて動的に <include>
考えられる実装⽅法

Anko
ToolTipLayout.kt
fun ViewManager.toolTipLayout() =
verticalLayout {
gravity = Gravity.CENTER_VERTICAL
textView(R.style.ToolTipDescriptionStyle) {
text = "This is ToolTip Layout!"
}
... // more tool tip views.
}

Anko
ToolTipLayout.kt
fun ViewManager.toolTipLayout() =
verticalLayout {
gravity = Gravity.CENTER_VERTICAL
textView(R.style.ToolTipDescriptionStyle) {
text = "This is ToolTip Layout!"
}
... // more tool tip views.
}
frameLayout {
... // main views.
if (shouldShowToolTip) {
toolTipLayout()
}
StickerListUi.kt

Anko
・Custom Layoutを作ったり使ったりすることが簡単
・Xml parsingが必要ないので早い
・Business logicとui codeを分離しやすい
Pros

Anko
・Custom Layoutを作ったり使ったりすることが簡単
・Xml parsingが必要ないので早い
・Business logicとui codeを分離しやすい
Pros
・DSLなので学習コストがある
・data binding libaryをサポートしてない
・constraintlayoutをサポートしてない
Cons

Anko Preview (Android Studio 2.4+)

LINE Creators Studio Androidのアプリ設計
ButtonのClick Eventを変更しましょう

1. 変更したい画⾯のactivityを探す

1.変更したい画⾯のactivityを探す
2.Activityからlayout xmlを探してxmlを確認する

3.変更したいボタンのidを覚えてactivityに戻る

4.Activityで覚えたidとbindingされてるviewを探す

4.Activityで覚えたidとbindingされてるviewを探す
5.Viewのclick listenerを探してeventを変更する

ButtonのClick Eventを変更しましょう with anko

2.Activityからui componentを探す

1.変更したい画⾯のActivityを探す
2.Activityからui componentを探す
3.Ui componentの中でviewを探し、click eventを変更する
(click listenerはviewと⼀緒にあるので探す必要はありません)

Activity / Fragment

Ui Component
Activity / Fragment

Ui Component
Activity / Fragment
Repository Realm

User interaction
Ui Component
Activity / Fragment
Repository Realm

var profileLayout : ProfileLayout
frameLayout {
button {
text = "save button"
}.onClick {
onwer.save(profile)
}
profileLayout = profileLayout()
}
fun updateLayout(profile: Profile) {
profileLayout.set(profile)
}
UserProfileUi.kt

var profileLayout : ProfileLayout
frameLayout {
button {
text = "save button"
}.onClick {
onwer.save(profile)
}
profileLayout = profileLayout()
}
fun updateLayout(profile: Profile) {
profileLayout.set(profile)
}
UserProfileUi.kt
var ui : UserProfileUi
fun save(profile: Profile) {
profileRepository.save(profile)
}
fun load() {
profileRepository.load()
.subscribe(ui.updateLayout(it))
}
UserProfileActivity.kt

・Layout, user interaction -> ui component
・Activity, fragment -> lifecycle管理, 窓⼝役割
・Business logic -> repository
ここまでのまとめ

AndroidでUIテスト⾃動化 with Firebase Test
Lab
・ LINE Creators Studio AndroidはAndroid 4.1からサポートしています
・端末種類やOS version依存のbugが多い
・たくさんの端末を⼿動で確認するのはコストがかかりすぎる
背景

Lab
・テストコードを書いといたら（あるいは書かない）
やりたいこと

Lab
・コードの変更があった時に
やりたいこと

Lab
・いろんな端末とOSで
やりたいこと

Lab
・いろんな端末とOSで
・⾃動的にテストして欲しい！！！
やりたいこと

Lab
・テストコードを書いといたら（あるいは書かない）- espressoで書く(あるいはroboテスト)
やるぞ！

Lab
・コードの変更があった時に - Githubに新しいPull Requestが来たら
やるぞ！

Lab
・いろんな端末とOSで - ざっくり４４個の端末、api level 18~26までサポート
やるぞ！

Lab
・いろんな端末とOSで - ざっくり４４個の端末、api level 18~26までサポート
・⾃動的にテストしてくれてます！ - Jenkinsでビルド
やるぞ！

Lab
・正直全ての画⾯に対してUIテストを書くのは難しいと思います
テストコードについて

Lab
・正直全ての画⾯に対してUIテストを書くのは難しいと思います
・たとえすごく頑張って全画⾯に書いたとしても画⾯の変更があったらテストコードも変更しないとい
けないのでメンテコストがたくさんかかりますね
テストコードについて

Lab
テストコードの優先順位を決めましょう

Lab
1.お⾦にかかわる画⾯（決済画⾯や購⼊画⾯)

Lab
1.お⾦に関わる画⾯（決済画⾯や購⼊画⾯)
2.データ(状態)によってUIが変わる画⾯
- コードの変更によってバグが発⽣する可能性が⾼いです

Lab
・Firebase test labのroboテストから使ってみてください
・テストコードなしで動きます
・いつも同じフローでテストしてくれます
・Edittextなどに任意のテキストを⼊れることも可能です
・テストの様⼦を画像や動画が⾒ることもできます
テストコード書く時間なんてないよ、、

⽬指そう！バグのないアプリ！
(実現出来るとは⾔っていない)
発表は以上となります。
ご清聴ありがとうございました。

Line Creators Studio Android With Kotlin

Recommended

More Related Content

What's hot (20)

Similar to Line Creators Studio Android With Kotlin (20)

More from LINE Corporation (20)

Recently uploaded (7)

Line Creators Studio Android With Kotlin