แพ็กเกจ Mobile App ด้วย SAPUI5 Built-in สำหรับ Android ใช้ Cordova

แพ็กเกจ SAPUI5 Mobile App สำหรับ Android ด้วย Apache Cordova

SAPUI5 มี Static Mobile Packages สำหรับ Hybrid App Development: sapui5-mobile-static.zip และ sapui5-mobile-opt-static.zip (Optimized)

สองแนวทางพัฒนา SAPUI5 Mobile

ขั้นตอนการแพ็กเกจด้วย Cordova

1. เตรียม SAPUI5 Resources

• ดาวน์โหลด SAPUI5 SDK (จาก SCN หรือ OpenUI5)
• Extract sapui5-mobile-static.zip หรือ sapui5-mobile-opt-static.zip
• Copy folder resources ไปยัง Cordova Project: www/sapui5/resources/

2. โครงสร้างโปรเจกต์ Cordova

project/
├── www/
│   ├── index.html
│   ├── sapui5/
│   │   └── resources/          ← SAPUI5 Libraries
│   ├── phonegap/               ← PhoneGap JS API (legacy)
│   └── app_resources/          ← App-specific Assets (CSS, Images, etc.)
├── platforms/
│   └── android/
├── plugins/
├── config.xml
└── package.json

3. index.html - Bootstrap SAPUI5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAPUI5 Cordova App</title>
    
    <script id="sap-ui-bootstrap"
        src="sapui5/resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m, sap.ui.layout, sap.ui.core"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-resourceroots='{"my.app": "./"}'>
    </script>
    
    <script>
        sap.ui.getCore().attachInit(function() {
            new sap.m.Shell({
                app: new sap.ui.core.ComponentContainer({
                    height: "100%",
                    name: "my.app"
                })
            }).placeAt("content");
        });
    </script>
</head>
<body class="sapUiBody" id="content"></body>
</html>

4. config.xml - Cordova Configuration

<widget id="com.company.sapui5app" version="1.0.0" xmlns="https://www.w3.org/ns/widgets">
    <name>SAPUI5 Mobile App</name>
    <description>Hybrid SAPUI5 App with Cordova</description>
    <author email="dev@company.com" href="https://company.com">Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="https://*/*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
</widget>

5. Build และ Run

# Install Cordova
npm install -g cordova

# Create Project
cordova create sapui5-app com.company.sapui5app "SAPUI5 App"
cd sapui5-app
cordova platform add android

# Copy SAPUI5 resources to www/sapui5/resources/
# Edit www/index.html (as above)

# Build
cordova build android

# Run on Device/Emulator
cordova run android

PhoneGap Build (Cloud) - Legacy Note

• PhoneGap Build Service ถูก Discontinued (2020)
• ใช้ Cordova CLI หรือ Capacitor แทน
• Capacitor: Modern Alternative, Better Native Integration, Ionic Ecosystem

References

• SAPUI5 Mobile Packaging Doc: SAP Help Portal
• SAPUI5 + PhoneGap Blogs: SAP Blogs

สรุป

ใช้ Cordova/Capacitor wrap SAPUI5 Static Resources → Hybrid App → Deploy to Android/iOS สำคัญ: ใช้ Optimized Version (sapui5-mobile-opt-static.zip) ลดขนาด App, ปรับ Performance ด้วย data-sap-ui-preload และ Component Preload

การรวม SAP กับ Android ผ่าน SAP Cloud Platform Mobile Services

ตัวอย่างการใช้ WebView ใน Android แบบสมบูรณ์