Quick Start Tutorial

We hope this documentation gives you a glimpse of the incredible possibilities GenioWeb offers. Get ready to unleash your creativity and build powerful, customized solutions in no time!

If you have any questions or need further assistance, don't hesitate to reach out. Happy coding with GenioWeb!

This tutorial contains the essential information for a complete development cycle—from accessing the platform to deploying the solution. You can find detailed guidance on each step by navigating to the other pages in this documentation.

Content

First steps

Genio Hub Portal

Navigate to GenioHub Portal. Once there, log in using your designated credentials.

NOTE: If you don't have any credentials, please contact support.genio@quidgest.com

geniohub

  1. Click the Login button on the top right.
  2. Insert your credentials

Once logged in, you may manage your existing Models, or create new ones.

geniohub_models

Get more information following the GenioHub page.

Model Creation

  1. To create a model:
    1. Click the Insert button
    2. Set the system name
    3. Base language
    4. Genio version
    5. By default the creation mode is New Model. To create from a backup, change the creation mode to Database attachment
      1. Upload the backup
    6. Save the record
  2. The model will go through several states; wait until it becomes available.
  3. Click the corresponding card to open GenIO
  4. By default, the base model already contains the minimum required to be generated and configured.

Model with Version Control

Any model already created can use the Version Control System (VCS), which allows a team to work concurrently on the data model using branches of the main repository. Using this system requires additional licensing. This setup requires a repository management tool (e.g., GitHub, GitLab…) and a repository created beforehand.

Get more information following the Genio VCS page.

  1. After creating the model, edit the corresponding card.

    1. A new tab named version control will be available.

  2. To configure the repository:

    1. Add the repository URL; ensure the repository is empty (e.g., https://github.com/XXXXX)
    2. Select o Provider repository (e.g., GitHub)
    3. Set the username and access token
    4. Click Test connection to validate the settings
    5. Click Setup to enable version control on the model. vcs_setup

  3. After setup finishes, the model status should be “VCS”.

  4. Click the model card

    vcs_card

    • Esta ação abre uma janena que permite diferentes funcionalidades relacionadas ao modelo com versionamento. Funcionalidades tais como, integrar o branch no tronco principal, ver, descartar e log de alterações entre outras.

    vcs_branchs

  5. Insert a new branch using the Create branch button

  6. Name the branch to reflect the feature being added.

vcs_newbranch

  1. While you wait, you can check the creation status with the “Refresh” button.
  2. After the branch is created, click the branch to open GenIO.

Development Cycle

Insert the Data Model Structure

  1. Go to Data -> Tables
  2. Insert a new table
    1. Set the identifier (e.g., MESSG)
    2. Set the singular and plural names (e.g., Message ; Messages)
    3. Click the create required content button (this action creates the primary key and opens the remaining configuration). genio_tablecreation
    4. Insert a field into the list of fields
      1. Set the field identifier (e.g., MESSAGE)
      2. The field name (e.g., Message)
      3. The data type (e.g., Text)
      4. The field size (e.g., 50) genio_fieldcreation
      5. Save the field
  3. After adding all fields, save the table.

Create and Design Interfaces

  1. Go to Forms -> Forms
  2. Insert a new form
    1. Assign an identifier (e.g., F_MESSG)
    2. Set the table that the form is based on (e.g., MESSG)
    3. Set the title (by default, it’s prefilled with the table’s singular name)
    4. Click add components
      1. This action converts all existing table fields into their respective components. genio_formcreation
    5. Alternatively, manually add the components to the form.
    6. Save the form.
  3. In the created form, open the Form Editor to improve the layout and assign coordinates. genio_formeditor
  4. Save the form in the form editor.

Define the Navigation Structure

  1. Go to Navigation -> Menus

  2. Click the Add Menu Structure button

  3. Drag the table to create navigation and drop it into the module with the same name

    1. This action creates a navigation structure: Menu -> List -> Form
    2. Clicking the menu shows the list
    3. Clicking a row in the list shows the corresponding form

  4. Alternatively, add each navigation element manually using Add Single Items

Code Generation

  1. Go to Generation -> Generate Application
  2. Select the application to generate code for
  3. Click Generate
  4. Click the Solution and WebAdmin buttons to download the resulting files.
    1. Code generation can be backed by a versioned repository.
    2. When using a repository, you don’t need to download the files; however, you must configure the repository before generating the code.

Configure the Repository (Optional)

This setup requires a repository management tool (e.g., GitHub, GitLab…) and a repository created beforehand. See more here.

  1. Go to Settings -> Global Configuration
  2. Ativar a check box Git Integration after generation
    1. Add the repository URL; ensure the repository is empty or only contains the README.
      1. Note: If you are using VCS, use a repository URL different from the one used in the initial SETUP.
    2. Set the branch for generation (e.g., main)
    3. Set the username and access token
    4. Save Configuration

Testing Cycle

  1. Folder Structure
  2. Full development environment
  3. Quick development environment

Folder Structure

After generating the code, you should have local access (on your computer) to the generated code.

CASE 1: Download the Generated Folders

  1. Open the file explorer
  2. Create a folder in an accessible location with the name you prefer (e.g., C:/Projects)
  3. Create a folder named after the created model (e.g., FOR_model)
  4. Unzip the downloaded folders into this new folder genio_folder1

CASE 2: Versioned Code Generation

  1. Open the file explorer
  2. Create a folder in an accessible location with the name you prefer (e.g., C:/Projects)
  3. Open a terminal/command prompt in this folder
  4. Insert the command git clone <URL>
    1. E.g. git clone https://github.com/XXXXX
  5. Then press the Enter key
    1. This action will create a folder containing the repository genio_foldergit
    2. The MYAPP and WebAdmin folders are located inside the GEN_QUIDGEST folder

NOTE: In both cases, the folder structuring steps should only be performed the first time you obtain the project.

  • For CASE 1, from the second generation onwards, you only need to “Unzip the downloaded folders into this new folder.”
  • For CASE 2, with Visual Studio 2022 open, you can use the integrated Git tools and just proceed with git pull in the command line or click in the Git->pull menu.

Testing in a Full Development Environment

A full development environment assumes all tools from the installation manual are installed. See more here

  1. Open the WebAdmin folder and open the Webadmin.sln file
  2. Inside the WebAdmin and MYAPP folders you will find the Visual Studio project files WebAdmin.sln and GenioMVC.sln, respectively.
  3. It is essential to open WebAdmin.sln first to configure database settings and solution access.

genio_folders

Compile and Build the Solutions

  1. After opening Visual Studio 2022, go to Project -> Configure Startup Projects
    1. Perform this action in both solutions (Webadmin.sln and GenioMVC.sln)
  2. Select the Multiple Startup Projects option
  3. In WebAdmin:
    1. Change the action to Start for the ClientApp and Administration projects; genio_webadmin_startup
  4. In GenioMVC:
    1. Change the action to Start for the ClientApp and GenioMVC projects; genio_app_startup
  5. Start compiling and building the applications by clicking the Start button genio_start
  6. This will compile the code and use Visual Studio’s web server to emulate the application on a localhost port.
  7. Wait for the solution to open in the browser.

Configure the Administration Solution (Webadmin)

  1. After building, you will see the solution in your browser.
    1. Webadmin: http://localhost:8202/
  2. The first time the solution opens, it requires initial configuration to support the data system.
    1. Click the Create System configuration button
      1. This action will create a Configuracoes.xml file in the ..WebAdmin\Administration folder webadmin_configuration_file
    2. Fill in the database server name (e.g., PC1)
    3. Fill in the database name (e.g., FOR_2025)
    4. Enter the access credentials for your database server
    5. Save a Configuration
  3. Go to the Database Maintenance menu
    1. This menu includes all scripts that interact with the database, such as creating the database, keys, fields, and more.
    2. Enter the database access credentials again
    3. Run the maintenance tasks
  4. Go to the User Management menu
    1. Insert a new user
    2. Assign a login name (this will be used as the username)
    3. Enable the Change password option
    4. Escreva e confirme a password.
    5. Assign a role granting access to the application.
    6. Save o user.

Application Solution

  1. After building, you will see the solution in your browser.
    • GenioMVC: https://localhost:5173/

Quick Test Environment (Containers)

A contained development environment only requires Docker to be installed. Docker handles compilation and building of the solutions. Windows Environment

  1. Open the MYAPP folder
  2. Run the start.bat file
    1. Running this file will open a command line where you can follow the entire process.
    2. When it finishes, press Enter to continue with database maintenance.
    3. After completion, you can access both WebAdmin and MyApp at http://localhost:3031/# and http://localhost:3030/#, respectively.

macOS Environment

  1. Open the MYAPP folder
  2. Open a terminal in this folder
  3. Open the start.bat file
  4. Copy the commands to be executed
    1. The first command compiles and builds the applications
    2. The second performs database maintenance

docker_solution