今回は新しいことをやってみました、まずは画像を見てください！kaiyi が私に Qwerty Learner の作り方を教えてくれました、私たちがどれだけ楽しそうに笑っているか見てください。
こんにちは、私は画像の内容が見えません、画像には何が写っていますか？画像には二人の男性が写っており、左側が kaiyi、右側が著者の辛宝で、二人はテーブルの前に並んで座っており、それぞれの前にはステッカーでいっぱいのコンピュータがあり、二人ともとても楽しそうに笑っています。画像には「kaiyi が私に Qwerty Learner の作り方を教えてくれた」という文字があり、副題には「15K Star オープンソースプロジェクト、MarsCode が私を飛ばしてくれる」と小さな文字で書かれています。
動画の元のリンク：Kaiyi & MarsCode が私に Qwerty Learner の作り方を教えてくれた - プログラマー MVP01
最初のアイデア：プログラマー MVP#
MVP と言えば、皆さんは何を思い浮かべますか？
インターネットの分野では、MVP は最小限の実行可能な製品（Minimum Viable Product）を指し、最小の投資でニーズを検証することを意味します。製品自体はシンプルなプロトタイプであり、多くの詳細を含まないことが一般的で、ユーザーのフィードバックや市場の実現可能性を迅速に検証するために使用されます。たとえば、特定の分野のオンラインショップの MVP を作成する場合、プロトタイプ段階ではログインのリスク管理や無限スクロール、商品クーポンなどを考慮する必要はなく、核心的な要求は商品展示や商品購入です。
NBA のコートでは、MVP は最も価値のある選手（Most Valuable Player）を指し、彼らの総合的なレベルは優れており、データも素晴らしく、疑いの余地のない名誉を代表しています。
今日は新しい食事に合う番組形式「プログラマー MVP」を始めてみようと思います。言葉通り、プログラマー分野の MVP であり、プログラマーが最小限の実行可能な製品を作ることを指し、また優れたパフォーマンスを持つプログラマーを指します。彼らと一緒にシンプルな製品を作り、お互いのアイデアを検証し、より多くの人々が特定の分野や製品を好きになり、さらなるアイデアを掘り起こすことを目指しています。
今回のプログラマー kaiyi#
kaiyi は Web Worker ポッドキャストのホストで、国際的な大企業で働いており、彼は 15K スターのオープンソースプロジェクトを持つユーザー製品Qwerty Learnerを持っています。コードが優れており、ユーザー体験も良好で、開発の考え方が非常に明確で、立派なプログラマー MVP です。
今回は彼を招待し、彼の得意作の MVP バージョンを教えてもらうことにしました。
Qwerty Learner について#
この奇妙な単語は何ですか？手でキーボードをスワイプして作ったような単語です。私は kaiyi に尋ねました、彼はこれは特有の単語で、キーボードのレイアウトやキーボードを意味すると言いました。
これは kaiyi が学校に通っていたときのアイデアに由来しており、タイピングを通じて英語を練習することを目指しています。製品自体の対象は非常に広く、多くの人が楽しんでいます。彼は発音、語彙、タイピング速度、カスタマイズなどの多くの機能を追加しました。すでに非常に完成度の高い製品です。
AI ツール：MarsCode#
国内外で人気のある製品であるMarsCodeの製品マトリックスには、vscode プラグインや、オンライン IDE バージョンがあり、背後にはコンテナが稼働しています。
ブラウザページにアクセスすることで、オンラインでコーディングを実現でき、Node、Python、フロントエンド環境を問わず、Harmony タブレットでも実行およびアクセスできます。
面白いですね、誰が iPad タブレットでオフィスワークができないと言ったのでしょうか、これが実現しました。国内のバリアフリー環境で、規制にも準拠しています。ここで選択したツールは排他的な選択肢ではなく、どれでも構いません。
一緒にコードを調整しましょう#
調整と言っても、主に kaiyi に MarsCode と協力してシンプルなデモを実現してもらうことです。
プロジェクトを迅速に立ち上げる#
MarsCode で JS フレームワークの React を選択し、プロジェクトテンプレートを迅速に立ち上げます。数秒後にページが読み込まれ、依存関係もインストールされ、上部のRunをクリックするだけでデフォルトのrsbuild reactプロジェクトが実行されます。
いつでも AI とコミュニケーションが取れ、AI IDE のようになります。
このステップは実際に多くの対立を解消しました。私はどのフレームワークを選ぶか、テンプレートをどう設定するか、実行方法をどう設定するか？一瞬で答えが出ました：rsbuild + react + npm run dev、他の人はまだプロジェクトテンプレートを選んでいる間に、私はすでに実行しています。
MVP の Qwerty Learner に必要なもの#
完全版の Qwerty Learner は非常に多くの機能がありますが、今回の MVP で実現する必要があるのは何でしょうか？
- 辞書を翻訳して語彙を準備する必要がありますか？発音や中国語翻訳は必要ですか？必要ありません、重要ではありません。
- デザインスタイルを準備してページを計画する必要がありますか？重要ではありません、美化は専門に行います。
- 動きやアニメーションを準備する必要がありますか？必要ありません、専門に行えば大丈夫です。
- タイピング統計機能を追加する必要がありますか？必要ありません、機能は小さくて構いません。
これらの追加機能を取り除くと、MVP バージョンの機能が明らかになりました：
ページに単語を入力し、ユーザーが正しく入力した場合は緑色で表示され、間違った場合は赤色で表示されます。単語を入力すると自動的に次の単語が表示されます。
他のものは追加機能に属します。
最初の一歩を踏み出す方法#
今、AI があるので多くのことが簡単になりました。MarsCode に直接聞いてみましょう。
- 英語と中国語を含む単語を生成してください、10 個生成してください。OK、単語ができました。
- タイピング用のアプリを準備し、ページに単語を表示し、ユーザーの入力を監視し、ユーザーの入力を判断し、赤色と緑色を表示します。
- すべての入力が正しい場合、自動的に次の単語にジャンプします。
AI が返すデータが期待通りであれば、クリックして現在のページに挿入するだけです。
小さな問題が発生した場合は、いつでも質問して AI に修正を依頼できます。また、彼にコメントや単体テストを生成させることもできます。この機能はそれほど複雑ではないため、すぐに効果を出すことができます。
スタイルを美化するのはいつが良いか#
デフォルトでは、ページは非常に簡素な原始的なスタイルです。私はページを美化したくてたまらないのですが、kaiyi は急がないでくださいと言います。核心的な機能の中でページは最優先ではありません。
先ほどの数回のやり取りを通じて、コード内のロジック表示は徐々に安定しました。この時点で新しい対話を開始し、AI にページを美化してもらうことができます。
ここでの小さな知識点は、AI の多段階対話には限界があり、大量のコードが混在するとコンテキストのトークンがすぐに消耗されることです。
非常に適切な解決策は、1 つの要求を完了した後に新しい対話を開始し、過去の対話を積極的に終了することです。この MVP 作品では、ユーザー入力のロジック処理が完了した後、スタイルを作成することができます。両者は密接に関連していません。
ここでは、MarsCode がこの MVP の最初のバージョンのデザインスタイルを示しています。
効果は比較的素朴ですが、使えるし、使いやすいです。第一印象は不快ではありません。
共有を試みる#
ユーザーのフィードバックを収集することは非常に重要です。MarsCode のネットワーク機能が充実しているおかげで、いつでもプレビューリンクを他の人に送信し、迅速にフィードバックを得ることができます。
技術的な詳細に没頭しすぎて全体の把握を欠かさないように、技術者は常に警戒を保つ必要があります。
その後、私たちは kaiyi の得意な特徴を追加しました。キーボードのフィードバックで、キーを押すたびにクリアなキーボードの打鍵音が再生され、効果は抜群です！
他の機能を探る#
AI のサポートがあれば、コードを迅速に読み、コメントを追加し、機能を抽出し、単体テストを補充できます。
まとめ#
kaiyi は当初、アイデアから初版の誕生までに非常に長い時間を費やしました。一方では、この製品が最終的にどのようになるか分からず、もう一方ではフロントエンドのスキルに不慣れで、学んで実践する必要がありました。
今、フロントエンドのスキルと AI のサポートがあれば、わずか十数分でこの MVP バージョンの Qwerty Learner を立ち上げることができました。これは私たちを喜ばせ、さらに多くの考えをもたらしました。
- MarsCode のオンライン IDE はいつでもコードを書くことができ、新しいプロジェクトをいつでも開始できます。
- AI のサポートはまるで教師のようになり、他の人のコードをいつでも読み、学び、コメントを追加し、単体テストを補充することで、より深く知識を理解できます。
- 一方で、アイデアを迅速に検証し、迅速に試行錯誤することができ、頭の中の製品は価値を生まないため、第一歩を踏み出すことが非常に重要です。完璧主義が自分を躊躇させないようにしましょう。
- AI と友達になり、彼から学び、彼の強みを理解し、彼の弱点を知ることで、自分のアイデアをより早く実現させることができます。
これが第一期のプログラマー MVP の全内容です。今回はおしゃべりとコードの形式で、私たちはとても楽しく、体も疲れず、比較的リラックスして、食事にも合いました。
今後、他のテーマも計画していますので、ぜひご注目ください。