[doc] Document how to implement the frontend for a platform

CONTRIBUTING.md

@@ -128,17 +128,29 @@ development team.
 
 ## How to implement a new Platform/Social Network
 
-### tl;dr
+For transferring messages, Kibicara supports a range of platforms/social
+networks, e.g. Mastodon, E-Mail, and Telegram - but more can be added easily.
+This guide explains what you need to do to add another platform, e.g. Matrix or
+XMPP.
 
-1. Implement the following modules in `platforms/<your-platform>/`:
+### Overview:
+
+1. Implement the backend modules in `platforms/<your-platform>/`:
   - `bot.py`
   - `model.py`
   - `webapi.py`
 2. Import your bot in `kibicara/webapi/__init__.py`.
-3. Generate the FastAPI stuff
-4. Generate the angular components for the kibicara-frontend from the FastAPI stuff
+3. Generate the FastAPI boilerplate code
+4. Generate the angular boilerplate code
+5. Copy-paste frontend components from other bots into the angular boilerplate
+   and adjust them to your needs
 
-### Explanation
+At the bottom you can find a checklist what your pull request needs to be
+merged into kibicara.
+
+### Step by step
+
+#### Implement the backend modules
 
 In `kibicara/platforms/<your-platform>/bot.py`, you write the functions through
 which the platform asks the social network for new messages, and publishes
@@ -154,14 +166,90 @@ You will probably need to store the following things:
 * platform-specific settings
 * anything else your platform needs
 
-In `kibicara/platforms/<your-platform>/webapi.py`, you can define HTTP routes.
-You will need them to:
+In `kibicara/platforms/<your-platform>/webapi.py`, you can define REST API
+routes. You will need them to:
 
 * let admins authenticate to the social network in the kibicara web interface
 * update platform-specific settings
 
+#### Import your bot into the kibicara REST API
+
 To run the platform, you need to import the bot in
-`kibicara/webapi/__init__.py`.
+`kibicara/webapi/__init__.py`. You can see how the other platforms did it.
+
+#### Generate the FastAPI boilerplate code
+
+Whenever you changed the REST API in the backend, you need to re-generate the
+FastAPI boilerplate code:
+
+   1. Start backend with `kibicara > /dev/null 2>&1 &`
+   2. Go to the frontend directory: `cd frontend`
+   3. Use this command to download the openapi.json from the backend and
+      generate the boilerplate: `npm run openapi-generator`
+   4. (Now you can stop the backend again, e.g. with `pkill kibicara`)
+   5. Append `/api` to all relevant URLs:
+      `find src/app/core/api/ -type f -exec sed -i "s#{this.configuration.basePath}#{this.configuration.basePath}/api#g" {} +`
+   6. Check if everything is okay (e.g. all api calls need the `/api` prefix)
+
+#### Generate the Angular boilerplate code
+
+##### Generate the platform-specific "public facing" page
+
+Generate boilerplate "card" for myplatform:
+
+```
+ng generate component platforms/myplatform/myplatform-bot-card
+```
+
+Generate boilerplate for the popup that shows the users the guide on how to use
+the bot:
+
+```
+ng generate component platforms/myplatform/myplatform-bot-card/myplatform-bot-info-dialog
+```
+
+##### Generate the platform-specific "settings" page
+
+Generate bot card for settings page:
+
+```
+ng generate component platforms/myplatform/myplatform-settings
+```
+
+Generate popup that will show when you click on "Add" to add the myplatform
+credentials (e.g. login data, api tokens etc):
+
+```
+ng generate component platforms/myplatform/myplatform-settings/mastodon-dialog
+```
+
+If something does not work, try to check `platforms.module.ts` and check if the
+module was imported there. Every module needs to be imported there
+
+#### Adjust the Angular code for your specific platform
+
+Every frontend part for a bot has a similar structure. Basically copy the
+content of the other files e.g. the telegram bot into the generated boilerplate
+above and search and replace all occurrences with `myplatform`. You can see
+the UI with `ng s -o`, it will auto-update on code change.
+
+A component in angular has 3-4 files, only these ones ending with
+`*.component.ts` (typescript) and `*.component.html`(html) are important for
+us. Basically the typescript controls what is shown in the html. Please correct
+every error that stops the angular page build or shows up on the page while you
+go, otherwise this can become a mess.
+
+With that in mind, first write the logic to call the /create endpoint:
+- `src/app/platforms/myplatform/myplatform-settings/myplatform-dialog/myplatform-dialog.component.ts`:
+  implement the form to take the user inputs and the onSubmit() function
+- `src/app/platforms/myplatform/myplatform-settings/myplatform-dialog/myplatform-dialog.component.ts`:
+  implement the html skeleton that takes the form from the user
+
+Then, fix up the public user facing page:
+- `src/app/platforms/myplatform/myplatform-bot-card/myplatform-bot-info-dialog/myplatform-bot-info-dialog.component.html`
+
+Finally, check the other typescript and html pages and adjust e.g. the tutorial
+text for the users.
 
 ### Acceptance criteria for bots (Checklist)
 
@@ -200,4 +288,10 @@ A bot should have at least this functionality:
         - e.g. Telegram via direct message from the bot
         - e.g. E-Mail via e-mail to the user's address
 
-- Web Interface (hood admins)
+- Web Interface (hood admins and users)
+    - A card which allows users to add, configure, start, stop, and delete a
+      platform to their hood
+    - A pop-up which explains to hood admins how to configure the platform
+    - A card which allows users to subscribe on a platform or links to the
+      platform's account
+    - A pop-up which explains to users how to use the platform