MOB111 SAP Web IDE - Lessons Learned David Fish & IBM GBS

▪ 30+ Years experience as an application developer▪ Managing Consultant at IBM GBS▪ Board of Director Member for ISUG▪ Former TeamSybase (TeamPowersoft) member▪ Developer of the SAP Mobile Platform Administration

Cockpit▪ SAPUI5 Instructor

Your Presenter

▪ How to be a better UI5 Developer with the Web IDE

▪ How to optimize the use of the Web IDE in your organization

▪ Things to watch out for and be aware of when using the Web IDE

LEARNING POINTS

1.Familiarize Yourself with ALL of the IDE Features2.Debugging3.Chrome Dev Tools Emulation Mode4.SAPUI5 Explored App5.Hana Cloud Platform Cockpit

Top 10 Lessons Learned

6. Mock Data7. Navigation and Routing8. Templates and Example Apps9. Use of Other SAP Tools10.Browser Caching Is Not Your Friend

Top 10 Lessons Learned

▪ Take the time to read the documentation and familiarize yourself with all of the features of the Web IDE

▪ It is easy to get started and just use the Web IDE as a code editor, but a small investment in learning up front will pay big dividends over the long run

▪ Learn keyboard shortcuts

LESSON 1: Learn ALL of the IDE Features

▪ The right side toolbar contains useful tools:▪ Search and Replace▪ Git Panel▪ Git History▪ API Reference▪ Outline

LESSON 1: Learn ALL of the IDE Features

LESSON 1: Learn ALL of the IDE Features

▪ The Web IDE is constantly being updated with new features and bug fixes.

▪ Read the What’s New section of the documentation to stay up to date on what features are available to you as a developer

Take Away

▪ Learn how to use the Browser debugger and the UI5 debugging features:▪ Ctrl+Alt+Shift+P▪ Ctrl+Alt+Shift+S▪ sap-ui-debug = true (Web IDE Run Configuration)

LESSON 2: Debugging

SAP Web IDE Lessons Learned

Demo

▪ There are a lot of debugging tools and techniques available to use with the Web IDE.

▪ Learning to use them will make you a more effective developer.

Take Away

▪ Use Chrome’s Device Mode & Mobile Emulation feature to more accurately depict how your application will look and feel on various mobile devices

LESSON 3: Chrome Emulation Mode

▪ The emulation mode is useful and helpful during iterative development cycles, but also make sure you test on the platforms on which you will deploy your apps.

▪ Use the iOS simulator and Android simulators along with the devices themselves.

Take Away

LESSON 4: UI5 Explored App

SAP Web IDE Lessons Learned

Demo

▪ The Explored app is an invaluable tool for any UI5 developer. With it you can quickly see how various controls work and you can download the examples or copy the code for use in your own applications.

Take Away

LESSON 5: HCP Cockpit

SAP Web IDE Lessons Learned

Demo

▪ The Hana Cloud Platform (HCP) Cockpit is where you configure your backend connections, destinations, mobile services, and subscriptions.

Take Away

▪ Mock Data lets you develop your application before the OData Service is ready to be used

▪ The Web IDE doesn’t yet support using Mock Data with Fiori Applications

▪ You can configure the UI5 Mock Server to work with Fiori Applications

LESSON 6: Mock Data

SAP Web IDE Lessons Learned

Demo

▪ While the Web IDE is easier to use when a gateway service is available, with mock data you can build out the front end application while the back end and gateway services are being developed or customized.

Take Away

▪ Learn how UI5 and, particularly Fiori Navigation and Routing works

▪ Understand Page Routes, particularly for Master Detail Applications

LESSON 7: Navigation and Routing

SAP Web IDE Lessons Learned

Demo

▪ Investing time in understanding how navigation and routing works in Fiori applications will pay off in the long term.

Take Away

LESSON 8: Templates & Example Apps

LESSON 8: Templates & Example Apps

▪ The templates and example apps can kickstart your UI5/Fiori development. They also help you create applications that follow the Fiori Design Guidelines.

▪ Example apps are fully functioning and full featured applications that you can use as a starting point for your applications.

Take Away

▪ SAP Build: Open Source Design Tool, currently in Beta. (contact.build@sap.com)▪ Visually design your applications using drag and drop

controls.▪ Upload images and configure your application’s look and feel.▪ Create research studies to gather feedback from end users

and stakeholders.▪ Import the code generated by SAP Build into the Web IDE

(feature coming soon).

LESSON 9: Use other SAP Tools

▪ SAP Hybrid App Toolkit (HAT): Connect your cloud based Web IDE to the Kapsel (Cordova) SMP SDK running on your PC or Mac.▪ Quickly build UI5 apps that utilize Cordova or Kapsel plugins

to access mobile device features:▪ Camera (barcode scanner)▪ Geolocation (GPS)▪ Accelerometer ▪ and more…

LESSON 9: Use other SAP Tools

SAP Web IDE Lessons Learned

Demo

▪ SAP is investing heavily in tools that make the Web IDE even more powerful.

▪ Free to use (for development anyway)

Take Away

▪ Browser Caching is NOT Your Friend▪ Chrome Does Not Always Disable the Cache Even if

You Tell it To▪ You Can Clear the Browser History in Settings But

You Have to Reload the Web IDE Page and Launch The Preview Again

LESSON 10: Browser Caching

▪ Be careful when it comes to browser caching, particularly when running apps in debug mode.

Take Away

▪ Watch out for this file!▪ Normally won’t affect you but it might if:

▪ You import an app from SAP Build▪ You extend or customize a Fiori app

▪ It is meant to improve the performance of your app by combining a lot of the JS in your app into a file that will be downloaded when the app is launched

Bonus Tip: Component-preload.js

▪ RTFM (Read the Fine Manual) and familiarize yourself with the features of the Web IDE

▪ Become an expert in using the browser developer tools, especially the debugger

▪ Don’t build from scratch. Use templates or an example application as your starting point

▪ Implement Source Code Control. Take the time to configure Git

BEST PRACTICES

▪ The SAP Web IDE is a powerful tool for building UI5 and Fiori Applications

▪ Used in conjunction with other web development and design tools you can greatly optimize your development environment

▪ It is still fairly new technology but it is maturing rapidly▪ A small investment in learning can provide a big

return on investment

KEY LEARNINGS

Please Submit your Session EvaluationMOB111 SAP Web IDE - Lessons Learned

David Fish & IBM GBS