CodeBreak: AI-Assisted Development – Part 2
In Part 1 of this series, we used a template to help with our prompting. Ultimately, it generated code for us. But that code wasn’t perfect. It had many small issues. Probably the most annoying was that it often gets import statements wrong. Now, these are super easy to fix, but they still require fixing. Let’s see if we can update the template and get better results.
Our prompt in Part 1:
We want to build the ability to configure teams within the system. To accomplish this, we are going to create two new pages: a list page and a detail page.
Use the ItemListComponent for the list page and the ItemDetailComponent for the detail page.
When building this, create two new pages: TeamList (src/app/pages/team-list) and TeamDetails (src/app/pages/team-detail).
Also, create a new TeamDto.
To CRUD this data from the backend, use a new TeamsService. This service should make calls to /api/v1/teams. This endpoint will support the standard CRUD operations.
The DTO for a team should look like (leaderId and leaderName are optional). Color is optional.
Team name color leaderId (userId) leaderName (User’s display name)
When building the TeamService, build a MockTeamService that has three sample teams.
Let’s add a line at the end.
After creating all of the files, make sure all imports are valid. Make sure the TypeScript builds.
BUT, EVEN ASKING IT MAKE SURE EVERYTHING IS VALID, IT STILL FAILS!!!
Failures
- Imports
import { ItemListConfig } from '../../components/item-list/item-list-config.interface';
- Making Up Code
- No type equals color option.
But can we correct for this with better prompting?
We want to build the ability to configure teams within the system. To accomplish this, we are going to create two new pages: a list page and a detail page.
Use the ItemListComponent for the list page and the ItemDetailComponent for the detail page.
When building this, create two new pages: TeamList (src/app/pages/team-list) and TeamDetails (src/app/pages/team-detail).
Also, create a new TeamDto.
To CRUD this data from the backend, use a new TeamsService. This service should make calls to /api/v1/teams. This endpoint will support the standard CRUD operations.
The DTO for a team should look like (leaderId and leaderName are optional). Color is optional.
When building the TeamService, build a MockTeamService that has three sample teams.
After creating all of the files, make sure all imports are valid. Make sure the TypeScript builds.
For the item list component, show the following columns:
- name: string
- color: string (make sure this is a string)
- leaderName: string
For all item list columns, use only these properties:
For imports for the ItemList config, use the following imports:
import { ItemListComponent } from '../../components/item-list/item-list.component';import { ItemListConfig } from '../../components/item-list/item-list.types';
With these updates, our TeamListComponent is now generated with no errors on the first attempt.
In the next post, we will provide AI with some notes in a markdown file to simplify this process.
