⚡ Angular Datastream Table

• App with realtime communication between app and server using a websocket-based Pusher channel for notifications/updates etc.

*** Note: to open web links in a new window use: ctrl+click on link**

📄 Table of contents

• ⚡ Angular Datastream Table
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• The pusher channel uses a publish/subscribe model so all subscribers to the channel will receive the update. See Pusher documentation for more information.
• The server.js file follows the Twelve-Factor methodology for building software-as-a-service apps that:

'Use declarative formats for setup automation, to minimize time and cost for new developers joining the project; Have a clean contract with the underlying operating system, offering maximum portability between execution environments; Are suitable for deployment on modern cloud platforms, obviating the need for servers and systems administration; Minimize divergence between development and production, enabling continuous deployment for maximum agility; And can scale up without significant changes to tooling, architecture, or development practices.'

📷 Screenshots

📶 Technologies

• Angular v15
• rxjs v7 observable streams for asynschronous programming.
• Pusher-js v8 Real-time communication scalable features.
• Bootstrap v5. Links added to angular.json "styles"
• NgAlert v2 alert component with different types of alert. Link added to angular.json "styles".

💾 Setup

• Install dependencies using npm i
• Get your own API key and Cluster name from Pusher-js Sandbox Plan
• Add Pusher API Key etc. to .env file
• Add API_KEY & CLUSTER values to environment.ts & environment.prod.ts
• Run ng serve for a dev server. Navigate to http://localhost:4200/
• Open a second command terminal
• Install nodemon globally if you don't have it already
• Run nodemon server.js to run the server backend. Navigate to http://localhost:2000/. Restarts with changes
• Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

💻 Code Examples

• Function to delete an employee record with alert message before using the '_actualDelete' function.

  delete(employee: IEmployee) {
    // show delete confirmation with ngAlert
    this._ngAlert.push({
      message: `<strong>Are you sure!</strong> you want to delete this employee with name <strong>${employee.name}</strong>`,
      type: MessageType.warning,
      buttons: [
        {
          label: 'Continue',
          action: () => {
            this._actualDelete(employee);
          },
          css: 'btn btn-danger'
        }
      ]
    });
  }

🆒 Features

• Forms created using Angular's reactive forms.
• Utility/helper classes used from Bootstrap v5.
• real-time data and functionality using Pusher event-based API 'Pusher Channel'.
• working local server backend.
• Data access services delegated to separate service components.

📋 Status & To-Do List

• Status: Working front and backend. UI adds employees to the list. Employees can be added & deleted successfully but the edit component is not coded so not possible to edit employee records.
• To-Do: Look at employee edit function. Customise app and add functionality. Consider currency pull-down menu for salary input.

👏 Inspiration

• Christian Nwamba's tutorial: BUILD A REALTIME TABLE WITH ANGULAR,

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]