Wrapping a WebVI as a Native iOS or Android Application

[cool_ranch_doRITAs]

Description

Description-Separate-1

You can use third party tools wrap a WebVI in a thin application shell so that users can install it on their mobile device home screen. This example includes instructions for doing this with the Capacitor project.

This approach is useful if you want the app to feel "native" (access to device capabilities and installed via an app store). Progressive Web Apps offer an alternative approach that's simpler to develop but slightly less native.

Description-Separate-2

How to Use

How-Separate-1

Prerequisites

Capacitor works by emitting a project that you can build with the platform's native app development toolchain. This means you'll need to install that toolchain on your development computer and may need to refer to developer training materials from iOS or Android to understand the build workflow and to troubleshoot problems.

To help you understand the complexity, here are a few of the components needed for app development:

• iOS: A Mac with the Xcode development environment or an account with a third party service that builds in the cloud. Publishing to the App Store requires a paid Apple Developer account. Apple also offers ways to distribute apps to a limited set of users.

• Android: A computer with Android Studio and the Android SDK. Publishing to the Google Play Store requires a Google Developer Account.

Setup steps

These are steps you can follow to set up and build a Capacitor application that wraps a WebVI.

1. Install prerequisites
   1. Install the Requirements and platform-specific components from Capacitor Required Dependencies.
      • Note: Running WebVIs in the iOS Simulator requires Xcode 12 or later
   2. Install LabVIEW NXG and the LabVIEW NXG Web Module using NI Package Manager.
2. Using NXG, create the WebVI containing your user interface and communication logic.
   1. See WebVI Best Practices below for some tips on structuring this application.
3. Build the Web Application that contains your WebVI and locate the build output directory.
   1. To build, open the .gcomp containing your WebVI and click the Build icon in its toolbar.
      • 
   2. To locate the build output, open the Build Queue pane and click the Locate icon in its toolbar.
      • 
   3. You will use this build output to initialize your Capacitor application below.
4. Set up the directory for your Capacitor project.
   1. Create a new directory. It can live next to your WebVI source or elsewhere.
   2. Open a Command Prompt (Windows) or Terminal (MacOS), navigate to that directory, and run the command npm init.
      1. If npm is not found ensure you installed Node and it added npm to your search path.
      2. npm init will prompt you for basic configuration. This information is not used by Capacitor and it's ok to enter any values you like if you don't plan to publish the source to NPM. See capacitor/package.json in this repo for sample values.
5. Copy the WebVI build output from above to a new directory called www within your project folder.
6. Install Capacitor and initialize a project.
   1. Follow the instructions for Adding Capacitor to an existing web app. Install whichever desired native platforms you need (iOS, Android).
   2. When this step is complete, your application should look similar to the capacitor directory in this repository.
7. Build iOS and Android applications.
   1. Run the steps in Opening Native Projects to launch Xcode or Android Studio with your application.
   2. Use these development environments to run your application in a simulator, deploy it to your mobile device, or build it for distribution to users. One key step to get started is to select your target and run your app using the buttons in the toolbar. For Android you may need to add a simulated device using Android Virtual Device (AVD) Manager. For iOS you may need to configure your signing settings for the project.   Workflows beyond this are outside the scope of this example but you can refer to the iOS and Android developer programs for training.

Update steps

Follow these steps to make changes to the WebVI after setting up the project.

1. Make the changes in NXG and rebuild the .gcomp.
2. Copy the files from the build output directory to the www directory.
3. From the command line, run the copy commands for your platform as described in Building your App.

WebVI Best Practices

Connecting to data

You should consider what services your WebVI will communicate with to display data. Options include:

1. Sources available from the public internet (but secured with an API key)
   1. Web Services on a public server
2. Sources available on NI Web Server from your Local Area Network (LAN)
   1. Tags or Messages on SystemLink Server
   2. Web Services on NI Web Server

The app bundle that Capacitor creates includes all of the files generated when you build a WebVI. Capacitor hosts these files on a web server contained within the app. This means that the WebVI will only have access to network resources that are accessible from the mobile device where the app is running.

If your data is available on your LAN you may experience CORS errors when accessing it from the Capacitor application. See the CORS Errors documentation from Capacitor for suggestions to resolve these.

For more details on this topic, see Communicating Data with a Web Application.

Use flexible layout for the WebVI panel

Since the WebVI panel may be presented on screens of different sizes, you should strongly consider setting the WebVI panel to use Flexible Layout. This will automatically adjust the size and position of objects on the panel in response to the size of the screen on which it's displayed.

How-Separate-2

Additional Information

Additional-Separate-1

Additional Options

These are some additional capabilities that should be possible with this approach but aren't covered in this example. If you try these out and find success please contribute what you learned to this document or to the source repo!

Calling Native APIs

Capacitor provides an SDK which provides a JavaScript API for calling native Android and iOS APIs. This would allow access to features like the camera, file system, and notifications. To use these features in a WebVI you would use a JavaScript Library Interface to wrap the calls to the native API.

Building applications for other platforms

The Capacitor community offers plugins for building desktop applications using Electron. You can find more information in their documentation.

Building applications using a cloud service

If you don't have access to a Mac but want to build an iOS application, you may try a third-party cloud service like Ionic App Flow. These services should allow you to upload your built WebVI to their site and they'll build and publish it to the app store for you.

Additional-Separate-2