ChatGPTでアプリを作る Part3 ログイン/サインアップ

ChatGPTでアプリを作ろうとしています、id:kouki_dan です。

前回のPart2では、どんな画面を作れば良いかをChatGPTに聞いてみて、まず作るといいと言われたスプラッシュ画面を完成させました。

kouki.hatenadiary.com

今回はきっと、ログイン/サインアップを作っていくことになると思います。

まずは、ログイン画面とサインアップ画面を作る意思表示をします。そうすると、作らなくてはいけないファイルと、やるべきことを教えてくれました。

次はログイン/サインアップ画面を作っていこうと思いますログイン/サインアップ画面を作成するには、以下の手順に従ってください。まず、ログイン画面とサインアップ画面の2つのStatefulWidgetを作成します。例えば、login_screen.dartとsignup_screen.dartという名前のファイルを作成します。

でも、人間がコードを書くなんて変ですよね・・・？試しに丸投げしたら、コードを全部教えてくれました。（コードは長いので割愛）

2から6を実装したDartのコードが欲しいですここでは、ログイン画面とサインアップ画面を実装するDartコードの例を提供します。Firebase Authenticationを使用するため、まずpubspec.yamlにfirebase_authとfirebase_coreパッケージを追加してください。 pubspec.yaml yaml Copy code dependencies: flutter: sdk: flutter firebase_auth: ^3.3.3 firebase_core: ^1.10.0 次に、ログイン画面とサインアップ画面の実装を行います。 login_screen.dart

出てきたコードはFirebaseの設定をしていることが前提のコードで、その設定の方法は教えてくれていないのですが、そこは僕がサービスとしてやっておきました。ただ、出てきたコードをコピペすると、エラーが発生しました。エラー内容をChatGPTに伝えます。

MainScreenが見つからないエラーが出ますすみません、MainScreenの例を提供していませんでした。以下に、簡単なMainScreenの実装例を示します。この画面は、ログインまたはサインアップに成功した後に表示されるメイン画面です。

いいですね。どんどん画面ができていきます。作られたコードの一部は、以下のようなクラスが含まれていました。エラーメッセージを僕が読んだところ、_submitForm内で、nullableなプロパティをアンラップせずに使っているようです。

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  final _auth = FirebaseAuth.instance;
  String _email = '';
  String _password = '';

  void _submitForm() async {
    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();
      try {
        await _auth.signInWithEmailAndPassword(email: _email, password: _password);
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (context) => MainScreen()),
        );
      } on FirebaseAuthException catch (e) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(e.message)),
        );
      }
    }
  }

僕が直してしまっても良かったのですが、何もわかってないふりをしてChatGPTに聞いてみました。

エラーが出ています The method 'validate' can't be unconditionally invoked because the receiver can be 'null'. Try making the call conditional (using '?.') or adding a null check to the target ('!'). すみません、私が提供したコードではnull安全が考慮されていませんでした。以下のようにvalidateおよびsaveメソッド呼び出しに?を追加してnull安全にしてください。

すごい、完全に理解していますね。最初からこっちのコードを出せなかったのはなぜなのでしょう。null安全を考慮してください。と言えばもしかしたら最初からコンパイルの通るコードが生成されたかもしれませんね。

いくつかエラーが出たので、それも全部ChatGPTに直してもらいます。

ここまでやり取りして、ビルドが通るようになりました！ただ、作ったログイン画面はどこからも表示されていません。それも聞いてみました。

エラーがなくなりました。ありがとうございます。ここで作った画面を表示するためにはどうすると良いですか？素晴らしいです！エラーが解消されたようで、うれしいです。これで、画面を表示するためにmain.dartファイルを更新しましょう。main.dartファイルで、MaterialAppウィジェットのhomeプロパティに、LoginScreen()を設定します。また、必要なインポートを追加してください。

せっかくPart2で作ったスプラッシュ画面を上書きしてきています・・・。

どうやら、昔のことは忘れてしまったようなので、再度main.dartの全文を与えてみました

今のmain.dartは以下のようになっています。忘れてしまいましたか？

そうすると、いい感じに今のコードを活用したアウトプットを生成してくれました。

申し訳ありません。すでにSplashScreenからLoginScreenへの遷移が実装されていることを見逃していました。main.dartには、以下のようにLoginScreenをインポートして、LoginSignupScreenをLoginScreenに置き換えるだけで大丈夫です。

その後、「ログインしている場合もログイン画面が出るのは変ではないか」「以前あったタイマーが消えてしまっているのは問題がないか」「ログアウトした後は再度ログイン画面を出すのが適切ではないか」と、質問を積み重ねていって、できたコードがこちらです！！

github.com

動いてる様子は、Twitterから

ChatGPTに日本語書いてペーストするだけでログインログアウトができた
一回で完璧に動くコードは書いてくれないけど、適当にエラーメッセージをコピペしたら直してくれるし、僕がエディタ上で使ったキーはコマンドとVだけ・・・ pic.twitter.com/Xekv0TA5Ec
— こーき@だん (@kouki_dan) 2023年3月23日