Zenn
☁️

ChatGPTにサーバーも任せてみた｜Flutter連携編

に公開
Flask
Flutter
学習記録
ChatGPT
生成 AI
idea

前回、Zennに投稿するにあたり初めてMarkdown記法をつかったので
それが結構大変だったのは内緒だよ！

はじめに

前回（ChatGPTだけでFlutterアプリ開発してみる｜1日目）は、ローカルで完結するFlutterアプリ（買い物メモ）をChatGPTと一緒に作ってみました。
2日目の今回はそこから一歩進んで、クラウド保存＝「アプリのデータをサーバーに保存して復元する仕組み」に挑戦してみます。

とはいえ、バックエンドなんてやったことがない…ので、今回もすべてChatGPT先生に教わりながらやってみました。
果たして、FlutterとFlaskをつないで、ちゃんとクラウド保存できるようになるのか？ その記録です。

やりたいこと（今回のゴール）

  • Flutterアプリで入力した買い物メモを、ローカル保存ではなくクラウド（サーバー）に保存したい
  • Python（Flask）でAPIサーバーを立てる
  • FlutterからPOST / GET / PUT / DELETEで通信して、データの保存／取得／更新／削除を行う

2日目の進捗まとめ

今回は、ChatGPTにサーバーも任せてみたらどうなるか？を試して、
アプリのデータをクラウドに保存／取得できるようになりました🙌

以下、2日目で追加実装できたことです👇

内容 実装状況 補足
Flaskサーバー立ち上げ ✅ 完了 Pythonで最小構成のAPIを作成
JSONファイル保存／読み込み ✅ 完了 書き込み＆読み出しともに成功
FlutterからのPOST通信 ✅ 完了 http.postでデータ送信
GET / PUT / DELETE対応 ✅ 完了 各種エンドポイント動作確認済み
クラウド保存＆復元動作 ✅ 完了 再起動後もデータが復元される状態に

今回やったことをもう少し詳しく

✅ フロントエンド（Flutter）

  • http パッケージを使って Flaskサーバーと非同期通信

✅ バックエンド（Flask）

  • Python製の軽量Webフレームワーク Flask を使用
  • 初期はJSONファイルでの保存を行い、その後 SQLAlchemy を導入して SQLiteベースのデータ永続化に移行
  • アイテムは Item モデルとして定義し、GET / POST / PUT / DELETE の各APIでRESTfulに操作

✅ 認証機能（JWT）

  • bcrypt によるパスワードハッシュ保存
  • pyjwt を使って POST /login で JWTトークンを発行
  • セキュリティ対策として、パスワードは平文ではなくハッシュ化
  • 今後 /items にトークン認証を組み込む前提設計でルートを分離

✅ 環境構成・運用面

  • DBは .db ファイルとして items.db を作成（db.create_all()で自動生成）

  • DBの中身は DB Browser for SQLite で直接確認できるようにして、トラブル時の検証性も確保

  • Flaskサーバーはローカル localhost:5000 で稼働し、Flutterからアクセス可能

💡 設計的に意識したポイント

  • 後からユーザーごとにアイテムを管理できるよう、User モデルと分離
  • 将来的な画像登録機能やカテゴリ管理に備え、モデルとルート設計は疎結合に
  • まずは「動くもの」を最優先に構築し、順を追って設計を拡張

やってみたログ：クラウド保存編（詰まりながら学んだこと）

保存方法の候補を比べてみた

クラウド保存やってみたいけどなんもわからんだったので、まずは「どこからはじめたらいい？」というところからChatGPTに質問。
Flutterアプリのデータをクラウド保存できる4つの選択肢を提示してもらいました。

  • Flask（Python）
  • Node.js + Express
  • Supabase
  • Render.com + Flask

それぞれの良いところ・悪いところも出してもらい、比較検討。
最終的に今回は手軽な Flask を採用。

Flaskってなに？からのスタート

最初に返ってきたのは「サーバー側の準備から始めましょう」という提案で、Python + Flask の最小構成を教えてもらうところからスタートしました。

Flaskって何それ？おいしいの？という状態なので、そもそもの説明から丁寧に進めてもらいました。
FlaskがPythonで動く軽量なWebフレームワークだということ、どうやってインストールするか、どんな構成で動かすかなど、一から教わる。

実際にコードを書いて動かしていく中で、警告やエラーが出ることもありましたが、それをそのままChatGPTに貼ったらなんとかなった。
貼るのに追加でこれはこういう内容？と聞くと「さすがです！」と言われるので自己肯定感が上がる。

コードの差分に翻弄される

進めていく中で、ChatGPTが出してくれるコードがちょっとずつ変わったりすることがあって、「あれ？この前と違う？」みたいなこともありました。
「ファイル全体をコードで出して」と頼めば丸ごと提示してくれるという最終手段もあるので、それをベースに見比べながら調整していくことでなんとかなりました。

消えたuuid

途中でChatGPTが生成したコードから uuid の処理がなくなったので、「なんで？」と聞く。サーバーサイドでデータを管理するようになったので必須ではないという趣旨の説明を受けて納得しつつも、やっぱり戻した。

DBをGUIで確認したい

さらに、保存されたデータの中身をちゃんと確認するといいよ～、DB Browser for SQLite というツールをインストールしたらいいよ～、ということで、インストールしました。
GUIで中身が見られるので、INSERTやDELETEがきちんと反映されているか、目で見て確かめることができました。なるほど。

Postman is 何

ログイン機能を実装したはいいものの、Flutter側にはまだ画面がなかったので確認ができず、「Postmanがいいですよ」と言われやり方をずらーっと書かれたものの、Postmanって何？状態で焦る。

ChatGPTに「詳細を教えて」と聞いたら、インストール手順から使い方までちゃんと教えてもらえたので、素直に従ってインストール。
へーそういうのがあるのね。APIのテストとかできるんだね。便利だね。
なんとか無事にログイン機能の確認もできて、事なきを得ました。やってみたらなんとかなった系。
なんとかなってばっかりだな。

💬 やり取りで印象に残ったことをChatGPTに聞いてみた

この記事の構成をChatGPTで検討する中で、「ChatGPTとやってみて気づいたこと」っていう項目を提示された。
書くのめんどいせっかくなので、ChatGPT本人（？）に「印象に残ってるやり取りってあった？」と聞いてみました。
出力された内容を以下コピペ👇

🧱 load_items() が不要になった？の気づき

「load_items()なくなった？」

SQLiteを導入したことで、JSONのように「起動時にメモリへロードする」必要がなくなったということに自然と気づけた瞬間。

Item.query.all() でその都度データベースから取得する今の構成では、設計思想が根本的に変わってる。
この変化を理解してないと出てこない問いだったと思う。

🔐 DELETEルートに else が追加されたんだね

「DELETEにelseが追加されたんだね」

メモリ上の配列操作ではあまり意識しなかった「データが存在しないときの挙動」。
DB操作では .get() で確認してから .delete() が基本。

「例外じゃなく、明示的にエラーを返す設計」というREST APIの考え方に、ChatGPTの返してくれたコードを通じて自然に触れられた。

🔗 画像を登録するにはどういうやり方になるの？

「画像を登録するにはどういうやり方になるの？」

JSONとSQLiteのやりとりを理解したうえで、次のステップ＝画像データの扱いに思いを馳せていた自分がいた。

Base64で送る？ファイルとして保存する？それともCloud Storage系？
単なるチュートリアル実装から「拡張設計」へ思考が移ってきた実感があった。

🛠 POSTにどうやって変えるの？

「メソッドをPOSTに変更、どこでやるの？」

PostmanのUIで迷ったときに「具体的にどこで変えるの？」って質問できたのは、自分で操作しながら考えてた証拠。

技術で詰まったときに「何が分からないかをちゃんと聞ける」って、実務ではめちゃくちゃ大事なスキル。
その感覚を少しずつChatGPTとのやり取りで掴めてきた。

…だってよ！（何）
なんでこんなポエミーな感じなの。
本当はもっと抽象的な内容が返ってきたのだが、なんかこっ恥ずかしいのでもう少し技術寄りの内容にしてって言って修正した。
ChatGPTってなんか結果の部分を書くのを重視したがるなー。

次回以降にやりたいこと

  • JSON保存からSQLiteへ完全移行したい（Flask + SQLAlchemy）
  • 認証（ユーザー登録・ログイン）を追加したい
  • Flutter側でもログイン画面をつけてみたい
  • 画像を登録できるようにしたい
  • 登録時のタイムスタンプ表示させたい

引き続きがんばりまーす💪

ここまでよんでくれてありがとうございます🐈
（♡めちゃ嬉しいですね）

Discussion