This document outlines lessons learned from using the SAP Web IDE. It discusses 10 key lessons, including learning all of the IDE's features, debugging techniques, using Chrome's emulation mode, the UI5 Explored app, HCP cockpit, mock data, navigation and routing, templates and examples apps, other SAP tools, and issues with browser caching. The presentation emphasizes learning the IDE thoroughly, using templates to accelerate development, and debugging tools to become a more effective developer. Best practices include reading documentation, using developer tools, and implementing source control.
5 Secrets to Successfully Publishing in Appcelerator's MarketplaceAxway Appcelerator
Learn how to turn your Titanium knowledge into Marketplace-ready components by watching “5 Secrets to Successfully Publishing in Appcelerator’s Marketplace” The webcast features Ruben Fonseca, who shares the secrets of his success as Marketplace’s #1 publisher.
5 Secrets to Successfully Publishing in Appcelerator's MarketplaceAxway Appcelerator
Learn how to turn your Titanium knowledge into Marketplace-ready components by watching “5 Secrets to Successfully Publishing in Appcelerator’s Marketplace” The webcast features Ruben Fonseca, who shares the secrets of his success as Marketplace’s #1 publisher.
Do you have an idea for a mobile app? Bloc recently launched an online apprenticeship in iOS Development. Learn to develop your own iOS apps full-time or part-time online.
Develop beautiful and complex apps for iPhone and iPad
Go deep into Objective-C and touch interfaces
Learn to design for iPhone and iPad form factors
Meet Your Host:
Aaron Brager - Director of Bloc's iOS Apprenticeship
Aaron has been developing iOS apps since the iPHone launched in 2007. Prior to Bloc, Aaron was an iOS Developer at Sprout Social. He has also worked at Apple and deck5 Software.
A design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. This course will give you high level insight into design patterns from the book "Design Patterns: Elements of Reusable Object-Oriented Software", which is the reference on the subject.
In our experience, we believe that understanding the context (with a real world example) of a Design Pattern is more important than the precise implementation details.
In this quick course on Design Patterns, you will learn the basics of GOF Design Patterns. Each Design Pattern will be explained in 2 to 3 minutes with a Real World Example.
You will not be bored with implementation details of each and every Design Pattern. We would touch upon them sometimes but for the most part we would focus on Real World Examples.
You will learn about Creation, Structural and Behavioral Design Patterns.
Design Patterns discussed : Decorator, Factory Method, Strategy, Singleton, Adapter, Facade, Template Method, Iterator, Observer, Command, Builder, Chain of Responsibility, Memento, Visitor, State, Flyweight, Mediator, Prototype, Proxy.
Intro to the Cappuccino web framework (http://cappuccino.org)
Embedded version:
http://280slides.com/Viewer/?user=2167&name=sdruby-cappuccino&fullscreen
Why do we need JSPs?
Explain JSP Lifecycle?
What is difference in roles of jsp in model 1 and model 2 architectures?
What are different types of comments in JSP?
What is Scriptlet, Expression and Declaration in JSP?
What are JSP implicit objects?
What are the disadvantages of Scriptlets?
What is difference between include directive and jsp:include action?
What is JSP Expression Language?
What are JSP EL implicit objects?
What is JSTL?
What happens if an exception is thrown from a JSP?
JSP Best Practices
How can you avoid multiple submit problem?
http://KOKUIS.my/html5
HTML5 – refers to the modern day of HTML which promotes native handling of video & audio & animation without having to install additional plugins to browser.
.
Bootstrap – A HTML framework supports responsive web design to provide one time webpage development for smartphone, tablet and desktop.
.
Mobirise – a free web design studio that support HTML5 & Bootstrap’s famous ‘block’ design.
Solving Web Applications Challenges with Build Process and SOCOW2
Nanoko is not a MVC or MVVM framework. Unlike angular or ember, Nanoko proposes a build process ensuring the reproducibility of the build. It also integrates testing, aggregation, minification, and a bunch of web languages such as Less and CoffeeScript. Nanoko also proposes a framework to build and run modular applications. the main outcome of Nanoko comes from this combination: an industrial build process, and a modular runtime.Nanoko does not focus on an UI-centric architecture style, but embraces service-orientation making the development more flexible, and the integration really easy. Ubidreams has developed a cross-platform app named "Gourmandise" for Remy Cointreau. This application is a mobile catalog used by the sales department when meeting customers. In addition to the iPad application a web application (CMS) was developed using the Nanoko stack. This CMS runs on any browser (including IE8)
A quick introduction to the Spring framework. Discover how to wire Java objects using Spring and dependency injection.
You'll learn how to set up your system for Spring development, how to use Maven and how to write testable code with Spring.
All code belonging to the course is in Github.
We take a focused approach taking a deep dive into most important and common Spring features.
During this tutorial, we discuss these features with examples
Spring Container, Dependency, and IOC (Inversion of Control)
Aspect Oriented Programming
JDBC
Unit Testing with JUnit
Dependency Management with Maven
By the end of this course, you will be able to
Understand the fundamentals of the Java Spring framework
Understand What the Spring framework is for
Develop Java Applications, the Spring way
My slides from the closing session of the first ever OpenUI5/SAPUI5 Conference - UI5con - at 11th of March in Frankfurt.
Great things can happen when a large software company like SAP decides to open source its JavaScript UI library SAPUI5. In my talk, i take a closer look behind the scenes and analyze the OpenUI5 spirit: How do we develop OpenUI5 and engage with the Open Source community? How do we manage internal and external contributions? What kind of apps and open source projects and are created with OpenUI5? And more...
Join our Community and find more about OpenUI5:
http://openui5.org/
More Information about UI5con:
https://wiki.scn.sap.com/wiki/display/events/UI5con+2016+-+Frankfurt
Do you have an idea for a mobile app? Bloc recently launched an online apprenticeship in iOS Development. Learn to develop your own iOS apps full-time or part-time online.
Develop beautiful and complex apps for iPhone and iPad
Go deep into Objective-C and touch interfaces
Learn to design for iPhone and iPad form factors
Meet Your Host:
Aaron Brager - Director of Bloc's iOS Apprenticeship
Aaron has been developing iOS apps since the iPHone launched in 2007. Prior to Bloc, Aaron was an iOS Developer at Sprout Social. He has also worked at Apple and deck5 Software.
A design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. This course will give you high level insight into design patterns from the book "Design Patterns: Elements of Reusable Object-Oriented Software", which is the reference on the subject.
In our experience, we believe that understanding the context (with a real world example) of a Design Pattern is more important than the precise implementation details.
In this quick course on Design Patterns, you will learn the basics of GOF Design Patterns. Each Design Pattern will be explained in 2 to 3 minutes with a Real World Example.
You will not be bored with implementation details of each and every Design Pattern. We would touch upon them sometimes but for the most part we would focus on Real World Examples.
You will learn about Creation, Structural and Behavioral Design Patterns.
Design Patterns discussed : Decorator, Factory Method, Strategy, Singleton, Adapter, Facade, Template Method, Iterator, Observer, Command, Builder, Chain of Responsibility, Memento, Visitor, State, Flyweight, Mediator, Prototype, Proxy.
Intro to the Cappuccino web framework (http://cappuccino.org)
Embedded version:
http://280slides.com/Viewer/?user=2167&name=sdruby-cappuccino&fullscreen
Why do we need JSPs?
Explain JSP Lifecycle?
What is difference in roles of jsp in model 1 and model 2 architectures?
What are different types of comments in JSP?
What is Scriptlet, Expression and Declaration in JSP?
What are JSP implicit objects?
What are the disadvantages of Scriptlets?
What is difference between include directive and jsp:include action?
What is JSP Expression Language?
What are JSP EL implicit objects?
What is JSTL?
What happens if an exception is thrown from a JSP?
JSP Best Practices
How can you avoid multiple submit problem?
http://KOKUIS.my/html5
HTML5 – refers to the modern day of HTML which promotes native handling of video & audio & animation without having to install additional plugins to browser.
.
Bootstrap – A HTML framework supports responsive web design to provide one time webpage development for smartphone, tablet and desktop.
.
Mobirise – a free web design studio that support HTML5 & Bootstrap’s famous ‘block’ design.
Solving Web Applications Challenges with Build Process and SOCOW2
Nanoko is not a MVC or MVVM framework. Unlike angular or ember, Nanoko proposes a build process ensuring the reproducibility of the build. It also integrates testing, aggregation, minification, and a bunch of web languages such as Less and CoffeeScript. Nanoko also proposes a framework to build and run modular applications. the main outcome of Nanoko comes from this combination: an industrial build process, and a modular runtime.Nanoko does not focus on an UI-centric architecture style, but embraces service-orientation making the development more flexible, and the integration really easy. Ubidreams has developed a cross-platform app named "Gourmandise" for Remy Cointreau. This application is a mobile catalog used by the sales department when meeting customers. In addition to the iPad application a web application (CMS) was developed using the Nanoko stack. This CMS runs on any browser (including IE8)
A quick introduction to the Spring framework. Discover how to wire Java objects using Spring and dependency injection.
You'll learn how to set up your system for Spring development, how to use Maven and how to write testable code with Spring.
All code belonging to the course is in Github.
We take a focused approach taking a deep dive into most important and common Spring features.
During this tutorial, we discuss these features with examples
Spring Container, Dependency, and IOC (Inversion of Control)
Aspect Oriented Programming
JDBC
Unit Testing with JUnit
Dependency Management with Maven
By the end of this course, you will be able to
Understand the fundamentals of the Java Spring framework
Understand What the Spring framework is for
Develop Java Applications, the Spring way
My slides from the closing session of the first ever OpenUI5/SAPUI5 Conference - UI5con - at 11th of March in Frankfurt.
Great things can happen when a large software company like SAP decides to open source its JavaScript UI library SAPUI5. In my talk, i take a closer look behind the scenes and analyze the OpenUI5 spirit: How do we develop OpenUI5 and engage with the Open Source community? How do we manage internal and external contributions? What kind of apps and open source projects and are created with OpenUI5? And more...
Join our Community and find more about OpenUI5:
http://openui5.org/
More Information about UI5con:
https://wiki.scn.sap.com/wiki/display/events/UI5con+2016+-+Frankfurt
Explaining what UI5 controls are, how they can be developed. Including links to several running jsbin examples explaining different aspects of control development. With an updated resources section at the end.
Slides were initially created for a UI5 CodeJam in s'Hertogenbosch, Netherlands, and then adapted for a 30-minute presentation given at UI5con 2016 in Frankfurt.
High level overview about SAPUI5/OpenUI5 with tips and tricks and lots of links how to get started. Focus of this presentation are the SAP InnoJam events (30 hour hackathons).
Want to build an XPages application, but not sure how? Kathy and Dave will show you how to build a sample help desk application from start to finish. Step by Step they will show you how to create, read, update, and delete tickets. Along the way you'll be introduced the most common XPages concepts like SSJS, Custom Controls, View and Repeat Controls, Extension Library, CSS frameworks, and much more. Go home with a working application that you can use today!
Building a scalable app factory with Appcelerator PlatformAngus Fox
Sharing the challenged in building a Mobile Backend as a Service (MBaaS) platform for Appcelerator Alloy apps using Joomla and a whole host of development tools for a London based startup where I am CTO
Published December 18, 2015, in Education
Final presentation for CSC 404 class - Software Design & Development.
CSC 404
Software Design & Development I
Hampton University
Fall 2015
---
FVCproductions
https://fvcproductions.com
HELLO SAP WORLD - Let’s get familiar with the latest SAP mobile technology: SAP FIORI! Join us in our step-by-step tutorial as we demonstrate just how easy it is to get SAP data on your mobile phone, accessing it from anywhere at any time! This short presentation is part of our famous FIORI Training Programs now available to our clients.
Building Mobile Apps: A PhoneGap Enterprise Introduction for Developersarumsey
Adobe Experience Manager (AEM) Apps and PhoneGap Enterprise bring together the simplicity and ease-of-use of the AEM authoring environment with the power and portability of PhoneGap mobile applications. Using AEM Apps you can create, author, and update your applications within AEM. With PhoneGap Enterprise you can choose from a range of pre-built app components, build your app across multiple mobile platforms, and test your apps within the PhoneGap Enterprise mobile application.
In this lab you will be introduced to Adobe Experience Manager and PhoneGap, learn how to quickly and easily build your own mobile application, how to test it in simulators for a range of devices, and how to track app usage.
A Crash Course in Rapid Application DevelopmentProgress
Progress Rollbase is the rapid application development platform at the core of Progress® Pacific™. Watch these videos, and you’ll be on your way to developing and deploying powerful cloud-native apps with minimal coding, even if you are from a non-technical background!
Ecommerce Mini Project / Group Project CodingHemant Sarthak
This is an Ecommerce Mini Project / Group Project Presentation that I created as part of the college curriculum, this presentation is a more coding focused presentation that you might need to give in your college.
If you want Design focused presentation please see Ecommerce Mini Project / Group Project Design PPT that I uploaded.
It has things explained like VS Code, Adobe XD, Owl Carousel etc.
Are you struggling to choose the right platform to build your first mobile app? Would you like to know more about React Native before taking decision? Here is the document summarizes everything about React Native and various mobile application development frameworks. Surely make your life easier.
Build native iOS, Android and Windows apps with JavaScript.
Ibm worklight - going from xpages mobile to native mobile applicationsMark Roden
Abstract
In this session John and Mark will demonstrate how an XPages developer can make the simple, practical, logical evolution from XPages to IBM Worklight developer.
Have you ever wondered how to easily integrate a mobile phone native feature set with your corporate web applications? We will show that any XPages developer currently building mobile-accessible websites already has the skillset to build native mobile apps using IBM Worklight. We will cover installation, setup, similarities in designer clients, the test environment, the skills necessary and provide a working example.
You have the skills, you have the knowledge. Your only challenge is to come to the session and understand how to make this work. Go from HTML5 to native in minutes.
An introduction to Emulsify
In this presentation, Safallia Joseph of Valuebound has walked us through Emulsify -a component driven prototyping-tool using Pattern Lab. The various agendas include:
A brief intro to Components, Atomic Designs and Pattern Lab
How to get up and running with Pattern Lab in Drupal
An intro to Emulsify
Emulsify’s implementation of CDD
Getting started with Emulsify
Connecting Emulsify to Drupal
Benefits and challenges of a decoupled front end workflow in Drupal Projects
----------------------------------------------------------
Get Socialistic
Our website: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
Twitter: http://bit.ly/2gFPTi8
1. MOB111 SAP Web IDE - Lessons Learned
David Fish
& IBM GBS
2. ▪ 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
3. ▪ 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
4. 1.Familiarize Yourself with ALL of the IDE Features
2.Debugging
3.Chrome Dev Tools Emulation Mode
4.SAPUI5 Explored App
5.Hana Cloud Platform Cockpit
Top 10 Lessons Learned
5. 6. Mock Data
7. Navigation and Routing
8. Templates and Example Apps
9. Use of Other SAP Tools
10.Browser Caching Is Not Your Friend
Top 10 Lessons Learned
6. ▪ 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
7. ▪ 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
9. ▪ 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
10. ▪ 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
12. ▪ 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
13. ▪ 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
14. ▪ 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
17. ▪ 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
20. ▪ The Hana Cloud Platform (HCP) Cockpit is where
you configure your backend connections,
destinations, mobile services, and subscriptions.
Take Away
21. ▪ 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
23. ▪ 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
24. ▪ Learn how UI5 and, particularly Fiori Navigation and
Routing works
▪ Understand Page Routes, particularly for Master
Detail Applications
LESSON 7: Navigation and Routing
29. ▪ 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
30. ▪ 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
31. ▪ 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
33. ▪ SAP is investing heavily in tools that make the Web
IDE even more powerful.
▪ Free to use (for development anyway)
Take Away
34. ▪ 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
35. ▪ Be careful when it comes to browser caching,
particularly when running apps in debug mode.
Take Away
36. ▪ 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
37. ▪ 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
38. ▪ 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
39. Please Submit your Session Evaluation
MOB111 SAP Web IDE - Lessons Learned
David Fish
& IBM GBS
