Skip to main content

Creating a dynamic Portal view

In this step, you will sync the finalized web apps with the iOS project and dynamically display the proper web app based on web app metadata.

Exploring the problem​

The Jobsync superapp should consolidate multiple web experience into a single mobile experience. Up to this point, you have been using a sample web app to test and debug Portals against.

In a real world scenario, you may be tasked to implement Portals and develop communication hooks while web developers are in the process of building out the actual web experiences to present through Portals.

tip

Use the sample web app downloaded from the poc Portals CLI command to integrate and test Portals before syncing and testing web experiences provided by web developers.

The last task remaining before the Jobsync superapp is complete is to sync the individual web apps and dynamically determine which one should be displayed within WebAppView at any given moment.

Syncing the web apps​

Delete the sample web app downloaded from the Portals CLI, it is no longer needed:

terminal

_10
rm -rf /portals-debug-app

Update /ios/.portals.yaml to match the following code:

ios/.portals.yaml

_10
sync:
_10
- file-path: ../web/apps/expenses/dist
_10
directory-name: portals/expenses
_10
- file-path: ../web/apps/tasks/dist
_10
directory-name: portals/tasks
_10
- file-path: ../web/apps/time-tracking/dist
_10
directory-name: portals/time-tracking

note

The monorepo contains the build outputs of all the web experiences to sync with Portals. In a typical development workflow, you would sync Live Updates pushed to Appflow.

Dynamically configuring a Portal​

Open Portals/WebApps.swift in Xcode and note the following code:

Portals/WebApps.swift

_18
import Foundation
_18
_18
struct WebAppMetadata: Hashable {
_18
var name: String
_18
var description: String
_18
_18
WebAppMetadata(name: "time-tracking", description: "Stay on schedule by tracking time spent.")

The list of features to display on the dashboard come from this list. When one of the features is selected, the metadata entry is passed to WebAppView, and the name property can be used to set the name property and compute the correct startDir when initializing the Portal.

Make the following changes to Portals/WebAppView.swift:

Portals/WebAppView.swift

_29
import SwiftUI
_29
import IonicPortals
_29
_29
struct WebAppView: View {
_29
@EnvironmentObject var credentialsManager: CredentialsManager
_29
@Environment(\.dismiss) var dismiss
_29
let metadata: WebAppMetadata
_29
_29
var body: some View {
_29
PortalView(portal: .init(
_29
name: metadata.name,
_29
startDir: "portals/\(metadata.name)",
_29
initialContext: credentialsManager.credentials!.toJSObject()
_29
).adding(AnalyticsPlugin()))
_29
.ignoresSafeArea()
_29
.navigationBarBackButtonHidden()
_29
.task {
_29
let stream = PortalsPubSub.subscribe(to: "navigate:back")
_29
for await _ in stream {
_29
self.dismiss()
_29
}
_29
}
_29
}
_29
}
_29
_29
#Preview {
_29
WebAppView(metadata: WebApps.metadata[0])
_29
.environmentObject(CredentialsManager.preview)
_29
}

Build and run the Jobsync app and navigate to the dashboard view. Select a feature from the list, and the finalized web app will load within the PortalView.

Press the back arrow in the web app's header, and you'll be taken back to the dashboard view. The button publishes a message to the navigate:back and the subscriber previously added dismisses the view. Navigate to a different feature and observe a different web app load within a new Portal.

note

Due to the way initial context and the analytics plugin work for the purpose of this training, validating initial context and the analytics plugin requires inspecting network requests made within the Expenses web app.

Conclusion​

With the finalized web apps dynamically presenting through Portals, the Jobsync superapp is complete! In this training module, you learned how to create and dynamically present a web app through a Portal and exercised the various ways native mobile apps can communicate through a Portal. Furthermore, you used the Portals CLI to set up a development workflow to test and debug Portals communication without needing the finalized web artifacts.

You now have the tools in place to start integrating Portals into any iOS app. Happy coding!! 🤓

Contents