|
May 24, 2017
|

AngularJS consumindo uma API Restful com Java

Introdução

Neste post, modificaremos a aplicação de exemplo do artigo Criando uma aplicação com AngularJS para realizar a comunicação entre o AngularJS e uma API Restful. Para isso, construiremos o servidor usando Java e o framework Jersey.

Vamos utilizar o Java por que essa linguagem de programação é a mais usada no mundo todo, principalmente para backend, apps web e mobile

Configurando o projeto

Como se trata de um projeto Java, o Maven será usado para gerenciar as dependências das bibliotecas. Para iniciar, adicionaremos as dependências do Jersey ao arquivo pom.xml (o arquivo completo está no repositório):

<properties>
    <jersey.version>2.26-b03</jersey.version>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.glassfish.jersey</groupId>
            <artifactId>jersey-bom</artifactId>
            <version>${jersey.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

<dependencies>
    <dependency>
        <groupId>org.glassfish.jersey.containers</groupId>
        <artifactId>jersey-container-servlet-core</artifactId>
    </dependency>
    <dependency>
        <groupId>org.glassfish.jersey.media</groupId>
        <artifactId>jersey-media-moxy</artifactId>
    </dependency>
</dependencies>

Agora precisamos criar o arquivo src/main/webapp/WEB-INF/web.xml:

<web-app id="WebApp_ID" version="2.4"
         xmlns="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>example</display-name>

    <servlet>
        <servlet-name>Jersey Web Application</servlet-name>
        <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
        <init-param>
            <param-name>jersey.config.server.provider.packages</param-name>
            <param-value>com.gabrielfeitosa.example</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Jersey Web Application</servlet-name>
        <url-pattern>/api/*</url-pattern>
    </servlet-mapping>
</web-app>

Na configuração acima, o Jersey mapeará os serviços que estão no pacote com.gabrielfeitosa.example. De acordo com a configuração, eles estarão acessíveis através da URI /api/<path do serviço> . Bem simples, não?

Criando a API

Uma vez que o projeto está configurado, criaremos os serviços para listar e cadastrar os usuários. Para isto, vamos desenvolver a classe com.gabrielfeitosa.example.controller.UserController:


@Path("/user")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
public class UserController {

    private static List<User> list = Arrays.asList(
            new User("User 1", "123456"),
            new User("User 2", "659849"),
            new User("User 3", "65498987")
    );

    @GET
    public List<User> getAll(){
        return list;
    }

    @POST
    public User save(User user){
        list.add(user);
        return user;
    }
}

Na classe acima, perceba as seguintes anotações:

  • @Path(“/user”): definimos que o path desses serviços será user, ou seja, sempre que o endereço for /api/user o UserController será o responsável pelo tratamento da requisição;
  • @Consumes e @Produces: o tráfego será realizado utilizando objetos JSON;
  • @GET: mapeia a requisição HTTP GET;
  • @POST: mapeia a requisição HTTP POST e recebe um objeto User.

A serialização dos objetos entre JSON e a classe User é realizada de forma transparente por meio da biblioteca jersey-media-moxy.

Agora o servidor já está pronto para ser consumido pelo frontend. A implementação não poderia ser mais fácil, concorda?

Alterando o frontend

Estamos prontos para modificar a aplicação desenvolvida no post anterior. Copiaremos os fontes para dentro do diretório src/main/webapp e só será necessário realizar mudança no arquivo app.js.

A primeira alteração será carregar os usuários cadastrados no servidor para exibi-los na tela. Eles estão acessíveis através da URI /api/user. O angularjs possui o $http para realizar chamadas a um endpoint de forma descomplicada. Vamos ver como ficará o novo código:

Como era:

$scope.users = [
                {nome: 'Fulano', senha: '1234'},
                {nome: 'Maria', senha: '12345'},
                {nome: 'Zé', senha: '12345678'}
            ];

Nova implementação:

$http.get('api/user').then(function (response) {
    $scope.users = response.data;
});

A segunda alteração deverá ser realizada no método de cadastro do usuário. Em vez de adicionar o novo usuário direto no array, ele será enviado para o servidor através de um POST para a URI /api/user.

Como era:

$scope.save = function () {
                $scope.users.push($scope.user);
                $scope.user = {username: '', password: ''};
                $scope.statusPassword = {};
            };

Nova implementação:

$scope.save = function () {
    $http.post('api/user', $scope.user).then(function (response) {
        $scope.users.push(response.data);
    });
    $scope.user = {username: '', password: ''};
    $scope.statusPassword = {};
};

Com essas pequenas alterações, o sistema se comunicará com o servidor e os dados persistirão.
Para rodar a aplicação, você precisa ter o maven instalado e executar o comando mvn tomcat:run.

Ahhh! O código fonte completo está no github. =)

Se gostou do nosso artigo, curta, compartilhe, marque os amigos. Vamos compartilhar o conhecimento!!

Abraços e até a próxima semana!

Comments

More articles

Afinal, é possível criar app sem saber programação?

November 16, 2018

Como transformar um website em aplicativo?

November 14, 2018

Aplicativos: O que conhecer antes de criar um

November 13, 2018

É possível instalar aplicativos Android no Windows?

November 9, 2018