This is the documentation site of Cloud-Wizard platform, you may need to check the official website.

Documentation of cloud-wizard.com platform is being updated, for the previous documentation, please check the links below.

1. Cloud-Wizard Version 3

  • Coming Soon

2. Cloud-Wizard Version 2

Clowiz (Cloud-Wizard) User Guide

This section includes the user guide of Clowiz platform. It consists of a description about Clowiz in general, followed by comprehensive information about by Clowiz applications (apps): CodeGen, FeatureGen, and AppGen.

1. Introduction

Clowiz is a cloud-based platform that aims to increase the productivity of teams working on developing software projects, and reducing the cost and time of developing high-quality software applications.

Clowiz utilizes the model-driven development approach, where users can generate and develop software artifacts using visual design tools without writing code. The code generation is based on metadata information provided by the platform’s users.

  • CodeGen App: An Online code generator that enables users to generate a single artifact unit of code at a time, such as Java class, HTML page, or MySql SQL script. This app is designed to increase the productivity of software engineers, web developers, and database developers so that they can have their day to day artifacts generated rapidly without writing code.

  • FeatureGen App: An online end-to-end code generator, that enables full-stack software developers to develop all the artifacts required for a fully functional page. FeatureGen app follows the MVC design pattern, where it generates the code for the view (page), model, controller, and database script.

  • AppGen App: AppGen is an online application development app, that enables technical and non-technical people to develop software applications without writing code. With AppGen, users can create applications, design the artifacts, preview a full prototype, and download the end-to-end full source code for their projects, without writing a single line of code. With AppGen, designing applications is a straightforward process, which includes, configuring the application modules (sub-apps), page-groups (menus), and pages (views). Designing the pages is also as simple as configuring the fields of that page (metadata).

To evaluate Clowiz apps, or creating quick proof of concepts, users can work in the Guest Mode without creating accounts or signing in. However, in this case, nothing of their work will be saved.

It is highly recommended that every user Login or Sign Up to the platform before start creating artifacts or apps, especially in the AppGen app.

The following sub-sections include the details of the applications of Clowiz.

2. CodeGen App

CodeGen is an app that generates source code artifacts for different technologies using the model-driven development approach. To access the CodeGen app, navigate to https://www.clowiz.com/code-generator.

The artifacts created by FeatureGen is just for ad-hoc needs. To have the work saved and organized in a more modular way, users should consider using AppGen app.

As shown in Figure 1, the view consists of four main components: - The Metadata on the left side. - The Technologies section on the center top side. - The Exporters of the selected technology. - The Generated Code in the middle center of the view.

codegen desc
Figure 1. CodeGen App Page
CodeGen does not provide a full project structure and configurations, so users will need to include the generated artifacts into their projects manually. For a more robust and comprehensive option, users may consider using AppGen app to create a fully configured end-to-end applications.

CodeGen automatically generates code based on the information that the users configured in the metadata data section in the left side of the page.

2.1. CodeGen Metadata

The metadata required to generate source code in CodeGen is quite simple.

As shown in Figure 2, the metadata includes:

  • [Unit] name: is the name of the unit to be generated, which depends on the selected technology. For example, if the selected exporter is Java, the unit name will be the Class name, and if the selected exporter is MySql, then the unit name will be the table name.

  • Fields: the fields are the part of the unit to be generated. The actual meaning of these fields depends on the selected exporter, for example, in Java classes, this means the instance variables, while in the HTML exporters, it means the HTML input fields and their assigned labels.

codegen metadata
Figure 2. CodeGen Metadata

2.1.1. Add Field

To add new fields to the metadata, click on the New Field button, this will automatically add a field to the list with the name automatically set on that field.

2.1.2. Modify Field

To change the field name, just change the value directly in the input box that contains the current field name. In addition, a user can change the field data type, and configures whether it is required or not.

2.1.3. Delete Field

To delete a field, click on the trash icon on the last column in the metadata table.

2.2. Fields Data Types

Every field should have a data type that will be used by the exporter to generate the code correctly. By default the data type of the fields is text.

Unresolved directive in v2/references/codegen.adoc - include::_inc_datatypes.adoc[]

2.3. Technologies

CodeGen supports different technologies that can be selected by the platform’s user. Every technology consists of different exporters (generators), that can generate software artifacts for the configured metadata. Currently, CodeGen supports the Java, HTML, and SQL technologies.

2.3.1. Java

Java technology support in CodeGen consists of the following exporters:

2.3.1.1. Java Class Exporter

This exporter generates java class based on the metadata, where the fields in the metadata represent the instance variables in the Java class.

As shown in Figure 3, the generated code follows the best practices of java naming and convention. In addition, it follows the best practices of encapsulation by restricting access to the instance variables and expose them using setters and getters.

codegen java
Figure 3. Java Class Exporter in CodeGen
2.3.1.2. Java Class with Lombok Exporter

This exporter generates java class with Lombok support based on the metadata, where the fields in the metadata represent the instance variables in the Java class. As shown in Figure 4, the generated code does not include the setters and getters for the instance variables because Lombok will generate them for free during the compilation phase.

codegen java lombok
Figure 4. Java Class with Lombok Exporter in CodeGen
2.3.1.3. JPA Entity Exporter

JPA Entity exporter exports Java classes including the full annotation required by Java Persistence API, which could be used to persist objects of this class to a relational database.

JPA Entity exporter is shown in Figure 5.

codegen jpa
Figure 5. JPA Entity Exporter in CodeGen
2.3.1.4. JPA Entity with Lombok Exporter

JPA with Lombok exporter exports the entity into JPA entity with Lombok support, which can reduce the lines of code dramatically by eliminating the need of writing setters and getters. Figure 6 shows JPA with Lombok exporter.

codegen jpa lombok
Figure 6. JPA Entity with Lombok Exporter in CodeGen
2.3.1.5. JSF Managed Bean Exporter

JSF Managed Bean exporter exports the entity into annotated JSF managed bean Java class that extends JKManagedBeanWithOrmSupport class which is provided by the Smart-Cloud framework, which includes all the required functionalities to enable high-quality CRUD operation in the view. The exporter is shown in Figure 7.

codegen jsf mb
Figure 7. JSF Managed Bean Exporter in CodeGen
2.3.1.6. PrimeFaces View Only Exporter

This exporter used to generate PrimeFaces view code only. PrimeFaces is a web-based user interface widgets that enable rich user experience for JSF based applications. As shown in Figure 8, this exporter does not include binding the user interface components with the backend model or controller.

codegen primefaces view
Figure 8. PrimeFaces View Exporter in CodeGen
2.3.1.7. PrimeFaces with Backend Exporter

PrimeFaces exporter with Backend binding includes generating PrimeFaces view and the binding code with the model and the backend. As shown in Figure 9, the binding is based on binding with JSF Managed Bean Exporter and JPA Entity Exporter.

codegen primefaces with backend
Figure 9. PrimeFaces with Backend Binding Exporter in CodeGen

2.3.2. HTML

The HTML technology in CodeGen includes exporters for: HTML Only, HTML with Bootstrap Styles, and HTML full page with Bootstrap.

2.3.2.1. HTML Only Exporter

In this exporter, CodeGen will generate the required input HTML fields based on the field’s metadata data type. The HTML input tags will be surrounded by fieldset and form tags. The HTML Only exporter is shown in Figure 10.

codegen html only
Figure 10. HTML Only Exporter in CodeGen
2.3.2.2. HTML with Bootstrap Exporter

This exporter generates a complete HTML form with its input components and labels components attached to these input fields. In addition, it includes the CSS styles of the Bootstrap framework on every component as needed. Figure 11 shows HTML with Bootstrap exporter.

codegen html Bootstrap
Figure 11. HTML with Bootstrap Exporter in CodeGen
2.3.2.3. HTML Full Page with Bootstrap Exporter

This exporter generates full HTML page the includes:

  • Bootstrap framework.

  • JQuery framework.

  • Bootstrap theme.

  • Fonts Awesome library.

  • Selected Google Fonts.

  • Compete HTML form for the configured metadata.

HTML Full Page with Exporter is shown in Figure 12.

codegen html full
Figure 12. HTML Full Page with Bootstrap Exporter in CodeGen

2.3.3. SQL

The SQL technology section consists of exporters that generate scripts for various relational database engines such as MySql, H2, SQL Server, PostgreSQL, and Oracle.

2.3.3.1. H2 Database Exporter

This exporter will generate the script that creates a database table for H2 database, which is a lightweight database engine that is heavily used in proofs-of-concept, unit testing, and integration testing, as shown in Figure 13.

codegen h2
Figure 13. H2 Database Exporter in CodeGen
2.3.3.2. MySQL Database Exporter

This exporter generates a create table statement for the configured metadata with the specific syntax of MySQL database. MySQL exporter is shown in Figure 14.

codegen mysql
Figure 14. MySQL Exporter in CodeGen
2.3.3.3. Microsoft Database Exporter

The exporter is generating the SQL script for Microsoft SQL server database. It generates full create table statement, as shown in Figure 15.

codegen sqlserver
Figure 15. Microsoft SQL Server Exporter in CodeGen
2.3.3.4. Oracle Database Exporter

Oracle database exporter used to generate the script that is compatible with Oracle database. It generates full create table statement, as shown in Figure 16.

codegen oracle
Figure 16. Oracle Exporter in CodeGen

Unresolved directive in v2/references/codegen.adoc - include::php/php-laravel.adoc[]

3. FeatureGen App

FeatureGen is one of the core apps in Clowiz platform that generates end-to-end artifacts for a page. It can be accessed at https://www.clowiz.com/feature-generator.

FeatureGen does not provide a full project structure and configurations, so users will need to include the generated artifacts into their projects manually. For a more robust and comprehensive option, users may consider using AppGen app to create a fully configured end-to-end applications.

The usage of FeatureGen is as simple as configuring that fields (metadata) that compose the page (view), then a realtime preview for the page is shown in the middle of the page, and the full generated source code artifacts are shown in the bottom of the view.

As shown in Figure 17, the page consists of the following sections:

  • Metadata.

  • Technology Stack.

  • Page Preview.

  • Generated code.

featuregen
Figure 17. FeatureGen App Page

3.1. FeatureGen Metadata

The metadata required to generate source code in FeatureGen is quite simple.

As shown in Figure 18, the metadata includes:

  • Page name: is the name of the page to be generated.

  • UI Columns: is the number of columns to render the user interface. This number should consider the labels as well. For example, if the page only has one field, and the desired output is to have the label next to the input field on the same row, then the number of columns should be 2, but if the desired output is to have the label above the field, then the value should be one.

  • Fields: the input fields of the desired page.

featuregen metadata
Figure 18. FeatureGen Metadata

3.1.1. Add Field

To add new fields to the metadata, click on the New Field button, this will automatically add a field to the list with the name automatically set on that field.

3.1.2. Modify Field

To change the field name, just change the value directly in the input box that contains the current field name. In addition, a user can change the field data type, and configures whether it is required or not.

3.1.3. Delete Field

To delete a field, click on the trash icon on the last column in the metadata table.

3.2. Fields Data Types

Every field should have a data type that will be used by the exporter to generate the code correctly. By default the data type of the fields is text.

Currently, the fields metadata support the following datatypes:

  • Text

  • Integer

  • Float

  • Double

  • Boolean

  • Binary

  • Month

  • Time

  • Timestamp

  • Date

  • Email

  • Password

  • Telephone

  • URL

  • LongText

3.3. FeatureGen Technology

The technology stack section in the FeatureGen is used to determine the exporters (generators) that will be used to generate the final artifacts.

The currently supported technology stacks in Clowiz platform are:

  • Java Standard Edition: Java Class, Java Class with Lombok.

  • Java Enterprise Edition: JPA Entity, JPA Entity with Lombok, JPA Entity with Lombok, PrimeFaces View, PrimeFaces View.

  • SpringBoot: Spring Data Service, Mature Rest Controller, Spring Data Rest Controller, REST Shell Test, JSON Object.

  • Spring MVC: MVC Controller, MVC View.

  • HTML and Bootstrap: Full HTML page with Bootstrap styles, HTML Form only without styles, HTML Form only with Bootstrap styles.

  • Database: H2 Database, SQL Server Database, Oracle Database, PostgreSQL database.

  • Angular: Component, Form, Model, Service.

  • Python / Flask: Form, Layout, Model, Template, View.

  • PHP / Laravel: Model, Controller, Resource, Request, Vue View, Migration, Views (Show, Create, Edit, Index).

  • Android: Adapter, Activity, API Client, End Point, Entity, Fragment.

  • iOS Swift: View, Controller, Model, Service.

3.4. Feature Page Preview

This section will enable the users to view the exact final pages prototype that will be generated by FeatureGen, with the default style provided by Clowiz.

The preview section is intended to be a prototype preview for the end users, and does not provide a functional user-interface.

3.5. FeatureGen Generated Code

This section shows the full artifacts generated for this page. Since the FeatureGen app follows the MVC design pattern, the generated code will include the view (page), model, controller, and the database script which is required for the relational database engine configured in the technology stack.

The artifacts created by FeatureGen is just for ad-hoc needs. To have the work saved and organized in a more modular way, users should consider using AppGen app.

4. AppGen App

The AppGen app of Clowiz platform is a new innovative way of building cloud-based software applications. It enables the model-driven approach, where users use graphical modeling tools to create and develop software applications. AppGen can be accessed at: https://www.clowiz.com/app-manager.

The AppGen consists of the following views:

  • App Manager.

  • App Designer

  • Page Designer

4.1. App Manager

The App Manager is the main entry of the AppGen. As shown in Figure 19, the App Manager consists of the following:

  • Create New Software Applications: this action is used to create a new application. The new application will be shown in the User’s Applications area. The status of the application will be Development Status as discussed in [AppGen Application Status]. The application will be named Application X where X represents the number of current applications +1 of the user.

  • User’s applications: this represents the list of the current applications that were created by the user.

If the user works in Guest Mode, the list will show the applications that marked as Public by other users. Any applications created by the user in this mode will be discarded when the user navigates to other views.
appgen home
Figure 19. Clowiz AppGen Home Page

The applications in the AppGen will have an assigned status that will be shown next to or under the application name in the AppGen home page.

The status can be:

  • Development Status: indicates that the project is still under continuous development.

  • Deployment Status: indicates that the applications are deployed on the cloud using AppDeployer App.

  • Archiving Status: indicates that the project is archived and is not under active development.

The available functionalities for every application depend on the status. In general, users can Design, Preview, Download Source Code, Deploy, Archive, UnArvice, or Delete projects.

4.1.1. Design Application

This action launches the App Designer for designing the high-level artifacts of the app.

4.1.2. Preview Application

This action launches a complete none-functional prototype of the application. The prototype includes the home page, the menu-bar, and all the pages design.

4.1.3. Download Source Code

This downloads a complete, end-to-end, web-based, software project source-code package. The package will be downloaded as a compressed package.

The main contents of the application downloaded package are :

  • Main: a launcher class that enables running the application without the need of web server.

  • Project Configuration: a Maven POM file, which is a standard project configuration for the Java technology, so that it can be imported with any Java IDE.

  • Pages: a generated JSF view code for all the pages in the application.

  • Models: a generated JPA entities code for all the pages.

  • Controllers: a generated JSF managed bean classes which act as controllers for the views.

  • Theme: a complete theme of the web applications based on PrimFaces, BootStrap, Fonts-Awesome, and others.

  • Template: a Facelet template, which is based on the standard template engine provided by the JSF framework. The views extensively use PrimeFaces widget libraries.

  • Logging Configurations: configuration for SLF4J logger.

  • Configuration: a configuration file for the database.

The downloaded application does not require a separate database or a web server installation, embedded server and database engines are provided out of the box.
The package utilizes some components from the Smart-Cloud framework, so compatibility with cloud providers is provided out of the box. Currently, the framework supports Pivotal Cloud Foundry (PCF) environment.

4.1.4. Deploy App

This action launches the application to the cloud using AppDeployer App.

4.1.5. Archive App

This action changes the status of the app to Archiving status.

4.1.6. UnArchive App

This action changes the status of the app to Development status.

4.1.7. Delete App

This action deletes the app permanently. This action is only available in the archive status.

4.2. App Designer

The App Designer is one of the pages of AppGen app of Clowiz platform; it enables users to configure the required high-level attributes of their applications using cloud-based design tool.

The main components of the App Designer, as shown in Figure 20, are:

  • Application name: which is an input text field that allows users to change the application name.

  • Actions: includes the actions that users can do in this page, which includes: Save Changes, Save Changes and Back, or Ignore Changes and Back.

  • Advanced Mode: a checkbox that enables the advanced features which includes:

    • The Multi-Module support: where users can divide the application into subsystems (modules).

    • Advanced Attributes: which includes the advanced attributes of the currently selected application.

  • Page-Groups: this section includes the page groups (menus) of the application. Pages group will be rendered as the main menu in the final generated code.

  • Pages: the page component represents the page that will be generated under this page group (menu). This page will be rendered as a menu item under the page group.

appgen appdesigner
Figure 20. The App Designer page of the AppGen application

4.2.1. Create Page Group (Menu)

To create a page group, users need to click on the New Pages-Group button in the center of the page. This will create a new page group with a name automatically set. The group name can be changed by clicking on the header of the group and edit the name. This will make this page group appears as menu-bar inside the application menu bar.

4.2.2. Create new Page

To create a new page, users should click on a New Page button inside any page group; this will create a new page inside that group. This will add a menu item under the page-group menu in the final application menu bar.

Clicking on any page will open the Page Designer view for that page, which is discussed in Page Designer section.

4.3. Page Designer

The page designer view is the view that enables users to design the contents of any page without writing code. To design a page can be opened by clicking on any page in the App Designer.

As shown in Figure 21, the page designer view consists of:

  • Metadata: this section includes the metadata required for designing the page.

  • Page Preview: which shows the realtime preview for the page. The preview includes two parts, Form Preview and Data-table Preview.

  • Generated Code: which is a checkbox the enables user to preview the code that will be generated for this page.

appgen page designer
Figure 21. The Page Designer page of the AppGen application

The metadata section is the part which determines how the code will be generated for this page. The metadata includes page-level metadata, and the fields metadata.

The high-level metadata information for the page are:

  • Page name: which will be used in the menu item, in the page title, and all the other artifacts names.

  • UI Columns: which determines the number of user interface columns for the generated form.

The fields metadata include the configurations of every field individually.

For every field, there are core properties that are shown directly on the front of the Page Designer, and there are more advanced metadata that can be shown by clicking on the advanced edit icon in the field row in the fields metadata table.

Table 1 shows the list of the field attributes with their description.

Table 1. Fields Metadata Attributes in the Page Designer View
# Attribute name Description

1

Name

Field name

2

Data Type

Field datatype

3

Required

Required or optional

4

Enabled

Enabled or disabled in the user interface

5

Updatable

Updatable

6

Main field

Main field of the entity generated for this page (e.g., in Java, this will be part of the toString() method). This can be helpful of this page is used as a reference in other pages

7

List of values

Comma separated values that will be rendered as a multi-choice select box, for example, "A,B,C"

8

Default value

The default value for this field

9

Visible

Determines whether to show this field on the user interface or not

10

Show in Datatable

Determines whether to show in the generated datatable or not

11

Max length

The maximum length for this field

12

Width

The width of this field in the user interface

13

Height

The height of this field in the user interface

14

Background color

The background color of this field. Any valid CSS color value is accepted

15

Color

The font color of this field. Any valid CSS color value is accepted

16

Linked with Page

Determines whether this field is linked with other pages in a relation (e.g., foreign key relationship)

17

Reference Page

If the Linked with Page checkbox is checked, this will determine the page that this field is related with

18

Reference Field

If the Linked with Page checkbox is checked, this will determine the field in the selected page, that this field is related with
Currently, the fields metadata support the following datatypes:

  • Text

  • Integer

  • Float

  • Double

  • Boolean

  • Binary

  • Month

  • Time

  • Timestamp

  • Date

  • Email

  • Password

  • Telephone

  • URL

  • LongText

When the user is done with modifying the page, he/she can click on the Back button to get back to the App Designer.