MLAND Series – Part I Simple Todo List App Api

MLAND Series – Part I Simple Todo List App Api

The purpose of this post is to familiarize you with the Loopback framework and Angular 4. You will create a very basic todo list app with a backend api and a frontend ui.

Familiarizing with Loopback

Install Loopback

I expect you have installed Strongloop Loopback on your development system already. Loopback offer Installation Instruction and they worked perfectly for me. If you have problems there contact me and I try my best to help you.

Create Loopback project

At first you need to create a loopback project in some folder. I call it todolistapp, not very creative I know.

After you installed the Loopback to your system, open a console, change into th directory you wish and type lb and hit enter. Now you should see this:

? What's the name of your application? (todolistapp)

The Loopback Generator asks you how you want to call your project. It defaults to the name of the folder you are in. Choose a name and hit enter.

 ? Which version of LoopBack would you like to use? (Use arrow keys)
  2.x (long term support)
❯ 3.x (current)

Now it asks you which Loopback version you want to use for this project. If you don´t have a good reason to use the LTS Version 2.x, choose the current version 3.x and hit enter.

? What kind of application do you have in mind? (Use arrow keys)

❯ api-server (A LoopBack API server with local User auth)
empty-server (An empty LoopBack API, without any configured models or datasources)
hello-world (A project containing a controller, including a single vanilla Message and a single remote method)
notes (A project containing a basic working example, including a memory database)

At last it asks you what type of application you want to be generated for you. Here you get some magic, choose api-server and loopback with configure local user authentication for you.

Depending on your internet connection you can get a coffee now, Loopback download the necessary package and configures the project according to our selections.

Generating .yo-rc.json


I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.


   create .editorconfig
   create .eslintignore
   create .eslintrc
   create server/boot/root.js
   create server/middleware.development.json
   create server/middleware.json
   create server/server.js
   create README.md
   create server/boot/authentication.js
   create .gitignore
   create client/README.md

Next steps:

  Create a model in your app
    $ lb model

  Run the app
    $ node .

The API Connect team at IBM happily continues to develop,
support and maintain LoopBack, which is at the core of
API Connect. When your APIs need robust management and
security options, please check out http://ibm.biz/tryAPIC

Type into the console node . and the api starts.

Experiment with the API Explorer

Fire up your browser and open  http://localhost:3000/explorer. You should see this:

Did you notice the User Entry? Click on it and you see this:

As I mentioned earlier Loopback supports you with automatic generation of common models if you choose the api-server in the creation dialogue. You can see the CRUD Routes that you can already use, just because you made the right decision.

Add a model to the API

Let us create the task model now. Open the console again and cancel the running server with Ctrl+C. Type in lb model and hit enter.

You should see:

? Enter the model name:

Enter the name Task for the model and hit enter.

? Select the datasource to attach task to: (Use arrow keys)

❯ db (memory)
(no datasource)

Choose db(memory) as data-source. This Datasource was automatically added by Loopback and saves all data inside the computers main memory. This means the data vanishes when the server stops.

? Select model's base class (Use arrow keys)

Model
❯ PersistedModel
ACL
AccessToken
Application
Change
Checkpoint

Choose PersistedModel. This is a base-model from the Loopback Framework and as the name indicates this model allows saving the data of the model.

Next Loopback wants to know if this is a model you want to expose, so it can be accessed e,g, from our frontend. Hit enter to take default yes.

? Expose task via the REST API? (Y/n)

The model gets exposed in the plural form, Loopback adds an s to the model name as default. Normally you can accept the default here with hitting enter.

? Custom plural form (used to build REST URL):

You can save the model inside the server folder of loopback or above it. Choose the default common.

? Common model or server only? (Use arrow keys)

❯ common
server

Now we add properties to the loopback model. Choose the following: choose id, type string, required yes. When Loopback asks for a default value hit enter.

Enter an empty property name when done.

? Property name: id
invoke loopback:property
? Property type: string
? Required? Yes
? Default value leave blank for none :

We repeat this for the property description. Choose type string, required yes, hit enter on default value.

Let's add another task property.
Enter an empty property name when done.
? Property name: description
invoke loopback:property
? Property type: string
? Required? Yes
? Default value leave blank for none:

At last we need a property to mark a task done. Choose type boolean, required yes and default value false.

? Property name: done
invoke loopback:property
? Property type: boolean
? Required? Yes
? Default value leave blank for none:

At the new prompt for a property name just hit enter and we finished creating the task model.

That´s it. You have the API for a very basic Todo list App. We make only two small changes, so that Loopback generates the id for us:  Open api/common/models/task.json, it should look like this:

{
  "name": "Task",
  "base": "PersistedModel",
  "idInjection": true,
  "options": {
    "validateUpsert": true
  },
  "properties": {
    "id": {
      "type": "string",
      "required": true
    },
    "description": {
      "type": "string",
      "required": true
    },
    "done": {
      "type": "boolean",
      "required": true
    }
  },
  "validations": [],
  "relations": {},
  "acls": [],
  "methods": {}
}

Change the Value  "idInjection": false,to "idInjection": true,

and add the following to the id property:

"required": true,
"defaultFn": "uuidv4"

So task.json now does look like this:

{
  "name": "Task",
  "base": "PersistedModel",
  "idInjection": false,
  "options": {
    "validateUpsert": true
  },
  "properties": {
    "id": {
      "type": "string",
      "id": true,
      "required": true,
      "defaultFn": "uuidv4"
    },
    "description": {
      "type": "string",
      "required": true
    },
    "done": {
      "type": "boolean",
      "required": true
    }
  },
  "validations": [],
  "relations": {},
  "acls": [],
  "methods": {}
}

Next we will have a look at the new model and it´s routes.

Experiment with the API Explorer II

Start the API again like before with  node .

and open it . Admire your newly created data model and the default CRUD Routes loopback gave you:

Getting familiar with Loopback files

You will get familiar with more and more files of Loopback over the course. I will show you the new areas relevant to the content of each part of the series.

/common/.json

These are the definition files of your custom models. These Models are shared with a client in /client.

/common/.js

These are the files for the custom methods ( Loopback calls them Remote Method) of your models.

/server/.json, /server/.js

These are the location of the same files type of files as /common. The Difference is that these models are not (!) shared with /client. You can use it so separate models of the client and the server.

Usually I put my models into /common

Conclusion / Lessons learned

In this part of the series you learned:

• How to create a Loopback Project
• How to use the API Explorer
• How to Add a model to the Project
• Where are model definition files placed

Yours sincerely,

Frank