Se describen los siguientes temas:
- Instalación de la CLI de la plataforma IoT de Cumulocity (C8Y)
- Creación de proyecto con la CLI de C8Y
- Creación de componentes
- Creación de una navegación (enrutamiento)
- Branding personalizado y uso de Bootstrap 4 en lugar de la versión 3 (predeterminado)
En primer lugar necesitamos la Angular CLI de Cumulocity (C8Y) (Command Line Interface). Podemos instalar la CLI de la siguiente manera:
npm install -g @c8y/cli
Con la CLI de C8Y se puede crear un nuevo proyecto de la siguiente manera:
c8ycli new myApp
Al crear el proyecto con la CLI de C8Y se generó, entre otros, el archivo ‘packages.json’ que contiene las dependencias necesarias.
Dentro del archivo ‘package.json’ primero hay que indicar el tenant de destino:
Con el siguiente comando se pueden instalar las dependencias:
cd assetmanager
npm install
Luego la aplicación se puede iniciar de la siguiente manera:
npm start
La CLI inicia un servidor local al que podemos acceder en la siguiente URL:
http://localhost:9000/apps/assetmanager/
Al acceder a la URL anterior y tras introducir las credenciales, el usuario se redirige a su ’tenant’.
Tras el inicio de sesión, se redirige a la aplicación recién creada (vacía).
A continuación quiero crear mi primer componente y mostrarlo dentro de la nueva aplicación. El nuevo componente ‘HelloWorld’ (hello.components.ts) se crea de la siguiente manera:
Como se puede ver en la imagen anterior, el contenido se introduce de forma ‘hard coded’ en la sección ’template’. Más adelante podemos referirnos a un archivo *.html y *.css.
Primero se hace visible o se registra la clase ‘HelloComponent’ (hello.component.ts):
import { HelloComponent } from ‘./hello.component’;
El uso real de la clase se declara de la siguiente manera:
declarations: [HelloComponent]
Con esto, la invocación ‘root’ de la aplicación se dirige al componente ‘Hello’:
RouterModule.forRoot([{ path: ‘’, component: HelloComponent }]
Tanto ’enableTracing’ como ‘useHash’ son configuraciones de enrutamiento. La descripción se puede encontrar aquí.
A continuación quiero añadir y llamar a 4 componentes o páginas más:
1. Tipo de activo
2. Jerarquía de activos
3. Auditoría de activos
4. Mapa de activos
Describiré la creación de la página ‘Asset Type’. Las demás páginas se pueden crear siguiendo el mismo patrón. Todos los componentes se colocan en la carpeta ‘components’. Un componente, por ejemplo assettype.component.ts, incluye su propio archivo HTML y CSS:
El componente propiamente dicho se crea de la siguiente manera:
Mediante la declaración de ‘selector’, la página se puede invocar dentro de otras páginas HTML con la etiqueta
Para poder navegar entre las distintas páginas o componentes, debemos importar la clase ‘Routes’ y declarar las rutas.
A continuación, los componentes individuales se pueden invocar a través de la URL correspondiente, por ejemplo:
http://localhost:9000/apps/assetmanager/#/assettype
Actualmente sólo podemos acceder a las páginas mediante la invocación de cada URL. Es más sencillo crear una navegación:
La navegación se define de la siguiente manera:
Después, la navegación debe activarse dentro de ‘app.module.ts’:
A fecha de mayo de 2019, C8Y es compatible con Bootstrap 3. Para usar una versión más reciente, por ejemplo, Bootstrap 4, debemos o bien anidar los componentes (es decir, crear un componente ‘root’ que incluya Bootstrap 4 y llamar en él a los demás componentes mediante sus etiquetas específicas) o crear un branding personalizado e incluir en él el nuevo CSS.
Optaré por la segunda opción, a la vez que describo la creación de un branding personalizado.
El branding se puede crear en el archivo ‘branding.less’:
Un archivo CSS externo se puede importar de la siguiente manera:
// Custom CSS (Bootstrap 4)
@import url(‘https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
Después de crear el branding personalizado, hay que registrar el branding en el archivo ‘package.json’.
El nuevo branding que utiliza Bootstrap 4 se muestra de la siguiente manera:
.