? Build Elegant Enterprise Apps for Android with SAP Fiori and SAP Build Code

Introduction

Welcome to Week Two of Def Toober Fest! Today, we will explore how to build elegant Enterprise apps for Android using SAP Fiori and SAP Build Code. Our presenters, Natalie and Mark, will guide us through this process by discussing user experience design, showcasing a Marketplace app scenario, and demonstrating the development workflow.

Introduction

Natalie, a UX designer on the SAP Fiori mobile for Android team, and Mark, a developer on the SAP BTP SDK for Android team, introduced themselves. Together, they aim to highlight the importance of user experience in app development.

User-Centric Design

A successful user experience (UX) begins with the user. They presented the Marketplace app, an internal application designed for employees to browse and order office supplies. As part of user feedback, a use case was introduced featuring Jim, an SAP employee who wants to track his orders and delivery statuses.

Identifying User Pain Points

Jim's feedback pointed out two main issues:

It is tedious to find ordered items.
The order status is not easily understood.

Based on this feedback, a user story was formulated:

"As an employee, I want to quickly search and keep track of items so that I know my preferred equipment will be delivered safely."

With this user-centric approach established, Natalie described the iterative design process, including how to enhance the existing app pages and add new ones for better order tracking.

Design System Benefits

Utilizing a design system fosters collaboration across various teams and ensures that products are accessible and user-tested. A design system affords a cross-platform experience and consistency across all UI elements.

SAP Fiori Guidelines

Natalie emphasized the importance of starting with SAP's design guidelines, which can be found at experience.sap.com/fiori-design. Here, developers can explore components, colors, and theming to help guide their designs.

Additionally, the SAP Fiori community has made UI kits available via Figma, making it easy to create and share designs among team members.

Designing in Figma

Natalie demonstrated how to use Figma for designing the UI. She started by enhancing the homepage to show order information prominently. This included changing labels, removing unnecessary elements, and adding status indicators to the UI. The iterative design allowed for real-time modifications and enhancements, keeping the user in mind.

Development with SAP Build Code

Mark transitioned the presentation to development, introducing SAP Build Code and the mobile SDK that helps developers build mobile applications efficiently. He discussed how he set up the application in Android Studio and the importance of synthetic sample data for testing purposes.

Generative AI for Sample Data

Using generative AI, Mark created sample data for the app based on the Figma design mockups. This AI-assisted approach not only sped up the development process but also created object data that closely resembled potential real-world scenarios.

Building Out Screens and Functionality

Mark led the audience through creating various screens, including a card view for the homepage, a list view for order details, and a detail page featuring a step progress indicator. He emphasized the importance of linking between screens and getting the navigation just right.

Conclusion

In conclusion, Natalie and Mark's session illustrated the process of building an elegant enterprise app for Android using SAP Fiori and SAP Build Code. They showcased the value of user feedback, the advantages of a cohesive design system, and how generative AI can assist during the development phase. The collaborative nature of the design and development process played a crucial role in ensuring the end product meets user expectations.

Stay tuned for further sessions at Def Toober Fest, including an upcoming one focusing on the iOS SDK!

Keywords

SAP Fiori
SAP Build Code
User experience
Marketplace app
Design system
Generative AI
Android development
Figma

FAQ

Q: What is SAP Fiori?
A: SAP Fiori is a user experience (UX) design approach that offers a consistent, user-friendly interface across various applications for improved usability and satisfaction.

Q: How does SAP Build Code help developers?
A: SAP Build Code provides tools and SDKs that facilitate the mobile app development process, allowing developers to create elegant Enterprise applications more efficiently.

Q: What role does user feedback play in the design process?
A: User feedback is integral to the design process, as it helps identify pain points and informs design iterations to enhance the overall user experience.

Q: How can generative AI assist in app development?
A: Generative AI can create sample data and automate certain coding tasks, saving developers time and minimizing potential errors by working with accurate representations of real-world scenarios.

Q: Where can I find SAP's design guidelines?
A: SAP's design guidelines can be found at experience.sap.com/fiori-design, where you can explore various components, colors, and best practices for user interface design.