Criando novas APIs e visualizações no JHipster

1. Introdução

Neste tutorial, veremos como podemos criar uma nova API dentro de um aplicativoJHipster. Em seguida, integraremos essa API ao display front-end.

2. Aplicação de amostra

Para este tutorial, usaremos um aplicativo simples de livraria.

A livraria é construída como um monólito. Ele usaAngular para o front-end e tem uma única entidade chamadabook com os seguintes campos:

Título
Autor
Dados Publicados
Preço
Quantidade

JHipster automatically generates APIs and front-end views that provide simple operations for a book: visualizar, criar, editar e excluir.

Para este tutorial,we’ll add an API that lets a user purchase a book, junto com um botão no front-end que chama a nova API.

Vamos nos concentrar apenas na API e nos aspectos de front-end da compra. Não realizaremos nenhum processamento de pagamento, apenas uma validação mínima.

3. Alterações na inicialização do Spring

JHipster fornece umgenerator para criar novoscontrollers. No entanto, para este tutorial,we’ll manually create the API and associated code.

3.1. Classe de Recurso

A primeira etapa é atualizar a classeBookResource gerada. We add the new endpoint that the front-end code irá chamar:

@GetMapping("/books/purchase/{id}")
public ResponseEntity purchase(@PathVariable Long id) {
    Optional bookDTO = bookService.purchase(id);
    return ResponseUtil.wrapOrNotFound(bookDTO);
}

Isso cria um novo endpoint de API localizado em/books/purchase/{id}. A única entrada é oid do livro, e retornamos umBookDTO que refletirá o novo nível de estoque após a compra.

3.2. Interface e classe de serviço

Agora,we need to update the BookService interface to include a new purchase method:

Optional purchase(Long id);

Então, precisamos implementar o novo método na classeBookServiceImpl:

@Override
public Optional purchase(Long id) {
    Optional bookDTO = findOne(id);
    if (bookDTO.isPresent()) {
        int quantity = bookDTO.get().getQuantity();
        if (quantity > 0) {
            bookDTO.get().setQuantity(quantity - 1);
            Book book = bookMapper.toEntity(bookDTO.get());
            book = bookRepository.save(book);
            return bookDTO;
        }
        else {
            throw new BadRequestAlertException("Book is not in stock", "book", "notinstock");
        }
    }
    return Optional.empty();
}

Vejamos o que está acontecendo neste código. First, we look up the book by its id to confirm it exists. If it doesn’t, we return an empty Optional.

Se existir, garantimos que ele tenha um nível de estoque maior que zero. Caso contrário, lançamos umBadRequestAlertException. Embora essa exceção seja normalmente usada apenas na camada REST do JHipster, estamos usando-a aqui para demonstrar como retornar mensagens de erro úteis para o front-end.

Caso contrário, se o estoque for maior que zero, reduzimos em um, salvamos no repositório e retornamos o DTO atualizado.

3.3. Configuração de segurança

A alteração final necessária está na classeSecurityConfiguration:

.antMatchers("/api/books/purchase/**").authenticated()

Isso garante que as chamadas para nossa nova API sejam permitidas apenas por usuários autenticados.

4. Alterações Front-End

Agora vamos nos concentrar nas mudanças de front-end. JHipster creates a view for displaying a single book, and that’s where we’ll add our new purchase button.

4.1. Classe de serviço

Primeiro,we need to add a new method to the existing book.service.ts file. Este arquivo já contém os métodos para manipular objetos de livros, portanto, é um bom lugar para adicionar a lógica para nossa nova API:

purchase(id: number): Observable {
    return this.http
        .get(`${this.resourceUrl}/purchase/${id}`, { observe: 'response' })
        .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
}

4.2. Componente

Então,we need to update the component code in book.component.ts. vamos criar uma função que chama o novo método no serviço de livro Angular e, em seguida, ouve a resposta de volta do servidor:

purchase(id: number) {
    this.bookService.purchase(id).subscribe(
        (res: HttpResponse) => {
            this.book = res.body;
        },
        (res: HttpErrorResponse) => console.log(res.message)
    );
}

4.3. View

Finalmente,we can add a button to the book view que chama o novo método de compra no componente:

A imagem abaixo mostra a visualização atualizada no front-end:

Clicar no novo botãoPurchase resultará em uma chamada para nossa nova API e o front-end será atualizado automaticamente com o novo status do estoque (ou exibirá um erro se algo der errado).

5. Conclusão

Neste tutorial, vimos como criar APIs personalizadas no JHipster e integrá-las ao front-end.

Começamos adicionando a API e a lógica de negócios ao Spring Boot. Em seguida, modificamos o código de front-end para utilizar a nova API e exibir os resultados. Com apenas um pouco de esforço, fomos capazes de adicionar novas funcionalidades em cima das operaçõesCRUD existentes que o JHipster gera automaticamente.

E como sempre, o código está disponívelover on GitHub.

TOC

Criando novas APIs e visualizações no JHipster