Skip to end of metadata
Go to start of metadata

Integrar com um Serviço REST

A integração da IDE com serviços web é realizada de forma direta por meio do serviço $http. Este serviço permite suporte nativo a requisições GET, POST, PUT, DELETE, PATCH e as requisições são feitas via AJAX. O código apresenta a sintaxe do serviço $http.


Sintaxe do serviço $http do AngularJS

1
2
3
4
5
6
7
$http({
method: 'GET', url: '/someUrl'
}).then(function successCallback(response) {
// Invocado automaticamente caso haja sucesso
}, function errorCallback(response) {
// Invocado automaticamente caso haja erro
});

O detalhamento a seguir ajuda a compreender melhor a sintaxe do serviço $http:

  • method: Qual tipo de requisição será feita?

  • url: Qual é a url da requisição?

  • successCallback: Função que é chamada quando a requisição foi processada com sucesso.

  • errorCallback: Função que é chamada quando há um erro no processamento da requisição.

  • response: Objeto que contém os dados da resposta da requisição.

O serviço $http fornece funções pré-definidas para requisições de acordo com o tipo da requisição:

  • $http.get('/someUrl', config).then(successCallback, errorCallback);

  • $http.delete('/someUrl', config).then(successCallback, errorCallback);

  • $http.post('/someUrl', data, config).then(successCallback, errorCallback);

  • $http.put('/someUrl', data, config).then(successCallback, errorCallback);

 

Dessa forma  a integração consiste de dois passos:

a) Criar um código para comunicar com serviço web.

b) Desenvolver uma página para consumir o serviço.

 

Para testar a integração, crie um novo projeto usando o template "Hello World". Em seguida, crie uma página HTML denominada exemploCronApp no diretório “webcontent/views/admin” com o código exibido abaixo. A parte inferior do código apresenta a comunicação com o serviço web utilizando o serviço $http do AngularJS e a parte superior faz referência a este código para consumir e exibir as informações de recuperadas.

 

Sintaxe do serviço $http do AngularJS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<style>
table, td, tr{
    border: dashed   1px black;
    background-color: grey;
    color: white;
    font-size: 1.1em;
}
{
    background-color: blue;
}
 
</style>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
    <tr class="n">
        <td class="n">Nome</td>
        <td class="n">Pais</td>
        <td class="n">Cidade</td>
        <td class="n">Idade</td>
    </tr>
  <tr ng-repeat="x in names">
    <td>{{x.Nome}}</td>
    <td>{{x.Pais}}</td>
    <td>{{x.Cidade}}</td>
    <td>{{x.Idade}}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl'function($scope, $http) {
  .then(function (response) {$scope.names = response.data.informacao;});
});
</script>
</body>
</html>

Adicione também um arquivo Javascript no diretório “webcontent/views/admin” chamado dados.js que seria o arquivo externo onde contém os dados que iremos consumir via AJAX e cole o código abaixo:

Sintaxe do serviço $http do AngularJS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
        "informacao":
        [
        {"Nome":"Antonio Moreno Taquería","Cidade":"México D.F.","Pais":"Mexico""Idade":"20"},
        {"Nome":"Around the Horn","Cidade":"London","Pais":"UK""Idade":"20"},
        {"Nome":"B's Beverages","Cidade":"London","Pais":"UK""Idade":"20"},
        {"Nome":"Berglunds snabbköp","Cidade":"Luleå","Pais":"Sweden""Idade":"20"},
        {"Nome":"Blauer See Delikatessen","Cidade":"Mannheim","Pais":"Germany""Idade":"20"},
        {"Nome":"Blondel père et fils","Cidade":"Strasbourg","Pais":"France""Idade":"20"},
        {"Nome":"Bólido Comidas preparadas","Cidade":"Madrid","Pais":"Spain""Idade":"20"},
        {"Nome":"Bon app","Cidade":"Marseille","Pais":"France""Idade":"20"},
        {"Nome":"Bottom-Dollar Marketse","Cidade":"Tsawassen","Pais":"Canada""Idade":"20"},
        {"Nome":"Cactus Comidas para llevar","Cidade":"Buenos Aires","Pais":"Argentina""Idade":"20"},
        {"Nome":"Centro comercial Moctezuma","Cidade":"México D.F.","Pais":"Mexico""Idade":"20"},
        {"Nome":"Chop-suey Chinese","Cidade":"Bern","Pais":"Switzerland""Idade":"20"},
        {"Nome":"Comércio Mineiro","Cidade":"São Paulo","Pais":"Brazil""Idade":"20"} ]
}

Por fim, click no botão "Rodar" para executar a aplicação e faça o login com o usuário “admin” e a senha “admin”, acesse a página exemploCronApp.html substituindo “/#/home” por “/views/admin/teste.html” na URL da aplicação. 

 Além da forma de integração direta, por meio do serviço $http, é possível integrar uma aplicação desenvolvida na CronApp IDE com sistemas web externos, estabelecendo as conexões necessárias na camada Java da aplicação (backend). Nesta seção será apresentado a integração com qualquer WebService através da URL. 

 Para isso, criaremos uma classe com o nome HttpExemplo que deve ser criada em qualquer diretório configurado como “src”. Nessa classe configuraremos a conexão com um WebService para realizar uma consulta a um conjunto de dados em json de um determinado projeto. Para estabelecer a conexão com o WebService, é necessário fornecer a URL do sistema.

Veja abaixo a classe HttpExemplo:

 

Exemplo completo de integração com o JIRA

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
package security.dao;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
/**
 *
 * @author techne
 */
public class HttpExemplo {
    private final String USER_AGENT = "Mozilla/5.0";
  
    public static void main(String[] args) throws Exception {
  
        HttpExemplo http = new HttpExemplo(); // CRIA O OBJETO DA CLASSE, POIS O MAIN NÃO ENXERGA O CONTEXTO GLOBAL, SÓ O LOCAL.
  
        System.out.println("Testing 1 - Send Http GET request");
        http.sendGet(); // INVOCA O METODO QUE TRÁS OS VALORES.
    }
    // O ACESSO É FEITO VIA METODO GET
    private void sendGet() throws Exception {
  
        String url = "http://www.w3schools.com/angular/customers.php"; // URL DE ACESSO AO WEB SERVICE --  INFORME A SUA
  
        URL obj = new URL(url);  // INSTANCIA A CLASSE QUE VAI SER UTILIZADA PARA FAZER A CONEXÃO
        HttpURLConnection con = (HttpURLConnection) obj.openConnection();  // OBTÉM A CONEXÃO E SALVA NA VARIAVEL 'con'
     
        con.setRequestMethod("GET"); // INFORMA QUAL METODO SERÁ USADO (NO NOSSO CASO O GET)
     
        con.setRequestProperty("User-Agent", USER_AGENT); // ADICIONA A REQUISIÇÃO AO CABEÇALHO -- (propriedade geral de request)
  
    // A PARTIR DAQUI INICIA A PARTE DE ENTRADA DE DADOS
        int responseCode = con.getResponseCode();
        System.out.println("\nSending 'GET' request to URL : " + url);
        System.out.println("Response Code : " + responseCode);
  
        BufferedReader in = new BufferedReader(new InputStreamReader(con.getInputStream()));
        String inputLine;
        StringBuffer response = new StringBuffer();
  
    // ABAIXO SE OBTÉM OS DADOS LINHA A LINHA ATÉ NÃO HOUVER MAIS DADOS A RECEBER DO WEBSERVICE
        while ((inputLine = in.readLine()) != null) {
            response.append(inputLine);
        }
        in.close();
  
        System.out.println(response.toString()); // NO FINAL IMPRIME O ARQUIVO JSON, APARTIR DAI VOCÊ PODE CONVERTER OS DADOS DE JSON PARA OBJETO.
  
    }     
}

Depois é só rodar a classe criada:

Figura 1 - Rodando a classe


Por fim aparecera no log da IDE o JSON que você pode usar para consumir.


2.jpg

Figura 2 - log da IDE


Nesta página

 

  • No labels