Build your own Fiori hybrid mobile app rapidly using SAP Web IDE Marc Anderegg, SAP SESSION CODE: BT404
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
BEST PRACTICES Use SAP Web IDE and the Hybrid Application Toolkit to build your own Fiori hybrid mobile apps.
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.
MOBILE APPLICATION TYPES Kapsel Mobile Web Hybrid Native Web Browser Mobile App Mobile App
BUILDING APPS WITH SAP WEB IDE SAP Web IDE Hybrid Application Toolkit SAPUI5 application Fiori application (Fiori) hybrid mobile app
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)
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
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
KEY FEATURES (TEMPLATES) Basic SAPUI5 project SAP Fiori Application Sample applications Plugin Development Extensibility of Fiori applications Create your own custom template
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
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
CONFIGURE MOBILE DEVICES Select plugins to be used in the Device Configuration
LAYOUT EDITOR (WYSIWYG) Design your view graphically in the Layout Editor and display the content of the XML view
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
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
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
Demo
GETTING STARTED WITH SAP WEB IDE Web IDE on HCP Trial SAP Web IDE online help SAP Community Network https://account.hanatrial.ondemand.com https://help.hana.ondemand.com/sap_rde/frameset.htm?62 84a94889db4f3cad001ba674282f20.html http://scn.sap.com/docs/doc-55465
GETTING STARTED WITH HAT HAT online help HAT Add-on (PDF) SAP Community Network https://help.hana.ondemand.com/webide_hat/frameset.htm https://help.hana.ondemand.com/webide_hat/frameset.htm http://scn.sap.com/docs/doc-62033
STAY INFORMED Follow the ASUGNews team: Tom Wailgum: @twailgum Chris Kanaracus: @chriskanaracus Craig Powers: @Powers_ASUG
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 www.asug.com