How to package applications for Pantahub One

We released a new version of Pantahub One and with this new release, we added the possibility to build applications for One. Those applications are nothing more than a PVR application using docker (https://docs.pantahub.com/pvr-docker-apps-experience/), plus a new app manifest that will build the UI interface inside one.apps.pantahub.com.

How can you build your own manifest?

The app manifest is a new JSON file inside the PVR application file system. This file is called v0alpha.app.manifest.json.

Using this manifest, ONE will be able to create a complete interface for the application. This manifest uses JSON Schema to build the interface using react-jsonschema-form.

For more details about the possibilities in the UI part of the application check the react-jsonschema-form documentation.

This is the structure of the v0alpha.app.manifest.json. I will try to explain every part of it.

{
"#spec": "app-manifest@1",
"_configfiles": [
{
"file": "/etc/wireguard/config.json",
"name": "wireguard.config",
"schema": {
"description": "",
"properties": {},
"required": [],
"title": "",
"type": ""
},
"type": "jsonschema",
"ui": {}
}
],
"_metaconfig": [
{
"meta-key-prefix": "your-application-prefix",
"name": "key-for-the-section", // key for the section not the name of the meta key-value
"schema": {
"description": "",
"properties": {},
"required": [],
"title": "",
"type": ""
},
"type": "jsonschema",
"ui": {}
}
],
"_status": [
{
"properties": [
{
"default": "default value in case the key is empty",
"key": "key to read from device-meta or user-meta",
"title": "Name of the variable for the UI",
"type": "device-meta|user-meta"
}
],
"title": "Section Title"
}
],
"icon": "vpn_key", // icons available in here https://material.io/resources/icons/?style=baseline
"logo": "URL or BASE64 encoded",
"title": "APP TITLE",
"version": "0.0.1"
}

App manifest

  • version: this is the version of your application, and should follow a semantic versioning schema
  • title: This is the name of the application, the one that will be shown in the UI.
  • icon: This is the icon used in the menu for your application. Right now we support all the icons available on [material design icons
  • logo: This is your application logo 160px x 160px. You can set a URL for your image or a base64 src image.
  • _status: This is an array of sections of status views. Every section can be described with:
    • title: title of the status section
    • properties: this is an array of objects that define what parts of the device metadata or user metadata can be read to show your application status.
      • default: default value in case the key is empty
    • key: the key to read from device-meta or user-meta
    • title: Name of the variable for the UI”
    • type: device-meta|user-meta
  • _metaconfig: This is an array of objects to configure how the meta configuration form works.
    • meta-key-prefix: your-application-prefix
    • name: key name of the form
    • type: type of meta configuration UI, right now the only available is “jsonscheme”
    • schema: JSON scheme to be used for react-jsonscheme-form. More information here.
    • ui: UI JSON scheme used to define UI configuration on the form builder. More information here.
  • _configfiles: This is an array of objects to configure how the configuration file is built.
    • file: full path pointing to the configuration file, this file is going to be a JSON file.
    • name: key name of the form
    • type: type of meta configuration UI, right now the only available is “jsonscheme”
    • schema: JSON scheme to be used for react-jsonscheme-form. More information here.
    • ui: UI JSON scheme used to define UI configuration on the form builder. More information here.
  • _readme: This is a plain paragraph on top of the overview section. Important this is not a full readme section, in an upcoming revision you will be able to write a full README.md file to be shown as readme. (optional)

The created UI inside of one.apps.pantahub.com has two tabs: overview and settings:

  • The overview has the result of rendering the _readme, _status, and _metaconfig configuration.
  • The Settings has the result of rendering the _configfiles configuration.

Create your own application

In order to create an application in the market, you’ll need to start a dummy device using pvr.

mkdir app_marketplace
cd app_marketplace
pvr init
touch README.md
pvr add
pvr commit
pvr device create app_marketplace

This will create a dummy device without having hardware for this, this only works as a repository for our applications.

Now you can add a new PVR docker application, for example:

pvr app add --from nextcloud nextcloud
pvr app install nextcloud

This will create a folder nextcloud inside app_marketplace with this structure:

├── lxc.container.conf
├── root.squashfs
├── root.squashfs.docker-digest
├── run.json
└── src.json

In there you will create your own application manifest file v0alpha.app.manifest.json.

After you have finished your application manifest you will need to commit and post a new revision to your market device.

pvr add && pvr commit && pvr post

You will see a new revision like this on your Pantahub device.

NOTE: This is the device used as the main source for one application and is a good example of how to create your own application market device.

My device

After this, you can get your Clone URL and add it to your app sources on one.apps.pantahub.com

Now using the power of configuration files, meta, and more you can build almost any type of application.

Inside the demo marketplace device, you can see the manifest of all our applications are in here, you can see the docker container for wireguard-vpn and learn how to handle and convert the config.json into something that could be used by your application.