More than 1 year has passed since last update.

プログラミング初心者の医学生が残り少ない夏休みでGithubcopilotとchatGPTの力を借りてアプリ開発してみた Day6

Posted at 2023-08-25

これまでの経過

Day1(2023/08/20)
Day2(2023/08/21)
Day3(2023/08/22)
Day4(2023/08/23)
Day5(2023/08/24)
- 1. アイデアと計画
- 2. DartとFlutterの学習
- 3. 開発環境のセットアップ
- 4. デザインと開発
- 5. テスト
- 6. UIとUXの改善
- 7. アプリアイコンとアセット
- 8. ローカライゼーション
- 9. バックエンドとAPI
- 10. ベータテスト
- 11. App StoreとGoogle Playの開発者アカウント
- 12. アプリの提出
- 13. アプリレビュープロセス
- 14. アプリのリリース
- 15. マーケティングとプロモーション
- 16. モニタリングとアップデート

Day6(2023/08/25)

4. Design and Developmen

Construct app UI with Flutter widgets. Develop app functions according to the plan. Rigorously test for bugs during development.

今日から本格的にアプリ開発に入る予定であったが，色々なQiita記事を見ていると基本的なことを学習してからアプリ開発に取り掛かる方がいいような気がしてきた．以下，短期間でアプリリリースされた方を二名紹介する．

一人目の方は私と同じような境遇で，私がやろうとしていることをたった4日でやられた方．

二人目の方は一通り基礎を学習されてアプリリリース

二人目の方は

Flutter & Dart - The Complete Guide [2023 Edition]

The Complete Flutter Development Bootcamp with Dart

これら2つのコースを購入されて，下のコースを６日間で学習されたそう．

アプリを１つ作って終わりにするなら最初の方のやり方，アプリを作った後もアプリ開発を続けていくなら二人目の方のやり方が良さそうで，自分には二人目の方のやり方のほうがあっているような気がしたので，最初の予定よりは時間がかかりそうではありますが，一度これら２つのコースを購入して基礎を勉強したいと思います．

昨日までのようにやみくもにやっていたら，知識がとっ散らかって知識の整理ができなそうと薄々感じていたので，ちゃんとした先生から体系だって学ぶことができることはありがたいです．
しかも，8/31まではセールのようで気になる人はリンクから見てみてはいかがでしょうか．

また，Firebaseというものも勉強しないといけないらしく，こちらについてもコースの購入を考えています．他になにかアプリリリースするまでの過程で勉強しておいた方がいいことあれば教えてください．

The Complete Flutter Development Bootcamp with Dart で学習したこと・調べたこと

The Complete Flutter Development Bootcamp with Dart のほうが英語が簡単らしいので，こちらをとりあえずしようと思います．
映像授業で学んだことをChatGPTにまとめてもらいます．
映像授業が28.5時間もあるそうなので時間が圧倒的に足りない...
夏休み終了までには終わらない...
したがって，当初の計画からは大幅に遅れる予定なのでご了承ください．

MaterialApp()とはなんですか？

`MaterialApp` は、Flutterフレームワークで使用されるウィジェットの一種であり、マテリアルデザインのアプリケーションを構築するために使用されます。マテリアルデザインは、Googleによって提案されたデザインガイドラインであり、美しい、一貫性のある、直感的なユーザーエクスペリエンスを提供するためのものです。

MaterialApp ウィジェットは、アプリケーション全体のコンテナを提供し、以下のような機能を持っています：

テーマとスタイル:
MaterialApp 内でテーマ（Theme）を定義することで、アプリケーション全体の見た目や振る舞いを統一的に設定できます。例えば、アプリのカラーパレットやフォントスタイルなどを設定できます。
ルートページの設定:
home プロパティを使用して、アプリケーションのメイン画面やホームページを指定します。このウィジェットが初期表示されるコンテンツとなります。
ナビゲーション:
MaterialApp 内でナビゲーションバーを提供することで、異なる画面やビュー間を切り替えるためのナビゲーションを簡単に設定できます。
ローカリゼーション:
アプリケーション内でテキストやメッセージを異なる言語にローカライズするための設定を行うことができます。
スクリーンの向きやスケーリング:
画面の向き（縦向きまたは横向き）やスケーリングに関する設定も行えます。

以下は、MaterialApp ウィジェットを使用した簡単な例です：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'My App',
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Text('Welcome to my app!'),
      ),
    );
  }
}

この例では、MaterialApp ウィジェットがアプリケーションの全体的な設定を提供し、Scaffold ウィジェットを含む MyHomePage ウィジェットがアプリのメイン画面を定義しています。

Material Design

Scaffold()とはなんですか？

`Scaffold` は、Flutterフレームワークで使用されるウィジェットの一種であり、アプリケーションの基本的な構造やレイアウトを提供するために使用されます。`Scaffold` ウィジェットは、アプリの画面内にアプリバー、ボディエリア、フローティングアクションボタンなどの主要なコンポーネントを配置するためのコンテナです。

Scaffold ウィジェットが提供する主要なコンポーネントは次の通りです：

AppBar（アプリバー）:
アプリケーションの一番上に表示されるバーで、タイトルやアクションボタンを含むことができます。通常、アプリケーションのロゴやタイトル、メニューなどが含まれます。
Body（ボディエリア）:
アプリケーションのメインコンテンツが表示されるエリアです。テキスト、画像、リストビュー、カードなど、さまざまなウィジェットを配置することができます。
FloatingActionButton（フローティングアクションボタン）:
画面内の重要なアクションを実行するための浮動するアクションボタンです。通常は画面の一番下に配置されます。
BottomNavigationBar（ボトムナビゲーションバー）:
アプリケーションの下部に表示され、画面間のナビゲーションを提供するためのバーです。複数のセクションや画面に移動するためのアイコンを含むことができます。

以下は、Scaffold ウィジェットを使用した簡単な例です：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Text('Welcome to my app!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // ボタンが押された時の処理
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

この例では、Scaffold ウィジェットがアプリの骨格を提供し、AppBar と body と floatingActionButton などのコンポーネントが Scaffold ウィジェット内に配置されています。

AppBar()でできることを具体的に教えてください

`AppBar` ウィジェットは、Flutterアプリケーション内でアプリバー（タイトルバー）を構築するために使用されるウィジェットです。`AppBar` ウィジェットを使用することで、アプリケーションの一番上に表示されるバーをカスタマイズし、さまざまな機能を追加できます。

以下は、AppBar ウィジェットを使用してできる具体的なことです：

タイトルの表示:
title プロパティを使用して、アプリケーションのタイトルを表示できます。タイトルはアプリケーションの内容を簡潔に説明するために使用されます。
アクションボタンの追加:
actions プロパティを使用して、アプリケーションバーにアクションボタンを追加できます。アクションボタンは、ユーザーが特定のアクションを実行するためのボタンです（例：検索、設定、通知など）。
バックボタンの追加:
leading プロパティを使用して、アプリケーションバーの左側にバックボタンなどのアイコンを追加できます。このアイコンは、通常、前の画面に戻るために使用されます。
カスタムウィジェットの追加:
title プロパティにウィジェットを渡すことで、タイトルをカスタマイズすることができます。これにより、テキストだけでなく、アイコンや画像などのウィジェットを含めることができます。

以下は、AppBar ウィジェットを使用してタイトルとアクションボタンを持つアプリケーションバーを作成する例です：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 検索アクションの処理
            },
          ),
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              // 設定アクションの処理
            },
          ),
        ],
      ),
      body: Center(
        child: Text('Welcome to my app!'),
      ),
    );
  }
}

この例では、アプリケーションバーにタイトルと検索、設定のアクションボタンが追加されています。アクションボタンが押されたときの処理は、onPressed コールバック内に記述されます。

Image()でできることを具体的に教えてください

`Image` ウィジェットは、Flutterフレームワークで画像を表示するためのウィジェットです。アプリケーション内で画像を表示する際に使用されます。`Image` ウィジェットは、ネットワークからの画像の読み込みや、ローカルリソースからの画像の表示など、さまざまな方法で使用することができます。

以下に、Image ウィジェットができる具体的なことをいくつか挙げてみましょう：

ネットワークからの画像の表示:
Image.network() コンストラクタを使用して、インターネット上の画像を表示できます。指定したURLから画像をダウンロードして表示します。
ローカルリソースからの画像の表示:
Image.asset() コンストラクタを使用して、アプリのローカルリソースにある画像を表示できます。プロジェクト内の assets ディレクトリ内に画像を配置し、そのパスを指定します。
ファイルシステムからの画像の表示:
Image.file() コンストラクタを使用して、デバイスのファイルシステムに保存されている画像を表示できます。
画像の配置やサイズ指定:
fit プロパティを使用して、画像をどのように配置するかや拡大縮小するかを指定できます。width や height プロパティを設定して、画像のサイズを制御することも可能です。
カスタムのデコードオプション:
画像の読み込み時にデコードオプションを指定することで、メモリ効率やパフォーマンスを調整できます。

以下は、ネットワークからの画像とローカルリソースからの画像を表示する例です：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Example'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Image.network('https://example.com/image.jpg'), // ネットワークからの画像
              Image.asset('assets/local_image.png'),         // ローカルリソースからの画像
            ],
          ),
        ),
      ),
    );
  }
}

この例では、Image.network() を使用してインターネット上の画像を表示し、Image.asset() を使用してアプリのローカルリソースから画像を表示しています。

Make Flowcharts with Draw.io

yamlとはなんですか

YAML（YAML Ain't Markup Language）は、人間に読み書きしやすく、コンピュータにもパースしやすいデータフォーマットです。YAMLは「YAML Ain't Markup Language」の再帰的頭字語であり、自己言及的な命名です。主に設定ファイルやデータのシリアライズ（直列化）に使用されます。

YAMLの主な特徴は次のとおりです：

可読性が高い: YAMLは人間が読み書きしやすい構造を持っており、インデントや改行によって階層を表現します。このため、設定ファイルなどを直感的に書くことができます。
階層構造: ネストされたキーと値のペアによって、階層的なデータ構造を作成できます。このため、複雑なデータを整理して表現するのに適しています。
データ型のサポート: YAMLは文字列、数値、真偽値、配列、マップ（連想配列）などの基本的なデータ型をサポートしています。
コメント: # を使用してコメントを記述できます。コメントはデータの説明やコード内でのメモに便利です。
再利用性: YAMLではアンカーとエイリアスを使って、同じデータを別の箇所で再利用できます。これにより、冗長なデータを避けることができます。
拡張性: YAMLは拡張性が高く、ユーザーが独自のタグを定義してデータ型を拡張することができます。

YAMLは主に設定ファイルやデータのシリアライズ、データの交換形式として広く使用されています。例えば、Docker Compose、Kubernetesの設定ファイル、GitHub Actionsのワークフロー定義など、さまざまな場面で採用されています。

Assetsを具体的に説明してください

"Assets" は、Flutterアプリケーション内で使用される静的なファイル（画像、音声ファイル、フォントなど）を指すための用語です。これらのファイルは、実行時にプログラムコードと一緒にパッケージされてアプリケーションに含まれ、アプリの機能や外観に影響を与えるために使用されます。

Flutterアプリケーションでは、以下の種類のアセットが一般的に使用されます：

画像: PNG、JPEG、GIFなどの画像ファイル。アプリ内で表示されるイメージやアイコンなどに使用されます。
音声ファイル: MP3、WAVなどの音声ファイル。アプリ内で音声を再生する際に使用されます。
フォント: カスタムのフォントファイル（TTFやOTFなど）。アプリ内でテキストを表示する際に、特定のフォントを使用するために必要です。
設定ファイル: YAMLやJSONなどの設定ファイル。アプリの動作やデザインに関連する設定情報を保存するために使用されます。

アセットは、Flutterアプリのプロジェクト内の assets フォルダに配置されます。この assets フォルダに含まれるアセットは、ビルド時にアプリに取り込まれ、アプリが実行される際に使用できるようになります。

pubspec.yaml ファイルは、Flutterプロジェクトの設定ファイルであり、使用するアセットを宣言するための場所です。pubspec.yaml ファイル内の flutter セクションの assets フィールドにアセットのファイルパスを記述することで、アプリケーションに含まれるべきアセットを指定します。

以下は、pubspec.yaml ファイル内でアセットを宣言する例です：

flutter:
  assets:
    - assets/images/image.png
    - assets/audio/music.mp3
    - assets/fonts/custom_font.ttf
    - assets/config/config.yaml

この例では、assets フォルダ内の特定のファイルがアセットとして宣言されています。アセットはアプリ内での使用を意図しており、実行時にアプリに埋め込まれます。

今日の感想は，とにかく講義がわかりやすい!!!
順を追って説明してくれるし，独学ではしれないようなサイトなども教えてもらえるので感謝．

世界中の The Complete Flutter Development Bootcamp with Dart の受講生がコードを書いているからなのか，Githubcopilotの補完候補が講義動画と同じになる．スゴイ！

講義動画のFlutterのバージョンが古いため，コードが講義のものだとできないが，Githubcopilotにコードを書き直してもらうと問題なく動くようになるのでバージョンの古さはそこまで気にはならない．

講義のセクションだけ抜き出しました．各セクションにレクチャーが細かく別れていますが，書き出すことが大変なのでセクションだけで許してください．

1. I Am Rich - How to Create Flutter Apps From Scratch

2. Running Your App on a Physical Device

3. I Am Poor - App Challenge

4. MiCard - How to Build Beautiful UIs with Flutter Widgets

5. Dicee - Building Apps with State

6. Boss Level Challenge 1 - Magic 8 Ball

7. Xylophone - Using Flutter and Dart Packages to Speed Up Development

8. Quizzler - Modularising & Organising Flutter Code

9. Boss Level Challenge 2 - Destini

10. BMI Calculator - Building Flutter UI for Intermediates

11. Clima - Powering Your Flutter App with Live Web Data

12. Boss Level Challenge 3 - Bitcoin Ticker

13. Flash Chat - Flutter x Firebase Cloud Firestore

14. Provider Pattern - State Management

15. Next Steps

16. Final Session - You Did It!

できるだけ早くこのコースを終わらせてアプリ開発に取り掛かることが直近の目標です．
理想的には１週間で終わらせたい...
今日はここまで．

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

プログラミング初心者の医学生が残り少ない夏休みでGithubcopilotとchatGPTの力を借りてアプリ開発してみた Day6

これまでの経過

Day6(2023/08/25)

4. Design and Developmen

The Complete Flutter Development Bootcamp with Dart で学習したこと・調べたこと