This will be a series of posts covering how to build an inventory system into the app we build as part of the “Learn to build an E-commerce app with Angular and .Net Core” course that I published on Udemy.   It’s a bit lengthy so this will be a series of posts.

Important:  This series of posts will only make sense to students taking the above mentioned course – if you are not a student of this course you are welcome to follow along but you will get more out of this if you actually take the course itself.

Step 1 –  Getting set up and how to clone and run the demo code from the course

The starting point for this will be basically the end of the published course.   If you have not completed the course yet then you can just go ahead and clone the completed project from the course GitHub repository into a separate folder on your computer and use this to follow along here.   There are some things you will need installed on your computer here to follow along:

1.  The dotnet SDK.

2.  The Angular CLI.

3.  Node JS.

4.  Redis server.

First, create a new directory on your computer and then clone the repo from here,

2020 04 18 13 45 36

Then cd into the Skinet directory.   We want to create a new branch in Git for the code we are creating here so we do not interfere with the master branch code.   To do this run the following command:

git checkout -b inventory

2020 04 18 15 06 50

Then inside the skinet directory run dotnet restore:

2020 04 18 13 54 28

Then open up in VS Code or your favourite IDE (I’ll be using Rider for this).   Then check the appsettings.development.json:

2020 04 18 13 57 31

We have a sqlite connection string for both the store and identity here so we will be creating 2 databases when we start the app, we also have a connection string for Redis, which we need to have installed locally on our development machine.   I already have this started as you can see when I connect to the redis-cli and issue the ping command:

2020 04 18 14 02 55

2020 04 18 14 41 27

We will be using development mode to add the inventory feature and prior to committing the latest change to the repo this was set up for Production mode so we need to make a couple more changes here so we can use the Sqlite server and run everything locally.   The current migrations are set up for MySql and in order to get this working with Sqlite the easiest thing to do is remove both migration folders in the Infrastructure project, then create 2 new migrations for Sqlite.   Also inside the API/properties/launchSettings.json file change the ASPNETCORE_ENVIRONMENT setting to Development:

2020 04 18 14 06 55

Remove the following directories:

Infrastructure/Data/Migrations

Infrastructure/Identity/Migrations

Then run the following commands (make sure you are at the level of the solution):

dotnet ef migrations add Initial -p Infrastructure -s API -c StoreContext -o Data/Migrations

dotnet ef migrations add IdentityInital -p Infrastructure -s API -c AppIdentityDbContext -o Identity/Migrations

2020 04 18 14 12 20

You should now how 2 new migrations folders in the project that use the Sqlite provider.

We should now be able to run the .net solution – use dotnet run in the API folder:

2020 04 18 14 21 06

In order to test the project is working fully you will also need to copy your appsettings.json file or create an appsettings.json file with the Stripe API keys that you will have access to once you create the account – without this you can add things to the basket but you will not be able to complete the ordering process.   Here is my appsettings.json file but you will need your own Stripe keys here (you can ignore the connection strings here as the ones from appsettings.developement.json will be used instead):

2020 04 18 14 47 16

Now we just need to take care of the Angular project – all we need to do here is run “npm install” inside the client folder and then run “ng serve” to start the app.   You can do this from inside VS Code but my preferred IDE for Angular code is WebStorm so I will be using that.

So that we do not get certificate errors we will also need to do the following:

1.  Create a new directory called “ssl” in the client folder.

2.  Copy the server.crt and server.key files from the StudentAssets folder into the newly created ssl folder:

2020 04 18 14 32 50

3.  Now run the app – should work ok and we should be able to browse the shop, add products to the basket and login with the test user (bob@test.com with password of Pa$$w0rd)

2020 04 18 15 24 14  1

We will be able to go through and create the order, but we will not be able to confirm payment within the app until we have received confirmation from Stripe that the payment was successful.   In order to receive this when running the app on localhost we need to run the Stripe CLI and listen to the events and forward them to our API running on localhost:5001.

1.  Install the Stripe CLI from here.

2.  Open the command line or terminal and run the following command:

stripe listen -f https://localhost:5001/api/payments/webhook -e payment_intent.succeeded,payment_intent.payment_failed

2020 04 18 15 30 55  1

Once this is started we should be given a new Web hook secret – so as not to interfere with the published app lets add this key into the appsettings.developement.json so that we can confirm the payment received:

We should now be able to test creating an order and receive confirmation that payment was received.

2020 04 18 15 37 09  1

So thats it for this part – all we are doing here is making sure we can run the app in development mode.  In the next part we will add the ability to add/edit/delete products from the store.

To finish up lets just commit our changes for this branch and push up to the GitHub repo:

2020 04 18 16 01 27