E-commerce Application Development Lecture Notes

Overview

• Creating a complete e-commerce application using a real API.
• Application will include product display, cart functionality, and checkout process.

Project Setup

• Start by creating a new Angular project: ng new e-commerce
• Enable routing during the project setup.
• Default CSS framework used is plain CSS.

Important Files Created

• package.json: Contains package name and version.
• angular.json: Architectural settings of the Angular project. Includes style and script settings.
• tsconfig.json: TypeScript configuration file for compilation settings.

Running the Application

• To run the project: ng serve
• The application will be accessible at localhost:4200.
• Install Bootstrap: npm install bootstrap
• Update angular.json to include Bootstrap CSS and JS links.

Application Structure

• Components:
  1. Home Component
  2. Cart Component
  3. Sale Component
• Create components using the Angular CLI command: ng generate component [component-name]
• Set up routing in app-routing.module.ts:
  • Define paths for Home, Cart, and Sale components.

Navbar Creation

• Added a navigation bar using Bootstrap.
• Included links to the Home, Cart, and Sale components.

Fetching Products

• Create a service to fetch products from the API: ng generate service product
• Use HTTPClientModule to make API calls.
• Fetch data in the Home component. Store results in a variable: this.productList = result.data;

Adding Products to Cart

• Create an "Add to Cart" button for each product displayed.
• Define a function to handle adding items to the cart:
  • Use a POST API call to add items.
• Create a subject to emit cart updates across components.

Checkout Process

• Create a checkout button that navigates to the Sale component.
• On the Sale component, display all items in the cart and provide a summary.
• Implement a feature to make a sale and clear the cart afterward.

API Call for Making a Sale

• Construct the sale object with necessary parameters:
  • Customer ID
  • Total invoice amount
  • Sale date
• Execute the API call to process the sale.

Removing Items from Cart

• Implement a function to remove items from the cart using a DELETE API call.
• Ensure that when an item is removed, the cart is updated in real-time.

Conclusion

• This session covered the basic functionality required to create an e-commerce application:
  • Product display
  • Cart management
  • Checkout process
• Future enhancements suggested:
  • Adding user authentication.
  • Implementing filters and advanced features.

Final Notes

• The code and HTML templates will be available on GitHub.
• Encouragement to practice and enhance the application for interviews.