AB
AiBoss
チュートリアル

Trae を使用したミニプログラムの生成方法: MCP、エージェント、およびコンテキスト機能の実世界テスト。

複数の情報源によると、OpenAIはAIプログラミングツール企業Windsurfを約30億ドルで買収する計画であり、これはOpenAIにとってこれまでで最大の買収となる。今年初めから、AI IDE分野ではニュースが絶え間なく流れている。AIプログラミングは現在...

如何用Trae生成小程序,实测MCP、Agent、上下文等功能

複数の情報源によると、OpenAI約30億ドルでの買収を計画中AIプログラミングツール会社であるWindsurfは、Openになる予定です。AIこれまでで最大の買収案件。

今年から、AI IDE分野のニュースは絶え間なく流れている。

AIプログラミングは時代の最先端にあるが、コードを理解できない人々は終わりのない不安に囚われている。

あまり心配する必要はありませんよ。

AIこれらのアップグレードと改良はすべて、より多くの人がより良く利用できるようにすることを目的としている。AI

例えば、私のような文系学生は、コードを一行も理解できず、完全に…に頼っています。AI1か月前には、初のミニプログラム「Shit Diary Demo」もリリースしました。

本日、「Shit Diary Demo」のバージョン2.0がリリースされました。

以前と比べて、ページの最適化をいくつか行い、さらにトイレで用を足している間の時間つぶしに役立つミニゲームも追加しました。

言わなければならないのは、AIプログラミングって本当に素晴らしい!!!

市場には多くの健康アプリが存在するが、それらは複雑すぎたり、広告や有料機能が多すぎたりする。

もしあなたが私と同じように、自分のニーズを満たすものだけを求めているなら…単純広告なしの小型ツールをお探しなら、ぜひご自身で作ってみることをお勧めします!

それでもAIプログラミングツールはたくさんありますが、強力しかし、実際に使ってみると、VPNが必要なものもあれば、会員登録が必要なだけでなく、高額な料金がかかるものもあったことが判明した。

私のような完全な初心者にとっては、学習曲線が急すぎる。

そもそも、私たちは自分たちで使うためのミニプログラムを作りたかっただけなんです。もしそれにお金をかけなければならないとしたら、それは当初の目的から外れてしまいます。

数えきれないほどの製品を比較検討した結果、最終的にTrae

公式サイト:Trae

VPNは不要で、完全に機能します。無料!!

純粋な中国語インターフェース私たちのような完全な初心者でも非常に使いやすいです。

内蔵 DeepSeek-R1、DeepSeek-V3、DeepSeek-V3-0324、Doubao-1.5-pro大型モデル無料無制限に使用可能。

APIを介してクラウドベースのモデルリソースを設定することも可能です。

人気のあるClaude ソネット3.7、最近リリースGPT-4.1モデル、すべて単純電話。

Traeのウェブサイトにアクセスし、指示に従ってTrae IDEをダウンロードしてインストールしました。

従来型のIDEに慣れている方は、Traeプラグインを直接インストールすることもできます。

クリックしてフォルダを開き、ミニプログラムのコードが格納されているフォルダを選択してください。

入力ボックスに要件を記述するだけで、コードの生成と修正が可能です。

最適化プロセスをより直感的に理解するために、WeChat開発者ツールを開き、ミニプログラムのコードファイルをインポートしました。

Traeで要件を送信したりコードを更新したりすると、このウィンドウで更新の効果をリアルタイムでプレビューできます。

通常、コードが更新されると、プレビューウィンドウもそれに合わせて更新されます。コードを更新しても画面が変わらない場合は、「コンパイル」を手動でクリックしてください。

ウェブページを作成する場合は、この手順をスキップできます。Traeに内蔵されているWebview機能を使えば、ウェブページを直接プレビューできます。

ここでは、Traeに組み込まれているDeepSeek-V3-0324モデルを選択しました。

直接聞いてみましょう。@Builderこのミニプログラムを理解できますか?

分析と回答が終わったら、ミニプログラムの最適化に関する提案を求めることができます。

以前のバージョンのTraeには、チャットモードとビルダーモードの2つのモードがありました。チャットモードでは、現在のプロジェクトの状況を理解し、少しずつ正確な変更を加えることができました。一方、ビルダーモードは、さまざまなツールを呼び出してニーズに継続的に対応できるため、ゼロからの開発に適していました。

昨日のアップデートで2つのモードが直接統合されました。@Builder ご要望をお伝えいただければ、より効率的な業務運営が可能になります。単純大丈夫。

別の@Build with MCP これにより、MCPツールを柔軟に使用できるようになり、その機能が拡張されます。

によると@Builder ご提案に基づき、以下の内容をご提案いたします。ブリストル便分類法に従い、便を7つの形態に分類します。各タイマーが完了するごとに、便の状態を選択し、いくつかの注意点を表示します。

1分もかからずに、自動コードが生成されたら、あとは「承認」をクリックするだけです。

コードを生成すると、自動コンテキストファイルを参照すると、左下隅に必要なドキュメントファイルやウェブページを追加することもできます。

私たちは引き続き要望を伝えました。それは、自由に切り替えられるテーマを作成してほしいというものでした。

WeChat開発者ツールを使用して同期コンパイルを行った後、デバッガーがエラーを報告する場合があります。

心配しないで、私たちはただ赤いエラーメッセージをコピーしてTraeに貼り付けると、問題を解決するのに役立ちます。

作業中は、間違いを恐れないでください。AI段階的に修正するお手伝いをします。

リクエストを送信したにもかかわらず、生成された結果が全く期待に沿わない場合は…まあまあワンクリック前の会話に戻る

とても初心者向けです!

最後に、タイマーを開始するためにクリックするとパンダの状態が変化する小さなアニメーションをページに追加しました。

タイマーが作動している間、巨大なパンダがあなたと一緒にトイレに座ってくれます。

使用AI小さなツールを開発するのに、コードを一行も書かなくても済むなんて、まさに初心者の夢!

このミニプログラムを試してみたところ、純粋にタイミングを計測するためだけに使うのは少し退屈だと感じました。

そこで、ストレス解消になるミニゲームを追加しようと思います。実行中の時間つぶしに役立つでしょう。

私たちは引き続き要望を送りました。「パンダの画像の下に『ブリックブレイカー』と書かれたボタンを追加してください」。

どうやらパンダの画像の意味を誤解したようで、最終的にページの下部に「ダイヤモンドブレイカー」ボタンを生成してしまった。

しかし、使用に支障がなければ問題ありません。

私たちはミニゲームの機能を実装するよう引き続き要望を出しました。具体的には、ブリックブレーカーボタンをクリックするとそのゲームにリダイレクトされるような、ブリックブレーカーに似たゲームを作成してほしいという要望です。

「ゲーム画面を中央に配置したい。」

ミニゲームにスコアボードを追加する。

「リダイレクトされると、再起動ボタンが『ゲーム開始』と表示されます。それをクリックするとゲームが起動し、その後ボタンが『再起動』と表示されます。」

私たちは、ユーザーとのやり取りを通して、ミニプログラムの機能を徐々に最適化しています。

最終的な製品は、最初にご覧いただいたものです。

WeChat開発者ツールで「アップロード」をクリックし、ウェブページ上でアプリケーションを審査のために送信し、承認されるまで待ってから正式にリリースしてください。

トレイの新しいカスタマイズ機能知的ミニプログラムのアップグレード時にMCPは使用しませんでしたが、それでも皆さんに紹介すべきだと思います。本当に強力なツールです!

カスタマイズを追加できます知的Traeは様々な専門家に変身して、コードの問題解決を支援してくれます。

例えば、プログラミングの専門家にコードの問題点を特定してもらい、解決を手伝ってもらいたい場合、[プラットフォーム/方法]を通じて直接依頼することができます。プロンプトワード作成する:

4つの内蔵ツールがあり、@Builder コードの読み書き、実行が可能で、プレビュー機能も備えています。また、オンラインで情報を検索することもできます。

また、MCPと組み合わせることで、AITraeは様々な外部ツールを自由に利用できる。これによりTraeはより汎用性が高くなり、まるで一つのエコシステムのような存在となる。

例えば、ミニプログラムのログを更新したいとします。自動GitHubにプッシュすることで、MCPマーケットプレイスにGitHubを追加できるようになり、この機能が利用可能になります。

GitHubの後の「+」をクリックし、個人アクセストークンを入力して、以下のハイライトされた部分に従って元の設定コードを変更します。

GitHub MCPサーバーの設定が正常に完了しました。

プログラミングの専門家を見つけることができます知的チェックボックスにチェックを入れるだけで追加できます。

チャットに戻って、今度は@ProgrammingExpertが送信しました。自動このミニプログラムの変更点を要約し、変更履歴にまとめてください。自動GitHubにプッシュしました。私のGitHubユーザー名は「Koi0101-max」で、リポジトリ名は「-demo」です。

市場に出回っている様々なMCPサービスを試してみて、どれもプロジェクトに完全には適していないと感じた場合は、独自のサービスを追加することもできます。

私のような完全な初心者にとって、Traeはいつでも相談できるプログラマーのパートナーのような存在です。彼は私のニーズを理解してくれるだけでなく、...速い反応と成果は非常に良好でした!

これは、ゼロコード開発を実現する上で真に役立つ可能性がある。

もし今、何かアイデアが浮かんだなら、アイデアの段階で終わらせずに、Traeと一緒にそれを現実のものにしてみましょう。