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.
Install Docker Desktop on your localhost. We need it not only to run the database but also to run the generated application.
todo-dbdirectory, go into it and create a
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
init.sqlfile 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`) );
data directory inside the
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:
We can start describing tables in IKODIX. Open IKODIX. Go to Data Tables, and add tables with columns as described below.
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.
full_name column with
status_name column with the type
description column of type
assignee_id column of
status_id column as a
to_date column of type
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
employee table. Link the
assignee_id column from the
task table to the
id column in the
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.
to_date columns from the
task table. Set any suitable names for these columns in the Grid Column Title.
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
to_date fields as visible, give them names and corresponding field types.
But besides these fields, we have linked fields with other tables:
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.
status_name column for
status_id, and the
full_name column for
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:
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.
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 (
myuser and the password (
mypassword. Save the file.
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:
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:
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:
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
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-servicedirectories. 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