Search⌘ K
AI Features

Adding a User Interface for This App

Explore how to add a user interface to your Go web app using the Gin framework. Learn to serve HTML templates, define routes, and pass dynamic data like coffee menus to your web pages for interactive and user-friendly experiences.

Most web apps usually have an interface that the user can interact with. This interface consists of a bunch of files that are responsible for:

  • Framing and sending the appropriate requests to the server.

  • Receiving a response from the user and displaying it in a user-friendly way.

The most straightforward way to write these files is in HTML. So let's try to build this interface for our coffee shop web app.

Creating a home page for the app

The home page of an app is where the user first lands. Since creating beautiful web pages is not our focus here, we'll create a basic home page using the following HTML in a file called index.html.

HTML
<!DOCTYPE html>
<html>
<head>
<title>The Coffeeshop</title>
</head>
<body>
Welcome to the Shop!
</body>
</html>

We'll put this file in a folder called templates. This folder is also where we'll put any other HTML we write. The overall project structure now becomes:

coffeeshop
|__ go.mod
|__ go.sum
|__ config.json
|__ coffee
|__ coffee.go
|__ templates
|__ index.html
Project structure so far

Now let's look at how we can make sure this file ...