SAP Fiori Mobile Apps and Tools for Apache Cordova

Visual Studio Blog

Cordova makes it easy to build an app for iOS, Android, and Windows using web technologies. Although Blank project templates in Visual Studio Tools for Apache Cordova provide all the raw materials to build your basic “Hello World”, you have also told us that you would like to see richer starting points. We have covered starting points for frameworks like Ionic and Monaca in the past, but today we are going to take a look at how a major business platform company is working towards this goal with Cordova and Visual Studio: SAP.

SAP, SAP Fiori, and the SAP Mobile SDK

As the market leader in enterprise application software, SAP is at the center of today’s business and technology revolution. SAP’s innovations enable more than 291,000 customers worldwide to work together more efficiently and use business insight more effectively. SAP is building their next-generation platform and business systems that include a strong focus on mobile based workflows as well as a distinctive set of design guidelines called SAP Fiori. In addition to end-user mobile apps for their business systems, SAP also offers an underlying platform and server infrastructure that enables developers like you to build custom apps that take full advantage of enterprise business data.

With over 500+ role-based apps, SAP solutions such as SAP S/4HANA, SAP Simple Finance, and the SAP Business Suite are applying SAP Fiori responsive design patterns to provide a personalized, responsive and simple user experience from either web or hybrid apps.

The SAP Mobile Platform (SMP) and in particular the Mobile Platform Server and SDK enhances apps built using SAP5UI and Fiori Mobile UX by providing additional mobile device capabilities not available to traditional web apps. SAP provides multiple development options for mobilizing Fiori – SAP Web IDE, Cloud build or Custom Fiori client. Under the covers, these Fiori clients are built using a standard Apache Cordova Command Line Interface (CLI) project and a series of SAP built value-add Cordova plugins.

As a part of the collaboration between SAP and Microsoft, SAP plans to introduce some features to streamline development of SAP-powered mobile apps in Visual Studio. This blog post will cover the option of bringing Fiori apps to mobile devices through the creation of custom Fiori clients using Tools for Apache Cordova. Note that today Microsoft and SAP also announced that Microsoft Intune’s App SDK can be integrated with Fiori clients to add greater app level security controls when using Microsoft’s Enterprise Mobility Suite and will even be available in SAP’s cloud build service. You can expect even more in the future, so be sure to check out this video for more information!

SAP created the SAP Fiori Client to provide Fiori applications:

• Additional native capabilities (such as Camera, Barcode Scanner, etc.) on top of what a typical browser provides
• Management of the local web cache better when new versions of the application are released by the Fiori server
• Additional security to protect the application from unauthorized access
• Provisioning the user certificate through Mobile Secure and SAP Mobile Platform

With SMP, developers and IT staff can focus on delivering Fiori solutions to the business rather than building infrastructure. Enterprise requirements addressed by SMP include:

• Enterprise authentication (single- or multi-factor), single sign on, network edge security, SSL, reverse proxy, remote access
• Secure data at rest and data in motion, encryption
• User/device registration, onboarding, managed rollout
• Application lifecycle management
• Offline Data, Mobile Database Integration and data composition for SAP and 3rd party back-end systems and databases
• Central administration, Tracing and logging for end-user supportability
• Horizontal scalability, high availability, usage statistics

Custom Fiori clients allow you to extend these base features and brand your Fiori client, add additional device capabilities by with Cordova plugins, remove plugins you do not intend to use to reduce your app’s size, and even add additional code packaged with the client app to meet your own specific needs (such as customizing your offline experience).

Tools for Apache Cordova

All editions of Visual Studio 2015 now come bundled with Tools for Apache Cordova which is designed to make it easy for you to build cross platform apps targeting Android, iOS, Windows, and Windows Phone using Cordova from one convenient IDE. Tools for Apache Cordova is “command line interoperable” which means that you can easily take a standard Cordova CLI project (like a Fiori client project) and further customize it to meet your needs. Once in Visual Studio you can take advantage of all of Visual Studio’s great cross-platform features like IntelliSense, integrated debugging for Android and iOS, and the high-speed Visual Studio Android Emulator.

Even better, you are able to use Team Foundation Server 2015 or Visual Studio Online for collaboration and continuous integration even when building an iOS version of your app or use Visual Studio Code to edit your project on a Mac. You can even take advantage of the cross-platform “TACO CLI” (Tools for Apache Cordova Command Line Interface) to simplify Cordova apps development using your favorite text editor.

Using Visual Studio on Windows to Build an App

The SAP Mobile SDK enables developers to build apps using Cordova through the integrated Kapsel SDK. The Kapsel SDK contains a set of Cordova plugins that you can add to your own Cordova project. In addition, the SDK provides a script to generate a Custom Fiori Client project ready for use.

To get started building your own Fiori client, follow these steps:

1. Download the latest SAP Mobile SDK (or a free trial from the SAP Store) and install it on your machine. (Ex: C:SAP)

2. Follow the instructions in our samples GitHub repo to generate a Custom Fiori Mobile Client project or to simply add a SAP Kapsel SDK plugin to your own Cordova app.

3. Install Visual Studio 2015, select the Tools for Apache Cordova option, and simply open the Cordova project you created in Visual Studio using the File > New > Project From Existing Code… menu item.

You can currently build custom SAP Fiori clients for Android and iOS with Windows support expected in the future. Pick either Android or iOS, a device or emulator / simulator debug target, and click the debug button to see the app in action!

Using Visual Studio Code on a Mac or Windows to Build an App

If you would prefer to use Visual Studio Code or your favorite text editor on Windows or a Mac:

1. Follow the same instructions above to create your Cordova project
2. Install the TACO CLI and use it to help you install any pre-requisites
3. Simply open the folder containing your project in VS Code, start editing, and use the “taco” command to build and run as appropriate!

Summary and the Future

SAP’s Mobile SDK combined with Tools for Apache Cordova can help you build quality, secure, and great looking SAP Fiori mobile apps faster than ever before. As a part of the collaboration between SAP and Microsoft, SAP’s roadmap includes Visual Studio support for building, debugging, and deploying fully “packaged” versions of Fiori apps along with integration with a cloud build service and Microsoft has some new and exciting capabilities already in the works.

You can expect much more from SAP and Microsoft in ensuring that you are able to build and deploy the high quality, secure apps for your enterprise needs in the future.

If you have not already, check out this video for more information!

You can find more information about SAP Fiori and how the SAP Mobile SDK can help you mobilize your business apps at SAP’s developer help portal.

You can find more information about Tools for Apache Cordova from the portal site. Microsoft is always interested in your feedback, so please contact the product team via UserVoice, Send-a-smile, Twitter, StackOverflow, or email.

Visual Studio Blog

Follow