Does AI Understand Angular Development? We Put ChatGPT to the Test

Artificial intelligence (AI) is, by far, the most promising next-generation technology, standing as a beacon of innovation. AI technologies offer solutions and opportunities that were considered impossible.

A standout example of this innovation is ChatGPT, a generative AI solution developed by OpenAI that completely innovates online information searches and can be integrated with custom software. It can be used as a chatbot for user interactions, coding assistance, quick provision of necessary information, etc. No wonder that since its release, ChatGPT has surpassed a million users in just 5 days.  Today, we will discuss the advantages that generative AI development services and the usage of ChatGPT, in particular, can bring to ensure rapid software development.

In this article, you can find some tips and prompt examples for enhanced coding with Angular.

Business Advantages of Using ChatGPT for Angular Development

A survey reveals that 92% of U.S.-based developers are already using AI to enhance coding, while 70% of developers state that such AI tools significantly boost their efficiency. Let's clarify what these numbers mean from a business perspective.

Rapid software development

AI tools like ChatGPT can rapidly generate boilerplate code and reusable components. Such an approach saves developers' time and effort, accelerating the solution's time-to-market. This is especially useful for projects where speed is the priority, like developing prototypes, MVPs, or other apps that should take a particular market niche as soon as possible.

Improved code quality and consistency

AI tools like ChatGPT use best coding practices to generate well-structured and optimized Angular code. They can also be used for automated code reviews. For example, ChatGPT can assist in identifying and fixing errors by analyzing error messages. It can also provide developers with useful tips on solving the problems. Such an approach reduces debugging time while assisting developers in keeping the code clean and maintainable. The output of such efforts is a stable app that provides a consistent and satisfying user experience, which is essential for business.

Reduced development costs

As has been mentioned before, AI tools can automate repetitive coding tasks, which reduces the need for extensive manual work. With an AI-assisted approach, developers spend less time on routine tasks while staying focused on developing more complex algorithms. More efficient human resource involvement can reduce the cost of developing an app dramatically.

Enhanced software maintainability

AI tools provide developers with many useful tips that impact the overall quality of the final product. In particular, ChatGPT can suggest refactoring strategies and guidance that help teams produce well-organized and maintainable code. In addition, ChatGPT can be used for generating consistent and informative project documentation, which assists the team in software maintenance and can be useful when it comes to ongoing application updates.

Using ChatGPT: Common Challenges and Tips for Solving Them

Some developers are rather skeptical about the value of using ChatGPT for enhanced coding. Common claims include poor quality of outputs, security concerns, and AI’s failure to comprehend requests properly, which also translates into misleading outputs. Let’s explore these challenges and simple yet effective tips that developers should implement to benefit from using ChatGPT.

Poor Quality of Outputs

ChatGPT is not always capable of providing the right output. Sometimes, it delivers inefficient code or may fail to handle particular coding tasks at all. A common reason for such a problem is the use of a complimentary version of ChatGPT.

To begin with, it's important to understand that there are two primary versions of ChatGPT available for use: the complimentary Version 3.5 and the premium Version 4. The free Version 3.5 has limitations, particularly in its ability to write code effectively. It is also important to note that Version 3.5 is restricted by design and does not have the capability to search for real-time information or update its database beyond the year 2021. On the other hand, for a monthly fee of $20, users can upgrade to Version 4. This premium version offers significantly enhanced performance, especially in coding tasks, and regularly introduces new and useful features, ensuring it remains up-to-date with the latest advancements and user needs.

A Question of Security

Confidentiality is a common concern when it comes to using Open AI. Even ChatGPT itself recommends its users to avoid inputting private or sensitive data. In addition, by exposing sensitive data to such an open-source platform, developers may violate security regulations.

Therefore, the best way to stay on the safe side and stay compliant is to be careful with what you send to ChatGPT. Developers should not input specific company data or confidential information as everything will be recorded and probably used for the next version training.

Failure to Comprehend User Request Properly

As has been already mentioned, ChatGPT may fail to understand user requests, which results in poor or misleading outputs. Even though its Version 4 is much more powerful than the complimentary Version 3.5, developers may still face such a challenge while using it. In many cases, the source of the problem is a poorly-written prompt.

To mitigate such a challenge and ensure high-quality outputs, users should write grammatically correct, complete sentences that describe everything important to get a high-quality answer. A clear prompt is vital for getting a clear response. It is also useful to provide ChatGPT with examples that help AI understand what exactly the user needs. As a result, ChatGPT will be capable of extending existing examples with proper results. Also, developers should remember that ChatGPT can be not so good on the first try. Sometimes, a valid option is asking for one more answer generation. In many cases, ChatGPT will provide a more satisfactory result or eliminate a possible error in the code.

Indeed, these are not the only challenges associated with the use of ChatGPT for enhanced coding. While the above-mentioned obstacles are very common and can often be solved with the right approach, it is important to remember that ChatGPT cannot solve all coding tasks, and human work still remains vital. It is useful to apply it for assistance to human developers but never to view it as a universal and autonomous solution for coding.

Code generation prompt

Let's write a clear prompt with strict instructions so that ChatGPT will understand the whole picture and give us exactly what we need.

Prompt: Imagine you are developing a shop website. You need to give users the possibility to create an account where they will have ordering information and payment methods.

Generate an Angular 16 version sign-up page component. Use the reactive form approach and add simple validators to every field.  Skip the whole Angular app setup process and hive only the TypeScript file. Explain the process and give useful notes.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html', // Ensure you link the correct template URL
  styleUrls: ['./sign-up.component.css'] // Optional if you have specific styles
})
export class SignUpComponent implements OnInit {
  signUpForm: FormGroup; // This will hold our form

  constructor(private fb: FormBuilder) { } // FormBuilder is injected here

  ngOnInit(): void {
    this.initForm();
  }

  private initForm(): void {
    this.signUpForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(5)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
      confirmPassword: ['', Validators.required]
    }, {
      validator: this.mustMatch('password', 'confirmPassword') // Custom validator for password matching
    });
  }

  // Custom validator to check if two fields match
  private mustMatch(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
      const control = formGroup.controls[controlName];
      const matchingControl = formGroup.controls[matchingControlName];

      if (matchingControl.errors && !matchingControl.errors.mustMatch) {
        // return if another validator has already found an error on the matchingControl
        return;
      }

      // Set error on matchingControl if validation fails
      if (control.value !== matchingControl.value) {
        matchingControl.setErrors({ mustMatch: true });
      } else {
        matchingControl.setErrors(null);
      }
    };
  }

  onSubmit() {
    // Here you can handle form submission
    if (this.signUpForm.valid) {
      console.log('Form Data:', this.signUpForm.value);
      // Process data or send it over to a server
    }
  }
}

Here, we get the example of an Angular development component with all the needed methods, properties, and injections for the start. It also includes informative comments on every important thing inside, an explanation of the steps, and notes with useful information. In case we did not ask only about theTypeScript file - ChatGPTwould describe all paths with examples of project setup, packages installing, etc.

Test generation prompt based on example

Now, we want to add some unit tests to our generated Angular sign-up page component. A unit test is a certain way of verifying the functionality of individual components or units of code.

Prompt:Generate unit tests for the next Angular sign-up page component.
Component: (paste code here)

This time, we will put in the component code to get the needed results and check chatbot possibilities to work with code examples. The answer is divided into categories so we can choose what to add:

1. Setup and Basic Test Configuration

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
import { SignUpComponent } from './sign-up.component';

describe('SignUpComponent', () => {
  let component: SignUpComponent;
  let fixture: ComponentFixture<SignUpComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ SignUpComponent ],
      imports: [ ReactiveFormsModule ],
      providers: [ FormBuilder ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(SignUpComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});	

2. Testing Form Initialization

it('form should be initialized with all fields', () => {
  expect(component.signUpForm.contains('username')).toBeTrue();
  expect(component.signUpForm.contains('email')).toBeTrue();
  expect(component.signUpForm.contains('password')).toBeTrue();
  expect(component.signUpForm.contains('confirmPassword')).toBeTrue();
});

it('should require all fields', () => {
  let username = component.signUpForm.get('username');
  let email = component.signUpForm.get('email');
  let password = component.signUpForm.get('password');
  let confirmPassword = component.signUpForm.get('confirmPassword');

  username.setValue('');
  email.setValue('');
  password.setValue('');
  confirmPassword.setValue('');

  expect(username.valid).toBeFalsy();
  expect(email.valid).toBeFalsy();
  expect(password.valid).toBeFalsy();
  expect(confirmPassword.valid).toBeFalsy();
});

3. Testing Validators

it('username should have minlength validator', () => {
  let username = component.signUpForm.get('username');
  username.setValue('abc');
  expect(username.errors['minlength']).toBeTruthy();
});

it('email field should have email format validator', () => {
  let email = component.signUpForm.get('email');
  email.setValue('test');
  expect(email.errors['email']).toBeTruthy();
});

it('password should have minlength validator', () => {
  let password = component.signUpForm.get('password');
  password.setValue('1234');
  expect(password.errors['minlength']).toBeTruthy();
});

4. Testing Custom Validators

it('should invalidate form if passwords do not match', () => {
  component.signUpForm.get('password').setValue('12345678');
  component.signUpForm.get('confirmPassword').setValue('12345679');
  expect(component.signUpForm.errors['mustMatch']).toBeTruthy();
  expect(component.signUpForm.valid).toBeFalsy();
});

it('should validate form if passwords match', () => {
  component.signUpForm.get('password').setValue('12345678');
  component.signUpForm.get('confirmPassword').setValue('12345678');
  expect(component.signUpForm.valid).toBeTruthy();
});

5. Test Form Submission

it('should not submit form if it is invalid', () => {
  component.signUpForm.get('username').setValue(''); // leave invalid
  spyOn(console, 'log');

  component.onSubmit();
  expect(console.log).not.toHaveBeenCalled();
});

it('should submit form if it is valid', () => {
  component.signUpForm.setValue({
    username: 'testuser',
    email: '[email protected]',
    password: '12345678',
    confirmPassword: '12345678'
  });
  spyOn(console, 'log');

  component.onSubmit();
  expect(console.log).toHaveBeenCalledWith('Form Data:', component.signUpForm.value);
});

And here it is. We have unit tests that cover various aspects of our sign-up page, ensuring the form initializes, validates correctly, and behaves as expected during submission. Not sure that everything will work without corrections in code, but we already saved a lot of time by skipping the part of thinking about various scenarios and preparing basic test configurations.

Code refactoring prompt

Imagine we have some component and want to refactor/review it to improve code efficiency, readability, or for any other reason. Let ChatGPT do this work for us.

Prompt:Review and refactor the next Angular component. Give suggestions and recommendations. Component: (paste code here)

As a result, we get issue points, code examples, and details.

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
})
export class UsersComponent implements OnInit {
  public users: User[]; // Assuming User is a defined interface or class
  public activeUserId: number = 123; // Default ID initialized here, using a more descriptive name

  constructor() {}

  ngOnInit(): void {
    this.initializeActiveUser();
  }

  initializeActiveUser(): void {
    this.activeUserId = this.getDefaultUserId(); // Use a method to get default or specific user ID
  }

  onUserClick(userId?: number): void {
    this.activeUserId = userId || this.getDefaultUserId();
  }

  private getDefaultUserId(): number {
    return 123; // Centralized default user ID
  }
}

This practice is very useful, especially to the developers that don’t have much coding experience. The system is not so good and does not replace human code review, but it is a great opportunity to save code reviewers time.

Our expertise in AI software development

All of the insights mentioned above are the results of our extensive research and experimentation with large language models and other AI-based technologies. In particular, we have a successful experience of creating Leo, an email auto-response solution on the top of ChatGPT. Our platform uses information from thoroughly organized and categorized databases to provide fast and personalized responses to customer emails and website form submissions. Leo also qualifies and scores leads based on request type, industry, and technology match, allowing our sales team to ensure custom workflows corresponding to lead categories.

Driven by our successful experience in corporate AI transformation, we have already successfully employed LLMs and custom ML algorithms to create AI employees. For example:

• Leonardo, Leobit’s AI-based HR assistant that provides answers to the employees’ FAQs by retrieving the relevant information from the company’s curated knowledge base.
• Leora, our vocalized AI sales assistant that uses the company’s knowledge base to provide detailed and personalized answers to prospects.

Leobit teams actively use ChatGPT to accelerate software development, applying best practices and tailored prompts in our workflow. While we recognize its limitations, particularly with technically complex tasks, we also see its significant potential to enhance rapid and reliable development.

Conclusions

ChatGPT represents a remarkable advancement in the domain of AI-driven development tools. We have just demonstrated several examples of implementing it that may help a business enhance software development speed, improve code quality, reduce the cost of development, and make software more maintainable. In addition, ChatGPT can handle a very broad range of other business workflows, such as creating documents, providing information on different topics, translating texts, providing tips and suggestions for technical challenges, and so on… Overall, ChatGPT is a powerful tool for software developers and other employees willing to enhance workflow efficiency. This great diversity of use cases makes it a wise choice for anyone who wants to enhance custom software development and embrace automation.