Code Export

Code Export in PIES Studio

You can seamlessly export your PIES Studio application into working code using this section. Currently, we support Flutter for the UI of your application and Golang for the application backend. You need to make a purchase or code export request, in order to export code.

• Go to Host & Export section on the left pane of desired application

• Under Code Export section, click New Request. Note: You will only be able to create a new request if you are an admin or if you have purchase access granted by admin

• On clicking new request, you will be taken to pricing details page. Here, you will be able to find the cost required to export code for your application. Pricing depends on the total number of objects used in the application. Objects include, Database Tables (excluding system generated tables), Screens, Functions & External REST API Endpoints (under Resources). You will find both individual object pricing and the overall price in this page.

Pricing shown is applicable only for the objects present at the time of code export request. Any objects added post the current code export will not be considered in the downloaded code.

• Click Proceed. You will get a confirmation popup. Click Confirm to proceed or Cancel to go back

• Upon confirmation, you will be navigated to payments page. Provide your card details in this page. Once payment is successful, you will be redirected back to Code Export page, where you can find the request with Active status.

• If the payment fails or if the request status is Pending, you can still complete the purchase using Complete Purchase icon. Or, if you wish to delete the existing request, you can do so by clicking delete icon against the desired request.

• Once the request is active, you will get a success message stating, Your purchase was successful.

• Under Export Options, you can download your application’s code as zip file. When you click on Download Now under Download as .zip, a zip file will be downloaded to your local machine with your application’s name as the file name.

• This file will contain three separate folders for Database, UI & Backend code. db contains the exported data model sql script, core folder will contain the backend code (functions) and web folder will contain the front-end code (screens & events).

• Even if you move away from this code export section, you can still come back anytime and download the code under History using Download Code icon.

https://youtu.be/5lgFulGsP74?si=ehlQb9oGxtFjWjPU

Exported Code Guide

Here is a comprehensive guide to the exported application code from PIES Studio application development platform.

Components

A successful code export from PIES Studio downloads a .zip file on the client machine
which contains the generated application code. The .zip file consists of three main
component folders, db, core and web.
The sections that follow explain the contents of each of the component folders and their
sub-folders in detail.

Database

The database schema code is contained in a .sql file generated inside the db folder. This
file contains all the schema definitions and queries required to set-up the application
database inside a MySQL 8.0 server

Backend

The core folder contains the code for the application backend server which acts as a tier
between the application’s frontend and the database.
The backend is a standalone HTTP REST server which connects to the application’s
database and exposes API endpoints which are consumed by the the application’s
frontend client.

Project Structure

The generated project folder consists of a HTTP server using Golang.

Assets

The assets folder contains all the static assets and the html email template files necessary
for the server.

Connector

The connector package connects and exposes the database connection and is used to
run queries on the application’s database.

Controller

The controller folder consists of the API endpoint handler methods for all the screens in
the application.
This is typically useful for form elements to pre-fetch the form data based on the page
route parameter.

Service

The service package consists of the service methods used by the screen API handlers
from the controllers package.

Model

The model package consists of model struct definitions for all the tables in the
application.
Each table in the application is converted to a table.go file which contains the model
struct for the table containing the table columns as the struct fields.

Interfaces

The interfaces package consists of the API endpoint handlers and service methods for all
the widgets in the application.
The package is further divided into sub-packages based on the application’s explorer
structure, and files are generated appropriate sub-folders.
Each file represents a screen and contains the API endpoint handlers and service
methods for the widgets on that screen.

Functions

The functions package consists of the API endpoint handlers and service methods for all
the functions in the application.
The package is further divided into sub-packages based on the application’s explorer
structure, and files are generated appropriate sub-folders.
Each file represents a function and contains the API endpoint handler and service
method.

Custom

The custom package consists of code for all the code blocks created in the application.
Each code block in the application is generated in it’s own separate .go file as a public
method.

Schedule

The schedule package contains the code for the scheduler which is used to automatically
schedule and execute application functions as background tasks.

Resource

The resource/api package contains the code for any defined external REST API endpoint
within the application.

Frontend

The web folder contains the code for the application’s frontend client, which is usually a
web application built using the Next.js or Flutter frameworks.
This guide assumes Next.js/React as the choice of programming language used for
generating the application code.

Project Structure

The generated project folder consists of a Next.js project with the following folder
structure.

Screens

• The app folder contains sub-folders representing routes for all the screens in the
application which compliant with the Next.js file-system based routing.
• Each screen folder consists of a [[…routeParam]]/page.tsx file which contains the
code for the screen router component with support for a dynamic and optional route
parameter.
• The screen folder also consists of a <Screen>.tsx file which contains the code for the
screen user interface component as well as the events used inside the screen.
• This screen user interface is generated as plain React component which can be reused
and referenced wherever required (e.g. popups).

Actions

• The actions folder contains code for all the server-side actions which are used by the
screen widgets as well as event steps like Call Function to interact with the
application’s backend server.
• Each server action calls the appropriate API endpoint and returns the response received
from the application’s backend server.

Components

• The components folder consists of code for reusable UI components or widgets that
used to render different parts of the screen.
• The folder consists of individual files like dropdown.tsx, table.tsx, form.tsx, etc. each
of which contain the code for the specific UI component.

Public

The public folder contains all the static assets and files necessary for the application,
typically the application logo and icon images