Skip to main content

Creating and displaying a Portal

A Portal is a mobile view capable of displaying and running a web app. It uses Capacitor to bridge native mobile code and web code, allowing communication between the two layers.

In this step, you will configure a Portal to display a web app within the Jobsync mobile application.

Exploring the problem​

Launch the Jobsync app on a device or simulator, and sign in using the preset credentials. On the dashboard view, you will find a list of features, each designed to navigate the user to a Portal containing a standalone web app. Choose any feature and notice that it navigates you to a blank detail view.

Once this tutorial is complete, the Jobsync app will dynamically load the appropriate web app into a Portal configured within this detail view.

A good first step is to configure and display a Portal, loading a sample web app to ensure the configuration works. In the next section, you will utilize the Portals CLI to download a sample web app and sync it with the Android project.

Syncing the sample web app​

The Portals CLI offers the poc command, which will download a prebuilt example web app that can be used to test communication through a Portal.

Navigate to the root directory of the downloaded repository in your terminal, then execute:

terminal

_10
portals poc

The sample web app downloads to /portals-debug-app. To sync the web app with your Android project, do the following:

Best Practice

Using the Portals CLI to pull web apps into an Android project is recommended. This approach can be scaled and configured with Live Updates.

Create a new file .portals.yaml within the /android/app folder:

android/app/.portals.yaml

_10
sync:
_10
- file-path: ../../portals-debug-app
_10
directory-name: src/main/assets/portals/debug

The file-path is the bundled web app directory in relation to the root of the Android project, while the directory-name is the target location the command will move the bundle to.

Next, place the following script at the bottom of the build.gradle (:app):

android/app/build.gradle.kts

_11
tasks.preBuild {
_11
dependsOn("syncPortals")
_11
}
_11
_11
tasks.register("syncPortals") {
_11
doLast {
_11
project.exec {
_11
commandLine("portals", "sync")
_11
}
_11
}
_11
}

note

Ensure the Portals CLI is registered as part of the PATH to run this command successfully.

Finally, open portals/WebAppScreen.kt and make it return a PortalView instead of a Button:

portals/WebAppScreen.kt

_34
package io.ionic.cs.portals.jobsync.portals
_34
_34
import androidx.compose.foundation.layout.Arrangement
_34
import androidx.compose.foundation.layout.Column
_34
import androidx.compose.foundation.layout.fillMaxSize
_34
import androidx.compose.foundation.layout.padding
_34
import androidx.compose.material3.Scaffold
_34
import androidx.compose.runtime.Composable
_34
import androidx.compose.ui.Alignment
_34
import androidx.compose.ui.Modifier
_34
import androidx.navigation.NavHostController
_34
import androidx.compose.ui.viewinterop.AndroidView
_34
import io.ionic.portals.PortalBuilder
_34
import io.ionic.portals.PortalView
_34
_34
@Composable
_34
fun WebAppScreen(navController: NavHostController, metadata: WebAppMetadata) {
_34
Scaffold { innerPadding ->
_34
Column(
_34
Modifier.fillMaxSize().padding(innerPadding),
_34
verticalArrangement = Arrangement.Center,
_34
horizontalAlignment = Alignment.CenterHorizontally
_34
) {
_34
AndroidView(
_34
modifier = Modifier.fillMaxSize(),

Build and run the Jobsync app and navigate to the dashboard view. Select a feature from the list, and the sample web app will load within the PortalView in the detail view. Nice!

Make note of the three tabs in the sample web app: 'Initial Context', 'Publish/Subscribe', and 'Capacitor Plugins'. Each tab maps to a way you can communicate through a Portal, and in the case of the latter two tabs, allows you to test the mechanism. Notice that the 'Initial Context' tab prints out { "name": "debug" }. This is the name property set when initializing a Portal object, and is accessible to web apps as part of initial context, which you will learn about next.

What's next​

Using the Portals CLI and the Portals Android library, you have successfully created your first Portal. In the next step of this module, you will learn how to use initial context to pass immediately-available data to web apps.

Contents