Spark Java workshop

Create a new maven project in IntelliJ called MyFirstJavaWebApp (ArtifactId) use a root package name of - net.myfirst.webapp (GroupId).

Configure SparkJava in your project using maven:

http://sparkjava.com/documentation#getting-started

Create a new class called App.java that have a main method so that it's an executable class.

Create some routes

Create 3 routes:

/greet - which should display a greeting in the browser - Molo! or Hello!,
/greet/:username - which will greet a specific user in the browser in a language of your choice,
/greet/:username/language/:language - which will greet a specific user in the language specified.

Look at the http://sparkjava.com/documentation#routes section. Only create 'get' routes.

Run App.java to start the server at: http://localhost:4567 - open http://localhost:4567/greet in a browser.

You can change the default port number if you want:

http://sparkjava.com/documentation#embedded-web-server

Create a static file

You will note if you go to your web app at : http://localhost:4567 - you will get an 404 error. Add a static routes folder and add an index.html file in there to fix it.

http://sparkjava.com/documentation#static-files

Create a greet form

In your index.html file - create an html form that will allow a user to be greeted in English;

<form action="/greet" method="post" >
    <input type="text" name="username">
    <input type="submit" >
</form>

Create a /greet post route that will display a message like this Hello, <username entered> display a message of Hello! if no username was entered. Just return text from the route - nothing fancy.

Use req.queryParams("username") to read the username from the form.

Create a better experience using ...

The current user experience is not great as the user needs to press the back button to get back to the greetings form. What we really want is a way for the greeting message to be displayed below the form.

To do that we will need to dynamically update the html with user entered content. You can do that using a template that merge data and html.

http://sparkjava.com/documentation#views-and-templates

We will be using the Handlebars templating engine.

A basic template looks like this:

Hello, {{username}}

The username value will be injected into the template to result in a greeting for a specific user.

Add this dependency to your pom.xml file :

<dependency>
    <groupId>com.sparkjava</groupId>
    <artifactId>spark-template-handlebars</artifactId>
    <version>2.7.1</version>
</dependency>

Add 2 routes

Add two /hello routes - a get & a post route.

Create a template

Create a handlebars template called hello.handlebars in the ./src/main/resources/templates folder inside of your project

Put this html inside of it:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Greet me</h1>

    <form action="/hello" method="post" >
        <input type="text" name="username">
        <input type="submit" >
    </form>

    {{greeting}}

</body>
</html>

Note: the greeting tag where the greetings message will be displayed.

You can learn more about handlebars here: https://handlebarsjs.com/ - but all the templates you need is provided to you.

In the get route

Add this code inside of the /hello get route:

   Map<String, Object> map = new HashMap<>();
   return new HandlebarsTemplateEngine()
                   .render(new ModelAndView(map, "hello.handlebars"));

The code creates a new HandlebarsTemplateEngine and then render the content of hello.handlebars to the screen.

Note this code can be cleaned up, but we just want to get up and running for now.

Now try and run your app and go to http://localhost:4567/hello in the browser - you should see the greetings form. Clicking on the submit button should give an error. As we haven't added the post route yet.

In the post route

Add this code inside of the /hello get route:

   Map<String, Object> map = new HashMap<>();
   
   // create the greeting message
   String greeting = "Hello, " + req.queryParams("username");
   
   // put it in the map which is passed to the template - the value will be merged into the template
   map.put("greeting", greeting);
   
   return new HandlebarsTemplateEngine()
                   .render(new ModelAndView(map, "hello.handlebars"));

The code creates a new HandlebarsTemplateEngine accepts a map with the greeting and then render the content of hello.handlebars to the screen.

Now try and run your app and go to http://localhost:4567/hello in the browser - you should see the greetings form. Enter a name to greet click on the submit button should now display a greeting.

Display all the names greeted.

Take your app to the next level by keeping track of all the users that has been greeted by storing all the usernames entered in a list. Display the names using the template.

This handlebars code will work for a list of strings:

<div>
        <ul>
        {{#each users}}
        <li>{{this}}</li>
        {{/each}}
        </ul>
    </div>

How... will you prevent a name appearing in the list more than once.

Challenge

If it's not 16h00 yet - try this.

Create a web interface for your greetings app.

Create a calss called WebAppGreet in the root of your greetings app and give it a go!

Let me know what challanges you are facing.

avermeulen/spark-workshop.md