DevCore Manager Package

The foundation of the DevCore Framework is the Manager package. This core component provides essential services necessary for mobile or desktop management applications.

The Manager package is a VueJS/Vuetify extension that provides structure for your device management application. It provide the essential authentication, routing and data management services to manage one or more devices.

The Manager package provides the following features:

• Setup and configuration of VueJS and Vuetify frameworks
• Application structure with navigation bars, data display panels, dashboards and widgets and data editing forms
• User authentication, login and access control
• Dashboards and data and graphical widgets with dynamic live updating
• Data property editor to view and modify device data
• User navigation and request routing
• Collection of core VueJS UI components for management applications
• Device claim, release and management
• Ability to connect to local HTTP device agents or cloud services

Using the Manager as a foundation, you can elimiate countless months of developer time in creating a device management solution.

Initializing the Manager

The manager package is initialized in the app's main routine via the createManager API. For example:

import {createManager} from 'manager'

async function main() {
    const manager = await createManager({
        display: Display,               //  UI Display definition
        schema: Schema,                 //  Database schema
        widgets: {graph: GraphWidget},  //  Additional dashboard widgets
        router,                         //  VueJS router
        vue,                            //  Vue instance
        vuetify,                        //  Vuetify instance
    }, {
        api: '/api',                    //  Backend URL prefix
        profile: Ioto.profile,          //  Execution profile
        name: Display.name,             //  App name
        title: Display.title,           //  App display title
        version: Display.version,       //  App version (x.y.z)
    })
main()

The createManager API accepts configured VueJS, Vuetify and Vue Router instances. You can configure these as you wish, but a typical setup would look like:

import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import Display from 'display.json5'

async main() {
    let vue = createApp(Main)
    let router = createRouter({
        history: createWebHashHistory(),
        routes: [],
    })
    let vuetify = createVuetify(
        vuetifyProps({
            components: components,
            directives: directives,
            themes: Display.theme.themes,
        })
    )
    vue.use(vuetify)

The Manager is created with arguments that define the UI display, VueJS components and other configuration options. Here is a table of the createManager first parameter arguments.

Property	Description
components	A map of VueJS components
display	The display.json5 UI route definition file
schema	The device database schema
models	A map of REST data models
widgets	A map of additional dashboard widgets
router	A configured VueJS router instance
vue	A configured VueJS instance
vuetify	A configured Vuetify instance

The Manager constructor also takes an "options" argument that supplies essential app configuration information.

The following properties should be provided via the options:

Property	Description
api	Backend API URL prefix. Use "/api" for local and Connect.js when cloud-based.
name	App name. Short one word product name.
title	App display title. Short multi-word display product title.
profile	Operational profile (dev, prod)
version	App version (x.y.z)
build	Build version number. Single number build version.

The Ioto agent distribution contains a suite of app samples that demonstrate constructing the Manager class. Each app has a ui/main.js file that constructs the Manager.

API Endpoint

When a Manager app is hosted by the cloud, the Ioto service adds a Connect.js configuration file to the app site that can be imported from the top level of your app. The Connect.js script provides the api endpoint address and the AWS Cognito user authentication endpoint configuration. Both are required for cloud-based device managers.

Here is a sample Connect.js:

{
    "api": "https://xxxxxxxxxx.execute-api.ap-southeast-1.amazonaws.com",
    "builder": "https://api.admin.embedthis.com",
    "cognito": {
        "userPoolId": "ap-southeast-2_xxxxxxxxx",
        "clientId": "xxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
}

This file should be imported and the "api" and "cognito" properties used in the Manager options. For example:

await createManager({
    ...
}, {
    ...
    api: Connect.api,                   //  Backend cloud service API
    cognito: Connect.cognito,           //  Cognito config
})

Package Exports

The Manager package exports a suite of configured service objects and support functions.

Service Objects

Name	Description
Auth	Primary authentication service
Feedback	User UI informational feedback service
Progress	User activity progress bar service
Rest	REST HTTP service
Routes	Navigational routes service
Rules	Input valiation rules
State	Global application state service

Support Functions

Name	Signature	Description
can	can(role)	Can the logged in user perform the given role
createManager	createManager(params, options)	Create and initialiate a manager instance
getVue	getVue()	Return the initialized Vue instance
getModel	getModel(model)	Return the schema data model definition
getModels	getModels()	Return a list of the schema data models
getRoute	getRoute()	Return the Vue Router object for the current UI page
getRoutePath	getRoutePath()	Return the current Vue router URL
getRouter	getRouter()	Return the Vue router instance
navigate	navigate(url, query)	Navigate the UI to the given URL
vuetifyProps	vuetifyProps(params)	Convert the given params to Vuetify constructor args