Prévia do material em texto
O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 1 Treinamento SAP FIORI O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 2 Sumário INTRODUÇÃO AO SAP FIORI ...................................................................... 5 A ESTRATÉGIA DE UX DO SAP FIORI .......................................................... 8 SAP UX DESIGN SERVICES .............................................................................. 12 Advise ................................................................................................... 12 Innovate................................................................................................ 12 Empower ............................................................................................... 12 Realize .................................................................................................. 13 DESIGN THINKING ......................................................................................... 13 SAP BUILD ................................................................................................ 15 SAP FIORI STENCILS ..................................................................................... 21 PRINCÍPIOS DE UX DO SAP FIORI ...................................................................... 22 Role-Based ............................................................................................ 22 Adaptive ................................................................................................ 22 Simple .................................................................................................. 23 Coerente ............................................................................................... 23 Delightful ............................................................................................... 23 ARQUITETURA ...........................................................................................25 VISÃO GERAL DA ARQUITETURA ......................................................................... 25 Client/Browser ....................................................................................... 27 Proxy Reverso ........................................................................................ 27 Front-end ABAP Server ............................................................................ 28 Back-end ABAP Server ............................................................................ 28 SAP HANA XS ......................................................................................... 28 Back-end Database ................................................................................. 29 SAP Cloud Platform ................................................................................. 29 SAP Fiori Cloud ....................................................................................... 29 OData Provisioning ................................................................................. 33 SAP Mobile Service ................................................................................. 35 SAP Web IDE ......................................................................................... 35 O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 3 App Repository ....................................................................................... 35 SAP Cloud Platform Cloud Connector ......................................................... 35 TIPOS DE APLICAÇÕES SAP FIORI ....................................................................... 35 Transactional ......................................................................................... 36 Fact Sheets ............................................................................................ 37 Analytical............................................................................................... 38 ARQUITETURA SAP FIORI COM O SAP S/4 HANA ................................................... 40 TECNOLOGIAS RELACIONADAS .................................................................43 SAP GATEWAY ............................................................................................. 43 ODATA ...................................................................................................... 43 SAPUI5 .................................................................................................... 49 SAP WEBIDE .............................................................................................. 51 FIORI LAUNCHPAD ....................................................................................57 SAP FIORI LAUNCHPAD DESIGNER ...................................................................... 61 UI THEME TOOLS .......................................................................................... 69 INSTALAÇÃO E CONFIGURAÇÃO ................................................................78 INSTALAÇÃO CENTRAL HUB .............................................................................. 80 EMBEDDED DEPLOYMENT ................................................................................. 82 SAP FIORI LIBRARY ....................................................................................... 83 CONFIGURANDO O SAP FIORI LAUCHPAD E O SAP FIORI LAUNCHPAD DESIGNER ............... 85 Serviços OData....................................................................................... 85 Ativar Nodes do Internet Communication Framework .................................. 88 Configurar tela de Logon e Logoff do SAP Fiori Launchpad ........................... 92 Configurar tela de Logoff do SAP Fiori Launchpad ....................................... 94 Roles de Autorização ............................................................................... 98 CONFIGURAR SAP GATEWAY ........................................................................... 100 Ativar SAP Gateway .............................................................................. 101 Integrar SAP Gateway e back-end server ................................................. 102 Criar Alias de Sistemas .......................................................................... 104 EMBEEDED SEARCH ...................................................................................... 105 Ativar Serviços SICF ............................................................................. 105 Ativar Business Function ........................................................................ 106 O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 4 Rodar Task List (mandante 000) ............................................................. 106 Rodar Task List Por Mandante ................................................................ 108 ATIVAÇÃO SAP HANA .................................................................................. 109 CONFIGURAÇÃO UTILIZANDO O TASK LIST (STC01) .............................................. 111 IMPLEMENTAÇÃO ....................................................................................113 ESTENDENDO APLICAÇÕES .....................................................................134 O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 5 Introdução ao SAP Fiori SAP Fiori é a UX (User eXperience) personalizável para os softwares da SAP, uma mudança de paradigma que tirou o foco em funções e funcionalidades e passou a priorizar o usuário e a sua experiência com o sistema, trazendo simplicidade para um universo complexo de negócios, gerando valor através do aumento da produtividade e colaboraçãode pessoas e equipes de clientes, de um aceleramento dos processos de negócio e da inovação. Apresentado em maio de 2013 no SAPPHIRENOW em Orlando na Flórida, o Fiori foi disponibilizado originalmente com 25 apps para utilização dos usuários finais. A palavra Fiori vem do italiano e significa “flores” em referência ao conceito da transformação do UX de suas aplicações através de um beautifying (embelezamento). O SAP Fiori surgiu de uma necessidade de melhorar e mudar a percepção de usabilidade e UX nos produtos da SAP. Essa necessidade existia devido ao avanço da tecnologia, em um mundo onde mobiles e tablets passam a ser integrados dentro dos processos de negócios, onde aplicações em geral focam mais na simplicidade e na aparência, em um mundo em que as empresas entendem que todo esse conceito de UX não deve ser algo apenas do cotidiano, mas sim algo que deve ser aplicado também aos seus processos de negócio eliminando complexidades, onde informações atualizadas precisam ser acessíveis em qualquer lugar e em qualquer momento para tomadas de decisão mais rápidas e assertivas. Analisando esse cenário a SAP identificou que havia uma demanda de seus clientes onde o foco principal deveria ser o usuário final e sua experiência com o sistema. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 6 Figura 1 – Fiori, a nova UX das aplicações SAP O SAP Fiori é um sistema que proporciona uma UX personalizável e baseado em funções (role-based) para uma completa abrangência de empresas dos mais variados ramos de atividades (Line Of Business - LOBs), e que possibilita a utilização de variados dispositivos que melhor interajam com o tipo de negócio desses clientes. Hoje no portfólio da SAP existem cerca de 10.000 aplicativos disponíveis entre as plataformas SAP S/4 HANA, SAP Business Suite e SAP Fiori Cloud nos mais diversos ramos de atividades, sendo que desses aproximadamente 1.790 são aplicativos considerados Fiori, 580 são aplicações Web Dynpro e os cerca de 7630 restantes são aplicações SAP GUI emuladas através de WebGui (fonte: https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/). Através do Fiori os clientes podem implementar esses apps, customizá-los ou até mesmo criar aplicações próprias. As aplicações Fiori são criadas a partir de um framework de HTML5 conhecido como SAPUI5. É necessário conhecer SAPUI5 para poder desenvolver novas aplicações Fiori e ter pelo menos noções do mesmo para poder estender e customizar apps standard. https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/ O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 7 É possível criar uma aplicação utilizando o framework SAPUI5 sem que esse app seja necessariamente uma aplicação Fiori, tendo em vista que o Fiori além de um produto é um conceito, uma estratégia UX com modernos princípios de design, ou seja, é possível utilizar o SAPUI5 para criar uma aplicação HTML5 sem que a mesma seja considerada uma aplicação Fiori, caso esta não siga os princípios de UX determinados pelo conceito Fiori. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 8 A Estratégia de UX do SAP Fiori O resultado de uma boa UX em uma empresa tem relação direta com o sucesso e o crescimento do negócio. Uma boa UX traz benefícios monetários e não monetários para a empresa. Figura 2 - benefícios monetários • Benefícios monetários: o Aumento da produtividade – uma aplicação menos complexa com foco na real necessidade dos usuários permite que eles executem suas atividades em menos tempo; o Redução dos custos de treinamento e suporte – aplicações menos complexas, mais aderentes ao processo real e com uma navegação intuitiva reduzem os custos de treinamento e suporte; o Menor número de erros dos usuários – aplicações mais simples com informações mais precisas ajudam a prevenir potenciais erros dos usuários e facilitam a identificar e corrigir os mesmos quando ocorrem; o Menor número de Change Requests nas soluções – uma boa UX possui estratégias de design de concepção que envolve desde os primeiros passos os usuários finais e stackholders que sejam relevantes para o processo O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 9 (Design Thinking), resultando em uma solução mais aderente a necessidade dos usuários. Figura 3 - benefícios não monetários • Benefícios não monetários: o Aumento da satisfação do usuário – a solução mais aderente à necessidade e expectativas do usuário faz com que os mesmos tenham uma maior satisfação com a aplicação; o Maior adoção da solução – usuários automaticamente aderem a uma solução que atendem à suas necessidades e expectativas; o Maior fidelização dos clientes – soluções voltadas para o consumidor final com uma boa UX faz com que produtos e serviços sejam mais recomendados, melhorando a experiência da marca; o Fortalecimento de relações de trabalho – os stackholders passam a ter uma maior participação com as soluções o que ajuda a controlar a geração de demandas e a expectativa das entregas, além de aumentar a percepção da importância e capacidade de inovação da área de TI. Uma boa UX sempre deve levar em consideração três pontos 1. Business - necessidade do negócio; 2. Technology - as capacidades e viabilidades da tecnologia; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 10 3. Human Values – entender a visão dos usuários quanto ao que eles entendem como usabilidade e o que esperam da UX da aplicação. A estratégia de UX da SAP desde o lançamento do Fiori foi baseada em quatro pontos focais: • New - criar novas aplicações para atender as necessidades dos clientes e inovar através de possibilidades criadas pela nova UX; • Renew - renovar antigas aplicações que sejam relevantes e frequentemente utilizadas pelos seus clientes; • Enable - possibilitar aos clientes melhorarem o UX dos seus cenários específicos através do SAP Screen Personas, por exemplo; • SAP UX design services – mais recente serviço oferecido pela SAP para clientes que queiram transformar os seus padrões de UX utilizando a estratégia de UX da SAP. Endereço para maiores detalhes https://experience.sap.com/designservices/. Figura 4 - oportunidades de melhorias de UX https://experience.sap.com/designservices/ O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 11 Figura 5 - estratégia de transformação de UX Figura 6 – SAP UX Design Services na estratégia de UX Em maio de 2016 a SAP e a Apple anunciaram uma parceria combinando os processos da SAP com a conhecida UX da Apple, permitindo criar aplicações Fiori para IOS com uma UX mais robusta e coerente com o sistema IOS. É possível consultar os guidelines para criação de apps SAP Fiori e SAP Fiori for IOS no seguinte endereço: https://experience.sap.com/fiori-design/. https://experience.sap.com/fiori-design/ O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 12 SAP UX Design Services O SAP UX Design Services é uma combinação de serviços e informações que servem para guiar o cliente na elaboração de projetos de transformação de UX, através da elaboração da estratégia de UX e de um UX roadmap. Os serviços são classificados em quatro categorias, advise (aconselhar), innovate (inovar), empower (capacitar) e realize (realizar). Advise Nesse tipo de serviço a SAP presta um aconselhamento aos clientes quanto a tecnologia e valor de negócio relacionados a UX, facilitando com isso a viabilidade da elaboraçãoda estratégia de UX por parte do cliente. Innovate A SAP roda sessões de Design Thinking no cliente para identificar possibilidades de inovação nos processos de negócio. Ela também cria aplicativos para provar conceitos identificados nas sessões de Design Thinking, aumentando a confiança dos clientes quanto as possibilidades de inovação. Empower O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 13 Nesse tipo de serviço a SAP ministra treinamentos nas áreas de UX e design do cliente sobre temas como por exemplo Design Thinking, SAPUI5 e Screen Personas, por exemplo. Realize Como escopo desse serviço a SAP é quem executa o projeto de UX no cliente, sendo que dependendo dos serviços contratados a SAP pode inclusive desenvolver apps SAP Fiori, customizar apps standard, configurar o SAP Screen Personas, entre outros serviços disponíveis. Design Thinking O Design Thinking é uma metodologia para solução de problemas complexos em várias áreas como por exemplo na formação de novas estratégias, validar modelos de negócio ou até mesmo na fundação de um novo negócio. Os pontos focais são sempre as necessidades do usuário final e a inovação, sendo que inovação é a intersecção entre o que é desejável (desirability), o que é sustentável financeiramente (viability) e o que é viável tecnicamente (feasibility). O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 14 Figura 7 - interseção da inovação O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 15 Figura 8 - Processo de Design Thinking SAP BUILD O SAP BUILD é uma ferramenta cloud para design e prototipação de aplicações SAP Fiori. Ele possui templates e exemplos de protótipos para facilitar a prototipação da sua aplicação, além de todo feedback dos usuários ser coletado dentro do próprio BUILD. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 16 O BUILD possibilita também aos desenvolvedores exportar o código gerado para usar como base para o desenvolvimento. Pelo endereço https://www.build.me/ é possível utilizar a versão trial do Build Figura 9 - Ferramenta SAP BUILD O primeiro passo deve ser criar um novo projeto: Figura 10 - Criando um novo projeto Após a criação do projeto é preciso convidar o time que fará parte da prototipação. Esse time é o mesmo time que faz parte da equipe de design thinking, eles serão farão a validação e testes do protótipo e darão o feedback da solução. https://www.build.me/ O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 17 Figura 11 - Convidando o time para colaborar com o projeto O segundo passo é criar as personas do projeto, como por exemplo comprador, gerente de compras, desenvolvedor, tester, etc. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 18 Figura 12 – Criando uma Persona Caso seja utilizado um template, o projeto já virá com algumas páginas, caso contrário não terá nenhuma página criada. É possível criar páginas clicando no adicionar “+”. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 19 Figura 13 - Exemplo de aplicação clonada Ao adicionar uma nova página ou modificar uma página existente será aberto o editor, onde é possível adicionar componentes na tela, adicionar dados de teste (mock data), navegação entre páginas, fazer um preview do protótipo, entre outras funcionalidades. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 20 Figura 14 - Editor do Build Figura 15 - Data Editor do Build O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 21 O último passo é criar um estudo após o fim da prototipação. É possível criar perguntas específicas para serem feitas, e o protótipo é publicado para que o os usuários possam dar feedbacks e responder as perguntas criadas. Ao final do estudo, o criador do mesmo pode visualizar as pessoas que responderam, as respostas das perguntas, anotações feitas, etc. Figura 16 - criando um estudo do protótipo SAP Fiori Stencils A SAP disponibiliza stencils do SAP Fiori para serem importados no Axure ou no Microsoft Power Point possibilitando a prototipação nesses softwares, porém de maneira mais limitada visto que os componentes e layouts disponibilizados são limitados e o design da prototipação não fica 100% fiel à uma aplicação SAP Fiori (principalmente em comparação ao Power Point). O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 22 Princípios de UX do SAP Fiori A SAP definiu cinco princípios base de design a seguir para garantir que todas as aplicações SAP Fiori tenham uma UX bonita e coerente, independente da sua função na empresa, e que entregue a melhor experiência de usuário em qualquer dispositivo: Role-Based, Delightful, Coherent, Simple e Adaptive. Manter-se fiel a esses princípios permite a SAP garantir a qualidade de suas aplicações SAP Fiori. Role-Based Role-Based significa baseado em funções ou tarefas. Isso significa que uma aplicação deve ter foco nas tarefas correspondentes à função de apenas um usuário, mantendo foco nessa user role. Uma das principais características das transações clássicas standard era ter muitas funções, gerando consequentemente muitas informações onde apenas parte delas eram relevantes e tendo uma alta complexidade de compreensão. A SAP abandonou grande parte dessas transações e as transformou em aplicativos intuitivos, baseados apenas em funções específicas e feitas a dedo para mostrar apenas as informações relevantes para aquelas determinas funções. Adaptive Adaptive significa adaptiva, sendo que antes a SAP chamava como Responsive que significa responsiva. O SAP Fiori facilita que as aplicações possuam uma UX coerente em vários dispositivos (smartphones, tablets e desktops) e com suporte a múltiplas tecnologias (IOS, Android, Windows e Mac OS). Com isso é possível rodar uma aplicação no dispositivo que melhor atenda o processo de negócio e não somente em desktops, podendo inclusive executar em mais de uma plataforma com pouca ou nenhuma adaptação na aplicação. Sendo assim, as aplicações se adaptam as O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 23 diversas resoluções de tela que existem em diversos tipos de dispositivos sem a necessidade de criar um app novo para cada resolução. Simple Simple significa simples. As aplicações devem evitar complexidades, se mantendo simples, intuitivas e de fácil adoção e utilização. Para isso a SAP usa como base a filosofia de 1-1-3 para definir o escopo de um aplicativo (1 usuário, 1 caso de uso e 3 telas). Novamente podemos usar o exemplo das transações clássicas GUI que possuem muitas informações e botões, o que faz um usuário inexperiente não saber se localizar na aplicação e suas funcionalidades, exigindo um treinamento complexo para que o mesmo possa utilizar a transação. Coerente Coherent significa coerente. O SAP Fiori se preocupa em manter uma interface padronizada, com aparência e experiência semelhante entre as aplicações. Assim um usuário que use algumas aplicações SAP Fiori se sentirá confortável ao entrar em uma aplicação nova pois o desgin do mesmo é padronizado (funcionalidades iguais com componentes, cores, termos, posicionamento e ícones iguais). DelightfulDelightful significa agradável. Uma aplicação agradável significa ser uma aplicação que surpreende o usuário e que se adere de maneira simples às necessidades dele possibilitando uma fácil adoção à utilização do app, sendo um assistente que possibilita o usuário a ser proativo e O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 24 criar uma conexão emocional com a aplicação. Isso pode ser alcançado através de componentes visuais (como gráficos por exemplo), de animações na aplicação O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 25 Arquitetura Visão Geral da Arquitetura O landscape sistema SAP Fiori é composto por uma camada client/browser, um proxy reverso (web dispatcher), servidores NetWeaver ABAP de backend e frontend, servidor HANA XS e um banco de dados para o back-end. Figura 17 – Componentes da Arquitetura SAP Fiori on-premise e on-demand O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 26 Figura 18 - Arquitetura SAP Fiori on-premise O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 27 Figura 19 - Arquitetura SAP Fiori on-demand Client/Browser Essa camada é onde os aplicativos Fiori são consumidos, sendo que o ponto de entrada para acessar os aplicativos é o Fiori Launchpad em mobiles, tablets e desktops. O client pode ser um browser de um desktop ou mobile, ou então o SAP Fiori Client Proxy Reverso É um tipo de servidor proxy que fica atrás do firewall de uma rede privada e direciona as requisições que chegam dos clients/browsers para o servidor backend apropriado. Ele serve como O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 28 uma camada a mais de segurança e controla o tráfego de rede entre os servidores backend e os clientes. O SAP Web Dispatcher é o proxy reverso da SAP, e obrigatório para aplicações Fiori do tipo analytical e fact sheet. Além disso o Web Dispatcher ainda faz o load balancing caso o cliente possua mais de um servidor ABAP. Front-end ABAP Server O servidor front-end é onde se encontra a camada de UI (user interface) e o SAP Gateway para os serviços OData, que os aplicativos SAP Fiori utilizam para obter os dados de negócio. Nesse servidor é onde é instalado o SAP Fiori Launchpad por onde os apps serão acessados, e os aplicativos SAP Fiori são armazenados em aplicações BSP (Business Server Page). Back-end ABAP Server O servidor backend é onde ficam os dados e as lógicas de negócio, além dos “search models” para os apps do tipo fact sheet. É no servidor back-end que os serviços OData são implementados. SAP HANA XS Necessário para os apps analíticos pois os mesmos consomem as VDMs (Virtual Data Models), calcultion views standard que processam e publicam dados do backend de forma analítica através do protocolo OData. Alguns apps possuem seu próprio Fiori Content no XS Engine ao invés de reutilizar VDMs. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 29 Figura 20 - SAP HANA XS dentro da arquitetura das aplicações analíticas Back-end Database O banco de dados do servidor backend pode ser qualquer banco (SAP Business Suite) ou Hana (S/4 Hana, SAP Business Suite with Hana). SAP Cloud Platform É o Platform-as-a-Service da SAP (PaaS) que provê ferramentas e tecnologias para desenvolvimento de aplicações. SAP Fiori Cloud O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 30 Serviço on demand que disponibiliza o SAP Fiori Launchpad para acesso a aplicações standard SAP Fiori em combinação com outro serviço, o OData Provisioning. Juntos substituem o servidor front-end em uma implementação on-premise. Também é possível acessar suas aplicações criadas SAP Fiori on cloud dentro do Launchpad. Os dados de negócio vêm todos do back-end, que se comunica com o cloud através do SAP Cloud Connector. A vantagem de utilizar o SAP Fiori Cloud é que não há instalação ou configuração dos Fiori basta assinar o serviço, e o cliente não precisa se preocupar com atualizações e manutenções nos apps standard e no Fiori em si, já que a própria SAP faz isso no serviço on-demand. A desvantagem fica por conta do número limitado de apps SAP Fiori disponíveis para o SAP Fiori Cloud, que hoje é cerca de 70 apps. Existem dois layouts de arquitetura para o SAP Fiori Cloud, um para acesso interno apenas (como se fosse um on-premise), e outro para acesso externo, onde os dados de negócio são acessados e ficam expostos na nuvem. Muitas vezes o cliente quer utilizar o SAP Fiori Cloud, não precisa de acesso externo e não quer publicar os dados de negócio dele na nuvem por questões de segurança, nesse caso ele pode optar pelo modelo de arquitetura para acesso interno. Nas demais situações o modelo é o externo, onde o SAP Fiori Cliente é acessível na nuvem de qualquer lugar, sem necessidade de estar na rede interna do cliente. Quanto a autenticação, o SAP Cloud Plataform trabalha nativamente com SAML 2.0 (Security Assertion Markup Language), então basicamente é preciso configurar os servidores de back-end para SSO (single sign-on) para que a autenticação ocorra com sucesso. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 31 Figura 21 - Arquitetura do SAP Fiori Cloud para acesso interno O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 32 Figura 22 - Arquitetura do SAP Fiori Cloud para acesso externo O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 33 OData Provisioning Serviço cloud para registrar e publicar serviços OData criados no back-end. Esse serviço substitui a necessidade de um servidor SAP Gateway para o SAP Fiori Cloud, visto que ele publica os serviços OData no SAP Cloud Plataform, fazendo a comunicação com o back-end através do SAP Cloud Connector. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 34 Figura 23 - Arquitetura do SAP Fiori Cloud com OData Provisioning O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 35 SAP Mobile Service Versão cloud do SAP Mobile Plataform on-premise. SAP Web IDE IDE de desenvolvimento baseada em cloud da SAP utilizada para criação de novos apps e extensão de apps standard SAP Fiori. App Repository É o repositótio on demand da SAP para armazenar as UIs desenvolvidas on cloud (correspondente dos BSP no on premise). SAP Cloud Platform Cloud Connector Aplicação que precisa ser instalada em um servidor que faça parte da estrutura on- premise. Esse connector fará um tunelamento VPN com o SAP Cloud Plataform para que os servidores on-premise sejam acessíveis na nuvem (possibilitando a integração de soluções cloud com dados on-premise). Tipos de aplicações SAP Fiori O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 36 As aplicações Fiori podem ser divididas em três categorias de acordo com seu design e arquitetura. Eles são transacionais (transactional), fact sheets e analíticos (analytical). Transactional Podem rodar em um banco de dados Hana ou qualquer outro banco de dados usado pelo SAP Business Suite, porém a SAP recomenda a utilização do Hana para otimizar a performance dos aplicativos. São appsbaseados em funções especificas do processo, realizando operações de create, read, update e ou delete (CRUD) com trocas bidirecionais de informações entre aplicação e backend. Demandam significativamente mais horas de desenvolvimento que os demais tipos de app. Os apps transacionais sempre vão acessar o front-end em suas requisições por isso o SAP Web Dispatcher não é obrigatório, porém recomendado devido à segurança e funcionalidades de load balancing. Figura 24 - Arquitetura de um app transacional O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 37 Figura 25 – Exemplo de app transacional Fact Sheets Os aplicativos do tipo fact sheet são apps que exibem informações contextuais de um objeto ou transação de negócios. Esses apps não possuem tile para serem acessados, eles são acionados por outros apps transacionais e fact sheets, e principalmente pelo SAP Fiori Search que utiliza os Search Models para pesquisa de objetos de negócio e realiza as chamadas dos apps fact sheet. Esse tipo de app exige um banco de dados SAP Hana pois utiliza CDS View para seleção dos dados e construção da UI através de annotations, e essa tecnologia utiliza um protocolo proprietário da SAP chamado de protocolo InA para comunicação entre o SAP Web Dispatcher diretamente com o back-end (por esse motivo é necessário o SAP Web Dispatcher para aplicações fact sheet). O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 38 Figura 26 - Arquitetura de um app fact sheet Figura 27 – Exemplo de app fact sheet Analytical O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 39 São aplicativos apenas de leitura de dados e ideais para casos de uso que exigem processamento massivo de números, visualização gráfica de dados, análise preditiva e KPIs. Exige um banco de dados SAP Hana, pois utiliza os recursos de processamento analítico do SAP Hana para processar esses dados que são disponibilizados em serviços OData pelo SAP Hana XS Engine. Os componentes de tela são armazenados no servidor ABAP de front-end e são acionados pelo Fiori Launchpad, por isso é necessário a utilização do SAP Web Dispatcher já que determinadas requisições serão encaminhadas para o front-end e outras para o servidor XS do SAP Hana. Alguns apps SAP Fiori analíticos simplesmente reutilizam dados entregues pelas VDMs (Virtual Data Models) que eram calculation view consumidas pelo antigo SAP Hana Live, ou então possuem conteúdo desenvolvidos especificamente para o App e publicados através de OData no XS Engine (CDS Views, procedures, etc). A SAP disponibiliza também uma ferramenta chamada KPI Modeler para criação de KPIs sem a necessidade de desenvolvimento nenhum, além de KPIs standard que a própria SAP entrega. KPIs são indicadores de performance demonstrados através de gráficos e dados tabulares. Figura 28 - Arquitetura de um app analítico O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 40 Figura 29 - App analítico Arquitetura SAP Fiori com o SAP S/4 HANA Há diferenças de arquitetura das aplicações do SAP Fiori quando o back-end é um SAP S/4 HANA e não um SAP Business Suite. A primeira diferença é quanto a arquitetura para os tipos de app SAP Fiori, já que no S/4 HANA temos as aplicações WebGUI e WebDynpro exclusivas, e os apps analíticos não acessam diretamente o XS Engine, ao invés disso a SAP criou CDS Views ABAP que são implementadas no back-end e publicadas via OData services no SAP Gateway. Ou seja, não há mais comunicação direta com o XS Engine pelo SAP Web Dispatcher já que as VDMs e Calculation Views não são mais utilizadas, todas as requisições são feitas para o front-end que terá um serviço OData provido por uma CDS View ABAP analítica. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 41 Figura 30 - Arquitetura dos apps SAP Fiori no S/4 HANA Outro ponto de mudança é que como o XS Engine não é mais acessado, não é necessário gerenciar perfil de usuário diretamente no Hana. Como o XS é um servidor de aplicação assim como o ABAP é um servidor de aplicação, para o SAP Business Suite é preciso criar o usuário no SAP HANA XS e fazer a manutenção das roles dele nesse servidor para que ele possa acessar os dados analíticos, além da manutenção do perfil do usuário que já existe no ABAP. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 42 Como as CDS View ABAP substituem a lógica das VDMs e Calculations Views do HANA não há mais lógicas de negócio separadas, pois tanto apps transacionais, quanto fac sheets e analíticos passam a consumir a lógica de negócio através de CDS View ABAP, já que através de annotations analíticas é possível criar CDS Views ABAP com capacidades analíticas. O gerenciamento do lifecycle das aplicações analíticas também ficou mais simples, já que não é preciso se preocupar com manutenção e transporte de artefatos no SAP HANA (VDMs e Calculation Views), tudo ocorre na camada de ABAP. O último ponto de diferença é que o SAP Gateway passou a ser o ponto de entrada para as chamadas OData dos apps SAP Fiori analíticos não sendo mais feitas chamadas diretas ao XS Engine, o que deixa a arquitetura padronizada com os apps transacionais e mais simples de implementar e analisar problemas. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 43 Tecnologias Relacionadas SAP Gateway O SAP Gateway é a tecnologia da SAP para publicar dados de negócio SAP para consumo de qualquer dispositivo ou aplicação através de serviços REST com protocolo OData. O Gateway é simples de utilizar e configurar, além de permitir reutilizar RFCs, BAPIs e CDS Views para publicar serviços sem necessidade de codificação. OData Open Data Protocol (OData) é um protocolo aberto baseado em REST utilizado para expor e consumir dados através da rede. Assim como um restful service o OData funciona através de chamadas HTTP em que dados formatados em JSON ou XML são trafegados entre cliente e servidor, suportando ações de CRUD através do protocolo HTTP: create (HTTP POST), read (HTTP GET), update (HTTP PUT) e delete (HTTP DELETE). O criador do protocolo OData foi originalmente a Microsoft, mas por ser um protocolo aberto, diversas empresas estão adotando padrão para expor APIs e serviços (como por exemplo o Facebook). Hoje os maiores contribuidores para o crescimento do OData são a Microsoft, a SAP e a IBM. No endereço a seguir tem exemplos de um serviço OData → http://services.odata.org/OData/Odata.svc/. Um serviço OData é composto por entidades que podem ou não se associar/relacionar entre si, sendo possível inclusive navegar entre as entidades. http://services.odata.org/OData/Odata.svc/ O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 44 Figura 31 - Exemplo de serviço OData O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 45 Figura 32- Relacionamento das entidades do serviço de exemplo Para visualizar os fornecedores no formato JSON, acessar o link http://services.odata.org/OData/Odata.svc/Suppliers?$format=json, enquanto que para acessar um fornecedor pela chave primária use o endereço http://services.odata.org/OData/Odata.svc/Suppliers(0)?$format=json. Caso deseje visualizar os dados em formato XML, mas mudar o parâmetro format para XML “$format=xml” http://services.odata.org/OData/Odata.svc/Suppliers?$format=json http://services.odata.org/OData/Odata.svc/Suppliers(0)?$format=jsonO conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 46 Figura 33 - Dados de fornecedores em lista O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 47 Figura 34 - Acessando um fornecedor pela chave primária Para filtrar dados de uma lista/entidade e selecionar apenas campos desejados, devem ser utilizados os parâmetros $filter e $select. http://services.odata.org/OData/Odata.svc/Suppliers?$filter=(Name%20eq%20%27Exot ic%20Liquids%27)&$select=ID,Name&$format=json http://services.odata.org/OData/Odata.svc/Suppliers?$filter=(Name%20eq%20%27Exotic%20Liquids%27)&$select=ID,Name&$format=json http://services.odata.org/OData/Odata.svc/Suppliers?$filter=(Name%20eq%20%27Exotic%20Liquids%27)&$select=ID,Name&$format=json O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 48 Para trazer dados de uma entidade e de um relacionamento, é utilizado o comando $expand. http://services.odata.org/OData/Odata.svc/Suppliers?$filter=(Name%20eq%20%27Exot ic%20Liquids%27)&$expand=Products&$format=json Figura 35 - Trazendo dados de um relacionamento Para navegar entre os relacionamentos de uma entidade, basta adicionar o nome do relacionamento no final da URI. http://services.odata.org/OData/Odata.svc/Suppliers?$filter=(Name%20eq%20%27Exotic%20Liquids%27)&$expand=Products&$format=json http://services.odata.org/OData/Odata.svc/Suppliers?$filter=(Name%20eq%20%27Exotic%20Liquids%27)&$expand=Products&$format=json O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 49 http://services.odata.org/OData/Odata.svc/Suppliers(0)/Products?$format=json Figura 36 - Navegando entre os relacionamentos SAPUI5 O SAPUI5 é um framework HTML5 da SAP, é um conjunto de controles UI em JavaScript que podem ser utilizados para desenvolver aplicações HTML5 que rodam em dispositivos mobile ou desktop. Todas as aplicações SAP Fiori são construídas utilizando SAPUI5. http://services.odata.org/OData/Odata.svc/Suppliers(0)/Products?$format=json O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 50 Suporta temas CSS que são criados através de ferramentas (UI Theme Designer) para customização dos controles de acordo com os padrões e marcas do cliente. Permite a criação de controles customizados e extensão de componentes existentes. Baseado em padrões open source como por exemplo OpenAJAX, JavaScript, CSS e HTML5, o SAPUI5 suporta chamadas AJAX e libraries standard do JavaScript como por exemplo o jQuery. O SAPUI5 pode ser compreendido por dois componentes iniciais, o SAPUI5 libraries que contém os controles e os temas, e o SAPUI5 core que possui os componentes principais do SAPUI5 como por exemplo o class loader, o gerenciador de renderização e os plug-ins jQuery. Figura 37 - Arquitetura SAPUI5 O SAPUI5 utiliza pattern MVC (Model View Controller) como modelo de desenvolvimento, onde a lógica de negócio e de UI ficam separadas. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 51 Figura 38 - Pattern MVC no UI5 SAP WebIDE O SAP WebIDE é a IDE de desenvolvimento cloud da SAP para extensão e criação de aplicações Fiori. Possui templates pré-definidos de determinados tipos de apps, que ajudam a acelerar o desenvolvimento de novas aplicações. É possível acessar o SAP WebIDE criando uma conta no SAP Cloud Plataform Trial (endereço https://account.hanatrial.ondemand.com/). https://account.hanatrial.ondemand.com/ O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 52 Figura 39 - O Neo Trial é o Cloud trial da SAP É preciso habilitar o serviço SAP WebIDE Full-Stack para que seja possível acessar o mesmo. Figura 40 - Services do SAP Cloud Plataform O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 53 Figura 41 - Habilitando o serviço Figura 42 - Serviço habilitado O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 54 Figura 43 - Tela inicial do SAP Web IDE Crie um novo projeto: Figura 44 - Novo projeto Selecione o tipo “SAPUI5 Application”, e selecione a versão de SAPUI5 1.44. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 55 Figura 45 - Template SAPUI5 Figura 46 - Novo projeto SAPUI5 Criar uma view default. Figura 47 - View default Para executar o projeto criado, clique em “Run”. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 56 Figura 48 - Executar app SAPUI5 Figura 49 - Executando um app SAPUI5 O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 57 Fiori Launchpad O SAP Fiori Launchpad é uma aplicação responsiva, simples e intuitiva que serve como ponto de entrada para todos os apps Fiori. Atualmente o Fiori mais recente é o SAP Fiori 2.0 Launchpad com novos recursos em comparação ao SAP Fiori Launchpad clássico, como por exemplo suportar Object Pages (novo modelo de app fact sheet) e o novo tema Belize em comparaçào ao tema Blue Crystal. Por ser responsivo, o Fiori Launchpad se adapta a diversos dispositivos para uma melhor experiência do usuário. A SAP também possui um app nativo para mobiles e tablets chamado de SAP Fiori A homepage do Fiori Launchpad é chamada de viewport. Figura 50 - Fiori Launchpad É possível customizar o tema do launchpad utilizando o UI Theme Designer ou então mudar para um dos temas standard disponíveis (SAP Belize, SAP Belize Deep, SAP High Contrast Black e SAP High Contrast White). Os apps que o usuário tem acesso são determinados pelos grupos e catálogos que o usuário possui atribuídos ao seu perfil. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 58 Os grupos default são carregados de acordo com o perfil do usuário (roles atribuídas), e dentro do launchpad o usuário pode criar os seus próprios grupos personalizados ou customizar os grupos default existentes. O recurso de “Search” serve para pesquisar apps e também para procurar objetos de fact sheet. Na “ME Area” é possível customizar o seu launchpad, utilizar o App Finder (ferramenta para procurar todos os catálogos que o usuário tem acesso para adicionar e remover apps dos grupos), ver os últimos apps acessados, entre outras opções. Figura 51 - ME Area do Fiori Launchpad O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 59 Figura 52 - App Finder do Fiori Launchpad Figura 53 - Configurações do Launchpad Ao acessar um app dentro do launchpad, na barra superior é possível acessar os menus do launchpad para navegar para outros apps. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 60 Figura 54 - Acessando app dentro do Launchpad Ainda existe uma outra funcionalidade que é possível ativar no SAP Fiori Launchpad que é a “Notifications Area” (disponível apenas para S/4 Hana). Nessa notification area são mostrados eventos importantes relacionadas as tarefas do usuário. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 61 Figura 55 - Notification Area SAP Fiori Launchpad Designer O Launchpad Designer é uma ferramenta web utilizada para configurarmose criarmos catálogos e grupos que serão atribuídos a roles na PFCG para dar acesso aos apps para os usuários. Através do designer podemos: • Configurar tiles dinâmicas, estáticas e de notícias; • Criar catálogos e grupos a associar tiles a eles; • Associar esses artefatos à requests para transporte; O designer pode ser acessado em modo de configuration (configuração) e em modo de customizing (customização). No modo configuration toda a alteração feita reflete no ambiente inteiro e elas são salvas em uma request de workbench. No modo customizing as alterações refletem somente no mandante e elas são salvas em uma request de customizing. O acesso ao SAP Fiori Launchpad Designer Customizing pode ser feito no front-end pela transação /UI2/FLPD_CUST ou pela URL, escopo “CUST”: O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 62 • http://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap- client=<client>&scope=CUST O acesso ao SAP Fiori Launchpad Designer Configuration pode ser feito no front-end pela transação /UI2/FLPD_CONF ou pela URL, escopo “CONF”: • http://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap- client=<client>&scope=CONF Há um terceiro escopo que não é possível acessar pelo designer chamado de “PERS” (personalização). Esse escopo tem preferência aos demais (CONF e CUST), e representa as modificações que o usuário faz diretamente no seu Launchpad (por exemplo, remover ou adicionar tiles à um grupo). Na lista da esquerda é possível visualizar os catálogos ou grupos, enquanto que na parte de detalhes são exibidos os dados do catálogo ou grupo selecionado. Figura 56 - Launchpad Designer O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 63 Os catálogos são um conjunto de aplicações e/ou tiles que semanticamente, representam uma função/atribuição de negócio (por exemplo um catálogo de gerente de vendas). Entretanto um usuário que tenha acesso a um catálogo não visualiza por default as tiles e aplications desse catálogo, o usuário precisa ir no app finder para acessar os apps ou atribuir a grupos do seu Fiori Launchpad. Os grupos são agrupadores que reúnem aplicações semanticamente representando uma função/atribuição de negócio ou de um objeto de negócio (por exemplo “Ordens de Vendas”). Quando um usuário tem acesso à um grupo, esse grupo vai aparecer por default no Fiori Launchpad do usuário com todas as tiles configuradas desse grupo. Um grupo sempre referencia um ou mais catálogos, importando as tiles do mesmo. Figura 57 - Relação entre Roles, Catálogos e Grupos O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 64 Por default nós sempre fazemos a configuração do designer por mandante (escopo “CUST”). O primeiro passo é selecionar uma request para gravar as alterações quando entrar na transação ou marcar como apenas local (não transportável). Figura 58 - Associando uma Change Request Quando vamos criar um novo catálogo para um app SAPUI5 Fiori, precisamos saber a URL de referência desse app e o ID do app (id do component). Essas informações podem ser obtidas no Fiori Library. A URL é o caminho da SICF como por exemplo “/sap/bc/ui5_ui5/sap/sd_so_manages1”, e o ID o nome do component. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 65 Pela transação SE80 também é consultar o ID do component, basta acessar a página BSP, arquivo “manifest.json” e pegar o atributo “id”. Figura 59 - Acessando a aplicação BSP O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 66 Figura 60 - Verificando o ID da aplicação Para criar um novo catálogo: 1. Clique no “+” para criar um catálogo e informe um título e um id para o catálogo; 2. Na aba de Target Mapping, clique em “Create Target Mapping”; 3. Na seção de Intent precisamos preencher um Semantic Object e um Action. No Target Mapping é onde informamos os tipos de devices suportados e outros detalhes da aplicação. Caso não encontre um objeto semântico que descreva o objeto da aplicação adequadamente, é possível criar um na transação /UI2/SEMOBJ. O action é de entrada livre (por exemplo, display, approve, create, etc); 4. Selecione o tipo de aplicação (transação GUI, Web Dynpro, URL externa ou aplicação SAP Fiori); 5. Para aplicações do tipo SAP Fiori, é possível criar o target mapping como um SAPUI5 Fiori app que não exige nenhuma configuração prévia, basta informar os dados da aplicação nos campos URL e ID, e o outro tipo seria criar como um “SAP Fiori App using LPD_CUST”, onde é necessário criar a aplicação na transação LPD_CUST primeiro. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 67 Figura 61 - Configurando um Target mapping Para adicionar uma tile referenciando o target mapping criado: 1. Vá em Tiles e clique em “+” para adicionar uma Tile; 2. Selecione “App Launcher - Static”. Os tipos disponíveis são: a. App Launcher – Dynamic – usado para cenários onde desejamos textos dinâmicos e números calculados dinamicamente na tile; b. News Tile – utilizado para exibir um feed de notícias; c. App Launcher – Static – tile com conteúdo estático/fixo. 3. Informe um título e subtítulo; 4. Em Navigation, seleciona o objeto semântico e a action que a tile vai chamar quando for acionada; 5. Salve as alterações. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 68 Figura 62 - Criando uma tile Para criar um grupo para a tile criada anteriormente: 1. Acesse a aba de Grupos, clique em “+” e informe o Título e o ID do grupo, sendo que o título será o que vai aparecer para o usuário no título do grupo dentro do Fiori Launchpad; 2. Selecione o catálogo que deseja importar as tiles; 3. Clique no “+” das tiles que deseja adicionar para o grupo; 4. Adicione o catálogo e o grupo criados à uma role na PFCG na aba de menu; 5. Acesse o SAP Fiori Launchpad e visualize o grupo criado com a tile importada; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 69 Figura 63 - Configurando um novo grupo UI Theme Tools O UI Theme Tool é uma ferramenta para customização do tema dos apps SAP Fiori. Com essa ferramenta é possível colocar o logo da empresa, mudar as cores padrão e adicionar uma imagem de fundo para o SAP Fiori Launchpad. Ele pode ser usado também para customizar o tema de aplicações Web Dynpro, BSP, HTMLB, SAP Enterprise Portal, SAP GUI for Web, SAP Business Client e o Web UI Framework para SAP CRM. O SAP UI Theme Designer é disponibilizado como componente default no front-end server, e também está disponível como serviço on-demand no SAP Cloud Plataform e no SAP Enterprise Portal. Para acessar a ferramenta, execute a transação /UI5/THEME_DESIGNER ou acesse a seguinte URL: O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 70 https://<host:port of your Gateway System>/sap/bc/theming/theme-designer Figura 64 - UI Theme Designer Para criar um novo tema: 1. Clique em “Create a New Theme”; 2. Escolha um tema base para o seu tema, com isso todo o CSS inicial do tema escolhido será copiado. Escolha o “SAP_Belize” e clique no botão “Step 2”; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 71 3. Informe um Id e um título para o tema, e depois clique em “Step 3”; Figura 65 - Informar o id do tema 4. Preencha o vendor e informe se o tema deve suportarRTL (right to left). O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 72 Figura 66 - Preencher dados opcionais do tema Com o novo tema criado, preciso adicionar as “Target Pages” para poder prever as alterações que são feitas no tema. É possível tanto adicionar aplicações que existam no ambiente ou usar componentes de exemplo dentro do Theme Designer. Figura 67 - Adicionando uma aplicação como Target Page O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 73 Figura 68 - Adicionando aplicação de exemplo como Target Page Figura 69 - visualizando o target page Figura 70 – Opções de preview O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 74 Na barra da direita é onde customizamos o tema. Podemos customizar o Logo, a Brand Color (cor da marca), Base Color (cor base), definir a paleta de cores, entre outras propriedades. Temos o Quick menu que traz as propriedades mais relevantes para customizarmos e o Expert menu que possui propriedades mais específicas e detalhadas para customização. Figura 71 - Quick e Expert Menu Na paleta de cores é possível definir parâmetros com cores específicas, e esses parâmetros podem ser utilizados em qualquer ponto do Quick e Expert menu. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 75 Figura 72 - Paleta de cores Há também a opção de criar códigos CSS próprios para uma customização mais avançada, porém a SAP não garante que o código funcione em upgrades futuros, já que o CSS dos controles do SAPUI5 podem mudar. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 76 Figura 73 - Customização CSS Após finalizar o tema basta escolher “Save & Build” para que o tema seja criado no ambiente e fique disponível para uso. Figura 74 - Tema Customizado Para definir o tema como default do front-end, acesse a transação /UI2/NWBC_CFG_CUST e crie um registro conforme imagem abaixo: O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 77 Figura 75 - Definindo tema default Para fazer download do tema criado, fazer upload de temas no ambiente (como por exemplo de um tema criado no UI Theme Designer Service do SAP Cloud Plataform), deletar temas criados e transportar via request os temas, utilize a transação /UI5/THEME_TOOL. Figura 76 - Gerenciamento de temas O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 78 Instalação e Configuração Dentro de uma instalação Fiori existe o servidor back-end e o servidor front-end, sendo que cada um desses são considerados produtos diferentes. No back-end são instalados os componentes do SAP Business Suite e podem rodar sobre um banco de dados qualquer ou um banco de dados SAP HANA (recomendado pela SAP). No servidor front-end são instalados os componentes de UI do SAP Business Suite (SAP ERP, SAP CRM, SAP SRM e SAP SCM), o UI-addon que é o componente central para todos os apps SAP Fiori incluindo o SAP Fiori Launchpad, e onde é instalado o SAP Gateway. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 79 Figura 77 - Servidores ABAP do landscape do SAP Fiori O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 80 É possível tanto utilizar uma base de dados SAP HANA as database ou em um sidecar scenario, onde os dados do banco do back-end são replicados para o SAP HANA, e este pode ser usado para consultas dos Search Models dos apps fact sheet ou analytical através do SAP HANA XS engine. O XS é composto por dois componentes, o SAP HANA Live content e o SAP Smart Business, que provém todas as views que são consumidas pelos apps analíticos dentro do SAP Business Suite (para o SAP S/4 HANA a arquitetura é diferente como já foi mencionado no tópico anterior “Arquitetura SAP Fiori com o SAP S/4 HANA”). Para instalar o SAP Fiori 2.0 o servidor de front-end precisa estar no SAP Netweaver AS ABAP 7.50 ou superior (preferencialmente a última versão), e o componente precisa ser o SAP Fiori front-end server 3.0 ou superior. A partir das versões SAP S/4 HANA 1610 on-premise e SAP S/4 HANA Cloud 1608 o SAP S/4 HANA passou a suportar o Fiori 2.0. O SAP Fiori tem dois modos de instalação: modo central hub e modo embedded. Instalação Central Hub Esse é o modelo de instalação recomendado pela SAP, onde é instalado um servidor ABAP front-end com os componentes de UI do SAP Fiori e o SAP Gateway, e um ou mais servidores ABAP back-end que possuem os dados e lógicas do negócio. Por isso o nome central hub, pois o front-end é único sendo o ponto de acesso das aplicações, encaminhando as chamadas OData para o back-end correto. As vantagens nesse modelo são várias: • É necessário aplicar o tema no SAP Fiori e corrigir erros de tela em apenas um servidor; • As telas podem ser modificadas sem se preocupar com autorizações no back-end; • Um único servidor de acesso para vários sistemas back-end; • Maior segurança já que não há acesso direto aos dados do back-end; • É possível gerenciar o lifecycle das telas/aplicações Fiori independentemente do back-end; • Recomendado para cenários produtivos com carga alta e média de tráfego/uso. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 81 A única desvantagem desse modelo é o fato de você ter que ter uma máquina a mais no seu landscape, aumentando um pouco somente a latência de cada chamada OData (já que cada chamada terá uma chamada RFC a mais). Figura 78 - Instalação Central Hub O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 82 Embedded Deployment Embedded significa “embutido”. Nesse tipo de instalação, os componentes de UI do SAP Fiori e o SAP Gateway são instalados juntos com o servidor de back-end (na mesma máquina). As vantagens desse tipo de instalação são: • Não é preciso uma máquina a mais para o SAP Gateway, simplificando o landscape; • Acesso direto aos dados e lógicas de negócio, facilitando o desenvolvimento dos serviços OData; • Há apenas uma chamada remota que ocorre no SAP Web Dispatcher, reduzindo a latência. As desvantagens são: • Recomendado apenas para cenários produtivos com carga baixa uso/tráfego, ou para cenários de POC (proof of concept); • O SAP Gateway precisa ser configurado em cada servidor back-end; • Atualizações do SAP Fiori, do Gateway e das UIs são comuns, e só podem ser feitas em janelas de manutenção em servidores back-end produtivos, o que em empresas grandes costumam ser raras, ou seja, os componentes de front-end ficarão defasados se comparados em um cenário central hub onde podemos atualizar o servidor de front-end sem impactar o back-end. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 83 Figura 79 - Instalação Embedded SAP Fiori Library O primeiro ponto para instalar um app SAP Fiori é abrir o SAP Fiori library e localizar o app. Nessa aplicação constam todos os apps liberados pela SAP, pré-requisitos, SAP Notes de referência e informações para implementação do app. Vamos acessar o endereço https://fioriappslibrary.hana.ondemand.com e localizar o app “Manage Sales Orders” para S/4 HANA: https://fioriappslibrary.hana.ondemand.com/ O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING84 Figura 80 - App "Manage Sales Orders" no Fiori Library Na aba de “Product Features” temos um resumos das funcionalidades da aplicação, e na “Implementation Information” temos os passos necessários de implementação. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 85 Figura 81 - Implementation information Configurando o SAP Fiori Lauchpad e o SAP Fiori Launchpad Designer Serviços OData 1. No front-end server, acessar a transação /IWFND/MAINT_SERVICE; 2. Clique em ; 3. Procure pelo System Alias “LOCAL” e o external service “PAGE_BUILDER*”; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 86 Figura 82 - Nome do external service 4. Adicione os três serviços encontrados marcando as linhas e clicando em “Add Selected Services”: a. /UI2/PAGE_BUILDER_CONF (used by SAP Fiori launchpad designer); b. /UI2/PAGE_BUILDER_CUST (used by SAP Fiori launchpad designer); c. /UI2/PAGE_BUILDER_PERS (used by SAP Fiori launchpad); Figura 83 - Adicionar os três serviços 5. Selecione “Local Object”; 6. Clique em “Continue” ou pressione “ENTER”; 7. Repita os passos anteriores para os seguintes serviços: a. /UI2/Interop (used by both SAP Fiori launchpad and SAP Fiori Launchpad designer); b. /UI2/TRANSPORT (used by SAP Fiori launchpad designer); c. /UI2/LAUNCHPAD; 8. Acesse novamente a transação /IWFND/MAINT_SERVICE e agora deverá existir os cinco serviços adicionados; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 87 Figura 84 - Serviços adicionados Para verificar se os serviços estão funcionando, basta selecionar o serviço e clicar em “Call Browser” e o XML do OData deverá ser carregado (efetuar isso para todos os serviços): Figura 85 - Clicando em Call Browser O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 88 Figura 86 - Documento XML carregado Ativar Nodes do Internet Communication Framework É preciso ativar alguns serviços na transação SICF do front-end. Execute os seguintes passos: 1. Acesse a transação SICF; 2. Coloque “/sap/bc/ui5_ui5/sap” no campo Service Path e execute (F8); O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 89 Figura 87 - Preenchendo o Service Path 3. Selecione o serviço “ar_srvc_launch”, dê um botão direito e clique em “Activate Service”; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 90 Figura 88 - Ativando o serviço na SICF 4. Selecione o “Sim” com o ícone de hierarquia no pop-up, para ativar o serviço e todos os nodes abaixo dele; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 91 Figura 89 - Ativando o serviço 5. Execute os passos anteriores para os demais serviços abaixo: a. /default_host/sap/bc/ui5_ui5/sap/ar_srvc_news; b. /default_host/sap/bc/ui5_ui5/sap/arsrvc_upb_admn; c. /default_host/sap/bc/ui5_ui5/ui2/ushell; d. /default_host/sap/bc/ui2/nwbc; e. /default_host/sap/bc/ui2/start_up; f. /default_host /sap/public/bc/icf/logoff; g. /default_host/sap/public/bc/ui2; h. /default_host/sap/public/bc/ui5_ui5; i. /default_host/sap/bc/ui2/flp; O serviço “/sap/bc/ui2/flp” é conhecido como Cache Buster, ele invalida os files JavaScript no cache do browser quando detecta que houve alguma alteração na aplicação, diferentemente do acesso ao Fiori Launchpad direto onde é preciso invalidar o cache do browser manualmente em cada máquina (reiniciando o browser, por exemplo). O acesso direto ao SAP Fiori Launchpad pode ser feito pela seguinte URL: • https://<host>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap- client=<Client> O acesso ao SAP Fiori Launchpad com Cache Buster pode ser feito pelas seguintes URLs ou pela transação /UI2/FLP: • https://<server>:<port>/sap/bc/ui2/flp/ • https://<server>:<port>/sap/bc/ui2/flp/index.html • https://<server>:<port>/sap/bc/ui2/flp/FioriLaunchpad.html O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 92 O acesso ao SAP Fiori Launchpad Designer Customizing pode ser feito pela transação /UI2/FLPD_CUST ou pela URL: • http://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap- client=<client>&scope=CUST O acesso ao SAP Fiori Launchpad Designer Configuration pode ser feito pela transação /UI2/FLPD_CONF ou pela URL: • http://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap- client=<client>&scope=CONF Configurar tela de Logon e Logoff do SAP Fiori Launchpad É preciso configurar a tela de login do Fiori Launchpad. Para isso siga os passos a seguir: 1. Acesse a transação SICF e abra o serviço “/sap/bc/ui5_ui5/ui2/ushell” clicando duas vezes no serviço; 2. Clique em Error Pages, selecione System Logon e depois clique no botão Configuration; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 93 Figura 90 - Configuração da tela de login do SAP Fiori Launchpad 3. Selecione “Custom Implementation”, informe a classe ABAP “/UI2/CL_SRA_LOGIN” e clique em . O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 94 Figura 91 - Selecionar classe abap 4. Salve e a configuração da tela de login já estará correta; 5. Repita os passos para o serviço “/sap/bc/ui5_ui5/sap/arsrvc_upb_admn”. Configurar tela de Logoff do SAP Fiori Launchpad Após dar logoff no SAP Fiori Launchpad, somos direcionados para uma tela de logoff genérica. Vamos alterar a configuração para direcionar o usuário para a tela de login após o logoff. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 95 Figura 92 - Logoff genérico 1. Acesse a transação SICF e clique em Executar (F8); 2. Clique em “External Aliases”; 3. Selecione o node root (“default_host”) e clique em (criar novo Alias Externo); 4. Preencha o campo External Alias: “/default_host/sap/public/bc/icf/logoff”; 5. Vá a aba Target Element e clique duas vezes no serviço “/sap/public/bc/icf/logoff”; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 96 Figura 93 - Target Element de logoff 6. Vá em Error Pages e depois na aba Logoff Page; 7. Selecione a opção “Redirect to URL” e no campo Redirect preencha com o valor “/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html” ou outro endereço que queira redirecionar. 8. Clique em Salvar. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 97 Figura 94 - Redirecionamento de logoff Feito isso, a tela de logoff já estará personalizada. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 98 Roles de Autorização Existem dois perfis standard da transação PFCG para acesso ao Fiori Launchpad, o “SAP_UI2_ADMIN_700” que é utilizado para administração e “SAP_UI2_USER_700” que é utilizado para acesso ao SAP Fiori Launchpad. É preciso copiar essas roles standard, pois é necessário incluir nas autorizações da mesma os serviços Z* do OData que foram criados na /IWFND/MAINT_SERVICE. 1. Acessar a transação PFCG, coloque a role “SAP_UI2_ADMIN_700” e clique em copiar; Figura 95 – Role de administração do Launchpad 2. No campo “To Role”, coloque um Z no nome da role e em “Copy All”; Figura 96 - Copiar role de administração 3. Entre na role copiada em modo de edição, vá na aba Menu e adicioneas seguintes Default Authorizations; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 99 4. Selecione TADIR Service, Program ID “R3TR” e Object Type “IWSG”; 5. Adicione os serviços OData: a. ZINTEROP_0001 b. ZPAGE_BUILDER_CONF_0001 c. ZPAGE_BUILDER_CUST_0001 d. ZPAGE_BUILDER_PERS_0001 e. ZTRANSPORT_0001 f. ZLAUNCHPAD_0001 Figura 97 - Adicionar serviços TADIR 6. Clique em Copy, vá na aba Authorizations e clique em para propor um Profile Name; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 100 Figura 98 - Gerar profile 7. Salve as alterações; 8. Clique em “Change Authorization Data”, clique em Salvar e depois em Generate; Figura 99 - Modificar autorizações Figura 100 - Gerar profile Admin 9. Execute os mesmos passos para o perfil SAP_UI2_USER_700. Configurar SAP Gateway O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 101 Ativar SAP Gateway 1. Execute a transação SPRO; 2. Clique em ; 3. Ative o SAP Gateway conforme imagem abaixo. Figura 101 - Ativar o SAP Gateway Figura 102 - Ativando o SAP Gateway O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 102 Integrar SAP Gateway e back-end server Essa etapa é necessária somente para cenários de instalação central hub. No front-end será preciso criar uma conexão do tipo 3 na SM59 que aponte para o back- end. Por exemplo: • RFC Destination: “ERPCLNT120”. • Connection Type: “3”. • Description 1: “SAP ERP”. • Load Balancing: No. • Target Host: servidor back-end. • Instance Number: instância do servidor back-end. • Language: Idioma default (“PT” ou “EN”). • Client: Mandante do back-end. • User: Selecionar Current User. • Trust Relationship: Yes. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 103 Figura 103 - Criando RFC Destination Figura 104 - Logon & Security Após criada a destination no front-end apontando para o back-end, é preciso criar no back- end a mesma destination na transação SM59, só que apontando para o front-end. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 104 Feito isso é preciso rodar no back-end a transação SMT1 para criar o Trust Relationship entre os ambientes de back-end e front-end. Criar Alias de Sistemas Em instalações do tipo Embedded o único Alias que criamos é o LOCAL, já que o back-end e o front-end são o mesmo servidor. Para instalações central hub, é preciso criar um Alias correspondente para cada back-end. 1. Na SPRO, acessar o menu “Manage System Aliases” conforme imagem abaixo; Figura 105 - SPRO para System Alias 2. Adicione uma entrada LOCAL com as seguintes informações: • SAP System Alias: “LOCAL”. • Description: Enter “Local System Alias”. • Local GW: Marcar Check-box. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 105 • For Local App: Deixar em branco. • RFC Destination: “NONE”. • Software Version: DEFAULT • System ID: Em branco. • Client: Em branco. • WS Provider System: Em branco. Figura 106 - Criar Alias local Embeeded Search Para configurar o Embeeded Search no back-end é preciso ter um usuário com perfil SAP_ESH_CR_ADMIN e SAP_ESH_BOS_ADMIN. Ativar Serviços SICF Ativar os seguintes serviços na transação SICF: • default_host/sap/es/cockpit • default_host/sap/es/saplink • default_host/sap/es/search • default_host/sap/es/ina • default_host/sap/bc/webdynpro/sap/ESH_ADMIN_UI_COMPONENT • default_host/sap/bc/webdynpro/sap/esh_eng_modelling • default_host/sap/bc/webdynpro/sap/esh_eng_wizard O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 106 • default_host/sap/bc/webdynpro/sap/esh_search_results_ui • default_host/sap/bc/webdynpro/sap/wdhc_help_center Ativar Business Function Acessar a transação SFW5 e ativar as seguintes Business Functions: • BSCBN_HANA_NAV • BSESH_HANA_SEARCH Figura 107 - Ativar Business Function Rodar Task List (mandante 000) 1. Acessar a transação STC01 no back-end e informar a Task List “SAP_ESH_INITIAL_SETUP_000_CLIENT”; 2. Clicar em Execute ; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 107 Figura 108 - Rodar Task List para ESH 3. Clicar em Confirm; Figura 109 - Confirmar Task list 4. O ícone indica que é atividades manuais que precisam ser verificadas antes de executar a task list. Clique em para confirmar que as atividades manuais predecessoras já foram feitas; O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 108 Figura 110 - Confirmar atividades manuais 5. Marque todos os checkbox e clique em para executar a task list em background; Figura 111 - Execução da Task List para ESH 6. Os logs podem ser acompanhados na transação STC02. Rodar Task List Por Mandante Após concluída a Task List anterior do mandante 000, deve-se executar uma Task List no mandante produtivo “SAP_ESH_INITIAL_SETUP_WRK_CLIENT”. Executar em background pois será uma atividade demorada (clicar em ). O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 109 Figura 112 - Task List para mandante Ativação SAP HANA Para ativar o SAP Smart Business Modeler Service, primeiramente é preciso que o usuário que fará acesso ao KPI Modeler tenha as devidas permissões no banco de dados. Dê as seguintes permissões no SAP HANA para o usuário desejado (no caso usamos o FIORIADMIN): • sap.hba.r.sb.core.roles::SAP_SMART_BUSINESS_MODELER; • sap.hba.r.sb.core.roles::SAP_SMART_BUSINESS_RUNTIME; • sap.hba.apps.kpi.s.roles::SAP_SMART_BUSINESS_ MODELER; • sap.hba.apps.kpi.s.roles::SAP_SMART_BUSINESS_RUNTIME; • sap.hba.apps.ps.s.roles::SAP_SMART_BUSINESS_PROJECT_MANAGER. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 110 Figura 113 - Perfil de usuário SAP HANA No ABAP Front-end, de as seguintes permissões para o mesmo usuário (FIORIADMIN): • /UI2/SAP_KPIFRW5_TCR_S (esse perfil deve ser atribuído aos usuários que forem visualizar os KPIs); • /UI2/SAP_KPIMOD_TCR_S (perfil para criar KPIs); Figura 114 - Autorização para KPI Modeler Ativar os seguintes serviços na transação SICF: O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 111 • default_host/sap/bc/ui5_ui5/sap/CA_KPI; Feito isso os apps do KPI Modeler devem aparecer no seu SAP Fiori Launchpad. Figura 115 - Apps KPI Modeler Configuração Utilizando o Task List (STC01) Para a maior parte das configurações manuais descritas nesse capítulo, existem task lists que podem ser executadas para acelerar o processo, realizando a configuração de forma automática. A seguir segue uma tabela com as tasks list disponíveis. O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 112 Figura 116 - Tabela de Task list O conteúdo deste documento não deve ser divulgado sem a expressa e formal autorização da TECH CONSULTING 113 Implementação Como modelo vamos utilizar o app “Manage Sales Orders” para S/4 HANA. Acessamos primeiramente o Fiori Library para verificar os dados de implementação do app. O primeiro ponto é ativar o serviço da SICF. Figura 117 - Library para app Manager Sales Order Figura 118 - Ativar serviços