meu entulho querido

guias

Making a collaborative website with Websites for Trello and RequestHub

Basics

For this I will assume you already have an account at RequestHub and Websites for Trello. If you don’t, they’re both free and you can create each one in a minute.

The first step is to create a website. On Websites for Trello, a website is a Trello board and the cards on the Trello board are its contents. If you already have one website there you can use it, otherwise create one.

What we will do

On the website we will put a simple HTML that will be used for our visitors to submit their content to the site.

On RequestHub we will create an endpoint that will receive the request directly from that form.

RequestHub will then use the data from the form to call the Trello API and create a card on the same board that is hosting the website, so the site will be updated with the new content.

Doing it

Getting your Trello key and token

Go to https://trello.com/app-key to get your Trello developer key. You’ll also need a token, so click on “generate a Token” and authorize it (you’re authorizing yourself to access your own profile, so there is no problem). Now combine the key and the token in a string like this:

key=ac61d8974aa86dd25f9397fa651a2ed8&token=f45f4a7f10134c41e93ebf48eebc7bf5a7f751e827fe82a3050f7d8962381ba1

and take note of it.

Getting your Trello list id

Now we need to know the id of the list in which the cards will be created. This is a difficult thing, but we’ll do it quickly. Open a new tab in your browser and go to the following address:

https://api.trello.com/1/boards/<board>/lists?<key-and-token>

but replace <board> with the short code of the Trello board, that nonsense string that is shown in the URL when you are browsing it (something like gYhT3v1Z); and in place of <key-and-token> use the string you just created above. In the end the URL will be something like https://api.trello.com/1/boards/gYhT3v1Z/lists?key=ac61d8974aa86dd25f9397fa651a2ed8&token=f45f4a7f10134c41e93ebf48eebc7bf5a7f751e827fe82a3050f7d8962381ba1.

When you visit the URL you created you’ll see a string with a lot of data in the JSON format. Look for the name of the list where you want to create cards and take note of its "id". For example, if the list name is “content from the users” you’ll see a part of the string that will look like: "id":"553182c964a6fd2a14c60bff","name":"content from the users", and 553182c964a6fd2a14c60bff will be the id.

Creating the endpoint on RequestHub

On your dashboard on RequestHub, click somewhere to create a new endpoint. You’ll be presented with a lot of options.

  1. On identifier, just leave the random name that appeared there, or use any name you want. For this tutorial, suppose the name we are going to use is steep-mountain-1354.
  2. On Short description, write something like “forms submitted from my site”.
  3. On Method, mark “POST”.
  4. On URL, use the <key-and-token> string we had from the step before to form an URL like the following: https://api.trello.com/1/cards?<key-and-token> (the result will be something like https://api.trello.com/1/cards?key=ac61d8974aa86dd25f9397fa651a2ed8&token=f45f4a7f10134c41e93ebf48eebc7bf5a7f751e827fe82a3050f7d8962381ba1).
  5. On Modifier is where all the action happens. We will use the data submitted in the form to create a name and a description for the card. This will depend a lot on what data you’ll get from the form and how you want your card to look, but for this tutorial let’s suppose you’ll get the name of visitor, a title for his content and a text, which is the content he is sending, and you want to create a card that has the content title as the card name, and the visitor name and content in the card description. Also, we will put a due date on the card for today, so Websites for Trello will be sure the post is dated as today. That said, the Modifier is:
{
  name: .title,
  desc: "\(.visitorname) has sent us:\n\n> \(.content | split("\n") | join("\n> "))",
  due: (now | strftime("%Y-%m-%d")),
  idList: "<the list id we fetched earlier>",
  pos: "top"
}

You can leave all the other fields as they are.

Putting a form on the Websites for Trello site

Now that we have an endpoint on RequestHub we can just create a form that will submit content to it and place that form on a page on our site. Websites for Trello doesn’t have a builtin form we can use, but it lets us include any Javascript script we want, so we will use one to create a form on a page.

First we go to our #pages list on our Trello board and create a card named /submit. In the description we can write anything, or nothing at all.

Now we go to https://websitesfortrello.github.io/attachments/, a service that let’s us create scripts as attachments to the includes card (this is the special card Websites for Trello uses for adding Javascript to the site). Log in there with Trello, click on the board that is hosting our site then on “includes”. Then we add a “new javascript” and paste the following script on the right:

if (location.pathname === '/submit') {
  var form = document.createElement('form')
  form.innerHTML += `
    <label>Your name: 
      <input name="visitorname">
    </label>  
    <label>Title:
      <input name="title">
    </label>
    <label>Your content:
      <textarea name="content" placeholder="blah blah blah"></textarea>
    </label>
    <button>Submit</button>
  `
  document.querySelector('article').appendChild(form)

  form.addEventListener('submit', function (e) {
    e.preventDefault()
    fetch('https://requesthub.xyz/w/steep-mountain-1354', {
      method: 'POST',
      body: JSON.stringify({
        visitorname: e.target.querySelector('[name="visitorname"]').value,
        title: e.target.querySelector('[name="title"]').value,
        content: e.target.querySelector('[name="content"]').value
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .catch(e => {
      console.log('error sending form:', e)
    })
    .then(() => {
      form.innerHTML = '<p>Sent!</p>'
    })
  })
}

Then click “Save”.

We should also add some CSS to give our form some very basic styling. Click on “new CSS” and paste the following on the right:

article form {
  margin: 10px auto;
  width: 500px;
  font-size: 110%;
}

article form label {
  display: block;
  margin: 10px;
}

article form textarea,
article form input {
  display: block;
  margin: 5px;
  width: 100%;
}

article form textarea {
  height: 200px;
}

article form button {
  background: #688dae;
  display: block;
  margin: 10px auto;
}
article form button:hover,
article form button:active {
  display: block;
  margin: 10px auto;
}

Click “Save”.

It’s done

A hundred hours later, it is done. You can submit your form now. Where is your form? It is on your Websites for Trello site domain (if you haven’t changed it, it is <your-board-short-code>.wft.space/submit, something like http://gYhT3v1Z.wft.space/submit).

To make that page appear on the top navigation menu of the site, look in the Trello board for a card named “nav” and add an item to its checklist named [Submit content or whatever](/submit).

I think now everything is finally done.