DEV Community: Bruno Drugowick

What about that AI, the GPT thing? Will it really affect my profession in the future?

Bruno Drugowick — Tue, 21 Mar 2023 03:02:22 +0000

I'd never used GPT... until today!

When all the hype about AI in programming started with GitHub Copilot I was not using VSCode plus the company I work for told us not to use it with any code from our clients. When ChatGPT came, a similar message also was sent to everybody. Put that together with my own recent career choice - to dedicate my time exclusively to code-related activities - and what happened is that I didn't care too much about all the hype until now.

Well, I've been reading, understanding, and discussing AI and how it relates to coding. I just haven't tried anything AI-related to help with my coding. And somehow I think that was a good decision. I didn't want a shortcut to get things done, I need mileage, I need to get my hands dirty with all sorts of programming problems, no matter how trivial. Apart from being fun, it's also the only way to re-learn some things that I ended up forgetting after a while (because, yeah, I forget very easily all the things - I might write about this in the future).

I was just peacefully coding.

But reading about something is not the same as using and applying it to a mundane activity. And that's what happened today. I was coding a very simple algorithm that a dear friend of mine was talking about with me. He said he was asked to code it in an interview and I decided to implement it in Golang as a challenge. I wouldn't look anywhere, I wouldn't try to find a solution or a hint of the solution online. The only thing I allowed myself to do was to search syntax-related things, because, as I stated above, I easily forget some things.

And during that activity, I ended up needing to implement a stack. I had some sort of a stack already but badly implemented in a string that I was manipulating throughout the code. So I did my own implementation of the stack, which took me around 15 minutes. Here is the first version I came up with:

// package and imports suppressed

type unicodeSlice []int32
type Stack struct {
    unicodeSlice
}

func (s *Stack) Push(v int32) {
    s.unicodeSlice = append(s.unicodeSlice, v)
}

func (s *Stack) Pop() {
    lastElementPosition := len(s.unicodeSlice) - 1
    if lastElementPosition >= 0 {
        s.unicodeSlice = s.unicodeSlice[:lastElementPosition]
    }
}

func (s *Stack) PopIfMatches(v int32) error {
    lastElementPosition := len(s.unicodeSlice) - 1
    if lastElementPosition >= 0 && s.unicodeSlice[lastElementPosition] == v {
        s.Pop()
        return nil
    }

    return fmt.Errorf("value to pop (%d) does not match provided value (%d)", s.unicodeSlice[lastElementPosition], v)
}

My idea was to have a regular stack, hence both Push() and Pop(), and an additional PopIfMatches() which was what I needed: a way to only pop the stack if the top value of the stack was a determined value that I could pass. If not, I needed an error, and that's what I decided to return.

Hunn, maybe I could see what AI is all about.

Right away, after getting the implementation working, I started to review it, as I always do. Then it came to me: well, do I need to do that? Let's see what GPT can do! A stack is a very common implementation, but I wanted to see what GPT would do with my "PopIfMatches" requirement.

I typed this: "Can you make a stack in Go with a special method that pop (sic) only if the value corresponds to a passed value?" and got exactly this:

// package and imports suppressed

type Stack struct {
    items []int
}

func (s *Stack) Push(i int) {
    s.items = append(s.items, i)
}

func (s *Stack) PopIf(v int) (int, bool) {
    if len(s.items) == 0 {
        return 0, false
    }
    lastIndex := len(s.items) - 1
    lastItem := s.items[lastIndex]
    if lastItem == v {
        s.items = s.items[:lastIndex]
        return lastItem, true
    }
    return 0, false
}

Right off the bat, I noticed:

PopIf was easier to read than my code, with an early return for an empty stack.
PopIf returns a bool instead of an error to indicate the success or failure of the code.
PopIf also returns the removed value (or 0, which is the zero value for int in Go).

But then I also noticed a few mistakes I made (which, granted, I would probably fix them on my review, but anyway...):

Returning a bool instead of an error made way more sense. I just needed to indicate the success or failure of the operation. The meaning of it is something that the caller could take care of anyway.
- That also helps with making the implementation cleaner because I didn't need to import anything like I was doing with fmt.
There was no need for me to have my own unicodeSlice type. I could make it a slice of the type I needed.

Not huge things, probably things I'd refactor right away or someone would get in a code review (in a real-world scenario), but still, things that are important. It took me less than 1 minute to formulate the prompt and get the implementation from the AI. Then a few more minutes to review the generated code and adapt it to my use.

Time is money. And money is what matters... for capitalism, at least

The time it took me to get the AI code and review it was still less than the 15 minutes that it took me to make the initial implementation from scratch, which would still require a quick review. Realistically, I would reward myself with a coffee or a quick walk around the house before getting into the review, so let's put that the final acceptable implementation, without the AI, would take around 40 minutes.

So it's around 10 minutes for the AI guided by the human against 40 minutes for the human aided by search engines. That's what capitalism is going to take into consideration! And I will go as far as saying that maybe that's already part of the reason we're seeing so many layoffs around the world.

Who am I? Or who will I become?

Is AI Code Reviewer a profession of the future? What about designing a whole application? Will there be something like AI Architect Reviewer? Is my next programming language the natural language?

So many questions, so many problems, and so little... time! Damn it! Who am I?

Automatically update your GitHub Pages website with posts from dev.to

Bruno Drugowick — Sat, 26 Mar 2022 21:29:55 +0000

Important note

It's all free. The idea here is to get a working solution without spending a penny.

Introduction

I've already talked about GitHub Pages a long while ago when I first created my personal website.

Then, for convenience, I switched to another tool, which was free at the time, and never touched my website again. I won't name it because from around 2 years ago to now, when I decided to write a few things again, the tool is just a mess and it's not working. I'd have to pay to make it work the way I want, which is basically:

A freaking simple static website with the list of my posts in dev.to.

The reasons: I don't make any money from my website, is just a place to put some things I like to talk about; also, I forget things easily and will need to refer to these things in the future for sure.

Cut to the chase

1. Build your personal website

I won't spend time here, GitHub has lots of info about this... and I have a post on how to combine it with Google Domains (that recently got out of Beta, by the way).

2. Create a script to get the posts

Dev.to as a very nice API and, most importantly, GET requests are free! So we can create a very simple script to get your posts and then - and here's the trick, save to a file that your GitHub Pages website understands as data! Here's the script:

#!/bin/bash

#### Thing to notice 1 ####
POSTS_FILE=./_data/devPosts.json

# Clear the posts file
echo -n "" >$POSTS_FILE

#### Thing to notice 2 ####
POSTS_JSON=$(curl https://dev.to/api/articles?username=brunodrugowick&?per_page=1000)

#### Thing to notice 3 ####
echo "$POSTS_JSON" | jq >>$POSTS_FILE
date >last_updated_date

Thing to notice 1

Notice how this variable points to a file under the _data directory. This is a special directory for GitHub Actions, that's powered by Jekyll.

Files in this directory can be used as data when building your static website. You'll see in a few how this is used.

Thing to notice 2

This part of the script is the request to the dev.to API. Notice the parameters:

username=brunodrugowick is getting the posts for my user. You should change that to your username.
per_page=1000 is the number of posts to retrieve. I believe I won't ever get to that number, but in case I do I'll work on a loop to handle the pagination. =)

Thing to notice 3

This part of the script writes the result of the request above to the data file that we referenced earlier. The pipe (|) to jq is to format nicely, probably not required.

3. List the posts in your website

At this point, this script can already be used in your local environment to fill in a data file that you can use in your GitHub Pages website. Let's do this then.

Put this code in your index.md page (you can use .html too or put this code anywhere else that you want in your website):

{% for devPost in site.data.devPosts %}
## {{ devPost.title }}

{{ devPost.readable_publish_date }}

{{ devPost.description }} [continue to read]({{ devPost.url }})

{% endfor %}

This is a simple for loop that goes through all of the posts that you saved to a devPosts file using the script that we created earlier.

The directive site.data.devPosts is what refers to that file. Everything that we access for a post in particular, like devPost.description or devPost.url is refering to the fields returned from the dev.to API.

4. Automate the task of updating your website

What we have so far is good enough, right? Every time you write something to dev.to you could go to your personal website repository, run the script and push a commit to let GitHub build and publish your website for you.

But we can go one step further and automate the whole thing with GitHub Actions! We'll create a workflow called Update Articles in your repository. Create a file .github/workflows/update-articles.yml in your repository with the following content:

name: Update Articles

#### Thing to notice 1 ####
on:
  schedule:
    - cron:  '30 23 * * *'
  workflow_dispatch:

jobs:
  run-script:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Run script to get articles from dev.to
        #### Thing to notice 2 ####
        run: |
          ./scripts/post_files_from_GET_json.sh

      - name: Commit to the repo
        run: |
          git config --global user.name 'Bruno Drugowick'
          git config --global user.email 'brunodrugowick@users.noreply.github.com'
          git add .
          git commit -am "Update articles list"
          git push

Thing to notice 1

This section ensures your workflow runs both on a schedule (every day at 11:30 PM) or whenever you want via workflow_dispatch. Here's what this will look like in your repository later:

Thing to notice 2

This section is just instructing GitHub Actions to run your workflow on the local copy of the repository that was checked out one step above.

The rest of the script is a commit to the repository with the change. This simplified version makes sure we commit anything, even if none, but we could verify if there was a change before deciding to push a commit to the repository, for example.

Conclusion

There you have it, now whatever you write on dev.to is also mirrored on your personal website.

Please let me know in the comments if you know another solution for this "problem".

Distributed Tracing with Spring Cloud Sleuth and Zipkin - AQAP Series

Bruno Drugowick — Sun, 26 Jul 2020 14:11:39 +0000

There's a lot going on related to cloud services, libraries, providers etc. In fact, everything cloud-related gets a lot of attention right now.

One thing I wanted to try was distribute tracing. Spring has a very interesting project under the Spring Cloud umbrella, called Spring Cloud Sleuth, that auto-configures your app to work with distributed tracing tools.

Together with this project you have Spring Cloud Zipkin Client that takes your instrumented log information and sends it to a Zipkin server. The server provides a clean and easy to use interface to understand the relationships between your services.

The Demo

Description

To explore the projects I developed 3 "layers" of services that talk to each other. The first layer contain only one service (service-one) and requests data from the second layer, comprised of two services (service-two, service-three).

At this point we can talk about Spring Cloud Load Balancer. This project is used to configure client-side load-balancing on the service-one for the second layer of services. The picture below shows how the services relate to each other.

Any service of the second layer then calls the service from the third layer (service-four). The list of services the request went through is put together and returned to the client by service-one.

The two possible responses to a call to service-one/info are:

//Using service-two on the second layer

{
  "info": {
    "Service 4": "Wow, request arrived this far!",
    "Service 2": "ok",
    "Service 1": "ok"
  }
}

//Using service-three on the second layer

{
  "info": {
    "Service 4": "Wow, request arrived this far!",
    "Service 3": "ok",
    "Service 1": "ok"
  }
}

Service-one will unevenly load-balance between service-two and service-three because there's a Thread.sleep(200) on service-three.

Running

To make it easy to run your own tests and see the distributed tracing in action, I've prepared a repository with the four services described above and a .jar for the Zipkin server.

brunodrugowick / distributed-tracing-demo

A demonstration of the usage of Spring Cloud Sleuth and Zipkin to trace requests across Spring Boot services.

Clone it and just run /scripts/start-all.sh. If you have Java 11 and Apache Bench (and a GNU/Linux operating system), everything runs and perform 10 thousand requests to fill your Zipkin server with some data.

The trace

After waiting for a couple of minutes for the tests to run, the script instructs you to go to http://localhost:9411. Let's explore it a bit...

Zipkin server

After searching for traces by clicking on the search icon, that's what the homepage looks like:

A very useful feature is the ability to filter traces based on the service name:

Inspecting a trace gives you this view, where you can easily see how long the request took in every service:

Finally, a very useful feature is understand your services dependencies using the Dependencies Page. Make sure you select a Start and End time and click the magnifier glass icon:

AQAP Series

As Quickly As Possible (AQAP) is a series of quick posts on something I find interesting. I encourage (and take part on) the discussions on the comments to further explore the technology, library or code quickly explained here.

Image by Jason King por Pixabay

The most basic security for Spring Boot with Thymeleaf

Bruno Drugowick — Wed, 25 Mar 2020 02:54:09 +0000

I like to develop small proof of concept applications. Although just validating, some security stuff may be necessary sometimes. Most often than not I also want to have 2 or more users...

So if you're using Spring and Thymeleaf, for the most basic and quick setup for a Spring MVC web app, just do:

Add the `pom.xml` dependency

Just add this to the file:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

Create the most basic security config ever

@EnableWebSecurity
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth
            .inMemoryAuthentication()
                .withUser("username").password("{noop}password").roles("USER").and()
                .withUser("username2").password("{noop}password").roles("USER");
    }
}

Additional stuff

Well, you're mostly done, but there're a few things that I believe are important to consider.

CSRF protection

The first thing is that with the current config you won't be able to make a HTTP POST request because Spring is automatically protecting your app from CSRF attacks. You must add the csrf token already provided by Spring when POSTing.

You do that by adding the following inside your <form> and </form> tags:

<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

Logout link

The current configuration provides you a login page that may be enough for demonstrations. But having more than one user makes you want to logout and show some behavior with the other users.

For this, just add the following form somewhere in your app:

<div class="text-light">
    <form action="/logout"
        method="post">
        <input class="btn btn-link" 
            type="submit"
            value="Log out" />
        <input type="hidden"
            th:name="${_csrf.parameterName}"
            th:value="${_csrf.token}"/>
    </form>
</div>

Getting the logged user

Finally, if you want to know which user is logged, inject a Principal instance on your controller methods. Here's an example:

@GetMapping
public String homePage(Principal principal, Model model) {
    String username = principal.getName();
    model.addAttribute("username", username);
    return "index";
}

Now you can show the logged user right on your homepage.

AQAP Series

Image by Jason King por Pixabay

Three steps to extend a Spring Data JPA repository with your own code

Bruno Drugowick — Fri, 21 Feb 2020 01:37:14 +0000

This is the post #6 of the series "Querying your Spring Data JPA Repository".

What about an advanced search?

What if you want to search by any field available on the Restaurant and combine then without having to select specific searches.

Well, it's not Google, but it's powerful enough for a lot of use cases.

Let's prepare the app

Well, you know the drill. Let's build what's necessary for the app to work with this new advanced search option.

The search form looks like this:



<form th:action="@{/advancedSearch/perform}">
    <div class="card mb-auto">
        <div class="card-header">
            <h4>Filter Restaurants</h4>
        </div>
        <div class="card-body">
            <div class="form-group row small">
                <div class="col col-sm-4 float-left"></div>
                <div class="col col-sm-8 float-right">
                    <a class="float-right" href="/">Simple search</a>
                </div>
            </div>
            <div class="form-group row">
                <label class="col col-sm-4" for="name">Name</label>
                <input class="form-control col-sm-8" id="name" placeholder="<empty>" th:name="name"
                       th:value="${search.name}" type="text"/>
            </div>
            <div class="form-group row">
                <label class="col col-sm-4" for="address">Address</label>
                <input class="form-control col-sm-8" id="address" placeholder="<empty>" th:name="address"
                       th:value="${search.address}" type="text"/>
            </div>
            <div class="form-group row">
                <label class="col col-sm-4" for="minDeliveryFee">Delivery Fee</label>
                <label class="col col-sm-1" for="minDeliveryFee">Min</label>
                <input class="form-control col-sm-3" id="minDeliveryFee" placeholder="<min>" th:name="minDeliveryFee"
                       th:value="${search.minDeliveryFee}" type="text"/>
                <label class="col col-sm-1" for="maxDeliveryFee">Max</label>
                <input class="form-control col-sm-3" id="maxDeliveryFee" placeholder="<max>" th:name="maxDeliveryFee"
                       th:value="${search.maxDeliveryFee}" type="text"/>
            </div>
            <div class="form-group row">
                <label class="col col-sm-4" for="cuisine">Cuisine</label>
                <input class="form-control col-sm-8" id="cuisine" placeholder="<empty>" th:name="cuisine"
                       th:value="${search.cuisine}" type="text"/>
            </div>
            <div class="form-group row">
                <label class="col col-sm-4" for="city">City</label>
                <input class="form-control col-sm-8" id="city" placeholder="<empty>" th:name="city"
                       th:value="${search.city}" type="text"/>
            </div>
            <div class="form-group row">
                <div class="col col-sm-4"></div>
                <input class="btn btn-primary col col-sm-8" type="submit" value="Submit">
            </div>
        </div>
    </div>
</form>

We need new controller methods to handle the new page and the search operation:



@RequestMapping("/advancedSearch")
public String advancedSearch(Model model) {
    model.addAttribute("restaurants", restaurantRepository.findAll());
    model.addAttribute("search", new AdvancedSearch());
    return "advancedSearch";
}

@RequestMapping("/advancedSearch/perform")
public String advancedSearchWithQuery(@ModelAttribute AdvancedSearch advancedSearch, Model model) {
    model.addAttribute("restaurants", restaurantRepository.advancedSearch(advancedSearch));

    model.addAttribute("search", advancedSearch);
    return "advancedSearch";
}

Keep an eye on:

The @ModelAttribute annotation: it maps the input to a new class called...
AdvancedSearch. This is a simple bean with fields to hold data coming from the form. With the help of Project Lombok this class is quite simple.
- We use this class to pass data between the form and the app on both directions. This is how we can show the query inputs to the user even after the page is refreshed to show the search results (remember this is not your typical SPA, ok?).

Custom Repository Methods

But you may also have noticed that we are calling a new method on the restaurantRepository called advancedSearch passing the homonym advancedSearch object via parameter. No, that's not a Spring Data JPA default method (would be nice, hã?), but the ability to create our own custom methods is the powerful stuff we're learning here!

Let's see how in 3 steps.

Step 1: Create a new interface to hold the method declarations



public interface CustomRestaurantRepository {
    List<Restaurant> advancedSearch(AdvancedSearch advancedSearch);
}

Notice the definition of the advancedSearch method. That's all we need right now.

Step 2: Make your Spring Data JPA repository extend your new interface



public interface RestaurantRepository extends JpaRepository<Restaurant, Long>, CustomRestaurantRepository {

Notice now that our repository extends both JPARepository (from Spring Data JPA project) and CustomRestaurantRepository (a class of our own to define repository methods). We can now call our new method, but what about its code?

Step 3: Implement the custom method

Now it's just a matter of implementing the code we need. We will create a CustomRestaurantRepositoryImpl class that implements our newly created CustomRestaurantRepository interface.



@Repository
public class CustomRestaurantRepositoryImpl implements CustomRestaurantRepository {

    @PersistenceContext
    private EntityManager entityManager;

    @Override
    public List<Restaurant> advancedSearch(AdvancedSearch advancedSearch) {

        var jpql = new StringBuilder();
        jpql.append("from Restaurant where 1=1 ");

        var parameters = new HashMap<String, Object>();

        if (StringUtils.hasLength(advancedSearch.getName())) {
            jpql.append("and name like :name ");
            parameters.put("name", "%" + advancedSearch.getName() + "%");
        }

        if (StringUtils.hasLength(advancedSearch.getAddress())) {
            jpql.append("and address like :address ");
            parameters.put("address", "%" + advancedSearch.getAddress() + "%");
        }

        if (advancedSearch.getMinDeliveryFee() != null) {
            jpql.append("and deliveryFee >= :startFee ");
            parameters.put("startFee", advancedSearch.getMinDeliveryFee());
        }

        if (advancedSearch.getMaxDeliveryFee() != null) {
            jpql.append("and deliveryFee <= :endingFee ");
            parameters.put("endingFee", advancedSearch.getMaxDeliveryFee());
        }

        if (StringUtils.hasLength(advancedSearch.getCuisine())) {
            jpql.append("and cuisine.name like :cuisine ");
            parameters.put("cuisine", "%" + advancedSearch.getCuisine() + "%");
        }

        if (StringUtils.hasLength(advancedSearch.getCity())) {
            jpql.append("and city like :city ");
            parameters.put("city", "%" + advancedSearch.getCity() + "%");
        }

        TypedQuery<Restaurant> query = entityManager.createQuery(jpql.toString(), Restaurant.class);

        parameters.forEach((key, value) -> query.setParameter(key, value));

        return query.getResultList();
    }
}

A lot to unpack here:

First, we get ahold of an EntityManager injecting it via @PersistenceContext. With this we can perform operations via JPA.
Then we override the advancedSearch method to:
- Check each and every property of the AdvancedSearch object adding it, if not null, to a custom JPQL query.
- Match the appropriate parameters. First, on a temporary map and then actually mapping on the query.
- Execute the query returning the results.
Last, but not least, the suffix Impl is what actually tell Spring Data JPA that this is a custom implementation of the existing RestaurantRepository. Adding our interface and making the Spring Data JPA interface extend is only to make the code readable. You should do this!

Additional challenge

Notice that the example app has also an option to select the logical operator to use when performing the advanced search, AND or OR. You may want to try to implement it yourself, but if you don't want to, here's the implementation for you.

That's the final result:

The example app

The working app is here (wait for Heroku to load the app, it takes a few seconds on the free tier).

Commits related to this post

The preparation and core code is here.
The logical operator addition is here.
And there's a UI improvement I did here

brunodrugowick / jpa-queries-blog-post

A demo project for a blog post about (Spring Data) JPA.

How do I secure this Spring Boot + Thymeleaf + Vue.js app?

Bruno Drugowick — Wed, 12 Feb 2020 23:33:52 +0000

I have this app:

Complete CRUD with Spring Boot, Vue.js, Axios

Bruno Drugowick ・ Feb 9 '20 ・ 4 min read

#java #vue #axios #spring

And I'm wondering how do I properly secure it? The app has:

Server-rendered pages with Thymeleaf.
An API providing data for the pages.

What's the proper way to secure and its underlying limitations considering this architecture?

Some questions that pop on my mind, to help you understand why I'm asking:

Can I go with Spring Security defaults (adding csrf token on my forms that POST/PUT with Vue.js)?
How do I integrate this with my DELETE via API, for example?
Should I disable csrf?
Does this architecture makes sense? What are the caveats?

...

Cover image from Christoph Scholz.

Using JPQL on orm.xml file with Spring Data JPA

Bruno Drugowick — Tue, 11 Feb 2020 01:06:39 +0000

This is the post #5 of the series "Querying your Spring Data JPA Repository".

And this is a quick one.

Remember our JPQL?

Yeah, what if for some reason you want to externalize the query to a XML file. Why, you ask? Well, I'm not sure. More on that at the end of this post.

Just put it on a orm.xml file!

The file must be at resources/META-INF/orm.xml:

<?xml version="1.0" encoding="UTF-8"?>
<entity-mappings
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns="http://xmlns.jcp.org/xml/ns/persistence/orm"
        version="2.2">

    <named-query name="Restaurant.activeGrabngoByCity">
        <query>from Restaurant r where r.active = true and r.grabngo = true and r.city like concat('%', :city, '%')</query>
    </named-query>

    <!-- You can have more...
    <named-query name="Restaurant.otherMethodName">
        <query>from Restaurant where whatever ... </query>
    </named-query>
    -->

</entity-mappings>

As always, let's highlight some things:

The entity-mappings tag must be exactly what you see here. Just copy and paste this part.
The attribute name on the tag named-query specifies the method the query will relate to. Whenever the method is called this JPA query is executed.
The query had to go over a small change, did you notice? We added a concat to form the last portion of the whereclause. Without it an unexpected token: % error would be thrown.

You'd also have to change other things, like replace < with < and > with >, which is the way to use those characters in XML.

The benefit

I can think of one benefit which is the ability to change the query without recompiling the application. This is questionable, though, but... well... it's possible.

To be honest here, there's way more you can do on this file related to persistence and JPA. In fact, you could configure everything JPA-related on this file and ditch annotations. Everybody, though, is moving out from XML-based configuration to Annotations-based configuration.

Yet, this is still something to learn, I believe. I just like how complicated things get over time, and this is one manifestation of this complexity.

The example app

The working app is here (wait for Heroku to load the app, it takes a few seconds on the free tier).

Commits related to this post

There's only this (and I promptly reverted afterwards).

brunodrugowick / jpa-queries-blog-post

A demo project for a blog post about (Spring Data) JPA.

Complete CRUD with Spring Boot, Vue.js, Axios

Bruno Drugowick — Sun, 09 Feb 2020 02:35:04 +0000

Following up on the last post of AQAP Series, here's the complete create-read-update-delete (CRUD) app relying on Spring (Boot), Vue.js and Axios.

See it in action:

I didn't mention Thymeleaf because there's no changes to the pages served by the back-end on this post.

I'll illustrate the code using the Role entity, but as always the complete code and the app running is available at the end.

Without further ado...

Adding REST operations

We start adding two new operations on the RoleController.java:

@PostMapping("roles")
public Role save(@RequestBody Role role) {
    return roleRepository.save(role);
}

@DeleteMapping("roles/{id}")
public void get(@PathVariable Long id) {
    roleRepository.deleteById(id);
}

The save method takes care of both create and update operations. Spring is smart enough to update when there's an ID present and to create a new entity otherwise.

The Role Form

This is our HTML form now:

<form v-on:submit.prevent="postRole">
    <div class="card mb-auto">
        <div aria-controls="roleForm" aria-expanded="false" class="card-header" data-target="#roleForm"
             data-toggle="collapse" id="formHeader" style="cursor: pointer">
            <div class="float-left">New/Edit Role</div>
            <div class="float-right">+</div>
        </div>
        <div class="card card-body collapse" id="roleForm">
            <div class="form-group row">
                <label for="roleName" class="col-sm-4 col-form-label">Role Name</label>
                <input id="roleId" type="hidden" v-model="role_id">
                <input id="roleName" class="form-control col-sm-8" placeholder="Role Name" type="text"
                           v-model="role_name"/>
            </div>
            <div class="form-group row">
                <div class="col col-sm-4"></div>
                <input class="btn btn-primary col col-sm-8" type="submit" value="Save">
            </div>
        </div>
    </div>
</form>

Two things to notice here:

v-on:submit.prevent="postRole" is a Vue.js tag to specify the method to run when submitting the form and to prevent the default behaviour of page reloading on submit.
v-model is another Vue.js tag. This binds an input with Vue.js data.

New Edit and Delete buttons

On the Actions column of our HTML table, just add two new buttons:

<td>
    <button class="btn btn-primary" v-on:click="editRole(role)">Edit</button>
    <button class="btn btn-danger" v-on:click="deleteRole(role)">Delete</button>
</td>

Notice the same v-on tag, but now with an action of click. This binds the button click to a Vue.js method.

The Vue.js Magic... again.

Our Vue.js script is now a little scary:

<script>
    var app = new Vue({
        el: '#main',
        data() {
            return {
                roles: null,
                role_id: '',
                role_name: '',
            }
        },
        mounted(){
            this.getRoles();
        },
        methods: {
            getRoles: function () {
                axios
                    .get("/api/v1/roles")
                    .then(response => (this.roles = response.data))
            },
            postRole: function (event) {
                // Creating
                if (this.role_id == '' || this.role_id == null) {
                    axios
                        .post("/api/v1/roles", {
                            "name": this.role_name,
                        })
                        .then(savedRole => {
                            this.roles.push(savedRole.data);
                            this.role_name = '';
                            this.role_id = '';
                        })
                } else { // Updating
                    axios
                        .post("/api/v1/roles", {
                            "id": this.role_id,
                            "name": this.role_name,
                        })
                        .then(savedRole => {
                            this.getRoles();
                            this.role_name = '';
                            this.role_id = '';
                        })
                }
            },
            editRole: function (role) {
                this.role_id = role.id;
                this.role_name = role.name;
                document.getElementById('roleForm').setAttribute("class", document.getElementById('roleForm').getAttribute("class") + " show");
            },
            deleteRole: async function (role) {
                await axios
                    .delete("/api/v1/roles/" + role.id);
                this.getRoles();
            }
        },
    })
</script>

But it's quite simple, actually. Let's explore what matters:

el: '#main' specifies that Vue.js is going to operate on this HTML element id. In our case this is div containing the form and table.
Inside data() we can specify variables that we are going to manipulate on the script and that the user may interact with. In our case notice that we have defined variables that represent the content of the form that the user interacts with.
mounted() is called when Vue.js is ready (mounted on the element specified in el above). Here we call a method getRoles(). This method requests data to the API and sets it to a variable that is used to create the table of contents (using v-for explained on the last post).
methods contains all the methods that interact with the API. Notice how they equate to the CRUD operations:
- getRoles is the read operation.
- postRole is the create operation.
- editRole is the update operation.
- deleteRole is the delete operation.

The app

You can see the app running here (slightly modified since this is an ongoing analysis).

The repository and the aforementioned commits, also slightly modified, here.

brunodrugowick / spring-thymeleaf-vue-crud-example

Complete CRUD example project with Spring Boot, Thymeleaf, Vue.js and Axios.

AQAP Series

Image by Jason King por Pixabay

Spring Boot, Vue.js, Axios and Thymeleaf with Bootstrap in 4 commits

Bruno Drugowick — Tue, 04 Feb 2020 05:12:42 +0000

Take a deep breath, hold...

In 4 short and easy commits you'll get a Spring Boot app serving server-side rendered pages via Thymeleaf (with Bootstrap) and Vue.js scripts making use of Axios to make asynchronous requests to the server to update pages with data without reloading the whole page from the server again.

... release! Explaining the previous phrase may take longer than to implement it. So let's do it.

Commit #1 - Spring Initializr

This one is easy. The first commit is the base Spring Boot application from Spring Initializr + a few extras.

You can generate your own version downloading from this link (already populated with some dependencies).

Add the following to the pom.xml file after loading the project in your preferred IDE:



<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.4.1</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.38</version>
</dependency>

Commit #2 - The base app

This commit may be long but it's not complicated at all. It adds Role and User entities:



@Entity(name = "role")
@Data
public class Role {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    private String name;
}



@Entity(name = "user")
@Data
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    private String firstName;
    private String lastName;

    @ManyToOne
    @JoinColumn(name = "role_id")
    private Role role;
}

And their corresponding Spring Data JPA repositories:



@Repository
public interface RoleRepository extends JpaRepository<Role, Long> {
}



@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

Adds a controller to provide a server-side rendered page via Thymeleaf:



@Controller
public class MainController {

    @RequestMapping("/")
    public String index() {
        return "index";
    }
}

And the index.html page itself on the resources/templates folder:



<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href='/webjars/bootstrap/css/bootstrap.min.css' rel='stylesheet'>

    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>

<div th:replace="fragments/header :: header"></div>

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Did you notice the <div th:replace...? This is a neat feature of Thymeleaf to reuse code. Here it goes the reusable header.html on the resources/templates/fragments folder:



<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href='/webjars/bootstrap/css/bootstrap.min.css' rel='stylesheet'>

    <meta charset="UTF-8">
    <title>Restaurants</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" th:fragment="header">
    <a class="navbar-brand" href="/">Home</a>
    <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
            class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown"
                   href="#" id="navbarDropdown" role="button">
                    Entities
                </a>
                <div aria-labelledby="navbarDropdown" class="dropdown-menu">
                    <a class="dropdown-item" href="/users">Users</a>
                    <a class="dropdown-item" href="/roles">Roles</a>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-item-text p-4 text-muted" style="max-width: 200px;">
                        <p>
                            Administrative pages to list, edit, create and remove entities.
                        </p>
                    </div>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Commit #3 - The HTML templates for the entities

Adds server-side-rendered templates and controllers. Templates provide basic html pages for Roles and Users.

This is the new RoleController:



@Controller
public class RoleController {

    @GetMapping("/roles")
    public String rolesPage() {
        return "roles";
    }
}

And the UserController:



@Controller
public class UserController {

    @GetMapping("/users")
    public String users() {
        return "users";
    }
}

The HTML for the roles.html page:



<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href='/webjars/bootstrap/css/bootstrap.min.css' rel='stylesheet'>

    <meta charset="UTF-8">
    <title>Roles</title>
</head>
<body>

<div th:replace="fragments/header :: header"></div>

<br><br>

<div class="container" id="main">

    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>Role ID</th>
            <th>Role Name</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
            <td></td>
            <td>
                <a>Edit</a>
                <a>Delete</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

And users.html page:



<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href='/webjars/bootstrap/css/bootstrap.min.css' rel='stylesheet'>

    <meta charset="UTF-8">
    <title>Users</title>
</head>
<body>

<div th:replace="fragments/header :: header"></div>

<br><br>

<div class="container" id="main">

    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Role</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <a>Edit</a>
                <a>Delete</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Commit #4 - The Vue magic

Now we add Vue and Axios to the pom.xml file:



<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>vue</artifactId>
    <version>2.6.11</version>
</dependency>
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>axios</artifactId>
    <version>0.19.0</version>
</dependency>

Then a REST controller (this serializes the response to JSON by default) to return a list of Roles:



@RestController
@RequestMapping("/api/v1")
public class RolesController {

    private final RoleRepository roleRepository;

    public RolesController(RoleRepository roleRepository) {
        this.roleRepository = roleRepository;
    }

    @GetMapping("roles")
    public List<Role> list() {
        return roleRepository.findAll();
    }
}

And another one for Users:



@RestController
@RequestMapping("/api/v1")
public class UsersController {

    private final UserRepository userRepository;

    public UsersController(UserRepository userRepository) {
        this.userRepository = userRepository;
    }

    @GetMapping("/users")
    public List<User> list() {
        return userRepository.findAll();
    }
}

Finally, on the roles.html we edit the section where we want Vue.js to render the data and add a script:



<!-- unrelated code omitted for brevity -->
<tr v-for="role in roles">
    <td>{{ role.id }}</td>
    <td>{{ role.name }}</td>
<!-- unrelated code omitted for brevity -->



<!-- Vue.js imports -->
<script src="webjars/vue/vue.min.js"></script>
<script src="webjars/axios/dist/axios.min.js"></script>
<!-- Actual Vue.js script -->
<script>
    var app = new Vue({
        el: '#main',
        data() {
            return {
                roles: null
            }
        },
        mounted(){
            axios
                .get("/api/v1/roles")
                .then(response => (this.roles = response.data))
        },
    })
</script>

The same modifications are made on the users.html:



<!-- unrelated code omitted for brevity -->
<tr v-for="user in users">
    <td>{{ user.firstName }}</td>
    <td>{{ user.lastName }}</td>
    <td>{{ user.role.name }}</td>
<!-- unrelated code omitted for brevity -->



<!-- Vue.js imports -->
<script src="webjars/vue/vue.min.js"></script>
<script src="webjars/axios/dist/axios.min.js"></script>
<!-- Actual Vue.js script -->
<script>
    var app = new Vue({
        el: '#main',
        data() {
            return {
                users: null
            }
        },
        mounted(){
            axios
                .get("/api/v1/users")
                .then(response => (this.users = response.data))
        },
    })
</script>

The app

You can see the app running here (slightly modified since this is an ongoing analysis).

The repository and the aforementioned commits, also slightly modified, here.

brunodrugowick / spring-thymeleaf-vue-crud-example

Complete CRUD example project with Spring Boot, Thymeleaf, Vue.js and Axios.

AQAP Series

Beginners tag

I'm using this tag for the second time. Since there are rules to use it, please let me know if there's something here you (or a beginner) don't understand or that I took for granted and you're (or a beginner may be :) confused about it.

Image by Jason King por Pixabay

Using JPQL with Spring Data JPA

Bruno Drugowick — Thu, 30 Jan 2020 03:35:50 +0000

This is the post #4 of the series "Querying your Spring Data JPA Repository".

Let's recap: by now you should have an app like this. The frontend (Thymeleaf + a very bad UI design) doesn't matter since our goal is to understand several ways to query your Spring Data JPA repository. Regardless, I added Bootstrap to make make it easier on the eyes.

Adding a few properties

Let's add city, grabAndGo and active properties to our Restaurant entity. You can see how on this commit.

The requirement

Let's say now that you want to create a new custom search on our awesome search area:

This searches for active restaurants with Grab'n'Go enabled in a city specified by the user.

"I know how to do this already"

Yes, if you're following the series you already know how to do this with Query Methods. Here you go:

Create a new method on the RestaurantRepository interface:

List<Restaurant> findAllByActiveTrueAndGrabngoTrueAndCityContaining(String city);

That's going to work, but look at the size of the method name! C'mon! Imagine having to use this huge method name all over your code. That's not clean!

`@Query` to the rescue

That's the exact scenario to use a JPQL query. Let's refactor the code above:

Rename the method to something more acceptable, like activeGrabngoByCity.
Add the annotation @Query above the method name.
Create your custom JPQL query.

Here's the result:

@Query("from Restaurant r where r.active = true and r.grabngo = true and r.city like %:city%")
List<Restaurant> activeGrabngoByCity(String city);

Notice that you don't have to follow the Query Methods' rules to name the method. You're telling Spring that you're providing the query for this method via the @Query annotation.

For now that's all that I'm going to cover. You can take a look at this documentation from Hibernate to do your own cool stuff, JPQL is very powerful!

The example app

The working app is here (wait for Heroku to load the app, it takes a few seconds on the free tier).

Commits related to this post

Adds Bootstrap: 020142.
Adds new properties to the Restaurant: ab7a2e.
Refactors to JPQL: 8758bf.

brunodrugowick / jpa-queries-blog-post

A demo project for a blog post about (Spring Data) JPA.

Complete API in 5 minutes with Spring Data REST - AQAP Series

Bruno Drugowick — Tue, 21 Jan 2020 03:29:29 +0000

The following instructions will give you a complete REST API for two related resources in 5 minutes. You will write less than 50 lines of code.

Bootstrap the Project with Spring Initializr

Spring Initializr let's you quickly bootstrap your Spring applications by selecting dependencies. I've already prepared a configuration with the following dependencies:

Spring Data JPA to persist data to a database.
H2 Database to auto-configure an embedded relational database.
Rest Repositories to expose Spring Data repositories over REST.
Lombok to reduce boilerplate code and create in compile-time all the Java getters, setters, constructors etc.

Click here to be redirected to Spring Initializr wesite with the previous configuration loaded.

Download, unzip and load the project on your favorite IDE.

Specify the resources

There'll be a resource called User:

@Entity @Data
class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    private String firstName;
    private String lastName;

    @ManyToOne
    @JoinColumn(name = "role_id")
    private Role role;
}

And another one called Role:

@Entity @Data
class Role {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    private String name;
}

Notice the following:

@Entity specifies this as a JPA entity to be persisted to a database (in our case, H2).
@Data is a Lombok annotation that creates code in compile-time for getters, setters, constructors, toString and hash methods.
@Id and @GeneratedValue are JPA annotations that designate the id field as an ID for the entities and that the database IDs will be auto-generated (in this case by the database).
@ManyToOne and @JoinColumn relate User and Role entities.

Create and expose repositories

The Repository pattern abstracts the access to read and write data from/to a database. In this little experiment, the entities are to be persisted and the repositories implement the operations to do so.

With Spring Data, though, you won't need any implementation, since it'll be provided to us in runtime. Let's see how:

@RepositoryRestResource(collectionResourceRel = "users", itemResourceRel = "user", path = "users")
interface PersonRepository extends JpaRepository<User, Long> {}

@RepositoryRestResource(collectionResourceRel = "roles", itemResourceRel = "role", path = "roles")
interface RoleRepository extends JpaRepository<Role, Long> {}

Let's break things down:

@RepositoryRestResource is what exposes the entities as REST endpoints.
- itemResourceRel specifies how to call one instance of an entity.
- collectionResourceRel specifies how to call two or more instances of an entity.
- path specifies the path (url) to access the resource.
extends JpaRepository<... is what provides all the methods to write each entity to the database. The list below was taken with the code completion feature (CTRL + Space on IntelliJ IDEA) on an instance of a repository:

Bootstrap some data

For demonstration purposes, let's create a import.sql file on the resources folder to populate the database with data upon app initialization.

insert into role (name) values ('USER'), ('ADMIN'), ('ROOT');
insert into user (first_name, last_name, role_id) values ('Johnny', 'Bravo', 1), ('Johnny', 'Manso', 2), ('Sidra', 'Cereser', 1), ('Chuck', 'Norris', 3);

Test some operations

Assuming you're running the application on your machine, the following snippets help you "see" the API working.

GET list of resources

On the terminal, type:

curl -i -X GET http://localhost:8080/users

You get:

HTTP/1.1 200 
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Content-Type: application/hal+json
Transfer-Encoding: chunked
Date: Tue, 21 Jan 2020 03:02:40 GMT

{
  "_embedded" : {
    "users" : [ {
      "firstName" : "Johnny",
      "lastName" : "Bravo",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/users/1"
        },
        "user" : {
          "href" : "http://localhost:8080/users/1"
        },
        "role" : {
          "href" : "http://localhost:8080/users/1/role"
        }
      }
    }, {
      "firstName" : "Johnny",
      "lastName" : "Manso",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/users/2"
        },
        "user" : {
          "href" : "http://localhost:8080/users/2"
        },
        "role" : {
          "href" : "http://localhost:8080/users/2/role"
        }
      }
    }, {
      "firstName" : "Sidra",
      "lastName" : "Cereser",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/users/3"
        },
        "user" : {
          "href" : "http://localhost:8080/users/3"
        },
        "role" : {
          "href" : "http://localhost:8080/users/3/role"
        }
      }
    }, {
      "firstName" : "Chuck",
      "lastName" : "Norris",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/users/4"
        },
        "user" : {
          "href" : "http://localhost:8080/users/4"
        },
        "role" : {
          "href" : "http://localhost:8080/users/4/role"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/users{?page,size,sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/profile/users"
    }
  },
  "page" : {
    "size" : 20,
    "totalElements" : 4,
    "totalPages" : 1,
    "number" : 0
  }
}

On the terminal, type:

curl -i -X GET http://localhost:8080/roles

You get:

HTTP/1.1 200 
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Content-Type: application/hal+json
Transfer-Encoding: chunked
Date: Tue, 21 Jan 2020 03:10:29 GMT

{
  "_embedded" : {
    "roles" : [ {
      "name" : "USER",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/roles/1"
        },
        "role" : {
          "href" : "http://localhost:8080/roles/1"
        }
      }
    }, {
      "name" : "ADMIN",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/roles/2"
        },
        "role" : {
          "href" : "http://localhost:8080/roles/2"
        }
      }
    }, {
      "name" : "ROOT",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/roles/3"
        },
        "role" : {
          "href" : "http://localhost:8080/roles/3"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/roles{?page,size,sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/profile/roles"
    }
  },
  "page" : {
    "size" : 20,
    "totalElements" : 3,
    "totalPages" : 1,
    "number" : 0
  }
}

GET one resource

On the terminal, type:

curl -i -X GET http://localhost:8080/users/1

You get:

HTTP/1.1 200 
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Content-Type: application/hal+json
Transfer-Encoding: chunked
Date: Tue, 21 Jan 2020 03:05:21 GMT

{
  "firstName" : "Johnny",
  "lastName" : "Bravo",
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/users/1"
    },
    "user" : {
      "href" : "http://localhost:8080/users/1"
    },
    "role" : {
      "href" : "http://localhost:8080/users/1/role"
    }
  }
}

On the terminal, type:

curl -i -X GET http://localhost:8080/roles/1

You get:

HTTP/1.1 200 
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Content-Type: application/hal+json
Transfer-Encoding: chunked
Date: Tue, 21 Jan 2020 03:11:12 GMT

{
  "name" : "USER",
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/roles/1"
    },
    "role" : {
      "href" : "http://localhost:8080/roles/1"
    }
  }
}

POST a new resource

On the terminal, type:

curl -i -X POST -H "Content-Type:application/json" -d '{"firstName": "Jhon", "lastName": "Benga", "role": "http://localhost:8080/roles/1"}' http://localhost:8080/users

You get:

HTTP/1.1 201 
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Location: http://localhost:8080/users/5
Content-Type: application/hal+json
Transfer-Encoding: chunked
Date: Tue, 21 Jan 2020 03:09:01 GMT

{
  "firstName" : "Jhon",
  "lastName" : "Benga",
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/users/5"
    },
    "user" : {
      "href" : "http://localhost:8080/users/5"
    },
    "role" : {
      "href" : "http://localhost:8080/users/5/role"
    }
  }
}

Ahá, did you notice the role property? Yeah, you just send the href property of the role you want to attribute to the user.

Note: this is the reason I didn't include a HAL browser on this article. I don't know how (for now) to properly configure/customize the HAL browser to post embedded entities.

Final thoughts

That was quick, wasn't it? The repository for the application is this:

brunodrugowick / spring-data-rest-example

Example application to serve as a boilerplate and learning purposes for Spring Data REST.

View on GitHub

Here's all the code we wrote for the application:

@SpringBootApplication
public class SpringDataRestExampleApplication {
    public static void main(String[] args) {
        SpringApplication.run(SpringDataRestExampleApplication.class, args);
    }
}

@Entity @Data
class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    private String firstName;
    private String lastName;

    @ManyToOne
    @JoinColumn(name = "role_id")
    private Role role;
}

@Entity @Data
class Role {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    private String name;
}

@RepositoryRestResource(collectionResourceRel = "users", itemResourceRel = "user", path = "users")
interface PersonRepository extends JpaRepository<User, Long> {}

@RepositoryRestResource(collectionResourceRel = "roles", itemResourceRel = "role", path = "roles")
interface RoleRepository extends JpaRepository<Role, Long> {}

AQAP Series

Beginners tag

I'm using this tag for the first time. Since there are rules to use it, please let me know if there's something here you (or a beginner) don't understand or that I took for granted and you're (or a beginner may be :) confused about it.

Image by Jason King por Pixabay

Spring Data JPA Query Methods

Bruno Drugowick — Wed, 15 Jan 2020 07:19:06 +0000

This is the post #3 of the series "Querying your Spring Data JPA Repository".

If you're following the series, by now you have an app with a list of Restaurants. The list is fetched using the method findAll() which you did not implement, because it was provided by Spring Data JPA when you created the RestaurantRepository class extending Spring's JpaRepository class.

Take a look at the previous post if you haven't already:

Querying your Spring Data JPA Repository - Basic Setup

Bruno Drugowick ・ Jan 12 '20

#java #spring #jpa #repository

The Task

Let's say that now you have to add a search bar on top of the list in order to filter it. The search must match any Restaurant name that contains the text the user types.

As you can see, if the user types Ma three Restaurants are shown: Mamma Mia; La Maison du Croissant; and Marcante Pizzaria. They all contain Ma in their names.

Preparing the application

Well, let's prepare our app to work with this new requirement.

Search bar

Let's add a search bar with the following Thymeleaf code on the index.html file:

<form th:action="@{/search}">
    Search by:
    <select name="field">
        <option value="name">Name</option>
    </select>
    <input placeholder="Your search query" th:name="query" th:value="${query}" type="text"/>
    <input type="submit" value="Search"/>
</form>

That's a simple form that hits on /search address with two request parameters:

field which contains the name of the field the user wants to search on (supporting only name for now).
query containing whatever the user types into the search field.

The URL after clicking Search with Ma on the search field would be https://whatever-your-server-is/search?field=name&query=Ma.

Controller method

We need a method on the IndexPage.java controller to handle the search for the user. This is the method that does the trick:

@RequestMapping("/search")
public String indexWithQuery(@RequestParam("query") String query,
                             @RequestParam("field") String field,
                             Model model) {
    if (field.equals("name")) {
        // TODO add search by name here.
    }
    model.addAttribute("field", field);
    model.addAttribute("query", query);
    return "index";
}

Let's understand what's important here:

@RequestMapping("/search") ties this method to the request that the form we added earlier will perform.
@RequestParam("query") String query and @RequestParam("field") String field bind the request params (the variables after ? on the URL) to Java variables we can use.

The rest of the code:

performs the search (not implemented yet);
returns the parameters the user selected/typed on the search form (seems reasonable to show this information on the filtered list of restaurants);
and redirects the user to the index page with the new information we just (not yet :) got. =P

Finally querying the Repository

Well, looks like we have to do the heavy work now, which is to find all the Restaurants containing a certain string on their names.

We do that with this huge and complicated code on the RestaurantRepository.java interface:

List<Restaurant> findAllByNameContaining(String query);

And now, by replacing that TODO we added earlier on the IndexPage.java controller with the following:

model.addAttribute("restaurants", restaurantRepository.findAllByNameContaining(query));

... your new search is working! Want to try?

How it works

It's quite simple, actually: Spring Data parses the method name based on certain criteria and creates a query for you. Here's how it goes for this example (findAllByNameContaining(String name)):

find determines that entities should be returned. Could also be read, query and get to the same effect. If it was count would return the number of entities.
All is ignored. Note that some keywords may be used here.
By indicates to the parser the start of the actual criteria.
Name tells Spring Data that there's a property called name on the underlying entity of this repository (Restaurant) that will be used as search criteria. In other words, there'll be a where clause in that property.
Containing specifies the operator for the where clause. If not provided, = is implied.
(String name) indicates the parameter that will be received in runtime to use as value on the where clause.

I explained, but it's pretty self explanatory, don't you think? Well, with that in mind, let's think of some other valid methods following the same structure:

findAllByCuisineNameContaining(String cuisine) returns Restaurants which cuisine contains the provided value/string. Notice we are querying Restaurants but using fields from the Cuisine entity because Spring Data traverses nested properties!
findAllByDeliveryFeeIsLessThanEqual(BigDecimal deliveryFee) returns Restaurants with delivery fee less than or equal the provided deliveryFee value. Notice the parameter type matches the entity's property type.

Now you have more options on your search:

Other valid methods:

countByCuisineName(String cuisine) to return the number of Restaurants with a given cuisine type.
findTopByCuisineNameOrderByDeliveryFeeAsc(String cuisine) to return the restaurant with the cheapest delivery fee of a given cuisine.

And their usage:

The repository with all the queries is not even a concrete class, there's no implementation on your code:

public interface RestaurantRepository extends JpaRepository<Restaurant, Long> {

    List<Restaurant> findAllByNameContaining(String query);

    List<Restaurant> findAllByCuisineNameContaining(String cuisine);

    List<Restaurant> findAllByDeliveryFeeIsLessThanEqual(BigDecimal deliveryFee);

    long countByCuisineName(String cuisine);

    Restaurant findTopByCuisineNameOrderByDeliveryFeeAsc(String cuisine);
}

You can find more information, including a list of supported keywords on the official documentation.

The example app

The working app is here (wait for Heroku to load the app, it takes a few seconds on the free tier).

Commits related to this post

Adds the search bar: d5a02bb
Adds search options and cuisine page: dd6793b commit.

DEV Community: Bruno Drugowick

What about that AI, the GPT thing? Will it really affect my profession in the future?

I'd never used GPT... until today!

I was just peacefully coding.

Hunn, maybe I could see what AI is all about.

Time is money. And money is what matters... for capitalism, at least

Who am I? Or who will I become?

Automatically update your GitHub Pages website with posts from dev.to

Important note

Introduction

Cut to the chase

1. Build your personal website

2. Create a script to get the posts

Thing to notice 1

Thing to notice 2

Thing to notice 3

3. List the posts in your website

4. Automate the task of updating your website

Thing to notice 1

Thing to notice 2

Conclusion

Distributed Tracing with Spring Cloud Sleuth and Zipkin - AQAP Series

The Demo

Description

Running

brunodrugowick / distributed-tracing-demo

A demonstration of the usage of Spring Cloud Sleuth and Zipkin to trace requests across Spring Boot services.

The trace

Zipkin server

AQAP Series

The most basic security for Spring Boot with Thymeleaf

Add the pom.xml dependency

Create the most basic security config ever

Additional stuff

CSRF protection

Logout link

Getting the logged user

AQAP Series

Three steps to extend a Spring Data JPA repository with your own code

What about an advanced search?

Let's prepare the app

Custom Repository Methods

Step 1: Create a new interface to hold the method declarations

Step 2: Make your Spring Data JPA repository extend your new interface

Step 3: Implement the custom method

Additional challenge

The example app

Commits related to this post

brunodrugowick / jpa-queries-blog-post

A demo project for a blog post about (Spring Data) JPA.

How do I secure this Spring Boot + Thymeleaf + Vue.js app?

Complete CRUD with Spring Boot, Vue.js, Axios

Bruno Drugowick ・ Feb 9 '20 ・ 4 min read

Using JPQL on orm.xml file with Spring Data JPA

Remember our JPQL?

Just put it on a orm.xml file!

The benefit

The example app

Commits related to this post

brunodrugowick / jpa-queries-blog-post

A demo project for a blog post about (Spring Data) JPA.

Complete CRUD with Spring Boot, Vue.js, Axios

Adding REST operations

The Role Form

New Edit and Delete buttons

The Vue.js Magic... again.

The app

brunodrugowick / spring-thymeleaf-vue-crud-example

Complete CRUD example project with Spring Boot, Thymeleaf, Vue.js and Axios.

AQAP Series

Spring Boot, Vue.js, Axios and Thymeleaf with Bootstrap in 4 commits

Commit #1 - Spring Initializr

Commit #2 - The base app

Commit #3 - The HTML templates for the entities

Commit #4 - The Vue magic

The app

brunodrugowick / spring-thymeleaf-vue-crud-example

Complete CRUD example project with Spring Boot, Thymeleaf, Vue.js and Axios.

AQAP Series

Beginners tag

Add the `pom.xml` dependency

`@Query` to the rescue