DEV Community: Nil Madhab

Build Multiplayer Realtime Tic Tac Toe Game with Socket.io and Vue

Nil Madhab — Fri, 05 Nov 2021 18:52:46 +0000

In this article, we will develop a tic-tac-toe game from scratch using Vue. We will integrate the real time feature with socket.io, so that two players can play the game from different browsers at the same time.

Video Tutorial

Project creation

First, create a blank Vue project and in the app.vue,remove the hello world component and add the html for the grid. I copied the CSS from this tutorial.

We will define 9 blocks with id block_0 to block_8 with class block for each block.

You will see the result like this.

You can find the Github code till now in this branch.
GitHub - nilmadhab/tic-tac-toe-youtube at grid-setup

Draw X and O on click

Now, we will define two variables in the data section:

content
turn

Content will be an array of length 9, one element for each block of html, initialized with the empty string. When we click one block, we will change the value at that index of the content. Let’s define the function @click, and use it.

We will draw the X and O based on the content array and on the click will trigger the draw function in each block.

Now, let’s define the draw function in the methodsection. If the value of turnis true, we will draw X, else we will draw O and change the value of turn. So, first click we draw X andturn becomes false. So, on the second click, we draw O and turn becomes true and so on..

Calculate Winner

Now, after every call in the draw function, we have to calculate if the game is finished or not. If finished, we can find who is the winner and display it.

We will declare three variables more in the data section.

In the template section, we will add two h2 tags to declare the winner or a tie.

Now, we are ready to define calculateWinner function. The logic is if the same row, column or diagonals are occupied by the same player, he/she wins.

We call this function, every time we draw.

Calculate Tie

Now we will define tie function. The logic is even if there is an empty block, the game is not tied.

We will define this function is method section and call it from draw method.

Entire script section till now.

Reset Board

Now, when the game is tied or over, we have to show an option to reset the board.

We will define the resetBoard function next. We reset the content array and all the other variables.

Github code till now.
GitHub - nilmadhab/tic-tac-toe-youtube at game-logic-implemented

Multiplayer mode Using Socket.io

Now, we will integrate the project with Socket.io, so that two players can play the game at the same time. When one player clicks X, it should appear on the second player’s screen and when the second player clicks O, it should appear on the first player’s screen. How to implement it?

Here, socket.IO comes handy. The documentation says,

If you want to watch the video tutorial, you can download the above branch and fast forward the video to 35:42 mins.

Set up server for socket.io

We will first create a folder outside the Vue project. Create a file server.js inside the folder. We will create an express server inside the folder.

Run npm init. It will set apackage.json file.

Then run

npm i socket.io

It will install socket.io in the project.

server.js

Now. lets create a server and integrate socket.io.

We will set cors rule, so that our vue.js project running on port 8080 can access the server.

We will emit an event from the server and our Vue client should listen to it and receive it.

Run the server with

node server.js

App.vue

Now, we will set up socket.io in client side.

Run

npm i socket.io-client

inside the vue.js project from terminal.

We will import the library by

import io from ‘socket.io-client’
const socket = io(“[http://localhost:3000](http://localhost:3000)")

inside the script section.

In the created hook, we will listen to the event.

You will see “youtube tutorial” will appear in the console.

The client can also talk to the server in the same way.

Game Logic with Socket.io

After we call the draw function, player 1 client will send the event to the server.
When the server receives it, it will broadcast it to the player 2.
Player 2 will then update the grid.
Then player 2 will click O and call the draw function, it will send the event to the server.
The server will broadcast it to player 1.

The game will keep going like this.

> # We also need to pass a parameter, drawFromOther, in the draw function. Depending upon this flag, we will emit the event again. If the drawFromOther flag is set to false, we will send the play event.

Now, we will update the template. We will send the drawFromOtheras false, which means the event will be sent to the server.

Server.jswill receive the event and broadcast it.

Now, the client will receive the event in created hook.

It will receive the event and draw at the index, but we pass drawFromOther param as true, so that the event does not again sent to the server.

Complete code of App.vue

That's it. The multiplayer game is ready to be played. Open localhost:8080 in two different browsers and click alternatively. The game should work.

Let’s Develop an E-Commerce Application from Scratch Using Spring Boot and Vue.js

Nil Madhab — Sat, 30 Oct 2021 19:32:16 +0000

Project set up and building admin panel for managing Category in Vue.js

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.

This tutorial is perfect for people who are starting their journey in Vue.js as we build it from scratch, integrate remote API call, router, break down UI into components, form handling as well as cover some important concepts like v-model, v-on.

In this series of blogs, you will amplify your development skills by learning how to build an e-commerce platform from scratch. I am good at backend development, and I wanted to learn Vue.js, so I learned it by creating this project. I wanted to share what I built, so I choose medium.com to share my journey.

Video tutorial

Note to the reader

Although I have built the entire application and wrote series of tutorials, which are quite popular and top in google result, which I am very proud of, (more than 130K views in medium alone) I later found some parts are missing from those tutorials and some tutorials are not relevant anymore. For example, in some tutorials, we used vanilla JS and also started to develop an android app, which we discarded later. Also, the detailed explanation for each part was missing, as my focus was to build the application, less on writing tutorial.

So, this is my attempt to redo the tutorials, deleting/editing some parts which are not relevant anymore and creating some tutorials which cover the missing pieces, so it will be very easy for the users to follow the tutorials.

Backend Tutorial

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

Nil Madhab ・ Oct 29 '21

#java #vue #programming #webdev

What we will cover in the tutorial

This tutorial will focus on the front-end.

Set up a Vue.js project
Configure router, API call, sweet alert
Create a dashboard to list all the categories present in the backend
Adding and Editing Categories.

As part of building an E-Commerce application, previously we have configured the back end of this App and developed some APIs using Spring boot. If you are interested, you can check out this tutorial. But if you are only interested in the front-end, you can start directly from here.

Every e-commerce store like Amazon will have millions of products, and they often belong to a category. For example, a shoe category consists of many shoes which are products. There can be a category, a sub-category, but for simplicity, we will just take categories and products.

Now, let us see how to configure the front-end and create the user interface for category using one of the most popular JavaScript frameworks — Vue.js. Let’s get started!

Final Demo

At the end of the tutorial, we will

list all categories

Add a new category

Edit a category

Start the project

Let’s get started.

Open the command line and execute the following command to initiate a new Vue project, assuming you have vue.js installed or go to this link.

> vue create ecommerce-ui

The command should work properly if you already have Vue CLI installed. Next, it will ask for some project configurations. Give the following data for configuring our front end Vue app:

After confirming all the details, we will have a project folder created for us by Vue CLI.

Go to the project folder and give the following command to run the application

> npm run serve

After the server got hosted and the application is started, you can go to http://localhost:8080/. The response should be something similar to the output, as below-

Yay! We have created our Vue app. Already off to a good start.

The project will have some files with .vue extension, which are called Vue components.

Vue Components

Almost all frontend frameworks allow us to create components that we can reuse at multiple places on the same or different websites. Some examples include a search bar, login form, product display component, etc. In Vue, files with “.vue” extension are known as single file components. These single file components are composed of HTML, JavaScript, and CSS.

<template>
  <!-- HTML Template -->
</template>

<script>
  export default {}
</script>

<style>
</style>

The template part contains the HTML of the component.
The script tag contains the code defining the custom behavior of the component.
The style tag houses the CSS of the component.
src/components and src/views contain all our components.

Folder Structure

Let’s go through the folder structure of our newly created Vue project

public — contains the main HTML file of our project
src/assets — stores the media files like images, logos, etc.
src/components — stores all the reusable components of our project. These components are not unique to some specific route.

Apart from this, we have some important files too

App.vue — it is the root component of our project
main.js — it is the starting point of our project. Here we import our root component App.vue, our router file index.js and createApp method. After this, we mount our root component to the DOM using the following statement:

    new Vue({
      render: h => h(App),
    }).$mount('#app')

The folder structure is not enforced by Vue, we can customize this as per our requirements.

And now we have our basic version of the front-end of our App where we will work more to add more functionalities. The basic project structure can be found in the following GitHub repository.
GitHub — webtutsplus/ecommerce-ui at setup

Building the UI for Category

Once the basic structure is ready, we will start building the dashboard for categories.

We will first add a router to our project. Run the following command in your command line to install the Vue router in your system

vue add router

When asked to choose history mode, choose yes. Now if you run the app, you will see two links in the above.

It will create a router directory with index.js file inside it. Also, it will create a views directory, with two files inside it, which are

About.vue
Home.vue

If you run the front end application using the command npm run serve, you will see two links on thehomepage.

We still have Helloworld component, let’s delete that. Also delete lines 4 and 10 and 15 from Home.vue, containing the Vue logo image and references to HelloWorld.

If you run the app, you will see the following screen.

Styling the App

Open the file index.html and replace the content with the following code.

We just added some basic fonts, bootstrap.css and jQuery.

Adding a Category

Time to create a form for adding category.

We will create a directory Category inside the views directory.
Create a file *AddCategory.vue *inside it
Add the content given below, which contains the form that takes input data for creating a category

v-model binding concept

As you can see, in the form, we have used v-model=”categoryName”. This is an important concept in Vue.js called Form Input Bindings.

You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.Updating Router Paths

For our single-page application to run properly, we need to create router paths for our newly created components. Go to src/router/index.js file and update it as below by adding as well as importing AddCategory component.

{
    path: "/admin/category/add",
    name: "AddCategory",
    component: AddCategory,
  }

> # Notice although we have vue components both in views and components directory, the main difference is we use vue components in views directory to use in router, i.e each vue components in views directory mapped to a route.

Now if we go to the page http://localhost:8080/admin/category/add

Axios and sweetalert integration

Axios is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node

Run the command npm install --save axios
We add the following line in main.js window.axios = require('axios')
We will also install the package npm install --save sweetalert

API call

First, we will trigger addCategory function, by clicking the submit button. We can do it easily by adding the code @click="addCategory" in submit button, so it looks like this

We will define a function in the methods section inside the script tag.

Base url

We have hosted our backend on Heroku, which you can access by the endpoint, https://limitless-lake-55070.herokuapp.com/swagger-ui.html#/category-controller

We will define https://limitless-lake-55070.herokuapp.com/ as our base url and to create a new category, we need to hit,

For adding a new category, we need to hit the baseURL + “category/create” with this JSON with a post request, of request body.

Which we will implement in the script section.

The complete code until this stage of this application can be found in the GitHub repository given below.
GitHub — webtutsplus/ecommerce-ui at category-add

Nice job guys, if you succeeded in making it so far. Next, we will start with displaying the categories. If not, you can run the above Github repo in your local machine, it should work.

Displaying the Categories

Now, we can create a new category, time to display all the categories in a nice manner.

Our final result of displaying the categories will be as shown below-

Component Breakdown

To display all the categories, we need to create a view for that. Create a file named Category.vue under src/views/Category folder. This view is used to display the categories that are fetched from the database. This view also holds the references that will redirect us to AddCategory view.

In modern frontend framework like Vue.js/react, we break down our UI into small components for reusability.

Here we will also break down this by each category. This will be a component-

CategoryBox.vue component

We will create a directory Category in src/components and create CategoryBox.vue file in it.

It will have a prop category which will be passed from a parent view, and it will just display the category with an option to go to the edit page, which we will build in the next chapter.

Category.vue component

Now it’s time to create the component for listing all the categories!

This component fetches the categories from the back-end using axios and passes each category as a prop to CategoryBox component, which displays each category. Finally, the component will be a collection of categories displayed in CategoryBox components.

Go to src/views/Category/Category.vue file that we have already created and update it with the following code!

Updating the Routes

And as the final step, let us create the router path for this component to display all the categories. The following route will be appended to the routes-

{
    path: "/admin/category",
    name: "AdminCategory",
    component: Category,
}

The complete index.js file is as below-

import Vue from "vue";
import VueRouter from "vue-router";
import AddCategory from "../views/Category/AddCategory";
import Category from "../views/Category/Category";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
  {
    path: "/admin/category/add",
    name: "AddCategory",
    component: AddCategory,
  },
  {
    path: "/admin/category",
    name: "AdminCategory",
    component: Category,
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

The complete code until this stage of the application can be found in the GitHub repository given below-
GitHub — webtutsplus/ecommerce-ui at category-display

Keep going on guys. Next, we will move to editing category.

Editing a Category

Open src/views/Category folder and create a file for EditCategory view with the boilerplate code as below.

Pretty simple, we are just defining the three sections, template, script and style.

Add the form

Now, we will add the form to edit the category. It will be a form similar to AddCategory view. We also define 5 variables id, categoryName, description, imageUrl, categoryIndex and initialize those to null. We will also define the baseUrl

Send the category data to view

Now the question is how do we get the data from the Category home page to this view. The answer is simple. First, we create a router for the view. We set props: true at line 5. We will pass the Category data which we need to edit as prop.

Add option to edit

Now, we will add an option to edit a category in the CategoryBox. Line number 10–12.

Update the script

Now, we will create one prop category and in the mounted section we populate all the data.

That’s it, now if we click the edit button in categoryBox, we will see the data.

API call to save the data

Now, we have only one thing left, how to update the data in the remote server?

We will define a function editCategory in the method section. We will call this function in the submit button.

Submit

The complete code for EditCategory.vue

The complete project for this tutorial can be found in the GitHub repository given below-
GitHub — webtutsplus/ecommerce-ui at category-edit

Hurray! We have completed the part of building the front end to create categories using Vue.js! But wait! There are a lot more to learn in this tutorial series! Stay tuned until then!

Let me know in comment, if you like the tutorial, or you like any improvement to understand it better,

Happy learning!

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

Nil Madhab — Fri, 29 Oct 2021 08:01:22 +0000

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.

Note to the reader:

Although I have built the entire application and wrote a series of tutorials, which are quite popular and top in google result, which I am very proud of, (more than 130K views in medium alone)

I later found some parts are missing from those tutorials and some tutorials are not relevant anymore. For example, in some tutorials, we used vanilla JS and also started to develop an android app, which we discarded later.

Video tutorial

Playlist

Frontend

Backend

Frontend tutorial in Vue

Let’s Develop an E-Commerce Application from Scratch Using Spring Boot and Vue.js

Nil Madhab ・ Oct 30 '21

#vue #javascript #webdev #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.



<dependency>

  <groupId>io.springfox</groupId>

  <artifactId>springfox-bean-validators</artifactId>

  <version>2.9.2</version>

</dependency>

<dependency>

  <groupId>io.springfox</groupId>

  <artifactId>springfox-swagger2</artifactId>

  <version>2.9.2</version>

</dependency>

<dependency>

  <groupId>io.springfox</groupId>

  <artifactId>springfox-swagger-ui</artifactId>

  <version>2.9.2</version>

</dependency>

<dependency>

  <groupId>com.h2database</groupId>

  <artifactId>h2</artifactId>

  <scope>runtime</scope>

</dependency>


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](http://localhost:8080/swagger-ui.html) page. We will see this screen

![](https://cdn-images-1.medium.com/max/2000/1*DmVIKGkSSW14pNJOcLe9-g.png)

## 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"
    }

![](https://cdn-images-1.medium.com/max/2000/1*RRebmprvGLgUnrr53Fqr8g.png)

You will get the response as below-

![](https://cdn-images-1.medium.com/max/2000/1*w91nIxx7X0dIU_g5QQPibA.png)

Now, let us hit the get API

![](https://cdn-images-1.medium.com/max/2018/1*7rtYwUNeqt37NzAr-CyRYQ.png)

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"
      }
    ]





## Enable CORS

We will add the webconfig.java file, so that our [front end](https://medium.com/javarevisited/6-best-frontend-development-courses-for-beginners-to-learn-in-2021-f2772157864) 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.


  width="710"

  height="399"

  src="https://www.youtube.com/embed/hUXfesLKl88"

  allowfullscreen

  loading="lazy">



  
  
  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&lt;Product, Integer&gt; {

}




  
  
  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 another 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&lt;ApiResponse&gt; addProduct(@RequestBody ProductDto productDto) {
        Optional&lt;Category&gt; optionalCategory = categoryService.readCategory(productDto.getCategoryId());
        if (!optionalCategory.isPresent()) {
            return new ResponseEntity&lt;ApiResponse&gt;(new ApiResponse(false, "category is invalid"), HttpStatus.CONFLICT);
        }
        Category category = optionalCategory.get();
        productService.addProduct(productDto, category);
        return new ResponseEntity&lt;&gt;(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

Let’s Build a WhatsApp Clone Using Vue.js and Firebase

Nil Madhab — Fri, 23 Apr 2021 16:48:40 +0000

Let’s Build a WhatsApp Clone Using Vue.js and Firebase

How to build a clone of WhatsApp Web Using Vue.js, Firebase, and Spring Boot.

Introduction

We use a lot of social media platforms every day, like Facebook, LinkedIn, Twitter, Whatsapp, Instagram. One of the most used features every day is real time chat. In this tutorial, we are going to build one, using Vue.js and Firebase.

This is part of a series of tutorials, where we will be building a fully functional social networking app, where users can log in, post, add friends, and chat.

Previously, we used Firebase to create a social login using Spring Boot in the backend and Vue.js in the frontend.
Let’s Build a Robust Social Login Using Spring Boot, Vue.js and Firebase

Live Demo:
simplecoding-social

Github code for this tutorial:
webtutsplus/social-network-frontend

Project Structure

Let’s Build the Chat page

Let's build the view for the entire page, it has two components:

ChatSidebar
ChatView

For each friend, we have a room name, which we store in the backend. And we retrieve it via this API.

Complete code for the above can be found here:
webtutsplus/social-network-frontend

Response of the API

Once we have the rooms information, we send it to the child components. Let's look at the ChatSidebar component

ChatSidebar Component

It gets the rooms prop from the parent Chat and display a list of SidebarChatUserRow components for each user from the rooms list prop passed from parent Chat.vue.

It also has 3 icons in the top right, which look really good!

SidebarChatUserRow component

This component is very simple — it’s just to display the email and avatar for each user. We can add the last message later, if we want.

ChatView component

This is the right side part of the chat, where we display the actual chats. First, we will discuss how we are displaying the chats and then we will see, when we click a different user, how to update the chats.

By default, we pass the first user’s room, so it has a prop room, which also has the user information (avatar, email) which we display in the header.

From the roomname, we find the associated roomId in Firebase and get all the associated chats and display those chats.

Creating a new chat

There is a form, where we hide the send button and onclick action. We prevent the default submit and refresh action of form by v-on:submit.prevent directive.

We get the data for inputMsg div and add a new entry in firebase by adding the chat in room name.

Now we have one important function left, which is about selecting a different friend from the Sidechatbar and how to update the chatview.

As they are not a parent-child type, we can’t directly pass prop or update the props. The answer is emitting the event and listening for it.

The complete code for the chatview.view component:
webtutsplus/social-network-frontend

In this tutorial, we have covered some really interesting modern JavaScript topics like:

How to pass props.
How to render components.
How to emit events and use them.
How to integrate Firebase.

That's it. You can run the frontend code on your local computer and comment here if anything goes wrong. Thanks for reading!

References

Let’s Build a Robust Social Login Using Spring Boot, Vue.js and Firebase

More content at plainenglish.io

Let’s Build Backend for Posts in Our Social Network App using Spring

Nil Madhab — Fri, 23 Apr 2021 16:44:05 +0000

In this tutorial, we are going to add a Posts feature using Springboot Backend for a demo social network site we are building.

Introduction

We use a lot of social media platforms every day, like Facebook, Linkedin, Twitter, Whatsapp, Instagram. I always wanted to build one myself. So in this series of tutorials, we are going to build one from scratch. It has currently following features now

Users can log in by email or Github.
Users can add each other as friends.
Users can post and see each other’s posts (only text, images and videos are not yet supported)
Users can chat with their friends in whatsapp like interface.

We have used Vue.js as a frontend framework, which we deployed using Netlify and Spring Boot as backend, deployed in Heroku.

In this tutorial, we will discuss the backend of Posts.

Complete Series

Previously we have built, login system and friends features. We will extend to posts feature now.
Let’s Build a Robust Social Login Using Spring Boot, Vue.js and Firebase
Let’s Build Backend for Friends in Our Social Network App using Spring

Live Demo

https://simplecoding-social.netlify.app/

Pre-Requisites :

The basic knowledge of Java programming language.
An idea of SpringBoot MVC file structure and working principles.
Basic knowledge of creating APIs and working with JSON requests & responses.

Goals

Users should able to Post content (API to add a post).
The user should be able to see his own Posts (API to see posts by the user himself).
Users should be able to see all the Posts (API to get all posts).
Users should be able to see the posts of specific users(e.g. friend’s post).

Road Map

Create a Model to store the records in the database in the specified format.
Create a Repository to add custom User-defined methods to interact with the model and get required data.
Create a Service to perform a CRUD operation on the database by using repository methods.
Create a Controller to add API endpoints to interact with Users or Frontend Developers.

Let’s Get Started.

Model

The model defines the structure/format in which the data has to be stored in the database. It represents the java object carrying the data.

create Post.java Model class and paste the following code :

Note, that we have declared 3 entities in our Post model Id, User, Content.

The id represents the unique identification of the record.
Content will store the string content provided by the User.
Record creation date and time will be stored into ‘CreatedDate’ column of the Table.
The user_id column will store the id of the user.

Now, we have created a model for Post, let’s create a Repository for the same.

Repository

The repository contains the various methods for getting the records from the database. It is also used to create a user-defined method to get records/data from the database.

create PostRepository.java file and paste the following code :

Here, we need one custom(user-defined) method to get the user-specific posts. All other methods (e.g. findPostByID,findAllPost) will be provided by default as we extend the JpaRepository interface.

After that, we need to show the latest post at first. So, we have added custom method findAllByOrderByIdDesc . This method will send the posts into reverse order of Id.

Now, Let’s create a service for performing CRUD operations.

Service

The service is used to perform various operations(e.g. CRUD) on the database. The service file is used to write business logic in the code. Nowadays getting data is not enough we need to apply the preprocessing on data. The methods of service class will be useful to extract the data from the database holding specific conditions and rules.

create a file PostService.java and paste the following code :

Here, we have created 3 methods to save a Post, get the post of a specific user, and get all the posts.

save post method will take a currently logged-in user’s information and the content of the post and save it in the database.
get Post of a user method will take a user id of some user whose Posts the current user wants to see.
get all post method will simply provide the list of all Posts in Reversed order.

Finally, we have created services. Let’s move towards the final step.

Controller

A controller is a very important part of Spring Boot MVC. It is used to create API endpoints and interact with users via request and response. It uses the Service that we have created previously to perform the various operation to manipulate the data so that we get all data in the proper format.

paste the following code on the controller file :

Here, we have created 4 endpoints addpost, mypost, posts, /{user_id}/posts .

Add Post is the POST method that will accept the content of the user if a user is logged in and verified and store the content in the database.
My Post endpoint will show the post of the currently logged-in user.
Posts endpoints will not be requiring any authentication as all people can see the posts of other users. It will send all the Posts in response.
The last endpoint /{user_id}/posts is used to get the Posts of the specified users. It will take the user id from the request and pass it to the postService and send posts of the specified user.

Finally, we have completed the implementation of our backend. Let’s test our API endpoints.

Hurray! It's working.

Congratulations

You have learned to create a Post feature in the Backend. Stay tuned for more upcoming features.

Let’s Place Order and See Order History in E-commerce app using Vue

Nil Madhab — Fri, 23 Apr 2021 15:36:35 +0000

In this tutorial, we will learn how to display the order history of the user

Introduction

We are building an e-commerce app from scratch using Vue.js in the frontend and Java with Springboot for the backend. You can check out the first frontend tutorial of this series here.

We will be building an order feature which is a continuation of our previous tutorial.
Let’s add a Checkout Feature in Vue.js for Our Ecommerce App

You can find the complete code at Github.

Live Demo

https://infallible-swartz-b50174.netlify.app/

Pre-requisites

Knowledge of Vuejs
Visual Studio Code —open-source (Recommended)
A good browser —(Chrome — recommended)

API we will be using

For explanation and implementation of these APIs please refer to this tutorial.
Let’s add the Place Order feature to our E-commerce app using Spring Boot

Project Structure

The flow of the tutorial

Displaying order history
Displaying details for specific order

Now let’s begin with coding

So in the checkout tutorial, we implemented the Vue component Success in which we call the add order API like this

And then we redirect the user to the order component where we display the order history.

Order Component (displaying order history)

So let’s create the Ordercomponent in the src/views/Orders folder and register the route in the index.js file of the src/router folder.

You may refer to this.

First, we declare the data variables to store data from the backend API response.

orders: to store the response data

len: to store the number of orders in the user’s order history

orderList: an array to store the list of orders

totalCost: to store the total Price of the order

orderdate: to store the date at which the order was placed

We need a method that will call the backend API for listing the orders which we implemented in the previous tutorial. So, create a method and call the API using Axios get method.

In the response, we get the created date in the java format but we just need the format like yyyy/mm/dd hence we took the substring and stored it in the orderdate data variable.

Also, we do not store the details of order items in the order list instead we just store the id of that order.

Why do we do this?

The idea is to display the details of that order if and only if the user clicks on that order. So as a route param we pass the id so that we display the items in that order according to the id received through the route parameter.

Now when do we call this method?

As soon as the order component is mounted we call this method.

mounted() {
this.token = localStorage.getItem("token")
this.listOrders()
}

Now in the same component, in the template tag, we write the HTML part.

Now we display the order history (using the v-if directive) if and only if we do not get the response data as null.

Why will the response data be null? Suppose a user(not logged) tries to fetch the order history, the null token will be passed to the API and hence we won’t get any response data to display.

If we get a response then we iterate through the orders using the v-for directive. And for each order, we implement a router link that will redirect the user to the details of that order according to the order id passed.

Refer complete code for this component here.

Order Item component (for displaying the details of a specific order)

In the same folder we are working on, create a Vue component named OrderItem . This component will be rendered when a user clicks on a particular order.

So firstly register this route like this:

{
path:'/order/:id',
name:'OrderItemView',
component:OrderItemView
}

Now we require one more component to actually display the products of that order. So in this component, we render that component let’s name it as OrderItems to which we the two props:

id: this is the same id we passed from the Order component as a route parameter
baseURL: the URL for our backend API

We obtain the orderID from the route parameter.

Displaying the order details

Now since we render OrderItems component to display the order details the next step is to implement OrderItems component.

So in the src/components folder create Order folder and in that create OrderItems Vue component.

First of all, we will catch the props we received like this:

props:[“orderID”,”baseURL”]

Now let’s create data variables.

lengthofOrderItems: number pf,
orderProducts: store the products of an order
products: store the response data
token: a token of the user

Now we display the products of the order whose order id is the same as the one we receive as the route parameter.

As evident from the above-mentioned code, we call the backend API for listing that specific order by passing the order id to the API URL.

One important point to be noted here is, we receive the parameter in string datatype but in the response, we have id in integer datatype. Hence we convert the string id into integer id and then start the comparison.

Once we retreive the specific order using the API, we iterate through orderItems array and the product array.

Now for displaying the HTML part, we need to loop through the order items array using v-for and then display each specification like image, product name, quantity, the price per unit, the total price of that product.

Congratulations!

You have now successfully implemented the feature for displaying the order history and details for a specific order.

Read All the Articles in this Ecommerce Series

A Complete Guide on How to Develop an E-Commerce Platform

Nil Madhab — Fri, 23 Apr 2021 15:34:44 +0000

A Complete Guide on How to Develop an E-Commerce Platform

We will build an Ecommerce Platform from Scratch using Vue.js and Spring Framework

In this course, you will learn how to build an e-commerce platform from scratch. First, you have to be familiar with Java and Springboot, which we will use to build the backend and Vuejs for the frontend.

You can test the application here.

Live Demo

Frontend

*https://github.com/webtutsplus/ecommerce-vuejs*

https://simplecoding-ecommerce.netlify.app/

Backend

https://github.com/webtutsplus/ecommerce-backend

*https://limitless-lake-55070.herokuapp.com/swagger-ui.html*

1. Admin Panel: Add Product and Categories

Every e-commerce app need products organised into categories

So now let’s add the products and categories section to our app

In this tutorial, we will display the products and the categories of various products in our app.

Clicking on a particular product will show its details and also the options for buying it, adding to the cart, and adding to the wishlist section.

Backend

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

you can watch product api’s video here.

Frontend for Product
Let’s Develop an E-Commerce Application From Scratch Using Spring Boot and Vue.js

Image upload service

We will develop a file upload service, which will be used for image upload in our e-Commerce App using Java Spring Boot
How to Develop File Upload Service From Scratch Using Java and Spring Boot

2. Building Authentication (sign up & sign in)

In this tutorial, we will learn how to implement authentication of users.

Backend
Develop SignUp and Login for E-Commerce App using Java and Spring Boot

Frontend

Creating an eCommerce Frontend with Vue.js

3. Building Front end for Customers

After building the admin panel, now we are going to show products to customers.
Let’s Build an E-Commerce App Frontend with Vue.js

4. Adding a Wishlist Feature

In this tutorial, we will implement the feature for saving the products not in the cart but in the wishlist section.

Let’s Add WishList Feature for Our e-Commerce App using Java and Spring Boot
Creating an eCommerce Frontend with Vue.js

5. Shopping Cart Feature

In this tutorial, we will implement the important feature of any e-commerce app i.e shopping cart.

Let’s Develop Shopping Cart for eCommerce App
Let’s add a Shopping Cart Feature in Vue.js for Our Ecommerce App

6. Checkout using Stripe

In this tutorial, we will implement yet another important feature of any e-commerce app i.e. payment method

Let’s add a Checkout feature in Spring Boot for our Ecommerce App
Let’s add a Checkout Feature in Vue.js for Our Ecommerce App

7. Place Order and Order History Feature

Next Step, we will implement the feature for placing the order and displaying the order history of a particular user.

Let’s add the Place Order feature to our E-commerce app using Spring Boot
Let’s Place Order and See Order History in E-commerce app using Vuejs

If you are only interested in backend APIs then follow these

Let’s develop an Ecommerce Application from Scratch using Java and Spring
Let’s Add WishList Feature for Our e-Commerce App using Java and Spring Boot
Let’s Develop Shopping Cart for eCommerce App
Let’s add a Checkout feature in Spring Boot for our Ecommerce App
Let’s add the Place Order feature to our E-commerce app using Spring Boot

For Frontend (Web) tutorials follow these

Let’s Create a Frontend for our eCommerce App with Vue.js
Let’s Create A Vue.js E-Commerce App
Let’s Add Products for Our eCommerce App Using JavaScript
Creating an eCommerce Frontend with Vue.js
Let’s add a Shopping Cart Feature in Vue.js for Our Ecommerce App
Let’s add a Checkout Feature in Vue.js for Our Ecommerce App

For Android tutorials follow these

Android UI for E-Commerce User Profile backend
Let’s Add Products in Android for E-Commerce App

Export your Medium Articles to Dev.to in 3 clicks

Nil Madhab — Thu, 01 Apr 2021 13:31:47 +0000

A chrome extension that will enable writers to export their Medium articles to the Dev Community with just three clicks.

If you are a writer and publish your articles regularly on Medium and Dev Community, you must already know that both the platforms have different formatting syntax for writing articles. While Dev Community uses markdown which is a standard format and very popular in the open-source community, Medium has its own format for styling your articles.

If you want to publish the same article on both the platforms, the only way to do it is to write the article twice — once for Dev Community and once for Medium. This is cumbersome, requires the writer to have knowledge of both Markdown & Medium’s formatting syntax and takes considerable time.

Medium-to-Dev Chrome Extension

As the name suggests, this Chrome Extension can convert articles from Medium’s Styling format to Markdown. Moreover, the extension is also capable of creating a draft on the Dev Community using the generated Markdown. The following video illustrates: -

In this tutorial, we will create this extension. If you want to use the extension before we begin coding, you can download it from the Chrome Web Store. The Extension is available on the Chrome Web Store: -
Medium to Dev

Steps to use the Extension

Add the extension to Google Chrome using the above-mentioned link on Chrome Web Store.
Open Dev Community’s website and make sure that you are logged in.
Now, open an article on Medium that you have published. You can also open a saved draft.
Click on Extensions *icon located on the right side of *Address Bar. Then, click on Medium to Dev
Now, a pop-up window will open. Once it is loaded, you can see the markdown version of your current article.
Click on the button *Copy to ClipBoard *to copy the markdown.
Click on Open in Dev.to
A new tab will open. Once it is finished loading, you will be able to see the draft for your Dev Article containing the markdown of your current article.

Supports

The github gists is supported which is very useful for developers
Youtube Videos are supported.

Future Enhancements coming soon

Exporting from Friend Link
Some diagrams might not be working, adding support for those.

If you find any bugs or enhancements, feel free to comment here or in chrome dashboard page.

In the next tutorial, we will discuss how we developed the extension and deep dive into the Javascript code.

Let’s Build a Robust Social Login Using Spring Boot, Vue.js and Firebase

Nil Madhab — Fri, 26 Mar 2021 16:30:34 +0000

We will build a Vue.js client to login using Github/Google with Firebase and build a stateless backend using spring boot

No one likes to use passwords to login for individual sites these days. Social Login using Github, Google, Facebook are the most preferred ways to build modern apps.

Implementing them is a bit tricky, as you will come across a lot of concepts and jargons, like

OAuth 2.0
Open ID connect
Delegated Authorization
Id token
Refresh token

The goal is simple, have a front end client like Vue.js and stateless backend using JWT in Spring Boot and users can login seamlessly using one of social provider without ever worrying about password.

Demo Video

Architecture Diagram

From the frontend, we connect to the backend via firebase SDK and this allows us to communicate with all of the firebase services that we need from the frontend.
The user credentials are captured via the login/signup form and then are sent securely to the server via a login or sign-up method provided by firebase SDK then on the server firebase invalidates these credentials and it sends back an authentication token to the client so then we can access the data in the frontend from this token such as name, email, etc.
Now we pass this token as a header to the backend API. So, when we hit the firebase from the spring by the token the firebase gives us the user details (like name, email, uid, URL of the picture, etc) according to the token received, and then the user details are saved in the database.
The advantage here is the server is stateless, so we do not have to handle sessions, cookies instead we just get the token from firebase which handles the authentication.

Luckily Firebase has a built-in system to integrate it, so we can focus on building our cool apps without worrying about Auth.

Explanation

I found two excellent tutorials in medium, which I am going to use for my use case.
Vue 2 + Firebase: How to add Firebase Social Sign-In into your Vue application
Securing SpringBoot API using Firebase Authentication

Step 1: Create a firebase account

We have to create a firebase account and we will allow GitHub login

Step 2: Create a Github OAuth app

Enter the client id, secret of the Github app into the firebase above, and use the callback URL of a firebase in GitHub.

Step 3: Login using Firebase social (Front-end)

Project Structure

1. Creating routes

In the source directory, create a folder named router, and in that create a JavaScript file that will handle different routes.

2.Implementing Social Login method using Firebase

In this step, we will obtain the credentials of the user through firebase Github login functionality and then firebase will send us the id token for that user.

Then we pass this id token to the backend API so that firebase can authenticate the user to view the features of our application (the features that are only restricted to logged-in users).

We will make a button for Github login and clicking the button will trigger the following function.

first we login by firebase.auth().signInWithPopup(provider)
We retrieve the Idtoken from firebase and pass it to spring boot backend in the header, where we will save the User.

So in the source directory of the vue project create a views folder and in that folder create a Vue component called Login.

After receiving the token we then pass it as a header to the backend API.So we passed the token as a parameter to the saveUsermethod which will call the backend API. Now create a JavaScript file named helper.js which will contain the method saveUser.

Step 4: Create private endpoints in Spring boot (back-end)

Project Structure

We configure the Spring backend in such a way that, when we get the id token from the frontend, we decode the token and get the user information from the firebase. You can read more about it here

Once we get the principal user, we can save the user in our database.

Model

Since we need to store the user in the database we create a user model in the model package.

Repository

Create a repository package and in that create an interface named UserRepository. To use the crud methods of the JPA repository we need to implement a user repository that extends the JPA repository.

Service

Create a service package and in that create a class UserService which will contain the business logic.

We implement the methods for saving the user in the database and fetching the user by email and fetching all the users from the database.

Controller

Create a controller package and in that create two classes one for handling public endpoints and the other for private endpoints.

The public endpoint will contain API for fetching all the users.

The private endpoint will contain the API for fetching the user details and saving the user.

When the method saveUserInfois called from frontend it receives id token from the header and through that token firebase returns the information of that user and hence we save in the database.

Congratulations !!!

You have successfully created social login (GitHub) feature using Vuejs, Spring Boot, and firebase.

Let’s add the Place Order feature to our E-commerce app using Spring Boot

Nil Madhab — Tue, 23 Mar 2021 15:59:51 +0000

Let’s add the Place Order feature to our E-commerce app using Spring Boot

In this tutorial, we will learn how to create an order and display the order history of the user

Introduction

We are building an e-commerce app from scratch using Vue.js in the frontend and Java with Spring boot for the backend. You can check out the first front-end tutorial of this series here.

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

Nil Madhab ・ Jun 10, 2022 ・
Medium

Placing the order is an important feature for an e-commerce app that allows users to order the products of their choice.

We will first develop the backend API using Spring Boot and in the next tutorial, we will use this API for the frontend part of our e-commerce website.

Refer the tutorial where we implemented the checkout feature here for the backend part

Live Demo

You can test the API at the following swagger link. You will find the cart API in order-controllersection(Run the code in your local first)

Swagger API

You can find the complete code at Github.

Pre-requisites

Knowledge of Java, OOP & Spring Boot Framework
Java Development Kit (JDK)
IntelliJ IDEA Ultimate — open-source (Recommended)
MySQL/MariaDB Database
A good browser (Chrome — recommended)

Project Structure

Preview of the API we will be building

placeOrder(/order/add) : This is a post method that is responsible for saving the order of the user.

getAllOrders(/order/): This is a get method that returns the list of all the orders of a particular user. Therefore it requires only the token of the user as a parameter.

The flow of the tutorial

Table/Model design

Create Repository

Implement Dto

Implement Service class (Business logic)

Implement Controller class (Building APIs)

Table Design

Model

Before we begin to code, we must invest some time thinking about the model/table design. So we require two tables which will be linked with each other. So in the existing modelpackage, create two files Order.java and OrderItem.java .

The first table/model (we name it as order)will contain attributes such as id(primary key), user_id(foreign key), created_date, session-id (the payment session-id we generated), and the total_price .

User id we will be fetching from the users table.

If you are wondering about the session id, please refer to this tutorial where we have explained the checkout session.

The second table/model (we name it as orderitems) will actually contain the products that are present in a particular order. There we need to link these two tables. So the primary key i.e. idfrom the order table will be used as a foreign key in the orderitems table. So the attributes of the orderitems table will be order_item_id, created_date, price, product_id(foreign key), quantity, order_id(foreign key).

Product id we will be obtained from the products table.

Order model

Table relationship

order table and orderitems table has a relation type of one to many, i.e. one row(entry) in order table is related to multiple rows(items of that particular order) in the orderitems table.

Similarly, order and user tables have a relation type of many to one i.e. multiple orders (entries/rows) are related to a single user (row/entry), because a user may have multiple orders.

Order items model

Table relationship

The ordertable we created just now and this orderitems table has a relation type of many to one since multiple items (products) can be in relation with a particular order.

products table and the orderitems table has a relation type of one to one since a row(item) in the orderitems table is related to only one row(item) in the products table.

Repository

Create two java files in the existing repository package OrderRespository.java and OrderItemsRespository.java .

Firstly we create repository interface for the order table(OrderRespository.java).

Creating CRUD methods manually means writing a lot of boilerplate code unless you let the JPARepository interface carry about routine implementations for you. So, we will extend the JPARepository and create the interface CartRepository.

Extending JPARepository will automatically create and implement methods for the basic CRUD operations.
We will define a method findAllByUserIdOrderByCreatedDateDesc to fetch the orders list of a user and then order the list by created the date of each entry in the order table. The implementation of this method will be managed automatically by the JPARepository .
Similarly we create repository interface for the orderitems table(OrderItemsRespository.java).

We do not declare any method here but instead, we will use one method in the service class later.

DTO

In the dto package create a package named order and in which create 3 files orderDto.java , OrderItemsDto.java and placeOrderDto.java .

We create OrderDto for as a dummy object for the Order model with two fields id and userId .
1. Similarly we create OrderItemsDto
  
  Currently, we won't be using this DTO but for future use or modifications, we keep this dto ready.
2. Now in the PlaceOrderDto we declare three fields id, userId, and the totalCostof the order. This dto will be used to save the order in the order table.
  
  ## Service

Now, let’s implement the Service class to interact with the order and orderitems table. In the OrderRepositoryinterface, we defined the methods to interact with the database.

In the Service class, we will call these methods and implement the so-called business logic. We will create methods for adding the order, fetching all orders of a user. Inside these methods, we will call the methods defined in the OrderRepositoryinterface.

First, let’s implement the orderitems service class. In this class, we implement one method in order to save an item/product in a particular order.
1. Now let’s create the order service class which will contain the logic for placing the order and fetching the order details.

placeOrder: This method is used to set the PlaceOrderDto and it receives the id of the order from the saveOrder method. This id is returned from the saveOrder method because we need this id as an attribute in the orderItems table. Also using the object of cartService class we fetch the items in the cart and then save those in the orderitems table using the method in the orderItemsService class. And once the order is placed we delete the cart i.e. remove the items in the cart.

saveOrder: This method first creates the order object and then using the method of orderRepository it saves the order in the order table and returns the id which we used in the previous method.

listOrders : This method will take the user id as a parameter and then return a list of all the orders from the order table corresponding to that user id.

Controller

Here we will build our APIs.

In the controller package creates a file OrderController.java and annotate the class with RestController annotation. In this OrderController class, we will use the methods we defined in the orderService class.

So firstly we will implement the API for saving the order. Create a method placeOrder that accepts token and the session Id as parameters.

This method which throws an exception

if the invalid user(not logged in) user tries to place the order
if the user (valid) tries to place the order of the product which does not exist in the products table.

Since we added the order to the table, now we build an API to fetch the orders of the user. This method throws an exception if an invalid user tries to fetch the order history.

Congratulations!!!

We have now successfully added the order feature to our e-commerce app using Spring Boot. In the next tutorial we will implement the front end part using these APIs using Vuejs, so stay tuned!

The New Way of Using Linux Seamlessly in Windows by WSL

Nil Madhab — Tue, 23 Mar 2021 15:17:20 +0000

Run Linux Kernel inside Windows without third-party softwares like VMWare, Virtual Box etc by Windows Subsytem for Linux

There is a very popular notion that Linux is the best OS for software development but Windows is more easy and comfortable to use. That must have made many of you to wonder if there were some way to run Linux Kernel below Windows GUI. If we could achieve this, we would get BEST of Windows and Linux in a single OS.

Turns out that there is one way to do this — WSL (Windows Subsytem for Linux)

How is WSL different than Dual Booting OR running a virtualization software ?

WSL vs Dual Booting

Dual Booting means installing multiple operating systems on a single computer, and being able to choose which one to boot.
This means that you CANNOT run both the OS at the same time.
But if you use WSL, you can use both the OS simultaneously without the need to switch the OS.

WSL vs Virtualization Software

There are many virtualization software available in the market today. Some of the most popular ones are Virtual Box, VMWare etc. Some of you may have even used one of them.
When you use VMWare or Virtual Box, you can run Linux (with GUI) inside Windows but it takes a lot of time to load. Also, if you need to access files stored in the main OS or internet from within the Virtual Machine (Guest OS), you need to install multiple drivers which makes it a very complex process.
WSL2 solves all of this. It takes less than a second to load the Linux Kernel. The process is same as opening CMD or PowerShell in Windows. Moreover, the file mounting/sharing, command running, and networking between your Windows desktop environment and the WSL2 environment is seamless and nearly instant on launch. You do not have to manage this environment — it will update alongside Windows.
Moreover, if you use WSL, you can use programs installed on Windows from the Linux kernel. One such example is VS Code. You can execute the command *code file_name *from the Linux Kernel to open a file in VS Code (which is installed in Windows).

How WSL looks ?

If you are a guy who believes more in seeing stuff rather than reading about that stuff, you can have a look at the photo mentioned below.

In the above image, you can see that a linux terminal is running on a windows PC just like Windows PowerShell.

How to Install WSL?

In this article, we will tell you how to enable WSL2 and install a Linux Distro of your choice. WSL 2 is the latest version of WSL and is even better. To know more, you can visit this Microsoft Docs link.

To install WSL 2, we will install WSL first and then upgrade to WSL 2.

There are two options available for installing Windows Subsystem for Linux (WSL):

Simplified install (preview)

Executing the command — wsl --install on a powershell terminal will install WSL without any additional steps. But this command requires that you join the Windows Insiders Program and install a preview build of Windows 10 (OS build 20262 or higher).

Manual install:

The manual install steps can be used on any version of Windows 10.

Manually Installing WSL 2

Step 1 — Enable the Windows Subsystem for Linux

We must first enable the “Windows Subsystem for Linux” optional feature.
Run PowerShell as Administrator and execute the following command:

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

This command may take anywhere between 40–90 minutes to run. Moreover, not much will be output to the terminal when this command is getting executed. Hence, you must wear patience caps when you execute this command :)

Do NOT restart the PC at this stage.

Step 2 — Check requirements for running WSL 2

To update to WSL 2, you must be running Windows 10.

For x64 systems: Version 1903 or higher, with Build 18362 or higher.
For ARM64 systems: Version 2004 or higher, with Build 19041 or higher.
Builds lower than 18362 do not support WSL 2. Use the Windows Update Assistant to update your version of Windows.

Step 3 — Enable Virtual Machine feature

Before installing WSL 2, we must enable the Virtual Machine Platform optional feature.
Run PowerShell as Administrator and execute:

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Restart your machine to complete the WSL install and update to WSL 2.

Step 4 — Download the Linux kernel update package

Download the latest package using the following link — WSL2 Linux kernel update package for x64 machines . If you’re using an ARM64 machine, please download the ARM64 package instead. If you’re not sure what kind of machine you have, open Command Prompt or PowerShell and enter: systeminfo | find "System Type".
Run the update package downloaded in the previous step. (Double-click to run — you will be prompted for elevated permissions, select ‘yes’ to approve this installation.)

Step 5 — Set WSL 2 as your default version

Run PowerShell and execute this command to set WSL 2 as the default version when installing a new Linux distribution:

wsl --set-default-version 2

Step 6 — Install your Linux distribution of choice

Open the Microsoft Store and select your favorite Linux distribution. The following links will open the Microsoft store page for each distribution:

Once the distribution’s page is opened on the Windows Store, select Get to install that distribution.

The first time you launch a newly installed Linux distribution, a console window will open and you’ll be asked to wait for a minute or two for files to de-compress and be stored on your PC. All future launches should take less than a second.

You will then need to create a user account and password for your new Linux distribution.

CONGRATULATIONS!

You’ve successfully installed and set up a Linux distribution that is completely integrated with your Windows operating system!

We would also recommend that you should install Windows Terminal. It is completely optional but would enhance your experience with WSL significantly.

Windows Terminal enables multiple tabs (quickly switch between multiple Linux command lines, Windows Command Prompt, PowerShell, Azure CLI, etc.), create custom key bindings (shortcut keys for opening or closing tabs, copy+paste, etc.), use the search feature, and custom themes (color schemes, font styles and sizes, background image/blur/transparency).

You can visit the following link to Learn more about Windows Terminal

To know how to install Windows Terminal, you can visit this link

Solve Leetcode Problems and Get Offers From Your Dream Companies||Maximum Points You Can Obtain from Cards

Nil Madhab — Mon, 22 Mar 2021 12:11:21 +0000

Maximum Points You Can Obtain from Cards

In this series, I am going to solve Leetcode medium problems live with my friends, which you can see on our youtube channel, Today we will do Problem Leetcode: 1423. Maximum Points You Can Obtain from Cards.

A little bit about me, I have offers from Uber India and Amazon India in the past, and I am currently working for Booking.com in Amsterdam.

Motivation to learn algorithms

Solve Leetcode Problems and Get Offers From Your Dream Companies

Problem Statement

There are several cards arranged in a row, and each card has an associated number of points The points are given in the integer array cardPoints.

In one step, you can take one card from the beginning or from the end of the row. You have to take exactly k cards.

Your score is the sum of the points of the cards you have taken.

Given the integer array cardPoints and the integer k, return the maximum score you can obtain.

Example 1:

Input: cardPoints = [1,2,3,4,5,6,1], k = 3
Output: 12
Explanation: After the first step, your score will always be 1. However, choosing the rightmost card first will maximize your total score. The optimal strategy is to take the three cards on the right, giving a final score of 1 + 6 + 5 = 12.

Example 2:

Input: cardPoints = [2,2,2], k = 2
Output: 4
Explanation: Regardless of which two cards you take, your score will always be 4.

Example 3:

Input: cardPoints = [9,7,7,9,7,7,9], k = 7
Output: 55
Explanation: You have to take all the cards. Your score is the sum of points of all cards.

Example 4:

Input: cardPoints = [1,1000,1], k = 1
Output: 1
Explanation: You cannot take the card in the middle. Your best score is 1.

Example 5:

Input: cardPoints = [1,79,80,1,1,1,200,1], k = 3
Output: 202

Youtube Discussion

Solution

We will discuss two approaches, the first one will give TIME LIMIT EXCEEDED and the second one will be accepted.

According to the question, we can choose a card from either the beginning or the end and we need to repeat this step till we get k cards.

Base Cases:

If k is less than 1 then no cards can be chosen
1. i should be always less than j
2. If i equal to j and k=1 , then we have to choose i -th card.

Recursion Step:

So for an array from i to j , with k cards to be drawn,

if we choose the card from the beginning then ar[i]+choose from (i+1) to j

if we choose the card from the end then ar[j]+choose from (i) to (j-1)

To avoid the same calculations, we can use dynamic programming.We can store the value for i to j with k cards to be drawn in a dictionary.

This solution is not that efficient and will give TIME LIMIT EXCEEDED.

Let’s talk about the optimal solution for this problem. We have to k cards either from the beginning or the end. Therefore we can choose

0 cards from left and k cards from right

1 card from left and (k-1) cards from right

2 cards from left and (k-2) cards from right

.............

k cards from left and 0 cards from right

Therefore, we need to find the maximum of these combinations. To make our calculations simpler, we can store the cumulative sum of first k cards from beginning and end. We can find the maximum for all these combinations ;

left[i]+right[k-i] for all possible values of i (k is given)

The code for this problem can be found in the following repository.
webtutsplus/LeetCode

Thank You for reading and Follow this publication for more LeetCode problems!😃

LeetCode Simplified

DEV Community: Nil Madhab

Build Multiplayer Realtime Tic Tac Toe Game with Socket.io and Vue

Video Tutorial

Project creation

Draw X and O on click

Calculate Winner

Calculate Tie

Reset Board

Multiplayer mode Using Socket.io

Set up server for socket.io

server.js

App.vue

Game Logic with Socket.io

Complete code of App.vue

Let’s Develop an E-Commerce Application from Scratch Using Spring Boot and Vue.js

Project set up and building admin panel for managing Category in Vue.js

Motivation

This tutorial is perfect for people who are starting their journey in Vue.js as we build it from scratch, integrate remote API call, router, break down UI into components, form handling as well as cover some important concepts like v-model, v-on.

Note to the reader

Backend Tutorial

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

Nil Madhab ・ Oct 29 '21

What we will cover in the tutorial

Final Demo

Start the project

Vue Components

Folder Structure

Building the UI for Category

Styling the App

Adding a Category

v-model binding concept

Axios and sweetalert integration

API call

Base url

Displaying the Categories

Component Breakdown

CategoryBox.vue component

Category.vue component

Updating the Routes

Editing a Category

Add the form

Send the category data to view

Add option to edit

Update the script

API call to save the data

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

Project setup, develop category and product APIs

Motivation

Note to the reader:

Video tutorial

Playlist

Frontend tutorial in Vue

Let’s Develop an E-Commerce Application from Scratch Using Spring Boot and Vue.js

Nil Madhab ・ Oct 30 '21

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

Designing the Product API

Model

Repository

Service

DTO concept#

Controller

Create a new product API

Let’s Build a WhatsApp Clone Using Vue.js and Firebase

Let’s Build a WhatsApp Clone Using Vue.js and Firebase

Introduction

https://github.com/webtutsplus/ecommerce-vuejs

https://limitless-lake-55070.herokuapp.com/swagger-ui.html