Giters

JaimeStill / platform-demo

Demonstration of Angular 10.x / .NET Core 3.1 app platform

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Platform Demo

This demonstration is built into an Angular Workspace and is similar to the setup generated in my angular-workspaces repository.

Getting Started

Back to Top

Required Setup

Back to Top

Recommended Tools

dotnet ef

dotnet tool install -g dotnet-ef

@angular/cli

yarn global add @angular/cli

@angular-devkit/schematics-cli

yarn global add @angular-devkit/schematics-cli

Seed the Database

Back to Top

Ensure that ConnectionStrings:Project is appropriately setup for your local SQL Server instance in appsettings.Development.json

"ConnectionStrings": {
  "Project": "Server=.\\DevSql;Database=PlatformDemo-dev;Trusted_Connection=True;"
}
platform-demo> cd server/dbseeder
platform-demo/server/dbseeder> dotnet run -- "Server=.\DevSql;Database=PlatformDemo-dev;Trusted_Connection=True;"

Build the Libraries

Back to Top

platform-demo> yarn build

Run the Applications

Back to Top

In Visual Studio Code, you open multiple terminals in a split view using the Split Terminal button at the top-right of the Terminal window (or use the default keyboard shortcut of Ctrl+Shift+5).

Server Terminal

yarn start:server

api-filtering Terminal

yarn start:api-filtering

http://localhost:3001

worker-service Terminal

yarn start:worker-service

http://localhost:3002

recursive-interface Terminal

yarn start:recursive-interface

http://localhost:3003

Infrastructure Details

Back to Top

Build and Run Scripts

package.json - contains all of the scripts necessary to build and run the applications.

Angular Configuration

angular.json - provides all of the necessary configuration details for the Angular libraries and apps authored in this workspace.

Global Assets

assets - contains any global blob files to be shared between different application instances. Currently, it contains the Material Icon fonts.

App Theme

theme - contains all of the SCSS files share between each application that implements a global Material theme.

API Filtering

Back to Top

Enables pagination, sorting, and filtering of Entity Framework IQueryable<T> data results using query parameters on an API URL.

API Filtering Infrastructure

Back to Top

  • ApiQuery - Server infrastructure of the .Core class library that enables this functionality on the server side.
  • Item.cs and Category.cs - Entity Framework classes that supports this demo.
  • query-result.ts - TypeScript interface that wraps query results and contains collection metadata to support pagination.
  • query.service.ts - Abstract Angular service that provides all of the core infrastructure necessary for implementing this functionality on the client side.
  • item.ts and category.ts - TypeScript interfaces that map to the Entity Framework classes they represent.

API Filtering Implementation

Back to Top

Recursive Interface

Back to Top

Demonstration of component design that facilitates lazy-loading of data structures with a graph of an unknown depth.

This provides a more convenient / performant replacement for the mat-tree component.

Recursive Interface Infrastructure

Back to Top

Recursive Interface Pattern

Back to Top

This pattern is implemented in the FolderComponent. Before jumping into that file, you should understand what is actually enabling this functionality:

  • The FolderComponent provides its own instance of FileSystemService, so every instance of this component maintains its own state relative to its direct children.
  • The FolderComponent itself has the potential to render child folders, which can load its own children. In this way, FolderComponent is recursive.

By default, FolderComponent.expanded = false. Its children aren't loaded until the folder is actually expanded to reveal its contents. This allows us to only load the folders that don't have a parent folder. In this way, we can efficiently initialize the base data graph, but dynamically load child nodes on demand (lazily load them).

Worker Service

Back to Top

This demonstration actually introduces several coordinated features:

  • App Notifications
  • Alerts which generate Notifications

There are two technologies that directly enable these features:

Worker Service Infrastructure

Back to Top

In this section, I'll highlight all of the standard parts of the codebase that you should already be familiar with. In the next section, I'll highlight everything that drives the non-standard functionality of these features.

Worker Service Implementation

Back to Top

  • SocketHub.cs - SignalR Hub necessary for broadcasting notifications
  • NotificationWorker.cs - IHostedService that runs as a service in parallel with the .NET Core web app.
    • Notice that AppDbContext cannot be injected directly. It must be extracted from the injected IServiceProvider instance.
    • An IHubContext<SocketHub> must be injected in order to use SignalR to trigger the receiveAlertNotification event for connected clients via the NotifyClients method.
    • StartAsync runs whenever the IIS site starts
    • TriggerAlerts runs whenever the Timer ticks (every 15 seconds in this case).
    • StopAsync runs whenever the IIS site is stopped
  • Program.cs - Modified to configure and start the NotificationWorker hosted service.
  • Startup.cs - Map the SocketHub to the /core-socket endpoint.
  • socket.service.ts - Angular Service that manages a SignalR web socket connection, registers web socket events, and exposes a triggerNotification function to broadcast notifications to other connected clients.
    • The connected$, error$, notify$, and alertNotify$ streams are used to keep track of the state of the web socket, as well as track whenever new notifications are available.
  • app.component.ts - At the global AppComponent level, whenever new notifications are received, the notification count is updated. This is used by the notification link to indicate how many unread notifications there are.
  • app.component.html - This section shows the notification link, and how it uses the notifyCount property to indicate the amount of unread notifications there currently are.
  • home.component.ts - Whenever an alert is triggered, the new alert notification is received by SignalR, and refreshes the collection of alerts.

Entity Framework Change Auditing

This is more of a transient feature that has been developed into the app platform. The whole of this feature can be found in the following places:

  • ChangeState.cs - For a given instance of SaveChanges, this class tracks all of the EntityEntry objects from the ChangeTracker based on their state: Added, Modified, or Deleted.
  • Audit.cs - Entity Framework class that stores the details of an audit record to the database.
  • AppDbContext - Beginning with override SaveChanges injects the audit process into the Entity Framework workflow.
    • GetChangeState populates and returns an instance of ChangeState
    • GetEntityEntries returns a List<EntityEntry> from the ChangeTracker of entries that are in the provided EntityState.
    • CreateAudit creates Audit records for all of the EntityEntry objects in a provided ChangeState object.
    • GenerateAudit serializes the state of an entity into JSON, generates an Audit record for the entry, then executes the specified generator action.
      • Think of Action<T> as a void callback function that receives an object of T as an argument whenever it is invoked.

Audit data can be accessed via the AuditController, which has its logic defined in AuditExtensions.

About

Demonstration of Angular 10.x / .NET Core 3.1 app platform

Languages

Language:C# 43.7%Language:TypeScript 35.8%Language:HTML 12.2%Language:CSS 7.9%Language:Batchfile 0.3%