0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Flutter × Gemini チャットアプリ開発

0
Posted at

アブストラクト

新しく学んだ

  • Future Type
  • HTTP/API
  • Riverpod
    • Riverpod Generator
    • Riverpod Annotation
  • Freezed
    • Freezed Annotation
  • Hooks
  • HookConsumerWidget

のチュートリアルにチャレンジした.

したいこと

ユーザーが任意の質問をGeminiAIに投げかけることができるアプリの開発

したいこと2

新しく学んだやつを使いたい

解決法

  • ルビーDogさんのRiverpod動画を見る
  • ルビーDogさんのFreezed動画を見る
  • ルビーDogさんのHooks動画を見る
  • ルビーDogさんのFuture Type動画を見る
  • Geminiと壁打ちする
  • したいことの解像度を上げる
  • 使った技術の組み合わせ方を考える
  • 実験しつつ・実装する
    • 関数の引き渡しどうやるんだろう
    • Widget間での情報共有はファイル分けちゃったらどうしたらいいんだろう
    • 共通のデータクラス作るのは疎結合とは言えないから使えないな
    • どうやって文字をWrapするんだろう
      • MediaQuery.of(context).sizeで画面サイズ情報が全部取れる
    • Future型の使い方
      • なにをReturnすればいいの
      • Stream型と何が違うの
      • async/awaitのヒウ要請

成果物

Keep

  • 宣言的UIを使ってチャット画面の構築
  • Hooksを使って簡潔な状態管理の実現(useTextEditingController)
  • Riverpodを用いたチャット内容の保持
  • データクラスの構築(Message)
    • Freezedを使ったファクトリーコンストラクタの設定や共通のコード生成
  • Widget間でのコンストラクタを使った値の引き渡し
    • VoidCallBack関数やTextEditingControllerの引き渡し
  • Widgetのクラス切り出し
  • ADBモードを使った実機でのデバック
  • dotenvを使った環境変数の取得
  • assetsを使ったコンパイル
  • Future型を使った外部APIとの通信
  • 宣言的プログラミングらしく,ロジックを完全分離した設計

Problem

  • 実際の開発に近い,決められたデザインでのUI設計・配置
  • HTTPパッケージを使った低レイヤーでのマッパーなし実装
  • 画面遷移の実装
  • useEffectの使用
  • デザインパターンの摘要

Try

  • 赤黒白を基調としたUI設計
    • 背景画像の差し込み
    • 動画の再生
    • AnimationControllerの使用
  • Firebase Authenticationによるユーザー認証
  • Firebase Hostingを使ったデプロイ
  • 画面遷移が必要となる中規模アプリの設計・実装
  • GitHubを使った一人中規模開発(複数人を想定した)
  • HTTP層を使ったRESTAPIの通信方法の実装
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?