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:
Neil April 30, 2020 at 3:27 am
Are you using your own Stripe keys here? You will want to double check the payment intent id’s in your stripe console and check against what is being saved in the DB. Also, you may want to clear out your localStorage in the browser so you test against a clean basket just in case you have anything saved from the course if you have cloned this project and ran it separately.
Sheldon May 8, 2020 at 6:13 am
There was an error once I ran this command “stripe listen -f https://localhost:5001/api/payments/webhook -e payment_intent.succeeded,payment_intent.payment_failed” in VS Code’s Terminal.
+ I have installed Scoop (for Windows) and Stripe CLI before. I stand on D:\ to type Scoop and Stripe installation command.
+ And I have also started the API (dotnet watch run) before running that command.
+ The error message is “stripe : The term ‘stripe’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if
a path was included, verify that the path is correct and try again.”.
Please kindly help!
Neil May 9, 2020 at 2:11 am
It sounds like you do not have stripe installed and/or you do not have this available in your path. I’d suggest you want to go through and install this again. If you cannot run something like stripe -h or any stripe commands then you will need to double check your installation here.
Sheldon May 10, 2020 at 7:00 am
After restarting my computer, I can run the command for starting the stripe for WebHook as your guidance.
Sras May 23, 2020 at 4:00 am
It’s out of topic here. But, of course, related with the course here!
I took your three courses, two angular, one react. Is it good idea to use mediator and repository pattern together?. If so, do you have any good starting project of them?. Thanks
Rapier685 July 26, 2020 at 6:25 pm
have you ever tried publishing the project to a windows box?
Neil September 20, 2020 at 11:26 am
Hi, I did cover this once on the first course I released. Since it is a .net app there is of course no problem doing this. The Microsoft docs have you covered, just search for publishing dotnet core app to IIS.
Alexis November 9, 2020 at 1:41 pm
For everyone, don’t forget to update the checkout-payment.component.ts file which contain Neil’s publishableKey ! You need to change it for your own key :
this.stripe = Stripe(‘pk_test_…your key here…….’);
Everything is now working for me 😀
Leave a Reply Cancel reply
- 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
I’ve tried to complete an order but got an error after submitted the payment:
“No such payment_intent: pi_1GdjzHFj8fJOwbX3L0JMmURP”,
Have you an idea ?