DEV Community: Webtutsplus.com

Let’s Add Products for our eCommerce App with Vue.js

KunalShekhar — Thu, 14 Jan 2021 19:53:09 +0000

We are building a complete E-commerce application from scratch. Today we are going to add the Products feature.

Introduction

As part of building an E-Commerce application, previously we built the backend for UserProfiles and created android UI for the same.

Let’s Develop an E-Commerce Application From Scratch Using Java and Spring | by Nil Madhab | Javarevisited | Dec, 2020 | Medium

Nil Madhab ・ Jan 10, 2021 ・ 5 min read
Medium

Let’s Build User Profile UI With Android for our E-Commerce App | by Nil Madhab | Javarevisited | Dec, 2020 | Medium

Nil Madhab ・ Jan 8, 2021 ・ 10 min read
Medium

The most important part of an online shop is products. We are going to create product backend APIs and consume those APIs in our web front-end built using the shiny Vue.js framework.

Demo

Webtutsplus E-commerce App

Database Design

This is a sample JSON of a product, we will link it to a category and add other fields in later tutorials.

products.sql

Each product has a unique ID, name, image URL, price, description. We can model it in Springboot as

API Design

In the real-world, we need to see the products, create new products, and update the products. So we will create 3 APIs. Later we will create many other real-world features like deleting, stocks, linking to categories, and adding tags. After this, we will create the UI.

Product controller to create, add and update products

Swagger listing of APIs

You can find the backend code in this branch

Vue.js introduction

We will use Vue.js 3 to design the front end for displaying products of our E-commerce app.

Vue is a JavaScript framework that is used to build user interfaces. The official page of Vue describes it as a “progressive framework” which is “incrementally adoptable”. Both of these terms roughly relate to the same meaning. Vue can be used in two ways. We can either create a full Vue website, commonly known as a Single-page application or we can create stand-alone widgets (also known as components) which we can then use in our HTML as an addition. This way, the adoption of Vue in our application is totally in our hands. In this tutorial, we will be creating a Vue component to display products of our E-Commerce App.

Vue.js Requirements

As we are just creating a single widget for displaying the product and its details, we can make use of the Vue CDN from its installation page and carry on. Using Vue CDN is a beginner-friendly way to start our journey. For bigger projects, a different setup using Vue CLI is recommended. As a code editor, I will be using VS Code, but you can use any editor of your choice. First, we will create the following three files.

Let’s get started

First, let us set up the boilerplate for index.html. Our very first requirement is Vue CDN. Apart from this, I am also including Bootstrap 4 CDN and some Google fonts which I will be using. And for my custom styles, I am also including the link to my external CSS file. Also, include the script tag to link our JavaScript file app.js in the body tag. After all these things are done, our index.html will look like this:

We will revisit this file once we are done with our app.js file.

You can find the complete code here

Creating a Vue Component

Now it's time for our app.js file, where we will be writing the logic for creating our Vue Component. To create a component, Vue provides us with a method createApp(). This method takes as a parameter a component instance. This instance is made up of various component options and Lifecycle hooks that add user-defined behaviour to the component.
Component Options

We will be using two of the component options — data and methods.

The data option lists all the data fields which are exposed by our component instance.
The methods option lists all the functions which we might need to use. For example, here we can define a function to execute whenever some button in our component template is clicked.

Lifecycle Hooks

Apart from these component options, our component instance also consists of Lifecycle hooks. Lifecycle hooks are the functions that our component automatically runs at different stages of its initialization. These stages include when a component is created, added to the DOM, updated, or destroyed. We will be using the lifecycle hook, mounted. This function is called when our component is added to the DOM. In this function, we can make HTTP requests to fetch data for our component.

Our Component

So in our case, the data option consists of six fields. A product array to store our products, showAddForm(a boolean value) to decide whether to display form for adding a new product and four-string data fields which we will use to get input from the user for product edit functionality.

data() {
    return {
        products : null,
        showAddForm : false,
        tempName : "",
        tempDescription : "",
        tempPrice : "",
        tempImageURL : "" 
    }
}

In methods option, we have five methods,resetInputFields, addProductButtonPressed, addProduct, editButtonPressed and editProduct.

resetInputFields - it sets the values of all data fields bound to the input form to an empty string.
addProductButtonPressed - it toggles the display of form used for adding a new product. It gets executed whenever the user clicks the “Add a New Product” button.
addProduct - it creates a new product as per the user input and makes a POST request to backend API to add this product. It gets executed when the user submits the form for adding a new product.
editButtonPressed - it toggles the form for editing a product based on the product’s showEditForm property and sets the values of input fields as per the invoking product details. It gets executed when the user clicks the “Edit” button. For distinguishing the product, this method takes the index of the product as a method argument.
editProduct- it creates a new product as per the user input and makes a POST request to backend API to update the product details. This method also takes the index of the product as a method argument. It gets executed when the user submits the form for editing a product. The backend API makes use of the product’s unique id to update its details.

In mounted life cycle hook, we fetch all the products from the E-Commerce API and store them in the products array. In addition to this, we also add a property showEditForm to all products and set it to false.

mounted : async function mounted(){
    const response  = await fetch(urlGetProduct);
    this.products = await response.json();
    for(product of this.products) {
        product.showEditForm = false;
    }
}

Now that our component is created we have to add this component to our DOM. For this, we make use of the mount method.

app.mount("#app");

This statement mounts our component to the HTML element with id “app”. Now our Vue component controls everything inside this element. We can make this HTML element to render dynamic data, add interactivity and handle events occurring inside it. This completes the creation of our Vue component in app.js.

Designing the Component’s Template

We are now back to our index.html file.

We have created an h1 tag for displaying the heading at the top of the web page. Then we have to create a div element with id as “app”. This will be the playground of our Vue component. All the data fields declared in our component’s data option are accessible here. First, we will design a form for adding a new product. Then a section to display product details. Finally, a form for editing products. This will be very similar to the first form.

For achieving all this, Vue gives us the power of directives.
Vue Directives

Directives are like instructions to Vue to do something. Vue provides us with many directives in our armoury. These directives can be used for listening to events and conditional rendering of HTML elements to the DOM.

Add Form

Let’s start with the add form. Here we will use the directives “v-on” and “v-show”. The “v-on” directive is used for listening to DOM events. This includes events like clicking, hovering, scrolling and many more. We will use this directive to listen to click events on the “Add a new product” button. On this click event, we can either perform some JavaScript logic or we can call some method of our component declared earlier. While calling the method, we can also pass arguments.

<button v-on:click=”addProductButtonPressed”> Add Product </button>

Vue also provides shortcuts for some directives. For example, “v-on” can be replaced with @ symbol.

<button @click=”addProductButtonPressed”> Add Product </button>

We will use the “v-show” directive to show the form for adding products. The “v-show” directive can be used to toggle the display of some HTML element based on some boolean condition. In the form, we will make use of the boolean variable showAddForm to decide whether to display the form or not.

Now in designing the form, we make use of the “v-model” directive. We can use this directive in the input fields of the form. This creates a two-way binding between the input fields and the data fields of our component. This way we can easily read the input values and even reset them when required.

<input type="text" placeholder="Enter name" v-model="tempName">

At the bottom of the form will be a submit button. Here also we will make use of the “v-on” directive to listen to the click event.
Product Details

In a div element with class “products-box”, we will use the directive “v-for” for looping through the products array. In the loop, along with the individual product, we will also keep a count of the index.

Now the interesting part is, inside this div, all the HTML elements will be rendered one after the other for all the individual products. And for different products, we will be displaying dynamic content based on the product details.

We can use “v-bind” for binding the attributes of HTML element with dynamic content.

<img v-bind:src=”product.imageURL” alt=”product-image”>

Along with “v-for” directive we also have access to “v-if” and “v-else” directive which we can use in an if-else situation. But, it is beneficial to use “v-show”, instead of “v-if” anywhere possible because “v-show” only displays or hides the content. In case the condition is false, it does not remove any part from the DOM, it just hides it. For displaying dynamic text content, we have to wrap data fields inside double braces.

<h2 class="product_name">{{product.name}}</h2>

** Edit Product

Finally, we will design the form for edit product functionality. The layout of this form will be similar to the earlier form. We will be using the same directives “v-show”, “v-on” and “v-model”. The only difference will be the logic for handling the submission of the form.

So after designing the component template, our index.html will look something like this:

In this HTML file, the div element with class “product-item” encapsulates displaying the product details and its edit form. It is this div element, which is rendered for all the products.

CSS

Let’s also add some custom CSS :

So now we have a front-end to display all the products and their details. We have also got the functionality to add new products and edit the existing ones.

Why use a framework?

Front-end frameworks have made the lives of developers a lot easier. The biggest advantage of using a framework over traditional JavaScript is the link between our data and its presentation. Using frameworks, developers do not need to worry about writing the code for updating DOM when some variables change. Frameworks achieve this very easily using two-way binding. Along with easing our work, some frameworks also provide additional features like routing, which can be used to create Single Page Applications.

But why Vue.js?

Vue.js is getting backed by a lot of developers. The Vue.js community is rapidly growing. The recent updates to Vue have made it a lot more robust. Many prefer Vue.js over other frameworks because of its ease-of-use, its performance, and its compact size. The official documentation of Vue is a great resource to get a deep dive into the framework. Many also consider Vue as a combination of all good parts of React and Angular. Hence, Vue.js is worth giving a try.
Follow the next tutorial in the series, where we will create categories and link products with categories.

Let’s Link Products With Category for our E-Commerce App | by Nil Madhab | JavaScript In Plain English | Dec, 2020 | Medium

Nil Madhab ・ Jan 2, 2021 ・ 10 min read
Medium

Resources

Vue.js UI for our Java Springboot backend | JavaScript In Plain English

Nil Madhab ・ Jan 3, 2021 ・ 13 min read
Medium

Thank You for Reading!

Let’s Build User Profile UI With Android for our E-Commerce App

KunalShekhar — Tue, 12 Jan 2021 16:20:08 +0000

We are going to create an android UI for our UserProfile backend API we are creating for our demo E-commerce tutorial

Introduction

We are building an e-commerce platform from scratch. In the last tutorial, we build the backend for the UserProfile.

Let’s Develop an E-Commerce Application From Scratch Using Java and Spring | by Nil Madhab | Javarevisited | Dec, 2020 | Medium

Nil Madhab ・ Jan 10, 2021 ・ 5 min read
Medium

In this article, we will build the android UI for the UserProfile backend, which can be a base for many other applications.

Not long before was the time when the user profile consisted of a hard copy form. From the advent of digital technology and sophisticated software, profiles have been becoming more intuitive.

Backend API description

Here we describe the most important component of our user profile application: the REST API. A REST API is an application that uses the existing protocol stack for data communication between different applications on the web. Here, we are using a web API to communicate between our android application and a remote database for user data storage. Our API handles the GET and POST request which basically allows the android application to create and fetch data from the database.

The API used here is created using Java and Spring Boot framework. Spring is a popular application development framework, developed for the enterprise edition of the Java programming language. You can find detailed project files for the REST API over here.

Android Studio is the official Integrated Development Environment (IDE) for Android app development, based on IntelliJ IDEA. On top of IntelliJ’s powerful code editor and developer tools, Android Studio offers even more features that enhance your productivity when building Android apps, such as:

A flexible Gradle-based build system.
A fast and feature-rich emulator.
A unified environment where you can develop for all Android devices.
Apply Changes to push code and resource changes to your running app without restarting your app.
Code templates and GitHub integration to help you build common app features and import sample code.
Extensive testing tools and frameworks.
Lint tools to catch performance, usability, version compatibility, and other problems.
C++ and NDK support.
Built-in support for Google Cloud Platform, making it easy to integrate Google Cloud Messaging and App Engine.

The benefit of using Android Studio over any other IDE is we get a rich set of features built-in which enable us to focus more on the development aspect while the back-end of this IDE handles the requirements and dependencies. For this project, an existing API endpoint has been used for database connectivity.

Prerequisite:

Before we start developing, we need to check off a few requirements:

You will need to have a Java JDK installed on your system. You can find the instructions for installing the JDK here.
You will need to install Android Studio on your system.
Lastly, we can use our Android smartphone with USB debugging enabled for testing the android app or we can use the built-in Android emulator from Android Studio (I have used my smartphone for testing and debugging).

Project Setup and Structure:

Once you install Android Studio on your system, you can start with creating a new project.

Android Studio Welcome Screen

To create your new Android project, follow these steps:

In the Welcome to Android Studio window, click Start a new Android Studio project.
In the Select a Project Template window, select Empty Activity and click Next.
In the Configure your project window, complete the following:

Enter “User Authentication” in the Name field.
Enter “com.example.userprofile” in the Package name field.
If you’d like to place the project in a different folder, change its Save location.
Select Java from the Language drop-down menu.
Select the lowest version of Android your app will support in the Minimum SDK field. I have selected API level 22 (Android Lollipop).
Leave the other options as they are.

Click Finish.

After some processing time, the Android Studio main window appears.

Now take a moment to review the most important files. First, be sure the Project window is open (select View > Tool Windows > Project) and the Android view is selected from the drop-down list at the top of that window. You can then see the following files:

app > java > com.example.userprofile > MainActivity

This is the main activity. It’s the entry point for your app. When you build and run your app, the system launches an instance of this Activity and loads its layout.

app > res > layout > activity_main.xml

This XML file defines the layout for the activity’s user interface (UI). It contains a TextView element with the text “Hello, World!”

app > manifests > AndroidManifest.xml

The manifest file describes the fundamental characteristics of the app and defines each of its components.

Gradle Scripts > build.gradle

There are two files with this name: one for the project, “Project: User Authentication” and one for the app module, “Module: app.” Each module has its own build.gradle file, but this project currently has just one module. Use each module’s build.gradle file to control how the Gradle plugin builds your app. For more information about this file, see Configure your build.

Before you run your first app, get your smartphone, and enable USB debugging by following the instructions over here. After, enabling USB debugging, connect your smartphone to your PC and you are ready to go.

In Android Studio, select Run > Run ‘app’ or click the Run icon in the toolbar.

Congratulations on creating your very first app. But you are far from what we have to achieve. Next, we need to create the rest of the application.
Setting up the files:

Let’s start with app > res > drawables. This is the directory where we will be storing all the graphical elements for our application. We are going to store three different categories of graphic elements.

Image. (filename: background.jpg)
Icon elements. (filenames: account.xml, email.xml, pencil.xml)
Custom graphic file. (round_button.xml)

The image used here is for the background of the UI. You can use any image you like but be sure to use the same file name for the next part where we will be coding the back-end and creating activity layouts.

Icon elements are XML files for vector graphic icons used in our application. You can find and download these files from here.

The custom graphic file here is used for creating a rich look for our buttons in the application. It’s an XML file containing various tags and attributes specifying the properties that the button will have for its appearance.

Moving on, we have two layout files for our two pages: create user and fetch user data page. These files are contained in app > res > layout having names activity_main.xml, user.xml. To create these files, right-click on the layout directory and select new > layout resource file. A New Resource File pop-up with several fields should appear. In the File name field, we’ll insert the required file names.

In the Root element field of this same pop-up, make sure to type in RelativeLayout. The remaining two fields can remain the same. Click OK. This will create a new layout for us.

However, Android Studio will likely default to the visual editor we saw our Constraint Layout in earlier. To edit our layout’s XML directly, we’ll need to navigate out of the visual editor and into the XML editor. Near the top-right of the editor screen, you should see three tabs: code, split, design. Select the code tab to toggle into the XML editor.

activity_main.xml

user.xml

If you can notice then all these files contain some common tags having some attributes. These tags are View elements that are going to be displayed in the application. Let’s review them one by one for a general idea.

RelativeLayout: RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left, or center).
TextView: A TextView displays text to the user and optionally allows them to edit it. A TextView is a complete text editor, however, the basic class is configured to not allow editing. EditText: EditText is a standard entry widget in android apps. It is an overlay over TextView that configures itself to be editable. EditText is a subclass of TextView with text editing operations. We often use EditText in our applications to provide an input or text field, especially in forms.
Button: In Android, Button represents a push button. Push buttons can be clicked, or pressed by the user to perform an action. On a button, we can perform different actions or events like click event, pressed event, touch event, etc.
TableLayout: A layout that arranges its children into rows and columns. A TableLayout consists of several TableRow objects, each defining a row. TableLayout containers do not display border lines for their rows, columns, or cells. Each row has zero or more cells; each cell can hold one View object. The table has as many columns as the row with the most cells. A table can leave cells empty. Cells can span columns, as they can in HTML.
TableRow: For building a row in a table we use the TableRow element. Table row objects are the child's views of a table layout. Each row of the table has zero or more cells and each cell can hold only one view object like ImageView, TextView, or any other view.

Rows and Columns in TableLayout Android

There are many more tags and have many different attributes for creating various intuitive design elements and UI for an android application.

Next up, we will create the files necessary for the back-end of our applications: Java files.

We will be creating two more java class files which are Config.java and User.java.

To create them, right-click on app > java > com.example.userprofile directory and click New > Java Class. Enter the file name and press enter.

Before moving ahead, we must configure our AndroidManifest.xml file for the file additions and requirements that we want.

AndroidManifest.xml

Adding in the code

To save the hassle, each class for a given activity contains a default piece of code that is essential for the behavior of the application.

As a user navigates through, out of, and back to your app, the Activity instances in your app transition through different stages in their life-cycle. The Activity class provides several callbacks that allow the activity to know that a state has changed: that the system is creating, stopping, or resuming an activity, or destroying the process in which the activity resides.

Within the lifecycle callback methods, you can declare how your activity behaves when the user leaves and re-enters the activity. For example, if you’re building a streaming video player, you might pause the video and terminate the network connection when the user switches to another app.

When the user returns, you can reconnect to the network and allow the user to resume the video from the same spot. In other words, each callback allows you to perform specific work that’s appropriate to a given change of state. Doing the right work at the right time and handling transitions properly make your app more robust and performant. For example, good implementation of the lifecycle callbacks can help ensure that your app avoids:

Crashing if the user receives a phone call or switches to another app while using your app.
Consuming valuable system resources when the user is not actively using it.
Losing the user’s progress if they leave your app and return to it at a later time.
Crashing or losing the user’s progress when the screen rotates between landscape and portrait orientation.

Activity Life Cycle

We have extensively use the onCreate() activity method which defines the behavior of the application on start-up.

For the first file, MainActivity.java:

MainActivity.java

Let’s go through the methods defined in this code snippet-

create(): This method is at the heart of profile creation where the magic happens. Right from getting the input to processing it; is managed by this method. The most important job of this method is to create an HTTP client tunnel connection to the server hosting the database and send the HTTP POST request. Here, we have provided the existing API endpoint. Also, this method will be handling failed requests and other errors while successfully creating a user profile.
user(): This method starts a new activity called user. There we can view the existing user profiles in the database.

Next, we have the User.java file:

User.java

Let’s go through the methods defined in this code snippet-

fetch(): This method performs the operation of fetching user data from a remote database. It performs this operation by sending an HTTP GET request. After fetching the data, the method dynamically creates the required number of rows for the number of users that will be displayed on the UI. The received data is in the form of a JSON string, which is parsed into a JSON object. From here, we extract the necessary data for display purposes.
createTextView(): This method creates a TextView object while setting the required parameters to this object and finally attaching it as a child to the TableRow object.

Finally, we have the Config.java file:

config.java

This file is a java interface file that stores the API endpoint.

Now we will run our program as previously stated by connecting our android device via USB.

Results

Resources

User Authentication Android Application for Java and Spring Backend | Javarevisited

Nil Madhab ・ Jan 8, 2021 ・ 6 min read
Medium

Let’s Build Signup, SignIn, and Role-Based Access in Our E-Commerce App

KunalShekhar — Tue, 12 Jan 2021 13:04:43 +0000

An Overview Of The Tutorial!

Introduction

Database Design

API Design

Demo overview

Signup

Dealing with the Android Application

Our Intention

Requirements

Dependencies

Permissions

Creating Models

Updating the API

Creating Activities

The Main Page

Signing Up Users

Signing In Users

Constructing the Dashboard

Running the Application

Resources

Introduction

This is a series of tutorials we are building to demonstrate how to build an E-Commerce App, one component at a time.

We are going to implement a basic authentication which will be extended to role-based access i.e. Admin can change anything, add new Users, a manager can only add/update Category and Products, users can only see the products and Category.

When users/admin sign in, we will generate an authentication token, which will be used to verify the users, when they are going to access an API later.

Database Design

We will have a user table and tokens table. For every user, when they signUp and sign in, we will generate a token, which will have an expiry date. After the expiry day has passed, we should generate a new token, although we will not cover it in the tutorial.

API Design

UserController will have two methods, Signup and SignIn, which will be POST requests.

Demo Overview

SignUp

Let's look at signUp API. It takes SignupDto as Input and returns True or False as output depending upon if SignUp succeeds.

We follow these steps for signup

1.Encrypt the password
2.Save the User
3.Generate auth token and save it in database
4.Return Success

We will now look at models that are mapped as a table in the database

User and Tokens are linked by user_id field in tokens table, which has one to one relationship, i.e one user can have one token and vice versa.

Let’s Develop an E-Commerce Application From Scratch Using Java

Nil Madhab — Mon, 11 Jan 2021 12:52:23 +0000

Let’s Develop an E-Commerce Application From Scratch Using Java and Spring

Project setup, develop category and product APIs

Motivation

In my opinion, the best way to learn programming is to create a real life project which has practical use, this way the entire learning experience becomes quite exciting. Also, you can showcase your app in your portfolio, which can help you a lot if you want to land a freelancing gig or in an interview.

In this series of blogs, you will amplify your development skills by learning how to build an e-commerce platform from scratch. First, you have to be familiar with Java and Spring Boot, which we will use to build the backend, and Vue.js, which we will use for the frontend.

Video tutorial

Creating the Project

First, go to https://start.spring.io/ where we can create new spring app and add dependencies
Select maven, add Spring Data JPA and Spring Web dependencies

Click on Generate and download the .zip file, uncompress it and open it using the IntelliJ Idea

Project Structure

Main class

The src/main/java folder of the project contains a class that has a main method. It is the entry point for the application.

application.properties

In src/main/resources folder there will be a file named ‘application.properties’. This file will play a major role in conveying the spring the configurations that we make and how it should create the object for us. In other words, it plays a major role in Inversion of Control(IoC).

pom.xml

In the project folder, there will be a file called **‘pom.xml’**. This file is where we will be adding all the required dependencies.

Now, the project structure will be as below-

You can check the project structure of the backend in the GitHub repository branch given below-
GitHub — webtutsplus/ecommerce

Overview of our Backend Application

In this Spring Application, following are important packages that you have to know before starting.

This is spring architecture. The outside world calls the REST APIs, which interact with the controller, which interacts with the Service. Service calls the repository.

The repository interacts with the database. We follow this pattern to make the codebase maintainable, instead of having spaghetti code, which can be a nightmare in long term.

Model / Entity

Model is the basic entity that has a direct relationship with the structure of a table in the database. In other words, these models serve as containers that hold similar and relative data that are used to transport these data from clients to the database. User Profile, Product, and Category are some models in our backend application.

Repository

Repository is an interface that acts as a bridge between the database and the application. It carries the model data to and from the database. Every model will have a unique repository for the data transportation.

Service

Service is the part of the architecture where the repository is instantiated, and business logic is applied. The data from the client reaching here is manipulated and sent through the repository to the database.

Controller

The controller is the part of the architecture where the requests from the clients are first handled. It controls the processes that should run on the backend and the response that has to be elicited to the clients. It interacts with the service which in turn interacts with the repository which in turn interacts with the database using models.

Journey of Data

Designing the Category API

Once we have the basic structure ready, it is time to add some product and categories for our ecommerce store.

Take as an example, we can have a category of shoe and have different types of shoes as product. So one category can have many products, but each product will belong to one category.

Model

First we will create a model, Category It will have four fields.

id
categoryName
description
imageUrl

We will also create a setter and getter for the four fields.

It will have a corresponding table categories in the database

We are using @NotBlank annotation for the category. For that, we have to include the following dependency in pom.xml file.

<dependency>

  <groupId>javax.validation</groupId>

  <artifactId>validation-api</artifactId>

</dependency>

Repository

Now we will create a repository Categoryrepository.java that will extend JpaRepository.

It will have a method findByCategoryName.

Service

Now we will create a CategoryService file that will be responsible to create, update or fetching repositories.

The Categoryrepository has inbuilt methods findAll(), save() as it is extending JpaRepository

Controller

We will create a helper class ApiResponse.java, which will be used to return a response for the APIs.

Now we will create the controller which will contain all the APIs

We will create 3 APIs for category

create
update
list all category

We will also add swagger for easy testing of the code.

We need to also add these dependencies in pom.xml file for swagger and h2 in memory database. But you are free to choose any other database of your choice.
io.springfox

springfox-bean-validators

2.9.2

io.springfox

springfox-swagger2

2.9.2

io.springfox

springfox-swagger-ui

2.9.2

com.h2database

h2

runtime

We also have to modify our application.properties file by adding the lines

spring.datasource.url=jdbc:h2:mem:testdb

spring.datasource.driverClassName=org.h2.Driver

spring.datasource.username=sa

spring.datasource.password=password

spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

Now, run the code and open http://localhost:8080/swagger-ui.html page. We will see this screen

Demo

Let’s create a category watch, with this request body. (Note: we do not need to pass id here, it will be auto created.)

{
  "categoryName": "watches",
  "description": "best watches",
  "imageUrl": "https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
}

You will get the response as below-

Now, let us hit the get API

We will get the following response-

[
  {
    "id": 1,
    "categoryName": "watches",
    "description": "best watches",
    "imageUrl": "https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
  }
]

https://www.youtube.com/watch?v=wh3mDFB7OFg

Enable CORS

We will add the webconfig.java file, so that our front end can hit the API.

Hurray! We can now play with the APIs and can create some new category, update and fetch all the categories.

Designing the Product API

Now we have some categories, it is time to make the products APIs. First we will create the model, then we will create the repository, then we will make the service and at the end, we will create the controller and test it.

Model

Product will have id, name, imageURL, price, description as well as a foreign key to category, as every product belong to a category.

@Entity
@Table(name = "products")
public class Product {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    private @NotNull String name;
    private @NotNull String imageURL;
    private @NotNull double price;
    private @NotNull String description;

    @JsonIgnore
    @ManyToOne(fetch = FetchType.LAZY, optional = false)
    @JoinColumn(name = "category_id", nullable = false)
    Category category;


    public Product(String name, String imageURL, double price, String description, Category category) {
        super();
        this.name = name;
        this.imageURL = imageURL;
        this.price = price;
        this.description = description;
        this.category = category;
    }
// setters and getters
}

Repository

Next we will create a file, ProductRepository.java in repository package, which will just extend JpaRepository. If we need some methods we will add it later

package com.educative.ecommerce.repository;

import com.educative.ecommerce.model.Product;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface ProductRepository extends JpaRepository<Product, Integer> {

}

Service

Now we are ready to create the service class. Create a file ProductService.java in service directory. It will have an autowired ProductRepository.

@Service
public class ProductService {

@Autowired
    private ProductRepository productRepository;
}

DTO concept#

Before creating a product, we need to understand, what is a DTO (data transfer object)

Martin Fowler introduced the concept of a Data Transfer Object (DTO) as an object that carries data between processes.

In category controller, we directly used the model as request body, but that is not practical in many cases. We need to create a different object because

sometimes we might have to change the model, and we do not want to change the API for backward compatibility
We can’t use the model as request body if it has relationship with other model.

So quickly, we will create a package dto and inside the package we will create another package product, and there we will create our ProductDto.java class, which will have the following attributes

private Integer id;
private @NotNull String name;
private @NotNull String imageURL;
private @NotNull double price;
private @NotNull String description;
private @NotNull Integer categoryId;

We are also passing categoryId, because we need this to link a product with a category.

Controller

Now as we have the productDto ready, now time to create ProductController.java class

@RestController
@RequestMapping("/product")
public class ProductController {

@Autowired
    ProductService productService;
    @Autowired
    CategoryService categoryService;
}

It will autowire ProductService and CategoryService

Create a new product API

@PostMapping("/add")
    public ResponseEntity<ApiResponse> addProduct(@RequestBody ProductDto productDto) {
        Optional<Category> optionalCategory = categoryService.readCategory(productDto.getCategoryId());
        if (!optionalCategory.isPresent()) {
            return new ResponseEntity<ApiResponse>(new ApiResponse(false, "category is invalid"), HttpStatus.CONFLICT);
        }
        Category category = optionalCategory.get();
        productService.addProduct(productDto, category);
        return new ResponseEntity<>(new ApiResponse(true, "Product has been added"), HttpStatus.CREATED);
    }

We will receive categoryId and product details from the request body.

First we will check if the categoryId is valid or return “category is invalid” error.

Then we will create a product by calling method, productService.addProduct which takes productDto and category as arguments.

public void addProduct(ProductDto productDto, Category category) {
        Product product = getProductFromDto(productDto, category);
        productRepository.save(product);
    }

public static Product getProductFromDto(ProductDto productDto, Category category) {
        Product product = new Product();
        product.setCategory(category);
        product.setDescription(productDto.getDescription());
        product.setImageURL(productDto.getImageURL());
        product.setPrice(productDto.getPrice());
        product.setName(productDto.getName());
        return product;
    }

The complete code can be found in the GitHub repository given below-
GitHub — webtutsplus/ecommerce at product-apis

And this marks the end of this tutorial. But wait! The tutorial series will continue for building the UI using Vue.js for the above-developed backend application. Till that, stay tuned!

Happy Learning

Continue to the next tutorial, where we will use the API to make a frontend using vue.js

https://javascript.plainenglish.io/lets-develop-an-e-commerce-application-from-scratch-using-spring-boot-and-vue-js-aca33bd76517

DEV Community: Webtutsplus.com

Let’s Add Products for our eCommerce App with Vue.js

Introduction

Let’s Develop an E-Commerce Application From Scratch Using Java and Spring | by Nil Madhab | Javarevisited | Dec, 2020 | Medium

Nil Madhab ・ Jan 10, 2021 ・ 5 min read Medium

Let’s Build User Profile UI With Android for our E-Commerce App | by Nil Madhab | Javarevisited | Dec, 2020 | Medium

Nil Madhab ・ Jan 8, 2021 ・ 10 min read Medium

Demo

Database Design

API Design

Vue.js introduction

Vue.js Requirements

Let’s get started

Creating a Vue Component

Our Component

Designing the Component’s Template

Add Form

Why use a framework?

But why Vue.js?

Let’s Link Products With Category for our E-Commerce App | by Nil Madhab | JavaScript In Plain English | Dec, 2020 | Medium

Nil Madhab ・ Jan 2, 2021 ・ 10 min read Medium

Resources

Vue.js UI for our Java Springboot backend | JavaScript In Plain English

Nil Madhab ・ Jan 3, 2021 ・ 13 min read Medium

Let’s Build User Profile UI With Android for our E-Commerce App

Introduction

Let’s Develop an E-Commerce Application From Scratch Using Java and Spring | by Nil Madhab | Javarevisited | Dec, 2020 | Medium

Nil Madhab ・ Jan 10, 2021 ・ 5 min read Medium

Backend API description

Prerequisite:

Project Setup and Structure:

Adding in the code

Results

Resources

User Authentication Android Application for Java and Spring Backend | Javarevisited

Nil Madhab ・ Jan 8, 2021 ・ 6 min read Medium

Let’s Build Signup, SignIn, and Role-Based Access in Our E-Commerce App

Let’s Develop an E-Commerce Application From Scratch Using Java

Let’s Develop an E-Commerce Application From Scratch Using Java and Spring

Motivation

Video tutorial

Creating the Project

Project Structure

Main class

application.properties

pom.xml

Overview of our Backend Application

Model / Entity

Repository

Service

Controller

Journey of Data

Designing the Category API

Model

Repository

Service

Controller

Demo

Enable CORS

Designing the Product API

Model

Repository

Service

DTO concept#

Controller

Create a new product API

Nil Madhab ・ Jan 10, 2021 ・ 5 min read
Medium

Nil Madhab ・ Jan 8, 2021 ・ 10 min read
Medium

Nil Madhab ・ Jan 2, 2021 ・ 10 min read
Medium

Nil Madhab ・ Jan 3, 2021 ・ 13 min read
Medium

Nil Madhab ・ Jan 10, 2021 ・ 5 min read
Medium

Nil Madhab ・ Jan 8, 2021 ・ 6 min read
Medium