Webshop Product List and Detail view with Angular
How To Build A Serverless Webshop
This is a 6 parts series to build a webshop application with Angular, Netlify Serverless functions in combination with FaunaDB.
Series
- Connect Angular and FaunaDB with Netlify Serverless functions
- Product list and detail view with Angular
- Create crud for products and show products on an Angular page
In this part of the series, we are going to explore how to get product data from the FaunaDB database serverless functions in Netlify and show it in our Angular application.
If you didn’t follow the previous tutorial in this series, please check that out first, this will make following this tutorial much easier.
Let’s get our hands dirty!
Happy coding! 🚀
1. Clean up
Let’s clean the app.component.html so that we have a blank canvas to work with.
See it in the Github repository.
And the app.component.scss file needs some basic styling from the app.component.html. The styling is nothing special, basically copied and cleaned from what was already there.
See it in the Github repository.
2. Show product list data
Thanks to the function that refilled the data of the FaunaDB database we already have some data to visualize our list of products.
Product model
To get the most out of TypeScript, we have to make a product model that is the same as we get back from the FaunaDB API.
ng generate class products_models_product
This will generate a class for us in which we can define the data structure. (Yes we could make an interface, but for now, I keep it simple).
Environment
To make sure we can call our serverless function locally and on our staging environment, we have to use the Angular environment file. Make sure you import the environment file in every service which calls the API.
In the environments/environment.ts we set a property apiUrl with a value to the local API. In the environments/environment.prod.ts we set the value of apiUrl to the URL of our Netlify environment.
In our package.json we have to add another command npm run build:prod to create a production build.
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:prod": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"fn:serve": "netlify-lambda serve functions",
"fn:build": "netlify-lambda build functions"
},
In the Netlify settings, you can configure that command to be used.
Product Service
Now we can create a service that we can call from our component. This endpoint is going to retrieve the product data from the database.
ng generate service products_service_product
This command creates the following directory src/app/products/service with a product.service.ts file in there. Add a method for getting all the products from our serverless function.
We created the products function in the previous post. If you miss that, check it out before you continue.
Create a component to call the ProductService from there. Run the following command to have it created for you.
Product List Component
ng generate component products_components_product-list
This is how we are going to call our getProducts method from the ProductService in the ProductListComponent. In the ngOnInit I call the service and add additional images for the products. (Normally you would have added that to the database.)
Routing
To make sure that everything we show in the product-list.component.html will be shown on our home view, we have to configure the app-routing.module.ts.
Show Product Data
Let’s put a pre tag in our product-list.component.ts to show how the product data from the API.
{{ products | json }}
3. Visualize the products
We are receiving all our products from the database. If this would be a webshop for a client to build you might want to consider pagination. But in this tutorial, I leave that up to you.
Since we get an Array of Objects from our endpoint, we simply loop through it with the *ngFor on an ng-container element. For every product, there will be a section with a class product__item in the HTML to show the product information.
I have added some additional styling to make it a bit nicer.
The webshop looks now something like this. Feel free to play around with the styling yourself.
See it in the Github repository. The live version of the webshop can be found on Netlify.
4. Show product detail
To visit every product detail page we need to create a product-item component and define a route in our app.routes.ts.
Product item component
Run the command below to create the product-item component in the correct directory.
ng generate component products/components/product-item
Open the app.routes.ts to add the new route.
We define a new route for product/:id. The :id will become our product ID which we get back from the Fauna API.
In our product-item component we can hook into the router and get that Id. This ID will be used in our service to call our serverless function.
Product By Id Function
Open the lib/product-service.js to add another method getProductById for getting a product by id.
Now create a file product-by-id.js in the functions folder.
In the function, we first check if we have a product ID in the URL. The call we would do will look like this http://localhost:9000/.netlify/functions/product-by-id/266790280843231752. So the last string after the latest / will be our product ID.
Before you commit this, I highly recommend testing this locally first.
Call API on Product Item
Let’s add a method to our product.service.ts for getting the information in our product-item component.
Now call the getProductById method from the service in our component.
As you can see we import the ActivateRoute to get access to the id parameter in the URL. We do that in the ngOnInit so this will be executed immediately after the component is ready.
We store the product ID in this.id and use it to call the getProductById method. When we receive the data from the serverless function, we store it in the productItem property.
Now we can show the information about the product via the product-item.component.html.
To make it nicer for the user to see in the browser I’ve created a simple layout that comes from the product-list.component.scss.
The result looks like this.
See it in the Github repository. The live version of the webshop can be found on Netlify.
Conclusion
As you can see with the ease of using FaunaDB and serverless functions you can easily build a serious webshop. Everything you do is Frontend development that’s what I think is making it so cool.
The API of FaunaDB is super easy and flexible to get our product list and detail. Let me know in the comments what you think of it.
Next time we are gonna focus on the CRUD views to manage our products. If you can’t wait for that, start experimenting with what we already build in this tutorial.
Happy Coding 🚀
I’ve gathered a couple of aspiring developers around the world on a Discord server, feel free if you like to join in.
Read more
4 Steps to Get Started With Serverless Functions on Netlify
_The most powerful tool for front-end developers_medium.com
5 Steps Give Structure To Your Development Projects
_Are you not able to manage your programming projects? Try this!_medium.com
How To Build A Dark Mode Switcher with CSS Variables
_Build a Dark Mode Switcher with CSS Variable, JavaScript and TypeScript_levelup.gitconnected.com