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 , an online source code generator for full-stack CRUD applications. IKODIX to generate code. Instead, it uses a declarative approach. IKODIX does not require access to your database 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 on your localhost. We need it not only to run the database but also to run the generated application. Docker Desktop Create a directory, go into it and create a file todo-db docker-compose.yml 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 file and copy the following code into it init.sql 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 directory inside the directory data todo-db 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. . Go to , and add tables with columns as described below. Open IKODIX Data Tables Add the table. employee By default, it will already have a mandatory column with type and name . This is fine for us because the real table has a primary key column named . This applies to all other tables in our database. Primary Key Long id employee id Add column with type full_name String Add the table task_status Add the column with the type status_name String Add the table task Add the column of type description String Add the column of type assignee_id Long Add the column as a status_id Long Add the column of type to_date Date Once we have a list of tables, we can start creating projections. A is data from some linked tables. This data will be displayed on the front-end on a separate page in the . You can make an analogy with the SQL query that you write to select some records from the database. projection Data Grid 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 projection. Task 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 table first. The first table is the in the diagram, and we will link the other tables to it. This is very similar to how we write a SQL query. task root table Let's add the table. Link the column from the table to the column in the table. task_status status_id task id task_status Add the table. Link the column from the table to the column in the table employee assignee_id task id employee Let's go to the tab. Here we should mark as all columns from the tables in the diagram, which we want to see on the front-end. View Visible Mark the and columns from the table. Set any suitable names for these columns in the . description to_date task Grid Column Title Mark the column from the table, and the column from the table. Give them names, too. full_name employee status_name task_status You can rearrange the order of the columns that will be displayed in the . Data Grid Next, go to the tab. We will configure the form for creating a record for the in the diagram. That is, the record will be created only in the table. Create root table task Let's mark and fields as visible, give them names and corresponding field types. description to_date But besides these fields, we have linked fields with other tables: and . Let's mark them as visible, name them, and choose type. assignee_id status_id Select Once we mark them as visible, we have the option in the 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 Control Settings Select the column for , and the column for . status_name status_id full_name assignee_id Go to the tab and do the same as in the tab. Update Create 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: and . Add to each projection one table on the diagram: and , respectively. Employees Statuses employee task_status 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 section and set the database type we want. System Settings Click the button and name the application something like . Download Source Code ToDo Admin Save the archive to the localhost in the empty directory. Unzip the archive in this directory. todo-app Now we can get started with our application. We don't need to install anything extra to start the application. Open the file and read carefully what is written there. README.txt According to the manual, there are two modes of running the application: and demo dev. is when a ready-to-use application is built and run. Demo is when the application is launched for development. The for the front-end works in this mode. Dev Hot Reloading 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 file. Find there the variable and replace its value with . Then replace the username ( ) with and the password ( ) with . Save the file. .env dataSource.url jdbc:mysql://host.docker.internal:3306/todo dataSource.username myuser dataSource.password mypassword 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 (or for Windows). And wait for the application to start. app.sh demo app.cmd demo Since the containers with the application run in the background, we need to keep track of them. Let's run the two commands and in separate terminals. app.sh client-log app.sh service-log 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: and password: . administrator 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: and in separate terminals. app.sh client-log app.sh service-log When ready, let's open the browser with the address: http://localhost:3030 Now, find the file in the front-end code in the directory, and replace the text with the value we need: . WorkspacePage.tsx to-do-admin-client/src/features/layout Company Name 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 works. Hot Reloading After the final changes, you need to run the again - then the parts of the application will be built for use in the production. You will find the distributions in and in . app.sh demo to-do-admin-client/build to-do-admin-service/target If you are going to extend the functionality of the application, first read the files with a detailed description of the code structure in the and directories. This will help you to understand the code without difficulty. README.md to-do-admin-client to-do-admin-service 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!!!

Target

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

IKODIX Helps to Create Admin Panel Fullstack Apps for Your Databases

Too Long; Didn't Read

Companies Mentioned

Alex Pustovalov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

IKODIX Helps to Create Admin Panel Fullstack Apps for Your Databases

Too Long; Didn't Read

Companies Mentioned

Alex Pustovalov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES