Zenn
🙌

【提出物】flutter_app_creater

に公開
AI
Flutter
idea

プロジェクト名

flutter_app_creater

はじめに

本プロジェクトは、日頃からFlutterを用いたアプリケーション開発に取り組むエンジニアやデザイナー、さらにはプログラミングにあまり精通していない一般ユーザーを主な対象ユーザーとしています。AI技術を活用して、コード生成やデザインの微調整といった開発プロセスの自動化を目指すユーザー層に向けたシステムとなります。

https://youtu.be/jfCEHR_vVmg

現在アプリケーション開発はAndroid StudioやGoogle AI StudioなどでLLM(大規模言語モデル)を使用して開発を行っています。しかし開発環境用のエディタやWebブラウザがメインの開発となっており、プロダクトがメインになった開発になっておりません。そこでデスクトップアプリもモバイルアプリも両方の開発が可能なFlutterを用いて、Flutter製のデスクトップアプリ上からFlutter製のモバイルアプリを、AIがソースコードを作成、修正していき、ソースコードを見なくてもアプリ開発ができないだろうか、と考えました。

本システムの大きな特徴は、ユーザーインターフェースの一体感にあります。従来のLLM支援型開発ツールは、開発環境、実機ないしエミュレタ、さらにブラウザを行き来する操作性の悪さがありました。本プロジェクトでは、デスクトップアプリケーションを中心とした一貫したUI設計により、ユーザーがシームレスに指示を入力し、即座に結果を確認できる環境を提供します。

また本システムは開発の自動化と効率化を実現するための仕組みも搭載しています。ユーザーが自然言語で「○○をこう変更してほしい」と指示するだけで、システムは自動的にコードの変更点を生成し、エラーチェックを経て正しい状態にまで自動修正します。これにより、プログラミングに不慣れなユーザーでも、直感的な対話を通じてアプリケーションの微修正や新機能の追加が可能となり、従来の複雑な開発工程を大幅に簡素化できる部分も出ています。

また本システムは、ですくFlutterアプリでFlutterアプリを作成できるか、というFlutter好きの以前からの疑問に関する実験的な試みも兼ねてます。

今後の展望

時間的な制約のため現在実装できなかったことが多くあります。

自然言語による指示入力によるコード生成・修正プロセスで、AIとの対話でシステムが開発する予定です。ユーザーはキーボード入力だけでなく、音声を通じて直感的に指示を出し、リアルタイムにコードの生成・修正結果を得ることができる環境が実現される予定です。

現在はFlutterアプリの修正だけですが、LLMの汎用性を生かしてアプリ開発がしたい。誰が何のためにアプリを作成するのか、などのヒアリングから始めて、アプリのイメージや設計書の作成も行えるようにLLMのプロンプトを作成し、アプリ開発と連動するようにしたい。ちゃんと動作するアプリとなるとバックエンドとのやりとりが必要になるので、完璧に仕上げるのは難しいと思いますが、プロトタイプの作成はできるかと考えてます。

まだ単一クラスが一つのファイルにある状態でしか実験できていないので、複数ファイルでも動作することの確認と修正を行っていきたい。RAGを使用し、自分のプロジェクトで使用するプログラムをテンプレートとして設定できるようにしたい。

また、現在は手動で実施しているホットリロードのプロセスも、自動トリガー機能を開発等、更新作業の自動化を行い、自然な開発体験の実現を目指してます。Flutterの開発環境にも調査し、エディタなしで開発ができるようにしていきたいです。(ホットリロードはエディタや起動コマンドの機能のようで、アプリ内部から更新する方法を見つけられず)

システム概要

システムは、主に以下の3つのFlutterプロジェクトによって構成されています。

  • 開発アプリ、デスクトップアプリはFlutter製でローカルPC(Windows, Mac, Linuxを予定)で動作します。
  • WebAPIサーバはdart_frogで開発し、Cloud Run上で動作してます。 (dart_frog: Flutterでも使われているDart言語を用いたシンプルかつ高性能なWebサーバーやAPIを構築するための軽量フレームワーク)

システム構成図（ブロック図）

１．デスクトップアプリ
　　このプロジェクトは、ユーザーからの指示を受け付けるフロントエンドとして動作します。ユーザーは、このアプリケーション上で直接、修正内容や機能追加の指示を自然言語で入力することが可能です。また、画面内にはスマートフォンの画面が組み込まれており、修正結果が実際のモバイルアプリの画面として表示される仕組みとなっています。

２．開発アプリ
　　これは、実際にユーザーの指示に基づいてコードが変更され、最終的に動作するアプリケーション本体です。初期状態はFlutter開発者にはお馴染みのカウントアップアプリがベースプロジェクトとなっており、ここにユーザーからの指示によりコード修正が加えられていきます。
Flutterのホットリロード機能は、現状自動ではトリガーできないため、最終的な画面反映の際には手動でホットリロードを実施する必要があります。

３．WebAPIサーバ
　　こちらは、デスクトップアプリから受け取ったユーザー指示を一旦受け付け、内部でLLM（Gemini API in Vertex AI を使用）への問い合わせを行う役割を担っています。直接Flutter上にLLMのWeb APIキーを保持することはセキュリティ上問題があるため、この構成により、キーの安全性が確保されています。
SecurityManagerを使用しており、安全にキーが保存されていると考えております。

ワークフロー

システム全体のワークフローは、以下のような流れとなります。

  • ユーザーはデスクトップアプリ上で開発アプリの修正指示を入力します。
  • 開発アプリのソースコードを一時保存領域にコピーして、ビルドエラーが出ないことを確認する(エラー発生時の事は後述と同じ)
  • 開発アプリの修正指示は、Cloud Run上のWebAPIにPOSTリクエストとして送信され、そこでLLMへの問い合わせが行われます。
  • LLMから返された回答は、再びデスクトップアプリに戻されます
  • 受け取った結果は一時保存領域に展開され開発アプリのビルドに問題がないことの確認が行われます。
  • もしビルドエラーが発生した場合は、そのエラーメッセージと該当するソースコードの箇所がLLMに再送信され、エラー修正されたコードが生成が行われます。
  • ビルドが正常に通過するまでこのプロセスを繰り返すことで、最終的に正しいコードが生成されます。
  • ビルドが通過したファイルは、開発アプリのプロジェクトにコピーされ、ユーザーが手動でホットロードを実施することにより、画面のスマホ上で画面更新が確認できる仕組みです。

データのやりとり（シーケンス図）
各処理ステップでのデータフローと処理の流れを時系列で示しています。

開発プロジェクト条件

  1. Google Cloud のAIプロダクトのうち、少なくとも1つを使用
    Gemini API in Vertex AI
  2. Google Cloudコンピュート プロダクトのうち、少なくとも1つを使用
    Cloud Run
  3. ＊オプショナル : Flutter、Firebase、Android を使用する
    Flutter

リソース

テストと審査用のプロジェクトのコードリポジトリの URL
https://github.com/xaatw0/flutter_app_creator_project

動作確認

Windows での fltuter 3.27.0で動作確認
macで動作せず(Directory.currentの挙動がWindowsと異なり、対応が間に合わず)

  • コマンドライン
    git clone https://github.com/xaatw0/flutter_app_creator_project.git
    cd flutter_app_creator_project\packages\flutter_app_creator
    flutter pub get
    (Windows) flutter run -d windows

  • アプリケーション上
    テキスト欄に修正内容(「テーマカラーを青にして」など)を入れて送信
    スマホ画面で円形ローディングインジケーターが表示される
    しばらくすると、円形ローディングインジケーターが消えて、以前のスマホ画面に戻る

  • エディタないしコマンドライン
    ホットリロードを実行する
    エディタ:「HotReload」ボタンを押す
    コマンドライン:「r」を押す

Discussion