Customer Relationship Management (CRM) systems are widely used in various industries to manage interactions with customers and streamline sales processes. In this tutorial, we will learn how to build a CRM system from scratch using Spring Boot and Angular.<\/p>\n
We will use Spring Boot to create a backend API for CRUD operations on customer data, and Angular for building a front-end user interface to interact with the CRM system.<\/p>\n
By the end of this tutorial, you will have a fully functional CRM system that allows you to create, retrieve, update, and delete customer data.<\/p>\n
To follow along with this tutorial, you will need:<\/p>\n
Let’s start by setting up the backend API using Spring Boot.<\/p>\n
To create a new Spring Boot project, open your terminal or command prompt and run the following command:<\/p>\n
$ mkdir crm-backend\n$ cd crm-backend\n$ curl https:\/\/start.spring.io\/starter.zip -o Initial.zip\n$ unzip Initial.zip\n$ rm Initial.zip\n<\/code><\/pre>\nThis will create a new directory called crm-backend<\/code> and download a zip file containing the initial project setup from start.spring.io<\/code>. We then extract the contents of the zip file and remove it.<\/p>\nStep 2: Configure project dependencies<\/h3>\n
Open the pom.xml<\/code> file in your favorite text editor or IDE and add the following dependencies in the <dependencies><\/code> section:<\/p>\n<dependencies>\n ...\n <dependency>\n <groupId>org.springframework.boot<\/groupId>\n <artifactId>spring-boot-starter-web<\/artifactId>\n <\/dependency>\n <dependency>\n <groupId>org.springframework.boot<\/groupId>\n <artifactId>spring-boot-starter-data-jpa<\/artifactId>\n <\/dependency>\n <dependency>\n <groupId>org.postgresql<\/groupId>\n <artifactId>postgresql<\/artifactId>\n <\/dependency>\n<\/dependencies>\n<\/code><\/pre>\nThese dependencies will include the necessary libraries for creating a web application with Spring Boot, handling JPA (Java Persistence API) data access, and connecting to a PostgreSQL database.<\/p>\n
Step 3: Configure the database connection<\/h3>\n
Now, we need to configure the database connection in the application.properties<\/code> file. Create a new file called application.properties<\/code> in the src\/main\/resources<\/code> directory and add the following content:<\/p>\nspring.datasource.url=jdbc:postgresql:\/\/localhost:5432\/crmdb\nspring.datasource.username=your_username\nspring.datasource.password=your_password\nspring.jpa.show-sql=true\nspring.jpa.properties.hibernate.format_sql=true\nspring.jpa.hibernate.ddl-auto=update\n<\/code><\/pre>\nReplace your_username<\/code> and your_password<\/code> with your PostgreSQL credentials. This configuration specifies the URL, username, and password for the PostgreSQL database connection, as well as some additional properties for Hibernate (the JPA implementation).<\/p>\nStep 4: Create the customer entity<\/h3>\n
Next, let’s create the customer entity class. In the src\/main\/java\/com\/example\/crmbackend<\/code> directory, create a new package called entity<\/code> and inside it, create a new file called Customer.java<\/code> with the following content:<\/p>\npackage com.example.crmbackend.entity;\n\nimport javax.persistence.Entity;\nimport javax.persistence.GeneratedValue;\nimport javax.persistence.GenerationType;\nimport javax.persistence.Id;\n\n@Entity\npublic class Customer {\n\n @Id\n @GeneratedValue(strategy = GenerationType.IDENTITY)\n private Long id;\n\n private String firstName;\n private String lastName;\n private String email;\n\n \/\/ getters and setters\n \/\/ ...\n}\n<\/code><\/pre>\nThis class represents the customer entity with four properties: id<\/code>, firstName<\/code>, lastName<\/code>, and email<\/code>. The @Entity<\/code> annotation indicates that this class is an entity managed by Hibernate.<\/p>\nStep 5: Create the customer repository<\/h3>\n
Next, let’s create the customer repository interface. In the same entity<\/code> package, create a new file called CustomerRepository.java<\/code> with the following content:<\/p>\npackage com.example.crmbackend.entity;\n\nimport org.springframework.data.jpa.repository.JpaRepository;\n\npublic interface CustomerRepository extends JpaRepository<Customer, Long> {\n}\n<\/code><\/pre>\nThis interface extends the JpaRepository<\/code> interface provided by Spring Data JPA. It provides the necessary CRUD operations (create, retrieve, update, and delete) for the customer entity.<\/p>\nStep 6: Create the customer controller<\/h3>\n
Now, let’s create the customer controller class to handle HTTP requests related to the customer data. In the src\/main\/java\/com\/example\/crmbackend<\/code> directory, create a new package called controller<\/code> and inside it, create a new file called CustomerController.java<\/code> with the following content:<\/p>\npackage com.example.crmbackend.controller;\n\nimport com.example.crmbackend.entity.Customer;\nimport com.example.crmbackend.entity.CustomerRepository;\nimport org.springframework.web.bind.annotation.*;\n\nimport java.util.List;\n\n@RestController\n@RequestMapping(\"\/api\/customers\")\npublic class CustomerController {\n\n private final CustomerRepository customerRepository;\n\n public CustomerController(CustomerRepository customerRepository) {\n this.customerRepository = customerRepository;\n }\n\n @GetMapping\n public List<Customer> getAllCustomers() {\n return customerRepository.findAll();\n }\n\n @PostMapping\n public Customer createCustomer(@RequestBody Customer customer) {\n return customerRepository.save(customer);\n }\n\n @GetMapping(\"\/{id}\")\n public Customer getCustomerById(@PathVariable Long id) {\n return customerRepository.findById(id).orElse(null);\n }\n\n @PutMapping(\"\/{id}\")\n public Customer updateCustomer(@PathVariable Long id, @RequestBody Customer customerDetails) {\n Customer customer = customerRepository.findById(id).orElse(null);\n if (customer != null) {\n customer.setFirstName(customerDetails.getFirstName());\n customer.setLastName(customerDetails.getLastName());\n customer.setEmail(customerDetails.getEmail());\n return customerRepository.save(customer);\n }\n return null;\n }\n\n @DeleteMapping(\"\/{id}\")\n public void deleteCustomer(@PathVariable Long id) {\n customerRepository.deleteById(id);\n }\n}\n<\/code><\/pre>\nThis class is annotated with @RestController<\/code>, which indicates that it will handle HTTP requests and return JSON responses. We define several methods to handle different HTTP methods and perform the corresponding CRUD operations using the customer repository.<\/p>\nStep 7: Run the application<\/h3>\n
Finally, let’s run the Spring Boot application to start the backend API. Open your terminal or command prompt, navigate to the crm-backend<\/code> directory, and run the following command:<\/p>\n$ mvn spring-boot:run\n<\/code><\/pre>\nIf everything is set up correctly, you should see some log output indicating that the application has started successfully.<\/p>\n
Setting Up the Frontend UI<\/h2>\n
Now that we have the backend API set up, let’s move on to building the frontend user interface using Angular.<\/p>\n
Step 1: Create a new Angular project<\/h3>\n
To create a new Angular project, open your terminal or command prompt and run the following command:<\/p>\n
$ ng new crm-frontend\n$ cd crm-frontend\n<\/code><\/pre>\nThis will create a new directory called crm-frontend<\/code> and generate a new Angular project inside it.<\/p>\nStep 2: Create the customer service<\/h3>\n
Next, let’s create the customer service in Angular to interact with the backend API. In the src\/app<\/code> directory, create a new file called customer.service.ts<\/code> with the following content:<\/p>\nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\nexport interface Customer {\n id: number;\n firstName: string;\n lastName: string;\n email: string;\n}\n\n@Injectable({\n providedIn: 'root'\n})\nexport class CustomerService {\n\n private apiUrl = '\/api\/customers';\n\n constructor(private http: HttpClient) {}\n\n getAllCustomers(): Observable<Customer[]> {\n return this.http.get<Customer[]>(this.apiUrl);\n }\n\n createCustomer(customer: Customer): Observable<Customer> {\n return this.http.post<Customer>(this.apiUrl, customer);\n }\n\n getCustomerById(id: number): Observable<Customer> {\n return this.http.get<Customer>(`${this.apiUrl}\/${id}`);\n }\n\n updateCustomer(id: number, customer: Customer): Observable<Customer> {\n return this.http.put<Customer>(`${this.apiUrl}\/${id}`, customer);\n }\n\n deleteCustomer(id: number): Observable<void> {\n return this.http.delete<void>(`${this.apiUrl}\/${id}`);\n }\n}\n<\/code><\/pre>\nThis service uses the Angular HttpClient<\/code> to send HTTP requests to the backend API and retrieve the customer data. It defines several methods to perform the corresponding CRUD operations.<\/p>\nStep 3: Create the customer list component<\/h3>\n
Now, let’s create the customer list component to display the list of customers. In the src\/app<\/code> directory, create a new file called customer-list.component.ts<\/code> with the following content:<\/p>\nimport { Component, OnInit } from '@angular\/core';\nimport { Customer, CustomerService } from '.\/customer.service';\n\n@Component({\n selector: 'app-customer-list',\n template: `\n <h2>Customer List<\/h2>\n <table>\n <thead>\n <tr>\n <th>ID<\/th>\n <th>First Name<\/th>\n <th>Last Name<\/th>\n <th>Email<\/th>\n <th>Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr *ngFor=\"let customer of customers\">\n <td>{{ customer.id }}<\/td>\n <td>{{ customer.firstName }}<\/td>\n <td>{{ customer.lastName }}<\/td>\n <td>{{ customer.email }}<\/td>\n <td>\n <button (click)=\"editCustomer(customer)\">Edit<\/button>\n <button (click)=\"deleteCustomer(customer.id)\">Delete<\/button>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n `,\n providers: [CustomerService]\n})\nexport class CustomerListComponent implements OnInit {\n\n customers: Customer[] = [];\n\n constructor(private customerService: CustomerService) {}\n\n ngOnInit() {\n this.loadCustomers();\n }\n\n loadCustomers() {\n this.customerService.getAllCustomers().subscribe(customers => {\n this.customers = customers;\n });\n }\n\n editCustomer(customer: Customer) {\n \/\/ TODO: Implement edit functionality\n }\n\n deleteCustomer(id: number) {\n this.customerService.deleteCustomer(id).subscribe(() => {\n this.loadCustomers();\n });\n }\n}\n<\/code><\/pre>\nThis component retrieves the list of customers from the backend API using the CustomerService<\/code> and displays them in a table. It also includes buttons to edit or delete each customer.<\/p>\nStep 4: Create the customer form component<\/h3>\n
Next, let’s create the customer form component to add or edit customer data. In the src\/app<\/code> directory, create a new file called customer-form.component.ts<\/code> with the following content:<\/p>\nimport { Component } from '@angular\/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular\/forms';\nimport { Customer, CustomerService } from '.\/customer.service';\n\n@Component({\n selector: 'app-customer-form',\n template: `\n <h2>{{ isNew ? 'Add' : 'Edit' }} Customer<\/h2>\n <form [formGroup]=\"customerForm\" (ngSubmit)=\"saveCustomer()\">\n <div>\n <label for=\"firstName\">First Name:<\/label>\n <input type=\"text\" id=\"firstName\" formControlName=\"firstName\" required>\n <\/div>\n <div>\n <label for=\"lastName\">Last Name:<\/label>\n <input type=\"text\" id=\"lastName\" formControlName=\"lastName\" required>\n <\/div>\n <div>\n <label for=\"email\">Email:<\/label>\n <input type=\"email\" id=\"email\" formControlName=\"email\" required>\n <\/div>\n <button type=\"submit\">{{ isNew ? 'Add' : 'Save' }}<\/button>\n <button type=\"button\" (click)=\"cancel()\">Cancel<\/button>\n <\/form>\n `,\n providers: [CustomerService]\n})\nexport class CustomerFormComponent {\n\n customerForm: FormGroup;\n isNew = true;\n\n constructor(\n private formBuilder: FormBuilder,\n private customerService: CustomerService\n ) {\n this.customerForm = this.formBuilder.group({\n id: [],\n firstName: ['', Validators.required],\n lastName: ['', Validators.required],\n email: ['', [Validators.required, Validators.email]]\n });\n }\n\n saveCustomer() {\n if (this.customerForm.valid) {\n const customer: Customer = this.customerForm.value;\n if (this.isNew) {\n this.customerService.createCustomer(customer).subscribe(() => {\n \/\/ TODO: Implement successful save handling\n this.resetForm();\n });\n } else {\n this.customerService.updateCustomer(customer.id, customer).subscribe(() => {\n \/\/ TODO: Implement successful update handling\n this.resetForm();\n });\n }\n }\n }\n\n cancel() {\n \/\/ TODO: Implement cancel functionality\n this.resetForm();\n }\n\n resetForm() {\n this.customerForm.reset();\n this.isNew = true;\n }\n}\n<\/code><\/pre>\nThis component contains a form to add or edit customer data. It uses the Angular FormBuilder<\/code> and FormGroup<\/code> classes to define form controls and validate user input. The CustomerService<\/code> is used to save the customer data to the backend API.<\/p>\nStep 5: Update the app component<\/h3>\n
Finally, let’s update the app component to include the customer list and form components. In the src\/app<\/code> directory, open the app.component.ts<\/code> file and update its content as follows:<\/p>\nimport { Component } from '@angular\/core';\n\n@Component({\n selector: 'app-root',\n template: `\n <app-customer-list><\/app-customer-list>\n <hr>\n <app-customer-form><\/app-customer-form>\n `\n})\nexport class AppComponent {\n}\n<\/code><\/pre>\nThis component includes the app-customer-list<\/code> and app-customer-form<\/code> components to display the list of customers and the customer form.<\/p>\nRunning the Application<\/h2>\n
Now that we have set up both the backend API and the frontend UI, let’s run the application to see it in action.<\/p>\n
Step 1: Start the backend API<\/h3>\n
Open your terminal or command prompt, navigate to the crm-backend<\/code> directory, and run the following command:<\/p>\n$ mvn spring-boot:run\n<\/code><\/pre>\nStep 2: Start the frontend UI<\/h3>\n
Open another terminal or command prompt, navigate to the crm-frontend<\/code> directory, and run the following command:<\/p>\n$ ng serve\n<\/code><\/pre>\nThis will start the Angular development server and compile the TypeScript code into JavaScript. If everything is set up correctly, you should see some log output indicating that the application has started successfully.<\/p>\n
Step 3: Access the CRM system<\/h3>\n
Open your web browser and navigate to `http:\/\/localhost:4200`. You should see the customer list and form components rendered in the browser.<\/p>\n
Step 4: Test the CRM system<\/h3>\n
You can now test the CRM system by adding, editing, and deleting customers. The data will be persisted in the PostgreSQL database through the backend API.<\/p>\n
Congratulations! You have successfully built a CRM system with Spring Boot and Angular.<\/p>\n
Conclusion<\/h2>\n
In this tutorial, we have learned how to build a CRM system from scratch using Spring Boot for the backend API and Angular for the frontend UI. We have set up the backend API to handle CRUD operations on customer data and the frontend UI to display the customer list and form components.<\/p>\n
Feel free to expand on this project by adding additional features like authentication, searching\/filtering, or more complex data relationships. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"