CSharpExpenseCalculator

ASP.NET Web API, Angular / CLI, Entity Framework (Budget App w/ token auth)

Marcus Barnes

Purpose: This is a simple ASP.NET Web API project with database tables designed to demonstrate to utilize Entity Framework with tables within a database for user authentication and other expense data. The C# “ExpensesAPI” (server side) was written in Visual Studio 2017 and the Angular /CLI “ExpensesClient” (client side) written in VS Code (v1.41.1)

Directions:

• Open up folder “ExpensesClient” in Visual Studio Code
• Open up sln ExpnesesAPI in Microsoft Visual Studio
• Run client by entering “ng serve -o” into the terminal/CL
• Run server app in VS (this must be running also to communicate with the database)

If you have trouble running:

• If you get this error while running the client
  • An unhandled exception occurred: Could not find module "@angular-devkit/build-angular" from….
  • Then run this in the CL
    • npm install --save-dev @angular-devkit/build-angular
  • If the database doesn’t populate
    • Create new local SQL server database
      • Open Server Explorer
      • Right-click Data Connections
      • Click “Create New SQL Server Database”
      • Type in “.” or “(local)” for server name
      • Type in ExpensesDb for server name
      • After set up, click on DB and press f4
        • Copy the connection string
      • Navigate to Web.config
        • Near the bottom, replace the “connectionString” value with the new one
        • Click on ExpensesAPI solution, press f4 to bring up properties, copy the url ex. http://localhost:49189/
        • Go to VS Code > src > app > entry.service.ts
        • Replace base Url value up to the localhost number (ex. 49189), leave the ‘/api/entries/’ on the end.
        • format is: ‘http://localhost:#####/api/entries/’

 

Specifications:

• Microsoft Aspnet web api 2.2
• @angular/cliW
• NuGet packages (may have included a few extras in list):
  • EntityFramework by Microsoft
  • AspNet.Mvc
  • AspNet.TelemetryCorrelation
  • AspNet.Web.Optimization
  • AspNet.WebApi.Core
  • AspNet.WebApi.Cors
  • AspNet.WebApi.HelpPage
  • AspNet.WebApi.WebHost
  • AspNet.WebPages
  • IdentityModel.JsonWebTokens
  • IdentityModel.Logging
  • IdentityModel.Tokens
  • IdentityModel.Tokens.Jwt

Features:

• creation of username and password passed to storage into a local database table.
• Sign in/Sign out of users from the database, using tokens and placed in local storage
• allows users to add, edit, and delete entries (either expense or income)
• filter the entries by name

Useful References:

• https://material.angular.io/guide/getting-started

Other Screenshots: