Case Study: New Generation Cross-Platform Web-Based Operational System (WBOS) Patten for App Management

Abstract: This case study presents a Web-Based Operational System (WBOS) designed to support the core National Security Framework and Supervisory Control and Data Acquisition (SCADA) systems. The WBOS leverages browsing technology to provide a centralized platform capable of launching, managing, and coordinating applications across web, Android, and iOS environments. By employing HTML for the index page, Kotlin for Android integration through `MainActivity`, and Swift for iOS functionality via `MainViewController`, this system ensures accessibility and ease of use, even for users with limited programming skills. Built with security and resilience in mind, the WBOS enables secure application management essential for national security operations, where SCADA components are critical for monitoring and controlling key infrastructure. This cross-platform design allows for seamless interaction across devices while maintaining the rigorous standards required for security-critical environments.

5 min readNov 20, 2024

Introduction

In today’s digital landscape, technology professionals and businesses aim to develop systems that cater to a wide range of devices and platforms. This case study presents the design and implementation of a **Web-Based Operational System** (WBOS) that leverages browsing technology to start, manage, and coordinate various types of applications across web, Android, and iOS platforms. The goal is to make this system accessible and manageable, even for those with minimal programming expertise, by providing a unified web-based index page and ensuring platform-specific functionality is integrated seamlessly.

Problem Statement

The challenge of creating a system capable of launching and managing applications on multiple platforms is complicated by platform-specific requirements, languages, and interfaces. Businesses and individuals often need a central point of interaction for applications, regardless of whether they’re on the web, Android, or iOS. This system must:

Be user-friendly, even for those with limited programming skills.
Utilize HTML as a central “index” to ensure easy web access.
Integrate Android and iOS-specific components using Kotlin and Swift, respectively.
Enable cross-platform functionality through a web-based operational approach.

Solution Overview

This WBOS solution provides a web-based interface as the central access point using HTML as the primary language. It integrates platform-specific capabilities by using Kotlin for Android and Swift for iOS. By structuring the system in this way, users can access and launch applications from a web interface without deep programming knowledge. Additionally, the system handles essential functions like app launching, task management, and basic navigation seamlessly across platforms.

System Architecture

The WBOS architecture is designed in three main layers:

Web Layer (HTML/JavaScript): This layer acts as the system’s main entry point and provides an index page for web-based access. It is created using HTML, which is accessible to users regardless of their device.
Android Layer (Kotlin): The Android component is developed using Kotlin, Google’s preferred language for Android development. It is initiated through `MainActivity` in `AndroidManifest.xml`, which is configured to respond to calls from the web-based interface.
iOS Layer (Swift): The iOS component is developed using Swift, Apple’s language for iOS app development. The initial interface is managed by `MainViewController`, which acts as the primary view controller for app interactions.

Implementation

1. Web Layer: HTML (Index Page)

The index page serves as a hub, allowing users to browse and initiate applications on Android and iOS devices.
Written in HTML, the index page incorporates basic JavaScript to handle calls and requests to the platform-specific layers.
Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web-Based Operational System</title>
</head>
<body>
    <h1>Welcome to the Web-Based Operational System</h1>
    <button onclick="launchAndroidApp()">Start Android App</button>
    <button onclick="launchiOSApp()">Start iOS App</button>
    
    <script>
        function launchAndroidApp() {
            window.location.href = "wbos://start_android";
        }

        function launchiOSApp() {
            window.location.href = "wbos://start_ios";
        }
    </script>
</body>
</html>

This index page triggers the launching of the Android and iOS applications through custom URL schemes like `wbos://`.

2. Android Layer: Kotlin (MainActivity in AndroidManifest.xml)

The Android component starts with `MainActivity`, configured in `AndroidManifest.xml`.
`MainActivity` listens for the custom URL scheme, allowing it to launch from the index page.
Example Code:

import android.content.Intent
import android.net.Uri
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val uri: Uri? = intent.data
        if (uri != null && uri.toString() == "wbos://start_android") {
            startAndroidApp()
        }
    }

    private fun startAndroidApp() {
        // Launch the main application logic
    }
}

This implementation ensures that `MainActivity` responds to a `wbos://start_android` call from the web index page.

3. iOS Layer: Swift (MainViewController)

The iOS component uses `MainViewController` to initialize the iOS application.
Swift enables the app to respond to the custom URL scheme `wbos://start_ios`.
Example Code:

 import UIKit

class MainViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // Setup view and UI components here
    }
    
    func handleLaunch(url: URL) {
        if url.absoluteString == "wbos://start_ios" {
            startiOSApp()
        }
    }
    
    private func startiOSApp() {
        // Launch the main iOS app functionality here
    }
}

This setup ensures that `MainViewController` can interpret and respond to a `wbos://start_ios` call from the web interface.

Key Features

1. Cross-Platform Launching: Users can initiate apps on Android and iOS directly from a web-based interface, making it ideal for multi-device environments.

2. Platform-Specific Customization: Although the system can be accessed via a single HTML-based interface, the use of Kotlin and Swift allows for platform-specific optimizations and feature implementation.

3. User-Friendly Interface: The web-based index page is simple and accessible, requiring minimal technical knowledge to operate.

Results and Benefits

The WBOS enables businesses and individuals to manage and launch applications on Android and iOS devices from a single HTML-based index page. It reduces the need for in-depth programming skills, making it ideal for cross-functional teams and non-developers. The platform-specific components allow for optimized functionality on each OS while providing a consistent user experience.

Conclusion

This Web-Based Operational System effectively addresses the need for a cross-platform app management solution. By combining HTML, Kotlin, and Swift, it provides a unified yet customizable experience, bridging the gap between web, Android, and iOS environments. This design is scalable and can serve as a foundation for more complex operational systems, making it a valuable tool for businesses and individuals alike.