Local Development and Static Product Verification of Tic-Tac-Toe

Preparations

Before using CodeArts Agent, create a project to store various files in the project. After the project is created, enable the auto approval function. In this way, AI will automatically perform related operations without manual intervention.

1. Log in to CodeArts Agent by referring to Quick Start.
2. Create a project for storing files.
   1. On the top menu bar of the IDE, choose File > New > Create Project to go to the page for creating a project.
   2. Select a path for storing the project, enter the project name (for example, Tic-Tac-Toe_Demo), and click OK.

      The project name must start with a letter, and can contain a maximum of 64 characters. Letters, digits, hyphens (-), and underscores (_) are allowed.

      After the project is created, you can view the created TIC-TAC-TOE_DEMO project under EXPLORER.

3. (Optional) Select the agent running mode and authorize automatic operations.
   1. Click in the upper right corner of CodeArts Agent IDE to go to the Settings page.
   2. Choose Chats > Agents > Terminal Command Running Mode, select the running policy for the agent to execute terminal commands. This practice has many dependencies, so the manual mode is recommended.
   3. Choose Chats > Auto-approve, and click to enable the required items.

      After authorization, tasks for generating complex project-level code are executed automatically. Without authorization, some operations will need your manual confirmation when you code with CodeArts Agent.

      

      Enabling auto approval can lead to operational risks. Assess these risks carefully first and only enable this feature in a secure and trustworthy environment.

      Table 1 Parameters for auto approval

      Parameter	Description	Example
      Edit	Allows the agent to call tools like edit, write, and deleteFile to edit files on your computer.	Enabled
      Browser Access	Allows the agent to access websites in the browser.	Enabled
      Web Crawler	Allows the agent to access and capture specified web page content.	Enabled

   4. Exit the current page to complete the authorization.

Generating the Core Code and UI for Tic-Tac-Toe

1. In the input box on the CodeArts Agent chat panel, enter the following prompts and click :

   Compile the Tic-Tac-Toe game page using React, TypeScript, and Next.js 14 App Router. The requirements are as follows:
   1. The game board is horizontally and vertically centered on the page.
   2. The title and game rules are added to the page.
   3. X and O are distinguished by different colors.
   4. The code structure is standard and can be directly executed.

2. During task execution, manually confirm all terminal operations and high-risk commands and wait until the project is successfully created.

   The graph shown here is for reference only. The actual output may vary.

   Figure 1 Project creation process
   

3. Click Accept All to accept the current file modification.

Debugging the Development Environment

After the code is generated, you can verify all functions in the development environment. After confirming that the functions are normal, perform packaging and configuration to avoid logic issues in advance.

1. Start the Next.js local development server.
   1. Open the CLI on your local device. The subsequent steps use Windows 11 as an example. Press Win+R, enter cmd in the Run dialog box, and press Enter.
   2. Switch to the directory where the current project is located. The following directory is used as an example:

      D:
      cd \VS\Tic-Tac-Toe_Demo

   3. Run the following command to start the Next.js local development server and wait until the compilation is complete:

      npm run dev

      Figure 2 Server started
      

2. Open a browser, enter http://localhost:3000 in the address box, and verify the functions one by one.
   • UI: The title, game rules, and board layout are displayed properly. X and O are clearly distinguished by color.
   • Interaction: Clicking a cell places a piece. An occupied cell cannot be clicked again.
   • Logic: Horizontal, vertical, and diagonal lines are correctly evaluated for wins, and a draw is properly detected when the board is full.

Static Packaging and Verification

After the development environment passes the verification, configure packaging rules, perform compilation, and verify static resources.

1. In the input box on the CodeArts Agent chat panel, enter the following packaging rules and click :

   Modify next.config.mjs to enable static export and set the packaging output directory to out. Ensure that the code does not contain errors and can be packaged properly.

2. Package and build the project and preview the generated static resources.
   1. Open the CLI on your local device. The subsequent steps use Windows 11 as an example. Press Win+R, enter cmd in the Run dialog box, and press Enter.
   2. Switch to the directory where the current project is located. The following directory is used as an example:

      D:
      cd \VS\Tic-Tac-Toe_Demo

   3. Run the startup command to package and build the project in the production environment, and wait until the full compilation and optimization are complete.

      npm run build

   4. Run the following command to install the static file server globally (first-time setup only):

      npm install -g serve

   5. Run the following command to start the static file server:

      serve -s out

      Figure 3 Running the command for starting the static file server on the local terminal
      

3. Access the page based on the output address, and verify the functions such as the UI, interaction, and winner determination again to ensure that the static product is consistent with the verification result in the development environment.

   The graph shown here is for reference only. The actual output may vary.

Common Issues and Solutions

Modify next.config.mjs to enable static export and set the packaging output directory to out. Ensure that the code does not contain errors and can be packaged properly.