offset \ˈȯf-ˌset\ noun

a force or influence that makes an opposing force ineffective or less effective

Mellow - Trello to Coggle Converter

I wanted to figure out how to set up serverless things so I opted for a simple application, although it turned out the architecture of it all had a lot of moving parts. The application in question is taking the Trello board JSON export and converting it to an MM file for Coggle.

Let's say you are primarily using Trello to organize your to-do list. It's a great tool with a lot of features, why not use it. But you are more of a visual type, and seeing it in a color-coded diagram could help you prioritize and group up the tasks more efficiently. If that's the case, this small app would competently meet that very specific need.

It's as simple as going to a Trello board settings and exporting it as JSON.


/media/images/export.png

You can either save a file to disk from your browser or copy the JSON content to a clipboard. With it, you can go to the service I made and put either of those there and press the "Convert" button.


/media/images/convert.png

It will give you an MM file for download that you can save and when you later open up Coggle, you can create a new diagram and drag and drop the file there.


/media/images/diagram.png

The result is your Trello board in a new, mind map, view.


/media/images/diagram2.png

Simple as that, without any hassle of giving permissions and any info to the app. I called the converter from Trello board to MM for Coggle, Mellow.

Why I actually went for it is that we've suddenly found ourselves in the process of looking to buy an apartment, and moving things on the screen and seeing them presented in different ways actually helps a lot with establishing previously unseen patterns and connections. Both Trello and Coggle came in handy, and as I am a tinkering IT guy, Mellow came to be as well.

That was really the main reason. The other reason is taking my mind off from the fruitless pursuit of finding a space we would actually pay to own, rather than tolerate to rent.

But back to Mellow. I made a primitive SDK and CLI for converting the Trello export to Coggle so it was just a matter of wrapping it in a web service.

Now on to the boring part about the architecture. The front-end part is a simple static app that just features plain old HTML and some new JavaScript for modern browsers. It is jQuery, though, since jQuery comes as a requirement for the Bootstrap components that the front-end is made with. It made sense to keep it minimal, but I had to include a bigger version of jQuery to compensate for the CORS calls to a different service. I put the Trello to Coggle front-end repository on GitHub in the end since it allows for the deployment previews in Netlify as opposed to Bitbucket that I'm usually working with. Vesna helped around a lot with the parts I didn't know how to make, but had a rough idea. Netlify is an option that came recommended from a friend since you can specify the security HTTP headers properly with it.

Having the front-end set up, I had to have something that it could communicate with. I made a small Flask web application that takes a text string as an argument via form submit and gives back the JSON in response. If successful, it will have the base64 string that is used to construct an MM file in the browser. I didn't want to deal with file management in the transfer. The application imports the SDK and CLI script as a dependency and it worked properly with the front-end communicating the data it needed. A small set of tests were added to it to make sure it responds correctly.

Since it's Python all the way, I opted for Zappa to create a serverless AWS Lambda function out of the Flask application. The resulting URL of the function is added as the form action attribute in the front-end of the service. Of course, I've set up the custom subdomain for it on the existing one I already own. The FaaS repository for Trello to Coggle converter is hosted on the Bitbucket and I'm deploying it with their Pipelines making sure that the tests it has pass before deployment.

Deploying to Netlify is just a push away with the settings in the netlify.toml file. It doesn't have a specific build since I didn't want to overengineer it. Deploying to AWS is described in the bitbucket-pipelines.yml file and is pretty straightforward.

To recap what I had problems with, it was definitely debugging the security headers. I thought that I've cleared everything up so it's not inline, but apparently extensions can throw you off. You'd need to run your browser in the safe mode to see the proper output. The other thing is pointing the custom domains from your DNS (Digital Ocean in my case) to Netlify and AWS. While that didn't present a problem because you just follow the instructions for adding a custom domain and issue a CNAME redirect on your DNS, getting certification, so you can use HTTPS, in AWS only works in the us-east-1 region, the Virginia center. I couldn't register a certificate in my preferred region. I had to resort to that other one for the moment.

Regarding costs, the service falls in the free tier in every part since it's not like it's going to be overly used. I also disabled keep_warm in Zappa because it's not like the service needs to be up all the time. I didn't want to add the auth mechanism because that would require me to dabble with the user info and the GDPR compliance. It could be useful to connect the apps and just negotiate the content, but it's not necessary for now. I just wanted to try out the FaaS part. The domain I already own so it was just a question of adding the subdomain to the service. The service could benefit from additional tests and analytics as well as monitoring, however, it would be an overkill at this stage.

I hope some of you will find Mellow, the Trello to Coggle converter useful. If you do, but find it can be improved, speak up.