Deck - Trello bridge for Nextcloud

⚠ This code is not ready for use in any production environment! ⚠

Proof of concept front-end bridge from Trello to Nextcloud Deck

Background

Since both Trello and Nextcloud Deck are API driven, the frontend is only loosely coupled to the backends.

What if we put in a service worker between the Deck frontend (vue) and the Nextcloud backend?

• Would we be able to intercept requests for specific boards, and reroute that to Trello?
• Would we be able to show the cards and lists from Trello in a Deck UI, without having to touch a lot of code in Nextcloud?
• Could we then have collaboration on the same kanban, with two different web applications working on the same data?

The answer is "yes". This repository contains a proof of concept that does just that.

Install

Note: The service worker needs to be in the root to be able to intercept both calls to apps/deck/* and ocs/*

1. Link trello-service-worker.js to the root:

   cd NEXTCLOUD_ROOT
   ln -s apps/deck/js/trello-service-worker.js .

2. Add this to the .htaccess:

   <FilesMatch "trello-service-worker.js$">
     Header always unset Content-Security-Policy
   </FilesMatch>

3. Create a developer key on Trello: https://trello.com/app-key
4. Add your credentials to apps/deck/js/trello-config.js
5. Add a mapping from your board ID to the board ID in trello. This can be either the long version (as used in the trello API) or the short version (as used in trello urls);

Usage

Visit the Deck created after the installation steps have been successfully completed.

You should see the Trello Board as a Nextcloud Deck, with all features listed below available.

Features

Currently supported:

• View board name
• View lists
• View cards (title, descriptions)
• View card comments
• Update card title
• Update card description
• Add comments
• Move cards within a list
• Move cards to another list

Not yet supported:

• Update board name
• Update list name
• Create / delete ilsts
• Card attachments
• Card labels

Development

In order to make this work, a clone of the original Deck code was made.

The following files were added or edited:

• appinfo/routes.php
• js/load-trello-service-worker.js 🆕
• js/trello-service-worker.js 🆕
• lib/Controller/ServiceWorkerController.php 🆕
• templates/main.php

The main template includes the load-trello-service-worker.js script in the browser, as part of the Deck application.

The loader JS script registers the service worker in the browser, from the /trello-service-worker.js URL.

A relation diagram of this would look like this:

Tests

Unit-tests have been created for the Javascript (JS) code.

For JS testing, Qunit is used. To run all tests, open tests/js/index.html in a browser.

Thanks

This code was created for the Nextgov hackathon in 2022, as part of the "Improvements to Deck" track.

We would like to thank the Open Source Programme Office at the European Commission (EC-OSPO) and Nextcloud for making this hackathon possible!

Contributing

As this code has been created as a proof-of-concept for a hackathon, PRs are not expected (or accepted).

Any questions can be directed at @YvoBrevoort or @Potherca on Twitter.

License

This code builds upon Nextcloud Deck which is licensed under GNU Affero General Public License v3 or any later version (AGPL-3.0-or-later).

The AGPL-3.0 demands that the original copyright must be retained, hence this project is also licensed under AGPL-3.0-or-later.