sap fiori development from scratch

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

Upload: jose-nunes

Post on 16-Apr-2017

156 views

Category:

Software


5 download

TRANSCRIPT

Page 1: SAP Fiori Development from Scratch

Public

Jairo CanutoSAP NetWeaver / HANA / Fiori UX Certified Architect

SAP Fiori Development from scratch

Page 2: 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.

Page 3: SAP Fiori Development from Scratch

© 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

Page 4: SAP Fiori Development from Scratch

© 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.

Page 5: SAP Fiori Development from Scratch

© 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.

Page 6: SAP Fiori Development from Scratch

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 6Public

Ferramentas e Metodologias a serem utilizadas

Page 7: SAP Fiori Development from Scratch

© 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)

-

Page 8: SAP Fiori Development from Scratch

© 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

Page 9: SAP Fiori Development from Scratch

© 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

Page 10: SAP Fiori Development from Scratch

© 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)

Page 11: SAP Fiori Development from Scratch

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 11Public

Preparação do ambiente

SAP Web IDE: Ferramenta de desenvolvimento

Page 12: SAP Fiori Development from Scratch

© 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/

Page 13: SAP Fiori Development from Scratch

© 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

Page 14: SAP Fiori Development from Scratch

© 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

Page 15: SAP Fiori Development from Scratch

© 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

Page 16: SAP Fiori Development from Scratch

© 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.

Page 17: SAP Fiori Development from Scratch

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 17Public

Arquitetura da Solução

SAP ECC: Desenvolvimento dos Serviços – SEGW

Page 18: SAP Fiori Development from Scratch

© 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

Page 19: SAP Fiori Development from Scratch

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 19Public

Arquitetura da Solução

Tipos de aplicações SAP Fiori

Page 20: SAP Fiori Development from Scratch

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 20Public

Arquitetura da Solução

SAP Fiori Transactional Applications

Page 21: SAP Fiori Development from Scratch

© 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/

Page 22: SAP Fiori Development from Scratch

© 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

Page 23: SAP Fiori Development from Scratch

© 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

Page 24: SAP Fiori Development from Scratch

© 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”:

Page 25: SAP Fiori Development from Scratch

© 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:

Page 26: SAP Fiori Development from Scratch

© 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:

Page 27: SAP Fiori Development from Scratch

© 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

Page 28: SAP Fiori Development from Scratch

© 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

Page 29: SAP Fiori Development from Scratch

© 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/

Page 30: SAP Fiori Development from Scratch

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