SAP Fiori Development from Scratch

Public
Jairo Canuto
SAP NetWeaver / HANA / Fiori UX Certified Architect
SAP Fiori Development from scratch

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 2Public
Introdução
Desenvolvimento de aplicações SAP Fiori partindo do zero.
Nesta sessão estaremos apresentando todos os 5 passos para se desenvolver uma aplicação
SAP Fiori: Define – Discover – Design – Develop – Deploy.
Para cada um desses passos devemos identificar a ferramenta ou metodologia necessária a ser
utilizada. Serão abordados temas / ferramentas como: Design Thinking, Build/Splash, SAP
HCP, SAP Web IDE, SAP NetWeaver Gateway, SAP Fiori, SAPUI5, OData Services, etc.
Estaremos abordando todos estes temas no contexto End-to-End de um projeto, deste
momento zero, quando são analisadas as necessidades de um cliente ou requisitos de uma
solução, passando pela pré-venda, desenho da solução, definição da arquitetura da solução,
desenvolvimento, deploy.

Agenda
• Levantamento de requisitos
• Identificação da melhor solução: RDS ou desenvolvimento do zero.
• Ferramentas e Metodologias a serem utilizadas
• Preparação do ambiente
• Arquitetura da Solução
• Desenvolvimento
• Deploy

Levantamento de requisitos
Nesta fase devem ser indentificadas as necessidades do cliente, a partir das quais
teremos subsídios para entregar a melhor solução.
Além disso, precisamos levantar algumas informações sobre os produtos ou
soluções utilizadas pelo cliente, bem como suas versões, por exemplo:
- SAP ERP: Versão, Enhancement Package (EHP) e Support Package (SP).
- Database: Tipo de Banco de Dados.
- Software Component: versão do Software Component relacionado ao RDS.

Identificação da melhor solução: RDS ou desenvolvimento do zero.
A partir das informações levantadas, podemos identificar se existe algum RDS que
atenda as necessidades do cliente. Além disso, a partir das soluções / produtos
utilizados e suas versões, caso exista um RDS, poderemos verificar se o mesmo é
aplicável ao ambiente do cliente.
- https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/
OBS: No caso a ser apresentado, o RDS não se aplicava ao ambiente do cliente,
então decidimos apresentar um proposta de solução de desenvolvimento do zero.

Ferramentas e Metodologias a serem utilizadas

Conseguimos implementar todas as etapas do Design Thinking, mas algumas delas mais
superficialmente, devido à resistência do cliente.
Implementamos as seguintes etapas:
• Pesquisas com usuários
• Levantamento das necessidades e desejos de cada usuário envolvido.
• Definição de escopo
• Prototipação
• Validação
• Implementação (Importar o Protótipo na SAP Web IDE)

Após aplicação da metodologia Design Thinking para criação de um modelo de User Experience
(UX), partimos para a definição das ferramentas a serem utilizada.
Decidimos utilizar as ferramentas abaixo:
- Build (Splash): Prototipação
- SAP HANA Cloud Platform Trial (HCP Trial): Plataforma de serviços
- SAP Web IDE: Ferramenta de desenvolvimento
- SAP HANA Cloud Connector: Integração entre HCP e ambiente do cliente (on-premise).
- SAP NetWeaver Gateway: Publicação dos serviços e deploy das aplicações
- SAP ECC: Desenvolvimento dos Serviços - SEGW

Preparação do ambiente
Build (Splash): Prototipação
Utilizamos a ferramenta Build (Splash), que pode ser acessada a partir do link
abaixo:
- https://www.build.me/splashapp/
Protótipo criado:
- https://standard.build.me/api/projects/d67e0679771713080c2dbf08/prototype/snap
shot/latest/index.html

SAP HANA Cloud Platform Trial (HCP Trial): Plataforma de serviços
- https://account.hana.ondemand.com/
Principais configurações necessárias:
• Connectivity > Destinations
• Services > SAP Web IDE
SAP HANA Cloud Portal (SAP Fiori Launchpad)

SAP Web IDE: Ferramenta de desenvolvimento

SAP Web IDE: Ferramenta de desenvolvimento
- https://webide-s0003759941trial.dispatcher.hanatrial.ondemand.com/
Importamos o protótipo desenvolvido no Build, no SAP Web IDE. Existe um procedimento a ser
executado previamente, para que o SAP Web IDE consiga conectar o Build.
Segue abaixo link com configurações necessárias:
- https://blogs.sap.com/2016/09/30/howto-import-build-prototype-into-web-ide/

SAP HANA Cloud Connector: Integração entre HCP e ambiente on-premise

SAP HANA Cloud Connector: Integração entre HCP e ambiente on-premise
SAP HANA Cloud Connector (HCC) prove integração necessária, para aplicativos rodando no
SAP HANA Cloud Platform (HCP), estejam conectados a sistemas on-premise existentes.
O HCC funciona como agente local dentro da rede segura da empresa e atua como um proxy
reverso entre as soluções on-premise e o HCP.
Segue link de documento com informações para baixar, instalar e configurar o HCC, bem como,
as configurações necessárias também no HCP para estabelecer a conexão:
- http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/1019847e-e2aa-3210-6f97-
93fbd76947ef?QuickLink=index&overridelayout=true&59983513326533

Arquitetura da Solução
SAP NetWeaver Gateway: Publicação dos serviços e deploy das aplicações

SAP NetWeaver Gateway: Publicação dos serviços e deploy das aplicações
Optamos pela utilização da arquitetura “Central Hub Deployment”.
Neste caso, as funcionalidades do SAP Gateway Server são disponibilizadas em um servidor
dedicado (Hub System). A implementação dos serviços ocorre no back-end onde eles são
também registrados e posteriormente são ativados ou publicados no Gateway.
Para isso, componente (AddOn) IW_BEP deve ser instalado no back-end e os componentes
GW_CORE e IW_FND no Gateway. As versões SAP NetWeaver Gateway 7.4 ou superior, já
contém todos estes componentes.

SAP ECC: Desenvolvimento dos Serviços – SEGW

Arquitetura das aplicações SAP Fiori
As aplicações SAP Fiori utilizam a biblioteca SAPUI5, a qual é baseada no modelo MVC (Model
- View - Controller):
• Model: Gerenciar os dados do aplicativo
• View: Definir e processar a UI
• Controller: Manipular a view e o model

Tipos de aplicações SAP Fiori

SAP Fiori Transactional
Applications

Desenvolvimento
SAP NetWeaver Gateway: OData Services
O desenvolvimento dos serviços OData são realizados no através da transação SEGW do SAP ECC (Back-end).
Através da transação SEGW é necessário efetuar as 4 etapas abaixo para criar um serviço Odata:
• Definir ou importar o modelo de dados
• Gerar os objetos de runtime
• Implementar operações dos serviços (CRUDQ)
• Registar e ativar os serviços
Utilizamos RFCs para geração dos modelos dos serviços, conforme mostra o link abaixo:
- https://blogs.sap.com/2012/10/26/step-by-step-guide-to-build-an-odata-service-based-on-rfcs-part-1/

Desenvolvimento
SAP NetWeaver Gateway: OData Services
• Criação das Entities
• Criação das Entity Sets
• Definição das associações entre
entities (Association Sets)
• Mapeamento dos métodos CRUDQ
às respectivas RFCs
• Definição de campos chave e filtros
• Geração de objetos runtime
• Implementação das RFCs

Desenvolvimento
SAP Fiori Templates (SAP Web IDE)
Iniciamos o desenvolvimento da aplicação desenvolvida, através de um template disponível na
ferramenta SAP Web IDE.
• SAP Fiori Worklist Application
• List Report Application
• SAP Fiori Master-Detail
Application
• SAPUI5 Application
• CRUD Master-Detail Application

Desenvolvimento
Criando um Projeto a partir de um serviço do SAP Gateway
Identificar inicialmente a fonte (Gateway Server) onde o serviço está publicado, selecionar o
serviço e posteriormente preencher algumas campos de “Application Settings” e “Data Binding”:

Desenvolvimento
Estrutura do Projeto SAP Fiori
Estrutura do Projeto SAP Fiori com seus principais diretórios: raiz, webapp, view e controller:

Desenvolvimento
SAP Web IDE – Layout Editor
Utilizamos o Editor de Layout do SAP Web IDE para construção das views:

Desenvolvimento
Fontes de consulta – Objetos e Controles Fiori – SAPUI5:
Uma importante fonte de consulta e exemplos para auxiliar no desenvolvimento SAP Fiori.
SAPUI5 Explored:
- https://sapui5.hana.ondemand.com/explored.html

Deploy
SAP HANA Cloud Platform
Efetuar o deploy da aplicação no SAP HANA
Cloud Platform:
• Preencher informações solicitadas
• Publicar aplicação no SAP Fiori Launchpad
• Adicionar Tile ao catálogo / grupo do usuário

Deploy
SAPUI5 ABAP Repository
Efetuar o deploy da aplicação no SAPUI5 ABAP
Repository:
• Efetuar logon no ambiente Gateway
• Será solicitada uma request workbench
• Aplicação ficará disponível no caminho (SICF):
 /default_host/sap/bc/ui5_ui5/sap/

30© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Obrigado / Thank you!valuation for
Thanks for attending this SAP TechEd && d-code session.
Jairo Canuto
SAP NetWeaver / HANA / Fiori UX Certified Architect
M: +55 11 99172 5065
Email: jcanutojr@gmail.com
br.linkedin.com/in/jcanutojr

SAP Fiori Development from Scratch

Mais conteúdo relacionado

Destaque

Semelhante a SAP Fiori Development from Scratch

Mais de Jose Nunes

SAP Fiori Development from Scratch