Irei demonstrar neste artigo como utilizar o ambiente de demonstração do SAP Gateway Demo System e conectar a sua conta da SAP Cloud para utiliza-lo em suas aplicações Fiori.
Para isto, o primeiro passo é criar uma conta trial no SAP Cloud Platform caso ainda não tenha, através deste link https://account.hanatrial.ondemand.com/.
O SAP Gateway Demo System ES5 é um sistema SAP Netweaver de demonstração que pode ser utilizado para consumir alguns serviços de modelo hospedados neste sistema. Entre os modelos temos o GWSAMPLE_BASIC e outros. Os serviços são geralmente baseados no Enterprise Procurement Model, que contem entidades como BusinessPartner, Contact, Product, SalesOrder e SalesOrderLineItem.
- Acesse a URL https://register.sapdevcenter.com/SUPSignForms/, para se registrar no SAP Gateway demo system;
- Na tela de login informe suas credenciais do SAP Cloud Patform;
- Após logar confirme a licença e clique em Register;
- Talvez seja necessário informar mais algumas informações sobre sua conta, informe se necessário seu Nome email aceite os termos e clique em Register;
- Após será exibida uma tela com seu UserID e um password temporário. Estes dados também são enviados para seu email;
- Para realizar o login na plataforma acesse a URL https://sapes5.sapdevcenter.com/.;
- No primeiro acesso informe o usuário e senha conforme enviado por email, a senha inicial deverá ser alterada no primeiro login;
Para realizar a conexão do ambiente do SAP Gateway demo system a sua conta do SAP Cloud é necessário acessar a plataforma Neo Trial e depois o menu Connectivity / Destinations.
Após o passo acima você pode importar os dados da Destination fazendo o download do arquivo abaixo ES5.txt. e posteriormente importando em seu ambiente através da opção Import Destination, conforme figura acima.
Caso prefira, poderá também informar os dados manualmente através da opção New Destination. Não se esqueça de informar seu usuário e senha do ambiente SAP Gateway Demo System em ambas as opções.
As propriedades adicionais são utilizadas para:
- WebIDEEnabled – Deixar o destination visível para a WebIDE;
- WebIDESystem – É o System ID que o serviço esta utilizando;
- WebIDEUsage – É possível informar múltiplas utilizações para a destination, separadas por virgula;
Caso deseje fazer um teste e utilizar este destination na WebIDE, siga os passos abaixo:
- Crie uma nova pasta em seu workspace chamada check por exemplo;
- Dentro da pasta crie uma nova chamada webapp;
- Crie dentro da pasta webapp um arquivo chamado index.html;
- Copie o código abaixo para o arquivo index, salve e execute;
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>openSAP - Evolved Web Apps with SAPUI5</title>
<link rel="stylesheet" type="text/css" href="../../resources/sap/ui/core/themes/sap_belize/library.css">
<script id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
src="../../resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize">
</script>
<script>
// check javascript
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("web").innerHTML = "Ready!";
});
// check ui5
sap.ui.getCore().attachInit(function() {
new sap.m.Title({
text: "Ready!"
}).placeAt("ui5");
document.getElementById("go").style.display = "block";
});
</script>
</head>
<body class="sapUiBody sapUiSmallMargin sapUiForceWidthAuto">
<h1>Evolved Web Apps With SAPUI5</h1>
<hr/>
<h2>Pre-flight Check</h2>
<ul>
<li><p><strong>Web Page:</strong></p>
<p id="web"></p></li>
<li><p><strong>SAPUI5:</strong></p>
<p id="ui5"></p></li>
<li><p><strong>Backend System:</strong></p>
<iframe id="es5" src="/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/VH_CountrySet('DE')?$format=xml" style="border:none; display: block"></iframe>
</li>
</ul>
<h2><span id="go" style="display: none; color: forestgreen">→ All systems go – ready for take-off!</span></h2>
</body>
</html>
Insira um HTML5 Application Descriptor em seu projeto, para isto clique com o botão direito sobre a pasta principal, escolha a opção New/HTML5 Application Descriptor. Será criado um novo arquivo chamado neo-app.json.
Veja abaixo como deve estar a estrutura do projeto e veja o arquivo neo-app.json recém criado.
Edite o arquivo neo-app.json para que fique conforme abaixo:
{
"welcomeFile": "index.html",
"routes": [
{
"path": "/resources",
"target": {
...
"description": "SAPUI5 Test Resources"
},
{
"path": "/ES5",
"target": {
"type": "destination",
"name": "ES5"
},
"description": "SAP Gateway Demo System"
}
]
}
Salve e execute seu projeto se tudo estiver ok será exibida a seguinte tela:
Com isto você terá sua conta no SAP Gateway criada e uma aplicação de exemplo no SAP Cloud conectando a este sistema. Você pode notar no arquivo index.html dentro do iframe a chamada ao serviço odata GWSAPLE_BASIC que está hospedado no SAP Gateway Demo System.
<iframe id="es5" src="/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/VH_CountrySet('DE')?$format=xml" style="border:none; display: block"></iframe>
Aproveitem e se inscreva no meu canal no you tube para mais exemplos e tutoriais e não deixe de compartilhar este artigo em suas redes sociais.
https://www.youtube.com/channel/UCl8-9OTpj56YYzxmd3z7lzQ
Este material foi desenvolvido com base no conteúdo do curso da opensap https://open.sap.com/courses/ui52
