Appearance
家計簿アプリ
当日までに アプリ起動 を完了、以下を目指していただく。
GitHub - YujiOnishi/flutter_api_handson: flutter_api_handson
flutter_api_handson. Contribute to YujiOnishi/flutter_api_handson development by creating an account on GitHub.
GitHub
開発環境に必要なもの一覧
Android Studio
プログラムを書くために必要
Flutter
モバイルアプリを作成するために必要
Flutter SDK のダウンロード
Mac OS をお使いの方は、
※ リンク切れなら こちら の指示に従ってSDKをダウンロードしてください
Windows をお使いの方は、
※ リンク切れなら こちら の指示に従ってSDKをダウンロードしてください
Flutter 環境構築
環境構築する場合は Flutter環境構築 を確認しましょう。
※ Flutter で Android のシミュレータが確認できる方は Flutter の項目を飛ばしてください。
アプリ起動
- フォルダ作成
- プロジェクト作成
- エミュレータ起動
- アプリ起動
1. フォルダ作成
1.1 デスクトップに hands_on フォルダを作成。
2. プロジェクト作成
2.1 AndroidStudio を起動し、「Start a new Flutter project」を選択。
2.2 Flutter Application
を選択し、Next を押下。
2.3 Configure the new Flutter application
の Project name を flutter_api_handson
へ変更。
2.4 Configure the new Flutter application
の Project location を任意のフォルダに変更。
2.5 Set the package name
はそのまま Finish
を押下して main.dart のコードが表示されれば成功です。
3. エミュレータ起動
3.1 AndroidStudio で flutter_api_handson
フォルダを開く。 (プロジェクト作成直後なら自動で開いているはず)
3.2 AVD マネージャーから作成したエミュレータを起動する。
4. アプリ起動
4.1 上部の再生ボタンを押下しアプリを起動。 (結構時間がかかります)
4.2 アプリが無事起動できたら完了です。ボタンを触って動かしたりなど、ウォーミングアップをしていただけると幸いです。
配信動画
2021/10/02 オンラインで開催した Flutter Handson Osaka #9 で当日配信した動画はこちらからご覧になれます。レジュメ と 解説書 を合わせてご確認いただければ。
1. 1章
2. 2章
3. 3章
4. 4章
困ったら
補足
API サーバ
家計簿アプリを製作する上で以下技術スタックを利用している。
- 簡易 DB に Google Spreadsheet
- それと接続するエンドポイントに Google Apps Script
詳しくは API サーバの リポジトリ をご確認いただければ幸いです。