Page History

In addition to Saga built-in stages (recognizers and processors) coming out of the box, developers can create external stages. This guide will help you create the Angular UI part of your new external stage.

Before Start

Before Start

Get access to our NPM Repository by adding this configuration file into your user folder, just replace the fields insede <>, and remenber all the tokens and passwords are encoded in Base 64

Adding the Angular Library Step-by-step guide

1. Install angular-cli
   

   1. Code Block
      language text theme FadeToGrey
      npm i -g @angular/cli

2. Cd to <project>/resources
3. Create and empty angular project

   1. Code Block
      language text theme FadeToGrey
      ng new webapp --createApplication=false Would you like to add Angular routing? No Which stylesheet format would you like to use? Sass

4. Cd to webapp
5. Create an angular library (this is where your interface will live)

   1. Code Block
      language text theme FadeToGrey
      ng generate library <name-of-library> --prefix=plug

6. Install Saga plugin

   1. Code Block
      language text theme FadeToGrey
      npm install @saga/plugin --save

7. Install Angular Material and Angular CDK

   1. Code Block
      language text theme FadeToGrey
      npm install @angular/material @angular/cdk --save

8. Open the file pacakge.json
   1. On the scripts section add or update

      1. Code Block
         language js theme RDark
         "build": "ng build" "build-prod": "ng build --prod"

9. Cd to projects/<name-of-library>
10. Open the file package.json
    1. On peerDependencies add

       1. Code Block
          language js theme RDark
          "@saga/plugin": "^x.y.z"

          the same version as the package.json located in webapp

11. Cd to src/lib
12. Open the file <name-of-library>.module.ts

    1. import the following modules 

       Code Block
       language js theme Eclipse
       import {PluginModule} from '@saga/plugin'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms';

    2. Then update the @NgModule by adding a new provider and the modules to the section imports

       Code Block
       language js theme Eclipse
       providers: [{ provide: '<NameOfRecognizer>Component', useValue: [{ name: '<NameOfRecognizer>Component', component: <NameOfRecognizer>Component }], multi: true }], imports: [ CommonModule, FormsModule, PluginModule ]

Updating the Pom.xml Step-by-step guide

1. Add to  the <properties>
   

   1. Code Block
      language xml theme RDark
      <saga.webapp.code>src/main/resources/webapp</saga.webapp.code> <saga.webapp.export>webapp/dist/</saga.webapp.export>

2. In every "ManifestEntries" in the pom, add

   1. Code Block
      language xml theme RDark
      <Artifact>${project.artifactId}</Artifact> <WebApp>${saga.webapp.export}</WebApp>

3. Add the following profiles to the pom.xml

   1. Code Block
      language xml theme RDark collapse true
      <profiles> <profile> <id>develop</id> <activation> <activeByDefault>true</activeByDefault> </activation> <build> <resources> <resource> <directory>src/main/resources</directory> <includes> <include>${saga.webapp.export}</include> </includes> </resource> </resources> <plugins> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>buildnumber-maven-plugin</artifactId> <version>1.4</version> <executions> <execution> <phase>validate</phase> <goals> <goal>create</goal> </goals> </execution> </executions> <configuration> <doCheck>false</doCheck> <doUpdate>false</doUpdate> </configuration> </plugin> </plugins> </build> </profile> <profile> <id>developUX</id> <activation> <activeByDefault>false</activeByDefault> </activation> <build> <plugins> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>buildnumber-maven-plugin</artifactId> <version>1.4</version> <executions> <execution> <phase>validate</phase> <goals> <goal>create</goal> </goals> </execution> </executions> <configuration> <doCheck>false</doCheck> <doUpdate>false</doUpdate> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-clean-plugin</artifactId> <version>2.5</version> <configuration> <filesets> <fileset> <directory>src/main/resources/webapp/dist</directory> <includes> <include>**/*</include> </includes> <followSymlinks>false</followSymlinks> </fileset> </filesets> </configuration> </plugin> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <version>1.3.2</version> <configuration> <workingDirectory>${saga.webapp.code}</workingDirectory> </configuration> <executions> <execution> <id>npm install (generate-resources)</id> <goals> <goal>exec</goal> </goals> <phase>generate-resources</phase> <configuration> <executable>npm</executable> <arguments> <argument>install</argument> </arguments> </configuration> </execution> <!-- Optional: The following will output the npm configuration. I do this so my CI logs will show the npm information used for the build --> <execution> <id>npm config list (validate)</id> <goals> <goal>exec</goal> </goals> <phase>validate</phase> <configuration> <executable>npm</executable> <arguments> <argument>config</argument> <argument>list</argument> </arguments> </configuration> </execution> <!-- Required: This following calls `npm run build` where 'build' is the script name I used in my project, change this if yours is different --> <execution> <id>npm run build (generate-resources)</id> <goals> <goal>exec</goal> </goals> <phase>generate-resources</phase> <configuration> <executable>npm</executable> <arguments> <argument>run</argument> <argument>build</argument> </arguments> </configuration> </execution> </executions> </plugin> </plugins> <resources> <resource> <directory>src/main/resources</directory> <includes> <include>${saga.webapp.export}</include> </includes> </resource> </resources> </build> </profile> <profile> <id>prod</id> <activation> <activeByDefault>false</activeByDefault> </activation> <build> <plugins> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>buildnumber-maven-plugin</artifactId> <version>1.4</version> <executions> <execution> <phase>validate</phase> <goals> <goal>create</goal> </goals> </execution> </executions> <configuration> <doCheck>false</doCheck> <doUpdate>false</doUpdate> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-clean-plugin</artifactId> <version>2.5</version> <configuration> <filesets> <fileset> <directory>src/main/resources/webapp/dist</directory> <includes> <include>**/*</include> </includes> <followSymlinks>false</followSymlinks> </fileset> </filesets> </configuration> </plugin> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <version>1.3.2</version> <configuration> <workingDirectory>${saga.webapp.code}</workingDirectory> </configuration> <executions> <!-- Required: The following will ensure `npm install` is called before anything else during the 'Clean Lifecycle' --> <execution> <id>npm prune (clean)</id> <goals> <goal>exec</goal> </goals> <phase>clean</phase> <configuration> <executable>npm</executable> <arguments> <argument>prune</argument> </arguments> </configuration> </execution> <execution> <id>npm install --production (generate-resources)</id> <goals> <goal>exec</goal> </goals> <phase>generate-resources</phase> <configuration> <executable>npm</executable> <arguments> <argument>install</argument> <argument>--production</argument> </arguments> </configuration> </execution> <!-- Optional: The following will output the npm configuration. I do this so my CI logs will show the npm information used for the build --> <execution> <id>npm config list (validate)</id> <goals> <goal>exec</goal> </goals> <phase>validate</phase> <configuration> <executable>npm</executable> <arguments> <argument>config</argument> <argument>list</argument> </arguments> </configuration> </execution> <!-- Required: This following calls `npm run build` where 'build' is the script name I used in my project, change this if yours is different --> <execution> <id>npm run build-prod (generate-resources)</id> <goals> <goal>exec</goal> </goals> <phase>generate-resources</phase> <configuration> <executable>npm</executable> <arguments> <argument>run</argument> <argument>build-prod</argument> </arguments> </configuration> </execution> </executions> </plugin> </plugins> <resources> <resource> <directory>src/main/resources</directory> <includes> <include>${saga.webapp.export}</include> </includes> </resource> </resources> </build> </profile> </profiles>

Updating the RestHandler in Java Step-by-step guide

1. On the <NameRecognizer>RestHandler, after the RecognizerInfo is set up, add

   1. Code Block
      language java theme Eclipse
      info.bundle(<path-to-bundle>);

      where the path would be <artifact-id>/<name-of-library>/bundles/<name-of-library>.umd.min.js

...