SAP TechEd Web IDE

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

Transcript of SAP TechEd Web IDE

Page 1: SAP TechEd Web IDE

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

Page 2: SAP TechEd Web IDE

▪ 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

Page 3: SAP TechEd Web IDE

▪ 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

Page 4: SAP TechEd Web IDE

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

Page 5: SAP TechEd Web IDE

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

Page 6: SAP TechEd Web IDE

▪ 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

Page 7: SAP TechEd Web IDE

▪ 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

Page 8: SAP TechEd Web IDE

LESSON 1: Learn ALL of the IDE Features

Page 9: SAP TechEd Web IDE

▪ 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

Page 10: SAP TechEd Web IDE

▪ 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

Page 11: SAP TechEd Web IDE

SAP Web IDE Lessons Learned

Demo

Page 12: SAP TechEd Web IDE

▪ 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

Page 13: SAP TechEd Web IDE

▪ 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

Page 14: SAP TechEd Web IDE

▪ 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

Page 15: SAP TechEd Web IDE

LESSON 4: UI5 Explored App

Page 16: SAP TechEd Web IDE

SAP Web IDE Lessons Learned

Demo

Page 17: SAP TechEd Web IDE

▪ 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

Page 18: SAP TechEd Web IDE

LESSON 5: HCP Cockpit

Page 19: SAP TechEd Web IDE

SAP Web IDE Lessons Learned

Demo

Page 20: SAP TechEd Web IDE

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

Take Away

Page 21: SAP TechEd Web IDE

▪ 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

Page 22: SAP TechEd Web IDE

SAP Web IDE Lessons Learned

Demo

Page 23: SAP TechEd Web IDE

▪ 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

Page 24: SAP TechEd Web IDE

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

▪ Understand Page Routes, particularly for Master Detail Applications

LESSON 7: Navigation and Routing

Page 25: SAP TechEd Web IDE

SAP Web IDE Lessons Learned

Demo

Page 26: SAP TechEd Web IDE

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

Take Away

Page 27: SAP TechEd Web IDE

LESSON 8: Templates & Example Apps

Page 28: SAP TechEd Web IDE

LESSON 8: Templates & Example Apps

Page 29: SAP TechEd Web IDE

▪ 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

Page 30: SAP TechEd Web IDE

▪ SAP Build: Open Source Design Tool, currently in Beta. ([email protected])▪ 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

Page 31: SAP TechEd Web IDE

▪ 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

Page 32: SAP TechEd Web IDE

SAP Web IDE Lessons Learned

Demo

Page 33: SAP TechEd Web IDE

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

▪ Free to use (for development anyway)

Take Away

Page 34: SAP TechEd Web IDE

▪ 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

Page 35: SAP TechEd Web IDE

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

Take Away

Page 36: SAP TechEd Web IDE

▪ 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

Page 37: SAP TechEd Web IDE

▪ 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

Page 38: SAP TechEd Web IDE

▪ 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

Page 39: SAP TechEd Web IDE

Please Submit your Session EvaluationMOB111 SAP Web IDE - Lessons Learned

David Fish & IBM GBS