Đóng gói ứng dụng di động SAPUI5 built-in cho Android bằng Cordova

Giới thiệu

SAPUI5 cung cấp 2 gói mobile tĩnh: sapui5-mobile-opt-static.zip (tối ưu) và sapui5-mobile-static.zip. SAPUI5 hỗ trợ 2 cách xây dựng app mobile:

1. **Web App**: Load từ URL.
2. **Hybrid App**: Native wrapper (PhoneGap/Cordova) + HTML viewer hiển thị nội dung SAPUI5.

Lưu ý về gói static

Hai gói sapui5-mobile-opt-static.zip và sapui5-mobile-static.zip **KHÔNG** có trong SAPUI5 runtime deployment. Chỉ có trong:

• SCN download version của SAPUI5.
• Open Source version OpenUI5.

Tài liệu chi tiết: SAP Help Portal

PhoneGap Build vs Cordova CLI

PhoneGap Build giới hạn **1 app/free account**. Cần trả phí cho nhiều app. Thay vào đó, dùng **Cordova CLI** (miễn phí, không giới hạn):

# Cài đặt Cordova
npm install -g cordova

# Tạo project
cordova create sapui5-app com.example.sapui5app SapUI5App
cd sapui5-app

# Thêm platform Android
cordova platform add android

# Copy resources SAPUI5
# Giải nén sapui5-mobile-static.zip → copy folder resources vào:
# platforms/android/assets/www/sapui5/ (hoặc www/sapui5/ cho iOS)

Cấu trúc project mẫu

sapui5-app/
├── www/
│   ├── index.html
│   ├── sapui5/           ← Resources từ sapui5-mobile-static.zip
│   │   ├── resources/
│   │   └── ...
│   ├── phonegap/         ← PhoneGap JS API (nếu dùng)
│   └── app_resources/    ← CSS/JS/Image riêng của app
├── platforms/
│   └── android/
└── config.xml

Tích hợp SAPUI5 vào index.html

<!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"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-resourceroots='{"my.app": "./app_resources/"}'>
    </script>
    <script>
        sap.ui.getCore().attachInit(function() {
            new sap.m.Shell({
                app: new sap.ui.core.ComponentContainer({
                    name: "my.app",
                    async: true
                })
            }).placeAt("content");
        });
    </script>
</head>
<body class="sapUiBody" id="content"></body>
</html>

Tài liệu tham khảo

• SAP & Mobile Powers Combined through SAPUI5 and PhoneGap
• SAPUI5 Building Mobile Apps Together with PhoneGap

Lưu ý hiện đại

• PhoneGap đã ngừng phát triển (2020). Nên dùng **Cordova** hoặc **Capacitor** (Ionic).
• SAPUI5 hiện tại khuyến nghị dùng **SAP Fiori tools** + **UI5 Tooling** (vite-based) cho development.
• Để build hybrid: @ui5/builder + Cordova/Capacitor.