DevCore Manager Package

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

The DevCore 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 DevCore 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 DevCore as a foundation, you can elimiate countless months of developer time in creating a device management solution.

Installation

The DevCore package is installed from NPM DevCore.

npm install @embedthis/devcore

Rebuilding from Source

The DevCore can be rebuilt from source that can be downloaded from the Builder or GitHub.

To build, type:

make

After building the framework/dist directory will contain the devcore package. The apps/standard/ui/dist directory will contain the standard app which uses the devcore package.

Using the DevCore

The DevCore package is imported in the app's main routine. To initialize the framework, import the createManager API. For example:

import {createManager} from '@embedthis/devcore'

const manager = createManager({
    components: { ... },            //  Additional VueJS components
    display: Display,               //  UI Display definition
    router,                         //  VueJS router
    schema: Schema,                 //  Database schema
    vue,                            //  Vue instance
    vuetify,                        //  Vuetify instance
    widgets: {graph: GraphWidget},  //  Additional dashboard widgets
}, {
    api: Connect.api,               //  Backend URL prefix. Use "/api" for local and Connect.js when cloud-based.
    cognito: Connect.cognito,       //  Cognito config when cloud-based
    profile: Ioto.profile,          //  Execution profile
    tunnel: 'generic',              //  Tunnel requests via 'generic' controller when cloud-based
})

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 the following. Assuming the main components is sourced from src/main.js:

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

let vue = createApp(Main)
let router = createRouter({
    history: createWebHashHistory(),
    routes: [],
})
let vuetify = createVuetify(
    vuetifyProps({
        components: components,
        directives: directives,
        icons: AdditionalIcons,
    })
)
vue.use(vuetify)

A Manager instance is created with arguments (first parameter) 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 (second parameter) that supplies additional 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.
build	Build version number. Single number build version.
cognito	AWS Cognito user authentication configuration. Set to connect.cognito when cloud-based.
host	API host name override. Use when the API host name is not the same as the app host name.
profile	Operational profile (dev, prod)

API Endpoint

When a device 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 apps.

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:

import Connect from '../Connect.js'
createManager({
    ...
}, {
    ...
    api: Connect.api,                   //  Backend cloud service API
    cognito: Connect.cognito,           //  Cognito config
})

DevCore Exports

The DevCore 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