Public
Jairo CanutoSAP 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.
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 3Public
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
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 4Public
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.
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 5Public
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.
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 6Public
Ferramentas e Metodologias a serem utilizadas
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 7Public
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)
-
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 8Public
Ferramentas e Metodologias a serem utilizadas
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
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 9Public
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/snapshot/latest/index.html
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 10Public
Preparação do ambiente
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)
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 11Public
Preparação do ambiente
SAP Web IDE: Ferramenta de desenvolvimento
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 12Public
Preparação do ambiente
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/
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 13Public
Preparação do ambiente
SAP HANA Cloud Connector: Integração entre HCP e ambiente on-premise
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 14Public
Preparação do ambiente
SAP HANA Cloud Connector: Integração entre HCP e ambiente on-premiseSAP 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
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 15Public
Arquitetura da Solução
SAP NetWeaver Gateway: Publicação dos serviços e deploy das aplicações
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 16Public
Arquitetura da Solução
SAP NetWeaver Gateway: Publicação dos serviços e deploy das aplicaçõesOptamos 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.
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 17Public
Arquitetura da Solução
SAP ECC: Desenvolvimento dos Serviços – SEGW
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 18Public
Arquitetura da Solução
Arquitetura das aplicações SAP FioriAs 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
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 19Public
Arquitetura da Solução
Tipos de aplicações SAP Fiori
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 20Public
Arquitetura da Solução
SAP Fiori Transactional Applications
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 21Public
Desenvolvimento
SAP NetWeaver Gateway: OData ServicesO 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/
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 22Public
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
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 23Public
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
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 24Public
Desenvolvimento
Criando um Projeto a partir de um serviço do SAP GatewayIdentificar 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”:
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 25Public
Desenvolvimento
Estrutura do Projeto SAP FioriEstrutura do Projeto SAP Fiori com seus principais diretórios: raiz, webapp, view e controller:
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 26Public
Desenvolvimento
SAP Web IDE – Layout EditorUtilizamos o Editor de Layout do SAP Web IDE para construção das views:
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 27Public
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
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 28Public
Deploy
SAP HANA Cloud PlatformEfetuar 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
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 29Public
Deploy
SAPUI5 ABAP RepositoryEfetuar 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. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 30Public
Jairo CanutoSAP NetWeaver / HANA / Fiori UX Certified ArchitectM: +55 11 99172 5065Email: [email protected]/in/jcanutojr