boy in green shirt
Photo by CDC on Pexels.com

【授業レポート】システム開発(3年) 第52週目

〜機能実装フェーズ:API・AI・UIをつなぎ「使える形」へ〜

第52週目は、最終プロジェクトの実装を一気に進め、
API連携・生成AI・UIを結合して“実際に使える機能”にするフェーズに入りました。

前週で整えた土台をもとに、
いよいよアプリが“それらしく動く”段階へ進んだ重要な回です。


■ 先生の導入:「今日は“つなぐ日”」

田中先生:「部品は揃いました。
今日はそれを“ユーザーが使える形”に組み上げます。
ただし、焦って構造を崩さないこと。」

先生は特に次の点を強調しました。

  • UIから直接API・AIを呼ばない
  • Service層にロジックを集中させる
  • エラー時の動作も同時に作る

■ 今日のゴール

  1. APIデータをServiceで加工してUIに渡す
  2. 生成AI機能を実際のユースケースに組み込む
  3. UIでユーザー操作ができる状態にする
  4. 正常系と異常系の基本動作を確認する

■ 実習①:APIデータをServiceで加工

まずはAPIから取得したデータを
そのままではなく、使いやすい形に変換しました。

例(イベントアプリ)

def get_events(self):
    data = self.api_client.fetch_events()

    return [
        {
            "title": item["name"],
            "date": item["date"],
            "summary": item["description"][:100]
        }
        for item in data
    ]

ポイント:

  • UIに渡すデータは最小限
  • API仕様をUIに漏らさない
  • 将来API変更に強くする

生徒A:「Serviceで整えるとUIがすごくシンプルになる」


■ 実習②:生成AI機能をユースケースに組み込む

次に、AI機能を実際の流れに組み込みました。

  • ニュース取得 → AI要約 → UI表示
  • 英文入力 → AI補助説明 → UI表示
def summarize_event(self, text):
    prompt = self.build_prompt(text)
    result = self.ai_client.generate(prompt)
    return self.validate(result)

生徒B:「“ただ呼ぶ”から“役に立つ機能”になった感じがする」


■ 実習③:UIとの接続

CLIや簡易Web画面で、
ユーザー操作と機能を接続。

例(CLI)

print("イベント一覧")
events = service.get_events()

for e in events:
    print(e["title"])

choice = input("詳細を見る番号:")

工夫した点:

  • 入力エラー対策
  • 分かりやすい表示
  • AI出力には注記をつける

■ 実習④:結合テスト(Integration)

ここで、全体を通した動作確認を実施。

チェック内容

  • APIが正常に取得できる
  • AIが動作する
  • UIで操作できる
  • エラー時に落ちない

発生した問題

  • API遅延で画面が止まる
  • AI出力が長すぎる
  • 入力エラーでクラッシュ

→ その場で修正しながら改善

生徒C:「単体では動いてたのに、つなぐと問題が出る!」


■ 実習⑤:フォールバック動作の確認

意図的に失敗を起こして確認。

  • APIを止める
  • AIを無効にする

確認したこと

  • システムが止まらないか
  • 代替表示が出るか

例:

※現在、AI要約は利用できません

生徒D:「“壊れない”のが一番大事だと実感」


■ クラス全体の気づき

  • 結合すると初めて見える問題が多い
  • Service設計の良し悪しが差になる
  • UIは“使いやすさ”が重要
  • AIは補助機能として扱うと安定する

■ 先生のまとめのひとこと

「今日で、皆さんのシステムは
“部品の集合”から
**“使えるアプリ”**に変わりました。

ここからは完成度を上げるフェーズです。

  • 分かりやすいか
  • 安定しているか
  • 安全か

この3つを意識して仕上げていきましょう。」


■ 宿題(次週に向けて)

  1. 主要ユースケースを1つ完成させる
  2. エラー処理を強化(最低3パターン)
  3. UIの改善点を3つ挙げる

■ 来週の予告:最終調整&発表準備

次週は、

  • バグ修正
  • UI改善
  • ドキュメント整備

を行い、
最終発表に向けた仕上げに入ります。


第52週目は、
プロジェクトが“実際に使える形”になった大きな節目でした。
生徒たちは、設計・実装・連携を一つにまとめ、
本格的なシステム開発の達成感を味わい始めています。

投稿者 greeden

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)