ChatGPT でゼロから App Store まで

Feb 14 2023

プロンプトベースのエンジニアリングを使用して天気を構築する

AI を搭載したゼロ to App Store へようこそ。この記事では、新興のラージ言語モデル (LLM) およびその他のトランスフォーマーテクノロジが、アプリの開発およびリリースプロセスのほぼすべての段階で iOS 開発者を支援できる、刺激的で驚くべき方法について説明します。

この記事では、ChatGPT と Github Copilot を使用して、アイデア出しとコーディング手順を含むアプリを最初から作成し、App Store にリリースします。また、AI 画像ジェネレーターを使用して、アプリのアイコンと必要な画像アセットを作成します。マーケティングや App Store のコピーも ChatGPT を使用して行われます。

注: この記事には ChatGPT によって一部変更が加えられている可能性があります。

まず、LLM とは何か、そして ChatGPT とは何なのかについて、ChatGPT の好意により簡単に説明します。

LLM は、Large Language Model の略です。これらは、書籍、記事、Web サイトなどのテキストデータの大規模なデータセットでトレーニングされた機械学習モデルです。これらは人間のようなテキストを理解して生成することができ、自然言語処理、言語翻訳、テキスト生成などのさまざまなアプリケーションで使用されます。

ChatGPT は、OpenAI によって開発された大規模な言語モデルです。テキストデータの膨大なデータセットでトレーニングされており、トランスフォーマーニューラルネットワークアーキテクチャを使用して人間のようなテキストを理解して生成できます。入力された単語に対して次の単語の確率分布に基づいて応答を生成でき、より小さなデータセットでトレーニングすることで特定のタスクに合わせて微調整することもできます。

これらのテクノロジの多くをこのような形で使用するのは今回が初めてなので、詳しく見ていきましょう。

最初の手順と AI を使用した生成と命名についての説明

アプリを作成するには、もちろんアイデアを考えることが最初のステップです。ChatGPT を使用すると、アイデア生成が簡単になります。プロンプトにいくつかの調整が必要になるかもしれませんが、複雑すぎず、基本的すぎないアプリを作成するために使用できる 3 つのアイデアを生成するようプロンプトに依頼します。

ChatGPT はほとんどのプロンプトを正しく解釈し、通常は適切な回答を生成しますが、本格的なターンバイターンナビゲーションアプリが「単純な」アプリであると主張するなど、時にはおかしな方法で間違っている場合もあります。

アイデアを 1 つ選ぶという決定は ChatGPT に任せましたが、私たちが構築しているのは天気アプリのようです。しかし、これは迅速に開発するにはあまりにも決まり文句のアプリなので、エキサイティングなひねりを加えてくれるように依頼してみます。

ここには良いアイデアがいくつかあります。私は現在の気象状況を利用したアクティビティの提案に従うことにしました。次に、アプリについて説明し、いくつかの名前を提案してもらいます。

さらにいくつかの質問をした後、私はを選択することにしましたActiWeather。このダジャレが ChatGPT によって意図されたものであることを願っています :)

次に、ChatGPT にアイデアを要約して手順を教えてもらいました。この記事の範囲には少し複雑すぎますが、これらは一般的に良い提案です。

それでは、実際にアプリを構築して、プロセスにさらに AI ツールを導入してみましょう。

ChatGPT と Github Copilot を使用したプロジェクトの作成とコーディング

フレームワークの選択とプロジェクトの作成

まず、アプリの作成中に ChatGPT が提案するいくつかの手順に従うことにしました。そこで私はまず無料の天気 API をいくつか探し始めました。久しぶりに天気アプリを作成したので、Apple の新しい WeatherKit フレームワークを試してみることにしました。

残念ながら、ChatGPT は 2021 年までのデータにしかアクセスできないため、これがプライベート API であると依然として考えられています。実装は、ドキュメントやチュートリアルを読み、自分で核心に迫るという昔ながらの方法で行う必要があることに気づきました。

ただし、最初に行うことは、もちろん Xcode プロジェクトを作成することです。

もうお気づきかと思いますが、私は SwiftUI を使用します。新しい SwiftUI プロジェクトほどプロジェクトを開始するものはありません。

WeatherKit からデータを取得するには、Apple Developer ポータルでいくつかの設定を行う必要があります。詳細については、 Apple のスタートガイドをご覧ください。この記事はアプリ開発における新しい AI ツールの使用法に関するものであるため、あまり詳細には触れませんが、残念なことに、ChatGPT のトレーニングデータは古すぎるため、これらの手順を提供できません。ChatGPT と同等の機能を備えた AI ボットがリアルタイムでインターネットにアクセスできる日を楽しみにしています。

(常に厄介な) 構成プロセスを経た後、いよいよコーディングに取り掛かり、2 番目のツールを紹介します。GitHub の副操縦士。

Copilot で「WeatherKitManager」を作成する

WeatherKit のアクティブ化プロセスには時間がかかる場合があるため、先に進み、WeatherKitManagerすべての WeatherKit インタラクションを処理するクラスを作成します。Cole Dennis によるこの優れた記事を、 Copilot の使用に慣れるまでの間、WeatherKit 実装のほとんどについての参考資料として使用していきます。

Xcode にはまだ Copilot が統合されていないため (実装される予定ですか? それとも Apple 製の同様のツールが登場するのでしょうか?)、一方の側で Visual Studio Code ウィンドウを開いて、もう一方の側で Xcode ウィンドウを開いて、それらを切り替えることになります。

注: すでにご存知の方も多いと思いますが、Copilot は ChatGPT とは異なり (現時点では) 有料サービスです。7 日間の無料試用期間があり、その後は月額 10 ドルまたは年間 100 ドルの料金がかかります。

Copilot の全行オートコンプリートは、定型コードやデフォルト変数を作成するときに非常に便利です。

メソッドシグネチャを作成した直後、Copilot は残りの部分を適切に提案します。

Visual Studio で加えた変更を Xcode に反映するには、次のコマンドを使用してファイルを保存する必要があります。cmd+S

このオートコンプリート関数には、設定された場所を提供したり、非同期をより適切に設定したりするなど、いくつかの変更を加える必要がありますが、それでも優れた出発点です。

いくつか試した後、デフォルトの場所の現在の温度が準備され、摂氏に変換されました。これでWeatherKitManager今回の作業も完了です。

基本的なUIを作成して試してみる

Copilot を使用して観測オブジェクトを定義し、基本 UI 要素を追加すると、SFSymbols を使用して気象条件が表され、デフォルトの場所 (Apple 本社) の温度が摂氏で表示されます。

この提案には、組み込みのフォントとスタイルも含まれています。

興味深いのは、Copilot が別のファイル内のクラスからのメソッド呼び出しを正しく提案できることです。

注: 現時点では結果を表示するために小数点の書式設定を変更する必要がありました。後で UI を構築したら、これに戻ります。

アクティビティリストの作成とタブの追加

ChatGPT が提案したように、さまざまな気象条件下で実行できるアクティビティのリストを作成します。このリストの作成を依頼して、何が得られるか見てみましょう。

最初のリストは問題ないようでした。ただし、このアプリの範囲では、海の状況を使用する必要があるため、ウォータースポーツは含めないことにしました。データをクリーンアップした後、ChatGPT を使用して Swift 構造体とサンプル配列を生成しました。

現在の問題は、WeatherKit から取得したデータが ChatGPT によって生成されたデータクラスと一致しないことです。さまざまなアクティビティタイプのプロパティを反復処理するには、データリストと一致するようにApple のWeather構造体のプロパティをマップする必要があります。currentWeatherCondition

最新のフレームワークにアクセスできる Copilot を代わりに使用することにしました。そうしているうちに、「あなたが要求したものは、まさにあなたが得るものである」という良い例に出会いました。WeatherCondition を配列として記述していなかったので、予想どおり、Copilot は 1 つの気象条件のみに適合するオブジェクトのリストを提供してくれました。

これを解決するために、weatherConditionsプロパティを配列にするように Copilot に明示的に指示しました。繰り返される気象条件は完璧ではありませんが、現時点ではこれらを使用してリスト UI を表示します。

TabView次に、これらのデータをアプリに追加し、[アクティビティ] タブのリストに追加します。既存のものを使用しContentView、ChatGPT にそれを埋め込んでタブアイコンにTabView使用するように依頼しますSFSymbols。

スタイル以外はすべて素敵に見えます。現時点ではコードの最適化に時間を費やすつもりはありませんが、コードを実行して結果を確認してみましょう。

完全！次に、いくつかの小さな変更を加えて、リスト内のアクティビティを反復する必要があります。これで、出来上がりです。

「天気」タブにアクティビティの提案を追加し、この部分をまとめます

アプリの基本機能をまとめるために、メイン画面の現在の天気表示の下にアクティビティの提案を統合します。

もう一度 ChatGPT に質問して、このタスクがそれに一致するかどうかを確認してみましょう。

これも非常に実用的なコードです。これを既存のに統合した後ContentView、Copilot オートコンプリートを使用して currentWeather の別のプロパティも公開しましたcurrentWeatherCondition。これは十分近いものでしたが、それでもいくつかの修正が必要でした。