DEV Community: Jinu Kim

Easily start developing with Swift even if you have zero foundation!

Jinu Kim — Tue, 25 Feb 2025 13:19:11 +0000

Free download link for Trae used in this article: www.trae.ai

Preface An efficient clipboard tool can significantly boost daily work efficiency, especially for those engaged in writing and coding. If you need to frequently copy common text or code templates from notes or code files to another place, it’s both cumbersome and time — consuming. In the Windows system, the built — in clipboard management tool allows you to conveniently store all copied content in one place. You just need to select the content you want to paste when needed, which is highly efficient and convenient. However, when I switched to the Mac system, I found that its built — in clipboard tool was completely different from that of Windows, and good third — party clipboard tools required payment. So I wondered, since I know nothing about Swift, can I use an AI IDE to develop a Mac clipboard management tool that meets my needs without writing any code? Eventually, I decided to try using Trae to achieve this goal. The result really surprised me. As a complete novice with zero knowledge of Swift, I was able to easily develop a practical Mac application without writing any code. This article will provide a detailed introduction to the entire process of using Trae to develop a Mac clipboard management tool without writing any code. Are you ready? Grab a cup of your favorite coffee or tea and explore this process with me in this article.

Trae Trae (/treɪ/) is a brand — new intelligent collaborative AI Integrated Development Environment (IDE) that is deeply integrated with AI. It offers intelligent Q&A, automatic code completion, and Agent — based AI automatic programming capabilities. When developing projects with Trae, you can collaborate flexibly with AI to enhance development efficiency.

Comprehensive IDE Features Trae provides traditional IDE functions, including code writing, project management, plugin management, source code management, etc.

Powerful AI Assistant

Intelligent Q&A While writing code, you can have a conversation with the AI assistant at any time to get help such as code explanations, code comments, and error fixes.

Real — time Code Suggestions The AI assistant can understand the current code and provide real — time code suggestions in the editor, thus improving programming efficiency.

Code Snippet Generation Describe your requirements in natural language, and the AI assistant will generate corresponding code snippets. It can even write project — level or cross — file code.

Developing Projects from Scratch Use the Builder mode to tell the AI assistant what program you want to develop. The AI assistant will provide relevant code or automatically create the required files based on your description.

Installing Trae Visit the Trae homepage to download and install the Trae application.

Install XCode Xcode is the integrated development environment (IDE) officially provided by Apple. Almost all macOS application development uses Xcode.

Features It includes code editing, interface design (Interface Builder), debugging tools, performance analysis, version control, etc.

Language Support — Swift: A modern programming language recommended by Apple, which is concise and efficient. — Objective — C: An older programming language for Apple development. Many legacy projects still use Objective — C.

Download Address You can download Xcode for free from the App Store.

Development of the Clipboard Management Tool

Create an Xcode Project Click “Create New Project…”.

Select “macOS — App”.

Enter the “Project Name” and “Organization Identifier”, and then click “Next”.

Select the directory where you want to store the project, and then complete the project creation.

The First Version of the Project Send the requirements of the application to Trae AI in text form and let it develop the clipboard management tool application. Open the Xcode project you just created.

Select the Builder mode and send the text requirements to let Trae AI generate the code. I’m using the Xcode tool to manage the project and aim to implement a clipboard history tool for the Mac system. Users can open the clipboard history panel by pressing the ⇧Shift + ⌘Cmd + V shortcut keys. The panel is located at the bottom of the screen, and its length is approximately one — third of the system interface. The panel displays the recently copied content. Users can double — click an item to copy it to the clipboard, and the panel will automatically close. There is no main interface, making it lightweight and efficient.

Trae AI will create appropriate files for us based on the current project and populate them with code. Click “Accept All” to save all the changed content.

Bug Fixing When running the Swift program through the Xcode IDE, I found that there were many bugs in the generated code. Fortunately, Trae AI can help solve these bugs. Here are some bug — fixing cases. By sending pictures, I’ll let Trae AI gradually help me solve all the bugs.

After fixing all the bugs, the program can finally run. Here is the screenshot of the running effect.

Requirement Correction From the screenshot of the running effect, we can see that the application generated by Trae AI deviates from my expectations. The clipboard can only be displayed within the “ClipHistory” panel, while I expected it to be displayed at the system level. This discrepancy might be due to my unclear description before. So, I put forward the requirements to it again:

After a series of modifications and optimizations, the clipboard has been configured as a system — level floating window. Below is the image showing the optimized result:

Position Optimization Although the clipboard has been set as a system — level floating window, its position doesn’t meet my expectations. I want the panel to be located at the bottom of the screen. So, I need to put forward the optimization requirements again:

After the optimization, the clipboard is now positioned at the very bottom of the screen.

Card — style Display and Horizontal Arrangement Judging from the current effect screenshot, the content saved in the clipboard is arranged vertically from top to bottom, which is not the effect I like. So, I propose another optimization request to Trae AI:

After a series of adjustments and optimizations, such as adjusting the card height, marking the content types, and achieving multi — screen compatibility, the final effect is shown in the following image:

So far, the clipboard management tool is basically usable. However, some minor features can still be added, such as the functions to support deleting entries and quitting the application.

Deleting Entries Next, submit the requirement for improvement to Trae AI again, asking it to support the function of deleting entries.

The adjusted effect is shown in the following image:

Exit Application Function Currently, the clipboard management tool is an application without a main window, and its icon is displayed in the top menu bar.

However, clicking on this icon currently doesn’t trigger any actions. So, I want to add a function that allows users to exit the application by clicking the menu bar icon. Therefore, I’ll make this new — feature request to Trae AI one last time:

The adjusted effect is shown in the following image:

Up to this point, the development of a basic clipboard management tool application is completed.

Summary Through multiple rounds of conversations with Trae AI, the development of the Mac clipboard management tool is finally completed. In the future, I can continue to interact with Trae AI to further improve the application, such as adding a search function and item categorization features. As can be seen from this case, Trae AI is extremely powerful, especially its Builder function. With this function, I, a novice with zero knowledge of Swift, was able to successfully develop a Mac clipboard management tool from scratch just by providing simple text descriptions. Trae AI simplifies the development process and significantly lowers the development threshold, enabling people without programming experience to quickly get started.

DeepSeek + Trae reconstructed my note — taking project in just two days.

Jinu Kim — Tue, 18 Feb 2025 06:50:17 +0000

Happy new year, everyone!

I planned to make great progress during the Spring Festival, but it was so cold on this “detour” that I caught a cold. I’m still suffering from acute bronchitis today. I’m really speechless!!

However, I still mustered up the energy to optimize two of my projects using ByteDance’s Trae AI editor (https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=techcall):

tinify — webp: It’s a terminal tool used for compressing images. By default, it converts images to the webp format, and you can also specify other image formats. The test result is amazing! A picture of more than 500 KB was compressed to only 45 KB!

md-note: This is a note-taking app I developed in 2023. Currently, I’m the only one using it. — It supports the What You See Is What You Get (WYSIWYG) feature for Markdown editing. — It enables one-click copying and pasting of articles to WeChat Official Accounts, Zhihu, and Juejin. — It allows you to insert images and videos. When inserting images, it automatically compresses and transcodes them. — It can be integrated with some open-source static site blogging systems, such as Hexo and Hugo, to achieve one-click blog publishing. — It integrates an AI feature to generate article descriptions.

The tinify — webp tool has been optimized and published on npm. If you’re interested, give it a try. As mentioned above, its image compression effect is truly amazing! My note — taking project has now met the standards for going live. However, I still want to containerize it, so the official introduction of it will be postponed by two days. So, in this sharing, I’ll mainly talk about two aspects: How good is Trae? How can DeepSeek be combined with AI — powered programming?

How good is Trae? Since the launch of Trae (https://www.trae.ai/), it has received both praise and criticism. Some people acclaim it as the shining star among domestic AI editors, claiming it outperforms Cursor and Windsurf. On the contrary, some people scold its design as extremely poor, complaining about bad user experiences here and there. These two viewpoints are the most extreme ones I’ve seen in related articles. I doubt whether those people have actually used Trae to work on real projects. I’m pretty sure most of them haven’t, because those who have truly used it know that Trae is good, but it hasn’t reached the level of Cursor and Windsurf yet. It does have its flaws, but it’s far from being as bad as they described. It seems that ever since the emergence of AI, exaggerated praise and slander have become all too common. I hope everyone can see clearly and not be misled by such information. During the holiday, I spent two days using Trae to refactor my previous note — taking project. The actual experience was remarkable: — I used the Builder to create a Vue3 project from scratch. — I redrew the UI pages and wrote common components and methods according to the previous project design. — I created a store to manage common variables among pages uniformly. — I re — encapsulated axios based on the APIs provided by the server and then made a unified plan for the APIs on the front — end. — It also handled the front — end and back — end joint debugging. — On the server — side, I optimized and rewrote the interaction with Github. — I added an AI — powered feature to generate article summaries. Combined with the popular DeepSeek during the Spring Festival, it only took two days to completely renovate my note — taking project, and the whole process cost me nothing! Trae definitely deserves to be my top “employee” during the Spring Festival. Besides Cursor, using Trae to access Claude — 3.5 — Sonnet for free is an incredibly pleasant experience! First of all, in terms of usability, it can understand what you want even when you input in Chinese. You don’t have to translate your ideas into English to communicate with it. Secondly, Trae supports specifying files, folders, or a specific section of code. In addition, you can upload pictures to make your requirements clearer to Trae, which is similar to dev0. Although there is no cursorrule — like feature, the coding process is still very smooth. Most importantly, as of now, Claude — 3.5 — Sonnet can be used for free. It’s like having a top — notch programming expert at your disposal. As long as your requirements are clear, it can implement them without charging you a single cent! Finally, I successfully refactored a project using Trae without encountering any glitches. Whenever there was a problem, Trae could promptly solve and fix it, which proves its capabilities as an AI editor. ### DeepSeek as a Solution Designer There isn’t an advanced way to combine DeepSeek and Trae as many people might expect. In fact, currently, Trae doesn’t even support DeepSeek. At first, I personally guided my “employee” Trae, but the efficiency was low. After DeepSeek became popular, I “recruited” it to assist with some extended tasks, such as: — Letting DeepSeek refine my ideas. — Having it clearly and systematically outline how to meet a certain requirement. — Finally, I sent the organized content to Trae for implementation. Since then, the efficiency has improved significantly. Handing over the AI — generated output to another AI for implementation shows a high level of synergy between them. We have to marvel at the capabilities of DeepSeek and Claude — 3.5 — Sonnet (the built — in model of Trae). They truly are among the top large — scale models in the AI field. DeepSeek can really analyze your ideas thoroughly and provide a reasonable solution. After I send this solution to Trae, all I need to do is verification. Throughout the process, I only act as the “boss” who makes decisions and conducts tests, while the rest of the work is done by DeepSeek and Trae. However, I’m still not entirely satisfied because the development process still relies heavily on human factors. The ideal state I envision is to have a workflow to complete the entire output process: — Provide an initial product design demo to DeepSeek. — Then DeepSeek enriches it and generates a usable Product Requirement Document (PRD). — Based on the PRD, it generates product design drafts. — Trae generates project code according to the product design drafts and PRD and conducts unit tests on the code. — Finally, humans test the project, find bugs, and hand them over to Trae for repair. — After confirmation, the project is launched and delivered.

If the development can follow this process, the efficiency of developing a product will be significantly improved. Of course, the assistance of professionals is still indispensable in this process. It would be quite difficult for complete beginners. That’s all about what I’ve been doing and my thoughts recently. If it’s helpful to you, please interact more!

T
AI

When dealing with requirements using Trae, programmers should no longer refer to themselves as “code farmers” in the future.

Jinu Kim — Mon, 17 Feb 2025 08:52:56 +0000

The free download link for Trae used in this article is:https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=medium_article

Introduction Recently, I received a business requirement. The general background is as follows: The business background is that our product is connected to a third — party system. I need to provide interfaces to allow the third — party to import their dictionary table data into our database. For each dictionary table, only new additions and deletions are considered. It’s a very simple CRUD requirement. There’s no complexity for me at all, but it’s extremely cumbersome. With 10 tables and only considering new additions and deletions, I still have to write 20 interfaces, which is very time — consuming. Each table has many fields, and the database has non — null and length restrictions. You must do a good job in verification; otherwise, if there’s an error, you’ll be the one to be held accountable. As a senior backend programmer, I’ve always been resistant to this kind of requirement because it’s all physical labor, including development, testing, and going live. There’s no technical content and no room for improvement. Every time I’ve done similar requirements before, I’ve deeply felt like a migrant worker. In fact, I’ve always wanted to integrate AI into my daily development work. However, I’ve always had this mindset: if I can finish a task in 10 minutes, why spend 20 minutes exploring how to use AI to get it done? So I’ve been procrastinating, and I haven’t used AI much in my daily development. But this time, the workload was still a bit large. With so many interfaces and tables, and having to sort out the parameter verification, I couldn’t afford to waste this time. As a former ByteDance employee, I also noticed that Juejin is promoting Trae. I must embrace and support the tool of my former employer. So this time, I decided to give Trae a try. This requirement itself is not complicated; it’s just simple CRUD. Currently, I’ve already implemented all the basic functions. I’m recording the process of this usage, and I also hope that everyone can use AI as soon as possible to relieve their work burden.

Installation of Trae

The download link is provided here. Currently, it only supports macOS. Windows users may need to wait a bit. I estimate that Windows support will be available soon. I blindly guess that it’s because most of ByteDance’s developers use Macs. It might really be not that easy to find Windows developers.

https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=medium_article

Currently, Trae offers two modes, namely Chat and Builder.

It seems that Trae can do quite a lot. My goal is to make modifications to an existing project, so I chose the Chat mode. The Builder mode is mainly for building a project from scratch. If you need to create a page or something, you can use it, but I won’t use it this time. Currently, code completion and refactoring are standard features of all AI tools. This time, I don’t just want it to complete code; I want it to help me finish my work. The models used are Claude — 3.5 — Sonnet and GPT — 4o, and they are currently free of charge.

Code Generation

The first step, of course, is to create the entity classes. At first, I created the entity classes on my own and copied the previous fields over.

The AI directly wrote the interfaces and Mappers. However, I realized that there were still a bunch of tables, and writing the entity classes by myself would be too complicated. Oh, right. I also had to perform some non — null and length validations. So I thought it would be better to just let the AI handle this task. The actual fields in the tables are very numerous, so I won’t list them all here.

Thanks to it! The AI solved the most headache — inducing parameter verification problem for me. My interfaces are provided for third — parties. If I don’t perform the verification, there’s a high probability that errors will occur when inserting data into the database. It could be due to exceeding the length limit or the database’s non — null verification. The AI has added all the necessary annotations, which saves me a lot of trouble.

It has considered quite comprehensively. It performs much better than I did when I just graduated and started working.

Then it’s all about repetitive work. I just need to feed the table structures I need to it one by one. Here, I’ll skip the screenshots of other table structures. After creating the entity classes, I can take it easy, but it can’t. Come on, write the interfaces and other related code for me.

I didn’t use any complicated prompting words, but it did a great job overall. It also took into account the subsequent tasks. It seems to have considered the output limit based on the context, as there are many methods marked as “TODO”. Let’s just keep going.

Next, it’s time to write the simplest CRUD code, including the Controller, Service, Mapper, and XML files. All that’s left is to copy and paste to finish the task.

AI Code Fix

Although the code has been written, there are some errors. Of course, even if I were to copy — paste the code myself, there would definitely be errors. For example, here the AI generated PostMapping, but the Mapping we use is encapsulated by the company’s components, which is inconsistent with the previous Controller code.

Trae offers an AI repair function. When you click on this function, it can automatically recognize the intention for repair. Based on the context of the code, it understands what I want to modify. I’m very satisfied with it.

Although I could fix it by doing a full — scale replacement myself, it just feels good that it can correct the errors on its own. What I mentioned above are all about code generation work. Actually, there were some components like EasyCode that could also help us with this before, but this is still a completely different experience, and we can also let it do more work. ### Intention Recognition There is another feature that I find extremely impressive, which is intention recognition. For the interfaces provided by a Spring Cloud project, the backend always has a logic for returning results after fallback. That is, we need to write an OpenApiNewFallBackImpl class, which contains fixed error — return information. The methods in this class need to be consistent with those in OpenApiNew. This time, I added more than a dozen interfaces. Naturally, I also had to add more than a dozen corresponding interfaces to OpenApiNewFallBackImpl. Previously, I always copied them manually and had to write the corresponding method names, which was really annoying.

Trae can provide context. Initially, I selected the OpenApi file with the intention of asking it to help me fix the code errors.

However, accidentally, I sent the request before I had a chance to write the prompting words. To my surprise, it directly recognized my intention. Well done! It even spared me the trouble of writing prompting words.

In Conclusion The above is the entire process of using Trae to complete one of my own requirements, which took a whole day. Finally, I’d like to share my thoughts. This article describes a scenario that backend programmers often encounter. If it were five years ago, I would definitely have carefully coded each interface. But now, I must learn to leverage the power of AI. How should we embrace AI? Should we start asking AI instead of searching on Baidu when we have problems? Should we learn how to write good prompting words? Or should we study the principles of AI in detail to become experts? In my opinion, we should try to use AI for all our work. Only in this way can we truly embrace AI. In this process, you’ll realize what AI can do and what it still lacks the ability to do. Only then can you make judgments about future trends in advance and find new opportunities for yourself. In my view, the biggest change AI brings to backend development is that it eliminates the “manual labor”. Programmers often self — deprecatingly call themselves “code farmers”. I think we don’t have to use this term anymore. What we do is all mental work, and we can leave the manual labor to AI. However, I’m not fantasizing that AI can handle all the work for now. I also hope this situation comes later. And I always believe that humans should be in control of systems and programs, and AI is just an assistant. But since AI can take over those time — consuming and laborious tasks, isn’t it better to use the remaining time to write some articles for everyone?

Cursor too expensive? Trae lets you use Claude for free—build a full-stack app in just 10 minutes! 🚀

Jinu Kim — Thu, 13 Feb 2025 07:14:27 +0000

Here's the free download link for Trae mentioned in this article: https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=techcall
🎉

As a developer, have you ever tried various AI programming tools to improve your development efficiency?
Or perhaps you're not a developer but want to use AI programming to bring your ideas to life?

Cursor is undoubtedly one of the best tools out there, but its high subscription cost has deterred many developers.
Now, your savior has arrived! ByteDance has launched a brand-new AI IDE called Trae.

Trae not only offers native Chinese support and a user-friendly interactive experience, but what's even more exciting is that it comes equipped with the powerful Claude 3.5 and GPT-4.0 by default. Best of all, it is currently available for unlimited free use for a limited time!

This means you can experience AI-driven programming acceleration at zero cost, significantly boosting your development efficiency.

The advantages of Trae go beyond just free access to Claude 3.5 and GPT-4.0. It also offers the following highlights:

• Powerful Builder Functionality:

You can develop complete projects from scratch. The AI automatically calls a series of tools based on the developer's requirements, accurately breaks down tasks, and ensures an efficient development process.

• Fully Localized Chinese Interface and Design:

It provides a smoother development experience for Chinese developers, making it easy to use even for beginners with no coding knowledge.

• Integration with Common Development Tools and Plugins:

Supports configuration migration from VS Code or Cursor, reducing migration costs.

To give everyone a more intuitive understanding of Trae's powerful features, I will develop a currently trending website on Xiaohongshu called "Giving Foreigners Chinese Names" in just 10 minutes.

Let me first show you the final product, including how it looks on both desktop and mobile.

Next, let's begin the hands-on process. First, we'll install and register Trae, which currently only supports Mac.

Official website: https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=techcall

Next, create a new folder and name it "Give Foreigners Chinese Names." Open this folder in Trae and switch to "Builder" mode on the right-hand side.

Next, enter the prompt. The prompt is as follows:

# Product Vision  
Develop a web-based intelligent English-to-Chinese name recommendation system designed to provide foreign friends with personalized Chinese names that are rich in cultural meaning. The system features a simple English interface and offers detailed cultural interpretations for each recommended Chinese name, helping users gain a deeper understanding of the significance of names in Chinese traditional culture.

---

# Core Features  

## 1. Intelligent Chinese Name Generation  
- **Input**: The user's English name (supports either the given name alone or the "surname + given name" format).  
- **Output**: Three unique Chinese name suggestions, each meeting the following criteria:  
  - **Phonetic Similarity**: The pronunciation should closely resemble the original English name as much as possible.  
  - **Compliance with Norms**: Adheres to traditional Chinese naming conventions and norms.  
  - **Positive Meaning**: The name should have beautiful meanings, balanced combinations, and convey positive connotations.  
  - **Cultural Appropriateness**: Avoids any cultural taboos or inappropriate meanings.  

## 2. Cultural Interpretation (for each recommended Chinese name):  
- **Character-by-Character Explanation**: Explains the meaning of each individual Chinese character in the name.  
- **Overall Meaning**: Describes the combined meaning of the entire name.  
- **Cultural Significance**: Highlights the Chinese traditional cultural elements embedded in the name.  
- **Personality Traits**: Describes the personality traits implied by the name.  
- **English Translation**: Provides a clear English explanation of the name's meaning to help foreign users understand.  

## 3. User Experience  
- **Simple Interface**: The design is clean and intuitive, making it easy to use.  
- **Convenient Process**: The steps for converting a name should not exceed three.  
- **Clear Presentation**: Results are presented in a clear and easy-to-understand manner.  
- **Enhanced Features**: Allows users to save and export their favorite name suggestions.  

---

# Example Output  

**Input**: Michael  
**Example Output**:  
1. **米凯乐 (Mi Kai Le)**  
   - **Meaning**: Triumph and joy  
   - **English Explanation**: One who brings joy and triumph  
   - **Cultural Significance**: Symbolizes positivity and vitality  

2. **明凯洛 (Ming Kai Luo)**  
   - **Meaning**: Bright and cheerful  
   - **English Explanation**: Bright and cheerful spirit  
   - **Cultural Significance**: Represents wisdom and an open mind  

3. **麦克龙 (Mai Ke Long)**  
   - **Meaning**: Distinguished and extraordinary  
   - **English Explanation**: Distinguished and extraordinary  
   - **Cultural Significance**: Reflects a unique personality and great ambition  

---

# Core Values  
- Provide personalized and culturally rich Chinese name options.  
- Promote cultural exchange and understanding between China and other countries.

Trae automatically generates the code file. Once the generation is complete, we need to click "Accept All" and then click "Run."

After running it and opening the website, an error was displayed, so I asked it to make modifications.

After this issue was fixed, I ran it again, and a new problem occurred. I copied the issue and asked it to make further modifications.

After this fix, it ran successfully.

You can see that the current style is not visually appealing, so I asked it to make adjustments.

After the modifications, the style looks much better.

It’s currently Chinese New Year, so I asked it to make the UI design more festive.

At the same time, I integrated a large model for intelligent generation. I’m using Zhipu’s GLM-4. The prompt is as follows:

I would like to use Zhipu AI's large model, GLM-4 Flash, to generate names. My API Key is …… Please assist me with the following:

1. Carefully think through and design an appropriate prompt to ensure that the generated names meet my desired format (e.g., Chinese names, English names, etc., and whether to consider factors such as meaning or cultural significance).
2. Based on Zhipu AI's API documentation (<https://bigmodel.cn/dev/api/normal-model/glm-4>) and my API Key, integrate the GLM-4 Flash model and conduct testing.

Please first confirm whether you can complete the above tasks before proceeding with the actual implementation.

We can see the prompt it generated, and this time it successfully ran on the first attempt.

Through this simple example, we can see the tremendous potential of Trae in improving development efficiency. Even for full-stack projects, Trae leverages its powerful AI capabilities to help us quickly build prototypes and complete development.

Recently, Cursor has been somewhat unstable, and its free usage quota is limited. The emergence of Trae fills this gap, allowing more people to enjoy the convenience brought by AI.

If you’re looking for a replacement for Cursor or want to experience a new AI-driven way of programming, give Trae a try—it might just surprise you in unexpected ways!

This year might mark the beginning of the widespread application of AI programming!

If you found this helpful, feel free to leave a like. If you want to receive updates as soon as possible, consider following me as well. Thank you for reading my article, and I’ll see you next time!

Super smooth: Use Trae to track which executive orders Trump has signed！

Jinu Kim — Thu, 13 Feb 2025 06:16:54 +0000

A new leader always brings a fiery start, and the new U.S. President, Donald Trump, is no exception. Every day, the White House website—built on WordPress—gets updated with numerous newly signed executive orders. For instance, on January 22nd alone, eight orders were published, almost rivaling the number of his tweets.

Today, let's use ByteDance's newly launched Trae IDE to fetch all the signed executive orders in one go—perfect for staying updated on The Donald's latest moves or simply satisfying your curiosity.

Download and Installation

Head over to the official website (https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=techcall) to download the Trae IDE installer. Currently, it supports macOS only. You'll need to handle the issue of accessing the site via a VPN or proxy. Make sure to add *.trae.ai to the user-rule of your PAC configuration. Once that's set up, you'll be able to log in to the IDE without any issues.

Implementation of the Requirement

Here’s the context: I’m a backend developer, so my primary goal is to test whether Trae can genuinely assist me in coding more efficiently and improve productivity in real-world project development.

Create a Project and Python Virtual Environment

Essentially, it’s as simple as opening a new folder. If you’re familiar with VS Code, this process will feel very intuitive.

Then, open the terminal and use uv to create a Python virtual environment:

uv init .  
uv vent --python 3.12.8

Pro Tip: If you’re completely new to this, don’t worry! You can simply ask the chat panel on the right side of Trae for help—it’s there to guide you step by step.

Translation: Prompt for Requirement Submission

Requirement Prompt:

I need to retrieve the list of all articles from the webpage www.whitehouse.gov/presidential-actions, and the titles of the articles must be translated into Chinese.

HTML structure of an article:

Here is an example of the HTML code for one article (please verify the actual structure by inspecting the webpage):

<div class="wp-block-group wp-block-whitehouse-post-template__content has-global-padding is-layout-constrained wp-container-core-group-is-layout-6 wp-block-group-is-layout-constrained">  
  <h2 class="wp-block-post-title has-heading-4-font-size">
    <a href="https://www.whitehouse.gov/presidential-actions/2025/01/executive-grant-of-clemency-for-terence-sutton/" target="_self">
      Executive Grant of Clemency for Terence Sutton
    </a>
  </h2>   
  <div class="wp-block-group wp-block-whitehouse-post-template__meta is-nowrap is-layout-flex wp-container-core-group-is-layout-5 wp-block-group-is-layout-flex">
    <div class="taxonomy-category wp-block-post-terms">
      <a href="https://www.whitehouse.gov/presidential-actions/" rel="tag">Presidential Actions</a>
    </div>  
    <div class="wp-block-post-date">
      <time datetime="2025-01-22T18:19:33-05:00">January 22, 2025</time>
    </div>
  </div> 
</div>

Required data to extract for each article:
- Title of the article
- Link to the article
- Publication date

Pagination:

The article list spans multiple pages. Below is an example of the HTML structure for pagination (please verify the actual structure by inspecting the webpage):

<nav class="wp-block-query-pagination is-layout-flex wp-block-query-pagination-is-layout-flex" aria-label="Pagination">   
  <div class="wp-block-query-pagination-numbers">
    <span data-wp-key="index-0" aria-current="page" class="page-numbers current">1</span> 
    <a data-wp-key="index-1" data-wp-on--click="core/query::actions.navigate" class="page-numbers" href="https://www.whitehouse.gov/presidential-actions/page/2/">2</a> 
    <a data-wp-key="index-2" data-wp-on--click="core/query::actions.navigate" class="page-numbers" href="https://www.whitehouse.gov/presidential-actions/page/3/">3</a> 
    <span data-wp-key="index-3" class="page-numbers dots">…</span> 
    <a data-wp-key="index-4" data-wp-on--click="core/query::actions.navigate" class="page-numbers" href="https://www.whitehouse.gov/presidential-actions/page/6/">6</a>
  </div>  
  <a data-wp-key="query-pagination-next" data-wp-on--click="core/query::actions.navigate" data-wp-on-async--mouseenter="core/query::actions.prefetch" data-wp-watch="core/query::callbacks.prefetch" href="https://www.whitehouse.gov/presidential-actions/page/2/" class="wp-block-query-pagination-next">Next</a> 
</nav>

Required functionality:
- Automatically navigate through all pages to retrieve the complete list of articles.

Dependency Installation and Code Execution:

Install the necessary dependencies and execute the code in the project environment.
Example: Open the project folder, and click "Run" to install dependencies.

Note:

The above HTML structures should be verified and copied from the actual webpage by inspecting the elements. Clear and precise requirements will lead to higher efficiency.

This prompt provides a clear structure for extracting the required data and automating the process of retrieving and translating article titles.

Clicking "Apply" will create an actual executable code file.

Then you can run the code file using:

python whitehouse_scraper.py

The script will execute, and it will also print logs during the process.

Since there was no explicit instruction on where to store the data, it was automatically saved into a .txt file, as shown in the image.

Of course, the code can be further optimized to store the data in a database.

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from webdriver_manager.chrome import ChromeDriverManager
from datetime import datetime
import time
import os
import requests
from bs4 import BeautifulSoup
from translate import Translator

def scrape_whitehouse_actions():
    try:
        # Initialize translator and news list
        translator = Translator(to_lang='zh')
        news_items = []

        # Set request headers
        headers = {
            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
        }

        # Fetch articles from all pages
        page = 1
        while True:
            # Build pagination URL
            if page == 1:
                url = "https://www.whitehouse.gov/presidential-actions/"
            else:
                url = f"https://www.whitehouse.gov/presidential-actions/page/{page}/"

            print(f"Accessing page {page}...")
            response = requests.get(url, headers=headers, timeout=30)

            # Check if it's the last page
            if response.status_code == 404:
                print("Reached the last page")
                break

            response.raise_for_status()
            soup = BeautifulSoup(response.text, 'html.parser')

            # Get all articles on the current page
            articles = soup.find_all('div', class_='wp-block-whitehouse-post-template__content')
            if not articles:
                print("No articles found on the current page, possibly reached the last page")
                break

            print(f"Found {len(articles)} articles on page {page}")

            # Process articles on the current page
            for article in articles:
                try:
                    # Extract title and link
                    title_element = article.find('h2', class_='wp-block-post-title')
                    if title_element:
                        link_element = title_element.find('a')
                        title = link_element.text.strip() if link_element else "No Title"
                        try:
                            translated_title = translator.translate(title)
                        except Exception as e:
                            print(f"Translation error: {str(e)}")
                            translated_title = title

                        link = link_element.get('href') if link_element else "#"
                        date_element = article.find('time')
                        date = date_element.get('datetime') if date_element else "No Date"

                        print(f"Found article: {title[:50]}...")
                        news_items.append({
                            'title': title,
                            'translated_title': translated_title,
                            'link': link,
                            'date': date
                        })
                except Exception as e:
                    print(f"Error processing article: {str(e)}")
                    continue

            # Check for next page
            next_link = soup.find('a', class_='wp-block-query-pagination-next')
            if not next_link:
                print("No more pages")
                break

            # Add delay to avoid making requests too quickly
            time.sleep(2)
            page += 1

        # Save all articles to a file
        timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
        filename = f'whitehouse_actions_{timestamp}.txt'
        with open(filename, 'w', encoding='utf-8') as f:
            for item in news_items:
                f.write(f"Original Title: {item['title']}\n")
                f.write(f"Translated Title: {item['translated_title']}\n")
                f.write(f"Link: {item['link']}\n")
                f.write(f"Date: {item['date']}\n")
                f.write('-' * 80 + '\n')

        print(f"Successfully scraped a total of {len(news_items)} articles, saved to {filename}")
        return news_items

    except Exception as e:
        print(f"An error occurred during scraping: {str(e)}")
        return None

# Remove the finally block since the driver is no longer needed

if __name__ == "__main__":
    scrape_whitehouse_actions()

Summary
Overall, compared to previous tools like the Marscode plugin, the experience is much smoother.

The prerequisite is to have clear requirements and to combine product thinking with technical implementation to craft the best prompts for Trae.

Additionally, Tare has optimized the terminal experience, allowing error messages to be quickly sent to the chat window, making debugging highly efficient.