How to add custom UI to confluence plugin

Hello Team,
I am new to plugin development.
Couple of queries :

  1. I want to create custom UI in confluence, can i use HTML , JS to do that.

  2. I am trying to follow this tutorial but getting below error
    no qualifying bean of type 'com.atlassian.templaterenderer.templaterenderer' available: expected at least 1 bean which qualifies as autowire candidate. dependency annotations: {}
    Here is my pom.xm

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.psl.atlasian</groupId>
	<artifactId>confluence</artifactId>
	<version>1.0.0-SNAPSHOT</version>
	<organization>
		<name>Example Company</name>
		<url>http://www.example.com/</url>
	</organization>
	<name>confluence</name>
	<description>This is the com.psl.atlasian:confluence plugin for Atlassian Confluence.</description>
	<packaging>atlassian-plugin</packaging>
	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.10</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>com.atlassian.confluence</groupId>
			<artifactId>confluence</artifactId>
			<version>${confluence.version}</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>com.atlassian.plugins</groupId>
			<artifactId>atlassian-plugins-osgi-javaconfig</artifactId>
			<version>${osgi.javaconfig.version}</version>
		</dependency>
		<!-- OSGi Java Config dependencies -->
		<dependency>
			<groupId>org.apache.felix</groupId>
			<artifactId>org.apache.felix.framework</artifactId>
			<version>4.0.0</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-beans</artifactId>
			<version>${spring.version}</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${spring.version}</version>
			<scope>provided</scope>
		</dependency>
		<!-- WIRED TEST RUNNER DEPENDENCIES -->
		<dependency>
			<groupId>com.atlassian.plugins</groupId>
			<artifactId>atlassian-plugins-osgi-testrunner</artifactId>
			<version>${plugin.testrunner.version}</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>javax.ws.rs</groupId>
			<artifactId>jsr311-api</artifactId>
			<version>1.1.1</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.2.2-atlassian-1</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.4</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>1.6.6</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.apache.httpcomponents</groupId>
			<artifactId>httpclient</artifactId>
			<version>4.1.1</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.mockito</groupId>
			<artifactId>mockito-all</artifactId>
			<version>1.8.5</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>javax.xml.bind</groupId>
			<artifactId>jaxb-api</artifactId>
			<version>2.3.1</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>com.atlassian.plugins.rest</groupId>
			<artifactId>atlassian-rest-common</artifactId>
			<version>1.0.2</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>com.atlassian.templaterenderer</groupId>
			<artifactId>atlassian-template-renderer-api</artifactId>
			<version>2.1.0</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>com.atlassian.sal</groupId>
			<artifactId>sal-api</artifactId>
			<version>3.1.0</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.apache.wink</groupId>
			<artifactId>wink-client</artifactId>
			<version>1.4</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>com.atlassian.plugin</groupId>
			<artifactId>atlassian-spring-scanner-annotation</artifactId>
			<version>2.1.7</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.inject</groupId>
			<artifactId>javax.inject</artifactId>
			<version>1</version>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>com.atlassian.maven.plugins</groupId>
				<artifactId>confluence-maven-plugin</artifactId>
				<version>${amps.version}</version>
				<extensions>true</extensions>
				<configuration>
					<productVersion>${confluence.version}</productVersion>
					<productDataVersion>${confluence.data.version}</productDataVersion>
					<enableQuickReload>true</enableQuickReload>
					<!-- See here for an explanation of default instructions: -->
					<!-- https://developer.atlassian.com/docs/advanced-topics/configuration-of-instructions-in-atlassian-plugins -->
					<instructions>
						<Atlassian-Plugin-Key>${atlassian.plugin.key}</Atlassian-Plugin-Key>
						<!-- Add package to export here -->
						<Export-Package>com.psl.atlasian.api,</Export-Package>
						<!-- Add package import here -->
						<Import-Package>org.springframework.osgi.*;resolution:="optional",
							org.eclipse.gemini.blueprint.*;resolution:="optional", *</Import-Package>
						<!-- Ensure plugin is spring powered -->
						<Spring-Context>*</Spring-Context>
					</instructions>
				</configuration>
			</plugin>
		</plugins>
	</build>
	<properties>
		<confluence.version>6.14.0</confluence.version>
		<confluence.data.version>6.14.0</confluence.data.version>
		<amps.version>8.1.2</amps.version>
		<plugin.testrunner.version>2.0.2</plugin.testrunner.version>
		<osgi.javaconfig.version>0.2.0</osgi.javaconfig.version>
		<spring.version>4.2.5.RELEASE</spring.version>
		<!-- This property ensures consistency between the key in atlassian-plugin.xml 
			and the OSGi bundle's key. -->
		<atlassian.plugin.key>${project.groupId}.${project.artifactId}</atlassian.plugin.key>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>
	</properties>
</project>

and Servlet

package com.learn.atlasian.servlet;

import javax.servlet.*;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import org.springframework.stereotype.Component;
import com.atlassian.plugin.spring.scanner.annotation.imports.ComponentImport;
import org.springframework.beans.factory.annotation.Autowired;
import javax.inject.Inject;

import java.net.URI;
import com.atlassian.sal.api.auth.LoginUriProvider;
import com.atlassian.sal.api.user.UserManager;
import com.atlassian.templaterenderer.TemplateRenderer;
 
@Component
public class RenderServlet extends HttpServlet
{
    
    @ComponentImport	
    private final TemplateRenderer templateRenderer;

    @Autowired
    public RenderServlet(TemplateRenderer templateRenderer)
    {
        this.templateRenderer = templateRenderer;
    }

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
       
        templateRenderer.render("admin.vm", response.getWriter());
    }
   
    private URI getUri(HttpServletRequest request)
    {
        StringBuffer builder = request.getRequestURL();
        if (request.getQueryString() != null)
        {
            builder.append("?");
            builder.append(request.getQueryString());
        }
        return URI.create(builder.toString());
    }

}

any pointers to resolve the issue are highly appreciated.
Thanks in advance.