Android Studio Giraffe | 2022.3.1 の dependencies の揃え方

Android Studio Giraffe | 2022.3.1 の dependencies の揃え方Android Studio Giraffe | 2022.3.1 の dependencies の揃え方

Version Catalog + libs.versions.toml で説明します。

まず最初に、Android GradlePlugin と API バージョンを確認します。


👉 Android Studio Flamingo | 2022.2.1  |  Android Developers hatena-bookmark


Giraffe | 2022.3.1	
AGP 8.1	
API  33

これから、


com.android.tools.build.gradle-8.1.0

👉 Google's Maven Repository hatena-bookmark


# libs.versions.toml

[versions]
android-gradle-plugin = "8.1.0"

[plugins]
android-application = { id = "com.android.application", version.ref = "android-gradle-plugin" }

と


// build.gradle (root)

android {
  def sdkVersion = 33

  compileSdk sdkVersion
  defaultConfig {
    targetSdk sdkVersion
  }
}

が決まります。

また、Kotlin のバージョンを 1.9.0 にあげることができるので、

Android Studio Giraffe | 2022.3.1 の dependencies の揃え方
👉 Compose to Kotlin Compatibility Map  |  Android Developers hatena-bookmark

Compose Compiler のバージョンも 1.5.0 にあげることができました。

 

◾️ まとめ

大きいところで以下の3つをアップグレードすることができました。


[versions]

android-gradle-plugin = "8.1.0"

kotlin = "1.9.0"

compose-compiler = "1.5.0"

少し触った雰囲気、Android Studio Giraffe は、かなり起動やビルド時間が短くなっているように感じます。

👉 【Plugin DSL】Android Gradle Plugin のバージョンを調べる方法 hatena-bookmark
👉 【Plugin DSL】「com.android.tools.build:gradle」の記述は不要? hatena-bookmark


【OpenAI】Kotlin OkHttp で Server-Sent Events (SSE)

ChatGPT API で stream 受信したいですよね。

stream　boolean　Optional　Defaults to false

If set, partial message deltas will be sent, like in ChatGPT. Tokens will be sent as data-only server-sent events as they become available, with the stream terminated by a data: [DONE] message.

👉 API Reference - OpenAI API hatena-bookmark

簡単にできそうなのでやってみました。

 

📡 curl

curl で簡単に取得できる。


curl "https://api.openai.com/v1/chat/completions" \
  -H "accept: text/event-stream" \
  -H "authorization: Bearer $OPENAI_API_KEY" \
  -H "content-type: application/json" \
  -d '{
    "model": "gpt-3.5-turbo",
    "messages": [{"role": "user", "content": "Server-Sent Events とは"}],
    "stream": true
  }'




...

data: {"id":"chatcmpl-7OQ1xuBFfam8Ct","object":"chat.completion.chunk","created":1686054286,"model":"gpt-3.5-turbo","choices":[{"delta":{"content":"て"},"index":0,"finish_reason":null}]}

data: {"id":"chatcmpl-7OQ1xuBFfam8Ct","object":"chat.completion.chunk","created":1686054286,"model":"gpt-3.5-turbo","choices":[{"delta":{"content":"います"},"index":0,"finish_reason":null}]}

data: {"id":"chatcmpl-7OQ1xuBFfam8Ct","object":"chat.completion.chunk","created":1686054286,"model":"gpt-3.5-turbo","choices":[{"delta":{"content":"。"},"index":0,"finish_reason":null}]}

data: {"id":"chatcmpl-7OQ1xuBFfam8Ct","object":"chat.completion.chunk","created":1686054286,"model":"gpt-3.5-turbo","choices":[{"delta":{},"index":0,"finish_reason":"stop"}]}

data: [DONE]

パースはだるそうですが、取得はできてるようです！

では、いざ、Kotlin で。

 

📡 okhttp-sse

壊れてるのか何なのか微妙。


testImplementation("com.squareup.okhttp3:okhttp-sse:4.11.0")

👉 okhttp/okhttp-sse at master · square/okhttp · GitHub hatena-bookmark

現在の安定版 4.11.0 ではあやしい。

5.0.0-alpha.11 ではまあまあ動いてるのでそれで。



SSEは、日本語で表現するとサーバ送信イベントと表現されるもので、サーバからクライアントに対してリアルタイムでイベントを送信することができる機能です。 コネクションを張っておいて、サーバからイベントを好きなタイミングで送れるイメージです

 

📡 まとめ

カンファレンスでの公演資料とか、時間が経つと、まあ動かないこと多いですよね！


👉 Server-Sent Events in Android (with Node.js) | by Rahul Ray | Jun, 2023 | ProAndroidDev hatena-bookmark

【Kotlin】ChatGPT のようなメッセージングアプリのスクロールする吹き出し部分にローディングインジケーターを実装する

 

🎞️ ローディングインジケーターの作成

まずは、簡単にテキストで「読み込み中」を表示するViewを作ります。

JetpackCompose なら簡単に実装できます。




こんな無限ループでさえ、Jetpack Compose はメモリーリークを起こしません。きちんと捨ててます。

上の動画内コードから抜粋。


  val texts = listOf("○○○", "️●○○", "️●●○", "️●●●", "️●●○", "️●○○")
  var dots by remember { mutableStateOf("") }

  LaunchedEffect(Unit) {
    while (true) {
      texts.indices.forEach { index ->
        delay(500)
        dots = texts[index]
      }
    }
  }

これを LazyColumn の item の表示に使います。

 

🎞️ Flow<List<Item>> の一時的な付け替え

まず、ローディング表示のよくあるパターン。

リクエストの開始時に _loading を true に、レスポンス取得時に false にすることで List<Item> を更新します。


private val _loading = MutableStateFlow(false)
val loading = _listening.asStateFlow()

val items: Flow<List<Item>> = _loading.flatMapLatest { loading ->
  repository.items
}

これを少し変更します。

List<Item> は、レスポンスが帰ってくるまで変化がないですが、この間にダミーの「読み込み中を表す Item」を最後に追加しておきます。

もちろん読み込みが終われば元に戻す。


val items: Flow<List<Item>> = _loading.flatMapLatest { loading ->
  repository.items.map { list ->
    list.toMutableList().apply {
      if (loading) add(dummyLoadingItem)
    }.toList()
  }
}

あとは、各メッセージを表示する Composable で Item を確認して表示を切り替えれば良いです。

 

🎞️ 出来上がり



👉 【Kotlin】Flow flatMap* を ネストするか チェインするか【coroutine】 hatena-bookmark