diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ce20a1f..bcdfca1 100644 --- a/CONTRIBUTING.md +++ b/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