Анна Якубенко, Татьяна Лебедева - SAP ERP в качестве backend для HTML5 приложения

Video: https://youtu.be/yGkWkUEtd9o

1. Анна Якубенко,Татьяна Лебедева SAP Day 21 октября 2017 SAP ERP в качестве Back-End для HTML5-приложения
2. Модернизация Web Application Web Application Installed Web Windows Client-Server App • Модернизация существующих клиент-\браузер-зависимых веб- приложений (ASP.NET -> HTML5) • Модернизация существующих приложений, требующих установки веб-клиентов, с использованием современных веб-технологий (Java Web Start client -> HTML5/JS based client) • Модернизация классических клиент-серверных приложений в веб-приложения • Сохранить приложения, требующие установки веб- клиентов, и классические клиент- серверные приложения для административных пользователей Migration for standard clients Migration for power & admin clients 1 2 3 4 5 1 2 3 4 5 2 Installed Web Client (ASP.NET, Java Web Start) Windows Client-Server App
3. КарТа реКоМендованных Технологий 3 Client WEB CLIENT Server webserver Local storage SOAP xml storage oracle mysql PostgreSQL FILE SYSTEM access HTTP cache caches redis memcached Application server sass less Pre-processors JavaScript transpilers typescript babel Css frameworks bootstrap html5 css3 python Django flask JavaScript Express Node.js application java play spring jee msg queues rabbitmq 0mq ruby rails Sinatra APIs / ESB REST JSON JS frameworks react VUE.JS Telekom brand design FluX DATA REPOSITORY DATA BASE WEB SERVER APPLICATION SERVER ENABLING COMPONENTS APPLICATION INTEGRATION DEVELOPMENT TOOLS USER INTERFACE ENABLING COMPONENTS APPLICATION INTEGRATION INTER- FACE APPLICATION INTEGRATION DATA REPOSITORY DATA BASE Basic Fat Client Local storage UI Frameworks Hardware interfaces Runtime JAVA JRE Win32 / WinRT ENABLING COMPONENTS DATA REPOSITORY USER INTERFACE APPLICATION INTEGRATION 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 SAP Client
4. Серверная ЧаСТЬ web-приложения 4 Server webserver xml storage oracle FILE SYSTEM Application server application API REST JSON DATA REPOSITORY DATA BASE WEB SERVER APPLICATION SERVER APPLICATION INTEGRATION INTER- FACE Клиентская часть ограничена условиями browser runtime (JavaScript). Поэтому желательно реализовывать серверную часть так, чтобы она предоставляла для клиентской части легкий для вызова API (т.н. RESTful JSON API)
5. КлиенТСКая ЧаСТЬ WEB-приложения 5 Client WEB CLIENT Local storage JavaScript Css frameworks bootstrap html5 css3 JS frameworks ANGULAR JS SAPUI5 Telekom brand design USER INTERFACE ENABLING COMPONENTS INTER- FACE DATA REPOSITORY DATA BASE  должна предоставлять адаптивный пользовательский интерфейс  должна работать без дополнительной настройки браузера и установки plug-in’ов  при разработке должны быть использованы framework’и, обеспечивающие независимость от браузера  должна быть протестирована во всех общеизвестных браузерах с использованием следующих движков:  WebKit with V8 and Nitro (e.g. Chrome, Vivaldi, Safari)  Gecko with SpiderMonkey (e.g. Firefox)  EdgeHTML with Chakra (e.g. Microsoft Edge)  Trident v7.0 with Chakra (e.g. Microsoft IE11)
6. возМожная архиТеКТура: варианТ 1 6
7. возМожная архиТеКТура: варианТ 2 7
8. Back-end: SAP GATEWAY и Odata 8 8 SAP Gateway – часть платформы SAP Netweaver, предоставляющая централизованный и единообразный досуп различным устройствам, средам и платформам к SAP системам с помощью протокола OData  не зависимый от платформы и устройства HTTP-протокол  предоставляет REST интерфейс (поддержка CRUD-операций)  передача данных в форматах XML/JSON  поддерживает основные виды аутентификации  поддержка offline сценариев  поддержка SAP Annotations Преимущества OData
9. Back-end: СоСТавляющие Sap gateway 9
10. вСТроенная уСТановКа и лоКалЬная разрабоТКа СервиСов 10 Особенности:  Разработка OData сервисов выполняется системе, содержащей данные и бизнес-логику  Для Internet сценариев нужны дополнительные настройки безопасности  меньшее время работы, так как нет промежуточных прослоек Преимущества  для каждой Back-End системы требуется настройка SAP Gateway компонента  редкие обновления системы  не может быть использован в качестве Hub’а для других систем Недостатки
11. HUB уСТановКа и лоКалЬная разрабоТКа СервиСов 11 Особенности:  SAP Gateway выступает в качестве Endpoint при коммуникации  Разработка OData сервисов выполняется системе, содержащей данные и бизнес-логику  единая точка входа для всех Back-End систем  может иметь более высокую версию SAP Netwaever AS, чем Back-End системы, и использовать более актуальные сценарии взаимодействия с Front-End  более безопасный доступ к Back- End системам Преимущества  требует установки отдельной инстанции  увеличенное время взаимодействия Back-End и Front-End Недостатки
12. HUB уСТановКа и разрабоТКа СервиСов в SAP GATeway СиСТеМе 12 Особенности:  SAP Gateway выступает в качестве Endpoint при коммуникации  Разработка OData сервисов выполняется в SAP Gateway системе  Back-End системы не задействованы в разработке  разработка OData-сервисов выполняется один раз для всех Back-End систем  может иметь более высокую версию SAP Netwaever AS, чем Back-End системы, и использовать более актуальные сценарии взаимодействия с Front-End  Более безопасный доступ к Back- End системам Преимущества  требует установки отдельной инстанции  Увеличенное время взаимодействия Back-End и Front-End  Вызов только RFC-enabled функциональности Недостатки
13. СТруКТура http-запроСа 13
14. обрабоТКа http-запроСа в sap Gateway 14
15. SAP Gateway Client 15
16. МоделЬ данных Odata-СервиСа 16
17. реализация Odata-СервиСа в abap 17
18. опТиМиСТиЧеСКая блоКировКа 18
19. Front-end: Model-View-ControlLER (MVC) шаблон 19
20. Front-end: обзор фрейМворКов 20  CSS3  HTML5  открытый код  интуитивен и прост в использовании  адаптивность на разных устройствах  подробная документация и коллекция шаблонов  поддерживается и активно развивается Bootstrap – фреймворк для разработки пользовательского интерфейса  JavaScript, Ajax  открытый код  переносит часть функционала на клиентскую часть («толстый клиент»)  основывается на MVC шаблоне  отделяет уровень представления от уровня бизнес-логики  упрощает тестирование  двухсторонняя привязка данных (динамическая синхронизация модели и представления) AngularJS – фреймворк для разработки одностраничных веб-приложений
21. Front-end: поЧеМу Bootstrap+AngularJS  Проверенные и широко используемые фреймворки (открытый код, развитое сообщество);  Удовлетворяют требованиям к удобству использования и доступности для людей с ограниченными возможностями, интернализация;  Быстрый старт (курсы, учебники, документация);  Гибкость: есть возможность выбирать и дополнять компоненты, чтобы получить внешний вид, отвечающий требованиям заказчика (корпоративный дизайн);  Реализация MVC шаблона. Разделение этапов разработки: верстка представления, контроллер, сервис для получения данных;  Поддержка как десктопных, так и мобильных браузеров;  Соответствие общепринятым стандартам веб-разработки (W3C) и безопасности приложений (OWASP).  Упрощает тестирование. 21
22. AngularJS: привязКа данных (2-way data binding) 22
23. AngularJS: рабоТа С OData 23
24. безопаСноСТЬ 24  Транспортный уровень (HTTPS, RFC c SNC, Proxy-Server)  Проверка ввода  Защита от Cross-Site Scripting (XSS-атаки)  Защита от Cross-Site Request Forgery (XSRF-атаки)  Virus Scan Interface для файлов  Авторизация пользователей происходит в Back-End системе
25. полиТиКа ролей и полноМоЧий 25 HTML-view: Авторизация OData: читает из таблицы права и фильтрует их для пользователя JS-controller: формирует набор доступных компонентов и отображает HTML-view HTTP GET-Request HTTP Response
26. вопроСы? СпаСибо за вниМание! 26