How do I write a new app?

[janCstoffregen]

this issue helps users creating a new app

@cyrill-martin @hanscools @Padlina as a documentation! The app-name will be called machine reasoning in this example

[janCstoffregen]

1. Change to app directory and generate new app

cd src/app/app-engine/apps

ng g c machine-reasoning

(see next commit what has been added by the ng cli)

[janCstoffregen]

2. Add the new app to the open-apps model. This data model serves a page to describe which apps are open. The following example contains an entry in this model with all examples:

    // src/app/user-action-engine/mongodb/page/open-apps.model.ts

    urlParamUpdater: {                    \\ <-- key of this app
      type: 'urlParamUpdater',         \\ <-- type of this app, needs to be the same name as the key
      model: [],
      inputs: [                                 \\ <-- this app has 2 inputs
        {
          'inputName': 'param',
          default: 'defaultParam'      \\ <-- this is the default input that is generated when a new app is opened
        },
        {
          'inputName': 'textFile',
          default: 'Please paste variable here and click save afterwards'
        }
      ],
      materialIcon: 'menu',       \\ this is a material icon, which is displayed in the app menu
      initialWidth: '375',           \\ initial width and height of the app
      initialHeight: '100',
      fullWidth: true,                \\ fullWidth and fullHeight can be true
    }

in our case, we don't have any inputs, our app looks the following way:

    machineReasoning: {
      type: 'machineReasoning',
      model: [],
      materialIcon: 'blur_on',
      initialWidth: '600',
      initialHeight: '400'
    }

[janCstoffregen]

@hanscools which icon would you like for this app? https://material.io/resources/icons/?style=baseline

[janCstoffregen]

3. Add app to appMenu model. This model serves for the pageMenu where a user can open new apps. It is a little redundant to the open-apps model, which can be improved in the future.

    // src/app/app-engine/page/page/appMenu.model.ts

    {
      id: 'blur_on',                                        <-- material icon, this is redundant and can be improved
      name: 'Machine Reasoning',             <-- Name in the page menu
      tags: 'N3, rdfs, rdf, owl',                    <-- nowhere displayed at the moment
      color: 'yellow',                                    <-- nowhere displayed at the moment
      status: 'under development',           <-- nowhere displayed at the moment
      appType: 'machineReasoning',        <-- must be the same as in openAppModel
      description: 'Reason with reason',  <-- nowhere displayed at the moment
      showOnHome: false,                        <-- show it when you are logged out or now
      appGroup: 'microservice'                 <-- which app group does it belong to?
    },

[hanscools]

@hanscools which icon would you like for this app? https://material.io/resources/icons/?style=baseline

@janCstoffregen no really fitting icon found in this list; this one looks good and free download:
https://www.nicepng.com/ourpic/u2w7r5e6t4e6i1w7_about-us-ai-brain-icon-png/

[janCstoffregen]

@hanscools it needs to be one of the material icon list for now...

[janCstoffregen]

4. Step: Add the app to the all-app-selectors.component. Here a first example with all aspects:

<data-list-view style="position: sticky;" *ngIf="app.type === 'dataListView'" <!-- needs to be the name defined in the previous models -->
                [queryResponse]="app.json" <!--  here you map the app inputs, that you have defined before -->
                [dataListSettings]="app.settings"  <!-- another input for this app -->
                [hash] = "app.hash" <!-- if the app saves sth in inseri, you need this -->
                [appInputQueryMapping] = "appInputQueryMapping" <!-- if the app saves sth in inseri, you need this -->
                [showSettings]="app.showSettings" <!-- another input for this app -->
                (reloadVariables)="reloadVariablesFunction()"> <!-- if the app saves sth in inseri, you need this -->
</data-list-view>

for our example it looks like this:

<app-machine-reasoning *ngIf="app.type === 'machineReasoning'">

</app-machine-reasoning>

[janCstoffregen]

now you can open the app in the page menu

[janCstoffregen]

and when you open it you see an empty app

[cyrill-martin]

I re-wrote this issue as a tutorial in the inseri documentation.
inseri/Tutorials/Web component development/Create a new app/

[janCstoffregen]

great, thanks!!!