Creating Todo application from Molinio templates

Author: Norbert Nemeth | April 21st, 2017


Introduction

Molinio provides a great ability to create the skeleton of a project (template) using ReactJS, AMQP or REST templates in both JavaScript or TypeScript languages. Besides these projects, we created a feature to give you a fully configured, out-of-the-box RabbitMQ and MongoDB server, if necessary. So, with the help of the Molinio, let us show you how to create a simple TODO application. If you’re busy with reading, you can find the complete project on GitHub.

GitHub:
app-todo: link
service-todo-data: link
service-todo-logger: link

Extra: Open TODO microservice product in Molinio with this productManifest file: link

First steps

As a first step, let’s create a simple TODO application that presents basic CRUD operations extended with filtering between tasks. Go to the Start Page and choose the Select folder and Create project. Select a folder for your projects, then you can start the creating first template. For this, we use React and Redux libraries. So let’s just pick React Application (TS) template. Fill the fields as it is seen below:

enter image description here

By clicking Add Project the template starts to form. The process may take a few minutes, because of the npm intallion. After the project form run it with the Start button and select Watch option in Build button. This feature is going to automatize the build itself. If you click the Earth icon, the Counter application opens in your browser. Let’s open the Visual Studio Code with its icon and take a look at project just made.

enter image description here

This is a well-constructed project, in which work can be started. The base of the project is CorpJS (About CorpJS: link.) Delete these files in src folder: ./component/Counter.tsx, ./component/Counter.scss, ./reducers/counter.ts. Firstly we need to make actions and reducers. Now place this code into actionCreators.ts file.

These are the actions we need. Create the new reducers to ./reducers/index.ts

Now we can make the components, three of them to be precise. AddTodo contains the form. TodoList contains the list of tasks. Footer contains a filter, that allows switching between tasks according to their state. Create these files into the components folder:

Finally setup these as it is below in the Application.tsx file:

For the application look nice, insert to following into Application.scss.

We need Bootstap CSS, therefore insert to following link into the head of index.html.

A browser you may see the application.

Hint: Use Earth icon in Molinio

enter image description here

Storing tasks

Refreshing the browser makes tasks disappear. Preventing this let’s male a Rest project. The Rest project stores the tasks to the Mongo database, thus making them available later. So firstly, create a Mongo database named the infra-todo-mongodb.
enter image description here
Create the Rest project too, named service-todo-data on the 3001 port. Do not forget to tick MongoDB as dependency.
enter image description here
Let’s open the Visual Studio Code with it’s icon and take a look at project just made. We need to two new CorpJS modules. Install them with these commands: npm i corpjs-endpoints --save, npm i corpjs-mongodb --save. Afterwards import these into the “system.ts” file.

Hint: In Molinio by clicking the console icon, the console opens in the project

Add MongoDB to Routers dependencies.

Add these to complete the config file (./config/default.js)

Next up “Router.ts”. Add mongodb to the Deps interface.

Create a MongoDB collection in the start function and insert the endpoints to the code after the userCollecton variable.

As the last step, use these endpoints in the app-todo project. Insert these codes after the ADD_TODO and TOGGLE_TODO events:

Put this code to index.tsx file. When the application starts, this code will load in tasks from the database.

Done! Now every modification will be saved to the database.

Saving changes into a history file

The next project will save all the incoming messages into the history file. The type of this project is Amqp and it requires a RabbitMQ server. Firstly, create a RabbitMQ server named infra-todo-rabbitmq.
enter image description here

After the server is done, make an Amqp project:
enter image description here

Modify messaging parameters in the config file, to this:

Create a simple function into the Consumer.ts file. This function will create the history file if it does not exist.

Use this in the Start function.

Modify these rows:

Implement a message save function.

If necessary install “moment” module. “npm i moment –save”

We need this module: corpjs-amqp (npm i corpjs-amqp --save). When any of the endpoints are called, it sends a message to Rabbit. Create a file named RabbitSender.ts in service-todo-data project.

Add these in the system.ts file:

Add rabbitSender to the Router dependencies.

In the config file set the RabbiMQ permission to:

Add mongodb to the Deps interface in the Router.ts file and let’s send some message to Rabbit.
For instance:

Finnaly, set each of the dependencies in the Topology page. Look at the results!
enter image description here

enter image description here

enter image description here