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.

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

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

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.

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

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

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.

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

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

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!