Create your own application
Copy the template
There is currently no automated template or maven artifact template that automatically creates a new application.
For this reason, the easiest way is to copy the pattern app `demoApp` under `apps`.
Then make the following adjustments.
1. At least customize
To be translated 
## Eigene Anwendung erstellen
### Kopieren der Schablone
Zur Zeit gibt es noch keine automatisierte Schablone oder Maven Artefakt Vorlage, die automatisch eine neue Anwendung erstellt. Aus diesem Grund ist der einfachste Weg, die Muster App `demoApp` unter `apps` zu kopieren.
Anschließend sind die folgenden Anpassungen vorzunehmen.
1. Mindestens ** Name **, ** Version ** und and ** BeschreibungDescription ** in der Datei the file `packages.json` anpassen : ` "name" : "@odlux@ odlux / demo-app",` H> Hinweis: Anstelle von Großbuchstaben nur Bindestrich Buchstabe verwenden. demoApp wird zu
Note: Use hyphenated letter instead of uppercase letter. demoApp becomes a demo-app.
2. Datei Check the file `webpack.config.js` prüfen ob alle Backend Pfade koniguriert sind (siehe Anpassen der lokalen Umgebungto see if all backend paths are configured (see Customizing the local environment)
3. Name des Modules in der Webpack-Config anpassen (demoApp). Dieser wird gefolgt von dem Pfad zu der Einstiegsdatei Adapt the name of the module in the Webpack-config (demoApp). This is followed by the path to the entry file (`. / plugin.tsx`).
```js
entry: {
demoApp: ["./plugin.tsx"]
},
```
H> Hinweis: Keine Bindesriche oder Sonderzeichen verwenden Note: Do not use bindings or special characters.
4. Optional kann in dem gleichen Eintrag festgelegt werden wie die Einstiegsdatei für dieses Module / diese App heißen soll. Default ist Optionally, you can specify in the same entry what the entry file for this module/app should be called. Default is `plugin.tsx`.
5. In der Datei the file `index.html` ist das zu ladende Module (`demoApp`) auszutauschen, gegen das eigene Modulthe module to be loaded (` demoApp`) has to be exchanged, against its own module:
```js
// run the application
require(["app","demoApp"], function (app) {
app("./app.tsx")
});
```H>
Note: The name of this module has been set in step 3.
Customize the configuration of the app
The new app is configured within the entry file Hinweis: Der Name dieses Modules wurde in Schritt 3. festgelgt.### Anpassen der Konfiguration der App
Die Konfiguration der neuen App erfolgt innerhalb der Einstiegsdatei (default: `plugin.tsx`). Hier wird der eindeutige Name, das Icon, der Titel der Menueintrag usw. festgelegt.
Here the unique name, the icon, the title of the menu item, etc. are defined.
1. Select icon from the library `fontawesome 5`1. Icon aus der Bibliothek `fontawsome 5` auswählen.
```ts
import { faAddressBook } from '@fortawesome/free-solid-svg-icons';
```
2. Adjust the registration of the app in the entry file.
The unique name is used by the framework to differentiate the apps. The icon is used for navigation and the title bar. The root component is the very first component of this app. The menu entry is optional to display a name for this app in the navigation Anpassen der Registration der App in der Einstiegsdatei.
Der eindeutige Name wird vom Framework verwendet, um die Apps voneinander zu unterscheiden. Das Icon wird für die Navigation und die Title-Leiste genutzt. Die Root-Komponente ist die äußrste Komponente dieser App. Der Menu-Eintrag ist optional um einen Namen für dieser App in der Navigation darzustellen.
```js
applicationManager.registerApplication({
name: "demoApp", // eindeutiger Name der App
icon: faAddressBook, // Icon der App
rootComponent: FinalApp, // Wurzelkomponente der App
menuEntry: "Demo App" // Menu Eintrag
});
```
3. Wenn diese Application einen eigenen Action-Handler enthällt, so ist dieser ebenfalls zu konfigurieren. Die Erstellung von Action Handlern wird ein einem Seperatem Abschitt genauer betrachtetIf this application contains its own action handler, it must also be configured. The creation of Action Handlers is considered more closely in a Seperate Sever.
```js
applicationManager.registerApplication({
// ...
rootActionHandler: demoAppRootHandler,
});
```
4. Wenn diese Application eigene Komponenten für andere Apps bereit stellen soll, so sind diese auch zu konfigurieren. Dabei ist der Schlüssel der Name mit dem später auf die Komponete zugegriffen werden kann, sowie der Wert die zu exportierende KomponenteIf this application is to provide its own components for other apps, these must also be configured. The key is the name with which the component can be accessed later, as well as the value of the component to be exported.
```js
applicationManager.registerApplication({
// ...
exportedComponents: { counter: Counter },
});
```
5. Optional kann ein Pfad angegeben werden unter dem die App ereicht werden soll. Wird dieser nicht festgelegt wird der Name als Pfad genutztOptionally specify a path under which the app should be reached. If this is not specified, the name is used as the path.
```js
applicationManager.registerApplication({
// ...
path: "demoApp",
});
```
Hier können z.B. URL-Parameter spezififiert werden, die der App übergeben werden sollenHere, e.g. URL parameters that are to be passed to the app.
```js
applicationManager.registerApplication({
// ...
path: "demoApp/:param1",
});
```
6. Abhänig davon ob die App einen oder mehrere URL Prameter bekommen soll sind diese als generische TypeParameter für die `RouteComponentProps` der `AppProps` mit anzugebenDepending on whether the app should receive one or more URL parameters, these should be specified as generic TypeParameters for the `RouteComponentProps` of the` AppProps`.
```ts
// Beispiel ohne ParameterExample without parameters
type AppProps = RouteComponentProps & Connect;
// Beispiel mit einem ParameterExample with a parameter
type AppProps = RouteComponentProps<{ param1: number }> & Connect;
```
7. Wenn Sub-Routen innerhalb der App verwendet werden sollen, sind diese innerhalb der Root-Komponente anzugeben. Sonst kann direkt mit der Programmierung der Hauptansicht begonnne werdenIf sub-routes within the app are to be used, they must be specified within the root component. Otherwise you can start directly with the programming of the main view.
```ts
const App = (props: AppProps) => (
<Switch>
<Route exact path={ `${ props.match.path }/authors` }
component={AuthorsList} />
<Route path={ `${ props.match.path }/authors/:authorId` }
component={EditAuthor } />
<Redirect to={ `${ props.match.path }/authors` } />
</Switch>
);
```
8. In jedem Fall ist die App unter Verwendung von `withRouter` mit dem Router zu verbindenany case, connect the app to the router using `withRouter`.
```ts
const FinalApp = withRouter(connect()(App));
```
Creating the data models or services
All data models to be used within this app are created within the `models` folder or in a subfolder in this folder. Example: `Author` for presenting authors### Erstellen der Datenmodelle bzw Dienste
Alle Datenmodelle, die innerhalb dieser App verwendet werden sollen werden innerhalb des Ordners `models` bzw. in einem Unterordner in diesem Ordner erstellt. Beispiel: `Author` für die Darstellen von Autoren.
```ts
/**
* Represents an author.
*/
export interface IAuthor {
/**
* Defines the unique id of the autor.
*/
id: number;
/**
* Defines the first name of this author.
*/
firstName: string;
/**
* Defines the last name of this author.
*/
lastName: string;
}
```
Alle Dienste die diese App verwenden soll liegen in dem Ordner `services` oder einem darin befindlichem Unterordner. In der Aktuellen Version werden Dienste als **Singleton** erstellt. Dazu exportiert die Datei mit der Implementierung eine einzelne Instanz als All services that this app should use are located in the folder `services` or a subfolder in it. In the current version, services are created as ** singleton **. To do this, the implementation file exports a single instance as `default`.
```ts
class AuthorService {
// ...
}
// return as a singleton
export const authorService = new AuthorService();
export default authorService;
```
Create / customize your own action handler
Each application can define a `root state` that represents all states specific to that app. This should be defined as an interface with the name consisting of ### Erstellen / Anpassen eigener Action-Handler
Jede Application kann einen `Root-State` definieren, der alle Zustände speziell für diese App repräsentiert. Dieser sollte als Schnittstelle definiert werden mit dem Namen der sich aus I ** AppName ** StoreState zusammensetzt. Für die `demoApp` würde dieser also `IDemoAppStoreState` heißenFor the `demoApp` this would be called` IDemoAppStoreState`.
```ts
export interface IDemoAppStoreState {
listAuthors: IListAuthors;
editAuthor: IEditAuthor;
}
```
Es bietet sich an, diesesn It makes sense to create this ** StoreState ** innerhalb der Datei mit dem `Root-Action-Handler` zu erstellen. Der Name sieser Datei sollte aich wie folgt zusammen setzen within the file with the root action handler. The name of this file should be put together as follows ** appName ** RootHandler.ts im Verzeichnis in the directory `handlers`. Für die `demoApp` wäre das `demoAppRootHandler
For `demoApp` this would be` demoAppRootHandler.ts`.
Um mit der Typesicherheit von TypeScript auf den Gesamt-Anwendugs-Zustand korreckt zugreifen zu können, ist es erforderlich diesen innerhalb dieser Datei, um den Anwendungszustand der App wie folgt zu erweiternIn order to be able to effectively access the overall application state with TypeScript type security, it is necessary within this file to extend the application state of the app as follows.
```ts
declare module '../../../../framework/src/store/applicationStore' {
interface IApplicationStoreState {
demoApp: IDemoAppStoreState
}
}
```
Sollte sich der Zusatand der App aus mehreren ActionHandlern zusammensetzen, so sind diese vor dem exportieren zu verbinden mit der Funktion `combineActionHandler` des FrameworksIf the app is composed of several action handlers, these must be connected with the `combineActionHandler` function of the framework before exporting.
```ts
const actionHandlers = {
listAuthors: listAuthorsHandler,
editAuthor: editAuthorHandler,
};
export const demoAppRootHandler = combineActionHandler <IDemoAppStoreState>(actionHandlers);
export default demoAppRootHandler;
```## Bibliotheken
Libraries
Das The O-D-L-UX Framework unterscheidt in Bibliotheken, die nur einer einzelnen App zugeordnet werden. Diese können nicht mit anderen Apps geteilt werden und müssen in jeder App seperat installiert werden. Was zur Folge hat, dass diese auch in dem Bundle jeder App enthalten sind.
Sowie Bibliotheken, die zwischen alle Apps geteilt werden. Diese müssen nicht in jeder App installiert werden und sind auch nur einmal in dem Bundle des Frameworks vorhanden.
framework distinguishes between libraries that are mapped to a single app. These can not be shared with other apps and must be installed separately in each app.
As a result, they are also included in the bundle of each app.
As well as libraries shared between all apps. These do not have to be installed in every app and they only exist once in the bundle of the framework.
Add a shared library
Examples of shared libraries are `react`,` react-dom`, `jQuery` or` lodash`. This library is first added to the dependencies of the parent `package.json` file (in the root directory of ### Hinzufügen einer geteilte Bibliothek
Beispiele für geteilte Bibliotheken sind `react`, `react-dom`, `jQuery` oder `lodash`. Diese Bibliothek wird zunächst den Abhägnigkeiten der übergeordneten `package.json` Datei (im Root-Verzeichnis von O-D-L-UX) im Abschnitt `dependencies` hinzugefügtin the` dependencies` section.
```json
"dependencies": {
"@types/react": "16.4.14",
"@types/react-dom": "16.0.8",
"@types/react-router-dom": "4.3.1",
"@material-ui/core": "3.1.1",
"@material-ui/icons": "3.0.1",
"@types/classnames": "2.2.6",
"@types/flux": "3.1.8",
"@types/jquery": "3.3.10",
"jquery": "3.3.1",
"react": "16.5.2",
"react-dom": "16.5.2",
"react-router-dom": "4.3.1",
"@fortawesome/react-fontawesome": "0.1.3",
"@fortawesome/fontawesome-svg-core": "1.2.4",
"@fortawesome/free-solid-svg-icons": "5.3.1",
"jsonwebtoken": "8.3.0",
"@types/jsonwebtoken": "7.2.8"
},
```
Anschließend werden die Abhägigkeiten, die jeweils für das Framework und/oder die App erforderlich sind in die `package.json` Datei des Frameworks bzw. der App in den Abschitt `peerDependencies` übernommen, die jeweils von den geteilten Abhänigkeiten erforderlich sindAfterwards, the dependencies required for the framework and / or the app are taken over into the `package.json` file of the framework or the app in the section` peerDependencies`, which are each required by the shared dependencies.
```json
"peerDependencies": {
"@types/react": "16.4.14",
"@types/react-dom": "16.0.8",
"@types/react-router-dom": "4.3.1",
"@material-ui/core": "3.1.1",
"@material-ui/icons": "3.0.1",
"@types/classnames": "2.2.6",
"@types/flux": "3.1.8",
"@types/jquery": "3.3.10",
"jquery": "3.3.1",
"react": "16.5.2",
"react-dom": "16.5.2",
"react-router-dom": "4.3.1"
}
```
Nachdem After configuring ** ALLE** erforderlichen Apps und das Framework mit der neuen Abhägnigkeit konfiguiert wurden wird der Befehl: `lerna bootstrap` ausgeführt, um die Abhägigkeiten herunter zu laden und bereit zu stellen für die Apps sowie das Framework.ALL ** required apps and the framework with the new dependency, the command: `lerna bootstrap` is run to download the dependencies and provide them to the apps and the framework.
Add an exclusive library
If an app should use a library, but not share it with the other apps, this dependency is only included in the app's `package.json` file in the` dependencies` section### Hinzufügen einer exclusiven Bibliothek
Wenn eine App eine Bibiotjek verwenden solle, diese aber nicht mit den anderen Apps teilen soll, so ist diese Abhägigkeit nur in die `package.json` Datei des App in dem Abschnitt `dependencies`einzufügen.
```json
"dependencies": {
"object-assign": "3.2.1"
}
```
Auch in diesem Fall ist `lerna bootstrap` im Root-Verzeichnis von Also in this case `lerna bootstrap` should be executed in the root directory of O-D-L-UX auszuführen.
Own Libraries
You can develop your own libraries in a separate project folder below the `lib` folder## Eigene Bibliothklen
Eigene Bibliotheken können in einem jeweils in einem seperatem Projekt-Ordner unterhalb des `lib` Ordners entwickelt werden.