Skip to Content
Author's profile photo Cristiano Marques

SAPUI5 e Fiori: Primeiros Passos Práticos

Olá,

o objetivo deste documento é explicar em pt-BR os primeiros passos práticos para quem quer botar a mão no Fiori.

Imagino que você já tenha alguns conceitos breves, o que fez você chegar até aqui. Para iniciar o desenvolvimento propriamente dito, é necessário criar usuários em alguns sites diferentes. Não são usuários novos, na prática é ativar o login nestes sites para seu usuário do SCN 🙂 .

Lembre-se de sempre usar o navegador Google Chrome, que é a recomendação da SAP para os sites abaixo.

1 – Navegue nas demonstrações

Primeiro veja o Fiori em ação a partir do ponto de vista do usuário. Ao clicar em “see it in action”, é exibido o Fiori Lauchpad com programas pré instalados. Imagine que o arquivo executável do programa SAP GUI agora foi substituído por um link na web ou outro aplicativo, ambos exibindo o Fiori Launchpad. Experimente navegar em alguns aplicativos para se familiarizar com o estilo dos programas.

SAP Fiori, Demo Cloud Edition

2 – crie sua conta TRIAL para o Fiori Lauchpad

O lauchpad é aberto com um usuário demonstração. Mas clicando em “customize and extend”, depois em “get stated” você pode criar um usuário trial que dura por 90 dias, para integrar seu lauchpad com o Hana Cloud Platform, que é onde ficarão hospedados seus programas UI5.

customize and extend.png

Com o usuário trial também é possível editar e personalizar os temas do lauchpad.

my theme.png

3- crie sua conta de desenvolvedor FREE  para o SAP HANA Cloud Platform Cockpit

SAP HANA Cloud Platform Cockpit, ou HCP, é o ambiente que se propõe a concentrar toda a infraestrutura necessária para se ter um ambiente: é o servidor dos programas front-end, contém os serviços de conexão e integração com o back-end, e tem as ferramentas de desenvolvimento. Crie uma conta no site.

Cloud Cockpit

sap hcp.png

4- Ative e abra a ferramenta de desenvolvimento para UI5 – WebIDE

Clique em serviços, encontre o componente Web IDE. Clique nele, e depois clique em habilitar.

ativar webide.png

Depois de habilitado, clique em “open SAP WEB IDE” para abrir a ferramenta de desenvolvimento.

abrir webide.png

o Web Ide vai abrir em uma nova aba. Salve o link nos favoritos para acesso direto da próxima vez.


webide inicial].png

Voilá.


5- Hello World – criando o primeiro programa

Na seção “create a project”, clique em “quick start with layout editor”. Será gerado um programa novo bem simples, contendo uma tabela com 3 colunas.

No lado esquerdo da tela você tem a árvore do programa contendo seus n arquivos texto (html, xml, js, etc…). A área central é dividida em 3: na esquerda a biblioteca de componentes para arrastar e  soltar na tela do meio. A área do meio é como seu programa efetivamente vai ser exibido na tela. Na área da direita são exibidos as propriedades dos componentes que estão na tela do programa.

quick start app.png

Para ver como a ferramenta funciona, arraste para tela do meio alguns componentes tradicionais (botão, combobox, radiobutton), e altere suas propriedades.

quick components.png


Quem já mexeu em ferramentas como Delphi ou Visual Basic vai se identificar com esse formato de programar.


6- Conheça e explore os componentes

Pronto, agora é começar a conhecer os componentes e como eles funcionam. A SAP tem um site só para mostrar os componentes em funcionamento, explicar suas propriedades e mostrar o código fonte.

SAPUI5 Explored

button overview.png

button samples.png

Para cada componente, o código fonte pode ser visualizado. Agora começa a necessidade de ter os conhecimentos em HTML e JavaScript. Aqui encerra o blog de primeiros passos, boa prática e boa sorte!

button code.png

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo RAYSON TOME CARNEIRO
      RAYSON TOME CARNEIRO

      Muito bom!