SAP FIORI

Tutorial Básico
Uma das dificuldades para aprender soluções SAP é a falta de disponibilidade de
um ambiente dedicado para isso. No entanto, depois do advento do SAP Cloud
Platform, várias aplicações podem ser executadas usando a estrutura cloud da
SAP. As aplicações Fiori fazem parte dessa lista de aplicações.

Além disso, o SAP Cloud Platform disponibiliza uma conta de testes para todos
que querem criar suas próprias aplicações Fiori sem nenhum custo.

Vamos criar essa conta trial e criar uma aplicação SAP Fiori básica para você
entender os conceitos básicos do SAP Fiori & SAP Cloud Platform.
AO FINAL DESSE TUTORIAL, VOCÊ
TERÁ CONHECIMENTOS BÁSICOS
NAS SEGUINTES FERRAMENTAS:

SAP Cloud SAP Web IDE SAP UI5 /

Platform Open UI5
VAMOS
LÁ?

Pixelast | Design and Tech

CRIAR UMA CONTA TRIAL E ACESSAR O WEB IDE

PRIMEIRO PASSO: CRIAR UMA CONTA TRIAL

 

Acesse o link https://account.hanatrial.ondemand.com/

faça o seu cadastro e cria a sua conta.
 ACESSAR

SEGUNDO PASSO: ACESSAR O WEBIDE:

 Após a criação da sua conta, a tela inicial do SCP é a telaa seguir.
Vamos utilizar o WebIDE para criare nossa aplicação Hello World.
Clique no botão a esquerda SAP Web IDE:
ABRA O SAP WEB IDE E AGUARDE ATÉ A INICIALIZAÇÃO TERMINAR.
DESIGN AND PSYCHOLOGY
1. Ao iniciá-lo pela primeira vez, você verá uma tela inicial contendo mais
informações sobre o SAPWeb IDE.
2. Mude para a perspectiva Desenvolvimento, clicando no ícone com o símbolo
de códigoCOLOR
na barra lateral esquerda. FORM
Presentations are communication tools that Presentations are communication tools that

Agora você vê uma lista de pastas com uma entrada Workspace no lado
can be used as demonstrations and reports. can be used as demonstrations and reports.

esquerdo e um editor decódigo vazio no lado direito.

PLACEMENT SPACE
Presentations are communication tools that Presentations are communication tools that
can be used as demonstrations and reports. can be used as demonstrations and reports.

3. Crie seu projeto na pasta Workspace, escolhendo File - New Folder no menu
ou Ctrl + Alt + Shift + N. Digite, por exemplo, myProject como o nome da Ppasta.
ixelast | Design and Tech
 CRIE UM ARQUIVO DE CONFIGURAÇÃO DO
PROJETO NEO-APP.JSON
O arquivo neo-app.json contém todas as configurações do projeto para o
SAPWeb IDE e é criado na pasta raiz do seu projeto. É um arquivo no
formato JSON que consiste em várias chaves de configuração.

A configuração mais importantepara você configurar é o caminho em

que o runtime SAPUI5 está localizado ao iniciar o aplicativo.
COMO FAZER? DESIGN AND PSYCHOLOGY

Você faz isso usando a chave routes edefinindo uma matriz de objetos de
recursos. Para esse tutorial, são necessárias apenas duas entradas - uma que
configure o SAPUI5
COLOR para estar disponível com o caminho /resources FORM e outra que
configure osPresentations
recursosarede teste necessários
communication tools that para a integração do SAPareFiori
Presentations communication tools that

launchpad com o caminho /test-resources.

can be used as demonstrations and reports. can be used as demonstrations and reports.

Crie dois objetos de configuração que contenham um caminho, um destino e um

atributo de descrição com mais definições de configuração. O caminho e os
PLACEMENT SPACE
valores entryPath apontarão para o local no servidor em que os recursos SAPUI5
Presentations are communication tools that Presentations are communication tools that
serão armazenados.
can be used as demonstrations and reports. can be used as demonstrations and reports.

Pixelast | Design and Tech

 DES
O SAP Web IDE lê essas IGN AND
configurações P S Y C H O LaoOexecutar
automaticamente GY o
aplicativo. Você pode ver o arquivo de configuração inteiro no bloco de código
abaixo. Opcionalmente, você pode adicionar a chave welcomeFile para
configurar o ponto de entrada no seu aplicativo. Em aplicativos da web, esse é
geralmente o arquivo index.html
COLOR FORM
Presentations are communication tools that Presentations are communication tools that
can be used as demonstrations and reports. can be used as demonstrations and reports.
NOTA
Dependendo da versão do SAP Web IDE que você está usando, pode ser necessário configurar o projeto
para ser executado na versãosnapshot do SAPUI5; caso contrário, o aplicativo será iniciado com a versão
PLACEMENT
SAPUI5 fornecida com o SAP Web IDE. Geralmente, essa é a versão mais SPACE
recente lançada publicamente
para os clientes.
Presentations are communication tools that Presentations are communication tools that
Você pode verificar qual versão do SAPUI5 está carregada, abrindo as ferramentas
can be used as demonstrations and reports.
de depuração do
can be used as demonstrations and reports.
SAPUI5 com CTRL + SHIFT + ALT+ P. Se a versão for muito antiga para certos recursos do tutorial, você
deverá adicionar o atributo version à entrada de configuração de destino e definir o valor para snapshot.

Pixelast | Design and Tech

 Procedimento
1 2 3

Selecione o ícone  Abra o arquivo Cole o código

New File e digite recém-criado da abaixo no neo-
neo-app.json como estrutura da app.json e
o nome do arquivo. árvore no lado selecione Salvar:
esquerdo da tela.

neo-app.json
{ "welcomeFile": "index.html", "routes": [ { "path": "/resources", "target": { "type": "service",
"name": "sapui5", "version": "snapshot", "entryPath": "/resources" }, "description": "Explicame
Online" }, { "path": "/test-resources", "target": { "type": "service", "name": "sapui5",
"entryPath": "/test-resources" }, "description": "Explicame Online" } ]}
 CRIE UM ARQUIVO INDEX.HTML

Um arquivo index.html minimalista é necessário para testar aconfiguração

do projeto. Este arquivo contém a inicialização do SAPUI5 e um controle
sap.m.Text que exibe o texto "SAPUI5 foi carregado com sucesso!".
 Procedimento
1 2 3 3
        
Escolha o ícone New    Selecione a pasta Cole o código Crie um novo
Folder na barra de recém-criada e crie (disponível na arquivo chamado
ferramentas do um novo arquivo próxima página) no main.js e cole o
cabeçalho e digite index.html dentro dela, arquivo index.html código nele (copie
src como o nome escolhendo o ícone recém-criado e da próxima página)
da pasta. New File. selecione Salvar:
CÓDIGO PARA COPIAR
D E SEI G
COLAR
N AND PSYCHOLOGY
3. index.html

<!DOCTYPE html>
COLOR http-equiv="X-UA-Compatible" content="IE=edge"><meta
<html><head><meta FORM
charset="utf-8"><title>Explicame
Presentations are communicationOnline</title>
tools that Presentations are communication tools that
<scriptid="sap-ui-bootstrap"
can be used as demonstrations and reports. can be used as demonstrations and reports.

src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"data-sap-ui-
theme="sap_belize"data-sap-ui-libs="sap.m"data-sap-ui-compatVersion="edge"              
data-sap-ui-async="true"               data-sap-ui-
PLACEMENT
onInit="module:my/app/main"               data-sap-ui- SPACE
resourceRoots='{"my.app":"./"}' ></script></head>
Presentations are communication tools that Presentations are communication tools that
can be used as demonstrations and reports. can be used as demonstrations and reports.
<body class="sapUiBody" id="content"></body>
</html>

Pixelast | Design and Tech

 DESIGN AND PSYCHOLOGY
CÓDIGO PARA COPIAR E COLAR
4. main.js
 
sap.ui.define(['sap/m/Text'],
COLOR
function(Text) {
FORM
Presentations are communication tools that Presentations are communication tools that
    new Text({        text: "SAPUI5 foi carregado
can be used as demonstrations and reports. can be used as demonstrations and reports.
com sucesso!!"   
}).placeAt("content");});

PLACEMENT SPACE
Presentations are communication tools that Presentations are communication tools that
can be used as demonstrations and reports. can be used as demonstrations and reports.

Pixelast | Design and Tech

 EXECUTE A APLICAÇÃO

O SAP Web IDE vem com recursos de teste integrados que permitem
executar o aplicativo em um servidor central sem precisar configurar
nenhuma infraestrutura adicional. Você pode executar o aplicativo
selecionando o arquivo src / index.html e clicando no botão Run na barra
de ferramentas do cabeçalho.
O aplicativo será executado em um servidor central e uma ferramenta de teste
que permite configurar o tamanho da tela e a orientação do dispositivo. Esse
recurso pode ser usado para testar aplicativos direcionados especificamente
para dispositivos móveis, tablets e computadores. Você pode alterar a
resolução e a orientação na barra de cabeçalho com muita facilidade.

Se você não quiser executar o aplicativo na ferramenta de teste, poderá

ajustar as Configurações de Execução para o projeto:

Clique com o botão direito do mouse em qualquer arquivo no projeto e

selecione Run --> Run Configurations
 
Escolha + e selecione Web Application para adicionar uma nova configuração
de execução.
 
Para salvar a configuração e executar seu projeto, escolha Save and Run.
 

Pronto! Se a mensagem apareceu corretamente para você,

você acaba de criar a sua primeira aplicação Fiori – SAP UI5.
 JUNTE-SE A NÓS!

Acompanhe as novidades e deixe seu

comentário com sugestões para
novos conteúdos gratuitos
em nossas redes sociais.
 GANHE
DESCONTO!
Clique aqui e Increva-se
agora mesmo em nosso
curso na Udemy com 10 %
DE DESCONTO.

Além das aulas já

disponíveis, periodicamente
iremos disponibilizar novas
aulas com conteúdo de
maior complexidade.