To Do app with Angular 10 and InvokeDB

Overview

This article walks through setting up an InvokeDB table and connecting it to an angular application. Click here to see a full example of the To Do application.

InvokeDB is a simple NoSQL database with built in API endpoints when tables are created. We can use this to store our to do list items.

Prerequisites

1. Create an InvokeDB account
2. Install the Angular CLI

Guide

Set up ToDo table in InvokeDB

1. Login to your account at https://invokedb.com
2. Click the + icon and select Empty Table
3. Name the table ToDo
4. Edit the table so that you have 2 string columns with the following names
   • name
   • isComplete

The table is now setup, you can view available API endpoints by clicking the API button in the top right of the table.

Your table should look like this

Calling the ToDo table from Angular

The samples below will show how to send a request to the Get and Search endpoints for the To Do table.

Retrieve your api token from https://db.invokedb.com/account

Set the following 2 variables

const BASE_URL = 'https://api.invokedb.com/v1';
const API_KEY = 'your api key';

InvokeDB requires the api key to be sent as a Bearer token. So we'll create a helper method to return an Authorization header.

getHeaders() {
  return new HttpHeaders().set('Authorization', `Bearer ${API_KEY}`);
}

Create a getRows() method to call InvokeDB

getRows(table: string, params: any, filter?: any) {
  const { skip, limit } = params;
  const urlQuery = `table=${table}&skip=${skip}&limit=${limit}`;
  const headers = this.getHeaders();

  return filter
    ? this.http.post(`${BASE_URL}/search?${urlQuery}`, filter, { headers })
    : this.http.get(`${BASE_URL}/get?${urlQuery}`, { headers });
}

Create the getItems() method

getItems(showCompleted = true) {
  const params = {
    skip: 0,
    limit: 200
  };

  let filter;

  if (!showCompleted) {
    filter = {
      isComplete: {
        value: 'no',
        type: 'equals'
      }
    };
  }

  return this.invokedb
    .getRows('todo', params, filter)
    .pipe(map((res: any) => res.data));
}

Assuming the above code was put into a service, you can now use the following code to query the todo items stored in the table.

this.svc
  .getItems(this.showCompleted)
  .subscribe(items => (this.items = items));