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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to SAP Fiori Development from Scratch

Similar to SAP Fiori Development from Scratch (20)

More from Jose Nunes

More from Jose Nunes (20)

SAP Fiori Development from Scratch