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.
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.
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.
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!
Muito bom!