Forem: KunalShekhar

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

KunalShekhar — Sat, 16 Jan 2021 21:35:27 +0000

In this article, we are going to implement basic SignUp and SignIn functionality in Spring backend and Android UI.

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

Entity Relationship Diagram

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

Encrypt the password
Save the User
Generate auth token and save it in database
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.

You can find the complete backend code here.

Start building the Android Application

Next, we are going to use the same REST API to perform the user authentication process in the same android application that we have created and deployed in the last tutorial. If you have not followed up, please check out the tutorial using the link given below.

Let’s Add Products in Android for E-Commerce App | by Nil Madhab | Javarevisited | Dec, 2020 | Medium

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

Our Intention

In our last tutorial above, we have created ways in our application to view, add, and update our products by communicating with our REST API service.

Now we are going to limit the access of adding and updating products only to the authenticated users. Non-authenticated users can simply checkout all products we have, but they are not permitted to edit.

Our intention is to achieve such functionality mentioned above in our application. Get ready to explore!

Requirements

Though we have no new requirements for the application to achieve basic authentication, let’s revise them for the new readers’ convenience.

Android Studio (Completely Setup with SDK)
Android Virtual Device
Cloud Hosted E-Commerce Backend API
Retrofit- to interact with the API
Glide- to load images

Steps to set up your work environment in Android Studio can be found here.

Dependencies

No new dependencies are needed for extending the user authentication functionality in our application. Anyway, I’ll showcase all dependencies we have used in our application.

Recycler View
Card View
Retrofit
Gson converter
Glide

Permissions

Same as dependencies, we don’t need any extra permissions to extend the required functionality to our application.

We only need internet permissions to communicate with the RESTful service. It was added during the last-mentioned tutorial.

You can check out the app/src/main/AndroidManifest.xml file of our application below-

Please check the contents of the given app/src/main/AndroidManifest.xml file with yours.

Creating Models

We already have a model for the Product to send and receive through the API. Likewise, we need to create a model for the user to pass their credentials through our API.

Our user model accepts the credentials first name, last name, email id, and a password to save a user to the backend and the respective user’s email id and password to sign in them into the application.

Therefore, create a class User, that has four fields firstName, lastName, email, and password, as shown below-

And now we have all the required models to interact with our API. Let’s go ahead with making the user objects interact with our RESTful service.

Updating the API

We need to update the interface API that we have created so that it also interacts with the Users API in our backend.

We already have the interaction with the products API. Without disturbing that, we need to establish interaction with the Users API in our RESTful service. For the same, we are gonna update the API.java in our project.

You can update the same as below-

Now we can interact with the Users API of our backend. Let’s move further!

Creating Activities

We all know that activities are the basic building blocks of the application. An activity consists of a layout file and a java class to control the same.

We are provided with the pre-built activity called Main Activity. And also, we have added the following working activities to our application.

ListProducts Activity
AddProduct Activity
UpdateProduct Activity

For this tutorial, we need three more activities to sign up a user, sign in a user, and show the dashboard to the users respectively. Go ahead and create the following activities by following the steps: Right-click on the MainActivity residing package -> New -> Activity -> Empty Activity

SignupActivity
SigninActivity
DashboardActivity

The Main Page

The previous main page consisted mainly of buttons that navigate to add or update products and list products. But the functionalities of adding and updating products should be available only after the user is signing in. So, we are removing it from the main activity’s layout file.

Instead of that, we are adding two buttons that navigate to the user signup and user sign-in activity. The respective layout file is as below-

Now, we need to make those newly created buttons to navigate to respective activities. For that, add on click listeners to the buttons in the MainActivity.java as below-

Signing Up Users

We need mainly four edit texts — one for getting the first name, one for getting the last name, one for getting the email id and the last one for getting the password.

And finally, we need a button to submit these data. The layout for the signup activity is modified as follows-

The input data has to be trimmed, validated and verified before we pass it to the backend. All these are done in the SignupActivity.java.

An On Click Listener is added to the button that submit the data. Once the data is submitted, it is validated. After validation, a user object is created with the data and the object is passed through the API to Signup.

Once the signup is completed successfully, the application navigates to the signin activity. The controlling file of the signup activity as below-

We have the sign up part all ready. Let’s move to the sign in part of our application!
Signing In Users

For signing in users, we need just the user’s email to identify them and their password to verify them. To get them, we need two edit text views.

And also, a button is needed to submit the data. Below given is the layout file for sign-in activity.

The data from this layout is fetched, processed and verified with the backend API by the SigninActivity.java. It also should contain the on click listener for the button to submit the data.

Through the on click listener added, we receive the data from the fields and process it to create a user object. The object is then passed to the REST API, which verifies it and sends us a response to authenticate the user.

After successful authentication of the user, they are directed to the dashboard activity of the application.

The only remaining task before us is to make the dashboard activity. Without any delay, let’s do that!
Constructing the Dashboard

The dashboard activity seems similar to that of our main activity. It can also be called the main activity for authenticated users.

Authenticated users must be able to edit the products or add new products. For that sake, add the buttons for adding and updating the products. Also, add a button for viewing the products.

The layout file of the dashboard activity should be constructed as follows-

Let’s make these buttons in the dashboard activity functional! Go to the file DashboardActivity.java that controls the functioning of the activity. Add on click listeners to the buttons that we have added previously.

Set up the navigation correctly so that the user is navigated to the respective activities from the buttons.

The corresponding DashboardActivity.java file is as follows-

Hurray! we have completed the coding section! Let’s run the application now!

Running the Application

Now, it’s time for running the application, after adding the required functionalities. Select the required Android Virtual Device from the toolbar and click on the run button on the same(Green triangle icon)

After a certain amount of time, your android virtual device will get the application installed and opened. You can completely use it now!

Some of its screenshots are as below —

Resources

Bitbucket link for Spring Backend Project Repository
Bitbucket link for Android Application Project Repository
Spring Backend Swagger UI hosted on cloud
REST API of our Spring Backend
Tutorial for the creating Spring Backend API
Tutorial for creating the products application
Steps to install and set up Android Studio

Yahoo! That’s it! Hope you have learned many things from this tutorial. Stay tuned for such an awesome series of tutorials!

Happy Learning!

Let’s Link Products With Category for our E-Commerce App

KunalShekhar — Fri, 15 Jan 2021 21:44:26 +0000

We will be creating a Vue.js application for displaying our Products and Categories.

Photo by Ryan Hutton

Introduction
Requirements
Setting up the Project
Vue Components
Vue Router
Our Application
Why use Vue Router
Resources

Introduction

We are building a complete E-Commerce application.

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

So in this series of tutorials, we will now link our products with a category and design the user interface for it using Vue.js 3. In the past tutorial, we had designed the user interface for displaying products. Now, our products will have added information about their category.

Let’s Add Products for our eCommerce App with Vue.js | by Nil Madhab | JavaScript In Plain English | Dec, 2020 | Medium

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

If you are new to Vue.js, it is recommended to glance at the above article before moving on. So, our application will list all the products and categories and provide us with the following capabilities :

Add a product
Edit a product
Add a category
Edit a category

Requirements

In the last tutorial, we used the Vue CDN to create a single widget for displaying the products and injected that into our main HTML file. But now we will move a step ahead and build a complete Vue application, which is more powerful and robust. We will use the Vue CLI tool to set up our project. You also need to have Node.js installed before proceeding with the tutorial. We will not write any Node.js specific code but still, our Vue.js project requires Node. Apart from this, I will also be using Bootstrap, some Google Fonts and VS code as my editor. These things are up to your preferences.

Setting up the Project

The detailed instructions for setting up a Vue project can be found here, but let's quickly go through the process once. First, we will have to install the Vue CLI tool. It can be installed in the system with the following command:

npm install -g @vue/cli

After installing the Vue CLI, the following command is used for creating a new project:

vue create project_name

Next, it will ask for some project configurations. Here is my project configuration:

Project Configs

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

The folder structure of our App

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.
src/router - contains the index.js file which keeps a record of all the routes
src/views - stores all the router components. These are the components that are rendered as per the current 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:

createApp(App).use(router).mount('#app');

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

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>

</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. And style tag houses the CSS of the component. As mentioned earlier, src/components and src/views contain all our components.

Vue Router

The Vue router enables us to link our browser URL and our components. This helps us define paths that get coupled with our components. This way Vue renders components based on the URL. The official page of Vue router lists all its features. The most important of all these is the ease of creating Single page applications (SPAs) using Vue router.

In Single page applications designed using Vue, the very first request sent to the server responds with a single HTML file and the JavaScript bundle. Then in the browser, Vue takes complete control over the application. After this, no further requests are sent to the server for new pages even if we change routes. This means once everything is loaded, navigating through different routes of our web application becomes very smooth. As an example, head over to Vue router guide and disconnect your internet once the page has loaded, even without the internet you will be able to use most of the features available there (even changing the guide language).

The src/router/index.js file contains information about all the router paths. Folder src/views contain the components which we couple with router paths. Because of their usage, these components are also known as router views.

In index.js file, we import all the router components and create an array of objects called routes. Objects of this array represent different routes of our application. Every route has a path, a name associated with it, and the component to be rendered for this path. For our project, I will be keeping the name property same as component name.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

After creating this routes array, we use the createRouter method to create and export our router. Vue CLI is kind enough to do this task for us while creating our project.

Our Application

Now after understanding the Vue project structure and the requirement of different Vue features, we can dive into our E-Commerce project. For creating our application, we will be using many Vue components. So, there needs to be a structural hierarchy of components in our project. We can use the component tree to define this structure.

Component Tree

App.vue is the root component of our application. It is the first one to be rendered onto the DOM. Then we have our reusable components (in blue boxes) and router view components (in yellow boxes).

In App.vue, we have the data properties baseURL, products and categories. The baseURL refers to our backend API from where we fetch data and send requests for data addition and modification. The products and categories arrays, as their name suggests, stores our products and categories. We also have the components property which lists all the components which we use in the current component.

API call

In the mounted Lifecycle hook of our root component App.vue, we make the API call to fetch our products and categories. For this, we use JavaScript’s Fetch API.

const res  = await fetch(this.baseURL + "product/");
this.products = await res.json();

Fetching data from backend API is an asynchronous task. Hence the fetch method returns a promise. If our internet connection is stable and the server is up and running, the res variable will store the server response. Now to extract our data from this response, we use the json method. The json method reads the response stream, and since this stream could be very large, it takes time and returns a promise on completion. This promise once resolved returns a JavaScript object. In JavaScript, an array is also an object which can be represented in JSON.

The root component is the best place to fetch data from backend API because from here we can pass on this data as props to our child component. Let’s get this terminology clear. When we use a component inside of some other component, they are referred to as child and parent component respectively. A parent component can pass its data to a child component, this data is known as props. You can think of it as passing arguments to a function.

Router paths

In App.vue, we have used the components Navbar and Footer. Apart from this we also have a Vue tag . This router-view tag renders component based on the URL path. Along with this, we also have the tag. It acts as an anchor tag for a router-enabled app. The target location for this link is specified using the to prop. Let’s have a look at index.js file where we have defined all our routes.

So to summarize the above file, we have set up the routing of our application in the following manner:

Passing props

In App.vue, we have passed props to the router view components. As mentioned earlier, it is the parent component which can pass props to its child component. To send these props, we can either give them some value or bind them with the data properties of the parent component.

<router-view :baseURL="baseURL" ></router-view>

Here baseURL written after the colon (short for v-bind directive) is the name with which this prop will be available in the child component. baseURL inside the double quotes is the parent component’s data field. We can name these props differently also, but I have used the same name to maintain consistency. Now in the child component, it is necessary to register these props in the component object’s props property. A child component may skip some props if it doesn't require them.

In App.vue, we have also used the “v-show” directive to show the Footer component only when we are at some path other than the Home. We can get the current path name from this.$route.name property. So now, let's take a look at our App.vue file:

Navbar

The Navbar component is used for navigating through our web application. We have used the Navbar component inside our App.vue above the router-view tag. Hence, every route of our website will have the Navbar at the top. We have designed our Navbar with three router links to Home, Product and Category route.

Home

The Home component is the landing page of our web application. It is the first impression of our app which plays a crucial role in our advertising campaign.

Footer

The Footer component is present at the bottom of our websites. Here we can place the About Us, Contact and some other important pages link. Along with these, we can also place links to our social media handles. I have used this icons library to use logos of some popular social media platforms.

Products

As the basic structure of our website is in place, we can start working on the core functionality. Let us start with components related to products.

Product.vue: This component lists all the products of our application. In the component template, we first design a button for adding new products inside a router-link to AddProduct router view component. Then we use the v-for directive to loop through all the products inside the products array. For every product, we render the ProductBox component passing the product as a prop. In the component object, we list the required props that we get from our parent component. Along with this, we also mention ProductBox as a child component.

AddProduct.vue: This component presents a form for adding a new product into our backend API database. We define five data fields to track user input. Here, the v-model directive helps us to make a two-way binding between the user input and our component data fields. We also attach a click event to the submit button of our form. Once the user submits the form, we call the addProduct method of our component. This method creates our newProduct and makes a POST request to our backend API to add this product. Once this process completes we redirect to our Product route.

Add Product Form

ProductBox.vue: This component displays the details of a product. First, we design a button for editing the product inside a router-link to EditProduct router view component. This router link takes the product id inside the params object. Remember, we defined the path for EditProduct with a dynamic segment denoted by a colon. When the route is matched, the value of the dynamic segments will be exposed as this.$route.params in every component. This is defined in the Vue documentation as Dynamic Route Matching. Then we display the product’s image, name, description and price.

Product box

EditProduct.vue: This component displays the form for editing details of an existing product. Remember this.$route.params.id stores the id of product for which this form was invoked. We use this id to find our product and fill the default input values with its current details. Similar to the AddProduct form, once the user submits the form, we create the newProduct and make a POST request to our backend API to update the current product. Then we redirect to the Product route.

Edit Product Form

Why use Vue Router

The Vue router is a very powerful tool, yet easy to learn. Vue router as its landing page says makes building SPAs a breeze. It provides us with a modular, component-based router configuration. Using Vue router improves the responsiveness of our application to a good extent.

You have made it to the end!! 🎉✨

Now we have a fully working Vue.js frontend to display our products and categories. The complete code for the app can be found here.

Resources

Thank You for Reading 📕😊

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

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 Build Signup, SignIn, and Role-Based Access in Our E-Commerce App

KunalShekhar — Sun, 10 Jan 2021 07:21:28 +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.

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

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.

Start building the Android Application

Let’s Add Products in Android for E-Commerce App | by Nil Madhab | Javarevisited | Dec, 2020 | Medium

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

Our Intention

In our last tutorial above, we have created ways in our application to view, add, and update our products by communicating with our REST API service.

Now we are going to limit the access of adding and updating products only to the authenticated users. Non-authenticated users can simply checkout all products we have, but they are not permitted to edit.

Our intention is to achieve such functionality mentioned above in our application. Get ready to explore!
Requirements

Though we have no new requirements for the application to achieve basic authentication, let’s revise them for the new readers’ convenience.

Android Studio (Completely Setup with SDK)
Android Virtual Device
Cloud Hosted E-Commerce Backend API
Retrofit- to interact with the API
Glide- to load images

Steps to set up your work environment in Android Studio can be found here.
Dependencies

No new dependencies are needed for extending the user authentication functionality in our application. Anyway, I’ll showcase all dependencies we have used in our application.

Recycler View
Card View
Retrofit
Gson converter
Glide

Permissions

Same as dependencies, we don’t need any extra permissions to extend the required functionality to our application.

We only need internet permissions to communicate with the RESTful service. It was added during the last-mentioned tutorial.

You can check out the app/src/main/AndroidManifest.xml file of our application below-

Creating Models

We already have a model for the Product to send and receive through the API. Likewise, we need to create a model for the user to pass their credentials through our API.

Therefore, create a class User, that has four fields firstName, lastName, email, and password, as shown below-

And now we have all the required models to interact with our API. Let’s go ahead with making the user objects interact with our RESTful service.
Updating the API

We need to update the interface API that we have created so that it also interacts with the Users API in our backend.

You can update the same as below-

Now we can interact with the Users API of our backend. Let’s move further!
Creating Activities

We all know that activities are the basic building blocks of the application. An activity consists of a layout file and a java class to control the same.

We are provided with the pre-built activity called Main Activity. And also, we have added the following working activities to our application.

ListProducts Activity
AddProduct Activity
UpdateProduct Activity

SignupActivity

SigninActivity

DashboardActivity

The Main Page

Instead of that, we are adding two buttons that navigate to the user signup and user sign-in activity. The respective layout file is as below-

Now, we need to make those newly created buttons to navigate to respective activities. For that, add on click listeners to the buttons in the MainActivity.java as below-

Now, let’s concentrate on signing up and signing in users through our application.

Signing Up Users

We need mainly four edit texts — one for getting the first name, one for getting the last name, one for getting the email id and the last one for getting the password.

The input data has to be trimmed, validated and verified before we pass it to the backend. All these are done in the SignupActivity.java.

Once the signup is completed successfully, the application navigates to the signin activity. The controlling file of the signup activity as below-

And finally, we need a button to submit these data. The layout for the signup activity is modified as follows-

We have the sign up part all ready. Let’s move to the sign in part of our application!
Signing In Users

For signing in users, we need just the user’s email to identify them and their password to verify them. To get them, we need two edit text views.

And also, a button is needed to submit the data. Below given is the layout file for sign-in activity.

The data from this layout is fetched, processed and verified with the backend API by the SigninActivity.java. It also should contain the on click listener for the button to submit the data.

Through the on click listener added, we receive the data from the fields and process it to create a user object. The object is then passed to the REST API, which verifies it and sends us a response to authenticate the user.

After successful authentication of the user, they are directed to the dashboard activity of the application.

The only remaining task before us is to make the dashboard activity. Without any delay, let’s do that!
Constructing the Dashboard

The dashboard activity seems similar to that of our main activity. It can also be called the main activity for authenticated users.

Authenticated users must be able to edit the products or add new products. For that sake, add the buttons for adding and updating the products. Also, add a button for viewing the products.

The layout file of the dashboard activity should be constructed as follows-

Set up the navigation correctly so that the user is navigated to the respective activities from the buttons.

The corresponding DashboardActivity.java file is as follows-

Hurray! we have completed the coding section! Let’s run the application now!
Running the Application

After a certain amount of time, your android virtual device will get the application installed and opened. You can completely use it now!

Some of its screenshots are as below —

Yahoo! That’s it! Hope you have learned many things from this tutorial. Stay tuned for such an awesome series of tutorials!

Happy Learning!

Forem: KunalShekhar

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

An Overview Of The Tutorial!

Introduction

Database Design

API Design

Demo Overview

SignUp

Start building the Android Application

Let’s Add Products in Android for E-Commerce App | by Nil Madhab | Javarevisited | Dec, 2020 | Medium

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

Our Intention

Requirements

Dependencies

Permissions

Creating Models

Updating the API

Creating Activities

The Main Page

Signing Up Users

Running the Application

Resources

Let’s Link Products With Category for our E-Commerce App

Table of Contents

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 Add Products for our eCommerce App with Vue.js | by Nil Madhab | JavaScript In Plain English | Dec, 2020 | Medium

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

Requirements

Setting up the Project

Folder Structure

Vue Components

Vue Router

Our Application

API call

Router paths

Passing props

Navbar

Home

Footer

Products

Categories

Why use Vue Router

Resources

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

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

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

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

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

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