Angular App - Online Bidding

 Creating an enterprise-standard AngularJS application for online bidding involves several components and considerations, including user interface design, input validation, unit testing, database integration, exception handling, logging, and deployment. Below is a step-by-step guide on how you can build such an application:

Prerequisites

  1. AngularJS: Although AngularJS is an older version of Angular, it is still used in some legacy systems. However, for a modern application, consider using Angular (latest versions) if possible.
  2. Node.js & npm: For managing packages and running a local development server.
  3. Database: We'll use a simple setup with MongoDB for this example.
  4. Backend Framework: Express.js for server-side logic.
  5. Testing Frameworks: Jasmine and Karma for unit testing AngularJS components.

Application Architecture

  1. Frontend: AngularJS for building the client-side application.
  2. Backend: Node.js with Express for server-side logic.
  3. Database: MongoDB for storing auction and bidding data.
  4. Testing: Jasmine/Karma for unit testing.

Project Setup

1. Setting Up the Backend

  1. Initialize a Node.js Project:

    bash
    mkdir online-bidding-app
cd online-bidding-app
npm init -y

  2. Install Dependencies:

    bash
    npm install express mongoose body-parser cors

  3. Create a Simple Express Server:

    Create a file server.js:

    javascript
    const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(cors());
app.use(bodyParser.json());

// MongoDB connection
mongoose.connect('mongodb://localhost:27017/online-bidding', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.once('open', () => console.log('Connected to MongoDB'));

// Start the server
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

  4. Define Database Models:

    Create a folder models and add a file Auction.js:

    javascript
    const mongoose = require('mongoose');

const auctionSchema = new mongoose.Schema({
  itemName: String,
  description: String,
  startingBid: Number,
  currentBid: Number,
  endTime: Date,
});

module.exports = mongoose.model('Auction', auctionSchema);

  5. Define API Routes:

    Create a folder routes and add a file auctionRoutes.js:

    javascript
    const express = require('express');
const Auction = require('../models/Auction');

const router = express.Router();

// Create a new auction
router.post('/auctions', async (req, res) => {
  try {
    const auction = new Auction(req.body);
    await auction.save();
    res.status(201).send(auction);
  } catch (error) {
    res.status(400).send(error);
  }
});

// Get all auctions
router.get('/auctions', async (req, res) => {
  try {
    const auctions = await Auction.find();
    res.status(200).send(auctions);
  } catch (error) {
    res.status(500).send(error);
  }
});

// Update a bid
router.put('/auctions/:id/bid', async (req, res) => {
  try {
    const auction = await Auction.findById(req.params.id);
    if (auction.currentBid < req.body.bid) {
      auction.currentBid = req.body.bid;
      await auction.save();
      res.status(200).send(auction);
    } else {
      res.status(400).send({ message: 'Bid must be higher than current bid' });
    }
  } catch (error) {
    res.status(500).send(error);
  }
});

module.exports = router;

    Update server.js to use the new routes:

    javascript
    const auctionRoutes = require('./routes/auctionRoutes');
app.use('/api', auctionRoutes);

2. Setting Up the Frontend

  1. Create an AngularJS App:

    bash
    mkdir client
cd client
npm init -y

  2. Install AngularJS and other dependencies:

    bash
    npm install angular angular-route angular-messages

  3. Create a Basic AngularJS App Structure:

    Create a file app.js:

    javascript
    const app = angular.module('onlineBiddingApp', ['ngRoute', 'ngMessages']);

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/home.html',
      controller: 'HomeController'
    })
    .when('/auction/:id', {
      templateUrl: 'views/auction.html',
      controller: 'AuctionController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

  4. Create Controllers:

    Create a folder controllers and add HomeController.js:

    javascript
    app.controller('HomeController', function($scope, $http) {
  $scope.auctions = [];

  // Fetch auctions from server
  $http.get('/api/auctions').then(response => {
    $scope.auctions = response.data;
  }).catch(error => {
    console.error('Error fetching auctions', error);
  });
});

    Add AuctionController.js:

    javascript
    app.controller('AuctionController', function($scope, $http, $routeParams) {
  $scope.auction = {};
  $scope.bidAmount = 0;

  // Fetch auction details
  $http.get(`/api/auctions/${$routeParams.id}`).then(response => {
    $scope.auction = response.data;
  }).catch(error => {
    console.error('Error fetching auction', error);
  });

  // Place a bid
  $scope.placeBid = function() {
    if ($scope.bidAmount > $scope.auction.currentBid) {
      $http.put(`/api/auctions/${$routeParams.id}/bid`, { bid: $scope.bidAmount }).then(response => {
        $scope.auction = response.data;
      }).catch(error => {
        console.error('Error placing bid', error);
      });
    } else {
      alert('Bid must be higher than current bid');
    }
  };
});

  5. Create Views:

    Create a folder views and add home.html:

    html
    <div>
  <h1>Online Bidding</h1>
  <ul>
    <li ng-repeat="auction in auctions">
      <a href="#!/auction/{{auction._id}}">{{auction.itemName}}</a>
    </li>
  </ul>
</div>

    Add auction.html:

    html
    <div>
  <h1>{{auction.itemName}}</h1>
  <p>{{auction.description}}</p>
  <p>Current Bid: {{auction.currentBid}}</p>
  <form ng-submit="placeBid()">
    <label for="bid">Your Bid:</label>
    <input type="number" id="bid" ng-model="bidAmount" required />
    <button type="submit">Place Bid</button>
  </form>
</div>

  6. Add Input Validations:

    Use AngularJS ngMessages for input validation in auction.html:

    html
    <form name="bidForm" ng-submit="placeBid()" novalidate>
  <label for="bid">Your Bid:</label>
  <input type="number" id="bid" name="bid" ng-model="bidAmount" required />
  <div ng-messages="bidForm.bid.$error" ng-if="bidForm.bid.$touched">
    <div ng-message="required">Bid is required.</div>
  </div>
  <button type="submit" ng-disabled="bidForm.$invalid">Place Bid</button>
</form>

3. Unit Testing

  1. Install Testing Tools:

    bash
    npm install karma karma-jasmine karma-chrome-launcher jasmine-core

  2. Configure Karma:

    Create a karma.conf.js file:

    javascript
    module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'node_modules/angular/angular.js',
      'node_modules/angular-route/angular-route.js',
      'node_modules/angular-messages/angular-messages.js',
      'node_modules/angular-mocks/angular-mocks.js',
      'app.js',
      'controllers/*.js',
      'test/*.spec.js'
    ],
    exclude: [],
    preprocessors: {},
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  });
};

  3. Write Unit Tests:

    Create a test folder and add HomeController.spec.js:

    javascript
    describe('HomeController', function() {
  beforeEach(module('onlineBiddingApp'));

  var $controller, $httpBackend;

  beforeEach(inject(function(_$controller_, _$httpBackend_) {
    $controller = _$controller_;
    $httpBackend = _$httpBackend_;
  }));

  it('should fetch auctions', function() {
    var $scope = {};
    var controller = $controller('HomeController', { $scope: $scope });

    $httpBackend.expectGET('/api/auctions').respond([{ itemName: 'Item 1' }]);
    $httpBackend.flush();

    expect($scope.auctions.length).toBe(1);
    expect($scope.auctions[0].itemName).toBe('Item 1');
  });
});

4. Logging and Exception Handling

  1. Logging:

    Use a middleware to log requests in server.js:

    javascript
    const morgan = require('morgan');
app.use(morgan('combined'));

    Install Morgan:

    bash
    npm install morgan

  2. Exception Handling:

    Add error handling middleware in server.js:

    javascript
    app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

5. Deployment

  1. Prepare for Deployment:

    • Use ng build (Angular CLI) for modern Angular applications to build the app for production.
    • In our case, we will serve AngularJS files directly.

  2. Deploy to a Cloud Platform:

    • Use platforms like Heroku, AWS, or Azure for deployment.

    • Heroku Example:

      1. Install the Heroku CLI and create a new Heroku app.

      2. Add a Procfile in the root directory:

        plaintext
        web: node server.js

      3. Push your code to Heroku:

        bash
        git add .
git commit -m "Initial commit"
heroku create
git push heroku master

  3. Configure Environment Variables:

    • Use environment variables for sensitive information like database connection strings.

    • Example in server.js:

      javascript
      mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/online-bidding', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

Final Thoughts

This setup provides a basic outline for building an online bidding application using AngularJS. For a production-grade application, consider the following:

  • Use Angular (latest versions) for a more modern and performant frontend.
  • Implement user authentication and authorization for securing endpoints.
  • Optimize the application for scalability and performance.
  • Implement additional testing strategies, such as end-to-end (E2E) testing.
  • Use a CI/CD pipeline for automated testing and deployment.

This guide provides a starting point, and additional features and optimizations can be added as needed to meet specific requirements.

Post a Comment