Build your own Fiori hybrid mobile app rapidly using SAP Web IDE Marc Anderegg, SAP SESSION CODE: BT404

Transcription

1

2 Build your own Fiori hybrid mobile app rapidly using SAP Web IDE Marc Anderegg, SAP SESSION CODE: BT404

3 LEARNING POINTS What is SAP Web IDE What are its key features What is the Hybrid Application Toolkit What are the steps to build your own app See a demo to build a Fiori hybrid mobile app How can you get started today

4 BEST PRACTICES Use SAP Web IDE and the Hybrid Application Toolkit to build your own Fiori hybrid mobile apps.

5 KEY LEARNINGS SAP Web IDE and Hybrid Application Toolkit help you to create hybrid mobile apps. The hybrid apps are built as Cordova containers. Today, as a developer, you can preview and run the app on an Android or ios emulator, on a mobile device or even in a browser.

6 MOBILE APPLICATION TYPES Kapsel Mobile Web Hybrid Native Web Browser Mobile App Mobile App

7 BUILDING APPS WITH SAP WEB IDE SAP Web IDE Hybrid Application Toolkit SAPUI5 application Fiori application (Fiori) hybrid mobile app

8 WHAT IS SAP WEB IDE? Browser-based (Web) toolkit available on SAP HANA Cloud Platform An Integrated Development Environment to create new UI5/HTML5 or custom Fiori apps extend SAP Fiori apps or UI5 apps Provides standard Web development tools like code editors, wizards, and WYSIWYG tooling that are optimized for building responsive HTML5 apps with SAPUI5 (e.g., code completion)

9 WHAT IS SAP WEB IDE? Application templates act as the foundation for highly efficient app development Supports the E2E application lifecycle: UI design, development, testing, deployment, and customer extensions for responsive SAPUI5 apps Everything is source code-based the tool never gets in the way of the developer

10 KEY FEATURES (DEV ENVIRONMENT) Source code editor with SAPUI5 specific code completion Layout Editor (WYSIWYG) Instant application preview in browser Mock data support for testing purposes Import and deploy to HANA Cloud Platform and ABAP repository User-friendly interactive app extension mechanisms Extension possibilities via plugins Project persistency Mobile hybrid app development support

11 KEY FEATURES (TEMPLATES) Basic SAPUI5 project SAP Fiori Application Sample applications Plugin Development Extensibility of Fiori applications Create your own custom template

12 WHAT IS HYBRID APP TOOLKIT (HAT)? Enables developers to develop and deploy Apache Cordova hybrid apps in SAP Web IDE A plugin and add-on to SAP Web IDE HAT has 3 components: 1. HAT Plugin for Web IDE 2. HAT Connector to local build environment 3. HAT Companion application SAP HANA Cloud Platform SAP Web IDE HAT Connector HAT Companion app Hybrid Application Toolkit (plugin) HAT (add-on) Android SDK Tools Kapsel XCode

13 DEVELOPMENT PROCESS OVERVIEW Create Develop Preview Deploy New project Reference application Extensibility project Coding Templates WYSIWYG Design Visual Extensibility to HANA Cloud Platform to ABAP repository to Mobile* * not in current GA release, planned for future release

14 CONFIGURE MOBILE DEVICES Select plugins to be used in the Device Configuration

15 LAYOUT EDITOR (WYSIWYG) Design your view graphically in the Layout Editor and display the content of the XML view

16 LIVE PREVIEW AND TESTING Use pre-built hybrid companion app Test native device APIs Double-click the app and refresh Give instant response without build the project

17 RUN ON EMULATOR OR DEVICE Build mobile app for Android or ios including all artifacts (HTML Install it on emulator or mobile device Run the app

18 PREVIEW IN A BROWSER Live Preview & Testing Use the browser with Cordova Facade Quickly validate hybrid app functionality without deploying to an emulator or device Allow/Deny access to mobile features, i.e. camera of laptop

19 Demo

20 GETTING STARTED WITH SAP WEB IDE Web IDE on HCP Trial SAP Web IDE online help SAP Community Network a94889db4f3cad001ba674282f20.html

21 GETTING STARTED WITH HAT HAT online help HAT Add-on (PDF) SAP Community Network

22 STAY INFORMED Follow the ASUGNews team: Tom Chris Craig

23 THANK YOU FOR PARTICIPATING Please provide feedback on this session by completing a short survey via the event mobile application. SESSION CODE: BT404 For ongoing education on this area of focus, visit