Building an inventory system for the Skinet app in the .net and angular course – Part 1
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,
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
Then inside the skinet directory run dotnet restore:
Then open up in VS Code or your favourite IDE (I’ll be using Rider for this). Then check the appsettings.development.json:
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:
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:
Remove the following directories:
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
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:
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):
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:
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 (email@example.com with password of Pa$$w0rd)
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
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.
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:
- Building an inventory system for the Skinet app in the .net and angular course – Part 9
- Building an inventory system for the Skinet app in the .net and angular course – Part 8
- Building an inventory system for the Skinet app in the .net and angular course – Part 7
- Building an inventory system for the Skinet app in the .net and angular course – Part 6
- Building an inventory system for the Skinet app in the .net and angular course – Part 5