Prototyping an app with Kinto

I own a car. And it costs a lot. But how much exactly is difficult to know, because the costs are spread between maintenance, repairs, fuel, insurance... What if I could store each expense right on the spot, categorize it, and maybe add a description? That would be tremendously helpful, right?

In order to build something like that, I'd normally have to fire up a django project, maybe use django-rest-framework to have a proper REST API for the future web or mobile application. Then choose a database like postgresql and configure it.

But I'm not even sure it's a good idea! Maybe we can instead give it a try using the kinto-admin.

Let's get started

Let's first think about the data model:

• title: a string
• comment: a multiline string
• category: a string taken from a list of choices
• price: a float

And then how to store entries in Kinto:

• we'll have a bucket (track-my-expenses) which contains a collection (car-expenses)
• a JSON schema on the collection will validate the data before it's stored in records
• and a UI schema to improve the way the form is displayed in the admin (eg. a textarea for the comment instead of a single line text input).

Our proof of concept will take advantage of the kinto-admin UI which gives us a way to create/read/update/delete entries (records).

Create the bucket and the collection

For our proof of concept, we'll use Mozilla's demo server, which is wiped clean every night: https://demo.kinto-storage.org/v1/.

Let's sign in to the admin with the user/pass of our choice.

Keep in mind that there's no concept of user in Kinto. Instead, a unique id will be generated from the authentication, and the data you enter/modify will be linked to it. Permissions are based on this mechanism.

Once connected, we can create a bucket:

And then create a collection:

Let's not submit this new collection just yet, we'd first like to add a JSON schema.

Add a JSON schema

As you can see while creating a collection, we have the option of adding a JSON schema. This schema will be used to validate the data we will submit, before it's stored in a record. The schema will also be used to automatically generate the CRUD forms for our data, straight into the admin.

Following our data model, here's what the JSON schema should look like:

{
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "title": "Title",
      "description": "Short title for an expense"
    },
    "comment": {
      "type": "string",
      "title": "Comment",
      "description": "Provide details if needed..."
    },
    "category": {
      "type": "string",
      "enum": ["fuel", "repair", "insurance", "maintenance", "equipment"],
      "title": "Category",
      "description": "A category for this expense"
    },
    "price": {
      "type": "number",
      "title": "Price",
      "description": "The cost for this expense"
    }
  }
}

Note the enum attribute on the category field which will be rendered in the forms as a select, instead of a simple input text field.

Tip: You can use the form builder to build your form visually, and then copy the JSON schema to the admin!

Let's still not submit this new collection just yet, as we'll want to add a UI schema.

Add a UI schema to improve the forms

Adding a UI schema will improve the way the admin will display our data, and the forms to add/edit it.

{
  "ui:order": [
    "title",
    "comment",
    "category",
    "price"
  ],
  "comment": {
    "ui:widget": "textarea"
  }
}

The ui:order will be used to display the fields in the order we want (JSON objects attributes aren't ordered), and we also specify that we'd like a textarea for the comment field, instead of a single line input text field.

Nearly done! Just before submitting this new collection, let's configure the columns to be displayed in the record list page.

Final touches

By default, the admin will only display one column in the record list page. It would be much more convenient to display the category and price on top of the title:

Profit!

We now have everything we need for our proof of concept!

List the current records (there's none yet):

Add a new record:

Display the list of (sortable) records once we added a few:

As you can see, without a single line of code and very small effort, we have a functional, albeit very basic, proof of concept!

While this is a nice and easy way to have a proof of concept, the admin's role is not meant to fulfill all your needs. If you wanted aggregation or filtering, you would still need a client, your own application.