Introduction

IKODIX is an online generator of seed source code for full-stack applications with Spring Boot and React for any relational database. Currently, IKODIX supports PostgreSQL and MySQL.

There is no need to access your database - everything is done in the generator by description. You describe the tables in the database, build projections of the data you would like to see in your application, and finally, generate the code of the application.

IKODIX

As a result of the generation, you get the source code of the client part of the application and the server part of the application in one archive.

There is a guide on how to build and run the application in the output package. You will also find a complete description of the files and the architecture of the application in the archive.

The server side uses Java (Spring Boot stack) and the front-end uses React (Redux Toolkit, Material UI).

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

Getting started

If you want to create a admin panel application for your database open IKODIX and follow 6 steps.

Step 1: Add data tables

Add the description of each table in your database to the data tables list. You can do this in the "Data Tables" screen.

  • Any data table or column name should start from character and do not have spaces and special symbols except "_" symbol.
  • Data tables names should be unique.
  • Columns names should be unique within the data table.
IKODIX

If you have difficulty determining what type of column to specify in the table description, then use the following table.

Type in the column description Possible values SQL data type
String Any character string CHAR, VARCHAR
Integer Signed four-byte integer, signed two-byte integer INTEGER, SMALLINT
Long Signed eight-byte integer BIGINT
Decimal Exact numeric of selectable precision, currency amount NUMERIC, REAL, DOUBLE
Boolean Logical Boolean (true/false) BIT
Date Calendar date (year, month, day) DATE, TIMESTAMP
Date & Time Date and time TIMESTAMP

You can use any column from your table as the "Primary Key" column in the table description.

Please note, that when you add a record, the value in the "Primary Key" column has to be generated automatically by your database.

The value in "Primary Key" column is also used for a record deleting.

Step 2: Create projection

What is a "Projection"?

  • On the back-end the "Projection" is the data selected from some tables linked with each other.
  • On the front-end the "Projection" is a separate page with the "Data Grid" control and forms for CRUD operations.
IKODIX

Create a new "Projection" and add one or multiple tables to the "Tables Links Diagram". Add one table to the diagram first. Then add another table that can be linked to the first one.

Now you can connect the columns of the tables in the diagram to indicate the relationships between tables.

IKODIX

Set the column as "Index" in the table description to add an extra link point to the table on the "Tables Links Diagram" in the "Projection" screen.

IKODIX

Step 3: Set up data view

Click the "View" tab in the "Projection" screen. Set up the "Data Grid" columns titles and set the order of the columns.

The front end application uses the "Data Grid" component to display a selection of data as a table. You can add any columns from the tables in the "Tables Links Diagram" to the "Data Grid" - just mark the column as "Visible".

IKODIX

Step 4: Set up forms

Click the "Create" tab in the "Projection" screen and configure the fields for the form creating a new record.

Do the same for the record editing form in the "Update" tab.

Please note, creating and editing is performed only for the root table in the "Tables Links Diagram".

IKODIX

The front-end application uses "Create Form" and "Update Form" components to receive data from the user and pass it to the back-end to create or update a record accordingly.

The form consists only of the fields that are needed to create or update the record in the root table in the "Tables Links Diagram".

Repeat 2, 3, and 4 steps to create multiple projections for different data sets. The application will have as many data pages as you create projections in IKODIX.

Step 5: Set up system settings

Make final preparations for the code generation - open "System Settings" screen and choose the database management system that you use.

Also, set the additional settings if needed.

Final step: Generate the code

Click on the "Download Source Code" button in the top panel.

Save the archived files on your computer.

Unpack the archive and follow the instruction in the "Readme" file in the root of the package.

IKODIX

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

Articles

Check out the tutorial to see how IKODIX helps you save a lot of time creating a CRUD full-stack application for MySQL database: Tutorial for MySQL