IKODIX Helps to Create Admin Panel Fullstack Apps for Your Databases

If you store information in a relational database, I bet you wish you had a handy application through which you could view or edit that data. Then, as far as I can guess, you started making this app or even made it.

In any case, if you've ever created an application for working with a database, you know that it's not easy at all.

You have to choose a technology stack. Then you have to design the application's architecture to ensure security, speed, and accuracy of data, etc.

Fortunately, there are already numerous frameworks and libraries that can be used as building blocks for building full-stack applications.

But still, writing and debugging code takes a lot of time, even if you are a very experienced software engineer.

So we decided to create a tool that would generate application code for your database using these "blocks.” We wanted to make the generated source code usable right out of the box. If not, you could use it as a seed for your own application.

And we did it! Meet IKODIX, an online source code generator for full-stack CRUD applications.

IKODIX does not require access to your database to generate code. Instead, it uses a declarative approach.

I hate to give a long and tedious description of IKODIX - let's go straight to creating a small application. This should take you no more than 50-60 minutes.

Even if you already have some test databases available, let's run the MySQL database in Docker to speed up the process.

Run the database

Install Docker Desktop on your localhost. We need it not only to run the database but also to run the generated application.

• Create a todo-db directory, go into it and create a docker-compose.yml file
• Copy the following code into this file

services:
  db:
    image: mysql:8.0.19
    volumes:
      - ./data:/var/lib/mysql
      - ./init.sql:/init.sql
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=root_password
      - MYSQL_DATABASE=todo
      - MYSQL_USER=myuser
      - MYSQL_PASSWORD=mypassword
    expose:
      - 3306
    ports:
      - 3306:3306
    command: --init-file /init.sql

• Create an init.sql file and copy the following code into it

CREATE DATABASE IF NOT EXISTS todo;
USE todo;
DROP TABLE IF EXISTS `employee`;
CREATE TABLE `employee` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `full_name` varchar(1000) NOT NULL,
  PRIMARY KEY (`id`)
);
DROP TABLE IF EXISTS `task_status`;
CREATE TABLE `task_status` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `status_name` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
);
DROP TABLE IF EXISTS `task`;
CREATE TABLE `task` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `description` varchar(5000) NOT NULL,
  `to_date` date DEFAULT NULL,
  `assignee_id` bigint DEFAULT NULL,
  `status_id` bigint NOT NULL,
  PRIMARY KEY (`id`),
  KEY `task_employee_id_fk` (`assignee_id`),
  KEY `task_task_status_id_fk` (`status_id`),
  CONSTRAINT `task_employee_id_fk` FOREIGN KEY (`assignee_id`) REFERENCES `employee` (`id`),
  CONSTRAINT `task_task_status_id_fk` FOREIGN KEY (`status_id`) REFERENCES `task_status` (`id`)
);

• Create another data directory inside the todo-db directory

• Run the command line command: docker-compose up -build

• Wait until the container reports that it is ready…

  
  

You now have a Docker container running on your computer with a to-do database. It contains 3 tables: employee, task, task_status.

Open IKODIX

We can start describing tables in IKODIX. Open IKODIX. Go to Data Tables, and add tables with columns as described below.

• Add the employee table.

  By default, it will already have a mandatory Primary Key column with type Long and name id. This is fine for us because the real table employee has a primary key column named id. This applies to all other tables in our database.

• Add full_name column with String type

  
  

• Add the task_status table

• Add the status_name column with the type String

  
  

• Add the task table

• Add the description column of type String

• Add the assignee_id column of Long type

• Add the status_id column as a Long

• Add the to_date column of type Date

Once we have a list of tables, we can start creating projections.

A projection is data from some linked tables. This data will be displayed on the front-end on a separate page in the Data Grid. You can make an analogy with the SQL query that you write to select some records from the database.

As you may have guessed, our database contains information about some tasks. So the first thing we need to see is all the tasks and the employees assigned to them.

Create the Task projection.

A diagram will open in front of us, where we need to add tables that we want to see records from.

We will add the task table first. The first table is the root table in the diagram, and we will link the other tables to it. This is very similar to how we write a SQL query.

Let's add the task_status table. Link the status_id column from the task table to the id column in the task_status table.

Add the employee table. Link the assignee_id column from the task table to the id column in the employee table

Let's go to the View tab. Here we should mark as Visible all columns from the tables in the diagram, which we want to see on the front-end.

Mark the description and to_date columns from the task table. Set any suitable names for these columns in the Grid Column Title.

Mark the full_name column from the employee table, and the status_name column from the task_status table. Give them names, too.

You can rearrange the order of the columns that will be displayed in the Data Grid.

Next, go to the Create tab. We will configure the form for creating a record for the root table in the diagram. That is, the record will be created only in the task table.

Let's mark description and to_date fields as visible, give them names and corresponding field types.

But besides these fields, we have linked fields with other tables: assignee_id and status_id. Let's mark them as visible, name them, and choose Select type.

Once we mark them as visible, we have the option in the Select Control Settings section to customize the drop-down lists. We can specify the column from the linked table used for the names in the drop-down list.

Select the status_name column for status_id, and the full_name column for assignee_id.

Go to the Update tab and do the same as in the Create tab.

We have the first projection ready. Now, IKODIX will be able to generate an application where we will have a page with all the tasks and the employees assigned to them. And we will be able to add tasks through the input form.

But we don't have a page and input form to add employees to the list. In addition, there is no page and form for entering job statuses.

This is easy to fix. Create two projections for employees and statuses: Employees and Statuses. Add to each projection one table on the diagram: employee and task_status, respectively.

It would probably be preferable if you try to configure yourself Data Grid and forms in the tabs View, Create and Update for each projection.

When you have completed all the settings in the new projections, we can start generating the source code for the application.

Generating the source code

But there is one more thing not finished - we need to choose the type of database MySQL. Let's go to the System Settings section and set the database type we want.

Click the Download Source Code button and name the application something like ToDo Admin.

Save the archive to the localhost in the empty todo-app directory. Unzip the archive in this directory.

Now we can get started with our application. We don't need to install anything extra to start the application.

Open the README.txt file and read carefully what is written there.

According to the manual, there are two modes of running the application: demo and dev.

Demo is when a ready-to-use application is built and run.

Dev is when the application is launched for development. The Hot Reloading for the front-end works in this mode.

Let's run the application in demo mode to see how it works out of the box.

Before we start, we need to configure access to our database. This can be done in the .env file. Find there the variable dataSource.url and replace its value with jdbc:mysql://host.docker.internal:3306/todo. Then replace the username (dataSource.username) with myuser and the password (dataSource.password) with mypassword. Save the file.

Running the application

Two Docker containers are used to run all the parts of the application. But all we need to do is run the command app.sh demo (or app.cmd demo for Windows). And wait for the application to start.

Since the containers with the application run in the background, we need to keep track of them. Let's run the two commands app.sh client-log and app.sh service-log in separate terminals.

Once we see that everything is up and running, we can open the browser with the address http://localhost:3030

There is one user with administrative rights by default in the system. So we will log in under his account, username: administrator and password: administrator_password.

There are no records in our tables, so let's try to get new employees, new statuses and create tasks.

Even though the app works out of the box, we need to change the company name in the upper left corner.

To do this, let's run the application in dev-development mode. Run the command: app.sh dev.

Let's wait for all Docker containers to start. To ensure that they are ready, use the commands: app.sh client-log and app.sh service-log in separate terminals.

When ready, let's open the browser with the address: http://localhost:3030

Now, find the WorkspacePage.tsx file in the front-end code in the to-do-admin-client/src/features/layout directory, and replace the text Company Name with the value we need: ToDo Admin.

Save the changes in the file.... and see the page in your browser. The value should automatically change.

Docker containers for the front-end are made so that Hot Reloading works.

After the final changes, you need to run the app.sh demo again - then the parts of the application will be built for use in the production. You will find the distributions in to-do-admin-client/build and in to-do-admin-service/target.

If you are going to extend the functionality of the application, first read the README.md files with a detailed description of the code structure in the to-do-admin-client and to-do-admin-service directories. This will help you to understand the code without difficulty.

I hope you are not too tired and enjoy building with IKODIX. In any case, it is much faster and more comfortable than developing such applications by yourself.

If you have any comments or questions, do not hesitate to post them on our forum: IKODIX forum

Also, follow new IKODIX releases on our Twitter account: @kodix

Thank you!!!