MIT App Inventorでの生成AIを搭載したアプリをつくってみたぁ（対話型Google検索お助けアプリの開発）

## はじめに
AIって機能も付いているので，最新の情報を収集することができます．これをMIT App Inventorで扱います．
MIT App InventorでChatBotを利用したアプリを作成したので，メモとしてここにまとめました．

:::note info
**参考にしたサイト**
Gemini公式ドキュメントをもとに開発しました．
[Grounding with Google Search](https://ai.google.dev/gemini-api/docs/grounding?lang=rest)
:::

## アプリ概要
調べたいことをAIに質問します．それについての解答をAIが返します．この返答にはURLも含まれておる，カフェのサイトや数学の解き方のサイトなど質問にたいする適したリンクが含まれます．また，対話型AIなので質問に対して深堀ができます．
例えば，
1. ユーザー；カフェに行きたい
1. Gemini：いくつかカフェを提案＆どんなカフェ？
1. ユーザー：落ち着いていてゆっくりできるカフェがいい！
1. Gemini：適したカフェを提案＆リンクの提供
こんな風に人間と会話しているような感覚で調べものができるようになります！！！

:::note info
**主な技術**
**Grounding with Google Search**
GeminiでGoogle検索を行う
[Gemini公式ドキュメント　Grounding with Google Search](https://ai.google.dev/gemini-api/docs/grounding?lang=rest)

**Build an interactive chat**
対話型でGeminiに質問を行う
[Gemini公式ドキュメント　Build an interactive chat](https://ai.google.dev/gemini-api/docs/text-generation?lang=rest#chat)
:::

## interactive chatについて
ここでは対話型のGeminiを使用しています．
[MIT App InventorからGenimiを使用する方法（interactive chat）](https://qiita.com/aaaxxx___abc/items/3e1bf1c23b0960cdc765)

## デザイナー画面
![スクリーンショット 2025-03-15 003029.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/6a066c81-3980-4fae-a5de-77510b8f1ccc.png)

一つのScreenでVerticalArrangement２つ使用して表示・非表示を場合分けを行っています．
### VerticalArrangement_gemini
質問の入力，回答の表示画面．
|機能|内容|
|:-:|:-:|
|VerticalScrollArrangement1|Label_text, ListView1, Label_responsText, Label_Historyを含む|
|Label_text|Geminiからの解答|
|ListView1|Geminiが出力したURLのTitle|
|Label_responsText|Geminiからのresponseを表示（エラー時に利用）|
|Label_History|Button_viewHistoryクリック時に今までの対話の履歴を表示|
|HorizontalArrangement2|CircularProgress1, Button_viewHistory, Button_Resetを含む|
|CircularProgress1|Geminiのレスポンス待ち時間に表示するクルクル|
|Button_viewHistory|対話履歴の表示|
|Button_Reset|リセット|
|Label1|表示テキスト「・質問」|
|HorizontalArrangement1|TextBox_question, Button_sendを含む|
|TextBox_question|質問の入力|
|Button_send|質問送信ボタン|

### VerticalArrangement_jumpURL
|機能|内容|
|:-:|:-:|
|WebViewer1|ListViewでサイトを選択したらここに表示|
|Button_戻る|VerticalArrangement_jumpURLを閉じて，VerticalArrangement_geminiを表示する|

## ブロック画面
### 変数
#### apukey
ご自身のキーを入れます．
![blocks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/49ee4eac-25a2-4aa3-8981-dadec6dc00e1.png)

#### url
GeminiへアクセスするURL
```
https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=
```
![blocks (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/2942733e-5e24-4ccb-a5f1-463bf34796cf.png)

#### history
対話型でGeminiを使用するためにチャットの履歴を残す際につかう変数
![blocks (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/398ff416-f17e-47fb-9cdc-ae96ea207fce.png)

### text_info
Geminiからのレスポンスを格納する
![blocks (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/a2fb075b-eedd-4e39-82f7-c8ed66a115ec.png)

#### url_info
Geminiが出力したURLを格納する
![blocks (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/efd965b1-0b9d-4172-b9a8-882b91bbb832.png)

#### WebTitle_info
Geminiが出力したURLのタイトルを格納する
![blocks (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/e7ec2b1e-0ab5-490c-8519-9f8f6e81570f.png)

### when Screen1. Initialize
スクリーン表示時に，TinyDBに保存しているGeminiとの履歴を取得する．
VerticalArrangement_jumpURLを非表示，VerticalArrangement_geminiを表示する．
![blocks (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/739a6fae-42ac-43b4-be2c-f87b08175ddc.png)

### when Button_viewHistory
Geminiとのチャット履歴を表示する．
![blocks (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/e93d41b3-4876-4df8-8e07-745de2bbf706.png)

### when Button_send. Click
Geminiに質問を送信する．
![blocks (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/2e59958d-75c5-4d6c-a9f0-1926b63a053d.png)

### when Web1. GotText
Geminiからのレスポンスの処理する，
![blocks (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/9c4d2e6a-01b9-424a-92b2-dfd5ac83636e.png)

### when ListView1. AfterPicking
サイトのタイトルをクリックしたら，webviewerでそれを表示する．
![blocks (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/2a1c01ac-aadf-4ae9-af60-242334284b86.png)

### when Button_戻る. Click
webviewerを閉じる．
![blocks (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/9c12ad2a-f432-48d0-af6c-cc76dd549b58.png)

## 実行結果
質問中の画面，クルクル
![Screenshot_20250315-190914.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/ad649447-416a-47c8-91fc-f22aa369fb86.png)

回答
![Screenshot_20250315-190926.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/cd789399-a5fd-4888-950b-a9fd21a4e47e.png)

リンクもあります
![Screenshot_20250315-191100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/a02fd63f-c536-4583-bb97-c04e4ddbb3b9.png)

もう一度質問すると，前回の質問に合わせた回答が返ってきます．
![Screenshot_20250315-191001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/6dbdb074-ebd7-472e-b4a6-0d08591c27cc.png)

## おわりに
ノーコードでここまで作れるの楽しすぎる！